Inline Google Spreadsheet Viewer の使い方


WordPress でグラフ や 表を表示する プラグイン は日本語 でもたくさん紹介されていますが,今回は Googleスプレッドシート を WordPress と 連携 させて表示させるプラグインInline Google Spreadsheet Viewerの 使い方 を紹介します.このプラグインを使うメリットは,Googleスプレッドシート の最新の情報を,指定した方法でWordPressサイト上に描画するのでデータの更新が非常に簡単なことです.

Inline Google Spreadsheet Viewer のダウンロード&インストール

インストールは,WordPressのプラグイン追加画面でInline Google Spreadsheet Viewerを検索するか,WordPress.orgからダウンロードします.
 

設定画面

このプラグインには設定画面はありません.基本的な使い方は,グラフや表 を表示させたい場所に,スプレッドシートの参照先と描画方法のオプションを指定するショートコードを記述するだけです.

さきにGoogleスプレッドシートでやっておくこと

Inline Google Spreadsheet Viewerが参照する スプレッドシート を用意します.例えばダイエットブログで体重の推移を記録した スプレッドシート を参照できるようにしてみます.

①Googleドライブでスプレッドシートを作成する
※すでに参照させたい スプレッドシート がある人はここは飛ばしてかまいません.

新規スプレッドシート作成をクリック

スプレッドシートの中身を作成

 
②スプレッドシートの共有設定を変更する
参照する スプレッドシート が用意できたら,Inline Google Spreadsheet Viewerプラグインが スプレッドシート を読み込めるようにするため,スプレッドシートの共有設定を「公開」に変更します.

① スプレッドシート画面右上の「共有」ボタンをクリック

② 共有可能なリンクを取得をクリック

 

③「リンクを知っている全員が閲覧可」となっていることを確認して「リンクをコピー」をクリック.その後「完了」ボタンをクリック

④ このスプレッドシートが共有状態になった

 

グラフを表示させる

基本操作

スプレッドシートの共有設定が済んだら,記事に グラフを表示 させてみます.表示させるための基本のショートコードは以下のとおり.

[gdoc key="スプレッドシートのリンクアドレス"]上記のショートコードに,描画のためのオプションを追加します.ここでは折れ線グラフを表示させます.

[gdoc key="スプレッドシートのリンクアドレス" chart="Line"]表示結果は下のようになりました.

グラフのスタイリング

オプションを追加していけば グラフ の外観を調整することができます.ここではスタイリングオプションの一例を紹介しますが,プラグインの説明によれば調整項目がかなりあるようです.詳しくは,こちらのページの一番下のほうにオプション項目が箇条書きされていますので色々とチャレンジしてみて下さい.
 

グラフにタイトルをつける

グラフにタイトルをつけた

グラフ にタイトルをつけるには, [gdoc key="スプレッドシートのリンクアドレス" chart="グラフの種類" title="グラフのタイトル"]といった具合に追記します.

 

グラフの色

グラフの色を変更した

グラフの色は chart_colors="HTMLの色コード"で指定することができます.複数の色を指定する場合は各コードの間を半角スペースで区切ります.

 

凡例の削除

凡例が不要な場合は, chart_legend="none"を記述することで凡例が非表示になります.

 

グラフの立体化とラベル

円グラフ などは chart_dimensions="3"と記述することで,立体表示にすることができます.以下の具体例では,立体表示,色指定の他に,グラフ上のテキストに「値」を表示させるオプション chart_pie_slice_text="value"を記述しています.※項目名を表示させるには, chart_pie_slice_text="label"にします.

 

おまけ:使えるグラフの種類

上記では 折れ線グラフ を選びましたが,オプションの記述を変えれば,他の種類のグラフを表示させることもできます.下のグラフ画像はGoogle Chart Galleryのものです.

グラフの種類オプションの記述

エリアチャート

chart="Area"

横棒グラフ

chart="Bar"

バブルチャート

chart="Bubble"

キャンドルスティック

chart="Candlestick"

縦棒グラフ

chart="Column"

組み合わせグラフ

chart="Combo"
グラフの種類オプションの記述

積み上げグラフ

chart="Histogram"

線グラフ

chart="Line"

円グラフ

chart="Pie"

散布図

chart="Scatter"

積み上げ線グラフ

chart="Stepped"