面倒なので更新が遅れがちだった記事リストをGoogle Driveと自動連動させてみました。jQueryとDataTablesを使っているので、サクサクと並び替えやフィルタ、ページ移動ができます。いろいろ応用ができそうなので、方法についてメモしておきます。

1. スプレッドシートを作成し公開

まずGoogleドライブ上でスプレッドシートを作成します。実際に作ったシートを見る

※シートを分けたりVLOOKUPしたりしてますが、普通にべた書きでもokです。1行目はJSON中の項目名になるので、英数字にしておきます。

次に、「ファイル」メニューの「ウェブに公開」で公開します。「共有」ではなく「公開」です。

2. jQueryプラグイン「DataTables」をインストール

jQueryとDataTablesをダウンロードし、ページにリンクします（headにscriptタグを追加）。

以下はGoogleスプレッドシートと連携させるために最低限必要な基本コードです。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable({
"bServerSide": false,
"bProcessing": true,
"sAjaxDataProp": "feed.entry",
"sAjaxSource": "https://spreadsheets.google.com/feeds/list/[keyをここへ]/od6/public/values?alt=json",
"aoColumns": [{
"mData": "gsx\$series.\$t"
}, {
"mData": "gsx\$published.\$t"
}, {
"mData": "gsx\$title.\$t"
}, {
"mData": "gsx\$media.\$t"
}]
});
});
</script>
...
<table id="example" width="100%">
<thead>
<tr>
<th>連載名</th>
<th>公開日</th>
<th>記事タイトル</th>
<th>サイト</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
view raw google-spreadsheet-dataTables.html hosted with ❤ by GitHub
  • [keyをここへ]の部分にはスプレッドシートのURLに含まれる長い英数字を入れる
  • GoogleドライブのJSONはXML構造が特殊なので、aoColumnsでデータの場所を指定する（gsx$[ここに項目名].$t）
  • series, published, title, mediaの部分はシート1行目の項目名にする
  • tableのカラム数は項目の数に合わせる

3. カスタマイズ

データが表示されることを確認できたら、DataTablesのオプションを指定し、CSSで整形します。

私の場合は以下の点を変更しました：

  • デフォルトで連載名と日付によりソートされるよう変更 (aaSorting)
  • デフォルトの表示行数を50に変更 (iDisplayLength)
  • 非表示にした第一カラム（連載名）で行をグループ化 (aaSortingFixed, fnDrawCallback)
  • 一部のカラムのみ列幅を指定 (sWidth)
  • URLが記入されている場合は自動でリンク (mRender)
  • ページ移動のUIを1 2 3 4…方式に変更
  • jQuery UIのThemeRollerスキンを適用

4. 完成！

こうなりました。これは便利！クールで使いやすい上に、更新が楽になってます。Google DriveのスプレッドシートならiPhoneでも気軽に更新できるので、メンテが長続きしそうです。