WordPressAPI

WordPress APIの活用
アプリケーションプラットフォームとしてのWordPress
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1

自己紹介
„ 名前
• 岡本雄樹（HN:ジャスティス岡本）
• yuki@asial.co.jp
„ Webやプログラミングを始めた理由
• 自分のWebサイトを作るためWebサーバーを構築したのがきっかけでLinux
やPHP・オープンソースの世界と出会う。
„ 略歴
• 大学生時代は創業したばかりの通販ベンチャーでＥＣサイト立ち上げに関わ
り、システム構築からサーバの運用などシステム面を一手に引き受ける。
• アシアル入社後も、その経験を生かしＥＣサイトの自社パッケージ開発や多
数のEC案件に関わる。
„ 現在の仕事
• 現在は教育事業を担当しておりWeb技術の教育サービスを行っている。
• 著書として「イラストでよくわかるPHP はじめてのWebプログラミング入
門」がある。

本講座の目的
„ WordPressを使ってアプリケーションを作ろう
„ WordPress APIでできること
„ 例題：ジャスティス†ブックマーク
„ フレームワークとしてのWordPress
„ XML-RPCとJSON REST API
„ 参考資料

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

アプリケーションプラットフォーム？
„ 今後WordPressは「アプリケーションプラットフォーム」を指向するらしいです
• なるほど！わからん！
„ アプリケーションとは?
• WordやPhotoShopのような、特定の目的の為に使うソフトウェア
9 ブラウザもアプリケーション
– Webサイトは通常、アプリケーションではない。
» ブログなどはコンテンツ。
– キーワード検索や翻訳など、特定の目的で使えるソフトが動くサイトはアプリケーション
9 LinuxやApacheやMySQLは応用ソフトやミドルウェアに分類されるためアプリケーションではない
„ アプリケーションの例
• ニュースアプリ
• RSSリーダーアプリ
• ブラウザ
• MS製品やAdobe製品、その他パソコンソフト全般
• etc,etc

アプリケーションを開発するために必要なもの
„ アプリケーションを開発するために必要なもの
• 入力
9 文字・数値・座標（マウスやタップから得られる情報を含む）等
• 出力
9 文字・数値・画像・アニメーション等
• 処理
9 何らかのプログラム
• 保存
9 何らかのデータ

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

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

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

„ APIを使うことでWebサイトに限定しない使い方ができるようになる
入力API API 出力
WordPress
DB

„ カスタム三兄弟を使うことで扱うコンテンツも自由に定義することができる
WordPress
カスタム
フィールド
DB
カスタム
タクソノミー
カスタム
投稿タイプ

具体的なアプリケーションの例
„ ブログエディタソフトもアプリです
• 公式のiOSアプリ等

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

ジャスティス†ブックマーク
„ ジャスティス†ブックマーク
• WordPressを「アプリケーションプラットフォーム」にしてブックマーク管理サービスを開
発する
9 とりあえずソロ利用を前提とする
9 カスタム三兄弟も今回は使わない
– タイトルとリンクだけなら無くても保存できる。
„ 仕様
• ブックマークレット対応
9 閲覧しているページをブックマークレット一発で登録できるようにする
• モバイルアプリ対応(まにあえば)
9 ブックマーク一覧をアプリとして確認できるようにする
– iOS / Android / FireFoxOS端末に対応したい

モバイルアプリ側
„ モバイルアプリ側
• ブックマークを一覧で表示
9 WordPressAPI経由で取得
• ブックマークをクリック（タッチ）すると外部ブラウザで表示する

ブックマークレットとは
„ ブックマークレットとは
• お気に入りに登録できるJSプログラム
9 閲覧しているサイトのタイトルやURLを外部に送信するようなプログラムも実現可能

ブックマーク管理プラグイン
„ ブックマーク管理プラグイン
• ブックマークを管理するためのカスタム三兄弟をプラグイン一発で用意できるようにする
9 今回はカスタム三兄弟の使用を見送ります
カスタム投稿タイプLink
カスタム投稿フィールド
・(タイトル)
・URL
・(description)

デモ

デモ
„ デモ
• アプリデモ
• 管理画面デモ
• ブックマークレットデモ

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

XML-RPCとJSON REST API
„ XML-RPCとJSON REST API
• コンテンツの入出力を行うAPIは一つではない
9 昔からあるもの
– XML-RPC
» 枯れてる
» XML-RPCというやり方で通信を行う
» データはXMLで返ってくる
9 最近開発中の物
– JSON REST API
» 開発中
» REST というやり方で通信を行う
» データはJSONで返ってくる
9 その他
– 各種プラグイン
– JetPackのREST API

事前知識
„ 事前知識
• 認証
9 BASIC認証
– ユーザー名とパスワードによる認証
9 その他
– OAuth
» アプリに権限を付与するための仕組み
» アプリに生のユーザー名とパスワードを持たせずに済む
• Same-Origin PolicyとCross-Origin Resource Sharing
• デバッグ
9 var_dump()
– 開発環境でやりましょう…
9 console.log()

XML-RPC API
„ メリット
• 枯れてる、確実に動く
9 公式のWordPressアプリもXML-RPCを使っている
– カスタム三兄弟も動作が保証されている
9 MonacaPressプロジェクトでも利用したが、確かに動く
„ デメリット
• リクエストもレスポンスも全てXML
9 組み立てるのが少々面倒
9 結果もXMLで返ってくる
9 ライブラリを使えば…
• 認証
9 リクエストのXMLに直接ユーザー名とパスワードを入力する方式
– 手軽だが、アプリに権限の一部を開放するような仕組みは用意されていない
9 公開している記事の取得ですら認証が必要

JSON REST API
„ メリット
• RESTの仕組みはXML-RPCより簡単といわれている
• 結果がJSONで取得できる
• 公開されている記事なら認証せずに取得できる
„ デメリット
• ドキュメントが少ない
9 日本語のドキュメントは皆無
9 カスタム三兄弟に対応する方法が分からなかった
• 認証がBASIC認証とOAuth1しか用意されていないので難易度が高い
9 OAuth1は難しい
– OAuth2の方が簡単といわれている
9 XHRで外部サイトとBASIC認証するとCORS問題が出てきて難しい

認証と権限(認可)
„ 認証と権限（認可）
• JSON REST APIでBASIC認証を利用したい場合
9 JSON Basic Authentication プラグイン
• APIを開放して投稿出来るようにしたいけど「下書き」に留めておきた
い場合
9 ユーザーの権限を管理者以外にする
– 「寄稿者」などにする
9 プラグインで細かく設定する
– User Role Editor プラグイン

Same-Origin PolicyとCORSについて
„ Same-Origin Policyについて
• 簡単に言うとブラウザに制限を掛けるための仕組み
9 例えば、JSによる外部のサイト(厳密にはオリジン)へのリクエストはこのポリシーで制限されている
„ CORS(Cross-Origin Resource Sharing)について
• Same-Origin Policyを緩和するための仕組み
9 JS用にAPI提供などを行いたい場合に利用できる
9 API提供サーバー側で特別なHTTPヘッダーを返すようにする
– Allow CORS XML-RPC プラグイン
„ 詳細はMozilla参照
• https://developer.mozilla.org/ja/docs/HTTP_access_control
„ メモ
• CORSだけなら固定のヘッダーを一行追加するだけ
9 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>
<member><name>custom_fields</name><value><array><data>
</struct>
</value>
</param>
</params>
</methodResponse>

XMLRPCで記事投稿

XMLRPCでPHPから記事投稿
<?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_exec($ch);
postByXMLRPC.php

XMLRPCAPIでJSから記事投稿
<!DOCTYPE html>
<html>
<head>
<script>
var url = 'http://b.j801.com/xmlrpc.php';
<methodCall>¥
<methodName>wp.newPost</methodName>¥
<array>¥
<data>¥
<value><int>1</int></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する。
9 今回は非同期通信をオフにしています
– プログラムを分かり易くするためなので必須ではありません
xhr.send(xml);
</script>
</head>
<body>
</body>
</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_exec($ch);
getByJSONRESTAPI.php

JSON REST APIでJSから記事取得
„ こちらもXHRでリクエストするだけ
<!DOCTYPE html>
<html>
<head>
<script>
var url = ' http://b.j801.com/wp-json/posts/7';
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
xhr.send();
</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で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_exec($ch);
postByJSONRESTAPI.php

JSON REST APIでJSから記事投稿
„ JSでBASIC認証に対応するためには注意点があります
• xhr.setRequestHeader()でAuthorizationヘッダーをセットする
• ユーザー名とパスワードは事前にbase64エンコードを施す
postByJSONRESTAPI.php
9 ユーザー名:パスワード
<!DOCTYPE html>
<html>
<head>
<script>
var xhr = new XMLHttpRequest();
var url = "http:///b.j801.com/wp-json/posts";
var basic = "Basic " + "ajgwMWNvbStudWxsZnNAZ21haWwuY29tOmRldm51bGw4MDE=";
xhr.setRequestHeader("Authorization", basic);
xhr.send(JSON.stringify({ 'title': 'Hello World!', 'type' : 'post', 'content_raw': 'foo'}));
</script>
</head>
<body>
</body>
</html>

ユーザー名とパスワードをbase64エンコードする
„ ユーザー名とパスワードをbase64エンコードする
• JSの標準では関数が無い
9 どうしてもJSで変換したい
– 別途ライブラリを使う
9 面倒なのでWebサービスを使う
– 幾らでも存在するがユーザー名やパスワードを打ち込むのは気持ちの良いものではない…
• PHPを利用する
9 MacやLinuxならコマンドラインからPHPを呼び出す
php -r "echo base64_encode('ユーザー名:!PASSWORD!');"

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

ブックマークレット
„ ブックマークレット
• お気に入り登録できるJSプログラム
9 例えば、閲覧しているサイトの情報を外部に飛ばしたりできる
• 諸注意
9 1行にまとめねばならない
9 空白等をURLエンコードせねばならない
– ブックマークレット変換ツールみたいなものも存在する
9 返り値が発生しないようにせねばらなない(void化)
9 文字数制限が存在する
• 実は外部ファイルが使える
9 外部ファイルなら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 () {
<methodCall>¥
<methodName>wp.newPost</methodName>¥
<array>¥
<data>¥
<value><int>1</int></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>';
xhr.open("POST" , "http://b.j801.com/xmlrpc.php", false);
xhr.send(xml);
}

登録されたブックマークレット
ブックマークレットをAタグで提供する場合の例
„ お気に入りとして登録しましょう
• ブックマークバーなどに表示しておくと便利です
• ブックマークの編集から編集可能です
9 認証情報は外部ファイルよりもブックマークに記述する方が、まだマシです
<a
href='javascript:(function(){var%2
0s%20=%20document.createElement("s
cript");%20s.src%20=%20"http://b.j
801.com/tools/b.js";s.onload=funct
ion(){postBookmarkByXMLRPC()};docu
ment.body.appendChild(s);})()'>
ブックマークレット</a>

WordPressAPI

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (10)

Similar to WordPressAPI

Similar to WordPressAPI (20)

More from Yuki Okamoto

More from Yuki Okamoto (13)

Recently uploaded

Recently uploaded (12)

WordPressAPI