10月９日
GDG DevFest Japan 2017
に行ってきた！の続き（午後）
■FirebaseとReact Nativeでのモバイルアプリの作り方
・自己紹介
・Firebaseとは
モバイル向けmBaaS
認証、ＤＢ
Googleに買収されＧＣＰに
ただのBaaSではない、Develop Grow EARN→Analytics
・なぜ
クライアントを作ることに集中したい
サーバーを管理する必要がない
料金が安い
・React Nativeとは？
Reactでモバイルアプリが作れるやつ
NativeのViewをＪＳＸで書ける
WebViewではない JavascriptCore
ブラウザの機能もいくつかサポート：WebSocket
Javascriptな部分はいつでもアップデートできる
ホットリロードが可能
ネイティブモジュールでネイティブの機能にアクセスできる
クロスプラットフォームでロジックやデザインの共通化
ロジックをＪＳで書くことで、テストもエミュレーターを必要としない
すべてをＲｅａｃｔＮａｔｉｖｅにしなくてもＯＫ
NativeBase,react-navigation、MobX
React Native Firebase
Firebase Authentification
・Realtime Database
オンライン・オフラインで更新
リアルタイムに同期が可能なＫＶＳのデータべ―ス
サブすくライブしたら、アンサブすくライブ市内とメモリーリーク
Google Analytics for firebase
・ＧｏｏｇｌｅＡｎａｌｙｔｉｃｓのモバイル版
・カスタムイベントもつくれる
ユーザープロパティ
Firebase クラウドメッセージ
push通知
トピックもできる
Notification
注意点
getInitialNotificationとonMessageで受け取れる結果違う
iosではpermission
・クラウドストレージ for Firebase
ＳＤＫでクライアントから
・リモートコンフィグ
analyticsをもとに何かしたいとき
・クラッシュレポーティング
・ＡｄＭｏｂ：アプリに広告を載せるためのサービス
バナー広告
・クラウドファンクション for firebase
イベント駆動でnode.jsを実行できるサービス
メッセージの削除など
ＲＥＳＴ ＡＰＩの受け取りなど
・Cloud Firestore(beta)
リアルタイムデータベースの後継、ドキュメントベース
ドキュメント→コレクション
リアルタイムデータベースだとアプリ側でソートや降順
onSnapShot更新みる
特定のフィールド削除
・Ｆｉｒｅｓｔｏｒｅ
ドキュメント思考
ふくごうＩｎｄｅｘ
アトミックなバッチ処理とトランザクション
自動スケール
リアルタイムデータベース
１つのＪＳＯＮツリー
限定的な並べ替えとlimit
基本的なトランザクション
シャーディングによるスケール
・見ておくといい場所
gcpub.jp
・まとめ
Firebase
最小限で開発
ReactNative
ＪＳかけてネイティブもわかる人
Expoつかうと片手間でも
■deeplearn.js入門 ～teachable machineを題材に～
・自己紹介
・ＮＮ論文を肴に酒を飲むかい
・teachable machine １週間ぐらい前に公開されたもの
・アジェンダ
深層学習 in the Browser
deeplearn.jsの基礎
teachable Machne
学習
・深層学習 in the Browser
playground.tensorflow.org→Javascriptでやっている
ＭａｋｅＧｉｒｌｓＭｏｅ
JSだけで動いている
PerformanceRNN
Project Magenta
深層学習をブラウザ上で行うメリット
計算能力の高いサーバーを用意する必要がない
クライアントサイドでの実行なので、ネットワークによる遅延がない
インストール不要
情報をサーバーサイドにあげないので、セキュリティ上の危険がすくない
ライブラリたち
ConvNetJS
先駆け的存在、数年は更新止まっている
synaptic.js
keras.js：推論のみ対応
WebDNN：ＷｅｂＧＬ，ＷｅｂＧＰＵでの処理、
deeplearn.js
推論だけでなく学習も
ＷｅｂＧＬによる高速な演算
TensorFlowのチェックポイント読み込み
・deeplearn.jsの基礎
npm install deeplearn
deeplearn.jsでは、多次元配列用にNDArrayのクラス
配列同士の演算はNDArrayMathで提供(NDArrayMathGPU)
getValues 配列の値取得（ＧＰＵの値をＣＰＵにもってくる）
mathによる演算はmath.scopeで囲う
→ＧＣの対象にならないので、
trackで明示的に囲う；けしてくれる
keep；外で使えるdesposeで消す
・teachable machine
SqueezeNet画像分類モデルを使う
チェックポイントローダーでよみこめる
ビデオからキャプチャ
↓
特徴量抽出←学習済みモデル
↓
ＫＮＮ
・deeplearn.jsの学習
深層学習：誤差逆伝搬法
Graph,Tensorという概念を使って、学習ネットワークを作る
学習・推論はSessionを通じて行う
■Google Dev Toolsの紹介
・Chrome Dev toolsの概要
Ｗｅｂ開発のデバッガ―
ＨＴＭＬとＪａｖａｓｃｒｉｐｔで書かれている
多機能
・起動してみよう
メニューから起動:Ｍｏｒｅ Ｔｏｏｌｓ →Ｄｅｖｅｌｏｐｅｒ ｔｏｏｌｓ
右クリック:要素・検証
Windowsだと:コントロール＋シフト＋i
・ＵＩ：簡素
どろわー
・各パネルの説明
・エレメンツパネル：マークアップするなど
→ＤＯＭ構造、ＣＳＳの確認
イベントリスナー
・ソースイズパネル
使っているファイルをドメインごとに
→ＪＳのデバッグ
・ネットワークパネル
画像の表示速度影響
リソースの依存関係
・パフォーマンスパネル
サーバーのコネクション
ページ描画の診断
・メモリパネル
・サービスワーカーの確認
ストレージ関連
・おーでぃっとパネル
ＰＷＡ関連
ライトハウス
・開発効率を上げるあれこれ
ワークスペース
デバイスモード：レスポンシブのとき
リモートデバッグ：
モバイル実機をＰＣで確認、
ポートフォワーディングでＰＣから実機へ
・パフォーマンス測定
パフォーマンスパネル
読み込んだ後のものも見れる
記録している
もんだいありそうなところがみれる
・そのほか
最新情報
こみっとろぐはだるい
どろわーのＷｈａｔｓ Ｎｅｗタブ
Ｄｅｖサイト
ＹｏｕＴｕｂｅサイトある
■今更聞けないプログレッシブウェブアプリ講座
・自己紹介
・アプリで続きを読む
・スマートフォンの月間利用時間
１３％（Ｗｅｂ） ＶＳ ８７％（Ａｐｐｓ）
スマートフォンユーザーの時間の７８％は、その人のトップ３アプリに費やされている
平均的なユーザーは一か月にインストールするアプリの数 ０
→１００個以上のサイトにアクセスしてもらえている
・Progressive Web Apps
デモ
twitter lite PWAになっている
ＰＷＡ
ＵＲＬがない
ＰＵＳＨ通知ができる
ほかのアプリにintentが飛ばせる
ストレージもアプリに対して
・ＰＷＡを構成する要素
Ｆａｓｔ
Ｉｎｔｅｇｒａｔｅｄ
Ｒｅｌｉａｂｌｅ
Ｅｎｇａｇｉｎｇ
Ｆａｓｔ
アプリを開いたらすぐに移動
Ｉｎｔｅｇｒａｔｅｄ
ＯＳと深く
タブ：Ｗｅｂブラウザとわかってしまう
Ｒｅｌｉａｂｌｅ
信頼性
Ｅｎｇａｇｉｎｇ
ユーザーと深くかかわる
・アプリインストールバナー：
Ｍａｎｉｆｅｓｔを定義
ＳｅｒｖｉｃｅＷｏｒｋｅｒを使用
トップがオフラインでも２００を返す
ＨＴＴＰＳで提供
５分以上の感覚で、複数回アクセス
・より深く連携
ほかのアプリとの連携
ＷｅｂＰａｙｍｅｎｔｓ
デバイスとの連携
ＭｅｄｉａＳｅｓｓｉｏｎＡＰＩ
・オフライン：
chrome://dino ゲームできる
サービスワーカーが働ききゃしゅで
・サービスワーカー
ページが開いていなくても
バックグラウンドで動作する
Ｊａｖａｓｃｒｉｐｔで書かれたワーカープロセス
Ｗｏｒｋｂｏｘライブラリ
https://workboxjs.org
・プッシュ通知
Firebase Cloud Messaging
・まずはセキュリティから
Start security→https
パワフルＡＰＩはhttps前提
・ＦＡＱ
何をしたらＰＷＡになる？
Progressive Web App Checklist
lighthouse：Dev toolのauditタブでＰＷＡを評価する
作るの大変そう！
マーケティング用語です。気にしないでください
ＰＷＡ ！＝＝ ＳＰＡ
プログレッシブ＝＝徐々に機能を足していくことができる
iOSで動かないんでしょう・・・
サービスワーカーが動かない
プログレッシブ・エンハンスメントとしてのＰＷＡ
→UIをかえることで、iOSでも成功する
WebKit→サービスワーカー開発開始
アプリを続ける？ＰＷＡにする？
ニュース、Ｅ－コマース
・まとめ
４つの要素
ＰＷＡとは未来のＷｅｂそのものである
GDG DevFest Japan 2017
に行ってきた！の続き（午後）
■FirebaseとReact Nativeでのモバイルアプリの作り方
・自己紹介
・Firebaseとは
モバイル向けmBaaS
認証、ＤＢ
Googleに買収されＧＣＰに
ただのBaaSではない、Develop Grow EARN→Analytics
・なぜ
クライアントを作ることに集中したい
サーバーを管理する必要がない
料金が安い
・React Nativeとは？
Reactでモバイルアプリが作れるやつ
NativeのViewをＪＳＸで書ける
WebViewではない JavascriptCore
ブラウザの機能もいくつかサポート：WebSocket
Javascriptな部分はいつでもアップデートできる
ホットリロードが可能
ネイティブモジュールでネイティブの機能にアクセスできる
クロスプラットフォームでロジックやデザインの共通化
ロジックをＪＳで書くことで、テストもエミュレーターを必要としない
すべてをＲｅａｃｔＮａｔｉｖｅにしなくてもＯＫ
NativeBase,react-navigation、MobX
React Native Firebase
Firebase Authentification
・Realtime Database
オンライン・オフラインで更新
リアルタイムに同期が可能なＫＶＳのデータべ―ス
サブすくライブしたら、アンサブすくライブ市内とメモリーリーク
Google Analytics for firebase
・ＧｏｏｇｌｅＡｎａｌｙｔｉｃｓのモバイル版
・カスタムイベントもつくれる
ユーザープロパティ
Firebase クラウドメッセージ
push通知
トピックもできる
Notification
注意点
getInitialNotificationとonMessageで受け取れる結果違う
iosではpermission
・クラウドストレージ for Firebase
ＳＤＫでクライアントから
・リモートコンフィグ
analyticsをもとに何かしたいとき
・クラッシュレポーティング
・ＡｄＭｏｂ：アプリに広告を載せるためのサービス
バナー広告
・クラウドファンクション for firebase
イベント駆動でnode.jsを実行できるサービス
メッセージの削除など
ＲＥＳＴ ＡＰＩの受け取りなど
・Cloud Firestore(beta)
リアルタイムデータベースの後継、ドキュメントベース
ドキュメント→コレクション
リアルタイムデータベースだとアプリ側でソートや降順
onSnapShot更新みる
特定のフィールド削除
・Ｆｉｒｅｓｔｏｒｅ
ドキュメント思考
ふくごうＩｎｄｅｘ
アトミックなバッチ処理とトランザクション
自動スケール
リアルタイムデータベース
１つのＪＳＯＮツリー
限定的な並べ替えとlimit
基本的なトランザクション
シャーディングによるスケール
・見ておくといい場所
gcpub.jp
・まとめ
Firebase
最小限で開発
ReactNative
ＪＳかけてネイティブもわかる人
Expoつかうと片手間でも
■deeplearn.js入門 ～teachable machineを題材に～
・自己紹介
・ＮＮ論文を肴に酒を飲むかい
・teachable machine １週間ぐらい前に公開されたもの
・アジェンダ
深層学習 in the Browser
deeplearn.jsの基礎
teachable Machne
学習
・深層学習 in the Browser
playground.tensorflow.org→Javascriptでやっている
ＭａｋｅＧｉｒｌｓＭｏｅ
JSだけで動いている
PerformanceRNN
Project Magenta
深層学習をブラウザ上で行うメリット
計算能力の高いサーバーを用意する必要がない
クライアントサイドでの実行なので、ネットワークによる遅延がない
インストール不要
情報をサーバーサイドにあげないので、セキュリティ上の危険がすくない
ライブラリたち
ConvNetJS
先駆け的存在、数年は更新止まっている
synaptic.js
keras.js：推論のみ対応
WebDNN：ＷｅｂＧＬ，ＷｅｂＧＰＵでの処理、
deeplearn.js
推論だけでなく学習も
ＷｅｂＧＬによる高速な演算
TensorFlowのチェックポイント読み込み
・deeplearn.jsの基礎
npm install deeplearn
deeplearn.jsでは、多次元配列用にNDArrayのクラス
配列同士の演算はNDArrayMathで提供(NDArrayMathGPU)
getValues 配列の値取得（ＧＰＵの値をＣＰＵにもってくる）
mathによる演算はmath.scopeで囲う
→ＧＣの対象にならないので、
trackで明示的に囲う；けしてくれる
keep；外で使えるdesposeで消す
・teachable machine
SqueezeNet画像分類モデルを使う
チェックポイントローダーでよみこめる
ビデオからキャプチャ
↓
特徴量抽出←学習済みモデル
↓
ＫＮＮ
・deeplearn.jsの学習
深層学習：誤差逆伝搬法
Graph,Tensorという概念を使って、学習ネットワークを作る
学習・推論はSessionを通じて行う
■Google Dev Toolsの紹介
・Chrome Dev toolsの概要
Ｗｅｂ開発のデバッガ―
ＨＴＭＬとＪａｖａｓｃｒｉｐｔで書かれている
多機能
・起動してみよう
メニューから起動:Ｍｏｒｅ Ｔｏｏｌｓ →Ｄｅｖｅｌｏｐｅｒ ｔｏｏｌｓ
右クリック:要素・検証
Windowsだと:コントロール＋シフト＋i
・ＵＩ：簡素
どろわー
・各パネルの説明
・エレメンツパネル：マークアップするなど
→ＤＯＭ構造、ＣＳＳの確認
イベントリスナー
・ソースイズパネル
使っているファイルをドメインごとに
→ＪＳのデバッグ
・ネットワークパネル
画像の表示速度影響
リソースの依存関係
・パフォーマンスパネル
サーバーのコネクション
ページ描画の診断
・メモリパネル
・サービスワーカーの確認
ストレージ関連
・おーでぃっとパネル
ＰＷＡ関連
ライトハウス
・開発効率を上げるあれこれ
ワークスペース
デバイスモード：レスポンシブのとき
リモートデバッグ：
モバイル実機をＰＣで確認、
ポートフォワーディングでＰＣから実機へ
・パフォーマンス測定
パフォーマンスパネル
読み込んだ後のものも見れる
記録している
もんだいありそうなところがみれる
・そのほか
最新情報
こみっとろぐはだるい
どろわーのＷｈａｔｓ Ｎｅｗタブ
Ｄｅｖサイト
ＹｏｕＴｕｂｅサイトある
■今更聞けないプログレッシブウェブアプリ講座
・自己紹介
・アプリで続きを読む
・スマートフォンの月間利用時間
１３％（Ｗｅｂ） ＶＳ ８７％（Ａｐｐｓ）
スマートフォンユーザーの時間の７８％は、その人のトップ３アプリに費やされている
平均的なユーザーは一か月にインストールするアプリの数 ０
→１００個以上のサイトにアクセスしてもらえている
・Progressive Web Apps
デモ
twitter lite PWAになっている
ＰＷＡ
ＵＲＬがない
ＰＵＳＨ通知ができる
ほかのアプリにintentが飛ばせる
ストレージもアプリに対して
・ＰＷＡを構成する要素
Ｆａｓｔ
Ｉｎｔｅｇｒａｔｅｄ
Ｒｅｌｉａｂｌｅ
Ｅｎｇａｇｉｎｇ
Ｆａｓｔ
アプリを開いたらすぐに移動
Ｉｎｔｅｇｒａｔｅｄ
ＯＳと深く
タブ：Ｗｅｂブラウザとわかってしまう
Ｒｅｌｉａｂｌｅ
信頼性
Ｅｎｇａｇｉｎｇ
ユーザーと深くかかわる
・アプリインストールバナー：
Ｍａｎｉｆｅｓｔを定義
ＳｅｒｖｉｃｅＷｏｒｋｅｒを使用
トップがオフラインでも２００を返す
ＨＴＴＰＳで提供
５分以上の感覚で、複数回アクセス
・より深く連携
ほかのアプリとの連携
ＷｅｂＰａｙｍｅｎｔｓ
デバイスとの連携
ＭｅｄｉａＳｅｓｓｉｏｎＡＰＩ
・オフライン：
chrome://dino ゲームできる
サービスワーカーが働ききゃしゅで
・サービスワーカー
ページが開いていなくても
バックグラウンドで動作する
Ｊａｖａｓｃｒｉｐｔで書かれたワーカープロセス
Ｗｏｒｋｂｏｘライブラリ
https://workboxjs.org
・プッシュ通知
Firebase Cloud Messaging
・まずはセキュリティから
Start security→https
パワフルＡＰＩはhttps前提
・ＦＡＱ
何をしたらＰＷＡになる？
Progressive Web App Checklist
lighthouse：Dev toolのauditタブでＰＷＡを評価する
作るの大変そう！
マーケティング用語です。気にしないでください
ＰＷＡ ！＝＝ ＳＰＡ
プログレッシブ＝＝徐々に機能を足していくことができる
iOSで動かないんでしょう・・・
サービスワーカーが動かない
プログレッシブ・エンハンスメントとしてのＰＷＡ
→UIをかえることで、iOSでも成功する
WebKit→サービスワーカー開発開始
アプリを続ける？ＰＷＡにする？
ニュース、Ｅ－コマース
・まとめ
４つの要素
ＰＷＡとは未来のＷｅｂそのものである
アクセス
トータル
ランキング
