MonacaとWordPressを連携してみた – Webデザイナーでもわかるシリーズ –

IMG_0441

こんにちは! デザイナーのおすぎです。
最近私もMonacaに興味津々なワケですが、
ふと、MonacaとWordPressを連携させて
WordPressの記事をアプリに表示できないかと思い立ちました。
もし実現できたらデザイナーでも簡単にアプリの管理ツールが作れちゃいます

調べてみるとMonacaの運営会社アシアルさんでも
同様の研究があるようです。

特命:WordPressとMonacaを連携させてビジネスチャンスを生み出すこと
http://blog.asial.co.jp/1181

ぜひ取り組みが前進するといいですね!

1. WordPressにプラグインを入れる

WordPressの記事をアプリ側で表示するためには
JSONという技術を利用する必要があります。
JSONについて詳しく知りたい方は下記がとってもわかりやすいです。

jQueryでjsonデータを扱ってみる【入門編】 | webOpixel
http://www.webopixel.net/javascript/91.html

今回は、そんなに詳しく理解する必要はありません。
まずは導入して見たほうが早いかと思います。

下記のプラグインをいつも通りインストールして下さい。

JSON API
http://wordpress.org/plugins/json-api/

インストールした後は有効化を忘れずに!

2. WordPressの記事を、別のドメインから読み込むことを許可する

ここがちょっと難しいかもしれません。
アプリから記事を読み込むとき、JavaScriptの「Ajax」という機能を使用します。
実はその「Ajax」のルールとして
「呼び出しは、同一ドメインからしかできない」ようになっているんです。
なんかちょっとむずかしいですよね。
要は、勝手に他人の記事データを読み込めないようになっています。
今回はMonacaからWordPressの記事を読み込む必要があるので、
WordPress側(サーバー側)で許可してあげる必要があります。
やり方は簡単。WordPressを運用しているサーバーにアクセスして
下記を記述した.htaccessを作成し、
WordPressのディレクトリにアップロードします。

Header append Access-Control-Allow-Origin: *

これでOK。 「*(アスタリスク)」が入る事で「全て」のドメインからの
データ読み込みを許可しています。
一部だけを許可したいかたは下記を参考に記述を変えて下さいね。

XMLHttpRequest level2に対応しているブラウザまとめ at HouseTect, JavaScriptな情報をあなたに
http://hisasann.com/housetect/2010/11/xmlhttprequest_level2.html

3. MonacaでJSONデータを呼び出す

いよいよMonacaのアプリでWordPressの記事を呼び出します。
MonacaのIDE上にて、index.htmlのbody直下に下記を記述して下さい。
プラグイン設定でjQueryをONにするのを忘れないで下さいね。

<ul class="item"></ul>

<script type="text/javascript">

var ROOT_URL = "ここに取得したいWordPressのURLを入れる";

$.getJSON(ROOT_URL+"?json=get_recent_posts", function(data) {
  for(var i=0; i<10; i++){
    $(".item").append(
        "<li>" + data.posts[i].content + "</li>"        
    );
  }
});

</script>

上記を記述したらプレビューしてみましょう!
WordPressの記事が最新順に表示されたのではないでしょうか?
「data.posts[i].content」を「data.posts[i].title」に
書き換えると記事のタイトルだけを取得できたりします。
応用次第で色々できそうですね!

もっと詳しく知りたい人は、
下記のドキュメントを見てみるといいかもしれません。

(英語のページです) WordPress › JSON API « WordPress Plugins
http://wordpress.org/plugins/json-api/other_notes/

コメントを残す

メールアドレスが公開されることはありません。