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

こんにちは、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サイトのサイズに合わなかったり、ドキュメントに余白が生まれたりする場合があります。

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

See the Pen スプシ埋め込み例 by seiya-dev-uiux (@seiya-dev-uiux) on CodePen.

ぜひ、触ってみてどのように変化しているかを確認してみてください。

そんな感じです。


Asset
22 Posts
Bygone
28 Posts
Coding
14 Posts