- HTML5 APP CONFERENCE 2018に参加してきました
- 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のチェックリストがある
- Progressive Web App Checklist
- BaselineとExemplary
- Lighthouseで採点
- 要素技術
- ServiceWorker
- WebAppManifest
サンプル
- Firebase
- Vue
- Vuetify
- PWAテンプレートがある
- さっと作ったサンプルでもLighthouseのPWA100点とれる
- PWA作るの簡単!
クイズで学ぶウェブ解析とグロースハック
- 窪田 望さん（株式会社クリエイターズネクスト）
- 資料未公開
ウェブ解析とグロースハック
- インパクトファースト
- 基準を知って違和感のある数字を見つけることが大事
- CVR
- 1%以上
- 直帰率
- 40%以下
- 営業転換率
- 10%以上
- CVR
- Guess Who
- 写真の人物像を推理
- ターゲットでなくペルソナ
- 「20代後半男性」ではなく具体的に
- 優先順位の並び替え
- 20のitemがあると並び替えのパターンは20京以上
- kobitという製品を使うと寝てる間にやってくれる(宣伝)
- アプローチのしかた
- キャッチコピー
- レモン100個分みたいな
- 自分ごとだと反応する
- Facebookの星座広告
- キャッチコピー
- 熟練度でUIを変える
- 初心者には説明のあるUI
- 熟練者には省略されたUI
- その他いろいろな手法があったので資料が公開されたら確認したい
PWA, Cordova, Capacitor, ReactNative Domの比較からみる、これからのHTML5アプリ
- 榊原昌彦さん（一般社団法人リレーションデザイン研究所）
ハイブリットアプリ
フレームワーク
- Xamarin
- C#で全部かける
- Objective-Cで書くより速い
- Swiftよりは遅い
- Microsoft
- 2016から無償
- C#で全部かける
- ReactNative
- Reactでモバイルを作る
- JavaScriptCoreでNativeに実行できる
- モバイル用のコンポーネントをWeb用に変換
- React Native DOM
- WebComponents使ってる
- React Native for Web
- twitter liteのやつ
- React Native DOM
- Cordova/PhoneGap
- Capacitor
- PWA
- push通知ほしいからNativeアプリなんて風にしなくてよくなる
- アプリはインストールされなくなってきてる
- Webでコンテンツを用意しておくのは必須
NativeとWebView
- 処理速度は0/100のはなしではなく99/100
- それをどこまで気にするか
- Swift/Kotlinでも実装悪ければ遅いしWebViewでもちゃんとつくればそれなりになる
まとめ
- 従来はHTMLでモバイルアプリを作るのはネガティブな理由が多かった
- 今はポジティブな理由で採用できるだけの土台が整っている
pixiv chatstory の PWA としての取り組み
- 中川雄貴さん @ikasoumen（ピクシブ株式会社）
pixiv chatstory
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にデプロイしてくれる
- そこでプルリク出されたソースを動作確認できる
- 毎日アプリを触ることで気づきを得る
まとめ
- PWA
- インストール/アップデート意識しなくて良い
- オフライン対応/プッシュ通知
- ネイティブアプリの機能
- SPAはスケール自動化しやすい
- 面倒な作業は機会に任せたりみんなで楽しむ
フロントエンドでクラウドをいい感じに使う
- 西谷圭介さん(Amazon Web Service)
このセッションでの用語
- フロントエンド
- JavaScriptのWebアプリから
- SPA
- クラウド
フロントエンドエンジニアがクラウドを使うときの課題
- サービス多くてどれ使えばいいか
- どれが自分たちに関係あるのか
- どうやってプロビジョニングするのか
- サーバたてるとかよくわからないし興味ない
- 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 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以内に初期画面表示
- Response
パフォーマンス改善の方法
- JS処理の高速化(RAL)
- バックグラウンド処理(R)
- スタイルの最適化(AL)
- 必要リソースの削減(L)
- リソースの先読み(RL)
- 考え方
- そのリソースは本当に必要なのか
- 必要ならより効率的に取得できないか
遅いJS処理の改善
- アルゴリズムの改善
- これがもっともシンプル
- まずはこれを
- WebWorker
- 処理の並列化
- バックグラウンド実行
- WebAssembly
- 処理の高速化
- C資産の利用
- JS以外の言語の利用
- Rustとか
- GPGPU(WebGL/WebGPU)
- GPUによる処理の高速化
- tensorflow.jsなんかはこのアプローチ
リソース読み込みの改善
- 基本
- 無駄をなくす
- 不要なスクリプト、スタイル、画像、フォント
- どうしようもなくなったら
PRPL パターン | Web | Google Developers
- 不必要なライブラリの削減
- ライブラリが増えるとLoading時間はのびる
- 開発者が楽になるライブラリがユーザ体験を下げることになる
- どうしても必要なら
- Tree Shakingで最小限だけ読み込み
- LazyLoad使う
- ライブラリが増えるとLoading時間はのびる
パフォーマンスの測定
- Lighthouse
- 採点項目
- PWA
- Performance
- Accessibility
- Best Practice
- SEO
これからのWebアプリ設計
- 後から本格的なPWAにするのは難しい
- 最初からPWAを意識した設計(PWAファースト)
- 後からのパフォーマンス改善も難しい
- PWAの作り方
- SPAをしっかり作る
- ServiceWorker/WebAppManifest追加
- パフォーマンスチューニング頑張る
- パフォーマンスファーストな設計へ
まとめ
- モバイルファースト -> PWAファースト -> パフォーマンスファースト
