勉強会詳細
ハイパフォーマンスWeb "PWA"導入セミナー ～Webサイト/アプリ構築のベストプラクティスを知ろう
所感
- 自分自身サーバーサイドエンジニアのため、菊池さんのPWAの歴史についてお話はPWAの前提知識として非常に理解が深まった。やはり技術の理解には歴史が大事であると感じた１日だった。
- 海外ではフレームワークとPWA兼ね合いを議論していたのは去年まで。近年はプレーンJSとの兼ね合いが議論されているというのが印象的だった。そしてそれは2-3年後に日本へと伝わっていく。。。
- したがってAPIの重要性も高まっている。
- PWA=Service Workerというのはミスリードであることを知った。漸進的に進化する技術がPWAであることを再認知した。(しかし主だった目立ちやすい機能はService Workerのため、メディアが取り上げてしまうのはしょうがないのかもしれない)
第一部 菊池 崇 氏（40分） 『Web構築のベストプラクティス「PWA」にいま注目が集まっている理由と海外事例』
自己紹介
- 菊池聡さん
- Web Directions East LLC代表
- 国内最大級のUXカンファレンス「UX DAYS TOKYO」主賓
- ノーマン・ニールセンググループ UX Master
PWAの歴史
- どういったことに注力、注意すればいいのか
- Microsftも提案(1995)
- Stave Jobsも提案(2008)
- Alex Russellが2015年に命名
- googleの方
- HTML=Web Hyper Application workin group=WHATWG(2004)
- service worker
けっこう歴史は古い
- service worker
PWAの定義を5W1Hで
Who(誰が提唱したか)
- Alex Russellさん
When(いつ提唱されたか)
- web directionsのカンファレンス
- John Allsopp...レスポンスデザインのおじいちゃん
- 2015年7月のことでした
Why
-
１ヶ月でアプリケーションをダウンロードする...65%以上はダウンロードしていない
-
20年以上、ダウンロード数No1 史上最強のアプリ
- ブラウザである
- 広告、施策、optimazilation...
- 1人にダウンロードさせるのに100円かかる時代
-
リープ ブログスキー
- モバイルハイス
- google UXデザインチーム
- 2013年の記事人気のあるブラウザこの記事
- facebookは、ios/androidで一番人気のアプリ 18%
- facebookのweb viewのことについて言及しており、これは良くないと提言している。chromeとかはとてもブラウザに努力しているため、facebookのブラウザにパフォーマンスは出せないためである。
- facebookは、ios/androidで一番人気のアプリ 18%
What
- web experience
- webの経験を返ることが目的である
- ユーザーがどう使うかにフォーカスしている
- 人は古いもので新しいものを捉える
- 今あるものと対比しがち
- テレビが出たとき、ラジオに映像がついたと表現した
How
- progressively(徐々に、漸進的)
- 順を追って、目的を実現しようとする様
- nativeの置き換えで作ろうとしてはいない
- エスカレーターとか階段でpwaを表現することが多い
- エスカレーターは止まっても階段としてゴールできる
- ゴールに向かって最終的に行けるが、少しずつゴールに近づく必要がある
- HTML5を使って、web appに置き換えようとしている
- web上の経験をどう変えるかにフォーカス
- service workerの実装有無にフォーカスしてしまう
- Pの間違いは繰り返す(progressively)
- Androidの例
- yahoo.co.jpにアクセスする、ios版との違いは、見せてもらわないとわからない
- IE6の頃に、このような考えはあったか？
- 1pxずれる、画像崩れ...
- Progressice Enhancementという言葉もあった
- webサイトの見栄えを同じにしようとする動きがあったが、css3で無理だとなった
- Progressice Enhancementを大事にしなさい
- 同じ体験、ゴールを目指すべきである
- これは同じ間違いである
- service workers対応していないとPWAではないというのは間違い
- service worker
- キャッシュから情報を持ってくる、offlineでできる
- そんなにやることは多くない
- native app的な~みたいな記事、対比が多い
- PWA...Can I Use を見て、それがすべてであるとなってしまう
- android iosの対応とかで凝り固まる必要ない
- twitterはiosが対応していなくても、開発し続けている
- IE6のような間違いを犯そうとしている
- IOSに対応してないから、~しなくていいよね、とすると、どんどん遅れていく。海外は「漸進的でしょ、どんどんやってみようよ」となっている
- すべてのブラウザへ同じじゃなきゃ、という考えはとても同じ
- 「CSS3 PIE (progressive IE)がいいかんじ」と同じ
- メディアが煽っているのが非常に危険、欧米的な、柔軟な考えをしてほしい
PWAを勉強するには
チェックリストがある
-
https://developers.google.com/web/progressive-web-apps/checklist
- https
- 2020年に、firefox, chromeでhttps以外のサイトは見れなくなるらしい- しかしこれで全てではない、全部やる必要もない
更にPWAチェックリストがある
- 2,30個位ある
- service workerはそのうちの1つしかない
- それを理由に勉強しないのはもったいない
- service workerはそのうちの1つしかない
- 企業で実装するときには、漸進的に開発、検証しているチームがいざというときに強い
フレームワークとの折り合い
-
フレームワークからネイティブへ
- React, Vue...
-
非常に重宝する、「最初は」
-
Reactは WorkboxというPWAが使えてしまう。
-
twitter、airbnb, netflixは最初react使っていたが、やめてしまった
-
2017年、 "Code"というイベントがあった。
- PWAカンファレンスで、フレームワークの話をしていた React, vue
-
2018年 同じカンファレンスで、react, vueに話は全くなくなってしまった
- JS/APIの話が中心
- FWは最初は導入するが、邪魔が多くなる、普通にnativeで書いたほうが早くなるから、だんだん使わなくなってくる。初心者向けである
- JSの基本的な書き方を使うようになる
- react, vueのカンファレンスは、海外はどんどん少なくなってくる、日本は伸びている...
- ある程度のレベルになると、自分で書いたほうが早い
-
html & css
- htmlをシンプルに、コンポーネント化を意識する
- cssは新プリに custom cssなどを上手に利用する
- APIをより勉強する必要が出てきた
- payment...などなど
-
プロジェクトに必要な人材
- 10年クラスの選手
- JSをネイティブに記述できる人材
- APIをより勉強する必要が出てきた
- 発注する側も、jsの同じ体験ができるかを考える必要がある
-
事例についてはまた後のセッションで
第二部 TAM 菅家 大地（20分）『PWAでどんなことができる？サンプルアプリでご紹介』
自己紹介
- フロントエンドエンジニア(TAM)
- webコンサル会社のデザイナー
- かつてはmonacaも使用していた
何を持ってPWAか？
- googleの「はじめてのプログレッシブウェブアプリ」
よく話題になること
-
ネイティブアプリのようなUI
- アプリとして認識される
- 菊池聡さんのセッションでPWAはService Workerだけではないと合ったが、目に見えた機能はservice workerが多いのは確か... メディアがService Workerを取り上げてしまうのも無理はないかもしれない
-
高速起動
- 日経電子版
- service worker
- ブラウザの裏側でコンテンツをキャッシュすることで実現。
-
オフライン動作可能
- service workerで、オフラインストレージに保存したデータを利用できる
-
プッシュ通知利用可能(Android)
- service workerの仕組みを利用してプッシュ通知を受信できる
相性がいい、悪い
-
良さそう
- メディアサイト
- ニュース、EC、グローバル展開(スマホのスペックが低い、ネットワークの回線が弱い,,,)
-
悪そう
- 高速なグラフィック処理、計算処理を必要とするゲーム
- ネイティブでしか実現できない機能がある
事例
Flipkart Lite
- インドのECサイト
- 滞在時間70s → 3.5minになった
- 再エンゲージメント率40%上昇
- ホーム画面からのCVR 70%UP
- データ使用量が3倍減少
日経電子版
- 表示速度が2倍
- ホーム画面に追加したユーザーのアクセスは2倍
TipsNote
- PWA化したらどうなるかのデモ
- 既存のサイトを比較的に手間をかけずに実現できた
- すでに運用しているサイトにPWA化は、導入コストを考えてもおすすめ？
- やったこと
- インストール可能
- 全画面表示
- ページのキャッシュ(高速化)
- オフライン対応
- ローカルにデータを保持する
- URLはこちら
まとめ
- ネイティブアプリでしかできないことは徐々に少なくなってきている
- 段階的に導入することが可能である
第三部 TAM 角谷 仁（30分）『PWA 企業担当者が発注前・制作時に知っておきたいこと』
自己紹介
- TAM取締役の方
- デジタルマーケティングに関して上流〜運用までワンストップで行う
PWAはなぜおすすめなのか？
-
デジタルトランスフォーメーション(DX)
-
経済産業省の資料
- 企業は既存のビジネスから...
- 第３のプラットフォームを使って変革していきましょう。攻めのIT。
- 置き換えステージ→効率化ステージ→競争力強化ステージ
-
こんな課題感ありませんか
- デザインを変えても効果がでない
- 集客しても高価でない
- 落とし所の商材やサービス
- なんかしらの突破口をITに求められる
-
DX...自社の製品にITを組み合わせて新たな〜
-
投資に対して回収に失敗するプロジェクトは70-80%くらい
- それは「不確実性」のせいであると言われる
- 競合、ターゲットも刻一刻と変化する
- 技術も変わってくる
- マーケットいん < プロダクトアウト
- プレッシャーのおおい
- 少ない人材と全体的なスキルシステム
...
どうやって成功率を挙げていくのか
-
MVP...最低限実用に足る製品
- 顧客の反応を見ながら製品を変えていく
- ロケットと車の例
- 車の運転とロケットの運転は違う
- 構築→計測→学習のサイクルを高速に回す
-
MVPの種類
- プロトタイプ(クローズドのベータ版)
- twitterの初期バージョン
- オズの魔法使い
- 一見システム化されているが、裏側は品原画手動でやる
- ニーズの大きさを確かめる
- 大掛かりなシステムの開発前
- スモークテスト
- サービス紹介ビデオ、リリース前の事前応募を募る
- Dropbox
- コンシェルジュ
- すべて生身の人間で実施する
- airbnbの写真撮影
- プロトタイプ(クローズドのベータ版)
PWAの適応に有効なMVP
- プロトタイプ
- オズの魔法使い
PWAがスモールスタートに向いている理由
- 予算も人員も潤沢にない
- もしあるならIOSやアンドロイドアプリを作ったほうがいい
- 少しずつ検証して段階的にリリースする
- 審査がない、iOSとAndroidの2つのOSを開発する必要がない
ネイティブあるある
- ダウンロード数が1000以下
- 低評価されてしまった→ダウンロードされない
- 運用までダブルコスト
- 2つあるためにPDCAが遅くなる
- OSのバージョンアップに伴う変更、新しい画面サイズ...
- 開発→審査→リリース
PWAとネイティブの比較
- 速度はネイティブのほうが早い
- ハードウェアのアクセス
- push通知はアンドロイドのみ...
-
新規の訪問者を増やす...web
- そしてPWAでリピーターを増やす
-
ネイティブはいつまでもbetterではない
- １ヶ月に60%程は何もダウンロードしない
- 予算
- web構築費 + PWA対応費
- アプリライクなUI起動 15万円
- application shellのキャッシュ対応
- コンテンツのキャッシュ/事前取得
-
パフォーマンスを高めるなら...
- CDNの導入
- Atomicデザイン...
- 基本的には...
-
webのため、AppleストアとかGoogle Store?に高い手数料を払わなくて良くなる
- Appleだと手数料が30%かかるところ、webならクレジット決済料数％で済む
PWAの効果
- Uber
- 3s立つと50%離脱してしまう
- Twitter Lite
- ページセッションが~
- 直帰率20%げんしょう
- Tinder
- 読み込みが11s→4s
- Forbes
- 表示数
- The Washington Post
- Housing.com
- wego
- パフォーマンスが上がればコンバージョンも上がるとわかりやすい
- toribago
- the best wesetern river noth hotel
- Alibaba
- lancome
- カート落ちのCV上昇
SEO
- PWAで効果のあるサイトを使っても、SEO設計がいけてなかったら効果がない
- インデックス可能なプログレッシブウェブアプリの構築方法
発注のポイント
- PWAはあくまで手段
- web開発としては、比較的高度
- スモールスタートだけでなく、ユーザー目線で
業者選定のポイント
- PWA以外の提案が可能か、ネイティブ、ASPを提案できるか
そこでTAMさん
- PGST
- シートが有る
- 百貨店への来店、売上増加につなげる
- サービス拡張計画
- Monacaを利用した開発も行っている
- lalavel, vue, firebase, herokuなど
- PWAパートナーとしてTAMを検討してみてもいいかもしれない