y.takky　てくめも

web技術について勉強会の参加メモだったり、本を読んだメモだったりを載せる予定

トップ > まとめ > DevFest Tokyo 2017 メモ

DevFest Tokyo 2017 メモ

まとめ devfest

gdg-tokyo.connpass.com

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 Native Firebase
    • 公式のWebSDKでは使えないサービスもかける

Firebase Authentication

  • ユーザ認証を実装できるサービス
  • twitterやメール等々認証。カスタム認証もできる。

Realtime Database

  • オンラインでもオフラインでもデータが保存できてリアルタイム同期が可能なKVS
  • セキュリティールールで読み書き制限

Google Analytics for Firebase

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を題材に-

deeplearn.js入門 - Google スライド

  • 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の情報

Go1.8 for Google App Engine

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対応

  • gcloudコマンドでアップデートしたりSDKを再DLしたり
  • 設定の変更
    • app.yamlを修正
    • contextをgolang.org/x/net/contextからcontextに変更する

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はβ

  • パフォーマンス改善やテストで使える

  • 本番利用は早そう

  • コンテキストの問題やライブラリの改修問題