WP API + ReactでWordCampの情報を表示するアプリを作ってみた

WordCamp CentralにはカスタマイズされたWP APIのエンドポイントがあったりします。

WordCamp USでそれを知ってから使ってみたくて仕方なかったので、正月休みを利用して簡単なアプリのようなものを作ってみました。

GitHubにソースコードをあげていたので、そのままGitHub Pagesで公開してみました。

スクリーンショット

List of WordCamp Infomation

WordCamp Centralに登録されているWordCamp情報を100件表示します。

As for the finished event, a color changes.

すでに終了しているWordCampは背景色が変わります。

Show WordCamp Central Posts after WordCamp Information tables.


ページ下部にはWordCamp Centralのブログ記事が10件表示されます

Tipsとか

WP REST APIで取ってくる方法

WordCampの開催情報を取ってくるAPIエンドポイントが設置されているので、それを叩きます。

Version1のエンドポイントですが、filter[XXX]は使えるので検索とかもできます。

クエリサンプル

20件取ってくる
https://central.wordcamp.org/wp-json/posts?type=wordcamp&filter[posts_per_page]=20
tokyoを含むWordCampだけ取ってくる
https://central.wordcamp.org/wp-json/posts?type=wordcamp&filter[s]=tokyo

日付順ソートはめんどくさい

カスタム投稿タイプで管理されているため、日付ソートは「WordCamp Centralへの登録日」で行なわれます。
filter[date]とかfilter[orderby]とかで開催日順に並んでくれないのは開催日がカスタムフィールドに保存されているからです。

WP_Queryでならmeta_keyとかmeta_value使えば検索できますが、WP REST APIのfilterクエリでは使えないっぽいのでJavaScript側で頑張ってもらいました。

[js]
var CentralList = React.createClass({
//開始日でソートできるようにデータを整形
parseStartDate: function( postData ) {
for( var j = 0; j < postData.length; j++){
var post_meta = postData[j].post_meta;
for (var i = 0; i < post_meta.length; i++) {
if(post_meta[i].key === "Start Date (YYYY-mm-dd)"){
postData[j][‘startDate’] = post_meta[i].value;
}
}
}
return postData;
},
//上で整形したデータを使って整形
sortByStartDate: function() {
var postData = this.parseStartDate(this.props.postData);
var key = "startDate";

//ASCならこちら
var num_a = 1;
var num_b = -1;

//DESCの場合はこっち
var num_a = -1;
var num_b = 1;

var data = postData.sort(function(a, b){
var x = a[key];
var y = b[key];
if (x > y) return num_a;
if (x < y) return num_b;
return 0;
});
return data;;
},
render: function() {
[/js]

なんでこんな面倒くさいことをしているかというと、元のデータがこんな感じでそのままではソートできなさそうだったためです。
スクリーンショット 2016-01-03 0.54.40

ソート処理はNode.js – Javascriptでオブジェクトの配列をKey/Valueでソートする関数 – Qiitaを参考にしました。

作ってみて

今まで実行委員ですらCSSとHTMLでどうにかすることしかできなかったWordCampのサイトデータが、WP REST API使えばいろいろできると思うと結構胸熱だったりします。

とはいえあくまで野良なのでWordCampのサイト上で使うことはできませんがが・・・

WordCampの各サイトからはセッションやスポンサー情報などもAPIで取ってこれるので、「今家出たらこのセッション間に合う」みたいなアプリとか作ってみるのも面白いかもですね。

Follow me!

Okamoto Hidetaka
デジタルキューブのインフラエンジニア。勉強会に和太鼓の練習から直行することが多く「太鼓の人」とかよばれてます。 思いつきで公式ディレクトリにテーマやプラグインをアップしたりテーマレビューやったりしています。 AWS / WordPress / LinkedOpenData周りで活動していて、APIをどうこうして何か作るというのが多いです。 ひとこと
mautic is open source marketing automation