wordpress apiで作るモバイルアプリ
Post on 04-Jul-2015
2.667 Views
Preview:
DESCRIPTION
TRANSCRIPT
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1
WordPressAPIで作るモバイルアプリアプリケーションプラットフォームとしてのWordPress
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:ジャスティス†ブックマーク
参考資料
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
アプリケーションプラットフォーム?
今後WordPressは「アプリケーションプラットフォーム」を指向するらしいです• 基調講演を参考
アプリケーションとは?• WordやPhotoShopのような、特定の目的の為に使うソフトウェア
ブラウザもアプリケーション
– Webサイトは通常、アプリケーションではない。
» ブログなどはコンテンツ。
– キーワード検索や翻訳など、特定の目的で使えるソフトが動くサイトはアプリケーション
LinuxやApacheやMySQLは応用ソフトやミドルウェアに分類されるためアプリケーションではない
アプリケーションの例• ニュースアプリ
• RSSリーダーアプリ
• ブラウザ
• MS製品やAdobe製品、その他パソコンソフト全般
• etc,etc
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 6
アプリケーションを開発するために必要なもの
アプリケーションを開発するために必要なもの
• 入力
文字・数値・座標(マウスやタップから得られる情報を含む)等
• 出力
文字・数値・画像・アニメーション等
• 処理
何らかのプログラム
• 保存
何らかのデータ
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 WebPage
DB
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9
アプリケーションを開発するために必要なもの
Webの管理画面やWebの閲覧画面から脱却できれば、新たな可能性が…
WordPress
DB
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 10
アプリケーションを開発するために必要なもの
APIを使うことでWebサイトに限定しない使い方ができるようになる
WordPress
DB
入力 出力API API
Web経由で外部のシステムから利用できるAPIのことを
「WebAPI」と呼びます
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 11
WordPress
アプリケーションを開発するために必要なもの
カスタム三兄弟を使うことで扱うコンテンツも自由に定義することができる
DB
カスタム
タクソノミー
カスタム
フィールド
カスタム
投稿タイプ
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• 昔からあるもの
XML-RPC WordPress API
– コアの機能ととして用意されている
– XML-RPCというやり方で通信を行う
– データはXMLで返ってくる
• 今注目されているものJSON REST API
– 今後、コアに取り込まれる予定
– REST というやり方で通信を行う
– データはJSONで返ってくる
その他
– JetPackのREST API
– 各種プラグイン
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 15
WebAPIの利用に必要な知識
WebAPIの利用に必要な知識のおさらい
• XML
汎用的なマークアップ言語
– HTMLもXMLで書けるしSVGもXML形式
データの保存形式としても広く使われている
• JSON
データの保存形式として最近よく使われている
JSのオブジェクト表現
– とはいえ、JS以外の言語でも簡単に利用できる
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 16
WebAPIの利用に必要な知識
WebAPIの利用に必要な知識のおさらい
• RESTAPIの設計思想
• XML-RPC
APIのプロトコルの一種
– 仕様としてまとまっている
– リクエストやレスポンスは常にXML
» XMLの組み立てやパースが多少面倒
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 17
WebAPIの利用に必要な知識
WebAPIの利用に必要な知識のおさらい
• 認証
第三者が勝手に記事を投稿出来ると困るので認証を行う、という考え。
• 認可
認証済みだからといって誰でも自由に記事を公開できてしまうと困るので、個々のユーザーに権限を与える、という考え方。
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 18
Same-Origin PolicyとCORSについて
Same-Origin Policyについて• 簡単に言うとブラウザに制限を掛けるための仕組み
例えば、JSによる外部のサイト(厳密にはオリジン)へのリクエストはこのポリシーで制限されている
CORS(Cross-Origin Resource Sharing)について• Same-Origin Policyを緩和するための仕組み
JS用にAPI提供などを行いたい場合に利用できる
API提供サーバー側で特別なHTTPヘッダーを返すようにする
– Allow CORS XML-RPC プラグイン
詳細はMozilla参照• https://developer.mozilla.org/ja/docs/HTTP_access_control
メモ• CORSだけなら固定のヘッダーを一行追加するだけ
BASIC認証も併用する場合、複雑な対応が必要
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 19
WebAPIの利用に必要な知識
WebAPIの利用に必要な知識のおさらい• BASIC認証
ユーザー名とパスワードによる認証
– BASE64でエンコードして送信するが暗号化しているわけではない
» 暗号化が必要な場合はHTTPS通信をつかう
HTTPで定められているため、枯れており言語やフレームワークには依存しない
• OAuth
アプリに権限を付与するための仕組み
– 生のユーザー名とパスワードを持たせずに済む
OAuth1とOAuth2がある
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 20
XML-RPC WordPress APIの特徴
メリット
• 十分に安定している、確実に動く公式のWordPressアプリもXML-RPCを使っている
– カスタム三兄弟もそのまま使える
MonacaPressプロジェクトで利用したときにもちゃんと動いた
デメリット
• リクエストもレスポンスも全てXML組み立てるのが少々面倒
– 結果もXMLで返ってくる
XMLやXML-RPC用のライブラリを使えばそんなに大変ではない
• 認証リクエストのXMLに直接ユーザー名とパスワードを入力する方式
– 手軽だが、アプリに権限の一部を開放するような仕組みは用意されていない
公開している記事の取得ですら認証が必要
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 21
JSON REST APIの特徴
メリット
• RESTの仕組みはXML-RPCより簡単、といわれている
• 結果がJSONで取得できる
• 公開されている記事なら認証せずに取得できる
デメリット
• ドキュメントがまだ少ない日本語のドキュメントは皆無
• カスタム三兄弟に対応するには少し手を入れる必要がある
• 認証がBASIC認証とOAuth1しか用意されていないOAuth1は難しい
– OAuth2の方が簡単といわれている
JSで外部サイトとBASIC認証するのは難しい
– Same-Origin Policyが大変
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 22
JSON REST APIの認証と認可
認証
• JSON REST APIでBASIC認証を利用したい場合
Basic Authenticationプラグイン
認可
• APIで投稿出来るようにしたいけど公開まではさせたくない場合
ユーザーの権限を管理者以外にする– 「寄稿者」などにする
プラグインで細かく設定する– User Role Editor プラグイン
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 23
JSON REST APIで投稿取得
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24
JSON REST APIで投稿取得するためのリクエスト例
JSON REST APIで投稿取得するためのリクエスト例
• 全件
http://b.j801.com/wp-json/posts
• 特定の記事
http://b.j801.com/wp-json/posts/7
• 特定のカテゴリ
http://b.j801.com/wp-json/posts?filter[category_name]=events
その他
• カテゴリ一覧
http://b.j801.com/wp-json/taxonomies/category/terms
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 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. │ 26
JSON REST APIでJSから投稿取得
こちらも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"
}
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 28
JSON REST APIで作るウィジェット
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 29
JSON REST APIで作るウィジェット
JSON REST APIで作るウィジェット• ウィジェットにJSを仕込んで、タイトル一覧を表示する
JSON REST API経由でデータを取得して展開する
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
モバイルアプリの作り方
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 32
一言でモバイルと言っても様々なモバイルOSが存在する
世界中で利用されているモバイル端末には、様々な種類のモバイルOSが搭載されており、アプリの開発者は複数OSへの対応が求められています。
Source: Gartner (November 2013)
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 33
実はHTML5(とCSSとJS)で開発できます
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 34
HTML5によるモバイルアプリの仕組み
HTML5でマーケットに提出可能なアプリを作るためには「Cordova(PhoneGap)」というライブラリを利用して開発します。 CordovaはHTMLで作成されたコードをネイティブコードでパッケージングします。
ネイティブコード
HTML・CSS・JavaScript
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 35
ネイティブコード
JavaScriptからカメラ等の端末固有の機能も利用可能
カメラなどの端末固有の機能を呼び出す場合、開発者はJavaScriptで命令を記述します。するとCordovaがネイティブコードによって対応する機能を実行します。
連絡帳GPSカメラ
HTML・CSS・JavaScript
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 36
国産の開発ツールをご用意させて頂きました
クラウド上でハイブリッドアプリを作ることができる統合開発環境です。
作成したアプリはApp StoreやGoogle Playなどで公開可能です。
• 有料で販売することもできます。
• マーケットを経由せずに配布することも可能です。
無料から利用できます。
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 37
Monacaによる開発の流れ
ブラウザだけで開発、テスト、ビルド(アプリの生成)までのすべての工程を行うことができます。
1. ブラウザで開発 2. 実機で動作確認 3. ビルドして配布
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 38
アプリ開発講座もご用意させて頂きました
はじめてのHTML5モバイルアプリ開発講座• 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>
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 44
jQueryMobileのHTMLコード
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構築
• モバイルアプリ対応
ブックマーク一覧をアプリとして確認できる
カテゴリに対応
• ブックマークレット対応
閲覧しているページをブックマークレット一発で登録できるようにする
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 47
モバイルアプリ側
モバイルアプリ側• ブックマークを一覧で表示
WordPressAPI経由で取得
• ブックマークをクリック(タッチ)すると外部ブラウザで表示する
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 48
ブックマークレットとは
ブックマークレットとは• お気に入りに登録できるJSプログラム
閲覧しているサイトのタイトルやURLを外部に送信するようなプログラムも実現可能
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 49
モバイルアプリでの表示
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 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>
</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)// InAppBrowserdocument.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 : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 55
ブックマークレットでURLとタイトルを投稿
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 56
ブックマークレット
ブックマークレット
• お気に入り登録できるJSプログラム
例えば、閲覧しているサイトの情報を外部に飛ばしたりできる
• 諸注意
1行にまとめねばならない
空白等をURLエンコードせねばならない
– ブックマークレット変換ツールみたいなものも存在する
返り値が発生しないようにせねばらなない(void化)
文字数制限が存在する
• 実は外部ファイルが使える
外部ファイルなら1行縛りや文字数制限から解放される
– ただしCORS問題からは解放されない
– 読み込みは非同期に行われるので注意
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 57
閲覧しているサイトの情報を飛ばす
閲覧しているサイトの情報を飛ばす
• 情報
タイトル
– document.title
URL
– location.href
• 飛ばし方
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);
}
URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 60
ブックマークレットの登録方法
お気に入りとして登録しましょう• ブックマークバーなどに表示しておくと便利です
• ブックマークの編集から編集可能です
<a href='javascript:(function(){var%20s%20=%20document.createElement("script");%20s.src%20=%20"http://b.j801.com/tools/b.js";s.onload=function(){postBookmarkByXMLRPC()};document.body.appendChild(s);})()'>ブックマークレット</a>
ブックマークレットをAタグで提供する場合の例
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で表示する
http://ja.forums.wordpress.org/topic/138386
• プラグイン:WP API Customizer (Kaito)
https://wordpress.org/plugins/wp-api-customizer/
JSON REST APIでoAuthを実現する方法• 菱川さんのブログ:
http://notnil-creative.com/blog/archives/3301
Monaca• http://monaca.mobi/ja/
top related