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

安い

#ISAOcorphttps://cloud.google.com/appengine/pricing

#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

ありがとうございました！