「HTML5 APP CONFERENCE 2018」に参加してきました

  • HTML5 APP CONFERENCE 2018に参加してきました

html5app-conf.connpass.com

  • html5スマホアプリを作るということをテーマにしたカンファレンス
    • モバイルアプリ、webフロントエンドやPWAをテーマにしたセッションが中心
  • 聴講したセッションのメモと、それ以外でも資料が公開されているものは載せていきます

セッション一覧

カンファレンスルーム 広場 Bar スペース
基調講演「Web App Platform Strategy (Webアプリ・プラットフォーム戦略)」 JavaScriptではじめるMulti UI Application モバイルネイティブアプリに変わる存在!?初めてのPWA
開発・運用・チームビルディングHTML5 アプリのメリット クイズで学ぶウェブ解析とグロースハック Cordova/Monacaを活用したHTML5 アプリ最新事例
Monaca でモバイルアプリ3分クッキング PWA, Cordova, Capacitor, ReactNative Dom の比較からみる、これからのHTML5 アプリ 【超初心者限定!】Web アプリケーションを作ろう!
pixiv chatstory の PWA としての取り組み HTML5 アプリ入門ハンズオン〜Monaca を使った超速構築法〜 Forkwell リニューアルの裏側〜デザイナーとエンジニアの垣根を超えたフロントエンド開発〜
フロントエンドでクラウドをいい感じに使う 座談会「HTML5アプリと周辺技術の最新キーワードを追う」 -
『ぼくのアプリが改善できない!』PWA/iOS/Android 対応のHTML5 アプリを実プロダクトでいかに構築し、育てていくのか。 - HTML5 アプリにおけるパフォーマンスの基礎知識

モバイルネイティブアプリに変わる存在!?初めてのPWA

  • 野本 司さん(株式会社ソニックガーデン)

背景

  • プログラミング初めて1年ちょっと
  • Webアプリなんとなくできるようになった
  • モバイルもいけるだろう
    • プラットフォームによって言語が違った
  • PWAならWebの技術だけで対応できそう!

PWAとは

  • Progressive Web Apps
  • ネイティブアプリっぽいWebアプリ
  • 新しい技術がたくさんというわけではない
  • アプリでできることをWebでも実現可能に

事例

PWAどう作る

  • Googleのチェックリストがある
  • Lighthouseで採点
  • 要素技術
    • ServiceWorker
    • WebAppManifest

サンプル

  • Firebase
  • Vue
  • Vuetify
    • PWAテンプレートがある
  • さっと作ったサンプルでもLighthouseのPWA100点とれる
    • PWA作るの簡単!

クイズで学ぶウェブ解析とグロースハック

  • 窪田 望さん(株式会社クリエイターズネクスト)
  • 資料未公開

ウェブ解析とグロースハック

  • インパクトファースト
  • 基準を知って違和感のある数字を見つけることが大事
    • CVR
      • 1%以上
    • 直帰率
      • 40%以下
    • 営業転換率
      • 10%以上
  • Guess Who
    • 写真の人物像を推理
    • ターゲットでなくペルソナ
      • 「20代後半男性」ではなく具体的に
  • 優先順位の並び替え
    • 20のitemがあると並び替えのパターンは20京以上
    • kobitという製品を使うと寝てる間にやってくれる(宣伝)
  • アプローチのしかた
    • キャッチコピー
      • レモン100個分みたいな
    • 自分ごとだと反応する
  • 熟練度でUIを変える
    • 初心者には説明のあるUI
    • 熟練者には省略されたUI
  • その他いろいろな手法があったので資料が公開されたら確認したい

kobit.in

PWA, Cordova, Capacitor, ReactNative Domの比較からみる、これからのHTML5アプリ

  • 榊原昌彦さん(一般社団法人リレーションデザイン研究所)

ハイブリットアプリ

  • 標準では
  • そんなことやってられない
    • 手間を減らしたい

フレームワーク

  • Xamarin
  • ReactNative
    • Reactでモバイルを作る
    • JavaScriptCoreでNativeに実行できる
    • モバイル用のコンポーネントをWeb用に変換
      • React Native DOM
        • WebComponents使ってる
      • React Native for Web
  • Cordova/PhoneGap
    • ネイティブの機能に直接アクセスするわけではない
    • WebView上でHTMLを動かす
    • 最新のAPIを叩くとかCordovaのプラグイン作りたいとかだと大変
    • ネイティブっぽいUI
      • ionic
      • OnsenUI
    • Monaca
      • オンラインのエディタ
  • Capacitor
    • ionicチームが作ってる
    • 次世代のCordova
    • web/ios/android/electron
    • NativeとWebViewの融合
      • Native UI Shell

capacitor.ionicframework.com

  • PWA
    • push通知ほしいからNativeアプリなんて風にしなくてよくなる
    • アプリはインストールされなくなってきてる
    • Webでコンテンツを用意しておくのは必須

NativeとWebView

  • 処理速度は0/100のはなしではなく99/100
    • それをどこまで気にするか
  • Swift/Kotlinでも実装悪ければ遅いしWebViewでもちゃんとつくればそれなりになる

youtu.be

まとめ

  • 従来はHTMLでモバイルアプリを作るのはネガティブな理由が多かった
  • 今はポジティブな理由で採用できるだけの土台が整っている

pixiv chatstory の PWA としての取り組み

  • 中川雄貴さん @ikasoumen(ピクシブ株式会社)

pixiv chatstory

  • チャット形式で小説を投稿できるサービス
  • ios
    • Swift
  • android/pc
    • PWA

add to home screen

  • ホーム画面に追加
  • インストールバナーが出てくる
  • 別アプリから開くときにホームに追加したアプリから開けるようになる
    • 内部的にもapkを作ってインストールしているからできる
  • pixiv chatstoryでは手動でホームに追加する案内も用意している

LazyLoadとcache

  • ServiceWorkerによるchache
    • cacheAPIを使ってキャッシュ
    • オフライン対応
  • *.chunck.jsを使って必要なファイルだけ読み込み
    • キャッシュと組み合わせてる
  • 初期ロード後リソースをキャッシュしておく

マルチプラットフォーム対応

  • 対応OSは段階的に拡大
  • ターゲットを絞ることで素早く展開できた

アーキテクチャ

  • ionic3
  • Rais on Heroku
  • FirebaseHosting
  • Onesignal

CI

  • PWAはクラッシュせずただただ止まる
  • エラー収集はしてるけどまずは防ぐ
  • heroku Review Apps
    • githubでプルリク作ると自動でherokuにデプロイしてくれる
    • そこでプルリク出されたソースを動作確認できる
  • 毎日アプリを触ることで気づきを得る
    • ios/android両方普段からさわれるように

まとめ

  • PWA
    • インストール/アップデート意識しなくて良い
    • オフライン対応/プッシュ通知
    • ネイティブアプリの機能
  • SPAはスケール自動化しやすい
  • 面倒な作業は機会に任せたりみんなで楽しむ

フロントエンドでクラウドをいい感じに使う

  • 西谷圭介さん(Amazon Web Service)

このセッションでの用語

フロントエンドエンジニアがクラウドを使うときの課題

  • サービス多くてどれ使えばいいか
    • どれが自分たちに関係あるのか
  • どうやってプロビジョニングするのか
    • サーバたてるとかよくわからないし興味ない
  • SDKどう使うのか
    • 認証周りとか
    • サンプル/ドキュメントあまりない
  • AWS Amplifyというのがある

AWS Amplifyとは

  • フロントエンド/モバイル開発者向けのOSSのJSライブラリ
  • よく使うタスクをアプリに簡単に組み込める
  • React/Angular/Vue(soon)/ReactNativeをサポート

AWS Amplifyでできること

  • Auth
    • Amazon Cognito User Poolを使った一般的なサインイン/サインアップ等
    • MFA(他要素認証)
  • Analytics
    • Amazon Pinpointへのデータ送信
    • カスタム属性値やカスタムメトリクス対応
  • API
  • GraphQLクライアント
    • AWS AppSyncを使える(AppSync以外も可)
    • フルマネージドなGraphQLサービス
  • Storage
  • Push通知
    • AWS Pinpointを使ったターゲティング
  • インタラクション
    • Amazon LExを利用した会話式ボット
  • PubSub
    • AWS IoTもしくは一般的なMQTT
  • Caching
    • データストアを用いた一般的なLRU

開発の流れ

  • AWSリソースの設定 -> IAMの設定 -> ClientSDKの設定 -> コーディング
    • 前3つはAWS Mobile Hub/AWS Mobile CLIを使うと簡単

デモ

  • デモ動画(後日公開?)

まとめ

  • AWS Amplify
    • フロントエンドエンジニアのためのライブラリ
    • 各種JSFWをサポート
      • PWAも
  • サーバを構築せずに幅広いサービスを利用できる

HTML5アプリにおけるパフォーマンスの基礎知識

  • 尾上洋介さん(日本大学
    • 情報可視化、数理最適化、意思決定支援の研究

HTML5アプリとは?

  • Webアプリ、PWA
  • モバイルアプリ
  • デスクトップアプリ
  • 今回はhtml/css/jsアプリをターゲットに

なぜパフォーマンスを考えるのか

  • 何も考えないで進めるとパフォーマンスは落ちがち
    • 機能追加は転送量の増加を招く
  • ユーザは優れたUXのサービスを好む
    • パフォーマンスは価値を生み出す時代になっている

PWA

  • PWA Checklist
    • 低速回線対応
    • パフォーマンス
  • PWAを追求するのにパフォーマンスも無視できない

Webアプリのパフォーマンス

  • ページがすぐに表示される
  • ページが快適に動作する
  • RAILモデル
    • Response
      • ユーザ操作に対して100ms以内にで応答
    • Animation
      • 10ms/フレーム(60fps)
    • Idle
      • アイドル時間を活用する
    • Loading
      • 1000ms以内に初期画面表示

developers.google.com

パフォーマンス改善の方法

  • JS処理の高速化(RAL)
  • バックグラウンド処理(R)
  • スタイルの最適化(AL)
  • 必要リソースの削減(L)
  • リソースの先読み(RL)
  • 考え方
    • そのリソースは本当に必要なのか
    • 必要ならより効率的に取得できないか

遅いJS処理の改善

  • アルゴリズムの改善
    • これがもっともシンプル
    • まずはこれを
  • WebWorker
    • 処理の並列化
    • バックグラウンド実行
  • WebAssembly
    • 処理の高速化
    • C資産の利用
    • JS以外の言語の利用
      • Rustとか
  • GPGPU(WebGL/WebGPU)
    • GPUによる処理の高速化
    • tensorflow.jsなんかはこのアプローチ

リソース読み込みの改善

  • 基本
    • 無駄をなくす
    • 不要なスクリプト、スタイル、画像、フォント
  • どうしようもなくなったら
    • 静的サイト生成
    • SSR
    • PRPL
      • Push/Render/Pre-cache/Lazy-load
      • メリット
        • TTIの最小化
        • キャッシュ効率の最大化
        • 開発デプロイの簡素化
        • ES Modulesによる効率的なスクリプト読み込み

PRPL パターン  |  Web  |  Google Developers

  • 不必要なライブラリの削減
    • ライブラリが増えるとLoading時間はのびる
      • 開発者が楽になるライブラリがユーザ体験を下げることになる
    • どうしても必要なら
      • Tree Shakingで最小限だけ読み込み
      • LazyLoad使う

パフォーマンスの測定

  • Lighthouse
  • 採点項目
    • PWA
    • Performance
    • Accessibility
    • Best Practice
    • SEO

これからのWebアプリ設計

  • 後から本格的なPWAにするのは難しい
    • 最初からPWAを意識した設計(PWAファースト)
    • 後からのパフォーマンス改善も難しい
  • PWAの作り方
    • SPAをしっかり作る
    • ServiceWorker/WebAppManifest追加
    • パフォーマンスチューニング頑張る
  • パフォーマンスファーストな設計へ

まとめ

  • モバイルファースト -> PWAファースト -> パフォーマンスファースト