PWA Night vol.9 ～PWAをビジネス面から捉えよう～
PWAどうやって始める？ ビジネスサイドはこうやって口説こう！
橋本将功
パラダイスウェア株式会社 代表取締役
プロジェクトマネージャー
マンモスプロジェクト
やってるPWA案件
マンモスプロジェクト ver.2
レガシー業界の業務アプリケーション
電話とFAXの世界にモダンな業務アプリケーションを提供
リーンな新規事業で驚異的なコストパフォーマンス発揮
次年度黒字化できそう
レジャー業界のカスタマ向けサービス
位置情報を絡めたメディアとユーザ参加型サービス
５月中旬キックオフで今月リリース予定
提案協力や導入へのコンサルティング
PWAやってて思うこと
時代はかならず来る
みなさんPWAやってますか？
良さがわかりづらい理由
技術的なアドバンテージがわかりにくい
口説き文句
安い
よくあるマルチデバイス対応のプロジェクト体制
チーム体制が膨大になる・管理工数やトラック係数が大きい
保守運用／改善でも大きな工数減
デバイス対応
OS対応
PWAも必要
アップデート対応
WWDCや新端末発売に振り回されない生活
サービス展開も安い
ストア手数料が不要
売上の30%カットされない
広告宣伝費が激安
アプリは1ダウンロードあたり400 - 1000円の広告宣伝費が必要
Google AdwordsやFacebook広告が利用可能
ゾンビアプリ問題
リテンション施策を含めるとアプリはレッドオーシャン
一人の5つのアプリが利用時間の8割以上を占める
初期開発だけでなく成長に必要な投資も抑えられる
早い
早期にうごくものが作れる、触れる
プロトタイピングが素早い
大幅な工数・予算削減
おすすめ
スクラム・カンバン
美味い
新規事業あるある
要件定義
仕様変更
システム連携コスト
新規事業に投入すると
要件を固められる
ブラッシュアップが頻繁に入る
プロジェクトの節目で投資判断ができる
リーンな投資で失敗を最小限に
ネイティブ化は成功してからでも可能
PWAは楽しい
開発しやすい
ビジネス、開発、ユーザーも楽しく
PWAのビジネスインパクト
Amano Takeshi
ITコンサル・PT CTO
世界の事例紹介
モバイル→PWA
コンバージョンレート 1%
Reactで3ヶ月でローンチ
Pinterest LightがAndroid Storeで配信
30MBから2.8MB
PCでもTinderできるように
Vue Storefront
PWAのe-コマースが作れる
OSSMagentoを始め10のECバックエンドと連携可能
インテグレーションも多数
ロード時間短縮
セッションごとのページ65%
セッション時間が長くなった
直帰率減
AMPも導入
そのほか
pwastats.com
appsco.pe
PWA周りの話
クライアントワークが増えた
作るフェーズに
技術の選択肢も増えた
新規案件はPWA
事例
Rokes Commons Exchange
ビジネスモデル
暗号通貨取引所運営
新しい経済圏を構築
技術スタック
課題
スマホ向けのUI改善
外部サービスから連携
IR Japan
ビジネスモデル
IR情報を企業に提供、上場に関するコンサル
課題
スマホで情報提供したい
情報の一部だけを提供したい
技術スタック
Java sevlet
Azazel
ビジネスモデル
不動産のオーナーと賃貸者を直接つなぐ
課題
スマホで物件検索できるように
PCは不要
技術スタック
Kono Junya
2019年新卒
WintTicket
採用技術
Fastlyの活用
CDNとしてHTMLやアセットの配信を行う
ユーザ固有の情報はプレースホルダーを表示して取得したあと遅延読み込み
Fastly VCL
Cookieを消しつつ
ログイン非ログインをHeaderに詰める
Cache Hit率を上げるためのクエリパラメータ制御
IE11の非モダンブラウザへのビルドしたものの配信分岐
すべてのrouteで
chunk に分割サイズの大きいものは読み込みを遅延
エラーが起きたときにDynamic Import
テスト
TypeScriptを採用してテストコード削減
Unit Testは最小限にしてVisual Regression Testing
ロジックはUnit Testを行う
WinTicket × PWA
カテゴリはギャンブル
Play Storeでは国が限定されている
流れ
会員登録
入金（課金）
投票
ポイントチャージ（入金、払い戻し）
課金転換率
iOSがPageView Per Sessionが高い
PWAは投票率とチャージ率、Session Per Userが高い
PWAと非PWAを比較するとPWAのほうが数字が高い
User Agentで判定して母数計算してる
どうPWAをインストールしてもらうか
a2hs（Add to home screen）
mini-info bar
a2hs dialog
omni box
これからのWinticket
SMS Receiver APIを利用したい
PWAでLTタイマーを作った
TAKA@はままつ
LTやるからLTタイマーを作ろう
Androidのイベントで講師を呼ぶからver2.0にアップデート
時間によってタイマーの表示するモード追加
Wifiなくてもネットワーク接続しなくてもいい
楽しいけどよくわかってない
Web技術だけでつくるQRコードリーダー
菅家大地
フロントエンドエンジニア
QRコードリーダー
カメラで撮って
canvas を使って画像にする mediaDevices.getUserMedia() リアカメラで設定できる
iOSはSafari以外のブラウザで使用できない
<input type="file" accept="file-type" /> jsQRを使用