Inline Google Spreadsheet Viewer の使い方

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

Inline Google Spreadsheet Viewer の使い方

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

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

設定画面

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

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

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

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

Inline Google Spreadsheet Viewer の使い方

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

Inline Google Spreadsheet Viewer の使い方

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

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

Inline Google Spreadsheet Viewer の使い方

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

Inline Google Spreadsheet Viewer の使い方

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

 

Inline Google Spreadsheet Viewer の使い方

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

Inline Google Spreadsheet Viewer の使い方

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

 

グラフを表示させる

基本操作

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

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

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

Inline Google Spreadsheet Viewer の使い方

グラフのスタイリング

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

グラフにタイトルをつける
Inline Google Spreadsheet Viewer の使い方

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

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

 

グラフの色
Inline Google Spreadsheet Viewer の使い方

グラフの色を変更した

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

 

凡例の削除

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

 

グラフの立体化とラベル
Inline Google Spreadsheet Viewer の使い方

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

[gdoc key="スプレッドシートのリンクアドレス"
 chart="Pie"
 chart_colors="red green blue #dc6000"
 chart_dimensions="3"
 chart_pie_slice_text="value"]

 

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

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

グラフの種類 オプションの記述
Inline Google Spreadsheet Viewer の使い方

エリアチャート

chart=”Area”
Inline Google Spreadsheet Viewer の使い方

横棒グラフ

chart=”Bar”
Inline Google Spreadsheet Viewer の使い方

バブルチャート

chart=”Bubble”
Inline Google Spreadsheet Viewer の使い方

キャンドルスティック

chart=”Candlestick”
Inline Google Spreadsheet Viewer の使い方

縦棒グラフ

chart=”Column”
Inline Google Spreadsheet Viewer の使い方

組み合わせグラフ

chart=”Combo”
グラフの種類 オプションの記述
Inline Google Spreadsheet Viewer の使い方

積み上げグラフ

chart=”Histogram”
Inline Google Spreadsheet Viewer の使い方

線グラフ

chart=”Line”
Inline Google Spreadsheet Viewer の使い方

円グラフ

chart=”Pie”
Inline Google Spreadsheet Viewer の使い方

散布図

chart=”Scatter”
Inline Google Spreadsheet Viewer の使い方

積み上げ線グラフ

chart=”Stepped”

Outlook関連の特集

  1. CompanionLink 日本語使い方ガイド
    CompanionLink は Microsoft Outlook上の予定や連絡先、タスク、メモとい…
  2. gSyncit 日本語使い方ガイド
    gSyncitは、Microsoft Outlook上の予定や連絡先、タスク、メモといったデータをG…
  3. Power Toys for Outlook 日本語使い方ガイド
    Power Toys for Outlook は、Outlookのアドオンソフトで、Outlook標…
  4. Sync2 日本語使い方ガイド
    Sync2 は会社と自宅といったような離れたPCにインストールされたOutlook上のデータを同じ状…
  5. EVO Collaborator for Outlook 日本語使い方ガイド
    EVO Collaborator for Outlook は、Microsoft Outlook上の…

スマホ関連の特集

  1. Googleドライブ の音楽をストリーミングで聴く 3/3
    Googleドライブ を使ってクラウド上に保存した音楽を聴く方法を3回に分けてご紹介します。第1回は…
  2. Spotify の使い方
    Spotify が 2016年秋 から日本でも利用できるようになりました。公式サイトのヘルプが読み…
  3. BOSE SoundTouch10 で Spotify がもっと便利に
    BOSEの製品体験会に参加する機会があり、同社のBOSE SoundTouch10を頂いたので、S…
ページ上部へ戻る