【LT】Web業界2018とPWAで遊んでみた！

mc_kurita

2019年1月13日 15:52

MC Open Lab.#7
2018年12月20日（木）

Web業界2018とPWAで遊んでみた！

まずは、Web業界2018年度を振り返ってみました

その前にちょっとクイズ

Q1. UIデザインツール
2018年度はUIデザインツールが広く広まったが、Windowsで利用できないのは？
※答えは最後のスライド見てください。

1. Adobe XD
2. Figma
3. Sketch

Q2. ネット流行語
今年、ネットで最も流行した単語を表彰する「ネット流行語 100 2018」において、年間大賞を受賞した流行語は何？（ドワンゴ・ピクシブ発表）

1. そだねー
2. 半端ないって
3. vtuber
4. eスポーツ
5. おっさんずラブ
6. ポプテピピック

Q3. AR（拡張現実）
「拡張現実」実在する風景にバーチャルの視覚情報を重ねて表示することで、目の前にある世界を“仮想的に拡張する”というものであるが、ARの「A」はどれ？

1. Amazon
2. Augmented
3. authority

Q4. アプリ
質屋アプリと呼ばれ話題になり、DMMに70億円で買収されたことでも話題になったアプリの名前は？

1. TikTok
2. ZAIM
3. CACHE
4. MONEY
5. CASH
6. PayPay

Q5. 人工知能（AI）
深層強化学習の1つ方式で、Qラーニングと呼ばれる強化学習手法にディープラーニングを組み合わせたものはどれか？

1. CNN
2. DQN
3. GAN

Q6. 5G（第5世代移動通信システム）
「エリクソン・モビリティレポート」の2017年11月版を発表内容で、5G（第5世代移動通信システム）の2023年に加入数が世界でどのくらいの加入数に達すると予測したか

1. 1.2億
2. 3.2億
3. 10億
4. 23億
5. 35億
6. 72億

Q7. PWA（Progressive Web Apps）
PWAの実装技術・サービスで、以下の中から利用できないものは？

1.HTTPS通信
2.Splash 画面
3.フルスクリーン
4.デスクトップ
5.Google Play登録
6.ない（全て可）

おめでとうございます！
※答えは最後のスライド見てください。

実はこのスライド

PWAで出来ています！

https://goo.gl/DSvQnH

イベント当日に実際に使ったスライドPWAは
左図QRコードに公開中です（2018年12月20日時点）
PCでは「→」キー、SPでは「右スワイプ」でスライドします

ここから本編

PWA って何？

Progressive Web Apps
進歩的な/革新的な Web アプリ

PWAとは、Progressive Web Appsの略で、モバイル端末のブラウザでWebページを表示するときに、ネイティブアプリのような挙動をさせることができる新しい仕組みです。

Googleを中心に仕様の策定、開発が進められており、ChromeやFirefoxで利用することができます。

PWAがすごい7つの事

１．「ホームに追加」ボタンを表示できる
２．起動時のスプラッシュ画面を表示できる
３．ネイティブアプリのような全画面表示ができる
４．インストール不要なアプリ
５．ページの読み込みが早いWebページ
６．オフラインでも動作する
７．プッシュ通知を受信できる

実際に試してみる

Googleフォトで試してみる

「ホームに追加」ボタンを追加したら、アプリみたいに！

ほぼアプリの挙動で動きます
が、わざわざホーム追加してくれるユーザーがいるのかが問題ではある

比較してみると
アプリのブラウザと、PWAとネイティブアプリ
ほぼアプリと同じ挙動、動きも快適だということがわかる。
URLのバーがないこと事も見た目では大きくアプリに近い存在

デスクトップ（Windowsとか）でもPWAができます

＜手順＞
１．最新のChrome67 にアップデート
２．「 chrome://flags 」をアドレスバーに入れて以下を有効
　Desktop PWAs　を　Desabled ⇒ Enabled
３．Chromeを再起動して、PWA対応サイトで試す

先にChromeブラウザの準備
chrome://flags/

Twitterでやってみる

https://mobile.twitter.com/home

にアクセスしてメニューを出して

「Twitter」をインストールしています・・・

をクリックします。ポップアップで「インストール」します。

デスクトップにショートカットが現れるのでダブルクリックして起動してみるとあら不思議、アプリみたいに起動しました。スマホ版と同じ挙動ですね。

中身はChromeで、HTMLを表示ししてることは変わらないので、開発ルールをだしてソース見ることも可能です。

PWAに対応している有名どころな企業では下記
スターバックス、Uber、Googleフォト、Twitterなどあるので実際に試してみましょう。

ちなみに、ChromeにインストールされたPWAは
chrome://apps/
よりアクセスできます。アイコンが並んでいるのがそれですね

ちょっと作ってみた

ものがあるので共有してみます。

https://goo.gl/NCshtX

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>PWAテスト1</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body class="conent-body">
<h1>PWAで遊んでみた！</h1>
<p>～中略～</p>
</body>
</html>

{
   "short_name": "pwa_test",
   "name": "PWA_TEST",
   "icons": [
       {
           "src": "icon-192.png",
           "sizes": "192x192",
           "type": "image/png"
       }
   ],
   "start_url": "/quiz/002/",
   "display": "fullscreen",
   "theme_color": "#00A862",
   "background_color": "#FFFFFF"
}

// サービスワーカーの登録
window.addEventListener('load', function() {
   if ('serviceWorker' in navigator) {
       navigator.serviceWorker.register('service-worker.js')
           .then(function(registration) {
               console.log('serviceWorker registed.');
           }).catch(function(error) {
               console.warn('serviceWorker error.', error);
           })
       ;
   }
});

self.addEventListener('fetch', function(event) {
});

最後にアイコン
ほか、PWAに関係ないCSSや画像、JSは省略してます。

上記で作ったページを実際にPWAになるか試してみる

スマホのChrome（実機）で上記をアクセスすると
Chromeの画面下に「ホーム画面にXXXXを追加」が出てきます。
これをタップするとホーム画面に追加できます。
そうすると以後このアイコンを実行するとPWA（全画面アプリ）で画面が表示されます。
またURLで登録されているので、他サイトからたまたまこのURLと同じページをクリックした場合、自動的にPWAをクリックしたのと同じようにPWAで表示されます。

そのChromeにこのURLはPWAですよ！っていう設定がChrome側で登録されているのでしょう。

以上、ご静聴ありがとうございあす。

＊本内容は、下記イベントでの登壇内容の書き起こしです＊
2018/12/20(木) 開催LTイベント
Web Creators MeetUp クリスマス&忘年会ビアバッシュ MC Open Lab#7
https://memberscareer.connpass.com/event/110822/

【スライド】Web業界2018クイズ＆PWAで遊んでみた！

Webのお仕事、元phpプログラマ、今主にWebディレクタ、たまにエンジニア、UXディレクタ、LTのネタ探ししてます。