【LT】Web業界2018とPWAで遊んでみた!
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で出来ています!
イベント当日に実際に使ったスライドPWAは
左図QRコードに公開中です(2018年12月20日時点)
PCでは「→」キー、SPでは「右スワイプ」でスライドします
ここから本編
PWA って何?
Progressive Web Apps
進歩的な/革新的な Web アプリ
PWAとは、Progressive Web Appsの略で、モバイル端末のブラウザでWebページを表示するときに、ネイティブアプリのような挙動をさせることができる新しい仕組みです。
Googleを中心に仕様の策定、開発が進められており、ChromeやFirefoxで利用することができます。
PWAがすごい7つの事
1.「ホームに追加」ボタンを表示できる
2.起動時のスプラッシュ画面を表示できる
3.ネイティブアプリのような全画面表示ができる
4.インストール不要なアプリ
5.ページの読み込みが早いWebページ
6.オフラインでも動作する
7.プッシュ通知を受信できる
実際に試してみる
Googleフォトで試してみる
「ホームに追加」ボタンを追加したら、アプリみたいに!
ほぼアプリの挙動で動きます
が、わざわざホーム追加してくれるユーザーがいるのかが問題ではある
比較してみると
アプリのブラウザと、PWAとネイティブアプリ
ほぼアプリと同じ挙動、動きも快適だということがわかる。
URLのバーがないこと事も見た目では大きくアプリに近い存在
デスクトップ(Windowsとか)でもPWAができます
<手順>
1.最新のChrome67 にアップデート
2.「 chrome://flags 」をアドレスバーに入れて以下を有効
Desktop PWAs を Desabled ⇒ Enabled
3.Chromeを再起動して、PWA対応サイトで試す
先にChromeブラウザの準備
chrome://flags/
Twitterでやってみる
https://mobile.twitter.com/home
にアクセスしてメニューを出して
「Twitter」をインストールしています・・・
をクリックします。ポップアップで「インストール」します。
デスクトップにショートカットが現れるのでダブルクリックして起動してみるとあら不思議、アプリみたいに起動しました。スマホ版と同じ挙動ですね。
中身はChromeで、HTMLを表示ししてることは変わらないので、開発ルールをだしてソース見ることも可能です。
PWAに対応している有名どころな企業では下記
スターバックス、Uber、Googleフォト、Twitterなどあるので実際に試してみましょう。
ちなみに、ChromeにインストールされたPWAは
chrome://apps/
よりアクセスできます。アイコンが並んでいるのがそれですね
ちょっと作ってみた
ものがあるので共有してみます。
<!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のネタ探ししてます。