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/

自己紹介システムエンジニア

◦XOOPS, WordPress◦LAMP, Infrastructure ◦EC SI, VoIP SI◦OS, Distributed System

講師◦E-Learning◦Distributed Social Network◦Digital Library

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

WCT2015LT: PhotoBlog App

Cloud 　 ああ

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

目次WordPressでWeb Service

◦WordPress (WP REST API + BASIC Auth)

◦cURLでWP REST APIの検証MIT App Inventorで App作成

◦MIT App Inventor 開発環境◦デザイナー画面でデザイン◦ブロック画面でカラフルパズル

デモ（ App, ブラウザ）

WordPressでWeb ServicePublishing方法

◦管理画面から手動◦XML-RPC通じて◦WP REST API利用

WP REST APIとは◦プラグイン形式でWordPress に API機能を追加 コアに組み込み予定？

◦ほぼすべてWordPressの API利用可能◦http://wp-api.org/

Cloud 　 ああ

WP REST API プラグインWordPressサイト構築プラグインのインストール

◦WordPress plugin directoryから最新版（ V1系） JSON REST API 検索してインストール

◦有効化

BASIC Auth プラグイン書き込みには認証が必要

◦Using the cookies◦OAuth◦Basic Authentication

一番簡単な BASIC Authで実験◦Githubからプラグインをダウンロード

◦有効化$　git　clone　https://github.com/WP-API/Basic-Auth　basicAuth

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

MIT App Inventorで App作成パズルのような部品を組み合わせてイベントを組み立て、App作成

初心者 (小学 5年生から？ )でもAppクリエイターに

http:// appinventor.mit.edu/

MIT App Inventor 開発環境http://ai2.appinventor.mit.edu/デバッグ

◦エミュレータ◦Android実機にMIT AI2 Companion

ブラウザ IDE◦Projects◦Designer◦Blocks

デザイナー画面

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

ブロック :写真を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

ブロック :写真添付記事の投稿

[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

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

ブラウザで見る

まとめWordPress REST API はすごいMIT App Inventor はすごい 初心者でも簡単に PhotoBlog AppGoogle Playに公開も可能Android カメラだけではなく、位置情報など様々なセンサー情報も Publishing可

能 詳しくは

◦http://edu2web.com/photoblog/◦http://edu2web.com/