ここ数年、PWA（プログレッシブウェブアプリ）が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA（プログレッシブウェブアプリ）とは なぜPWAを構築する必要があるのですか？ すでにPWAを採用しているのはどこですか？ PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
数年前からGoogleは「Progressive Web Apps」（PWA）という技術を提唱してその普及を推進している。PWAはネイティブアプリケーションのように動作するWebアプリケーションであり、オフラインでも動作し、プッシュ通知などの機能も利用できる。本記事ではこのPWAの中核となる技術の解説と、PWAに対応したWebアプリケーションを作成するための流れを紹介する。 「Progressive Web Apps」（PWA）とは 一昔前は「ネットサービス」といえばPCのWebブラウザからアクセスして利用するものがほとんどだった。しかし、スマートフォンが普及した昨今では多くのサービスがスマートフォン向けの対応を行っている。今ではPCからのアクセスよりもスマートフォンからのアクセスのほうが多いサービスは珍しくなく、スマートフォン向けの専用アプリを用意しているサービスも多い。 とはいえ、ネイ
[レベル: 中級] Google Developers サイトに PWA の成功事例が新たにたくさん追加されました。 多くは、Google I/O 2017 でも紹介されていました。 この記事では、特に注目したい事例として Lancôme（ランコム）を紹介します。 Lancôme はコスメやスキンケア、フレグランスなどの美容アイテムを取り扱う世界最大の化粧品会社です。 Lancôme の全体的な成果 PWA による全体的な成果として Lancôme は次のような改善を手にしました ページがインタラクティブになるまでの時間が 84% 減少 ※“インタラクティブ (Interactive)” とはここでは、ページが表示されたり、何らかのアクションをそのページで起こせる状態になったりすることだと考えてください コンバージョンが 17% 増加 直帰率が 15% 減少 モバイルのセッションが 51%
はじめに 5/17（米国時間）〜3日間、Google I/O 2017が開催されました 今年も盛況だったようです いつものように 全てのセッションの動画 が公開されています 去年のセッションの中で話題になっていたAMP・PWAについて今年のセッション動画から動向を確認してみました AMP・PWAとは？（おさらい） AMP(Accelerated Mobile Pages) GoogleとTwitterが合同で開発 モバイルでページを高速表示する 必要な技術 AMP HTML…専用のhtml/CSS/JSコーディング AMP JS…専用のJSライブラリ Google AMP Cache…キャッシングのためのCDN 参考 Accelerated Mobile Pages Project（公式） Googleの AMPデモ AMP Start …AMP＋Material Designのコンポーネ
Progressive Web Appで実現する動画アプリの最新テクニック ──Google I/O 2017 セッションレポート 河合良哉 この記事は2017年5月17、18、19日に米国カリフォルニア州マウンテンビューにあるAmphitheatreで行われたGoogleの開発者向けカンファレンスGoogle I/Oの3日目に「The Future of Audio and Video on the Web」というタイトルのセッションの内容です。 はじめに タイトルをパッと見て、例えばWeb Audioの話も絡むのか！？と思いきや、内容はビデオでしたが、2000年からwebのみならずリビングにあるテレビ（動画）から、YouTube、SNSでの動画も含めて歴史を追った説明、デモをまじえ動画を中心としたwebサイトの現在できる最高のExperience、そして見えかけている未来のwebでの動
[レベル: 上級] Twitterのモバイル向けサイトが PWA（プログレッシブ ウェブ アプリ）に対応しました。 ブラウザからの利用でも、あたかもアプリからのような使い勝手を実現しています。 アプリのように使えて、軽快な Twitter Lite PWA 版の Twitter モバイルサイト は “Twitter Lite“（ツイッター ライト）と名付けられています。 ただし、lite（”軽い”の意）といっても、通常のウェブ版やアプリと比べると機能が絞られた限定版という意味ではなく、”軽快”に使えるという意味が込められています。 僕は、スマホからの Twitter には純正アプリ（とサードパーティ製アプリ）を使っていましたが、PWA 版の Twitter Lite を数日使ってみて乗り換えました。 アプリに遜色ない使い勝手です。 アプリに引けを取らない Twitter Lite PWA
Web上でPWAについて検索をすると、さまざまな相反する情報や判断基準が表示されます。PWAを定義するには、テクニカルな面でこれから紹介する4つの基準があり、Google Chrome、Opera、Samsungのブラウザーが対応しています。 この4つの基準を満たせば、開発者は望み通り自由に機能をカスタマイズでき、オフラインでのエラーページやオフラインでのブラウジングが可能になります。 プログレッシブになるための条件 Webサイトが、サーバー上にPWAがあると認識されるためには、ユーザーに「Add To Home Screen（ホームスクリーンに追加）」と表示することも含めて、次の4つの条件がグーグルによって定められています。 ユーザーが5分以上間隔を空けて2回訪れるか HTTPSをサポートしているか 有効なJSONのマニフェストが含まれているか Service Workerが含まれている
「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。 しかし、2009年の「モバイルファースト」と、今の「モバイルファースト」は大きく中身が成長しました。モバイルフレームワークであるIonic 2も先日リリースされましたので、ここで改めて「モバイルファースト」とは何かを考え、モバイルの設計を見直していきます。 レスポンシブとモバイルファースト モバイルファース
[レベル: 上級] この記事では、PWA (Progressive Web App: プログレッシブ ウェブ アプリ) の実装状況を検証できる Chrome 拡張を紹介します。 先日参加した SMX Munich 2017 で、GoogleのJohn Mueller（ジョン・ミューラー）氏がサイトクリニックのセッションで紹介してくれました。 Lighthouse で PWA とパフォーマンスをチェック 紹介するのは、Lighthouse という Chrome 拡張です。 Google 製です。 Lighthouse で閲覧中のページを検証すると、PWA の対応状況とパフォーマンス（スピード）をこと細かに調査してくれます。 インストールすると、灯台 (Lighthouse) のアイコンが登場します。 「Generate report」で検証が始まります。 検証が終わると結果レポートが出力され
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く