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

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

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

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

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

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

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

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

  • [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でも気軽に更新できるので、メンテが長続きしそうです。