面倒なので更新が遅れがちだった記事リストを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でも気軽に更新できるので、メンテが長続きしそうです。