【Googleスプレッドシート】HTML形式で公開!IFRAMEで他サイトに表を埋め込む

Googleスプレッドシートで作成した表を、自分のウェブサイトやブログにそのまま表示したいと思ったことはありませんか。スクリーンショットを貼るのではなく、動的に更新される表を埋め込む方法があります。この記事では、スプレッドシートをHTML形式で公開し、IFRAMEタグを使って他サイトに埋め込む手順を解説します。公開設定の方法から、埋め込みコードの取得、注意点までをわかりやすく説明します。

スプレッドシートをWeb公開する仕組み

Googleスプレッドシートには、作成したデータをウェブ上に公開する機能が用意されています。この「ウェブに公開」機能を使うと、スプレッドシートの内容がHTML形式で公開され、誰でも閲覧できるようになります。公開されたデータは、通常のURLで表示できるほか、IFRAMEタグを使って他のウェブサイトに埋め込むことも可能です。埋め込まれた表は、スプレッドシートの元データが更新されると自動的に反映されるため、常に最新の情報を表示できます。ただし、公開設定を行うとインターネット上の誰でもアクセスできる状態になるため、個人情報や機密データは絶対に公開しないでください。

スプレッドシートをHTML形式で公開しIFRAMEで埋め込む手順

公開設定を行う

1. スプレッドシートを開く
   埋め込みたい表が含まれるスプレッドシートを開きます。複数のシートがある場合は、公開したいシートをアクティブにしておきます。
2. 「ファイル」メニューを開く
   画面上部の「ファイル」メニューをクリックします。
3. 「共有」→「ウェブに公開」を選択
   「ファイル」メニューから「共有」にカーソルを合わせ、表示されたサブメニューから「ウェブに公開」をクリックします。
4. 公開範囲を設定
   ダイアログが開いたら、「リンク」タブで「ドキュメント全体」または「特定のシート」を選びます。シート名を指定すると、そのシートだけが公開されます。公開形式は「ウェブページ」を選択します(埋め込みの場合はこれでOKです)。「公開」ボタンをクリックし、確認のダイアログで「OK」を押します。
5. 埋め込みコードをコピー
   公開が完了すると、URLと「埋め込む」タブが表示されます。「埋め込む」タブをクリックすると、IFRAMEタグが表示されるので、それをコピーします。コードは <iframe src="..." width="..." height="..."></iframe> のような形式です。

埋め込みコードをサイトに貼り付ける

1. 埋め込み先のHTMLを開く
   自分のウェブサイトのHTMLファイルや、ブログの編集画面を開きます。
2. IFRAMEタグを貼り付ける
   表を表示したい位置に、先ほどコピーしたIFRAMEタグを貼り付けます。WordPressなどのCMSでは、カスタムHTMLブロックを使って貼り付けます。
3. サイズを調整する(必要に応じて)
   IFRAMEタグのwidth属性とheight属性を編集して、表示領域の幅と高さを変更できます。単位はピクセルまたはパーセントです。例えば width="100%" height="400" のように設定します。
4. 変更を保存して確認
   HTMLファイルを保存し、ブラウザでページを開いて正しく表示されるか確認します。スプレッドシートのデータが表示されていれば成功です。

公開と埋め込みに関する注意点

データの更新にタイムラグがある

公開されたデータは、スプレッドシートの変更がすぐに反映されるわけではありません。通常は数分程度の遅延があります。即時反映が必要な場合には、公開設定をやり直すか、Google Apps Scriptなど別の方法を検討してください。

プライベートデータを誤って公開しない

「ウェブに公開」を実行すると、そのデータは誰でもアクセス可能になります。パスワード保護はなく、検索エンジンにインデックスされる可能性もあります。個人情報や社内データなど、外部に見せたくない情報は絶対に公開しないでください。公開前にシートの内容をよく確認しましょう。

IFRAMEのスクロールとレスポンシブ対応

デフォルトのIFRAMEには高さが固定されており、表のサイズがそれを超えるとスクロールバーが表示されます。overflow属性を使ってスクロールを制御することもできます。また、レスポンシブデザインに対応させるには、CSSでmax-width:100%を設定するなど工夫が必要です。例えば <iframe style="max-width:100%;" src="..."></iframe> とします。

公開を取り消す方法

公開を停止したい場合は、再度「ファイル」→「共有」→「ウェブに公開」を開き、「公開済みのコンテンツ」セクションの「公開を停止」ボタンをクリックします。これで埋め込みも無効になります。

公開方法の比較

まとめ

スプレッドシートをHTML形式で公開し、IFRAMEで他のサイトに埋め込む方法を解説しました。公開設定は「ファイル」→「共有」→「ウェブに公開」から数クリックで完了し、生成されたIFRAMEコードを貼り付けるだけで動的な表を表示できます。ただし、誰でもアクセスできる点には注意し、機密データは絶対に公開しないでください。また、表示サイズやスクロールの調整、更新のタイムラグを理解した上で利用しましょう。次のステップとして、埋め込みコードのCSSカスタマイズや、複数のシートを切り替える方法を試してみると、さらに便利に使えます。