【最新版】GoogleのサービスをWEBサイトに埋め込んで公開する方法【画像あり】

Late night nobody Shibuya

 

こんにちは、Google信者になっている書川(かきかわ)です。

 

Googleのスプレッドシート、スライド、ドキュメントなど、

GoogleのサービスをWEBサイトに埋め込む方法を紹介していきます。

 

埋め込んだファイルの元のデータを変更したとしても、

その変更点はリアルタイムで反映されるため、

資料作成でHTMLタグでテーブルを作成したり、

スクショの画像を貼り付けたりするよりも簡単かつ有効なのでおすすめです。

 

WEBサイトに埋め込んだ時の実用例

 

実際に、僕のWEBサイトでもすでに活用しております。

 

◆コンタクトフォーム

→こちらのページでは、「Google Forms」のサービスを利用しています。

 

◆スプシの元号変換

→こちらのページでは、「Google Spreadsheets」のサービスを利用しています。

 

WEBサイトに埋め込むファイルを選択

 

●まずはじめに、WEBサイトに埋め込みたいファイルを開きましょう。

メニューにある [ファイル] → [ウェブに公開…] を選択しましょう。

Open spreadsheet file

 

●次に、公開する方法を選択します。

今回僕は公開する方法を「リンク」ではなくWebサイトに埋め込んで表示をさせたかったので、「埋め込む」を選択しました。

スプレッドシートには「シート」がありますので、特定のシートだけか、ドキュメント全てかを選択します。

間違いがなければ「公開」を押しましょう。

Select Spreadsheet Embedding

 

●念入りに確認されます。

本当に全世界に公開しても大丈夫なデータであれば「OK」です。

Allow Spreadsheet Embedding

 

●最後に、埋め込むコードを選択して、公開したい場所に貼り付けましょう。

Copy Spreadsheet Embed Code

埋め込むドキュメントのサイズを調整する方法

 

埋め込むコードをそのまま貼り付けても全く問題はありませんが、

WEBサイトのサイズに合わなかったり、ドキュメントに余白が生まれたりする場合があります。

 

その時には以下のように高さと幅を調整するコードを付け加えてみましょう。

 

↑ボタンをぽちぽちして、どのように変化しているかを確認してみてください。

 

 

この記事が少しでもいいなぁと思ったら、

下にあるボタンからシェアしていただけると、ものすごく嬉しいです!

よろしくお願いします!