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案件に関わる。現在の仕事 • 現在は教育事業を担当しており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で作るウィジェットモバイルアプリの作り方 • モバイルアプリ開発１：サイトビュワー • モバイルアプリ開発２：ジャスティス†ブックマーク参考資料

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 何らかのデータ

10. アプリケーションを開発するために必要なもの APIを使うことでWebサイトに限定しない使い方ができるようになる入力API API 出力 WordPress DB Web経由で外部のシステムから利用できるAPIのことを「WebAPI」と呼びます URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 10

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" }

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>

32. 一言でモバイルと言っても様々なモバイルOSが存在する世界中で利用されているモバイル端末には、様々な種類のモバイルOSが搭載されており、アプリの開発者は複数OSへの対応が求められています。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 32 Source: Gartner (November 2013)

34. HTML5によるモバイルアプリの仕組み HTML5でマーケットに提出可能なアプリを作るためには「Cordova（PhoneGap）」というライブラリを利用して開発します。CordovaはHTMLで作成されたコードをネイティブコードでパッケージングします。 HTML・CSS・JavaScript ネイティブコード URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 34

35. JavaScriptからカメラ等の端末固有の機能も利用可能カメラなどの端末固有の機能を呼び出す場合、開発者はJavaScriptで命令を記述します。するとCordovaがネイティブコードによって対応する機能を実行します。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 35 ネイティブコードカメラGPS 連絡帳 HTML・CSS・JavaScript

36. 国産の開発ツールをご用意させて頂きましたクラウド上でハイブリッドアプリを作ることができる統合開発環境です。作成したアプリはApp StoreやGoogle Playなどで公開可能です。 • 有料で販売することもできます。 • マーケットを経由せずに配布することも可能です。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 36 無料から利用できます。

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

46. ジャスティス†ブックマーク URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 46 ジャスティス†ブックマーク • ブックマーク管理サービス仕様 • jQueryMobileでUI構築 • モバイルアプリ対応 9 ブックマーク一覧をアプリとして確認できる 9 カテゴリに対応 • ブックマークレット対応 9 閲覧しているページをブックマークレット一発で登録できるようにする

50. 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> URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 50 </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>

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/

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

You are reading a preview.

Check these out next

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

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Similar to WordPress APIで作るモバイルアプリ (20)

More from アシアル株式会社 (20)

Recently uploaded (20)