Wct2015LT : Hands on Photo Blog App using WordPress REST API and App Inventor.

1. WCT2015LT: PhotoBlog App
(App Inventor + WP REST
API)
2015/10/31
http://edu2web.com/
https://github.com/edu2web
https://twitter.com/edu2web
https://www.facebook.com/edu2web/

2. 自己紹介
 システムエンジニア
◦ XOOPS, WordPress
◦ LAMP, Infrastructure
◦ EC SI, VoIP SI
◦ OS, Distributed System
 講師
◦ E-Learning
◦ Distributed Social Network
◦ Digital Library

3. 最近はまっているのは
Cloud ああ

4. WCT2015LT: PhotoBlog App
Cloud ああ
• More Publishingテーマに合う
• WordPress対応App作りの体験
• WordPress REST API 体験
• PG初心者でも作れる
• カスタマイズ可能

5. 目次
 WordPressでWeb Service
◦ WordPress (WP REST API + BASIC Auth)
◦ cURLでWP REST APIの検証
 MIT App InventorでApp作成
◦ MIT App Inventor 開発環境
◦ デザイナー画面でデザイン
◦ ブロック画面でカラフルパズル
 デモ（App, ブラウザ）

6. WordPressでWeb Service
 Publishing方法
◦ 管理画面から手動
◦ XML-RPC通じて
◦ WP REST API利用
 WP REST APIとは
◦ プラグイン形式でWordPressに API機
能を追加
 コアに組み込み予定？
◦ ほぼすべてWordPressのAPI利用可能
◦ http://wp-api.org/
Cloud ああ

7. WP REST API プラグイン
 WordPressサイト構築
 プラグインのインストール
◦ WordPress plugin directoryから最新版
（V1系）JSON REST API 検索してイン
ストール
◦ 有効化

8. BASIC Auth プラグイン
 書き込みには認証が必要
◦ Using the cookies
◦ OAuth
◦ Basic Authentication
 一番簡単なBASIC Authで実験
◦ Githubからプラグインをダウンロード
◦ 有効化
$ git clone https://github.com/WP-API/Basic-Auth basicAuth

9. cURLでWP REST APIの検証
 写真をWPメディアにアップ
 記事の投稿
Post Photo File
Photo URL
Create a Post
Post URL
[chen@luna ~]$ curl --user test:password -H 'Content-
Type:image/jpeg' -H 'Content-Disposition: attachment;
filename=“PhotoBlog.jpg"' -X POST http://wp-api.pw/wp-
json/media --data-binary @/home/chen/PhotoBlog.jpg
[chen@luna ~]$ cat data.json
{
"title": "This is a post",
"content_raw": "This is some content"
}
[chen@luna ~]$ curl --user test:password -X POST
http://wp-api.pw/wp-json/posts --data @data.json

10. MIT App InventorでApp作成
 パズルのような部品を組み
合わせてイベントを組み立
て、App作成
 初心者(小学5年生から？)で
もAppクリエイターに
 http:// appinventor.mit.edu/

11. MIT App Inventor 開発環境
 http://ai2.appinventor.mit.edu/
 デバッグ
◦ エミュレータ
◦ Android実機にMIT AI2 Companion
 ブラウザIDE
◦ Projects
◦ Designer
◦ Blocks

12. デザイナー画面

13. ブロック:写真の撮影
 写真を撮る
 撮ったイメー
ジを画面にセ
ット
 エラー発生す
るとエラー内
容を表示

14. ブロック:写真をWPにアップ
[chen@luna ~]$ curl --user test:password -H 'Content-
Type:image/jpeg' -H 'Content-Disposition: attachment;
filename=“PhotoBlog.jpg"' -X POST http://wp-api.pw/wp-
json/media --data-binary @/home/chen/PhotoBlog.jpg

15. ブロック:写真添付記事の投稿
[chen@luna ~]$ cat data.json
{
"title": "This is a post",
"content_raw": "This is some content"
}
[chen@luna ~]$ curl --user
test:password -X POST http://wp-
api.pw/wp-json/posts --data @data.json

16. PhotoBlog Appデモ
 Photo
スマートフォンのカ
メラで写真を撮る
 PostFile
写真ファイルをWP
のメディアにアップ
写真のリンクを取得
 PostBlog
記事に添付写真のリ
ンクを付けて投稿

17. ブラウザで見る

18. まとめ
 WordPress REST API はすごい
 MIT App Inventor はすごい
 初心者でも 簡単にPhotoBlog App
 Google Playに公開も可能
 Android カメラだけではなく、位置情報
など様々なセンサー情報もPublishing可
能
 詳しくは
◦ http://edu2web.com/photoblog/
◦ http://edu2web.com/