JSONテンプレートモジュール (Json_2Tpl) ＋ YQL で RSS/Atomフィードを表示する #JSON

これは a-blog cms Advent Calendar 2016 の6日目の記事です。

11月に開催された a-blog cms の秋合宿で、次期バージョン (v2.7) の新機能が紹介されました。
わたしは、その中の「JSONテンプレートモジュール (Json_2Tpl)」と「YQL (Yahoo Query Language)」の組み合わせがとても便利だと感じました。
YQLの認知度が低いようなので、これを期にお伝えしたいと思います。

前置き

★ JSONテンプレートモジュール (Json_2Tpl)

公式のハンズオンページが用意されています。
JSONを使って専用モジュールを作ってみよう | 2016年秋合宿ハンズオン | ablogcms.io

今はまだ v2.7 の正式リリース前ですが、ablogcms.io では新機能のお試しもできるはずです。30日間無料！

ハンズオンではJSONファイルはすでに用意されていますが、JSONテンプレートモジュールを使う際に どうやってJSONファイルを用意するか が問題になったりしますね。しませんか？
それを解決してくれるのが YQL (Yahoo Query Language) です！

★ YQL (Yahoo Query Language)

YQL - Yahoo Developer Network

YQLとは米Yahoo! Developer Networkが提供している、ありとあらゆるWeb上のリソースにアクセスすることができる開発者向けのサービスです。

文法はSQLのようで独特ですが、要約すると

XML、HTML、RSS、CSVなどをJSONPに変換

WebAPIレスポンスの加工

キャッシュ機能つき登録などをしなくても使える(利用制限等についてはYQL公式サイトをご参照ください)

こういった機能を持つ、汎用的なプロキシサービスです。

簡単に言うと

「YQLというものを使うと、XMLをJSONPに変換して扱えるようになる」

ということらしいです。便利！

参考）XMLのWebAPIを爆速で使いこなせるフレームワーク - Yahoo! JAPAN Tech Blog

YQL Console を使ってみよう

では、実際に使ってみます。
今回は Qiita 内の ablogcms のタグがついた記事の一覧を表示してみます。

1. YQLでJSON形式に変換

まず YQL Console を開きます。

「show tables」と表示されているところがYQLのSELECTステートメントを記述する場所です。
今回はQiitaのフィードデータが欲しいので、左の data から feed を選びます。

ステートメントが自動で置き換わりました。

select * from feed where url='フィードのURL'

が基本形です。

selectの後の「*」はワイルドカードです。次のようにデータを指定して取得することもできます（むしろそちらの方が望ましいと思います）。

select title,url,author from feed where url='フィードのURL'

URLをフィードを取得したいものに書き換え、JSON形式が選択されていることを確認して「Test」ボタンを押します。

例えば：今回取得するフィードは以下のようになります。

select * from feed where url='http://qiita.com/tags/ablogcms/feed.atom'

画面下部の「THE REST QUERY」と書いてあるところのURLを後程使います。

2. 取得データを見てみる

「Formatted View」の中身を見ると、どんなデータが取得できるか確認できます。

データは階層（ドットシンタックス）になっています。「Tree View」タブに切り替えると階層がわかりやすいです。

a-blog cms のカスタマイズ

1. モジュールIDの作成と設定

a-blog cms の管理ページでモジュールIDを作成します。

表示設定タブに切り替えて、JSONファイル の入力欄に、先程 YQL Console に表示されていた「THE REST QUERY」のURLを貼り付けます。

2. テンプレートの記述

ハンズオンに習って、表示側のテンプレートを以下のように記述します。

<section class="module-section">
    <div class="module-header clearfix">
        <h2 class="module-heading">QiitaのRSSフィード</h2>
    </div>
    <!-- BEGIN_MODULE Json_2Tpl id="qiitaRssFeed" -->
    <!-- BEGIN query -->
    <!-- BEGIN results -->
    <ul class="acms-list-group clearfix">
        <!-- BEGIN entry:loop -->
        <li class="acms-list-group-item js-biggerlink">
            <time datetime="{published}">{published}[date('Y年m月d日')]</time>
            <a href="{url}" class="acms-list-group-title-link">{title}</a>
        </li>
        <!-- END entry:loop -->
    </ul>
    <!-- END results -->
    <!-- END query -->
    <!-- END_MODULE Json_2Tpl -->
</section>

表示を確認してみると……はい！

記事の一覧が表示されました。

3. 便利な点

JSONテンプレートモジュールが便利なのは、何と言っても「校正オプションが使える」点だと思います。

例えば：日付の校正オプション。
{published} の変数のみでは 2016-11-10T18:37:28+09:00 のように出力されてしまうため、日付の表示形式を変えるにはJSを書く必要がありました。
{published}[date('Y年m月d日')] と校正オプションを付けるだけで 2016年11月10日 のように表示形式を変えることができます。

表示件数の調整

Qiitaのフィードはデフォルトが20件のようです。 最新の5件だけ を表示するように少し書き換えます。
取得するデータの件数を設定するときはステートメントに記述します。

select * from feed(オフセット数,アイテム数) where url='フィードのURL'

Remote Limits | SELECT Statement - Yahoo Developer Network

最初の5件を取得したい場合は

select * from feed(0,5) where url='フィードのURL'

もしくは、

select * from feed(5) where url='フィードのURL'

オフセットのデフォルトが0なので、省略することができます。

YQL Console で以下のステートメントを入力し、当該モジュールIDのJSONファイル部分を新しい「THE REST QUERY」のURLに置き換えれば完了です。

select * from feed(5) where url='http://qiita.com/tags/ablogcms/feed.atom'

おわりに

わたしにできるのは外部ブログのフィードを読み込むくらいですが、ブラウザやサーバのクロスドメイン制約を考えると、JSONテンプレートモジュールでJSON形式のデータが簡単に扱えるようになるのはとても嬉しいです。
v2.7 の正式リリース楽しみにしています！

あと、YQL すごく便利だと思うので、使う人が増えて日本語のドキュメントが増えるといいなあと思います（他力本願）。

〈おまけ〉YQL API の利用制限について

YQLの利用制限についてメモしておきます。

Usage Information and Limits | Overview - Yahoo Developer Network

APIのコール数が 1時間あたり2,000まで の場合、APIキーは必要ないようです。Public Endpoint ( /v1/public/* ) が使えます。

それ以上の場合は、APIキーを取得することで 1時間あたり20,000まで 使えるようになるとのこと（1日あたり100,000まで）。OAuth Endpoint ( /v1/yql/* ) を使います。