最近 JSON REST API (WP API) (Githubのリポジトリはこちら)が人気ということを聞きつけまして、さっぱりわかってないのですが、とりあえずやってみたら何かになるかもしれないという具合で、やってみました。ひとまず表示まで出来たのでその一部始終です。 最終的にこんなのが出来ました ≫ 先にサンプルを見る megane-blog.com の最新の記事を取得してタイトルをリンクとして表示するというものですね。下記より手順です。 1. WordPress を API化する ひとまず JSON REST API (WP API) をインストールして有効化します。 その後、おもむろに有効化した WordPress の URL に /wp-json/ をつけてアクセスします。 https://www.megane-blog.com//wp-json/ はい、下記のようにいきなり API 化されました。ドバーッとJSON形式のテキストでデータが出てきますね。簡単です。 今回ひとまず最新の投稿が表示できればいいなということで、URL は https://www.megane-blog.com//wp-json/posts/ にします。内容はこんなかんじです。 Rest型APIなので、リクエストする URL によって返ってくる内容が変わりますということですね。詳しくはドキュメントをみましょう 2. 外部ドメインからのアクセスを有効化する 今回デモのページも含めて同ドメインからのアクセスなので、この作業は不要です。ただ、本来の API の特性を考えると、異なるドメインからのアクセスを許可するもあることでしょう。その辺りの設定を行います。 HTTP access control (CORS) 続 クロスドメインで使う XMLHttpRequest と CORS の話 こちらの .htaccess に追記する方法をとりましたが、用途に合わせて、制限はしたほうが良いような気がします。 3. jQuary を利用して、json データを表示する ここからは表示の方法ですね。jQuaryを利用します。巷で大流行中のJS関連ですが、私自身こちらもほとんど出来ないため、最近は JavaScript入門を写経を始めました。なかなかスイスイとは進みませんが、HTMLに比べてプログラムをしている感があって、簡単な事でもできるとちょっと嬉しいですね。余談ですが PhpStorm の便利さにうっとりしてます。 jQuaryを読み込みます [code lang=text] <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> [/code] JSONデータを読み込んで表示する script を書きます [code lang=jscript] <script> $(document).ready(function(){ $.getJSON("https://www.megane-blog.com//wp-json/posts/",function(data) { for(var i=0;i<20;i++){ $('.megane').append('<li><a href="'+data[i].link+'">'+data[i].title+'</a></li>'); } }) }); </script> [/code] 丁度、for文の勉強 をしていたところだったのでそれがそのまま役に立ちました。あとは、適時CSSなどを整えて完成ですね。 参考 : jQuery.getJSON( url, data, callback ) – jQuery 日本語リファレンス 結果として最新情報が静的なページから表示できるようになりました。 今回の成果 これでいつでも、megane-blog.comの最新情報を、どのドメインでも好きな場所に出すことが出来ますね。たとえばブログパーツとか、アプリとかそういうものにも使えそうです。今の私の直近の用途としては、まったくもって改修が進んでいない自分の会社のサイトを静的につくろうと思ってますので、そこで Blog の最新の情報が出せるそうです。本来の使い方はもっとすごくて、いろんな活用事例が出てくるからこそ、注目されているのかなと予想しています。なので、どんな未来の活用法がでてくるのか今後期待ですね。 もろもろわからないままやってますので、「なんか違う」とか「もっとこうだろう」みたいな内容があれば教えてください。もろもろ反応がいただけるのは嬉しい限りです。では今日はここまで。ありがとうございました。 2014/09/09 … Continue reading JSON REST API (WP API) プラグインを利用して ブログを API 化したり、そこから情報を取得して表示したり