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

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

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

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

スクリーンショット

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側で頑張ってもらいました。

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() { 

なんでこんな面倒くさいことをしているかというと、元のデータがこんな感じでそのままではソートできなさそうだったためです。

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

作ってみて

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

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

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