Submit Search
Upload
Google LighthouseのPWA項目で満点をトル!
•
Download as PPTX, PDF
•
1 like
•
401 views
2nose
Follow
LighthouseにはPWAの項目があるので、満点をとるのが目標です。
Read less
Read more
Internet
Report
Share
Report
Share
1 of 29
Download now
Recommended
初めてのプラグイン開発で学んだ教訓
初めてのプラグイン開発で学んだ教訓
Yuki Okamoto
WordFes名古屋2013のLT資料です MonacaPressプラグイン開発時に学んだことを扱っています
チームビルディング~本物のチームを作る方法~
チームビルディング~本物のチームを作る方法~
hiroyuki Yamamoto
名古屋アジャイル勉強会 2019年4月26日のワークショップ資料です。
コミュニティ紹介
コミュニティ紹介
Ryuichi Tsuruhara
島根県内ITコミュニティの紹介。2015年12月1日開催「ITエンジニア同士の交流会」にて発表した際のスライド。
【Unity道場スペシャル 2017沖縄】スキルがない人のためのアイデア出しのコツ
【Unity道場スペシャル 2017沖縄】スキルがない人のためのアイデア出しのコツ
Unity Technologies Japan K.K.
2017/7/15に開催されたUnity道場スペシャル沖縄のスライドです。 講師:染谷 翔 (ユニティ・テクノロジーズ・ジャパン合同会社) Unityのイベント資料はこちらから: https://www.slideshare.net/UnityTechnologiesJapan/clipboards
ビジネスサイドのためのGoogle App Script 入門講座
ビジネスサイドのためのGoogle App Script 入門講座
Koyo 松本
サンプルコードは下記参照 https://script.google.com/home/projects/1wZsWIlaTUWJqZRYu1N4lc6aR4aliCX7tAe-9GrhnbQDmC2qdZp5hhGx7/edit
Unityではじめるサンデープログラミングのススメ
Unityではじめるサンデープログラミングのススメ
Yasuyuki Kamata
2014/10/11(土) 大田区産業プラザPiOで行われた「PHPカンファレンス2014」のLT登壇の資料です。
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
Masayuki KaToH
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道 企画からリリースまで 2015/09/14 金沢ITプラザ武蔵にて
Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809
Ryu Shindo
2018年9月19日、日本Androidの会の定例会での講演資料です。 先だって9月15日に開催されたWordCamp Tokyo 2018 で講演した PWA および WordPress プラグイン「 PWA for WordPress 」の内容を、技術的に掘り下げた技術者向けの講演としてアレンジしたものです。 既存 WordPress サイトをベースに PWA を実装する事例を通してPWA 実装の勘所を解説します。
Recommended
初めてのプラグイン開発で学んだ教訓
初めてのプラグイン開発で学んだ教訓
Yuki Okamoto
WordFes名古屋2013のLT資料です MonacaPressプラグイン開発時に学んだことを扱っています
チームビルディング~本物のチームを作る方法~
チームビルディング~本物のチームを作る方法~
hiroyuki Yamamoto
名古屋アジャイル勉強会 2019年4月26日のワークショップ資料です。
コミュニティ紹介
コミュニティ紹介
Ryuichi Tsuruhara
島根県内ITコミュニティの紹介。2015年12月1日開催「ITエンジニア同士の交流会」にて発表した際のスライド。
【Unity道場スペシャル 2017沖縄】スキルがない人のためのアイデア出しのコツ
【Unity道場スペシャル 2017沖縄】スキルがない人のためのアイデア出しのコツ
Unity Technologies Japan K.K.
2017/7/15に開催されたUnity道場スペシャル沖縄のスライドです。 講師:染谷 翔 (ユニティ・テクノロジーズ・ジャパン合同会社) Unityのイベント資料はこちらから: https://www.slideshare.net/UnityTechnologiesJapan/clipboards
ビジネスサイドのためのGoogle App Script 入門講座
ビジネスサイドのためのGoogle App Script 入門講座
Koyo 松本
サンプルコードは下記参照 https://script.google.com/home/projects/1wZsWIlaTUWJqZRYu1N4lc6aR4aliCX7tAe-9GrhnbQDmC2qdZp5hhGx7/edit
Unityではじめるサンデープログラミングのススメ
Unityではじめるサンデープログラミングのススメ
Yasuyuki Kamata
2014/10/11(土) 大田区産業プラザPiOで行われた「PHPカンファレンス2014」のLT登壇の資料です。
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
Masayuki KaToH
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道 企画からリリースまで 2015/09/14 金沢ITプラザ武蔵にて
Challenge PWA!! Technical Edition @JAG201809
Challenge PWA!! Technical Edition @JAG201809
Ryu Shindo
2018年9月19日、日本Androidの会の定例会での講演資料です。 先だって9月15日に開催されたWordCamp Tokyo 2018 で講演した PWA および WordPress プラグイン「 PWA for WordPress 」の内容を、技術的に掘り下げた技術者向けの講演としてアレンジしたものです。 既存 WordPress サイトをベースに PWA を実装する事例を通してPWA 実装の勘所を解説します。
MobProgramming at クリエーションライン
MobProgramming at クリエーションライン
Toshiyuki Ando
クリエーションラインさんで行うモブプログラミング体験会で使った資料です。
MobProgrammingを体験してみよう!
MobProgrammingを体験してみよう!
Toshiyuki Ando
MobProgramming体験会のテキストです。
TOPPA!! ノーコード講座
TOPPA!! ノーコード講座
Syuntaro Kane
中高生向けの体系的次世代リーダー養成プログラム TOPPA!! リーダー・スタートアップコース 講師登壇資料。 ノーコード開発基礎+実装の講義を担当。 ノーコードツールを使い、アイディアを形にするキッカケを作ってもらうこと、開発を楽しんでもらうことを目的とした内容です。 Wix, Glide, Adaloを主に紹介しています。
Hour of-code-2016冬-シンポジウム
Hour of-code-2016冬-シンポジウム
Yuta Tonegawa
Hour of Code Japan 2016 利根川からの登壇資料です。
アプリ制作マスターへの道
アプリ制作マスターへの道
Masayuki KaToH
2016 金沢アプリ塾資料
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
Yoshiki Hayama
2014年7月5日(土)開催の「UXD/HCD ワイワイCAFE」の資料です。UXデザインの手法であるオブザベーション(観察)のワークショップです。 https://uxd-hcd-waiwai-cafe.doorkeeper.jp/events/12559
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
Toshiyuki Ando
Agile Japan 2017 愛媛サテライトで行うモブプログラミング体験会で使った資料です。
「なぜクリエイティブ制作は自動化できないのか? 〜広告史を巡って〜」セプテーニ加来幸樹×フクロウラボ林田朋也
「なぜクリエイティブ制作は自動化できないのか? 〜広告史を巡って〜」セプテーニ加来幸樹×フクロウラボ林田朋也
じょいとも
2016年5月15日に品川区ARTnSHLTERで行われたトークイベントのスライドです。 動画: https://youtu.be/rSRZrnJwVqM 企画展CreativeAdventureの関連イベントとして行われました。
UiPath_Fes2_5分LT新山_初心者向.pptx
UiPath_Fes2_5分LT新山_初心者向.pptx
ssuser31c578
UiPath Friends Festival 2022 ~オートメーションの未来へ繋がれ!みんなで創ろう文化展~LT登壇資料
UiPath_Fes2LT新山_初心者向.pptx
UiPath_Fes2LT新山_初心者向.pptx
ssuser31c578
UiPath Friends Festival 2022 ~オートメーションの未来へ繋がれ!みんなで創ろう文化展~ LT14
20160218 devsumi
20160218 devsumi
Yoshimasa Kawano
Developers Summit 2016 での講演資料です。
プロボノワーカーが明日から使える 簡単 & 便利な 情報共有・情報収集ツール
プロボノワーカーが明日から使える 簡単 & 便利な 情報共有・情報収集ツール
Mharu
プロボノワーカーが明日から使える 簡単 & 便利な 情報共有・情報収集ツール
Drupal Meetup 豊田 #4
Drupal Meetup 豊田 #4
Hiroyukli Okada
ライトニングトーク資料
問いを疑え-本当の課題と解にたどり着く問いとは-SansanBuildersBox2018
問いを疑え-本当の課題と解にたどり着く問いとは-SansanBuildersBox2018
絵里子 尾部
創り手はユーザの声を聞け。定量だけはわからない「ユーザはなぜ使わないのか」に向き合う方法 #ProductManagement 社員数500人、導入社数7000社。組織が大きくなりCS経験があるプロダクトマネージャーでも次第にユーザが遠くなる。 「ユーザはなぜ使うのか?」逆に「ユーザはなぜ使わないのか?」デスクで数字を調べても、顧客の要望を聞いてもわからない。私たちがどうやってその答えを取りに行ったか。なぜ創り手にそれが必要なのかをお話しします。 https://jp.corp-sansan.com/sbb2018/
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
智治 長沢
2014年5月18日に実施した JJUG CCC R1-3 セッション資料です。
僕のFireworks普及計画!!
僕のFireworks普及計画!!
Yuuki Kashimoto
2013/03/21のCSSNite Ginza Vol68の懇親会を兼ねたFireworks UserGroup LightningTalkで発表した資料です。 ※一部コンテンツ非公開
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
Osamu Nagatani
CMSどうでしょう〜MT・WP対決列島〜 仙台編での資料です。
スマートフォンアプリエンジニアのための最新プロトタイピング講座
スマートフォンアプリエンジニアのための最新プロトタイピング講座
HiroyukiHirota
2015/7/15開催のセミナーで仕様した資料です。 アプリのUI/UXを検討する上で参考となるプロトタイピングに関するセミナーを行いました。 ・ペーパープロトタイピング ・keynoteを使ったプロトタイピング ・POPを使ってプロトタイプを作る ・Prottを使ってプロトタイプを作る
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
HTML5 Conference 2012
春の勉強会 2015
春の勉強会 2015
Ryo Okuno
2015 2/28 春の勉強会の資料です
More Related Content
Similar to Google LighthouseのPWA項目で満点をトル!
MobProgramming at クリエーションライン
MobProgramming at クリエーションライン
Toshiyuki Ando
クリエーションラインさんで行うモブプログラミング体験会で使った資料です。
MobProgrammingを体験してみよう!
MobProgrammingを体験してみよう!
Toshiyuki Ando
MobProgramming体験会のテキストです。
TOPPA!! ノーコード講座
TOPPA!! ノーコード講座
Syuntaro Kane
中高生向けの体系的次世代リーダー養成プログラム TOPPA!! リーダー・スタートアップコース 講師登壇資料。 ノーコード開発基礎+実装の講義を担当。 ノーコードツールを使い、アイディアを形にするキッカケを作ってもらうこと、開発を楽しんでもらうことを目的とした内容です。 Wix, Glide, Adaloを主に紹介しています。
Hour of-code-2016冬-シンポジウム
Hour of-code-2016冬-シンポジウム
Yuta Tonegawa
Hour of Code Japan 2016 利根川からの登壇資料です。
アプリ制作マスターへの道
アプリ制作マスターへの道
Masayuki KaToH
2016 金沢アプリ塾資料
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
Yoshiki Hayama
2014年7月5日(土)開催の「UXD/HCD ワイワイCAFE」の資料です。UXデザインの手法であるオブザベーション(観察)のワークショップです。 https://uxd-hcd-waiwai-cafe.doorkeeper.jp/events/12559
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
Toshiyuki Ando
Agile Japan 2017 愛媛サテライトで行うモブプログラミング体験会で使った資料です。
「なぜクリエイティブ制作は自動化できないのか? 〜広告史を巡って〜」セプテーニ加来幸樹×フクロウラボ林田朋也
「なぜクリエイティブ制作は自動化できないのか? 〜広告史を巡って〜」セプテーニ加来幸樹×フクロウラボ林田朋也
じょいとも
2016年5月15日に品川区ARTnSHLTERで行われたトークイベントのスライドです。 動画: https://youtu.be/rSRZrnJwVqM 企画展CreativeAdventureの関連イベントとして行われました。
UiPath_Fes2_5分LT新山_初心者向.pptx
UiPath_Fes2_5分LT新山_初心者向.pptx
ssuser31c578
UiPath Friends Festival 2022 ~オートメーションの未来へ繋がれ!みんなで創ろう文化展~LT登壇資料
UiPath_Fes2LT新山_初心者向.pptx
UiPath_Fes2LT新山_初心者向.pptx
ssuser31c578
UiPath Friends Festival 2022 ~オートメーションの未来へ繋がれ!みんなで創ろう文化展~ LT14
20160218 devsumi
20160218 devsumi
Yoshimasa Kawano
Developers Summit 2016 での講演資料です。
プロボノワーカーが明日から使える 簡単 & 便利な 情報共有・情報収集ツール
プロボノワーカーが明日から使える 簡単 & 便利な 情報共有・情報収集ツール
Mharu
プロボノワーカーが明日から使える 簡単 & 便利な 情報共有・情報収集ツール
Drupal Meetup 豊田 #4
Drupal Meetup 豊田 #4
Hiroyukli Okada
ライトニングトーク資料
問いを疑え-本当の課題と解にたどり着く問いとは-SansanBuildersBox2018
問いを疑え-本当の課題と解にたどり着く問いとは-SansanBuildersBox2018
絵里子 尾部
創り手はユーザの声を聞け。定量だけはわからない「ユーザはなぜ使わないのか」に向き合う方法 #ProductManagement 社員数500人、導入社数7000社。組織が大きくなりCS経験があるプロダクトマネージャーでも次第にユーザが遠くなる。 「ユーザはなぜ使うのか?」逆に「ユーザはなぜ使わないのか?」デスクで数字を調べても、顧客の要望を聞いてもわからない。私たちがどうやってその答えを取りに行ったか。なぜ創り手にそれが必要なのかをお話しします。 https://jp.corp-sansan.com/sbb2018/
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
智治 長沢
2014年5月18日に実施した JJUG CCC R1-3 セッション資料です。
僕のFireworks普及計画!!
僕のFireworks普及計画!!
Yuuki Kashimoto
2013/03/21のCSSNite Ginza Vol68の懇親会を兼ねたFireworks UserGroup LightningTalkで発表した資料です。 ※一部コンテンツ非公開
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
Osamu Nagatani
CMSどうでしょう〜MT・WP対決列島〜 仙台編での資料です。
スマートフォンアプリエンジニアのための最新プロトタイピング講座
スマートフォンアプリエンジニアのための最新プロトタイピング講座
HiroyukiHirota
2015/7/15開催のセミナーで仕様した資料です。 アプリのUI/UXを検討する上で参考となるプロトタイピングに関するセミナーを行いました。 ・ペーパープロトタイピング ・keynoteを使ったプロトタイピング ・POPを使ってプロトタイプを作る ・Prottを使ってプロトタイプを作る
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
HTML5 Conference 2012
春の勉強会 2015
春の勉強会 2015
Ryo Okuno
2015 2/28 春の勉強会の資料です
Similar to Google LighthouseのPWA項目で満点をトル!
(20)
MobProgramming at クリエーションライン
MobProgramming at クリエーションライン
MobProgrammingを体験してみよう!
MobProgrammingを体験してみよう!
TOPPA!! ノーコード講座
TOPPA!! ノーコード講座
Hour of-code-2016冬-シンポジウム
Hour of-code-2016冬-シンポジウム
アプリ制作マスターへの道
アプリ制作マスターへの道
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
モブプログラミングを体験しよう at Agile Japan 2017 愛媛サテライト
「なぜクリエイティブ制作は自動化できないのか? 〜広告史を巡って〜」セプテーニ加来幸樹×フクロウラボ林田朋也
「なぜクリエイティブ制作は自動化できないのか? 〜広告史を巡って〜」セプテーニ加来幸樹×フクロウラボ林田朋也
UiPath_Fes2_5分LT新山_初心者向.pptx
UiPath_Fes2_5分LT新山_初心者向.pptx
UiPath_Fes2LT新山_初心者向.pptx
UiPath_Fes2LT新山_初心者向.pptx
20160218 devsumi
20160218 devsumi
プロボノワーカーが明日から使える 簡単 & 便利な 情報共有・情報収集ツール
プロボノワーカーが明日から使える 簡単 & 便利な 情報共有・情報収集ツール
Drupal Meetup 豊田 #4
Drupal Meetup 豊田 #4
問いを疑え-本当の課題と解にたどり着く問いとは-SansanBuildersBox2018
問いを疑え-本当の課題と解にたどり着く問いとは-SansanBuildersBox2018
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
Java開発で活かしてほしいGit,CI,そして継続的デリバリー #jjug_ccc #ccc_r13
僕のFireworks普及計画!!
僕のFireworks普及計画!!
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
スマートフォンアプリエンジニアのための最新プロトタイピング講座
スマートフォンアプリエンジニアのための最新プロトタイピング講座
HTML5時代のWebデザイン
HTML5時代のWebデザイン
春の勉強会 2015
春の勉強会 2015
Google LighthouseのPWA項目で満点をトル!
1.
Google Lighthouseの PWA項目で満点をトル! そう、MTで。 アイデアマンズ 能勢
2.
自己紹介 能勢弘光(ノセ ヒロミツ) アイデアマンズ株式会社 新規事業部グロースハッカー 自動画像最適化ツール LightFileを担当 コミュニティ:MT東京 MTDDC Meetup
TOKYO 2016 実行委員長 大規模向け Movable Type × eCommerce
3.
エンジニアさん向けではありません いろいろやりたがりなディレクター向けです
4.
Lighthouse PWA Movable Type
5.
そもそもどうしてPWAしたいの? ウェブブラウジングしてて
6.
そもそもどうしてPWAしたいの? •デスクトップ通知がほしいと思う人 •ブラウザ通知がほしいと思う人 ウェブブラウジングしてて いますか?
7.
ところで iPhone Safariで、 PWA使えませんよね。 みなさん、Androidですか?
8.
そもそもどうしてPWAしたいの? •日本はみんなiPhoneじゃないの? •iPhone対応してないんでしょ? もっと技術を使おう!取り入れよう! 話はその後だ!
9.
今回の目的 <Pagespeed InsightsのエンジンがLighthouseだから> Google Lighthouseの PWA項目で満点をとる
10.
Lighthouse 使っ てますか? • Googleの提供する監査ツール •
Pagespeed Insightsのエンジン • コマンドラインか、ChromeのDevTools で利用 • 最新版は、4.1.0?
11.
Google PageSpeed Insight 2018年 11月14日 から
12.
Google Lighthouse
13.
Google Lighthouse 結果
14.
LighthouseのWPA監査項目 • 全部で12項目 • 重要なのは6項目 •
残りの6項目は、最適化用の項目
15.
LighthouseのWPA監査項目 重要6項目
16.
LighthouseのWPA監査項目 最適化6項目
17.
Movable Typeで作ったサイトでやること 1. manifest.jsonの作成 2.
アイコン画像(PNG)の作成 3. serviceWorker.jsの作成 4. offline.htmlの作成
18.
Movable Typeで作ったサイトでやること その他 1. ウェブサイトのはhttps化しておきましょう 2.
httpからhttpsにリライトするようにしておきましょう
19.
manifest.jsonを作る ここで作れました。 アイコンのサムネイルも作ってくれます。 https://app-manifest.firebaseapp.com/
20.
manifest.jsonを作る
21.
ServiceWorker.jsを作る <PWA対応で一番よくわからないもの> 1. オフライン時にステータスコード200を返す 2. キャッシュを表示する!
22.
ServiceWorker.jsを作る ここの内容をコピペしましたw https://qiita.com/OMOIKANESAN/items/13a3dde52 5e33eb608ae
23.
ServiceWorker.jsを作る
24.
offline.htmlを作る • インデックステンプレートで作ろう • 中身は、オフライン時に表示するページです。お好きなものを。 •
再構築のたびに最新の情報に更新しておけば、オフラインでもなん とかなるかも? • 独自オフラインコンテンツを考えるのもいいかも
25.
Google Lighthouse 結果
26.
Google Lighthouse 結果 速いインフラ、サーバ ServiceWorker.jsで設定 ServiceWorker.jsで設定 インフラ、サーバ Manifest.jsonで設定 ServiceWorker.jsで設定
27.
Google Lighthouse 結果 インフラ、サーバ manifest.jsonで設定 HTMLで設定 HTMLで設定 HTMLで設定 ???
28.
Lighthouse デモ
Download now