1週間以上前だけどDevFest2017へいってきたのでメモを公開しておく。 天気が良くて会場がお台場っていうちょっと他に遊びに行きたい誘惑感はあった。
FirebaseとReact Nativeでのモバイルアプリの作り方
@k2wanko
How to make mobile app with Firebase and React Native // Speaker Deck
Firebaseって何
- mBaas / データ預けられたり
なぜFirebaseか
- クライアントを作ることに集中したい。
- サーバの管理が必要ない。
- 無料枠でなんとかなる。
React Nativeって何
- Reactでモバイルアプリが作れるやつ
- JSX(HTMLのDOMできななんか)で返せる
- WebViewでない。 JavaScriptCore
- ただしブラウザの機能をサポートしている。 Fetch / WebSocket / setTimeoutなどなど
- HotReloadできる (保存して更新したら反映される)
- ネイティブモジュールでネイティブの機能にアクセスもできる
- ロジック部分はjsでかけるからテストが楽
- 全てをReactNativeにするひつようはない。
React Nativeでよく使われるライブラリ
- NativeBase
- react-navigation
- Mobx
- Reactでデータバインディングを実現するライブラリ。
- React Native Firebase
- 公式のWebSDKでは使えないサービスもかける
Firebase Authentication
- ユーザ認証を実装できるサービス
- twitterやメール等々認証。カスタム認証もできる。
Realtime Database
- オンラインでもオフラインでもデータが保存できてリアルタイム同期が可能なKVS
- セキュリティールールで読み書き制限
Google Analytics for Firebase
- モバイル版GA
- ユーザ行動のトラッキング
Firebase Cloud Messaging
- Push通知を送信するためのサービス
- SDKを通してPush用のトークンを取得
- Notification / onMessageとgetInitialNotificationで結果が異なったりPermissionを求める必要があるので、注意
Cloud Storage for Firebase
- 大きめのファイルを保存するためのストレージ
- セキュリティールールがあるので安心
Firebase Remote Config
- アナリティクスをもとにユーザごとに設定を割り振れる
Firebase Crash Reporting
- そのうちCrashlyticsがメインになるからそちらを使ったほうがいい
AdMob
- アプリに広告を載せるためのサービス
Cloud Functions for Firebase
- イベント駆動でNode.jsを実行できる。 - 書き込みなどをトリガーに - いままでできなかったことを可能に
Cloud FireStore
- ドキュメント指向のDB
初心者がFireBaseについて見ておくといい場所
gcpugを見ましょう
Firebaseが向いている人
- サーバの開発運用を最小限にしたい人
React Nativeが向いてる人
Javascriptがかけてネイティブも少し分かる人
deeplearn.js入門
-teachable machineを題材に-
- jsで深層学習する
teachable machineを通して deeplearn.jsの基礎について学ぶ
- Makegirls moe
WebDNNを使ったもの
Performance RNN
深層学習をブラウザでやるメリット
- 高スペックのマシンいらず
- ネットワーク遅延なし
- インストール不要
セキュルティ上の危険が少ない
ConvNet.JS ここ数年更新がない
Keras.js 深層学習のモデルをjs側で読み込む。 推論のみ対応
WebDNN
- Keras/ Chainerのモデルをコンバート可能
deeplern.js
- 学習も可能
- WebGLによる高速な演算
- TensorFlowのチェックポイントファイルの読み込み(学習済みモデルの読み込み)
環境構築
npm install deeplernか scriptにhttps://unpkg.com/deeplearn読み込む
基本概念
https://bl.ocks.org/ohtaman/raw/5b55dff399864f8bde1b073478450a79/ のコンソールから実行できる
teachble machineの処理フロー
ビデオからキャプチャ -> 特徴量の抽出 -> 保存 抽出は学習済みモデルでやる。 推定はKNNによる分類をする
SQueezeNetのモデルを使ってる。AlexNet並の精度でモデルのサイズが小さいやつ
KNN k近傍法 特徴量が何に似ているかで分類するシンプルなアルゴリズム。 特徴量を抽出する以外に学習をしないので高速に動作する。 全学習データと分類したいデータの内積をとってtop k件の学習データをとる。
深層学習では誤差逆伝搬法で学習をする。 deeplearn.jsではGraphとTensorという概念を使って学習可能なネットワークが構築できる
Chrome DevToolsの紹介
- chrome標準搭載のデバッガー
- 他より多機能
Elements
- DOM構造の確認
- CSSの編集
- イベントリスナーでのブレーク
Sourcesパネル
- 使用ファイルの確認
- JSデバック
Networkパネル
- 読み込まれるリソースのパフォーマンス
- リクエスト元や画像サイズ接続詳細など
3rdpartyのリソースにバッチつくようになった。
リソース上でshift押すとこの画像がどこから読み込まれたかわかる。
Performanceパネル
- Chromeの内部処理
- ネットワーク
- パース、レイアウト
- js実行
- 描画、コンポジット
Applicationパネル
- PWAの管理センター
- App Manifest
- Service Worker
- Cache Storage
- 他のストレージも
Auditsパネル
- PWAのチェックツール
- これをあげとけばいい
開発効率を上げる
ワークスペース
- エディタとブラウザの行き来がだるい
- Sourceパネルでローカルファイルとのマップができる
デバイスモード
- 読み込み速度やレスポンシブの確認
リモートデバッグ
- 実機上のChromeで表示したコンテンツをPCのDevtoolsからデバックできる
- ローカルのコンテンツを実機で表示できる
escで開いたメニューの中にRemote Devicesの中にDiscover USB Devicesがあるのでそこから開く
パフォーマンス計測
- webサイトが遅いのはなぜか
- 回線が遅い、サーバが遅い
- HTMLの書き方、画像、Jsの読み込み方
devtoolsの情報
- 最新情報ならドロワーのWhat's newタブから
- developers.google.com/web
- Youtube https://youtube.com/user/ChromeDevelopers
Go1.8 for Google App Engine
GAE
- Googleが提供するPaas
- スタンダートとフレキシブル環境がある。
- Google App Engineを利用した新規Webサービスの立ち上げ方を見てください(KAURUの導入事例)
Goの対応状況
- Go1.6 1.9なので離れてる
- Go 1.8(β)
- バグはなくなってきている
Go 1.6->1.8で新しくなったこと
- 1.6->1.8
- contextパッケージが標準になった
- サブテスト
- 1.7->1.8
- sort.Sliceが導入されてソートするときに型を作る必要がない
Contextインターフェース
- GCPの各APIを使うために必要
- Goの標準としては ゴールーチンのキャンセル
- コンテキストに値を持たせる
- キャッシュを使わない。デバッグするためにつかったりとか
- GAEとコンテキスト
- Datastoreからの取得、 第一引数でコンテキストを指定している。
サブテスト
- 子テストを実行する
- サブテストを指定して実行できる。
- 落ちたとこがわかりやすい
ソート
- 1.7まではsort.Interfaceを実装する必要があった
Go 1.8対応
app.yamlの書き換え
api_version: go1.8 に変更する。これでSDK内のgoappコマンドやGOROOTがスイッチされる
コンテキストの互換
- インターフェースはメソッドが同じであれば互換である。 Aのinterfaceに String()メソッドを持っていてBのinterfaceにString()メソッドが持っていれば互換がある。
Request.WithContext問題
- Request.Withcontextでリクエストが書き換えられる。
- リクエストが書き換えられると対応するコンテキストが取れない(キーがヒットしなくなる)
- gorilla/mux や lion v2などで問題が発生していた
コンテキストの置き換え
型の不一致問題
- コンテキストを引数や戻り値に取るクロージャー
- ラッパーを作る必要がある...
Go1.9にも期待できる。
- 型エイリアス
- t.Helper()
- テストヘルパーで落ちたときにどこで落ちたかわかりやすくする。
- sync.Map型
- math/bitsパッケージ
まとめ
- Go1.8はβ
パフォーマンス改善やテストで使える
本番利用は早そう
- コンテキストの問題やライブラリの改修問題