WordPressAPI

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

WordPress APIの活用

アプリケーションプラットフォームとしてのWordPress


自己紹介

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

• [email protected]

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

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

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

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

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

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

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


本講座の目的

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

WordPress APIでできること

例題：ジャスティス†ブックマーク

フレームワークとしてのWordPress

XML-RPCと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


WordPress


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

DB

カスタム

タクソノミー

カスタム

フィールド

カスタム

投稿タイプ


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

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


WordPressを「アプリケーションプラットフォーム」にする実験ジャスティス†ブックマーク


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

ジャスティス†ブックマーク• WordPressを「アプリケーションプラットフォーム」にしてブックマーク管理サービスを開

発するとりあえずソロ利用を前提とする

カスタム三兄弟も今回は使わない

– タイトルとリンクだけなら無くても保存できる。

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

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

• モバイルアプリ対応 (まにあえば)ブックマーク一覧をアプリとして確認できるようにする

– iOS / Android / FireFoxOS端末に対応したい


モバイルアプリ側

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

WordPressAPI経由で取得

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


ブックマークレットとは

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

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


ブックマーク管理プラグイン

ブックマーク管理プラグイン• ブックマークを管理するためのカスタム三兄弟をプラグイン一発で用意できるようにする

今回はカスタム三兄弟の使用を見送ります

カスタム投稿タイプ Link

カスタム投稿フィールド・(タイトル)・URL・(description)


デモ


デモ

デモ• アプリデモ

• 管理画面デモ

• ブックマークレットデモ


【技術解説】XML-RPCとJSON REST API


XML-RPCとJSON REST API

XML-RPCとJSON REST API• コンテンツの入出力を行うAPIは一つではない

昔からあるもの

– XML-RPC

» 枯れてる

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

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

最近開発中の物

– JSON REST API

» 開発中

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

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

その他

– 各種プラグイン

– JetPackのREST API


事前知識

事前知識

• 認証BASIC認証

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

その他– OAuth

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

» アプリに生のユーザー名とパスワードを持たせずに済む

• Same-Origin PolicyとCross-Origin Resource Sharing

• デバッグvar_dump()

– 開発環境でやりましょう…

console.log()


XML-RPC API

メリット

• 枯れてる、確実に動く公式のWordPressアプリもXML-RPCを使っている

– カスタム三兄弟も動作が保証されている

MonacaPressプロジェクトでも利用したが、確かに動く

デメリット

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

結果もXMLで返ってくる

ライブラリを使えば…

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

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

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


JSON REST API

メリット

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

• 結果がJSONで取得できる

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

デメリット

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

カスタム三兄弟に対応する方法が分からなかった

• 認証がBASIC認証とOAuth1しか用意されていないので難易度が高いOAuth1は難しい

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

XHRで外部サイトとBASIC認証するとCORS問題が出てきて難しい


認証と権限(認可)

認証と権限（認可）

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

JSON Basic Authentication プラグイン

• APIを開放して投稿出来るようにしたいけど「下書き」に留めておきたい場合

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

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


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認証も併用する場合、複雑な対応が必要


XMLRPCで記事取得


XMLRPCでPHPから記事取得

APIのURLとXMLを用意• 認証情報もXML中に含める

• XMLRPCの場合は公開記事の取得でも記事の権限が必要となる

<?php$url = "http://b.j801.com/xmlrpc.php";$xml = '<?xml version="1.0"?><methodCall><methodName>wp.getPost</methodName><array><data>

<value>1</value><value>ユーザー名</value><value>!PASSWORD!</value><value>10</value>

</data></array>

</methodCall>';

$ch = curl_init();curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: text/xml')); curl_setopt($ch, CURLOPT_POSTFIELDS, $xml);curl_setopt($ch, CURLOPT_POST, TRUE); curl_setopt($ch, CURLOPT_URL, $url);

curl_exec($ch);

getByXMLRPC.php


XMLRPCでJSから記事取得

JSでXML文を直接記述する場合は改行に注意• 複雑なXML文を組み立てる場合はライブラリの使用も検討

<!DOCTYPE html> <html>

<head> <meta charset="utf-8"><script>var url = 'http://b.j801.com/xmlrpc.php';var xml = '<?xml version="1.0"?>¥

<methodCall>¥<methodName>wp.getPost</methodName>¥<array>¥

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

</data>¥</array>¥

</methodCall>';

getByXMLRPC.html


XMLRPCでJSから記事取得

続き• XMLRPCの場合は記事取得もPOSTリクエスト

var xhr= new XMLHttpRequest();xhr.open("POST" , url, false);xhr.send(xml);console.log(xhr.response);

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

</html>

getByXMLRPC.html


レスポンスの例

XMLRPCでの記事取得に成功すると記事情報が返却されます<?xml version="1.0" encoding="UTF-8"?><methodResponse><params><param><value><struct>

<member><name>post_id</name><value><string>114</string></value></member><member><name>post_title</name><value><string>bookmarkLetのリンク</string></value></member><member><name>post_date</name><value><dateTime.iso8601>20140824T16:40:20</dateTime.iso8601></value></member><member><name>post_date_gmt</name><value><dateTime.iso8601>20140824T07:40:20</dateTime.iso8601></value></member><member><name>post_modified</name><value><dateTime.iso8601>20140824T16:40:20</dateTime.iso8601></value></member><member><name>post_modified_gmt</name><value><dateTime.iso8601>20140824T07:40:20</dateTime.iso8601></value></member><member><name>post_status</name><value><string>draft</string></value></member><member><name>post_type</name><value><string>post</string></value></member><member><name>post_name</name><value><string></string></value></member><member><name>post_author</name><value><string>2</string></value></member><member><name>post_password</name><value><string></string></value></member><member><name>post_excerpt</name><value><string></string></value></member><member><name>post_content</name><value><string></string></value></member><member><name>post_parent</name><value><string>0</string></value></member><member><name>post_mime_type</name><value><string></string></value></member><member><name>link</name><value><string>http://b.j801.com/?p=114</string></value></member><member><name>guid</name><value><string>http://b.j801.com/?p=114</string></value></member><member><name>menu_order</name><value><int>0</int></value></member><member><name>comment_status</name><value><string>closed</string></value></member><member><name>ping_status</name><value><string>open</string></value></member><member><name>sticky</name><value><boolean>0</boolean></value></member><member><name>post_thumbnail</name><value><array><data>

</data></array></value></member>



続き• XMLのままだとプログラムの中では扱いにくいため、実際には変換して利用します

<member><name>terms</name><value><array><data><value><struct><member><name>term_id</name><value><string>1</string></value></member><member><name>name</name><value><string>未分類</string></value></member><member><name>slug</name><value><string>%e6%9c%aa%e5%88%86%e9%a1%9e</string></value></member><member><name>term_group</name><value><string>0</string></value></member><member><name>term_taxonomy_id</name><value><string>1</string></value></member><member><name>taxonomy</name><value><string>category</string></value></member><member><name>description</name><value><string></string></value></member><member><name>parent</name><value><string>0</string></value></member><member><name>count</name><value><int>2</int></value></member><member><name>filter</name><value><string>raw</string></value></member>

</struct></value></data></array></value></member><member><name>custom_fields</name><value><array><data>

</data></array></value></member></struct>

</value></param>

</params></methodResponse>


XMLRPCで記事投稿


XMLRPCでPHPから記事投稿

APIのURLとXMLを用意

<?php$url = "http://b.j801.com/xmlrpc.php";$xml = '<?xml version="1.0"?><methodCall>

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

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

<struct><member>

<name>post_title</name><value>foo</value>

</member></struct>

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

</methodCall>';

postByXMLRPC.php


XMLRPCAPIでPHPから記事投稿

続き• PHPのcurlを利用してAPIにXMLをPOSTする

$ch = curl_init();

curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: text/xml')); curl_setopt($ch, CURLOPT_POSTFIELDS, $xml);curl_setopt($ch, CURLOPT_POST, TRUE); curl_setopt($ch, CURLOPT_URL, $url);

curl_exec($ch);

postByXMLRPC.php


XMLRPCAPIでJSから記事投稿

APIのURLとXMLを用意


<head> <meta charset="utf-8"><script>var url = 'http://b.j801.com/xmlrpc.php';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>foo</value>¥

</member>¥</struct>¥

</value>¥</data>¥

</array>¥</methodCall>';

postByXMLRPC.html


XMLRPCAPIでJSから記事投稿

続き• XHRを利用してAPIにXMLをPOSTする。

今回は非同期通信をオフにしています

– プログラムを分かり易くするためなので必須ではありません

var xhr= new XMLHttpRequest();xhr.open("POST" , url, false);xhr.send(xml);console.log(xhr.response);


</html>

postByXMLRPC.html



XMLRPCでの記事投稿に成功すると記事IDが返却されます

<?xml version="1.0" encoding="UTF-8"?><methodResponse><params>

<param><value><string>122</string></value>

</param></params>

</methodResponse>


JSON REST APIで記事取得


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でリクエストするだけ


<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);


</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でPHPから記事投稿

投稿内容はJSONで用意する必要があります• PHPのjson_encode()関数を利用できます

記事投稿には認証が必要です• PHPの場合curlで簡単にBASIC認証できます

<?php$url = "http://b.j801.com/wp-json/posts";$userpwd = 'ユーザー名:!PASSWORD!';$data = array('title' => 'Hello World!','type' => 'post','content_raw' => 'foo',

);$data = json_encode($data);

$ch = curl_init();curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json')); curl_setopt($ch, CURLOPT_USERPWD, $userpwd);curl_setopt($ch, CURLOPT_POSTFIELDS, $data);curl_setopt($ch, CURLOPT_POST, TRUE); curl_setopt($ch, CURLOPT_URL, $url);curl_exec($ch);

postByJSONRESTAPI.php


JSON REST APIでJSから記事投稿

JSでBASIC認証に対応するためには注意点があります• xhr.setRequestHeader()でAuthorizationヘッダーをセットする

• ユーザー名とパスワードは事前にbase64エンコードを施す

ユーザー名:パスワード


<head> <meta charset="utf-8"><script>var xhr = new XMLHttpRequest();var url = "http:///b.j801.com/wp-json/posts";var basic = "Basic " + "ajgwMWNvbStudWxsZnNAZ21haWwuY29tOmRldm51bGw4MDE=";

xhr.open("POST" , url, false);xhr.setRequestHeader("Authorization", basic);xhr.send(JSON.stringify({ 'title': 'Hello World!', 'type' : 'post', 'content_raw': 'foo'}));console.log(xhr.response);


</html>

postByJSONRESTAPI.php


ユーザー名とパスワードをbase64エンコードする

ユーザー名とパスワードをbase64エンコードする• JSの標準では関数が無い

どうしてもJSで変換したい

– 別途ライブラリを使う

面倒なのでWebサービスを使う

– 幾らでも存在するがユーザー名やパスワードを打ち込むのは気持ちの良いものではない…

• PHPを利用する

MacやLinuxならコマンドラインからPHPを呼び出す

php -r "echo base64_encode('ユーザー名:!PASSWORD!');"


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


ブックマークレット

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

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

• 諸注意

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

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

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

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

文字数制限が存在する

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

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

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

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


ブックマークレット

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

// ブックマークレットは「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);

})()'


ブックマークレット実際に送信処理を行う関数

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タグで提供する場合の例

WordPressAPI

Technology

Transcript of WordPressAPI