WordPress APIで作るモバイルアプリ

URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1

WordPressAPIで作るモバイルアプリアプリケーションプラットフォームとしてのWordPress


自己紹介

名前• 岡本雄樹（HN:ジャスティス岡本）

• [email protected]

Webやプログラミングを始めた理由• 自分のWebサイトを作るためWebサーバーを構築したのがきっかけでLinux

やPHP・オープンソースの世界と出会う。

略歴• 大学生時代は創業したばかりの通販ベンチャーでＥＣサイト立ち上げに関わ

り、システム構築からサーバの運用などシステム面を一手に引き受ける。

• アシアル入社後も、その経験を生かしＥＣサイトの自社パッケージ開発や多数のEC案件に関わる。

現在の仕事• 現在は教育事業を担当しておりWeb技術の教育サービスを行っている。

• 著書として「イラストでよくわかるPHP はじめてのWebプログラミング入門」がある。


本講座の目的

WordPressを使ってアプリケーションを作ろう

• WordPressのWebAPI

• JSON REST APIで投稿取得

• JSON REST APIで作るウィジェット

モバイルアプリの作り方

• モバイルアプリ開発１：サイトビュワー

• モバイルアプリ開発２：ジャスティス†ブックマーク

参考資料


WordPressを使ってアプリケーションを作ろう


アプリケーションプラットフォーム？

今後WordPressは「アプリケーションプラットフォーム」を指向するらしいです• 基調講演を参考

アプリケーションとは?• WordやPhotoShopのような、特定の目的の為に使うソフトウェア

ブラウザもアプリケーション

– Webサイトは通常、アプリケーションではない。

» ブログなどはコンテンツ。

– キーワード検索や翻訳など、特定の目的で使えるソフトが動くサイトはアプリケーション

LinuxやApacheやMySQLは応用ソフトやミドルウェアに分類されるためアプリケーションではない

アプリケーションの例• ニュースアプリ

• RSSリーダーアプリ

• ブラウザ

• MS製品やAdobe製品、その他パソコンソフト全般

• etc,etc


アプリケーションを開発するために必要なもの


• 入力

文字・数値・座標（マウスやタップから得られる情報を含む）等

• 出力

文字・数値・画像・アニメーション等

• 処理

何らかのプログラム

• 保存

何らかのデータ



これが基本。ゲームであっても入力に応じて何かを出力している。

入力処理出力

保存



WordPressもアプリケーション• Webサイトの表示や管理に特化している。

記事 WordPress WebPage

DB



Webの管理画面やWebの閲覧画面から脱却できれば、新たな可能性が…

WordPress

DB



APIを使うことでWebサイトに限定しない使い方ができるようになる

WordPress

DB

入力出力API API

Web経由で外部のシステムから利用できるAPIのことを

「WebAPI」と呼びます


WordPress


カスタム三兄弟を使うことで扱うコンテンツも自由に定義することができる

DB

カスタム

タクソノミー

カスタム

フィールド

カスタム

投稿タイプ


具体的なアプリケーションの例

ブログエディタソフトもアプリです• 公式のiOSアプリ等


WordPressのWebAPI


WordPressのWebAPI

WordPressのWebAPI• 昔からあるもの

XML-RPC WordPress API

– コアの機能ととして用意されている

– XML-RPCというやり方で通信を行う

– データはXMLで返ってくる

• 今注目されているものJSON REST API

– 今後、コアに取り込まれる予定

– REST というやり方で通信を行う

– データはJSONで返ってくる

その他

– JetPackのREST API

– 各種プラグイン


WebAPIの利用に必要な知識

WebAPIの利用に必要な知識のおさらい

• XML

汎用的なマークアップ言語

– HTMLもXMLで書けるしSVGもXML形式

データの保存形式としても広く使われている

• JSON

データの保存形式として最近よく使われている

JSのオブジェクト表現

– とはいえ、JS以外の言語でも簡単に利用できる




• RESTAPIの設計思想

• XML-RPC

APIのプロトコルの一種

– 仕様としてまとまっている

– リクエストやレスポンスは常にXML

» XMLの組み立てやパースが多少面倒




• 認証

第三者が勝手に記事を投稿出来ると困るので認証を行う、という考え。

• 認可

認証済みだからといって誰でも自由に記事を公開できてしまうと困るので、個々のユーザーに権限を与える、という考え方。


Same-Origin PolicyとCORSについて

Same-Origin Policyについて• 簡単に言うとブラウザに制限を掛けるための仕組み

例えば、JSによる外部のサイト(厳密にはオリジン)へのリクエストはこのポリシーで制限されている

CORS(Cross-Origin Resource Sharing)について• Same-Origin Policyを緩和するための仕組み

JS用にAPI提供などを行いたい場合に利用できる

API提供サーバー側で特別なHTTPヘッダーを返すようにする

– Allow CORS XML-RPC プラグイン

詳細はMozilla参照• https://developer.mozilla.org/ja/docs/HTTP_access_control

メモ• CORSだけなら固定のヘッダーを一行追加するだけ

BASIC認証も併用する場合、複雑な対応が必要



WebAPIの利用に必要な知識のおさらい• BASIC認証

ユーザー名とパスワードによる認証

– BASE64でエンコードして送信するが暗号化しているわけではない

» 暗号化が必要な場合はHTTPS通信をつかう

HTTPで定められているため、枯れており言語やフレームワークには依存しない

• OAuth

アプリに権限を付与するための仕組み

– 生のユーザー名とパスワードを持たせずに済む

OAuth1とOAuth2がある


XML-RPC WordPress APIの特徴

メリット

• 十分に安定している、確実に動く公式のWordPressアプリもXML-RPCを使っている

– カスタム三兄弟もそのまま使える

MonacaPressプロジェクトで利用したときにもちゃんと動いた

デメリット

• リクエストもレスポンスも全てXML組み立てるのが少々面倒

– 結果もXMLで返ってくる

XMLやXML-RPC用のライブラリを使えばそんなに大変ではない

• 認証リクエストのXMLに直接ユーザー名とパスワードを入力する方式

– 手軽だが、アプリに権限の一部を開放するような仕組みは用意されていない

公開している記事の取得ですら認証が必要


JSON REST APIの特徴

メリット

• RESTの仕組みはXML-RPCより簡単、といわれている

• 結果がJSONで取得できる

• 公開されている記事なら認証せずに取得できる

デメリット

• ドキュメントがまだ少ない日本語のドキュメントは皆無

• カスタム三兄弟に対応するには少し手を入れる必要がある

• 認証がBASIC認証とOAuth1しか用意されていないOAuth1は難しい

– OAuth2の方が簡単といわれている

JSで外部サイトとBASIC認証するのは難しい

– Same-Origin Policyが大変


JSON REST APIの認証と認可

認証

• JSON REST APIでBASIC認証を利用したい場合

Basic Authenticationプラグイン

認可

• APIで投稿出来るようにしたいけど公開まではさせたくない場合

ユーザーの権限を管理者以外にする– 「寄稿者」などにする

プラグインで細かく設定する– User Role Editor プラグイン


JSON REST APIで投稿取得


JSON REST APIで投稿取得するためのリクエスト例

JSON REST APIで投稿取得するためのリクエスト例

• 全件

http://b.j801.com/wp-json/posts

• 特定の記事

http://b.j801.com/wp-json/posts/7

• 特定のカテゴリ

http://b.j801.com/wp-json/posts?filter[category_name]=events

その他

• カテゴリ一覧

http://b.j801.com/wp-json/taxonomies/category/terms


JSON REST APIでPHPから投稿取得

APIのURLに記事のID指定してGETリクエストする• 公開されている記事なら権限チェックも特になし

<?php$url = "http://b.j801.com/wp-json/posts/7";

$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url);curl_exec($ch);

getByJSONRESTAPI.php


JSON REST APIでJSから投稿取得

こちらもXHRでリクエストするだけ

<!DOCTYPE html> <html>

<head> <meta charset="utf-8"><script>

var url = 'http://b.j801.com/wp-json/posts/7';var xhr = new XMLHttpRequest();xhr.open("GET", url, false);xhr.send();console.log(xhr.response);

</script></head><body></body>

</html>

getByJSONRESTAPI.html


レスポンスの例JSON形式で情報が大量に返ってきます

{"ID": 7, "author": {

"ID": 1, "URL": "", "avatar": "http://0.gravatar.com/avatar/42fcbe74b0c48f70ffbffe57472382c8?s=96", "description": "", "first_name": "", "last_name": "", "meta": {

"links": {"archives": "http://b.j801.com/wp-json/users/1/posts", "self": "http://b.j801.com/wp-json/users/1"

}}, "name": "justice", "nickname": "justice", "registered": "2014-08-18T01:31:52+00:00", "slug": "justice", "username": "justice"

}, "comment_status": "open", "content": "<p>http://j801.com</p>

", "date": "2014-08-18T10:36:47+09:00", "date_gmt": "2014-08-18T01:36:47+00:00", "date_tz": "Asia/Tokyo", "excerpt": "<p>http://j801.com</p>

", "featured_image": null, "format": "standard", "guid": "http://b.j801.com/?p=7", "link": "http://b.j801.com/archives/7", "menu_order": 0, "meta": {

"links": {"author": "http://b.j801.com/wp-json/users/1",

"collection": "http://b.j801.com/wp-json/posts", "replies": "http://b.j801.com/wp-json/posts/7/comments", "self": "http://b.j801.com/wp-json/posts/7", "version-history": "http://b.j801.com/wp-json/posts/7/revisions"

}}, "modified": "2014-08-18T10:36:47+09:00", "modified_gmt": "2014-08-18T01:36:47+00:00", "modified_tz": "Asia/Tokyo", "parent": 0, "ping_status": "open", "slug": "j801", "status": "publish", "sticky": false, "terms": {

"category": [{

"ID": 1, "count": 2, "description": "", "link": "http://b.j801.com/archives/category/%e6%9c%aa%e5%88%86%e9%a1%9e", "meta": {

"links": {"collection": "http://b.j801.com/wp-json/taxonomies/category/terms", "self": "http://b.j801.com/wp-json/taxonomies/category/terms/1"

}}, "name": "未分類", "parent": null, "slug": "%e6%9c%aa%e5%88%86%e9%a1%9e"

}]

}, "title": "j801", "type": "post"

}


JSON REST APIで作るウィジェット


JSON REST APIで作るウィジェット

JSON REST APIで作るウィジェット• ウィジェットにJSを仕込んで、タイトル一覧を表示する

JSON REST API経由でデータを取得して展開する


ウィジェットのコード

ウィジェットのコード<ul id="bookmark"></ul><script>jQuery(function() {

jQuery.ajax({type: 'GET',url: 'http://b.j801.com/wp-json/posts',dataType: 'json',success: function(json){

jQuery.each(json, function() {var text = "<li><a href='" + this.link + "'>" + this.title + "</a></li>";jQuery("#bookmark").append(text);

});}

});});</script>


モバイルアプリの作り方


一言でモバイルと言っても様々なモバイルOSが存在する

世界中で利用されているモバイル端末には、様々な種類のモバイルOSが搭載されており、アプリの開発者は複数OSへの対応が求められています。

Source: Gartner (November 2013)


実はHTML5(とCSSとJS)で開発できます


HTML5によるモバイルアプリの仕組み

HTML5でマーケットに提出可能なアプリを作るためには「Cordova（PhoneGap）」というライブラリを利用して開発します。 CordovaはHTMLで作成されたコードをネイティブコードでパッケージングします。

ネイティブコード

HTML・CSS・JavaScript


ネイティブコード

JavaScriptからカメラ等の端末固有の機能も利用可能

カメラなどの端末固有の機能を呼び出す場合、開発者はJavaScriptで命令を記述します。するとCordovaがネイティブコードによって対応する機能を実行します。

連絡帳GPSカメラ

HTML・CSS・JavaScript


国産の開発ツールをご用意させて頂きました

クラウド上でハイブリッドアプリを作ることができる統合開発環境です。

作成したアプリはApp StoreやGoogle Playなどで公開可能です。

• 有料で販売することもできます。

• マーケットを経由せずに配布することも可能です。

無料から利用できます。


Monacaによる開発の流れ

ブラウザだけで開発、テスト、ビルド（アプリの生成）までのすべての工程を行うことができます。

1. ブラウザで開発 2. 実機で動作確認 3. ビルドして配布


アプリ開発講座もご用意させて頂きました

はじめてのHTML5モバイルアプリ開発講座• http://monaca.mobi/ja/training/


スライドは無料公開中

さぁ、モバイルアプリを作ろう！


モバイルアプリ開発


サイト記事一覧アプリ

サイト記事一覧アプリ

• jQueryMobileでUIを構築

• JSON REST APIで情報を取得


jQueryMobileの有効化

jQueryMobileの有効化• JS/CSSコンポーネントの追加と削除


JSのコード

JSのコード<script>

/* リスト生成 */$.ajax({type: 'GET',url: 'http://b.j801.com/wp-json/posts',dataType: 'json',success: function(json){

$.each(json, function() {var text = "<div data-role='collapsible'><h3>"

+ this.title + "</h3><p>" + this.content + "</p></div>";$("#home div.posts").append(text);

});$("#home div.posts").collapsibleset('refresh');

}});

</script>


jQueryMobileのHTMLコード

jQueryMobileのHTMLコード<body>

<div data-role="page" id="home"><div data-role="header" data-position="inline" data-backbtn="false" data-theme="a">

<h1>サイト</h1><a href="#home" data-icon="home" class="ui-btn-left ui-icon-home">home</a>

</div><div data-role="content">

<div data-role="collapsible-set" data-theme="c" data-content-theme="a" class="posts"></div>

</div><footer data-role="footer" data-id="footer"

data-position="fixed" data-tap-toggle="false" data-theme="a"><div>Powerd By Justice</div>

</footer></div>

</body>


ジャスティス†ブックマーク




• ブックマーク管理サービス

仕様

• jQueryMobileでUI構築

• モバイルアプリ対応

ブックマーク一覧をアプリとして確認できる

カテゴリに対応

• ブックマークレット対応

閲覧しているページをブックマークレット一発で登録できるようにする


モバイルアプリ側

モバイルアプリ側• ブックマークを一覧で表示

WordPressAPI経由で取得

• ブックマークをクリック（タッチ）すると外部ブラウザで表示する


ブックマークレットとは

ブックマークレットとは• お気に入りに登録できるJSプログラム

閲覧しているサイトのタイトルやURLを外部に送信するようなプログラムも実現可能


モバイルアプリでの表示


jQueryMobileのHTMLコード

jQueryMobileのHTMLコード抜粋<div data-role="page" id="home"><div data-role="header" data-position="inline" data-backbtn="false" data-theme="b">

<h1>home</h1><a href="#home" data-icon="home" class="ui-btn-left ui-icon-home">home</a>

</div><div data-role="content">

<ul data-role="listview" class="bookmark"></ul>

</div><footer data-role="footer" data-id="footer" data-position="fixed" data-tap-toggle="false" data-theme="b">

<nav data-role="navbar"><ul><li><a href="#events" name="events">events</a></li><li><a href="#speakers" name="speakers">speakers</a></li><li><a href="#sponsors" name="sponsors">sponsors</a></li><li><a href="#others" name="others">others</a></li>

</ul></nav>

</footer></div>


JSのコード

JSのコード(config.json){"queries":

{"home":"http://b.j801.com/wp-json/posts","speakers":"http://b.j801.com/wp-json/posts?filter[category_name]=speakers","sponsors":"http://b.j801.com/wp-json/posts?filter[category_name]=sponsors","events":"http://b.j801.com/wp-json/posts?filter[category_name]=events","others":"http://b.j801.com/wp-json/posts?filter[category_name]=others"

}}


JSのコード

JSのコード(configure.js)// InAppBrowserdocument.addEventListener ("deviceready", onDeviceReady, false);function onDeviceReady() {$(document).on('click', 'a', function(e){e.preventDefault();var link = $(this);console.log(link.attr('href'));

if (link.attr('rel') == 'external') {console.log('external');window.open(link.attr('href'), '_blank', 'location=yes');

} else {$.mobile.changePage(link.attr('href'));

}});

}


JSのコード

JSのコード(configure.js)// make app_config object.$.ajaxSetup({ async: false });app_config = {};$.getJSON("js/config.json" ,function(data){app_config = data;

});


JSのコード

JSのコード(configure.js)// make DOM (listview)$(function (){$.each(app_config.queries, function(key, query){$.ajax({type: 'GET',url: query,dataType: 'json',success: function(json){$.each(json, function() {var text = "<li><a data-ajax:'false' rel='external' target='_blank' href='"

+ this.content + "'>" + this.title + "</a></li>";$("#" + key + " ul.bookmark").append(text);

});}

}); });$("#home ul.bookmark").listview('refresh');

});


ブックマークレットでURLとタイトルを投稿


ブックマークレット


• お気に入り登録できるJSプログラム

例えば、閲覧しているサイトの情報を外部に飛ばしたりできる

• 諸注意

1行にまとめねばならない

空白等をURLエンコードせねばならない

– ブックマークレット変換ツールみたいなものも存在する

返り値が発生しないようにせねばらなない(void化)

文字数制限が存在する

• 実は外部ファイルが使える

外部ファイルなら1行縛りや文字数制限から解放される

– ただしCORS問題からは解放されない

– 読み込みは非同期に行われるので注意


閲覧しているサイトの情報を飛ばす

閲覧しているサイトの情報を飛ばす

• 情報

タイトル

– document.title

URL

– location.href

• 飛ばし方

XML-RPCを使う

– ブックマークレットでJSON REST APIの投稿を行うのは大変なので…



ブックマークレットのソースコード

// ブックマークレットは「javascript:」から始める。返り値がvoidになるように対策。javascript:(function(){// 外部ファイルを読み込むためのscriptタグを生成var s = document.createElement("script");// scriptタグの属性srcに値として外部ファイルを設定s.src = "http://b.j801.com/tools/b.js";// 外部ファイルの読み込み完了時に処理が実行されるように設定s.onload=function(){postBookmarkByXMLRPC()

};// DOMにscriptタグを埋め込むdocument.body.appendChild(s);

})()'



外部ファイルで読み込む関数postBookmarkByXMLRPC()function postBookmarkByXMLRPC () {var xml = '<?xml version="1.0"?>¥

<methodCall>¥<methodName>wp.newPost</methodName>¥<array>¥<data>¥

<value><int>1</int></value>¥<value>ユーザー名</value>¥<value>!PASSWORD!</value>¥<value>¥

<struct>¥<member>¥

<name>post_title</name>¥<value>' + document.title + '</value>¥

</member>¥<member>¥

<name>post_content</name>¥<value>' + location.href + '</value>¥

</member>¥</struct>¥

</value>¥</data>¥</array>¥

</methodCall>';var xhr= new XMLHttpRequest();xhr.open("POST" , "http://b.j801.com/xmlrpc.php", false);xhr.send(xml);

}


ブックマークレットの登録方法

お気に入りとして登録しましょう• ブックマークバーなどに表示しておくと便利です

• ブックマークの編集から編集可能です

<a href='javascript:(function(){var%20s%20=%20document.createElement("script");%20s.src%20=%20"http://b.j801.com/tools/b.js";s.onload=function(){postBookmarkByXMLRPC()};document.body.appendChild(s);})()'>ブックマークレット</a>

ブックマークレットをAタグで提供する場合の例


参考資料


参考資料

JSON REST APIのマニュアル• http://wp-api.org/

JSON REST APIでカスタムフィールドを使う方法• フォーラム：カスタムフィールドの内容をJSON REST APIで表示する

http://ja.forums.wordpress.org/topic/138386

• プラグイン：WP API Customizer (Kaito)

https://wordpress.org/plugins/wp-api-customizer/

JSON REST APIでoAuthを実現する方法• 菱川さんのブログ：

http://notnil-creative.com/blog/archives/3301

Monaca• http://monaca.mobi/ja/

Software

WordPress APIで作るモバイルアプリ