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

最近 JSON REST API (WP API) (Githubのリポジトリはこちら)が人気ということを聞きつけまして、さっぱりわかってないのですが、とりあえずやってみたら何かになるかもしれないという具合で、やってみました。ひとまず表示まで出来たのでその一部始終です。

最終的にこんなのが出来ました

megane-blog.com の最新の記事を取得してタイトルをリンクとして表示するというものですね。下記より手順です。

1. WordPress を API化する

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

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

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://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より

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

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

[code lang=jscript]
<script>
$.ajax({
type: 'GET',
url: 'https://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: を利用して出し分ける内容も多いのですが、公式には非推奨になっているということで、こちらのほうがモダンな書き方だそうです。

参考:

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

関連記事

Posted in

↑