「スプレッドシートで作った最新のデータを、そのままブログやサイトに載せられたらいいのに……」 そんな願いを叶えるのが、Googleスプレッドシートの「ウェブに公開」機能です。
この機能を使えば、スプレッドシートを更新するだけで、サイト上の表やグラフも自動で書き換わります。 毎回画像を保存してアップロードし直す手間は、もう必要ありません。
一見難しそうな「サイトへの埋め込み」ですが、実はコピー＆ペーストだけで完結します。この記事では、URLでの簡単な公開方法から、サイトをプロっぽく見せる埋め込みの微調整テクニックまで、マスターが分かりやすく伝授します！
ウェブ公開の種類
公開の仕方
公開の仕方には、以下の2通りがあります。
- URLを公開する
- サイトに埋め込む
公開するまでの手順はとても簡単ですが、埋め込みに関しては少し調整が必要になります。
「共有」と「ウェブに公開」の違い
よくある質問として、「共有」ボタンからリンクを送るのと何が違うのかというものがあります。混乱しがちなのですが、「ウェブに公開」は、Googleアカウントを持っていない不特定多数の人に、ログインなしで見てもらうための機能となります。
公開の手順
作成した表やグラフをウェブに公開してみましょう。メニューバーの「ファイル」→「共有」→「ウェブに公開」をクリックします。
設定画面が表示されますので、「リンク」の、「ドキュメント全体」をクリックします。公開する範囲を選択出来ますので、公開したいシートやグラフを選択します。
「ウェブページ」をクリックして、公開する方法を選択します。
- ウェブページ：URLをクリックすると指定したシートがブラウザに表示されます。
- カンマ区切り形式（.csv）：URLをクリックすると、CSVファイルがダウンロードされます。
- タブ区切りの値（.tsv）：URLをクリックすると、tsvファイルがダウンロードされます。
- PDFドキュメント：URLをクリックすると、pdfファイルがダウンロードされます。
赤い枠線の中に、選択した公開方法のURLが表示されますので、こちらをコピーして、メールやSNS、ウェブ等に貼り付けてください。
自動公開設定
「公開するコンテンツと設定」をクリックすると、一番下に、「変更が加えられたときに自動的に公開する」という場所がありますので、ここにチェックを入れておくと、公開したシートに変更を加えた時は、その内容が常に反映されるようになります。
公開停止
公開を停止する時は、「公開停止」をクリックします。
ウェブサイトへの埋め込み
シート（表）を埋め込む
先程は、URLを公開して、シートやグラフを表示したり、ダウンロードしたりするようにしました。ここでは、直接ウェブサイトに埋め込む方法をご紹介します。
先ほどと同じ手順で、「ウェブ公開」画面を表示します。「埋め込む」をクリックして、公開する範囲を選択します。
範囲を選択したら、「公開」をクリックします。ポップアップ画面が表示され、公開の許可を求められますので、「OK」をクリックします。
赤い枠線の部分に、ソースコードが表示されますので、「Ctrl + C」を押して、ウェブサイト等に貼りつけてください。
なお、このソースをそのまま埋め込むとシートの表示が非常に小さいサイズで表示されてしまいますので、少し調整が必要になります。
埋め込み時の調整
先程のソースコードの最後の部分にある、「false”」のあとに、「<style>タグ」を挿入します。
「style=”width:800px; height:600px”」
以前はこのようにピクセルでサイズを指定していたのですが、スマホで見ることを考慮すると、「style=”width:100%”」と指定することをお勧めします。これを「レスポンシブ対応」と言います。
サイズは表やグラフ、ご自身のサイトに合わせて調整してください。
<style>タグ を利用すると、その他にも様々な変更を加えることが可能です。
WordPressを使用している場合は、カスタムCSSの欄にCSSを書き込んで表を調整することも可能です。
公開を停止するには、先程と同じように、「公開停止」をクリックしてください。
グラフを埋め込む
「ウェブに公開」画面から、範囲で「グラフ」を指定します。（ここでは店舗来客数）「インタラクティブ」と「画像」の選択がありますので、好みの方を選択します。
- インタラクティブ：マウスをのせるとグラフの詳細が表示されます。
- 画像：一般的な画像です。
「ウェブに公開」画面は、タブの「ファイル」から表示しましたが、グラフから直接表示させることも出来ます。
グラフの右上にある、3点リーダーをクリックすると、「グラフを公開」という項目がありますので、こちらをクリックしても「ウェブに公開」画面が表示されます。
ここでは、「インタラクティブ」を選択して、「公開」をクリックします。許可を求められますので「OK」をクリックしてください。
赤い枠線の部分に、ソースコードが表示されますので、「Ctrl + C」を押して、ウェブサイト等に貼りつけてください。
棒グラフの上にマウスオーバー（マウスをのせる）すると、各棒の詳細が表示されます。
公開方法を「画像」にすると、マウスオーバーしても何も表示されません。
シートの時と同様に、「公開するコンテンツと設定」から「公開停止」をクリックすると、公開は終了します。
PDFやCSVとしての配布
「ウェブに公開」を使えば、常に最新版の資料を「ダウンロードリンク」として提供することができます。
手順は先ほどと同じです。「ウェブに公開」からシートを選択して、公開する方法で「PDFドキュメント」を選択します。（CSVファイルとして公開する場合はCSVファイルを選択してください。）最後に「公開」をクリックします。
赤枠線の中にあるリンクをダウンロードボタンなどに貼り付けてください。このリンクを表示すれば自動でPDFファイルのダウンロードが始まります。
特定のセル範囲だけを公開する裏技
「シート全体を見せたくない場合は、公開用の新しいシートを作り、そこに ={Sheet1!A1:C10} のように必要な範囲だけをミラーリングさせて、そのシートだけを公開する」という方法もあります。
公開する前に
実際に公開する時は、「シークレットウィンドウ等で意図した範囲だけが見えているか必ず確認する」ということを絶対に忘れないでください。公開範囲を間違えると、見せてはいけない個人情報や内部データまで世界中に公開されてしまいます。
まとめ
お疲れ様でした！スプレッドシートをウェブに公開するイメージは湧きましたか？
「ウェブに公開」を使いこなせば、あなたのスプレッドシートは世界中と繋がる強力な情報発信ツールになります。特に、「自動更新」の設定をしておけば、日々の運用コストを大幅に下げることができるはずです。
最初は埋め込みコードの数字の調整に戸惑うかもしれませんが、一度設定してしまえば後はスプレッドシートを更新するだけ。まずは、お気に入りのグラフや小さな表を自分のサイトに載せて、その便利さを実感してみてくださいね。
もし表示が崩れてしまったら、今回ご紹介した「サイズ調整のコツ」を思い出してください。あなたのサイトが、より価値のある情報発信の場になることを応援しています！
コメント