hands on photoblog app with wordpress rest api and app inventor
TRANSCRIPT
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/