onsenui + angularjs + cloudendpointsで作るspa 地雷処理の巻
Post on 08-Jan-2017
590 Views
Preview:
TRANSCRIPT
OnsenUI + AngularJS + CloudEndpoints
( 株 ) ISAO古山 浩志
で作るSPA 地雷処理の巻
#ISAOcorp
自己紹介
#ISAOcorp
自転車乗り
#ISAOcorp
4 児の父
#ISAOcorp
定時帰りhttp://qiita.com/furu8ma/items/f909b8820c9d6d21897a
#ISAOcorp
#ISAOcorp
プログラマー
GO って検索しずらすぎる
#ISAOcorp
まとめると
#ISAOcorp
自転車乗りで4 児の父で定時帰りなプログラマー
#ISAOcorp
そんな社員でも受け止めてくれる
( 株 )ISAO
#ISAOcorp
いい会社ですhttps://www.isao.co.jp/
OnsenUI + AngularJS + CloudEndpoints
で作るSPA 地雷処理の巻
#ISAOcorp
• 背景作ったもの踏んだ地雷フィードバック
#ISAOcorp
• 背景作ったもの踏んだ地雷フィードバック
#ISAOcorp
WHY SPA
#ISAOcorp
全部対応して
#ISAOcorp
iOS + Android + PC別々に組む
メンテつらい
#ISAOcorp
クロスプラットフォームしかない
Olsen UI + AngularJS + Cloud Endpoints
Single Page Application
#ISAOcorp
インストール不要審査不要バージョンアップが楽アプリに近い使い勝手
#ISAOcorp
OnsenUI
#ISAOcorp
ブラウザ上でアプリライクな UIを簡単に表現できるフレームワークhttps://ja.onsen.io/
#ISAOcorp
vs Ionichttp://ionicframework.com/
#ISAOcorp
日本発
https://ja.monaca.io/
#ISAOcorp
使ってみた感想
#ISAOcorp
日本語ドキュメントが良い
https://ja.onsen.io/v1/guide.html
#ISAOcorp
ページスタック
#ISAOcorp
navigation.pushPage()
navigation.popPage()
#ISAOcorp
タブバー
#ISAOcorp
#ISAOcorp
タブバー & バッチ 実装のしやすさ
OnsenUI > iOS >>>>( 超えられない壁 )>>>> Android
#ISAOcorp
http://qiita.com/furu8ma/items/90482dceeea8cfb162af
#ISAOcorp
テーマローラー
#ISAOcorp
http://components.onsen.io/
#ISAOcorp
デフォルトのコンポーネントデザインで使うなら楽
#ISAOcorp
コンポーネントが少ないのでカバーしていないことをやろうとすると大変
デフォルトで行こう！
#ISAOcorp
AngularJS
#ISAOcorp
dotInstall にチュートリアルがあるのでとっかかりやすい
#ISAOcorphttp://dotinstall.com/lessons/basic_angularjs/8201
#ISAOcorp
使ってみた感想
#ISAOcorp
双方向データバインディング
#ISAOcorp
$scope
#ISAOcorp
フィルター
#ISAOcorp
#ISAOcorp
役割分担
#ISAOcorp
#ISAOcorp
CloudEndpoints とのデータのやり取り共通処理
各テンプレートごとの固有処理
#ISAOcorp
やり方を強制されるので楽
#ISAOcorp
プロダクトとしての寿命が心配
仕組みに乗っかろう！
#ISAOcorp
CloudEndpoints
#ISAOcorp
Platformasa Service
#ISAOcorp
BackendAPI を簡単に生成
インフラらく〜
#ISAOcorp
vs Parsehttps://parse.com/
vs Herokuhttps://www.heroku.com/
#ISAOcorp
使ってみたかった
#ISAOcorp
Cloud Datastore
#ISAOcorp
NoSQL
#ISAOcorp
Auto scale
インフラらく〜
#ISAOcorp
使ってみた感想
#ISAOcorp
良いチュートリアルがある
#ISAOcorp
https://rominirani.com/google-cloud-endpoints-tutorial-part-1-b571ad6c7cd2#.y8qydbm5t
#ISAOcorp
SDK 充実https://cloud.google.com/appengine/docs/java/endpoints/#basic_endpoints_architecture
#ISAOcorp
デプロイ簡単appcfg.py -A hogehoge-project update appengine-try-
php
#ISAOcorp
ロールバック簡単
#ISAOcorp
#ISAOcorp
エッジキャッシュ
#ISAOcorp
安い
#ISAOcorp
http://koni.hateblo.jp/entry/2016/01/06/130613
#ISAOcorp
#ISAOcorp
スピンアップ問題
かんたん！
#ISAOcorp
• 背景作ったもの踏んだ地雷フィードバック
#ISAOcorp
シェアシステム
#ISAOcorp
カレンダーを使って予約日時を指定したい
OnsenUI にカレンダーないじゃん！
#ISAOcorp
どうする？
#ISAOcorp
自作？
そんな時間ないよ〜！
http://fullcalendar.io/
かんたん！
#ISAOcorp
日時はタップだけで選択したい
OnsenUI にDate picker
ないじゃん！
https://github.com/alongubkin/angular-datepicker
これならなんとか
#ISAOcorp
つくった
#ISAOcorp
FullCalendar.js
+angular-datepicker
OnsenUI
OnsenUIすくないね…
#ISAOcorp
• 背景作ったもの踏んだ地雷フィードバック
#ISAOcorp
初期値が設定できないiOS でイベントが発生しないAndroid でイベントが発生しないCloudEndpoints がクエリを受け付けない
#ISAOcorp
初期値が設定できないiOS でイベントが発生しないAndroid でイベントが発生しないCloudEndpoints がクエリを受け付けない
初期値が設定できない
あれ、初期値を書く場所は？
template.html
想定外すぎる！
#ISAOcorp
どうする？
#ISAOcorp
angular-datepickerのコードを読む
直接 DOM を操作
controller.js
DOM を直接操作するなんてママに叱られる〜
#ISAOcorp
初期値が設定できないiOS でイベントが発生しないAndroid でイベントが発生しないCloudEndpoints がクエリを受け付けない
iPhone がタッチに反応しない
タップしてるのに…
FullCalendar#dayClickイベントが発火しない〜
#ISAOcorp
どうする？
#ISAOcorp
FullCalendar.jsのコードを読む
タップ > ドラック終了 > 発火
タップ > ドラック終了ではない > 未発火
http://qiita.com/furu8ma/items/1af80a6d8ab369e115d0
ライブラリに手を入れるなんてママに叱られる〜
#ISAOcorp
初期値が設定できないiOS でイベントが発生しないAndroid でイベントが発生しないCloudEndpoints がクエリを受け付けない
4.4 より前の Android で空の日セルをタップしても反応しない
#ISAOcorp
どうする？
#ISAOcorp
FullCalendar.jsのコードを読む
わからないよ〜
原因不明。期限だけが近づいてくる… .
空のイベントを全ての日に設定
力技すぎてママに叱られる〜
#ISAOcorp
初期値が設定できないiOS でイベントが発生しないAndroid でイベントが発生しないCloudEndpoints がクエリを受け付けない
#ISAOcorp
リリース直前すべてのクエリを受け付けなくなる
#ISAOcorp
どうする？
#ISAOcorp
ググる
#ISAOcorp
Cloud Datastoreのquota 問題だった
#ISAOcorphttp://qiita.com/furu8ma/items/399b39028b13259937ab
OnsenUI,AngularJSの問題じゃないじゃん
#ISAOcorp
• 背景作ったもの踏んだ地雷フィードバック
#ISAOcorp
カレンダーを自作したことはありますか？
#ISAOcorp
その JS ライブラリは本当にクロスプラットフォームですか？
#ISAOcorp
OnsenUIAngularJS
CloudEndpointsFullCalendar.js
angular-datepicker
検証をおろそかにしがち
そんなこと言ったってライブラリを使わない
なんて無理！
#ISAOcorp
ネイティブアプリという選択
#ISAOcorp
クロスプラットフォームはハマった時に手を入れるのが大変
急がば自作かも
#ISAOcorp
質問タイム
#ISAOcorp
最後に
#ISAOcorp
エンジニア募集中
#ISAOcorp
ありがとうございました！
top related