JSONPでWP-APIからデータを取得しようとしたところ、予想外のところでどハマりしたのでその対応についてをまとめました。

WP-APIが現在進行形で開発されているものだということを改めて思い知らされた一件です。

追記：2015/03/25

公式ディレクトリのバージョンが1.2にアップデートされました。

なのでこの記事後半の手作業アップデートを実施するよりも、プラグインをアップデートされたほうが早いです。ｶﾞｯﾃﾞﾑ

他にもかなりアップデートされている様子なので、興味のある方はChangelogをご覧くださいです。

WP-APIでJSONPを取得する方法

WP-APIはURLを/wp-json/posts/?_jsonp=callbackのように書くと、JSONP形式で出力してくれます。

GitHubのログを漁ってみると、「_jsonp」クエリをGETできた場合はパラメーターをコールバックにして返すような仕様になっている様子です。

WP-API/class-wp-json-server.php at 9eefa74ac9f76241ea79ef7bdfd5836fd4081395 · WP-API/WP-API

試していませんが、filterやpost以外のデータでも_jsonpクエリをつけることでJSONPを吐き出してくれるのではないかと思います。

公式プラグインではエラーになる

これでクロスドメインも大丈夫だー！って思っていたら、まさかのエラーorz

「Refused to execute script from ‘https://example.com/wp-json/posts?_jsonp’ because its MIME type (‘application/json’) is not executable, and strict MIME type checking is enabled.」

MIMETYPEが「json」になってるからダメ！ってことみたいです。

で、サポートフォーラムを探ってみると不具合報告らしきものを発見・・・

WordPress › Support » Getting JSONP to work

Sorry about this! This is fixed in the current development version and will be included with version 1.2.

ということなので修正はされているらしいのです・・・が！

よく見ると修正バージョンは「1.2」、そしてWordPress公式プラグインディレクトリにあるWP-APIプラグインのバージョンは「1.1.1」・・・

どうりで上手く動かないわけっすよ・・・orz

っつーことで差分を手動反映する

幸か不幸か先ほどのサポートスレッドに修正コミットのURLが入っていて、そこを見るとどこを直せばいいかは一目で確認できます。

と、いうことでプラグインのアップデートが待てない方は手動でバグ修正やっちゃえばいいと思います。

削除するコード(lib/class-wp-json-server.php)

[php]
$this->send_header( ‘Content-Type’, ‘application/json; charset=’ . get_option( ‘blog_charset’ ), true );
[/php]

追加したコード(lib/class-wp-json-server.php)

[php]
$content_type = isset( $_GET[‘_jsonp’] ) ? ‘application/javascript’ : ‘application/json’;
$this->send_header( ‘Content-Type’, $content_type . ‘; charset=’ . get_option( ‘blog_charset’ ), true );
[/php]
Fix jsonp content-type response header by simonlampen · Pull Request #380 · WP-API/WP-API

プラグインを直接触ることが不安な方は、無理せずにバージョンアップを待つかPHPなどを間にかませる方が無難かもしれません。

JSONPでWP-APIを取得してみる

兎にも角にもこれでWP-APIをJSONPで取得できるようになりました。

jQuery部分のみ

jsonpのコールバック処理が入ったこと以外は特に代わり映えのないAJAX処理です。
[javascript]
$.ajax({
url: ‘https://example.com/wp-json/posts?_jsonp=?’,
type:’GET’,
dataType: ‘jsonp’,
jsonp : "callback",
timeout:10000,
success: function(data) {
var result = data;
for (var i = result.length – 1; i >= 0; i–) {
$(‘.wpapi’).append(‘<li>’ +result[i].title+'</li>’);
}
},
error: function(data) {
alert("ng");
}
});
[/javascript]

WP REST API v2での処理サンプル

CodepenのサンプルコードがこのサイトのWP REST APIを利用していたのですが、WP REST APIのバージョンをv2にアップデートした関係でこっちのサンプルコードはWP REST API v2でのサンプルになっています。