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

WordPress

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

 

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

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

スポンサーリンク

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

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

  • 手順①:埋め込み表示させたいグラフを選択
  • 手順②:埋め込み表示用のタグを取得
  • 手順③:取得したタグをWebページ(投稿・固定ページ)に貼り付ける

上記のとおりです。

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

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

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

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

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

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

 

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

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

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

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

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

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

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

  • インタラクティブ
  • 画像

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

インタラクティブ

インタラクティブを選択すると、Webサイトにグラフを表示させる際、ユーザーがグラフの部分にマウスオーバーすると、グラフの縦軸と横軸のタイトル、数値を表示せる事ができます。

画像

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

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

グラフを表示させるページにタグを貼り付けます。

グラフを表示させたいページの編集画面(投稿・固定ページ共通)を開きます。

開いたら「テキスト」タブをクリックして下さい。

取得したタグをテキストモードで貼り付けないとWebページに表示されません。

 

テキストモードに変更したら、取得したタグを貼り付け、「公開(更新)」をクリックします。

プレビューで確認

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

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

 

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

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

  • スマホで表示するとグラフがはみ出て表示される
  • 出力されたコードをそのまま貼り付けるとAMPエラーが出る

上記のとおりです。

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

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

パソコンの表示

スマホの場合

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

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

 

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

 

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

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

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

モバイル表示を高速化するAMPを導入している場合、出力されたコードをそのまま貼り付けるとエラーが出ます。

AMPエラー

 

Googleスプレッドシートを埋め込んだページのAMPアドレスを「Google AMPテスト」で調べると、下図のようにエラーが表示されました。

AMPでエラーが出ないようにするには修正が必要です。

Googleスプレッドシートを埋め込んでAMPでエラーが出た時の修正方法

AMPエラーが出ないように修正する方法を解説します。

タグの一番後ろの方に、「seamless=””」というタグがありますので、ここを削除して下さい。

下図のように、「scrolling=”no”」で終わるように修正します。

修正したら、「更新」ボタンをクリックして設定を保存しましょう。

修正がきちんと反映されているか、「Google AMPテスト」で確認してみましょう。

AMPエラーが解消されましたね。

以上でGoogleスプレッドシートを埋め込んだ時のAMPエラーの修正は完了です。

 

まとめ

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

Googleスプレッドシートで作成したグラフを公開したい時は、グラフをキャプチャーしなくても、直接グラフを埋め込むことで、Webページに表示させる事ができます。

この方法のメリットは、画像をわざわざ作成しなくても良いという点と、グラフの数値を変更した際に、画像を差し替える必要が無いという事です。

Googleスプレッドシートのグラフと埋め込んだグラフが連動しているため。

けっこう便利な機能なので、グラフをWebページに公開したいという方は、是非お試しください。

 

ちなみに、GoogleマップをWebページに埋め込み表示させたいという方は「GoogleマップをWebサイトに埋め込む方法【最短ルートの表示も解説】」をどうぞ。

 

 

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました