Googleスプレッドシートで作成したグラフをWebページに埋め込む方法をお探しの方向け。
Googleスプレッドシートで作成したグラフは、画像として保存しなくても、Googleマップのように、Webページに埋め込んで表示させる事ができます。
この記事では、Googleスプレッドシートで作成したグラフをWebページに埋め込む方法を解説します。
好きなところから読めます
Googleスプレッドシートで作成したグラフをWebページに埋め込む手順
Googleスプレッドシートシートで作成したグラフをWebページに埋め込む手順を解説します。
- 手順①:埋め込み表示させたいグラフを選択
- 手順②:埋め込み表示用のタグを取得
- 手順③:取得したタグをWebページ(投稿・固定ページ)に貼り付ける
上記のとおりです。
手順①:埋め込み表示させたいグラフを選択
最初に、Webページに埋め込み表示させたいグラフを選択します。
Googleスプレッドシートを立ち上げ、表示させたいグラフがあるシートを開きます。
シートを開いたら、グラフのどこでも良いのでクリックして下さい。
グラフをクリックすると、①右上に「・・・」と縦に並んだマークが出現するのでここをクリックします。
メニューが開いたら、②「グラフを公開」を選択して下さい。
「グラフを公開」を選択すると、「ウェブに公開」というメニューが表示されますので、①「埋め込む」タブを選択して、②「公開」をクリックします。
公開してもよいか?という確認が画面上部に表示されますので「OK」をクリックします。
手順②:埋め込み表示用のタグを取得
下図のように埋め込み表示用のタグが表示されますので、タグをコピーして下さい。
タグをコピーしたら、Webページにタグを貼り付けます。
インタラクティブ表示と画像の違い
埋め込みタグを取得する際、下図のように、インタラクティブと画像という選択肢が表示されます。
- インタラクティブ
- 画像
2つの違いは次のとおりです。
インタラクティブ
ユーザーがグラフ部分にマウスオーバーすると、グラフの縦軸と横軸のタイトル、数値が表示されます。
画像
画像ファイルとして出力されるため、マウスオーバーしても変化はありません。
手順③:取得したタグをWebページ(投稿・固定ページ)に貼り付ける
「手順②:埋め込み表示用のタグを取得」という項目で取得したタグを貼り付けます。
グラフを表示させたいページの編集画面(投稿・固定ページ共通)を開き、ブロックメニューから「カスタムHTML」を選択します。
カスタムHTMLの入力部分にタグを貼り付けます。
上部メニューのプレビューをクリックすると、Googleスプレッドシートで作成したグラフがWebページに埋め込み表示されていることが確認できます。
表示内容に問題無ければ、公開ボタンを押しましょう。
以上でWebページにGoogleスプレッドシートのグラフを埋め込み表示させる方法は完了です。
Googleスプレッドシートで作成したグラフをWebサイトに埋め込む時の注意点は2つ
Googleスプレッドシートで作成したグラフをWebサイトに埋め込む時の注意点は2つあります。
- スマホで表示するとグラフがはみ出て表示される
- 出力されたコードをそのまま貼り付けるとAMPエラーが出る
上記のとおりです。
スマホで表示するとグラフがはみ出て表示される
パソコンでページを確認するとグラフがきちんと表示されますが、スマホで表示するとページの幅に収まらず、はみ出て表示されます。
パソコンの表示
スマホの場合
微妙に分かりにくいかもしれませんが、パソコンだとグラフ5本とグラフの説明が表示さますが、スマホでアクセスするとグラフは4本しか表示されず、説明も見えなくなります。
ちなみに、グラフの表示は固定されているため、グラフをスライドさせようとフリップしても、グラフは動きません。
しかし、スマホを横にすると、グラフが全て表示されるようになります。
ちなみに、このことについてTwitterでもご指摘を受けましたが、いまのところ修正方法が分からないため、何が原因でこのように表示されてしまうのか模索中です。
突然の質問すみません。https://t.co/oK3wBWQNXs
こちらのページを参考にグラフを埋め込んでみたんですが、レスポンシブにならないため困っています(スマホで見るとグラフが巨大)
HTMLの書き換え等、対策はありますでしょうか・・・?
お時間ありましたら、ご教授くだされば幸いです。— Dr.Koala (若手眼科医・ブロガー・婚活芸人) (@Dr_Koala_JAPAN) July 3, 2020
修正方法が分かり次第、情報を更新したいと思います。
出力されたコードをそのまま貼り付けるとAMPエラーが出る
モバイル表示を高速化するAMPを導入している場合、出力されたコードをそのまま貼り付けるとエラーが出ます。
Googleスプレッドシートを埋め込んだページのAMPアドレスを「Google AMPテスト」で調べると、下図のようにエラーが表示されました。
AMPでエラーが出ないようにするには修正が必要です。
Googleスプレッドシートを埋め込んでAMPでエラーが出た時の修正方法
AMPエラーが出ないように修正する方法を解説します。
タグの一番後ろの方に、「seamless=””」というタグがありますので、ここを削除して下さい。
下図のように、「scrolling=”no”」で終わるように修正します。
修正したら、「更新」ボタンをクリックして設定を保存しましょう。
修正がきちんと反映されているか、「Google AMPテスト」で確認してみましょう。
AMPエラーが解消されましたね。
以上でGoogleスプレッドシートを埋め込んだ時のAMPエラーの修正は完了です。
まとめ
以上、Googleスプレッドシートで作成したグラフをWebページに埋め込む方法を解説しました。
Googleスプレッドシートで作成したグラフを公開したい時は、グラフをキャプチャーしなくても、直接グラフを埋め込むことで、Webページに表示させることができます。
この方法のメリットは下記2つです。
- 画像をわざわざ作成しなくても良い
- グラフの数値を変更した際に画像を差し替える必要が無い
便利な機能なので、グラフをWebページに公開したいという方は、是非お試しください。
ちなみに、GoogleマップをWebページに埋め込み表示させたいという方は「GoogleマップをWebサイトに埋め込む方法【最短ルートの表示も解説】」をどうぞ。