Googleスプレッドシートで作成したグラフをWebページに埋め込む方法

Googleスプレッドシートで作成したグラフをWebページに埋め込む方法をお探しの方向け。

 

Googleスプレッドシートで作成したグラフは、画像として保存しなくても、Googleマップのように、Webページに埋め込んで表示させる事ができます。

この記事では、Googleスプレッドシートで作成したグラフをWebページに埋め込む方法を解説します。

Googleスプレッドシートで作成したグラフをWebページに埋め込む手順

Googleスプレッドシートシートで作成したグラフをWebページに埋め込む手順を解説します。

上記のとおりです。

手順①：埋め込み表示させたいグラフを選択

最初に、Webページに埋め込み表示させたいグラフを選択します。

Googleスプレッドシートを立ち上げ、表示させたいグラフがあるシートを開きます。

 

シートを開いたら、グラフのどこでも良いのでクリックして下さい。

グラフをクリックすると、①右上に「・・・」と縦に並んだマークが出現するのでここをクリックします。

メニューが開いたら、②「グラフを公開」を選択して下さい。

 

「グラフを公開」を選択すると、「ウェブに公開」というメニューが表示されますので、①「埋め込む」タブを選択して、②「公開」をクリックします。

公開してもよいか？という確認が画面上部に表示されますので「OK」をクリックします。

手順②：埋め込み表示用のタグを取得

下図のように埋め込み表示用のタグが表示されますので、タグをコピーして下さい。

タグをコピーしたら、Webページにタグを貼り付けます。

インタラクティブ表示と画像の違い

埋め込みタグを取得する際、下図のように、インタラクティブと画像という選択肢が表示されます。

2つの違いは次のとおりです。

インタラクティブ

ユーザーがグラフ部分にマウスオーバーすると、グラフの縦軸と横軸のタイトル、数値が表示されます。

画像

画像ファイルとして出力されるため、マウスオーバーしても変化はありません。

手順③：取得したタグをWebページ（投稿・固定ページ）に貼り付ける

「手順②：埋め込み表示用のタグを取得」という項目で取得したタグを貼り付けます。

グラフを表示させたいページの編集画面（投稿・固定ページ共通）を開き、ブロックメニューから「カスタムHTML」を選択します。

カスタムHTMLの入力部分にタグを貼り付けます。

上部メニューのプレビューをクリックすると、Googleスプレッドシートで作成したグラフがWebページに埋め込み表示されていることが確認できます。

表示内容に問題無ければ、公開ボタンを押しましょう。

以上でWebページにGoogleスプレッドシートのグラフを埋め込み表示させる方法は完了です。

 

Googleスプレッドシートで作成したグラフをWebサイトに埋め込む時の注意点は2つ

Googleスプレッドシートで作成したグラフをWebサイトに埋め込む時の注意点は2つあります。

上記のとおりです。

スマホで表示するとグラフがはみ出て表示される

パソコンでページを確認するとグラフがきちんと表示されますが、スマホで表示するとページの幅に収まらず、はみ出て表示されます。

パソコンの表示

スマホの場合

微妙に分かりにくいかもしれませんが、パソコンだとグラフ5本とグラフの説明が表示さますが、スマホでアクセスするとグラフは4本しか表示されず、説明も見えなくなります。

ちなみに、グラフの表示は固定されているため、グラフをスライドさせようとフリップしても、グラフは動きません。

 

しかし、スマホを横にすると、グラフが全て表示されるようになります。

 

ちなみに、このことについてTwitterでもご指摘を受けましたが、いまのところ修正方法が分からないため、何が原因でこのように表示されてしまうのか模索中です。

突然の質問すみません。https://t.co/oK3wBWQNXs
こちらのページを参考にグラフを埋め込んでみたんですが、レスポンシブにならないため困っています（スマホで見るとグラフが巨大）
HTMLの書き換え等、対策はありますでしょうか・・・？
お時間ありましたら、ご教授くだされば幸いです。

— Dr.Koala (若手眼科医・ブロガー・婚活芸人) (@Dr_Koala_JAPAN) July 3, 2020

修正方法が分かり次第、情報を更新したいと思います。

出力されたコードをそのまま貼り付けるとＡＭＰエラーが出る

モバイル表示を高速化する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サイトに埋め込む方法【最短ルートの表示も解説】」をどうぞ。