「DevFest 2018 Tokyo」に参加してきました

勉強会メモ
  • DevFest 2018 Tokyoに参加してきました。

tokyo2018.gdgjapan.org

  • 昨年に続き参加しました。Firebaseは変わらず、加えてFlutterも流行ってるなという印象でした。いろいろな分野の話を聞けてとても勉強になりました。
  • タイムテーブルと公開されてる資料一覧です。
Room A+B(大) Room C+D(大) Room G+H(大) Room I (小) Room J (中) Room K (中)
実践！！Web パフォーマンス改善！
宇都宮 佑亮		 Game Development for Firebase Unity SDK
gremito		 Quick Start GCP
山内 沙織		 Android OSは安全なのか？
タニグチガク		 Flutterアニメーションの実装方法
konifar		 Kubeflowで何ができて何ができないのか?
上田 隼也
Googleアシスタント最新動向
田中 洋一郎		 Flutter Overview
Rui Kowase		 PWAのイマ
takanorip		 Firestore Database Design
1amageek		 Advanced Room
荒木 佑一		 GCP Compute 概要と選定
vvakame
AndroidX時代のHello world
深見浩和 / fkm		 Google AIY Vision kitで遊ぼう　～麻雀牌のリアルタイム識別～
Rio Kurihara		 Firebase Overview for native application
Daiki Matsudate		 GCP のデータベース・ストレージ
apstndb		 Goでネットワークプログラミングするためのよもやま話
竹澤 友博		 FlutterPluginの作り方
kuwapp
Angularの最新情報
laco		 DialogflowとCloud Functions で作る Google アシスタント アクション
flatfisher		 Cloud Kata
sinmetal		 KotlinでFlutterを書けないか色々試してみた
菊池 紘		 Flutterとの1年
najeira		 Growing your app with Firebase
shihochan
TensorFlow Liteで機械学習Androidアプリを超簡単に作る
古川新		 Container
Kuma Arakawa		 新しいMaterial Design と MDC
namiki
joi
yanzm		 Introduction of Polymer 3.0
kazuyoshi kawakami		 Realtime Database for high traffic production application
sota1235		 Generative Modeling in the Wild
Rishabh Gupta
Goらしいコードを業務でも書くために
tom		 TypeScript導入で得られる「変えていく勇気」
okunokentaro		 Transactions APIを使って飲食店の予約が出来るGoogle Assistantアクションが出来るまで
小林 大介		 AndroidThings で CO2 を計測し、警告&サーバーに計測値を投げるシステム
小林 慧		 GCPでつくるデータ処理パイプライン
永井 洋一		 "Fan out" to create twitter like timeline with Cloud Firestore and Cloud Functions
タイラー
Androidパネルディスカッション: AAC実践導入について
magie_pooh
teshi04
shaunkawano
飯島彩輝
松山 純也		 Firebase Realtime Database in Production
青野 健利(ブルーノ)		 機械学習、どこから手をつける？
上総 虎智		 非中央集権ウェブ
aggre		 Auto ML Overview
永井 洋一		 GtugGirlsがヤバいんです
長尾ユリコ
  • 以下聴講したセッションのメモ書きです。

実践！！Web パフォーマンス改善！

  • 宇都宮 佑亮さん(Google)
  • 資料非公開(要点をツイートして頂いていたのでそれを載せておきます)

パフォーマンスを計測する

  • パフォーマンスの計測はLighthouseを使うと良い
    • ChromeのDevtoolから
    • Chromeの拡張もある
    • npmのモジュールもある
  • Chrome68からv3になった
    • 処理速度上がった
    • 解析結果の内容も変わった

サンプルサイトを最適化

  • なるべく軽く同じものは送らない
    • text compress
    • css minify
  • css/jsのカバレッジ
    • devtoolで確認できる
    • 読み込んでるのに使われてないコードは意外と多い
    • bundleしたファイルの内容をorganizationで確認
    • code splitting
    • dynamic import
  • 画像の扱い
    • いろいろツールはある
    • lazy loadする
    • カルーセルはlazy loadしないと重くなるので注意
    • 初期表示に不要な画像は送らない
  • Webフォント
    • 後から読み込まれると適用前のフォントで最初出てしまう
    • <link rel="preload">を使うと良い
  • スクリプトのブロッキング
    • defer
      • 非同期にダウンロードして読み込んだ順に実行
    • async
      • 非同期にダウンロードしてダウンロードした順に実行

参考

Flutter Overview

  • Rui Kowaseさん(メルカリ)

Flutterとは

特徴

開発フロー

setup

  • flutter doctorコマンドで環境が整ってるか確認できる

dev

build/release

CD

  • fastlaneをサポート

Google I/O 2018のセッション

  • Flutter × MaterialDesign
  • Flutter × Firebase
  • Reactive Framework

Flutterの今

  • githubのスター数
    • beta1(2018/3)発表で増えた
    • Google I/O後もまた増えた

Firebase Overview for native application

  • Daiki Matsudateさん(FOLIO)

Firebaseのサービス

  • 20くらいある
  • 3つに分類される
    • build your app
    • improve app quality
    • grow your business

とりあえず入れたいFirebase

Firebase Crashlytics

  • クラッシュ解析ツール
  • クラッシュログ収集解析する

Firebase Paformance

  • パフォーマンスを計測してくれる
  • 滞在時間
  • 描画時間

Google Analytics for Firebase

  • モバイル向けにはFirebase使う

App Index

  • Googleの検索結果にアプリを表示する
  • ダウンロードボタンも出せる

Firebase Prediction

  • GA入れてること前提
  • 7日間のデータから次の行動を予測
    • デフォルトは4つの属性が取れる
      • 離脱しそう
      • 離脱しなさそう
      • 課金しそう
      • 課金しなさそう
  • 離脱しそうなユーザにだけ特定のキャンペーンとか
  • A/B Testingでの対象を離脱しそうな人だけにするとか
  • プッシュ通知を送る対象に指定とか
  • In-App messaging

Firestore

Firebase Realtime Database

  • NoSQL cloud db
    • リレーションは持たせず階層は浅くする
    • クライアント側でjoinしないといけない
  • json
  • offline

Firebase Firestore

  • リレーションがある
    • 参照をセットできる
  • クエリが使える

Firebase Cloud Function

  • Firebaseの更新ややhttpリクエストをトリガーに処理を実行する

Angularの最新情報

  • lacoさん

フロントエンド周り

  • 選定しないと行けないものが多い
  • Angularはこれを解決する

Angularで開発

雛形生成/起動

  • AngularCLIで簡単に雛形作成
  • ng serveで起動
    • ホットリロードも

コンポーネント

テストファイルも作られる

  • ng testで実行できる
    • セットアップ不要

MaterialDesign

  • ng add @angukar/material
    • ライブラリがインストールされる
  • MaterialDesignのコンポーネント用意されてるから使うの簡単

build

  • ng buildでバンドルされる
    • サーバに配置したらデプロイ完了
    • Webpackの設定なんかは不要！

周辺ライブラリ

  • Stackblitz
  • AngularPWA
    • 簡単にPWA対応
  • Ionic
    • WebViewベース
  • NativeScript
    • ネイティブを叩く
  • Angular Universal
    • node上でAngularが動く

今後

  • ivy
    • Smaller/Faster/Simper
  • Angular Console
    • AngularCLIのGUI版
  • Angular for Designers
    • コードを書かずにGUIでアプリを作る

Introduction of Polymer 3.0

  • kazuyoshi kawakamiさん

Polymer Project

  • GoogleのChromeチーム内のプロジェクト
  • driving the web platform forward
  • Web標準を勧めたりライブラリ開発を行う
  • その成果物の一つがPolymer

WebComponents

  • Google I/O 2012で初めて取り上げられた
  • CustomElements
  • ShadowDOM
  • HTML Imports

現在のWebComponents

  • polyfill入れればすべてのブラウザで使える
  • エコシステム
    • WebComponents版のnpm

webcomponents.org - Discuss & share web components

  • 共存できるFW

custom-elements-everywhere.com

Polymerってきもい

  • Polyfillでしょ？
    • 当初はWebComponentsのPolyfill
    • 2.0からはPolyfillを切り離してWebComponentsを作るためのFW
  • bower
    • 今はnpmでも使える
  • HTML Imports
    • HTML Improtsは中止に

Polymer3.0

  • Google I/O 2018で発表
  • Bower -> npm
  • HTML Imports -> ES Modules
  • 3.0できもかった部分が解決された
  • WebComponentsのメインストリームとしてのPolymerが完成

事例紹介

  • 聴き鳥テスト

kikitoritest.jpn.panasonic.com

  • JSFW使ってない
    • Polymer2.0
    • WebComponents
    • Redux
      • WebComponentsでRedux使えるライブラリがある?
    • Web Audio
    • PWA
      • オフライン対応

作ってみて

  • WebComponentsだけでもアプリ作成可能
  • ルーティング周りで苦労
  • JSFW + WebComponentsはあり

TypeScript導入で得られる「変えていく勇気」

  • okunokentaroさん(クレスウェア)

TS採用する理由

昔のTS知ってる人の誤解

  • 型定義ファイルの管理が面倒
    • 今は違う
    • npmで管理できる
    • npm i -D @types/react
  • 途中から導入できない
    • 混ぜて運用できる
    • ただしjs部分は一番ゆるいany型になる
    • .jsならスルー/.tsなら型チェック
  • unknown型
    • 3.0からの機能
    • anyではなくunknown型で

「変えていく勇気」

機械学習、どこから手をつける？

  • 上総 虎智さん(BrainPad)

機械学習で今何できる

  • 自動運転での活用
  • 目をスキャンして心疾患を予測
  • GoogleGlassでスマートファクトリー
    • 手が空かない作業で役立つ

どこから手をつける

  • 動くものをまず作ること
    • やってみないとわからないがつきまとう
    • プロトタイプの難易度は下がってる
  • 機械学習の学習実装
  • 学習済みモデルのデプロイ先
    • TensorFlow Lite
    • ML Kit for Firebase
    • AIY
    • TensorFlow.js
      • なんでブラウザ上で?
        • No device/ No install
        • Interactive
        • Sensors
        • Data stays on the client

プロダクトに仕上げるために

  • 機械学習モデルは使い続けてこそ価値がある
    • 変化を元に再学習が必要
    • 機械学習システムの継続的デプロイ
  • 機械学習モデルの公平性
    • 差別を生み出してしまわないか注意を払う必要がある
    • 再犯率を機械学習で判定

まとめ

  • 機械学習モデルを開発して動かすまでのハードルが下がった
  • 必ずしも難しい手法を使う必要はない
    • シンプルな方法が継続活用しやすい