Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPressAPI

932 views

Published on

WordPressAPIを利用してアプリケーションを作成するサンプル

Published in: Technology
  • Be the first to comment

WordPressAPI

  1. 1. WordPress APIの活用 アプリケーションプラットフォームとしてのWordPress URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 1
  2. 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. 3. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 3 本講座の目的 „ WordPressを使ってアプリケーションを作ろう „ WordPress APIでできること „ 例題:ジャスティス†ブックマーク „ フレームワークとしてのWordPress „ XML-RPCとJSON REST API „ 参考資料
  4. 4. WordPressを使ってアプリケーションを作ろう URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 4
  5. 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. 6. アプリケーションを開発するために必要なもの „ アプリケーションを開発するために必要なもの URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 6 • 入力 9 文字・数値・座標(マウスやタップから得られる情報を含む)等 • 出力 9 文字・数値・画像・アニメーション等 • 処理 9 何らかのプログラム • 保存 9 何らかのデータ
  7. 7. アプリケーションを開発するために必要なもの „ これが基本。ゲームであっても入力に応じて何かを出力している。 入力処理出力 保存 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 7
  8. 8. アプリケーションを開発するために必要なもの URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 8 „ WordPressもアプリケーション • Webサイトの表示や管理に特化している。 記事WordPress Web Page DB
  9. 9. アプリケーションを開発するために必要なもの „ Webの管理画面やWebの閲覧画面から脱却できれば、新たな可能性が… WordPress DB URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 9
  10. 10. アプリケーションを開発するために必要なもの „ APIを使うことでWebサイトに限定しない使い方ができるようになる 入力API API 出力 WordPress DB URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 10
  11. 11. アプリケーションを開発するために必要なもの „ カスタム三兄弟を使うことで扱うコンテンツも自由に定義することができる WordPress カスタム フィールド DB カスタム タクソノミー URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 11 カスタム 投稿タイプ
  12. 12. 具体的なアプリケーションの例 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 12 „ ブログエディタソフトもアプリです • 公式のiOSアプリ等
  13. 13. WordPressを 「アプリケーションプラットフォーム」にする実験 ジャスティス†ブックマーク URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 13
  14. 14. ジャスティス†ブックマーク URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 14 „ ジャスティス†ブックマーク • WordPressを「アプリケーションプラットフォーム」にしてブックマーク管理サービスを開 発する 9 とりあえずソロ利用を前提とする 9 カスタム三兄弟も今回は使わない – タイトルとリンクだけなら無くても保存できる。 „ 仕様 • ブックマークレット対応 9 閲覧しているページをブックマークレット一発で登録できるようにする • モバイルアプリ対応(まにあえば) 9 ブックマーク一覧をアプリとして確認できるようにする – iOS / Android / FireFoxOS端末に対応したい
  15. 15. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 15 モバイルアプリ側 „ モバイルアプリ側 • ブックマークを一覧で表示 9 WordPressAPI経由で取得 • ブックマークをクリック(タッチ)すると外部ブラウザで表示する
  16. 16. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 16 ブックマークレットとは „ ブックマークレットとは • お気に入りに登録できるJSプログラム 9 閲覧しているサイトのタイトルやURLを外部に送信するようなプログラムも実現可能
  17. 17. ブックマーク管理プラグイン URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 17 „ ブックマーク管理プラグイン • ブックマークを管理するためのカスタム三兄弟をプラグイン一発で用意できるようにする 9 今回はカスタム三兄弟の使用を見送ります カスタム投稿タイプLink カスタム投稿フィールド ・(タイトル) ・URL ・(description)
  18. 18. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 18 デモ
  19. 19. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 19 デモ „ デモ • アプリデモ • 管理画面デモ • ブックマークレットデモ
  20. 20. 【技術解説】XML-RPCとJSON REST API URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 20
  21. 21. XML-RPCとJSON REST API URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 21 „ XML-RPCとJSON REST API • コンテンツの入出力を行うAPIは一つではない 9 昔からあるもの – XML-RPC » 枯れてる » XML-RPCというやり方で通信を行う » データはXMLで返ってくる 9 最近開発中の物 – JSON REST API » 開発中 » REST というやり方で通信を行う » データはJSONで返ってくる 9 その他 – 各種プラグイン – JetPackのREST API
  22. 22. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 22 事前知識 „ 事前知識 • 認証 9 BASIC認証 – ユーザー名とパスワードによる認証 9 その他 – OAuth » アプリに権限を付与するための仕組み » アプリに生のユーザー名とパスワードを持たせずに済む • Same-Origin PolicyとCross-Origin Resource Sharing • デバッグ 9 var_dump() – 開発環境でやりましょう… 9 console.log()
  23. 23. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 23 XML-RPC API „ メリット • 枯れてる、確実に動く 9 公式のWordPressアプリもXML-RPCを使っている – カスタム三兄弟も動作が保証されている 9 MonacaPressプロジェクトでも利用したが、確かに動く „ デメリット • リクエストもレスポンスも全てXML 9 組み立てるのが少々面倒 9 結果もXMLで返ってくる 9 ライブラリを使えば… • 認証 9 リクエストのXMLに直接ユーザー名とパスワードを入力する方式 – 手軽だが、アプリに権限の一部を開放するような仕組みは用意されていない 9 公開している記事の取得ですら認証が必要
  24. 24. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 24 JSON REST API „ メリット • RESTの仕組みはXML-RPCより簡単といわれている • 結果がJSONで取得できる • 公開されている記事なら認証せずに取得できる „ デメリット • ドキュメントが少ない 9 日本語のドキュメントは皆無 9 カスタム三兄弟に対応する方法が分からなかった • 認証がBASIC認証とOAuth1しか用意されていないので難易度が高い 9 OAuth1は難しい – OAuth2の方が簡単といわれている 9 XHRで外部サイトとBASIC認証するとCORS問題が出てきて難しい
  25. 25. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 25 認証と権限(認可) „ 認証と権限(認可) • JSON REST APIでBASIC認証を利用したい場合 9 JSON Basic Authentication プラグイン • APIを開放して投稿出来るようにしたいけど「下書き」に留めておきた い場合 9 ユーザーの権限を管理者以外にする – 「寄稿者」などにする 9 プラグインで細かく設定する – User Role Editor プラグイン
  26. 26. Same-Origin PolicyとCORSについて URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 26 „ 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認証も併用する場合、複雑な対応が必要
  27. 27. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 27 XMLRPCで記事取得
  28. 28. XMLRPCでPHPから記事取得 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 28 „ APIのURLとXMLを用意 • 認証情報もXML中に含める • XMLRPCの場合は公開記事の取得でも記事の権限が必要となる <?php $url = "http://b.j801.com/xmlrpc.php"; $xml = '<?xml version="1.0"?> <methodCall> <methodName>wp.getPost</methodName> <array> <data> <value>1</value> <value>ユーザー名</value> <value>!PASSWORD!</value> <value>10</value> </data> </array> </methodCall>'; $ch = curl_init(); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: text/xml')); curl_setopt($ch, CURLOPT_POSTFIELDS, $xml); curl_setopt($ch, CURLOPT_POST, TRUE); curl_setopt($ch, CURLOPT_URL, $url); curl_exec($ch); getByXMLRPC.php
  29. 29. XMLRPCでJSから記事取得 „ JSでXML文を直接記述する場合は改行に注意 • 複雑なXML文を組み立てる場合はライブラリの使用も検討 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 29 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var url = 'http://b.j801.com/xmlrpc.php'; var xml = '<?xml version="1.0"?>¥ <methodCall>¥ <methodName>wp.getPost</methodName>¥ <array>¥ <data>¥ <value>1</value>¥ <value>ユーザー名</value>¥ <value>!PASSWORD!</value>¥ <value>7</value>¥ </data>¥ </array>¥ </methodCall>'; getByXMLRPC.html
  30. 30. XMLRPCでJSから記事取得 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 30 „ 続き • XMLRPCの場合は記事取得もPOSTリクエスト var xhr= new XMLHttpRequest(); xhr.open("POST" , url, false); xhr.send(xml); console.log(xhr.response); </script> </head> <body> </body> </html> getByXMLRPC.html
  31. 31. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 31 レスポンスの例 „ XMLRPCでの記事取得に成功すると記事情報が返却されます <?xml version="1.0" encoding="UTF-8"?> <methodResponse> <params> <param> <value> <struct> <member><name>post_id</name><value><string>114</string></value></member> <member><name>post_title</name><value><string>bookmarkLetのリンク</string></value></member> <member><name>post_date</name><value><dateTime.iso8601>20140824T16:40:20</dateTime.iso8601></value></member> <member><name>post_date_gmt</name><value><dateTime.iso8601>20140824T07:40:20</dateTime.iso8601></value></member> <member><name>post_modified</name><value><dateTime.iso8601>20140824T16:40:20</dateTime.iso8601></value></member> <member><name>post_modified_gmt</name><value><dateTime.iso8601>20140824T07:40:20</dateTime.iso8601></value></member> <member><name>post_status</name><value><string>draft</string></value></member> <member><name>post_type</name><value><string>post</string></value></member> <member><name>post_name</name><value><string></string></value></member> <member><name>post_author</name><value><string>2</string></value></member> <member><name>post_password</name><value><string></string></value></member> <member><name>post_excerpt</name><value><string></string></value></member> <member><name>post_content</name><value><string></string></value></member> <member><name>post_parent</name><value><string>0</string></value></member> <member><name>post_mime_type</name><value><string></string></value></member> <member><name>link</name><value><string>http://b.j801.com/?p=114</string></value></member> <member><name>guid</name><value><string>http://b.j801.com/?p=114</string></value></member> <member><name>menu_order</name><value><int>0</int></value></member> <member><name>comment_status</name><value><string>closed</string></value></member> <member><name>ping_status</name><value><string>open</string></value></member> <member><name>sticky</name><value><boolean>0</boolean></value></member> <member><name>post_thumbnail</name><value><array><data> </data></array></value></member>
  32. 32. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 32 レスポンスの例 „ 続き • XMLのままだとプログラムの中では扱いにくいため、実際には変換して利用します <member><name>terms</name><value><array><data> <value><struct> <member><name>term_id</name><value><string>1</string></value></member> <member><name>name</name><value><string>未分類</string></value></member> <member><name>slug</name><value><string>%e6%9c%aa%e5%88%86%e9%a1%9e</string></value></member> <member><name>term_group</name><value><string>0</string></value></member> <member><name>term_taxonomy_id</name><value><string>1</string></value></member> <member><name>taxonomy</name><value><string>category</string></value></member> <member><name>description</name><value><string></string></value></member> <member><name>parent</name><value><string>0</string></value></member> <member><name>count</name><value><int>2</int></value></member> <member><name>filter</name><value><string>raw</string></value></member> </struct></value> </data></array></value></member> <member><name>custom_fields</name><value><array><data> </data></array></value></member> </struct> </value> </param> </params> </methodResponse>
  33. 33. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 33 XMLRPCで記事投稿
  34. 34. XMLRPCでPHPから記事投稿 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 34 „ APIのURLとXMLを用意 <?php $url = "http://b.j801.com/xmlrpc.php"; $xml = '<?xml version="1.0"?> <methodCall> <methodName>wp.newPost</methodName> <array> <data> <value>1</value> <value>ユーザー名</value> <value>!PASSWORD!</value> <value> <struct> <member> <name>post_title</name> <value>foo</value> </member> </struct> </value> </data> </array> </methodCall>'; postByXMLRPC.php
  35. 35. XMLRPCAPIでPHPから記事投稿 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 35 „ 続き • PHPのcurlを利用してAPIにXMLをPOSTする $ch = curl_init(); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: text/xml')); curl_setopt($ch, CURLOPT_POSTFIELDS, $xml); curl_setopt($ch, CURLOPT_POST, TRUE); curl_setopt($ch, CURLOPT_URL, $url); curl_exec($ch); postByXMLRPC.php
  36. 36. XMLRPCAPIでJSから記事投稿 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 36 „ APIのURLとXMLを用意 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var url = 'http://b.j801.com/xmlrpc.php'; var xml = '<?xml version="1.0"?>¥ <methodCall>¥ <methodName>wp.newPost</methodName>¥ <array>¥ <data>¥ <value><int>1</int></value>¥ <value>ユーザー名</value>¥ <value>!PASSWORD!</value>¥ <value>¥ <struct>¥ <member>¥ <name>post_title</name>¥ <value>foo</value>¥ </member>¥ </struct>¥ </value>¥ </data>¥ </array>¥ </methodCall>'; postByXMLRPC.html
  37. 37. XMLRPCAPIでJSから記事投稿 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 37 „ 続き • XHRを利用してAPIにXMLをPOSTする。 9 今回は非同期通信をオフにしています – プログラムを分かり易くするためなので必須ではありません var xhr= new XMLHttpRequest(); xhr.open("POST" , url, false); xhr.send(xml); console.log(xhr.response); </script> </head> <body> </body> </html> postByXMLRPC.html
  38. 38. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 38 レスポンスの例 „ XMLRPCでの記事投稿に成功すると記事IDが返却されます <?xml version="1.0" encoding="UTF-8"?> <methodResponse> <params> <param> <value> <string>122</string> </value> </param> </params> </methodResponse>
  39. 39. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 39 JSON REST APIで記事取得
  40. 40. JSON REST APIでPHPから記事取得 „ APIのURLに記事のID指定してGETリクエストする • 公開されている記事なら権限チェックも特になし URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 40 <?php $url = "http://b.j801.com/wp-json/posts/7"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_exec($ch); getByJSONRESTAPI.php
  41. 41. JSON REST APIでJSから記事取得 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 41 „ こちらも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
  42. 42. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 42 レスポンスの例 „ 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" }
  43. 43. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 43 JSON REST APIで記事投稿
  44. 44. JSON REST APIでPHPから記事投稿 „ 投稿内容はJSONで用意する必要があります URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 44 • PHPのjson_encode()関数を利用できます „ 記事投稿には認証が必要です • PHPの場合curlで簡単にBASIC認証できます <?php $url = "http://b.j801.com/wp-json/posts"; $userpwd = 'ユーザー名:!PASSWORD!'; $data = array( 'title' => 'Hello World!', 'type' => 'post', 'content_raw' => 'foo', ); $data = json_encode($data); $ch = curl_init(); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json')); curl_setopt($ch, CURLOPT_USERPWD, $userpwd); curl_setopt($ch, CURLOPT_POSTFIELDS, $data); curl_setopt($ch, CURLOPT_POST, TRUE); curl_setopt($ch, CURLOPT_URL, $url); curl_exec($ch); postByJSONRESTAPI.php
  45. 45. JSON REST APIでJSから記事投稿 „ JSでBASIC認証に対応するためには注意点があります • xhr.setRequestHeader()でAuthorizationヘッダーをセットする • ユーザー名とパスワードは事前にbase64エンコードを施す postByJSONRESTAPI.php URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 45 9 ユーザー名:パスワード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var xhr = new XMLHttpRequest(); var url = "http:///b.j801.com/wp-json/posts"; var basic = "Basic " + "ajgwMWNvbStudWxsZnNAZ21haWwuY29tOmRldm51bGw4MDE="; xhr.open("POST" , url, false); xhr.setRequestHeader("Authorization", basic); xhr.send(JSON.stringify({ 'title': 'Hello World!', 'type' : 'post', 'content_raw': 'foo'})); console.log(xhr.response); </script> </head> <body> </body> </html>
  46. 46. ユーザー名とパスワードをbase64エンコードする „ ユーザー名とパスワードをbase64エンコードする URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 46 • JSの標準では関数が無い 9 どうしてもJSで変換したい – 別途ライブラリを使う 9 面倒なのでWebサービスを使う – 幾らでも存在するがユーザー名やパスワードを打ち込むのは気持ちの良いものではない… • PHPを利用する 9 MacやLinuxならコマンドラインからPHPを呼び出す php -r "echo base64_encode('ユーザー名:!PASSWORD!');"
  47. 47. ブックマークレットでURLとタイトルを投稿 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 47
  48. 48. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 48 ブックマークレット „ ブックマークレット • お気に入り登録できるJSプログラム 9 例えば、閲覧しているサイトの情報を外部に飛ばしたりできる • 諸注意 9 1行にまとめねばならない 9 空白等をURLエンコードせねばならない – ブックマークレット変換ツールみたいなものも存在する 9 返り値が発生しないようにせねばらなない(void化) 9 文字数制限が存在する • 実は外部ファイルが使える 9 外部ファイルなら1行縛りや文字数制限から解放される – ただしCORS問題からは解放されない – 読み込みは非同期に行われるので注意
  49. 49. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 49 ブックマークレット „ ブックマークレットのソースコード // ブックマークレットは「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); })()'
  50. 50. URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 50 ブックマークレット „ 実際に送信処理を行う関数 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); }
  51. 51. 登録されたブックマークレット ブックマークレットをAタグで提供する場合の例 URL : http://www.asial.co.jp/ │ Copyright © Asial Corporation. All Rights Reserved. │ 51 „ お気に入りとして登録しましょう • ブックマークバーなどに表示しておくと便利です • ブックマークの編集から編集可能です 9 認証情報は外部ファイルよりもブックマークに記述する方が、まだマシです <a href='javascript:(function(){var%2 0s%20=%20document.createElement("s cript");%20s.src%20=%20"http://b.j 801.com/tools/b.js";s.onload=funct ion(){postBookmarkByXMLRPC()};docu ment.body.appendChild(s);})()'> ブックマークレット</a>

×