wordpresscom-html5-app-slide
wordpresscom-html5-app-slide
0 0
wordpresscom-html5-app-slide
WordBench 宮崎 (15/12/19) LT 資料On Github masakura / wordpresscom-html5-app-slide
WordPress.com で HTML5 アプリを作ってみた
政倉 智
2015/12/19
第11回WordBench宮崎
御礼
HTML5 Conference 2015 in 鹿児島 (7/4)
宮崎の方々にも多大なご協力を戴きありがとうございました!
自己紹介
- 氏名: 政倉 智 (まさくら とも)
- 趣味: バイクとか
- 職種: プログラマー
- 所属: codeArts 株式会社
- 所属: html5j 鹿児島
A long time ago,
in a galaxy far,
far away...
昔話ですが...
- CMS をアプリの基盤として使おうと考えてました!
- RoR とかではなく、CMS です!
CMS を使うメリット
- 入力フォームが最初からある
- 認証周りも揃ってる
何より楽ができる!
結論から...
諦めたわけです!
諦めた理由
- 運用コストが馬鹿にならない
- アップデートで正常に動くのかな?
- 一人 24 時間監視体制は絶対嫌!
- 少なくとも三人体制でやりたいし、でも利益出すためには...
- 先行業者に対するメリットがないと無理や!
- メリットないし...
そして月日は流れ...
WordPress.com
鶴田さん「WordPress.com ならサーバーの運用いらないですよー」
WordPress 4.4 に REST API Plugin 標準搭載! https://wordpress.org/news/2015/12/clifford/
WordPress.com 管理ツール
WordPress.com の管理ツールは Electron 製
あれ?
ってことは、フロントエンドを HTML5 アプリにすれば...
サーバーのお守りしなくていいんじゃね?
SEO の問題?
この際、無視!
というわけで、作ってみました!
昨日の 20:00 くらいから...
様々な困難が立ちふさがります!
英語のドキュメントとの格闘!
- きちんと読めば書いてあるのよね...
襲いかかる FORCE CORS!
- お前、本当に Web 技術者か?
動きました!
- 購読したドメインの投稿が一覧で見れるだけですけど...
- なんか Firefox で動かないんですけど...
夢が広がる!
作り方!
WordPress.com でアプリを登録する OAuth2 認証をアプリに組み込む WordPress.com WEB API を使うアプリの登録
https://developer.wordpress.com/apps/
-
Redirect URL に自分のアプリの URL を入れる
- OAuth2 認証後にここに戻ってくる
-
Javascript Origins に自分のアプリのドメインを入れる
- CORS 用
認証
-
https://public-api.wordpress.com/oauth2/authorize?client_id=your_client_id&redirect_uri=your_url&response_type=token へアクセスさせる
- your_client_id - 登録したアプリの Client ID
- redirect_uri - 登録したアプリの Redirect URL
- response_type - token でないといけない
- WordPress.com で認証が OK になると、アクセストークンが返ってくる
- redirect_url#access_token=YOUR_API_TOKEN&expires_in=64800&token_type=bearer&site_id=blog_id <- こんなの
WEB API 使う
- アクセストークン付きで REST API を呼び出すだけ!
$.ajax({
url: 'https://public-api.wordpress.com/rest/v1/sites/masakura.wordpress.com/posts/',
type: 'GET',
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'BEARER ' + access_token);
}
})
.done(function (result) {
// ここになんか書く...
});
ここまでくればあとは普通に作るだけ!
感想
- 認証についてもちゃんと書いてます!
感想
- API Reference もちゃんとしてます
感想
- Developer Console が激しく便利!
感想
英語が読めて OAuth2/CORS に慣れてればすぐに作れます!
課題
課題
- WordPress.com はカスタムフィールドが作れないらしい
- 鶴田さん情報
- せめて JSON-LD 書ければなあ...
- 認証なしでやりたい
- Amazon API Gateway とか使う?
- 予約済みポストの取得がよく分からない...
課題
いいアイデアがある方は教えてください!
告知
ハンズオン開催! 2/13 (土) 鹿児島
- WordBench 鹿児島 + html5j 鹿児島で、これのハンズオンやります (予定)
- 2/13 (土) の予定なので、遊びに来てくれると嬉しいな!
- 最終は 21:04 なので、日帰りで懇親会もいけますよ!
ECMAScript 6 勉強会 一月 熊本
- html5j 熊本で ECMAScript 6 の勉強会やります! (予定)
- 日付未定ですけど、遊びに来てくれると嬉しいな!
- 個人の主観ですが...
- ES5 時代と ES6 時代のコードの書き方って結構違うので、(採用するかどうかは置いておいて) 味見必須!
ご清聴ありがとうございました!
WordPress.com で HTML5 アプリを作ってみた
政倉 智
2015/12/19
第11回WordBench宮崎