SlideShare uma empresa Scribd logo
1 de 62
Baixar para ler offline
WordPressAPIで作るモバイルアプリ 
アプリケーションプラットフォームとしてのWordPress 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1
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プログラミング入 
門」がある。
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 3 
本講座の目的 
„ WordPressを使ってアプリケーションを作ろう 
• WordPressのWebAPI 
• JSON REST APIで投稿取得 
• JSON REST APIで作るウィジェット 
„ モバイルアプリの作り方 
• モバイルアプリ開発1:サイトビュワー 
• モバイルアプリ開発2:ジャスティス†ブックマーク 
„ 参考資料
WordPressを使ってアプリケーションを作ろう 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 4
アプリケーションプラットフォーム? 
„ 今後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
アプリケーションを開発するために必要なもの 
„ アプリケーションを開発するために必要なもの 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 6 
• 入力 
9 文字・数値・座標(マウスやタップから得られる情報を含む)等 
• 出力 
9 文字・数値・画像・アニメーション等 
• 処理 
9 何らかのプログラム 
• 保存 
9 何らかのデータ
アプリケーションを開発するために必要なもの 
„ これが基本。ゲームであっても入力に応じて何かを出力している。 
入力処理出力 
保存 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 7
アプリケーションを開発するために必要なもの 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 8 
„ WordPressもアプリケーション 
• Webサイトの表示や管理に特化している。 
記事WordPress Web 
Page 
DB
アプリケーションを開発するために必要なもの 
„ Webの管理画面やWebの閲覧画面から脱却できれば、新たな可能性が… 
WordPress 
DB 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9
アプリケーションを開発するために必要なもの 
„ APIを使うことでWebサイトに限定しない使い方ができるようになる 
入力API API 出力 
WordPress 
DB 
Web経由で外部のシステム 
から利用できるAPIのことを 
「WebAPI」 
と呼びます 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 10
アプリケーションを開発するために必要なもの 
„ カスタム三兄弟を使うことで扱うコンテンツも自由に定義することができる 
WordPress 
カスタム 
フィールド 
DB 
カスタム 
タクソノミー 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 11 
カスタム 
投稿タイプ
具体的なアプリケーションの例 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 12 
„ ブログエディタソフトもアプリです 
• 公式のiOSアプリ等
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 13 
WordPressのWebAPI
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 
– 各種プラグイン
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以外の言語でも簡単に利用できる
WebAPIの利用に必要な知識 
„ WebAPIの利用に必要な知識のおさらい 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 16 
• REST 
9 APIの設計思想 
• XML-RPC 
9 APIのプロトコルの一種 
– 仕様としてまとまっている 
– リクエストやレスポンスは常にXML 
» XMLの組み立てやパースが多少面倒
WebAPIの利用に必要な知識 
„ WebAPIの利用に必要な知識のおさらい 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 17 
• 認証 
9 第三者が勝手に記事を投稿出来ると困るので認証を行う、という考え。 
• 認可 
9 認証済みだからといって誰でも自由に記事を公開できてしまうと困るので、 
個々のユーザーに権限を与える、という考え方。
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認証も併用する場合、複雑な対応が必要
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がある
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 公開している記事の取得ですら認証が必要
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が大変
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 プラグイン
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 23 
JSON REST APIで投稿取得
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
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
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
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" 
}
JSON REST APIで作るウィジェット 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 28
JSON REST APIで作るウィジェット 
„ JSON REST APIで作るウィジェット 
• ウィジェットにJSを仕込んで、タイトル一覧を表示する 
9 JSON REST API経由でデータを取得して展開する 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 29
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>
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 31 
モバイルアプリの作り方
一言でモバイルと言っても様々なモバイルOSが存在する 
„ 世界中で利用されているモバイル端末には、様々な種類のモバイルOSが搭載されており、アプ 
リの開発者は複数OSへの対応が求められています。 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 32 
Source: Gartner (November 2013)
実はHTML5(とCSSとJS)で開発できます 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 33
HTML5によるモバイルアプリの仕組み 
„ HTML5でマーケットに提出可能なアプリを作るためには「Cordova(PhoneGap)」というラ 
イブラリを利用して開発します。CordovaはHTMLで作成されたコードをネイティブコードで 
パッケージングします。 
HTML・CSS・JavaScript 
ネイティブコード 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 34
JavaScriptからカメラ等の端末固有の機能も利用可能 
„ カメラなどの端末固有の機能を呼び出す場合、開発者はJavaScriptで命令を記述します。する 
とCordovaがネイティブコードによって対応する機能を実行します。 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 35 
ネイティブコード 
カメラGPS 連絡帳 
HTML・CSS・JavaScript
国産の開発ツールをご用意させて頂きました 
„ クラウド上でハイブリッドアプリを作ることができる統合開発環境です。 
„ 作成したアプリはApp StoreやGoogle Playなどで公開可能です。 
• 有料で販売することもできます。 
• マーケットを経由せずに配布することも可能です。 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 36 
„ 無料から利用できます。
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 37 
Monacaによる開発の流れ 
„ ブラウザだけで開発、テスト、ビルド(アプリの生成)までのすべての工程を行うことができ 
ます。 
1. ブラウザで開発2. 実機で動作確認3. ビルドして配布
アプリ開発講座もご用意させて頂きました 
„ はじめてのHTML5モバイルアプリ開発講座 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 38 
• http://monaca.mobi/ja/training/
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 39 
スライドは無料公開中 
„ さぁ、モバイルアプリを作ろう!
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 40 
モバイルアプリ開発
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 41 
サイト記事一覧アプリ 
„ サイト記事一覧アプリ 
• jQueryMobileでUIを構築 
• JSON REST APIで情報を取得
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 42 
jQueryMobileの有効化 
„ jQueryMobileの有効化 
• JS/CSSコンポーネントの追加と削除
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>
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>
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 45 
ジャスティス†ブックマーク
ジャスティス†ブックマーク 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 46 
„ ジャスティス†ブックマーク 
• ブックマーク管理サービス 
„ 仕様 
• jQueryMobileでUI構築 
• モバイルアプリ対応 
9 ブックマーク一覧をアプリとして確認できる 
9 カテゴリに対応 
• ブックマークレット対応 
9 閲覧しているページをブックマークレット一発で登録できるようにする
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 47 
モバイルアプリ側 
„ モバイルアプリ側 
• ブックマークを一覧で表示 
9 WordPressAPI経由で取得 
• ブックマークをクリック(タッチ)すると外部ブラウザで表示する
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 48 
ブックマークレットとは 
„ ブックマークレットとは 
• お気に入りに登録できるJSプログラム 
9 閲覧しているサイトのタイトルやURLを外部に送信するようなプログラムも実現可能
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 49 
モバイルアプリでの表示
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 -->
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" 
} 
}
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')); 
} 
}); 
}
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; 
});
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'); 
});
ブックマークレットでURLとタイトルを投稿 
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 55
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問題からは解放されない 
– 読み込みは非同期に行われるので注意
閲覧しているサイトの情報を飛ばす 
„ 閲覧しているサイトの情報を飛ばす 
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の投稿を行うのは大変なので…
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); 
})()'
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); 
}
ブックマークレットの登録方法 
ブックマークレットを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>
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 61 
参考資料
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/

Mais conteúdo relacionado

Mais procurados

オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツオブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ増田 亨
 
ビジネスモデルをシステムにつなげる
ビジネスモデルをシステムにつなげるビジネスモデルをシステムにつなげる
ビジネスモデルをシステムにつなげるZenji Kanzaki
 
Laravelとテストについて
LaravelとテストについてLaravelとテストについて
LaravelとテストについてTakeo Noda
 
いまさら、AWSのネットワーク設計
いまさら、AWSのネットワーク設計いまさら、AWSのネットワーク設計
いまさら、AWSのネットワーク設計Serverworks Co.,Ltd.
 
AWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティスAWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティスAmazon Web Services Japan
 
分散トレーシングAWS:X-Rayとの上手い付き合い方
分散トレーシングAWS:X-Rayとの上手い付き合い方分散トレーシングAWS:X-Rayとの上手い付き合い方
分散トレーシングAWS:X-Rayとの上手い付き合い方Recruit Lifestyle Co., Ltd.
 
Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門Satoshi Kubo
 
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンスライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンスJun Nogata
 
とにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みるとにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みるMasatoshi Tada
 
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ることGraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ることShingo Fukui
 
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話Takuto Wada
 
「落ちない」AWSのインフラ構成、システム要件にあわせたパターンをご紹介
「落ちない」AWSのインフラ構成、システム要件にあわせたパターンをご紹介「落ちない」AWSのインフラ構成、システム要件にあわせたパターンをご紹介
「落ちない」AWSのインフラ構成、システム要件にあわせたパターンをご紹介NHN テコラス株式会社
 
イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡NTT Communications Technology Development
 
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能Masaki Suzuki
 
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築Hirokazu Ouchi
 
ニワトリでもわかるECS入門
ニワトリでもわかるECS入門ニワトリでもわかるECS入門
ニワトリでもわかるECS入門Yoshiki Kobayashi
 
AWS 기반 지속 가능한 데이터 분석 플랫폼 구축하기 - 소성운, 지그재그 :: AWS Summit Seoul 2019
AWS 기반 지속 가능한 데이터 분석 플랫폼 구축하기 - 소성운, 지그재그 :: AWS Summit Seoul 2019AWS 기반 지속 가능한 데이터 분석 플랫폼 구축하기 - 소성운, 지그재그 :: AWS Summit Seoul 2019
AWS 기반 지속 가능한 데이터 분석 플랫폼 구축하기 - 소성운, 지그재그 :: AWS Summit Seoul 2019Amazon Web Services Korea
 
20190222_インベントリ収集のオープンソースOpenAudITの機能紹介とIT資産管理で必要なこと
20190222_インベントリ収集のオープンソースOpenAudITの機能紹介とIT資産管理で必要なこと20190222_インベントリ収集のオープンソースOpenAudITの機能紹介とIT資産管理で必要なこと
20190222_インベントリ収集のオープンソースOpenAudITの機能紹介とIT資産管理で必要なことIO Architect Inc.
 

Mais procurados (20)

SwiftのDI方法につい て最近考えてた話
SwiftのDI方法につい て最近考えてた話SwiftのDI方法につい て最近考えてた話
SwiftのDI方法につい て最近考えてた話
 
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツオブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
 
ビジネスモデルをシステムにつなげる
ビジネスモデルをシステムにつなげるビジネスモデルをシステムにつなげる
ビジネスモデルをシステムにつなげる
 
Laravelとテストについて
LaravelとテストについてLaravelとテストについて
Laravelとテストについて
 
いまさら、AWSのネットワーク設計
いまさら、AWSのネットワーク設計いまさら、AWSのネットワーク設計
いまさら、AWSのネットワーク設計
 
AWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティスAWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティス
 
分散トレーシングAWS:X-Rayとの上手い付き合い方
分散トレーシングAWS:X-Rayとの上手い付き合い方分散トレーシングAWS:X-Rayとの上手い付き合い方
分散トレーシングAWS:X-Rayとの上手い付き合い方
 
Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門Junitを使ったjavaのテスト入門
Junitを使ったjavaのテスト入門
 
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンスライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
ライセンスを理解してますか?知っておきたいWordPressとGPLライセンス
 
とにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みるとにかく分かりづらいTwelve-Factor Appの解説を試みる
とにかく分かりづらいTwelve-Factor Appの解説を試みる
 
GraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ることGraphQLのsubscriptionで出来ること
GraphQLのsubscriptionで出来ること
 
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
 
「落ちない」AWSのインフラ構成、システム要件にあわせたパターンをご紹介
「落ちない」AWSのインフラ構成、システム要件にあわせたパターンをご紹介「落ちない」AWSのインフラ構成、システム要件にあわせたパターンをご紹介
「落ちない」AWSのインフラ構成、システム要件にあわせたパターンをご紹介
 
イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡
 
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
 
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
 
Serverless時代のJavaについて
Serverless時代のJavaについてServerless時代のJavaについて
Serverless時代のJavaについて
 
ニワトリでもわかるECS入門
ニワトリでもわかるECS入門ニワトリでもわかるECS入門
ニワトリでもわかるECS入門
 
AWS 기반 지속 가능한 데이터 분석 플랫폼 구축하기 - 소성운, 지그재그 :: AWS Summit Seoul 2019
AWS 기반 지속 가능한 데이터 분석 플랫폼 구축하기 - 소성운, 지그재그 :: AWS Summit Seoul 2019AWS 기반 지속 가능한 데이터 분석 플랫폼 구축하기 - 소성운, 지그재그 :: AWS Summit Seoul 2019
AWS 기반 지속 가능한 데이터 분석 플랫폼 구축하기 - 소성운, 지그재그 :: AWS Summit Seoul 2019
 
20190222_インベントリ収集のオープンソースOpenAudITの機能紹介とIT資産管理で必要なこと
20190222_インベントリ収集のオープンソースOpenAudITの機能紹介とIT資産管理で必要なこと20190222_インベントリ収集のオープンソースOpenAudITの機能紹介とIT資産管理で必要なこと
20190222_インベントリ収集のオープンソースOpenAudITの機能紹介とIT資産管理で必要なこと
 

Destaque

WordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみたWordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみたKiharu Sasaki
 
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜Yuji Nojima
 
WordPressと外部APIとの連携
WordPressと外部APIとの連携WordPressと外部APIとの連携
WordPressと外部APIとの連携Hidekazu Ishikawa
 
WordCamp Tokyo 2014 Security Session for Beginners
WordCamp Tokyo 2014 Security Session for BeginnersWordCamp Tokyo 2014 Security Session for Beginners
WordCamp Tokyo 2014 Security Session for BeginnersShoko Matsuo
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaShinichi Nishikawa
 
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜Mignon Style
 
Wct2014 「これからの情報発信セッション」
Wct2014 「これからの情報発信セッション」Wct2014 「これからの情報発信セッション」
Wct2014 「これからの情報発信セッション」Sosuke Eguchi
 
Word camptokyo2014 pdf
Word camptokyo2014 pdfWord camptokyo2014 pdf
Word camptokyo2014 pdfShohei Tanaka
 
WordCamp Tokyo 2014
WordCamp Tokyo 2014WordCamp Tokyo 2014
WordCamp Tokyo 2014horike37
 
Launch a Web Service in 3 Days Using WordPress
Launch a Web Service in 3 Days Using WordPressLaunch a Web Service in 3 Days Using WordPress
Launch a Web Service in 3 Days Using WordPressKite Koga
 
AWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリAWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリTakayuki Miyauchi
 
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法アシアル株式会社
 
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろうリクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろうTakahiro Nakahata
 
WordPressで提供するWeb API
WordPressで提供するWeb APIWordPressで提供するWeb API
WordPressで提供するWeb APIYuko Toriyama
 
フリーランサーの2014年振り返り
フリーランサーの2014年振り返りフリーランサーの2014年振り返り
フリーランサーの2014年振り返りKiharu Sasaki
 
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうWordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうTsuzurahara Tohru
 
System performance tuning
System performance tuningSystem performance tuning
System performance tuningMenandro Oba
 
オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料Naokazu Nohara
 

Destaque (20)

WordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみたWordPressサイトをiPhoneアプリにしてみた
WordPressサイトをiPhoneアプリにしてみた
 
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
 
WordPressと外部APIとの連携
WordPressと外部APIとの連携WordPressと外部APIとの連携
WordPressと外部APIとの連携
 
WordCamp Tokyo 2014 Security Session for Beginners
WordCamp Tokyo 2014 Security Session for BeginnersWordCamp Tokyo 2014 Security Session for Beginners
WordCamp Tokyo 2014 Security Session for Beginners
 
WordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoyaWordPressでウェブサービスを作ろう! #wbNagoya
WordPressでウェブサービスを作ろう! #wbNagoya
 
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
これからWordPressのテーマ制作をはじめる人のために 〜テーマを作って公式ディレクトリに登録しよう!〜
 
Wct2014 「これからの情報発信セッション」
Wct2014 「これからの情報発信セッション」Wct2014 「これからの情報発信セッション」
Wct2014 「これからの情報発信セッション」
 
Word camptokyo2014 pdf
Word camptokyo2014 pdfWord camptokyo2014 pdf
Word camptokyo2014 pdf
 
WordCamp Tokyo 2014
WordCamp Tokyo 2014WordCamp Tokyo 2014
WordCamp Tokyo 2014
 
Launch a Web Service in 3 Days Using WordPress
Launch a Web Service in 3 Days Using WordPressLaunch a Web Service in 3 Days Using WordPress
Launch a Web Service in 3 Days Using WordPress
 
AWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリAWS+WordPressでつくるFirefoxアプリ
AWS+WordPressでつくるFirefoxアプリ
 
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
 
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろうリクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
リクルートAPIとValuecommerceと WordPressの組み合わせで 便利で成果の出る サイトをつくろう
 
WordPressで提供するWeb API
WordPressで提供するWeb APIWordPressで提供するWeb API
WordPressで提供するWeb API
 
フリーランサーの2014年振り返り
フリーランサーの2014年振り返りフリーランサーの2014年振り返り
フリーランサーの2014年振り返り
 
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろうWordPressといろんなAPIを組み合わせてWebアプリを作ろう
WordPressといろんなAPIを組み合わせてWebアプリを作ろう
 
System performance tuning
System performance tuningSystem performance tuning
System performance tuning
 
Software Testing
Software Testing Software Testing
Software Testing
 
オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料オープンデータプラグイン紹介資料
オープンデータプラグイン紹介資料
 
Node js - Yns
Node js - YnsNode js - Yns
Node js - Yns
 

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

20170809 AWS code series
20170809 AWS code series20170809 AWS code series
20170809 AWS code seriesAtsushi Fukui
 
Community_Board on WordPress With mobile application
Community_Board on WordPress With mobile applicationCommunity_Board on WordPress With mobile application
Community_Board on WordPress With mobile applicationYuki Okamoto
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京Masayuki Abe
 
Realm platform2019
Realm platform2019Realm platform2019
Realm platform2019昌桓 李
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺Yusuke Wada
 
[AWS Developers Meetup 2017] Developerのための ライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] Developerのための ライブAWSウォークスルー 〜 AWS SDKの使い方 〜Atsushi Fukui
 
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~schoowebcampus
 
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介Sunao Tomita
 
JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE 陽平 山口
 
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割技術選択とアーキテクトの役割
技術選択とアーキテクトの役割Toru Yamaguchi
 
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 についてNatsuki Yamanaka
 
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonightAmazon Web Services Japan
 
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
20190619 AWS Black Belt Online Seminar Dive Deep into AWS ChaliceAmazon Web Services Japan
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Shotaro Suzuki
 

Semelhante a WordPress APIで作るモバイルアプリ (20)

WordPressAPI
WordPressAPIWordPressAPI
WordPressAPI
 
20170809 AWS code series
20170809 AWS code series20170809 AWS code series
20170809 AWS code series
 
AWS Black Belt Online Seminar AWS Amplify
AWS Black Belt Online Seminar AWS AmplifyAWS Black Belt Online Seminar AWS Amplify
AWS Black Belt Online Seminar AWS Amplify
 
Community_Board on WordPress With mobile application
Community_Board on WordPress With mobile applicationCommunity_Board on WordPress With mobile application
Community_Board on WordPress With mobile application
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
未来のwebに欠かせないREST APIをApache Solr + Drupal8で実装しよう@PHPカンファレンス2016 東京
 
概説 Data API v3
概説 Data API v3概説 Data API v3
概説 Data API v3
 
Realm platform2019
Realm platform2019Realm platform2019
Realm platform2019
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
 
[AWS Developers Meetup 2017] Developerのための ライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜[AWS Developers Meetup 2017] DeveloperのためのライブAWSウォークスルー 〜 AWS SDKの使い方 〜
[AWS Developers Meetup 2017] Developerのための ライブAWSウォークスルー 〜 AWS SDKの使い方 〜
 
PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~PHP実践 ~外部APIを使って情報を取得する~
PHP実践 ~外部APIを使って情報を取得する~
 
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介
 
JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE JAWSDAYS2016 Technical Deep DIVE
JAWSDAYS2016 Technical Deep DIVE
 
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
 
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
【2018/09/11】PAYでのReact Nativeにおける APIクライアント実装 について
 
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
 
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
[CTO Night & Day 2019] AWS Amplify で Web/Mobile 爆速スケーラブル Serverless 開発 #ctonight
 
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
20190619 AWS Black Belt Online Seminar Dive Deep into AWS Chalice
 
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
 

Mais de アシアル株式会社

Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめMonacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめアシアル株式会社
 
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験アシアル株式会社
 
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)アシアル株式会社
 
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)アシアル株式会社
 
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)アシアル株式会社
 
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集アシアル株式会社
 
Web標準技術で iOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発Web標準技術でiOS、Android両対応アプリを開発
Web標準技術で iOS、Android両対応アプリを開発 アシアル株式会社
 
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)アシアル株式会社
 
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたOnsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたアシアル株式会社
 
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイントMonaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイントアシアル株式会社
 
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線アシアル株式会社
 
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621アシアル株式会社
 
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀアシアル株式会社
 

Mais de アシアル株式会社 (20)

MonacaとEducation活動の紹介
MonacaとEducation活動の紹介MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
 
PWA 4 Business
PWA 4 BusinessPWA 4 Business
PWA 4 Business
 
Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめMonacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
 
kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験kintone 連携スマホアプリの開発・配布体験
kintone 連携スマホアプリの開発・配布体験
 
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
JINS MEME DEVELOPER HANDS-ON (Monaca / Apache Cordova編)
 
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
 
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
 
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
 
Web標準技術で iOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発Web標準技術でiOS、Android両対応アプリを開発
Web標準技術で iOS、Android両対応アプリを開発
 
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド(体験版)
 
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
 
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
 
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたOnsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
 
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイントMonaca事例から学ぶHTML5モバイルアプリの活用ポイント
Monaca事例から学ぶHTML5モバイルアプリの活用ポイント
 
Gartner summit 2016
Gartner summit 2016Gartner summit 2016
Gartner summit 2016
 
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
 
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
 
20160308seminar2
20160308seminar220160308seminar2
20160308seminar2
 
Nifty cloud mbaas
Nifty cloud mbaasNifty cloud mbaas
Nifty cloud mbaas
 
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
 

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

  • 1. WordPressAPIで作るモバイルアプリ アプリケーションプラットフォームとしてのWordPress URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1
  • 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:ジャスティス†ブックマーク „ 参考資料
  • 4. WordPressを使ってアプリケーションを作ろう URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 4
  • 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 何らかのデータ
  • 7. アプリケーションを開発するために必要なもの „ これが基本。ゲームであっても入力に応じて何かを出力している。 入力処理出力 保存 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 7
  • 8. アプリケーションを開発するために必要なもの URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 8 „ WordPressもアプリケーション • Webサイトの表示や管理に特化している。 記事WordPress Web Page DB
  • 9. アプリケーションを開発するために必要なもの „ Webの管理画面やWebの閲覧画面から脱却できれば、新たな可能性が… WordPress DB URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9
  • 10. アプリケーションを開発するために必要なもの „ APIを使うことでWebサイトに限定しない使い方ができるようになる 入力API API 出力 WordPress DB Web経由で外部のシステム から利用できるAPIのことを 「WebAPI」 と呼びます URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 10
  • 11. アプリケーションを開発するために必要なもの „ カスタム三兄弟を使うことで扱うコンテンツも自由に定義することができる WordPress カスタム フィールド DB カスタム タクソノミー URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 11 カスタム 投稿タイプ
  • 12. 具体的なアプリケーションの例 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 12 „ ブログエディタソフトもアプリです • 公式のiOSアプリ等
  • 13. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 13 WordPressのWebAPI
  • 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 プラグイン
  • 23. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 23 JSON REST APIで投稿取得
  • 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>
  • 31. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 31 モバイルアプリの作り方
  • 32. 一言でモバイルと言っても様々なモバイルOSが存在する „ 世界中で利用されているモバイル端末には、様々な種類のモバイルOSが搭載されており、アプ リの開発者は複数OSへの対応が求められています。 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 32 Source: Gartner (November 2013)
  • 33. 実はHTML5(とCSSとJS)で開発できます URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 33
  • 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 „ 無料から利用できます。
  • 37. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 37 Monacaによる開発の流れ „ ブラウザだけで開発、テスト、ビルド(アプリの生成)までのすべての工程を行うことができ ます。 1. ブラウザで開発2. 実機で動作確認3. ビルドして配布
  • 38. アプリ開発講座もご用意させて頂きました „ はじめてのHTML5モバイルアプリ開発講座 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 38 • http://monaca.mobi/ja/training/
  • 39. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 39 スライドは無料公開中 „ さぁ、モバイルアプリを作ろう!
  • 40. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 40 モバイルアプリ開発
  • 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>
  • 45. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 45 ジャスティス†ブックマーク
  • 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を外部に送信するようなプログラムも実現可能
  • 49. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 49 モバイルアプリでの表示
  • 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'); });
  • 55. ブックマークレットでURLとタイトルを投稿 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 55
  • 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>
  • 61. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 61 参考資料
  • 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/