JSON REST API (WP API) プラグインを利用して ブログを API 化したり、そこから情報を取得して表示したり

最近 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形式のテキストでデータが出てきますね。簡単です。

JSONのレスポンスのイメージ

  • 今回ひとまず最新の投稿が表示できればいいなということで、URL は https://www.megane-blog.com//wp-json/posts/ にします。内容はこんなかんじです。
  • Rest型APIなので、リクエストする URL によって返ってくる内容が変わりますということですね。詳しくはドキュメントをみましょう

2. 外部ドメインからのアクセスを有効化する

  • 今回デモのページも含めて同ドメインからのアクセスなので、この作業は不要です。ただ、本来の API の特性を考えると、異なるドメインからのアクセスを許可するもあることでしょう。その辺りの設定を行います。

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 8:23 追記

Facebookより

  • $ajax で読み込み
  • JSON が読み込めなかった時の処理

この2つについてコメントをいただきましたので、追記です。

$ajax での読み込み + 読み込めなかった時の条件分岐付き

[code lang=jscript]
<script>
$.ajax({
type: 'GET',
url: 'https://www.megane-blog.com//wp-json/posts/',
dataType: 'json'
}).done(function(json){
var len = json.length;
for(var i=0; i < len; i++){
$(".ajax").append('<li><a href="'+json[i].link+'">'+json[i].title+'</a></li>');
}
}).fail(function(json){
$('.ajax').append("読み込みませんでした。");
});
</script>
[/code]

.done.fail を利用して読み込み時に内容の出しわけを行うわけですね。色々調べると、success:error: を利用して出し分ける内容も多いのですが、公式には非推奨になっているということで、こちらのほうがモダンな書き方だそうです。

参考:

引き続きコメントいただけると嬉しい限りです。よろしくお願いいたします。