Más contenido relacionado
La actualidad más candente (20)
Similar a WordPress APIで作るモバイルアプリ (20)
WordPress APIで作るモバイルアプリ
- 2. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 2
自己紹介
„ 名前
• 岡本雄樹(HN:ジャスティス岡本)
• yuki@asial.co.jp
„ Webやプログラミングを始めた理由
• 自分のWebサイトを作るためWebサーバーを構築したのがきっかけでLinux
やPHP・オープンソースの世界と出会う。
„ 略歴
• 大学生時代は創業したばかりの通販ベンチャーでECサイト立ち上げに関わ
り、システム構築からサーバの運用などシステム面を一手に引き受ける。
• アシアル入社後も、その経験を生かしECサイトの自社パッケージ開発や多
数のEC案件に関わる。
„ 現在の仕事
• 現在は教育事業を担当しておりWeb技術の教育サービスを行っている。
• 著書として「イラストでよくわかるPHP はじめてのWebプログラミング入
門」がある。
- 3. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 3
本講座の目的
„ WordPressを使ってアプリケーションを作ろう
• WordPressのWebAPI
• JSON REST APIで投稿取得
• JSON REST APIで作るウィジェット
„ モバイルアプリの作り方
• モバイルアプリ開発1:サイトビュワー
• モバイルアプリ開発2:ジャスティス†ブックマーク
„ 参考資料
- 5. アプリケーションプラットフォーム?
„ 今後WordPressは「アプリケーションプラットフォーム」を指向するらしいです
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 5
• 基調講演を参考
„ アプリケーションとは?
• WordやPhotoShopのような、特定の目的の為に使うソフトウェア
9 ブラウザもアプリケーション
– Webサイトは通常、アプリケーションではない。
» ブログなどはコンテンツ。
– キーワード検索や翻訳など、特定の目的で使えるソフトが動くサイトはアプリケーション
9 LinuxやApacheやMySQLは応用ソフトやミドルウェアに分類されるためアプリケーションではない
„ アプリケーションの例
• ニュースアプリ
• RSSリーダーアプリ
• ブラウザ
• MS製品やAdobe製品、その他パソコンソフト全般
• etc,etc
- 6. アプリケーションを開発するために必要なもの
„ アプリケーションを開発するために必要なもの
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 6
• 入力
9 文字・数値・座標(マウスやタップから得られる情報を含む)等
• 出力
9 文字・数値・画像・アニメーション等
• 処理
9 何らかのプログラム
• 保存
9 何らかのデータ
- 8. アプリケーションを開発するために必要なもの
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 8
„ WordPressもアプリケーション
• Webサイトの表示や管理に特化している。
記事WordPress Web
Page
DB
- 12. 具体的なアプリケーションの例
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 12
„ ブログエディタソフトもアプリです
• 公式のiOSアプリ等
- 14. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 14
WordPressのWebAPI
„ WordPressのWebAPI
• 昔からあるもの
9 XML-RPC WordPress API
– コアの機能ととして用意されている
– XML-RPCというやり方で通信を行う
– データはXMLで返ってくる
• 今注目されているもの
9 JSON REST API
– 今後、コアに取り込まれる予定
– REST というやり方で通信を行う
– データはJSONで返ってくる
9 その他
– JetPackのREST API
– 各種プラグイン
- 15. WebAPIの利用に必要な知識
„ WebAPIの利用に必要な知識のおさらい
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 15
• XML
9 汎用的なマークアップ言語
– HTMLもXMLで書けるしSVGもXML形式
9 データの保存形式としても広く使われている
• JSON
9 データの保存形式として最近よく使われている
9 JSのオブジェクト表現
– とはいえ、JS以外の言語でも簡単に利用できる
- 16. WebAPIの利用に必要な知識
„ WebAPIの利用に必要な知識のおさらい
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 16
• REST
9 APIの設計思想
• XML-RPC
9 APIのプロトコルの一種
– 仕様としてまとまっている
– リクエストやレスポンスは常にXML
» XMLの組み立てやパースが多少面倒
- 17. WebAPIの利用に必要な知識
„ WebAPIの利用に必要な知識のおさらい
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 17
• 認証
9 第三者が勝手に記事を投稿出来ると困るので認証を行う、という考え。
• 認可
9 認証済みだからといって誰でも自由に記事を公開できてしまうと困るので、
個々のユーザーに権限を与える、という考え方。
- 18. Same-Origin PolicyとCORSについて
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 18
„ 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認証も併用する場合、複雑な対応が必要
- 19. WebAPIの利用に必要な知識
„ WebAPIの利用に必要な知識のおさらい
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 19
• BASIC認証
9 ユーザー名とパスワードによる認証
– BASE64でエンコードして送信するが暗号化しているわけではない
» 暗号化が必要な場合はHTTPS通信をつかう
9 HTTPで定められているため、枯れており言語やフレームワークには依存しない
• OAuth
9 アプリに権限を付与するための仕組み
– 生のユーザー名とパスワードを持たせずに済む
9 OAuth1とOAuth2がある
- 20. XML-RPC WordPress APIの特徴
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 20
„ メリット
• 十分に安定している、確実に動く
9 公式のWordPressアプリもXML-RPCを使っている
– カスタム三兄弟もそのまま使える
9 MonacaPressプロジェクトで利用したときにもちゃんと動いた
„ デメリット
• リクエストもレスポンスも全てXML
9 組み立てるのが少々面倒
– 結果もXMLで返ってくる
9 XMLやXML-RPC用のライブラリを使えばそんなに大変ではない
• 認証
9 リクエストのXMLに直接ユーザー名とパスワードを入力する方式
– 手軽だが、アプリに権限の一部を開放するような仕組みは用意されていない
9 公開している記事の取得ですら認証が必要
- 21. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 21
JSON REST APIの特徴
„ メリット
• RESTの仕組みはXML-RPCより簡単、といわれている
• 結果がJSONで取得できる
• 公開されている記事なら認証せずに取得できる
„ デメリット
• ドキュメントがまだ少ない
9 日本語のドキュメントは皆無
• カスタム三兄弟に対応するには少し手を入れる必要がある
• 認証がBASIC認証とOAuth1しか用意されていない
9 OAuth1は難しい
– OAuth2の方が簡単といわれている
9 JSで外部サイトとBASIC認証するのは難しい
– Same-Origin Policyが大変
- 22. JSON REST APIの認証と認可
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 22
„ 認証
• JSON REST APIでBASIC認証を利用したい場合
9 Basic Authenticationプラグイン
„ 認可
• APIで投稿出来るようにしたいけど公開まではさせたくない場合
9 ユーザーの権限を管理者以外にする
– 「寄稿者」などにする
9 プラグインで細かく設定する
– User Role Editor プラグイン
- 24. JSON REST APIで投稿取得するためのリクエスト例
„ JSON REST APIで投稿取得するためのリクエスト例
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24
• 全件
9 http://b.j801.com/wp-json/posts
• 特定の記事
9 http://b.j801.com/wp-json/posts/7
• 特定のカテゴリ
9 http://b.j801.com/wp-json/posts?filter[category_name]=events
„ その他
• カテゴリ一覧
9 http://b.j801.com/wp-json/taxonomies/category/terms
- 25. 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
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 25
- 26. JSON REST APIでJSから投稿取得
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 26
„ こちらも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
- 27. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 27
レスポンスの例
„ 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"
}
- 28. JSON REST APIで作るウィジェット
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 28
- 29. JSON REST APIで作るウィジェット
„ JSON REST APIで作るウィジェット
• ウィジェットにJSを仕込んで、タイトル一覧を表示する
9 JSON REST API経由でデータを取得して展開する
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 29
- 30. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 30
ウィジェットのコード
„ ウィジェットのコード
<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>
- 37. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 37
Monacaによる開発の流れ
„ ブラウザだけで開発、テスト、ビルド(アプリの生成)までのすべての工程を行うことができ
ます。
1. ブラウザで開発2. 実機で動作確認3. ビルドして配布
- 41. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 41
サイト記事一覧アプリ
„ サイト記事一覧アプリ
• jQueryMobileでUIを構築
• JSON REST APIで情報を取得
- 42. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 42
jQueryMobileの有効化
„ jQueryMobileの有効化
• JS/CSSコンポーネントの追加と削除
- 43. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 43
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>
- 44. jQueryMobileのHTMLコード
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 44
„ 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><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="a" class="posts">
</div>
</div><!-- /content -->
<footer data-role="footer" data-id="footer"
data-position="fixed" data-tap-toggle="false" data-theme="a">
<div>Powerd By Justice</div>
</footer><!-- /footer -->
</div><!-- /page -->
</body>
- 46. ジャスティス†ブックマーク
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 46
„ ジャスティス†ブックマーク
• ブックマーク管理サービス
„ 仕様
• jQueryMobileでUI構築
• モバイルアプリ対応
9 ブックマーク一覧をアプリとして確認できる
9 カテゴリに対応
• ブックマークレット対応
9 閲覧しているページをブックマークレット一発で登録できるようにする
- 47. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 47
モバイルアプリ側
„ モバイルアプリ側
• ブックマークを一覧で表示
9 WordPressAPI経由で取得
• ブックマークをクリック(タッチ)すると外部ブラウザで表示する
- 48. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 48
ブックマークレットとは
„ ブックマークレットとは
• お気に入りに登録できるJSプログラム
9 閲覧しているサイトのタイトルやURLを外部に送信するようなプログラムも実現可能
- 50. jQueryMobileのHTMLコード
„ jQueryMobileのHTMLコード抜粋
<!-- /page -->
<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><!-- /header -->
<div data-role="content">
<ul data-role="listview" class="bookmark">
</ul>
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 50
</div><!-- /content -->
<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><!-- /navbar -->
</footer><!-- /footer -->
</div><!-- /page -->
<!-- /page -->
- 51. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 51
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"
}
}
- 52. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 52
JSのコード
„ JSのコード(configure.js)
// InAppBrowser
document.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'));
}
});
}
- 53. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 53
JSのコード
„ JSのコード(configure.js)
// make app_config object.
$.ajaxSetup({ async: false });
app_config = {};
$.getJSON("js/config.json" ,function(data){
app_config = data;
});
- 54. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 54
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');
});
- 56. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 56
ブックマークレット
„ ブックマークレット
• お気に入り登録できるJSプログラム
9 例えば、閲覧しているサイトの情報を外部に飛ばしたりできる
• 諸注意
9 1行にまとめねばならない
9 空白等をURLエンコードせねばならない
– ブックマークレット変換ツールみたいなものも存在する
9 返り値が発生しないようにせねばらなない(void化)
9 文字数制限が存在する
• 実は外部ファイルが使える
9 外部ファイルなら1行縛りや文字数制限から解放される
– ただしCORS問題からは解放されない
– 読み込みは非同期に行われるので注意
- 57. 閲覧しているサイトの情報を飛ばす
„ 閲覧しているサイトの情報を飛ばす
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 57
• 情報
9 タイトル
– document.title
9 URL
– location.href
• 飛ばし方
9 XML-RPCを使う
– ブックマークレットでJSON REST APIの投稿を行うのは大変なので…
- 58. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 58
ブックマークレット
„ ブックマークレットのソースコード
// ブックマークレットは「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);
})()'
- 59. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 59
ブックマークレット
„ 外部ファイルで読み込む関数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);
}
- 60. ブックマークレットの登録方法
ブックマークレットをAタグで提供する場合の例
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 60
„ お気に入りとして登録しましょう
• ブックマークバーなどに表示しておくと便利です
• ブックマークの編集から編集可能です
<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>
- 62. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 62
参考資料
„ JSON REST APIのマニュアル
• http://wp-api.org/
„ JSON REST APIでカスタムフィールドを使う方法
• フォーラム:カスタムフィールドの内容をJSON REST APIで表示する
9 http://ja.forums.wordpress.org/topic/138386
• プラグイン:WP API Customizer (Kaito)
9 https://wordpress.org/plugins/wp-api-customizer/
„ JSON REST APIでoAuthを実現する方法
• 菱川さんのブログ:
9 http://notnil-creative.com/blog/archives/3301
„ Monaca
• http://monaca.mobi/ja/