FrontendWeb Component

PolymerでWP-APIから任意の件数の記事を取得する覚書

Polymerの非同期通信とpaper-inputを使用してリッチな入力フォームと、入力値に応じて記事件数を変更させるサンプルを作ってみました。関係の有りそうな部分のコードをひと通り掲載した覚書記事です。

広告ここから
広告ここまで

前回記事一覧の取得に成功したPolymer。

今回は記事件数をAjaxで変更できるようにしてみました。

1:大まかな動作

・inputで取得したい件数を入力する
・入力した件数分の記事をWP-APIから取得する
・inputのUIはMaterial Desginで実装する

ということでやってみました。

2:inputで取得したい件数を入力する

基本的にtemplate内であればinputのvalue値をそのまま扱える様子です。

[html]
<template>
<input type="text" value="{{query}}">
<p>{{query}}</p>
</template>
[/html]

ですのでcore-ajaxのurl部分を以下のように設定して、inputで入力した値を受け取るようにします。

[html]
<input type="text" value="{{query}}">
<core-ajax
auto
url="/wp-json/posts?filter[posts_per_page]={{query}}"
handleAs="json"
on-core-response="{{handleResponse}}"></core-ajax>
[/html]

core-ajaxをautoにしておくと、{{query}}の値が変更されたタイミングで再度Ajax通信を実施してくれます。

3:入力した件数分の記事をWP-APIから取得する

先ほどさらっと記述しましたが、WP-APIで記事件数を絞り込む場合「post_per_page」パラメータを使用します。

パラメータは「wp-json/」の後ろに「取得するタイプ?filter[パラメータ名]=値」のような形で取得できるみたいでした。

今回はパラメータ1つだけ、postから取得する形ですので「wp-json/posts?filter[posts_per_page]={{query}}」となります。

{{query}}部分に数字を入れることで指定した件数を常に取得するようにもできます。

その時毎回同じ内容を取得するのであれば、autoは無しにしても良いかもしれません。

4:inputのUIはMaterial Desginで実装する

せっかくPolymerを使用しているので、Material Designなフォームにスタイルを整えます。

例によってこれも実装は簡単で、Paper-inputというペーパーエレメントを使用するだけです。

Polymer paper elements:paper-input

以下の2行を先ほどinputタグを設置した箇所に設置することで実装できます。

[html]
<!– paper-inputをインポートする –>
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<!– inputタグを置換する–>
<paper-input label="ここにPlaceholdeテキスト" value="{{query}}"></paper-input>
[/html]

たったこれだけでinputタグがイカしたデザインになります。

5:まとめ

で、完成したのがこちら。


Polymer_WebAppPolymer WebApp

今回のコード:テンプレート側

*スタイル部分や今回と関係のない部分をゴッソリ削ってます。
[html]
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../../bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">

<polymer-element name="get-json" attributes="url">
<template>
<paper-input label="How many posts do you want?" value="{{query}}"></paper-input>

<core-ajax url="{{url}}{{query}}" handleAs="json" auto response="{{cont}}"></core-ajax>
<template repeat="{{ent in cont}}">
<div class="post {{ent.ID}}" id="div">
<paper-shadow z="1">
<div class="post-inner">
<h1>{{ent.title}}</h1>
<a href="{{ent.link}}">元記事を見る</a>
</div>
</paper-shadow>
</div>
</template>
</div>
</template>
</polymer-element>
[/html]

今回のコード:本体側

*スタイル部分や今回と関係のない部分をゴッソリ削ってます。
[html]
<link rel="import" href="./elements/use-json/getjson-2.html">

<get-json url="https://wp-kyoto.cdn.rabify.me/wp-json/posts?filter[posts_per_page]="></get-json>
[/html]

6:この後できそうなこと

記事一覧を表示する際にトーストアニメーションをつけるとより、Material Designっぽさが出るかなと思います。

あとはinputの代わりにaタグか何かを使って記事一覧→記事詳細をAjaxでやることもできそうです。

他に気になる点はクエリパラメータを使うので、XSS対策しておかないといろいろとまずい予感がすることくらいでしょうか。。

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts