02/20(水) は「PWA Night vol.1 ～PWAのミライや活用方法をみんなで考えよう～」に参加してきました。
会場は TAM COWORKING TOKYO さん。
目次
PWA Night とは
イベントの概要から引用します。
PWAについて制作・開発会社の中でも関心が高まってきています。 いまは主にエンジニア中心に認知が広がっている状況で、本格的なビジネス活用や消費者への浸透はこれから・・・というところかと思います。 このPWA勉強会では、エンジニアはもちろん、幅広くPWAに関心をもった有志の方に集まっていただき、PWAの活用方法やPWAのミライについて考えていく会にしたいと思っています。 まだまだ学びの多い技術、みんなでカジュアルに、フラットに情報交換していきましょう！
PWAというのはProgressive Web Appsの略で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。 既にTwitter等いくつかのサイトがPWAに対応している他、GoogleがPlay StoreでPWAアプリをインストールできるようにするといった発表もされていて、注目されている技術の一つです。それについて学んだり情報交換する場、がこの勉強会のようです。
何故参加したか
去年のGoogleのイベントで PWAとAMPについて知り、興味を持ちました。 AMPは Accelerated Mobile Pages の略で、モバイル向けWebサイトを高速化するためのプロジェクト、およびその実現に必要な技術のことです。 それぞれ別の理由で出てきたものではありますが、両方を組み合わせることでOSごとのアプリ開発をせずに、なおかつ高速なページ配信であったり機能を提供できるという有用な技術だと思っています。モバイルやWebは自分の弱いところだと思っていますので、是非参加したいと思って参加しました。
タイムスケジュール
| 時間 | 内容 |
|---|---|
| 19:00～19:20 | 開場 |
| 19:20～19:30 | 挨拶&PWA Nightについて |
| 19:30～19:40 | 自己紹介（全員） |
| 19:40～20:00 | PWAの今とこれから by 宍戸さん@Google |
| 20:00～20:20 | PWA はビジネス的に美味しいか？ by 橋本さん@パラダイスウェア |
| 20:20～20:25 | 休憩 |
| 20:25～20:45 | リーンスタートアップとPWA～Webサービス立上げ時こそPWAを検討したい！～ by 角谷さん@TAM |
| 20:45～21:05 | PWA×CMS活用アイデア by 早瀬さん@シックス・アパート |
| 21:05～21:55 | 懇親会 |
| 21:55～22:00 | 片付け |
内容
今日の司会は中津川(@goofmint)さん。
コミュニティのオーガナイザーの角谷さんから、最初にこのコミュニティについての説明。
PWA Night
- 毎月1回開催予定
ロゴ
込めた想い
- 不完全な何でもない生物
- これから成長していく
- 愛着のシンボル
PWAの今とこれから
宍戸さん@Google
[スライドは公開されたら追記します]
＋２０％
- PWAにしたあとの平均コンバージョンの改善率
スターバックスのアプリをPWA化
- ２X DAU/MAU
- オムニチャンネル
- Service Workerでキャッシュ
- Webで注文して店舗で受け取り
- デスクトップ版も同じ
Google Map Go
- 新興国市場をターゲットしたPWA版
PWAの特徴
- 高速な表示 スムーズなページ表示、画面遷移
- 信頼性 ネットワークに依存しない作り
- エンゲージメント率
高速な表示
- 日経電子版
信頼性
Service Worker
- プロキシのようなもの
- ブラウザごとに起動
リクエストをキャシュして処理
Workbox
- アセットのキャッシュを簡単にし、構築に使用された機能を最大限に活用するためのライブラリーおよびNodeモジュールのセットです。
オフライン時はフォールバックページを返す事ができる
メジャーなブラウザではサービスワーカーがほぼ動作するようになった。
エンゲージメント
- ホームスクリーンに追加
インテントが効くのでメールのリンク等からPWAアプリが起動する
いちいち確認画面が出るのはUX上良くないので、JSで制御できる
インストールしたあとは確認画面が出ないように
Push通知
- プッシュ通知をいきなり送るのは良くない(離脱率上がるかも)
- なので理由を説明する画面を出してからプッシュ通知が良いとされる
ログインは大きな離脱ポイント
- ログインをより簡単に
- 支払いをより簡単に
- いずれもAPIで制御可能
次にどんな物が来るのか
PWAでGoogle Play配信可能
WebView
Activity based
- Trusted Web Activity で ChromeTabを使えるようになる
Capabilities & New Platform Features
WebサイトをPWAを作ってPlay Storeで配信という流れがこれから来るのではないか？
PWA はビジネス的に美味しいか？
橋本さん@パラダイスウェア
PWAのイメージ
- PWA＝アプリ未満 的なイメージ(どうしても機能的なところに目が行きがち)
PWAのメリット
- アプリよりも抵抗数（開発/運用）
- 体制を張りやすい（人手不足）
- フレームワークがすごい（爆速）
- あとからアプリ化できる
- 担当者ガチャ リスクを回避できる
- 「Apple/Google税」問題を回避できる
ではビジネス的に美味しいのか？
- C向けは実績はたくさん見つかる
- でもB向けで進化を発揮するのではないか？
B2B新規事業あるある
- 要件定義に大幅な時間がかかる
- 絶え間ない要件/仕様変更
- システム間連携に大幅なコストがかかる
- 遅延に次ぐ遅延と増え続けるコスト
- テストやリリースで「コレジャナイ」
- IT投資戦略が大幅に見直しに
PWAを使うとどうなるか？
- 早期に動くものが作れる、サワれる
- データが乗っている画面を触れる
- 意思決定が速い
- 要件仕様の抜け漏れ/齟齬の把握が速い
- フロントエンドとサーバーサイドを分離しやすく「コレジャナイ」を防げる
実際に動くもの、触れるものは正義
PWAでプロトタイピングしよう！
- 大幅な工数/費用の圧縮が可能な上にフェーズごとの合意形成がしやすい
プロトタイピングでおすすめの構成例
| フロントエンド | サーバーサイド | iOSプッシュ通知の代替 |
|---|---|---|
| Vue.js | Firebase | Twilio |
- スクラム
- 爆速
リーンスタートアップとPWA～Webサービス立上げ時こそPWAを検討したい！～
角谷さん@TAM
www.slideshare.net
不確実性の高い世の中
- 技術革新の速さ
- 顧客ニーズの変化周期の短期化
- 想定もしなかった競合が出てくる
「MVP」
- 最低限実用に足る製品
- ロケットではなく車
- 目的地があってゴールに向かっていく
アイデアから実装、リリースを早く回す
プロトタイプ PWA向き
- 完成版ではないものの、実際に動作する製品を
- 一見システム化されているように見えるが、実際裏側は生身の人間は手動で実行することで大掛かりなシステム開発の前にユーザーニーズを確かめる手法
スモークテスト
新しい取り組みにおいて、予算も人員も潤沢にあるケースは少ない
MVPを作り、検証しながら過ごしずつ育てる戦略がおすすめ
ネイティブあるある
- アプリを開発できる優秀なエンジニアが給料の高い会社に転職
- ネイティブアプリを作ったけど、ダウンロード数が1000以下
- 低評価ーダウンロードされない
- 最初だけでなくすべてがダブルコスト。ちょっとしたことで予算がなくなる
- 2つあるがために、改善するサイクルが遅くなってしまう（新規サーピスでは致命的）
- OSのバージョンアップに伴う対応/新しい画面サイズ対応
- 改修の度にいちいち審査が必要
ネイティブじゃなくてもよかったんでは？? 最近はハイブリッドアプリにしたいという話も聞く
ウェブアプリであれば改善のサイクルも回しやすい
PWAでできること
ネイティブとの棲み分け
- ネイティブがいつでもbetterなわけではない＝ダウンロードの手間
- インストールをしてもらうのが大変
予算感？
- 基本的にはWeb構築費＋PWA対応費
なにをするかを定義して対応する
- パフォーマンスを高めるならCDN導入など
３G回線も世の中的にはまだ多い（世界的には）
PWAの効果
インデックス可能なプログレッシブ ウェブアプリの構築方法
いつもPWAがいいわけではないけど、
使い方を見極めれば、
失敗するウェブサービス開発が減るはず！
PWA×CMS活用アイデア
早瀬さん@シックス・アパート
[スライドは公開されたら追記します]
PWA対応のメリット
- ページの読み込みが速い
- オフラインでも動く
- インストールがいらない
- ホーム画面にアイコンを追加できる
- プッシュ通知を送ることができる
- GPS機能を利用できる
対応に必要なこと
ユーザー事例
- 小学校のPTAのページ
- 会員向けページ
- お知らせ機能をプッシュ通知で(情報更新のお知らせなどではメールは使いづらい)
- 英語教室のサイト
- 受講者向けページ
- CMSの機能として実装
SSL化
PWAが思ったより普及しない理由
- iOS(Safari)の対応がまだ不完全
- 2017年夏に開発中のステータスに変更
- 2018年はじめ
- Service Workerが実装され、オフラインキャッシュに対応
- 2018年秋
- 新しいOSでWebプッシュ通知の実装に期待
- →残念ながら実装されなかった
運営からのお知らせ
招待リンク：https://bit.ly/pwanight-slack
Slack URL : https://pwanight.slack.com/
次回
懇親会
翌日の朝が早いため参加せずに帰りました。 次回は参加したい。。。
まとめ
初回ということでどんな雰囲気かなと思いましたが、50名の参加者で熱気あふれる楽しい勉強会でした。 PWAは去年のAMP ROADSHOW以来注目してきた技術なので、今後も追いかけていきたいと思っています。 AMPとの組み合わせとか、そういう話題も聴いてみたいです。 抽選なので次回参加できるかはわかりませんが、また参加したいです。(申込みはしました)
講演者、スタッフ、参加者の皆様、ありがとうございました！
