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

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

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でもご指摘を受けましたが、いまのところ修正方法が分からないため、何が原因でこのように表示されてしまうのか模索中です。

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

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

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

AMPエラー

 

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

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

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

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

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

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

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

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

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

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

 

まとめ

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

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

 

この方法のメリットは下記2点です。

  • 画像をわざわざ作成しなくても良い
  • グラフの数値を変更した際に画像を差し替える必要が無い
Googleスプレッドシートのグラフと埋め込んだグラフが連動しているため。

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

 

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

 

 

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

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