PolymerでWP-APIのjsonから記事データを表示させる覚書

CSS nite in Kyoto vol.3で「Polymerはjsonを取り扱うのが得意」と聞いて早速挑戦。

ようやく記事一覧のデータを表示させることに成功したので、忘れないように覚書としてまとめました。

１：ajax通信はコアファイルで行う

Polymerでは「core-ajax」という「コア要素」を使用することで、簡単にAjax通信が可能となります。

Polymer core elements – core-ajax

Ajax通信を行いたいテンプレートで、
[html]
<core-ajax
auto
url="https://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json", "q":"chrome"}’
handleAs="json"
on-core-response="{{handleResponse}}"></core-ajax>
[/html]

のように記述して使用します。

core-ajaxを使用する際には、以下のようにcore-ajaxのコンポーネントをimportする必要があります。
[html]
<link rel="import" href="../../bower_components/core-ajax/core-ajax.html">
[/html]

core-ajaxの中身

使ってみた感覚として、

• URLに通信先URLを指定
• paramに送信するクエリパラメータを設定
• handleAsで受信する形式を設定
• autoを設定すると、URL属性が変更された場合に自動でXHRを実行する（らしい）
• responseで返り値を設定

というイメージです。

core-ajaxで取得したデータは、そのテンプレート内であれば変数的に扱える様子です。

２：記事の取り出し方はSmartyっぽい

Smartyなどのフレームワークで使用するTemplateや、Angular.js的な感覚で取得したものを扱うことができます。

{{handleResponse.title}}で記事タイトルを、{{handleResponse.content}}でコンテンツを取得するというイメージです。

３：リピート処理はtemplateで

ループ処理はrepeat=””という属性をtemplateタグに記述して使用します。

[html]
<template repeat="{{ent in handleResponse}}">
この中がループされる
</template>
[/html]

PHPのforeachと逆向きに記述することになるので要注意です。

・foreach ($handleResponse as $ent){}
・repeat=”{{ent in handleResponse}}”

４：デフォルトではHTMLがエスケープされるから要注意

デフォルトではエスケープされる仕様になっているので、contentを取得するとHTMLタグがそのまま表示されてしまいます。

I’m trying to render HTML using data-binding but Polymer escapes the content.
Polymer does not stamp unescaped HTML via data-binding because it becomes a vulnerability for XSS attacks. Instead, you can use a property changed watcher and automatic node finding to set the .innerHTML of an node:

FAQ – Polymer

XSS対策だから、必要に応じて解除してくださいなということでしょうか。

５：HTML表示用のテンプレートを作るとマジ便利

StackOverflowにも似たことを質問されている方がおり、まさに欲しかったコードも回答にありました。

javascript – How to inject HTML into a template with polymer – Stack Overflow

[html]
<polymer-element name="html-echo" attributes="html">
<script>
Polymer(‘html-echo’, {
htmlChanged: function() {
// WARNING: potential XSS vulnerability if `html` comes from an untrusted source
this.innerHTML = this.html;
}
});
</script>
</polymer-element>
[/html]
でHTMLを出力するテンプレートを作成して、HTMLタグを使用したい要素を投げつけるだけ。
[html]
<html-echo html="{{post}}"></html-echo>
[/html]
こうやって書くと、postの中身がエスケープされずに出力されます。

で：こんなの完成

とりあえずでサンプルを作ってみました。

Polymerで最新記事を５件表示するサンプル

記事タイトル・本文とかを表示するだけの簡単実装です。

そして：次にやりたいこと

Polymer部分とWP-API部分でまだまだ色々いじれる箇所はありますので、時間をみて試してみたいなと思います。

表示件数の制御

・１件表示にして「個別記事ページ」を表示させる。
・アーカイブは１０件位にしたい
・サイドバーにカテゴリ一覧とかも出せるよね

非同期ページ遷移

正直jQueryMobileでもよくわからんかったからリベンジしたい領域でもあります。

ここまでできたらWordPressサイトをPHPなしで構築できる・・・はず。