2020/07/08   WordPress WordPressプラグイン

GoogleスプレッドシートからWordPressに表を埋め込みできるプラグイン「Inline Google Spreadsheet Viewer」

Inline Google Spreadsheet Viewer

Google スプレッドシートには埋め込み機能がついており、作成した表を Web サイトに表示させることができます。

しかし、<iframe> での埋め込みなのでいくぶん使い勝手が悪く、<table> で出力したいケースもあると思います。また、TablePress のようなソート機能をつけたいこともあるでしょう。

WordPress プラグイン「Inline Google Spreadsheet Viewer」はそれらをすべてかなえてくれます。

  • <iframe> の埋め込みではなく <table> で表を出力できる
  • 生成した表にソート機能や検索機能がつけられる
  • 表のデータを CSV や Excel ファイルとしてユーザーにダウンロードしてもらうこともできる
  • 表データをもとに SVG 形式でグラフを出力できる

さっそく使い方をご紹介していきたいと思います。

ブログのアクセス数を最大限に増やすSEO施策

ブログのアクセス数を伸ばす方法をお探しですか? 「アクセス数が伸びない原因とその対策」が書かれた e-book を無料プレゼントしています。


Google スプレッドシートをサイトに埋め込む方法

まず、Google スプレッドシートの埋め込み機能で簡単な表を表示させてみたいと思います。

サンプルとして CMS のシェア率を用意しました。

Googleスプレッドシートで作成したサンプル

参考:Historical trends in the usage statistics of content management systems

「ウェブに公開」する手順

表を埋め込むのは簡単です。

[ファイル]-[ウェブに公開]と進み、

Googleスプレッドシートをウェブに公開

「埋め込む」を選択して公開するだけです。シートを選択することもできます。

Googleスプレッドシート埋め込み設定

埋め込み用のコード(iframe)が表示されるので、コピーします。

Googleスプレッドシート埋め込みコードをコピー

それをエディタに貼り付ければ、このように表示されます。慣れればすぐですね。

iframe と table の表示比較

埋め込みコードそのままだと表が見づらいので、CSS で幅と高さを調整してみましょう。

<iframe src="https://docs.google.com/spreadsheets/~" style="width:100%;height:600px;"></iframe>

同じ表を <table> で出力するとこのようになります。

CMS
2019/7
2020/7
1None43.9%40.7%
2WordPress34.1%37.7%
3Shopify1.6%2.5%
4Joomla2.8%2.4%
5Drupal1.8%1.6%
6Squarespace1.6%1.5%
7Wix1.1%1.4%
8Bitrix0.6%1.0%
9Blogger0.7%1.0%
10Others11.8%10.2%

どちらが見やすいでしょうか?

単にデータを表示させるなら iframe の埋め込みで問題ありませんが、CSS でデザインしたり細かな調整を加えるなら <table> のほうがいいですよね。検索エンジンも理解しやすいのではと思います。

あと、iframe 重いし。

それでは「Inline Google Spreadsheet Viewer」を使って表を生成してみましょう。

Inline Google Spreadsheet Viewer の使い方

ここから Inline Google Spreadsheet Viewer の使い方を解説していきます。

Inline Google Spreadsheet Viewer

プラグインを使う準備

WordPress 管理画面で「Inline Google Spreadsheet Viewer」を検索してインストール・有効化しておきます。

Inline Google Spreadsheet Viewer インストール

設定はひとまずデフォルトのままで OK です。

Inline Google Spreadsheet Viewer 設定画面

WordPress 側の準備はこれだけで、次に Google スプレッドシートで共有設定を行います。

Google スプレッドシート共有設定

取得したいデータが入っている Google スプレッドシートを開き、右上の「共有」をクリック。

「リンクを取得」の部分を「リンクを知っている全員に変更」にします。

Googleスプレッドシート共有リンク

シェア用のリンクが表示されるのでコピーしておきましょう。

Googleスプレッドシート シェア用リンク

再び WordPress に戻ります。

ショートコードでデータを取得・表示する

WordPress 側ではショートコードで Google スプレッドシートのデータを取得・表示します。

ショートコードの基本形はこちら。

[gdoc key="https://docs.google.com/spreadsheets/d/ABCDEFG/edit#gid=123456"]

key の値に先ほどコピーしたシェア用の URL を入れてください。

そうすると、デフォルトでこのような表が出力されます。


CMS
2019/7
2020/7
1None43.9%40.7%
2WordPress34.1%37.7%
3Shopify1.6%2.5%
4Joomla2.8%2.4%
5Drupal1.8%1.6%
6Squarespace1.6%1.5%
7Wix1.1%1.4%
8Bitrix0.6%1.0%
9Blogger0.7%1.0%
10Others11.8%10.2%

各列のヘッダーセルをクリックすれば並び替えられるので、実際にクリックして試してみてください。

デフォルトで表示されるボタンの役割は以下のとおり。

Column visibility 各列の表示/非表示を切り替える
Copy 表のデータをクリップボードにコピーする
CSV 表のデータを csv 形式でダウンロードする
Excel 表のデータを xlsx 形式でダウンロードする
PDF 表を PDF で出力する(日本語は文字化けします…)
Print 表を印刷する

各ボタンは、先ほどデフォルトのままにしておいた設定画面にある「DataTables defaults object」で制御できます。

Inline Google Spreadsheet Viewer の表で出力されるボタン

任意の行を削除するとそのボタンは表示されません。

シンプルな表を生成する

ボタンの有無は大元の設定で変更できますが、データベース機能(各ボタン・ソート機能・検索機能)自体が不要であればショートコードに class="no-datatables" を追加すれば OK です。

[gdoc key="https://docs.google.com/spreadsheets/d/ABCDEFG/edit#gid=123456" class="no-datatables"]

このようにシンプルな表が生成されます。

CMS
2019/7
2020/7
1None43.9%40.7%
2WordPress34.1%37.7%
3Shopify1.6%2.5%
4Joomla2.8%2.4%
5Drupal1.8%1.6%
6Squarespace1.6%1.5%
7Wix1.1%1.4%
8Bitrix0.6%1.0%
9Blogger0.7%1.0%
10Others11.8%10.2%

表をカスタマイズする

デザインを変更するなら class を追加しましょう。

データベース機能なしの表に original-table という class を付ける場合は、このような形になります。

[gdoc key="https://docs.google.com/spreadsheets/d/ABCDEFG/edit#gid=123456" class="no-datatables original-table"]

CSS でデザイン変更するのが楽になりますね!

CMS
2019/7
2020/7
1None43.9%40.7%
2WordPress34.1%37.7%
3Shopify1.6%2.5%
4Joomla2.8%2.4%
5Drupal1.8%1.6%
6Squarespace1.6%1.5%
7Wix1.1%1.4%
8Bitrix0.6%1.0%
9Blogger0.7%1.0%
10Others11.8%10.2%

ちなみに、データベース機能なしの表は以下のような id ・ class が付与されています。

<table id="igsv-xxx" class="igsv-table no-datatables" lang="ja">
	<thead>
		<tr id="igsv-xxx-row-1" class="row-1 odd">
			<td class="col-1 odd"></td>
			<td class="col-2 even"></td>
			<td class="col-3 odd"></td>
			<td class="col-4 even"></td>
		</tr>
	</thead>
	<tbody>
		<tr id="igsv-xxx-row-2" class="row-2 even">
			<td class="col-1 odd"></td>
			<td class="col-2 even"></td>
			<td class="col-3 odd"></td>
			<td class="col-4 even"></td>
		</tr>
	</tbody>
</table>

※ id の xxx には、スプレッドシートのスラッグが入ります。

svg 形式のグラフを生成する

表のデータをもとに、svg 形式でグラフを出力することも可能です。

ショートコードに chart="Pie" を追加してみましょう。

[gdoc key="https://docs.google.com/spreadsheets/d/ABCDEFG/edit#gid=123456" chart="Pie" title="CMS シェア率"]

これだけで円グラフが生成されます。

対応している形式は 11 種類。

  • Area(面グラフ)
  • Bar(棒グラフ・横)
  • Bubble(バブルチャート)
  • Candlestick(ローソク足グラフ)
  • Column(棒グラフ・縦)
  • Combo(棒グラフ & 折れ線グラフ)
  • Histogram(ヒストグラム)
  • Line(折れ線グラフ)
  • Pie(円グラフ)
  • Scatter(散布図)
  • Stepped(ステップ折れ線グラフ)

title はつけなくても大丈夫です。

まとめ

簡単な表であれば WordPress でそのまま作成するか、TablePress を使うほうがよいかもしれません。

TablePress

データを定期的に変更したり、表計算が必要な場合は Google スプレッドシートから読み込むと便利ですね。なお、データはリアルタイムで反映されず、5 分前後のラグがあります。

必要に応じて使い分けてみてください。

Inline Google Spreadsheet Viewer の公式ページには今回ご紹介したほかにも様々な機能・オプションが紹介されていますよ!

Inline Google Spreadsheet Viewer

それでは、また。