草野球成績管理表の作り方【第83回】試合当日シートをホームページに埋め込む方法

前回までで試合当日（野手）・試合当日（投手）両シートの見た目が整いました。今回はいよいよそのシートをホームページに掲載する手順を解説します。

Googleスプレッドシートには、シートをウェブページに埋め込む機能が最初から備わっています。WordPressに特別なプラグインは不要で、コピー＆ペーストだけで試合成績がホームページに自動反映される仕組みが作れます。スプレッドシートを更新するたびに手動でホームページを編集する必要がなくなるのが大きなメリットです。

埋め込みの仕組みを理解する
STEP 1：スプレッドシートを「ウェブに公開」する
STEP 2：埋め込み用のコードを取得する
STEP 3：WordPressに貼り付ける
STEP 4：表示サイズを調整する
野手シートと投手シートを両方埋め込む場合
埋め込み後に反映されるまでのタイムラグ
公開設定の注意点：フォームの生データは別シート
実際のページ表示イメージ
次回予告

埋め込みの仕組みを理解する

操作の前に、何が起きているのかを理解しておきます。

📝 埋め込みの仕組み（一言でいうと）

Googleスプレッドシートを「ウェブ上で誰でも閲覧できる状態」にしたうえで、その表示用URLをホームページのHTMLに貼り付けます。訪問者がホームページを開くと、スプレッドシートの内容がホームページ内にそのまま表示されます。

用語	意味
公開設定	スプレッドシートをGoogleアカウントなしでも閲覧できる状態にすること
埋め込みURL	ページに「はめ込んで」表示するための専用URL。Googleが自動生成してくれる
iframe	ホームページの中に別のウェブページを枠ごとはめ込むHTMLの仕組み。スプレッドシートの埋め込みはこれを使う

スプレッドシートを更新すると、埋め込んだホームページ側にも自動で反映されます。試合後にフォームから入力するだけで、ホームページの成績表が自動更新されるわけです。

STEP 1：スプレッドシートを「ウェブに公開」する

最初にスプレッドシートをウェブ上に公開する設定をします。これをしないと埋め込んでも誰にも見えません。

⚠️ 「ウェブに公開」≠ 「共有」——2つは別の設定

Googleスプレッドシートには「共有」と「ウェブに公開」という似た名前の設定が2つあります。混同しやすいので注意してください。

設定	できること	今回使うか
共有	特定の人やリンクを知っている人にシートを見せる・編集させる	❌ 今回は使わない
ウェブに公開	ウェブページへの埋め込み用URLを取得する。誰でも閲覧できる状態にする	✅ 今回使う

STEP 1-1

「ファイル」→「ウェブに公開」を開く

Googleスプレッドシートのメニューバーから「ファイル」→「ウェブに公開」をクリックします。ダイアログが開きます。

STEP 1-2

「リンク」タブで公開するシートを選ぶ

「リンク」タブが開いた状態で、左側のプルダウン（「ドキュメント全体」と表示されている部分）をクリックします。シートの一覧が表示されるので「試合当日(野手)」を選択します。ホームページに掲載したいシートだけを選ぶのがポイントです。

STEP 1-3

「公開」ボタンをクリックする

「公開」ボタンをクリックすると確認ダイアログが出ます。「OK」をクリックして公開完了です。「このドキュメントは現在、ウェブに公開されています」と表示されれば成功です。

📝 「変更が加えられたとき自動的に再公開する」にチェックを入れておく

「ウェブに公開」ダイアログの下部に「変更が加えられたとき自動的に再公開する」というチェックボックスがあります。ここにチェックを入れておくと、スプレッドシートを更新するたびに自動でウェブ側も更新されます。試合後にフォームから入力するだけでホームページが自動更新される仕組みを活かすために、必ずチェックを入れてください。

STEP 2：埋め込み用のコードを取得する

公開設定が完了したら、次は埋め込み用のHTMLコードを取得します。

STEP 2-1

「埋め込む」タブに切り替える

「ウェブに公開」ダイアログの上部にある「埋め込む」タブをクリックします。先ほどの「リンク」タブとは別のタブです。

STEP 2-2

埋め込むシートを選んで「公開」をクリック

「埋め込む」タブでも同様に、プルダウンから「試合当日(野手)」を選びます。「公開」ボタンをクリックすると、埋め込み用のHTMLコードが表示されます。

STEP 2-3

表示されたコードをコピーする

表示されるコードはこのような形式になっています。これをまるごとコピーします。

<iframe src="https://docs.google.com/spreadsheets/d/【スプレッドシートID】/pubhtml?gid=【シートのID】&single=true&widget=true&headers=false"></iframe>

URLの中に見慣れない文字列が入っていますが、気にしなくて大丈夫です。コピーしてWordPressに貼り付けるだけで動きます。

STEP 3：WordPressに貼り付ける

STEP 3-1

WordPressの投稿・固定ページ編集画面を開く

試合成績を掲載したいページの編集画面を開きます。新規ページを作る場合は「固定ページ」→「新規追加」から作成します。

STEP 3-2

「カスタムHTML」ブロックを追加する

ブロックエディタ（Gutenberg）の「＋」ボタンをクリックし、検索欄に「HTML」と入力して「カスタムHTML」ブロックを選択します。

STEP 3-3

コピーしたコードを貼り付ける

「カスタムHTML」ブロックの入力欄に、先ほどコピーした iframeコードを貼り付けます。「更新」または「公開」をクリックしてページを保存したら、フロントエンド（実際のページ）で確認します。

⚠️ ビジュアルエディタではなく「カスタムHTML」ブロックを使うこと

WordPressのビジュアルエディタ（テキストを直接入力する通常のブロック）にiframeコードを貼り付けても正しく動作しません。必ず「カスタムHTML」ブロックを使ってください。この連載の本文記事を貼り付けるブロックと同じ種類のブロックです。

STEP 4：表示サイズを調整する

デフォルトの埋め込みコードは横幅・縦幅が固定されていて、スマホで見たときに横に切れてしまうことがあります。幅を100%にすることでページの横幅いっぱいに広がり、どの画面サイズでも見やすくなります。

✅ 幅を100%にした埋め込みコードの例

<iframe
  src="https://docs.google.com/spreadsheets/d/【ID】/pubhtml?gid=【シートID】&single=true&widget=true&headers=false"
  width="100%"
  height="500"
  frameborder="0">
</iframe>

width="100%"：ページの横幅いっぱいに広げる（スマホ対応）
height="500"：縦の高さをピクセルで指定。行数に合わせて調整する
frameborder="0"：iframeの枠線を消してすっきり見せる

縦の高さ（height）は試合のメンバー数や登板投手数によって変わります。最初は「500」程度にしておき、ページを確認しながら数値を増減して調整してください。

野手シートと投手シートを両方埋め込む場合

1つのページに野手成績と投手成績を両方掲載したい場合は、iframeを2つ並べます。見出しで区切ると見やすくなります。

✅ 野手・投手を両方掲載するページ構成の例

<h2>打撃成績</h2>
<iframe src="…試合当日(野手)のURL…" width="100%" height="500" frameborder="0"></iframe>

<h2>投手成績</h2>
<iframe src="…試合当日(投手)のURL…" width="100%" height="300" frameborder="0"></iframe>

投手シートは行数が少ないことが多いので、heightを野手より小さく設定するとページのバランスがよくなります。投手の登板人数に合わせて調整してください。