From 11a1462605fb1ceb693f9bf3653ce3ae6b0bf145 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 12 Jun 2021 23:39:22 +0900 Subject: Web/Progressive_web_apps/Introduction を更新 (#1086) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting/Web/Progressive_web_apps/Introduction を統合 - 2021/03/17 時点の英語版に同期 --- files/ja/_redirects.txt | 2 +- files/ja/_wikihistory.json | 6 - .../progressive_web_apps/introduction/index.html | 66 -------- .../progressive_web_apps/introduction/index.html | 169 +++++++++++++++------ 4 files changed, 122 insertions(+), 121 deletions(-) delete mode 100644 files/ja/conflicting/web/progressive_web_apps/introduction/index.html (limited to 'files/ja') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 743088db91..56a4a572c6 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -5024,7 +5024,7 @@ /ja/docs/Web/JavaScript/Typed_arrays/Uint32Array /ja/docs/Web/JavaScript/Reference/Global_objects/Uint32Array /ja/docs/Web/JavaScript/Typed_arrays/Uint8Array /ja/docs/Web/JavaScript/Reference/Global_objects/Uint8Array /ja/docs/Web/Manifest/serviceworker /ja/docs/orphaned/Web/Manifest/serviceworker -/ja/docs/Web/Progressive_web_apps/Advantages /ja/docs/conflicting/Web/Progressive_web_apps/Introduction +/ja/docs/Web/Progressive_web_apps/Advantages /ja/docs/Web/Progressive_web_apps/Introduction /ja/docs/Web/Progressive_web_apps/Responsive /ja/docs/Web/Progressive_web_apps /ja/docs/Web/Reference /ja/docs/orphaned/Web/Reference /ja/docs/Web/Reference/API /ja/docs/orphaned/Web/Reference/API diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index ed16be476b..8d014b55fa 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -49712,12 +49712,6 @@ "manji_black" ] }, - "conflicting/Web/Progressive_web_apps/Introduction": { - "modified": "2019-04-12T06:10:43.269Z", - "contributors": [ - "Wind1808" - ] - }, "conflicting/Web/SVG/SVG_1.1_Support_in_Firefox": { "modified": "2019-03-24T00:04:52.347Z", "contributors": [ diff --git a/files/ja/conflicting/web/progressive_web_apps/introduction/index.html b/files/ja/conflicting/web/progressive_web_apps/introduction/index.html deleted file mode 100644 index fbe530de46..0000000000 --- a/files/ja/conflicting/web/progressive_web_apps/introduction/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: プログレッシブウェブアプリの利点 -slug: conflicting/Web/Progressive_web_apps/Introduction -tags: - - PWA - - Progressive web apps - - advantages - - concepts -translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications -translation_of_original: Web/Progressive_web_apps/Advantages -original_slug: Web/Progressive_web_apps/Advantages ---- -

プログレッシブウェブアプリ（Progressive web apps、PWA）には、以下のセクションにリストされているすべての利点があります。

- -

 

- -

発見可能

- -

最終的な目的は、ウェブアプリが検索エンジンでより適切に表現され、公開されやすく、カタログ化とランク付けされ、ブラウザーにメタデータを使用してそれらに特別な機能を提供することです。

- -

一部の機能は、Open Graph のような独自の技術によって特定のウェブベースのプラットフォームですでにできるようになっています。 Open Graph は、メタタグを使用して HTML の <head> で類似のメタデータを指定するための形式を提供します。

- -

ここで関連するウェブ標準はウェブアプリマニフェスト（Web app manifest）です。 これは、名前、アイコン、スプラッシュスクリーン、テーマカラーなどのアプリの機能を JSON 形式のマニフェストファイルで定義します。 これは、アプリ一覧やデバイスのホーム画面などのコンテキストで使用するためのものです。

- - - -

インストール可能

- -

アプリエクスペリエンスの中心的な部分は、ユーザーが自分のホーム画面にアプリアイコンを表示して、タップしてアプリをネイティブコンテナに開くことができることで、基盤となるプラットフォームとうまく統合されていると感じます。

- -

最新のウェブアプリは、ウェブアプリマニフェスト内で設定されたプロパティや、ホーム画面に追加と呼ばれる最新のスマートフォンのブラウザーで利用可能な機能を介して、このネイティブアプリの感じを持つことができます。

- -

リンク可能

- -

ウェブの最も強力な機能の1つは、特定の URL でアプリにリンクできることです — アプリストアは不要で、複雑なインストールプロセスも不要です。 これこそがいつものことです。

- -

ネットワーク非依存

- -

最新のウェブアプリは、ネットワークの信頼性が低い場合、または存在しない場合でも機能します。 ネットワークの独立性の背景にある基本的な考え方は、次のことができるようにすることです。

- - - -

これは技術の組み合わせによって達成されます — ページ要求を制御するサービスワーカー（オフラインでの保存など）、ネットワーク要求への応答をオフラインで保存するための Cache API（サイトアセット（静的なコンテンツ）の保存に非常に便利）、アプリケーションデータをオフラインで格納するための Web Storage や IndexedDB などのクライアント側のデータストレージ技術です。

- -

プログレッシブ

- -

最新のウェブアプリは、完全対応のブラウザーには非常にクールなエクスペリエンスを提供し、完全ではない対応のブラウザーには（あまり魅力的ではないが）許容可能なエクスペリエンスを提供するように開発できます。 プログレッシブエンハンスメント（progressive enhancement）などのベストプラクティスを使って、これを長年にわたって行ってきました。

- -

再エンゲージ可能

- -

ネイティブプラットフォームの大きな利点の1つは、アプリを見ていないときやデバイスを使用していないときでも、ユーザーが更新や新しいコンテンツに簡単に再エンゲージ（係り合い）できることです。 最新のウェブアプリでも、新しい技術を使用してこれを実行できます — ページを制御するためのサービスワーカー（Service Worker）、サービスワーカーを介してサーバーからアプリに直接更新を送信するための Web Push API 、ユーザーがブラウザーを見ていないときにユーザーとのエンゲージを援助するシステム通知を生成するための Notifications API といったもの。

- -

レスポンシブ

- -

レスポンシブウェブアプリ（Responsive web apps）では、メディアクエリやビューポートなどの技術を使用して、その UI があらゆる形状（デスクトップ、モバイル、タブレット、または次に来るものは何でも）に適合することを確認します。

- -

安全

- -

ウェブプラットフォームは、HTTPS を利用してセキュリティを念頭に置いてアプリを開発する限り、スヌーピング（覗き見）を防ぎ、コンテンツが改ざんされていないことを保証する安全な配信メカニズムを提供します。 さらに、PWA が正しい URL にあることを確認することで、PWA の本質を検証できます。 一方、アプリストア内のアプリは、多くの場合1つのもののように見えますが別のものになります（例）。

- -

 

diff --git a/files/ja/web/progressive_web_apps/introduction/index.html b/files/ja/web/progressive_web_apps/introduction/index.html index 3153a7d426..2f95c15e0b 100644 --- a/files/ja/web/progressive_web_apps/introduction/index.html +++ b/files/ja/web/progressive_web_apps/introduction/index.html @@ -2,97 +2,170 @@ title: プログレッシブウェブアプリの紹介 slug: Web/Progressive_web_apps/Introduction tags: + - Applications + - Guide + - Intermediate - Introduction - PWA - Progressive web apps + - Service Worker - js13kGames - progressive - - ウェブマニフェスト - - サービスワーカー - - プログレッシブウェブアプリ + - web manifest translation_of: Web/Progressive_web_apps/Introduction ---
{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}
-

この記事ではプログレッシブウェブアプリ (Progressive Web Apps) (PWA) を紹介し、それが何なのか、また普通のウェブアプリよりもどのような利点があるのかを説明します。

+

この記事ではプログレッシブウェブアプリ (Progressive Web Apps, PWA) を紹介し、それが何なのか、また普通のウェブアプリよりもどのような利点があるのかを説明します。

-

プログレッシブウェブアプリとは

+

プログレッシブウェブアプリとは

-

PWA は数々の特定の技術と、ウェブアプリとネイティブアプリの機能の利点を併せ持った標準パターンを使用して開発されたウェブアプリです。

+
+

注

+

「プログレッシブウェブアプリ」という用語は、公式または正式な名称ではありません。ウェブ技術だけを使って、柔軟性と適応性のあるアプリケーションを作成するというコンセプトのもと、 Google が当初使用していた略語です。

+
-

例えば、ウェブアプリはより見つけやすいものです。— アクセスするのは、アプリケーションをインストールするよりはるかに簡単で手早く、リンクを通してウェブアプリを共有することもできます。

+

PWA は数々の特定の技術と、ウェブアプリとネイティブアプリの機能の利点を併せ持った標準パターンを使用して開発されたウェブアプリです。例えば、ウェブアプリはより見つけやすいものです。アクセスするのは、アプリケーションをインストールするよりはるかに簡単で手早く、リンクを通してウェブアプリを共有することもできます。

-

一方、ネイティブアプリはオペレーティングシステムとより調和するので、ユーザーにもっと継ぎ目のない使い勝手を提供します。ネイティブアプリをインストールするとオフラインで動作し、ユーザーはブラウザーを使ってアプリに移動するのではなく、ホーム画面のアイコンから好きなアプリをタップするだけで簡単にアクセスできます。

+

一方、ネイティブアプリはオペレーティングシステムとより調和するので、ユーザーにもっとシームレスな使い勝手を提供します。ネイティブアプリをインストールするとオフラインで動作し、ユーザーはブラウザーを使ってアプリに移動するのではなく、ホーム画面のアイコンから好きなアプリをタップするだけで簡単にアクセスできます。

-

PWA によって、ネイティブアプリの利点を引き継いでウェブアプリケーションを作成できます。

+

PWA によって、ネイティブアプリの利点を引き継いだウェブアプリケーションを作成することができます。

-

PWA は新しい概念ではありません。このような考えは、今までも様々なアプローチで検討されてきました。既に、プログレッシブエンハンスメントやレスポンシブデザインを用いてモバイルに適したウェブサイトを作成することができます。オフラインでの動作やアプリケーションとしてのインストールも、数年前に Firefox OS で実現されていました。

+

これ新しい概念ではありません。このような考えは、過去にもウェブプラットフォーム上で、様々なアプローチにより何度も繰り返されてきました。プログレッシブエンハンスメントとレスポンシブデザインにより、すでにモバイルフレンドリーなウェブサイトを構築することができます。

しかし、PWA はウェブを素晴らしいものにする既存の機能を一切排除することなく、これらすべてとそれ以上の機能を提供します。

-

何がアプリを PWA にするのか

+

何がアプリを PWA にするのか

前に述べたように、PWA は単一の技術によって成り立っているわけではありません。PWA とはウェブアプリケーションを構築するための新しい哲学を表しており、いくつかの特定のパターンや API、機能を含みます。一見しただけではそのウェブアプリが PWA かを見極めることはできません。ウェブアプリは、特定の要件を満たしているか、あるいは特定の機能を実装している場合に、PWA と見なされます。例えば、オフラインで動作すること、インストールできること、簡単に同期できること、プッシュ通知を送信することができることなどです。

-

更に、アプリの完成度をパーセント値で測定するツールもあります (今の所は Lighthouse が最も有名です)。様々な技術的優位性を実装することでアプリをより進化的(progressive)にすることができ、より高い Lighthouse のスコアを得ることができます。しかし、このスコアは大まかな指標でしかありません。

+

更に、アプリの完成度をパーセント値で測定するツールもあります (今のところは Lighthouse が最も有名です)。様々な技術的優位性を実装することでアプリをより進化的 (progressive) にすることができ、より高い Lighthouse のスコアを得ることができます。しかし、このスコアは大まかな指標でしかありません。

ウェブアプリが PWA として見なされるために、いくつかの重要な原則があります。

-

取り組む価値はありますか？

+

これらの機能を提供し、{{anch("Advantages of web applications", "長所")}}をすべて活用することで、ユーザーや顧客にとって魅力的で柔軟性の高いサービスを提供することができます。

+ +

取り組む価値はありますか？

もちろん！基本的な PWA の機能を実装するのに必要な労力は比較的小さく、得られる便益は膨大です。例をあげましょう。

+

成功例

+

PWA の道を試みて、ネイティブアプリよりもウェブサイトの使い勝手の向上を選択し、その結果として大きな利益を得るに至った企業の成功例は多数あります。PWA Stats というウェブサイトはこのような便益を示すたくさんの調査を公開しています。

-

もっとも有名な成功例は、おそらく Flipkart Lite でしょう。インド最大手の e コマースサイトは 2015年に PWA へと作り直され、その結果コンバージョン数が 70%増加しました。AliExpress の PWA もまた新規ユーザーのコンバージョン率が 104%向上という、ウェブやネイティブアプリよりも良い結果となりました。このような利益の増加や PWA 転換に必要な労力が比較的少ないことを考えると、PWA の利点は明確です。

+

もっとも有名な成功例は、おそらく Flipkart Lite でしょう。インド最大手の e コマースサイトは 2015年に PWA へと作り直され、その結果コンバージョン数が 70% 増加しました。AliExpress の PWA もまた新規ユーザーのコンバージョン率が 104%向上という、ウェブやネイティブアプリよりも良い結果となりました。このような利益の増加や PWA 転換に必要な労力が比較的少ないことを考えると、PWA の利点は明確です。

-

一方では couponmoto のような初期段階にあるスタートアップも消費者エンゲージメント促進のため PWA を使い始め、企業の大小問わずユーザーの (再) エンゲージに効果的であることが示されています。

+

一方では couponmoto のような初期段階にあるスタートアップも消費者エンゲージ促進のため PWA を使い始め、企業の大小問わずユーザーの (再) エンゲージに効果的であることが示されています。

他にも例を知りたければ pwa.rocks を確認してみてください。特に hnpwa.com のページは注目に値します。これは (よくある TodoMVC アプリの代わりに) Hacker News ウェブサイトの実装例を掲載しており、様々なフロントエンドフレームワークの利用例を見ることができます。

-

PWABuilder を利用すると、PWA をオンラインで生成することもできます。

+

PWABuilder のウェブサイトを利用すると、PWA をオンラインで生成することもできます。

-

Service Worker - およびプッシュ通知 - に固有の情報を探しているならば、Service Worker Cookbook も忘れずにチェックしてください。モダンなサイトにおける Service Worker のレシピ集です。

+

サービスワーカーとおよびプッシュ通知に固有の情報を探しているならば、Service Worker Cookbook も忘れずにチェックしてください。モダンなサイトにおけるサービスワーカーのレシピ集です。

PWA のアプローチは挑戦する十分な価値があります。あなたのアプリでそれがどう動くのか、ぜひ自身で確認してみてください。

-

ブラウザーの対応

- -

前述のように、PWA は単一の API に依存するのではなく、さまざまなテクノロジーを使用して、可能な限り最高の Web エクスペリエンスを提供するという目標を達成します。
-
- PWA に必要な重要な要素は、service worker のサポートです。ありがたいことに、Service Worker は現在、デスクトップとモバイルのすべての主要なブラウザーでサポートされています。
-
- Web App Manifest や Push, Notifications, Add to Home Screen などの他の機能も幅広くサポートされています。現在、Safari では、ウェブアプリマニフェストとホーム画面に追加のサポートが制限されており、ウェブプッシュ通知はサポートされていません。ただし、他の主要なブラウザーはこれらすべての機能をサポートしています。
-
- これらの API の一部は実験的であり、ドキュメントはまだドラフトですが、Flipkart や AliExpress のような成功事例を見ると、ウェブアプリで既に PWA機能の一部を試して実装するよう確信するはずです。
-
- 何よりも、progressive enhancement rule に従う必要があります。サポートされている場合にのみ、そのような拡張機能を提供するテクノロジーを使用しますが、サポートされていない場合でもアプリの基本機能を提供します。この方法で誰もが使用できるようになりますが、最新のブラウザーを使用するユーザーは PWA機能をさらに活用できます。

- -

アプリケーションの例

- -

このシリーズの記事では、 js13kGames 2017 コンペティションの A-Frame category に提出されたゲームに関する情報をリストする、非常にシンプルなウェブサイトのソースコードを調べます。ウェブサイトの実際のコンテンツについて考える必要はありません。主なポイントは、自分のプロジェクトで PWA機能を使用する方法を学ぶことです。
-
- オンラインバージョンは mdn.github.io/pwa-examples/js13kpwa (ソースコードも参照 )で見つけることができます。これについては、次のいくつかの記事で詳しく説明します。
-
- それでは、このシリーズの第2部に移り、サンプルアプリの構造を見ていきましょう。

+

ウェブアプリケーションの利点

+ +

完全に機能するプログレッシブウェブアプリケーションは、以下のすべての利点をユーザーに提供します。

+ +

発見可能性

+ +

最終的な目的は、ウェブアプリが検索エンジンでより適切に表現され、公開されやすく、カタログ化とランク付けされ、ブラウザーにメタデータを使用してそれらに特別な機能を提供することです。

+ +

一部の機能は、Open Graph のような独自の技術によって特定のウェブベースのプラットフォームですでにできるようになっています。これは {{Glossary("HTML")}} の {{HTMLElement("head")}} ブロック内で {{HTMLElement("meta")}} タグを使って同様のメタデータを指定するフォーマットを提供しています。

+ +

ここで関連するウェブ標準はウェブアプリマニフェスト（Web app manifest）です。 これは、名前、アイコン、スプラッシュ画面、テーマカラーなどのアプリの機能を {{Glossary("JSON")}} 形式のマニフェストファイルで定義します。 これは、アプリ一覧や端末のホーム画面などの場面で使用するためのものです。

+ +

インストール可能性

+ +

+ +

ウェブアプリの使い勝手の中心となるのは、ユーザーがホーム画面にアプリのアイコンを表示し、タップしてアプリを開くことができるネイティブコンテナーであり、基盤となるプラットフォームとうまく統合されていることです。

+ +

最近のウェブアプリは、ウェブアプリマニフェストに設定されたプロパティや、最近のスマートフォンブラウザーで利用できるウェブアプリのインストールと呼ばれる機能によって、このようなネイティブアプリの感覚を持つことができます。

+ +

リンク可能性

+ +

+ +

ウェブの最も強力な機能の 1 つは、特定の URL でアプリにリンクできることです。アプリストアは不要で、複雑なインストールプロセスも不要です。これは今までもそうでした。

+ +

ネットワーク非依存性

+ +

+ +

最新のウェブアプリケーションは、ネットワークの信頼性が低い、あるいは存在しない場合でも動作します。ネットワーク非依存性の基本的な考え方は、以下の通りです。

+ + + +

これは、ページリクエストを制御するサービスワーカー (オフラインでの保存など)、ネットワークリクエストに対するレスポンスをオフラインで保存する Cache API (サイトの資産を保存するのにとても便利)、アプリケーションデータをオフラインで保存するウェブストレージや IndexedDB などのクライアントサイドのデータストレージ技術など、さまざまな技術を組み合わせて実現されています。

+ +

プログレッシブエンハンスメントの対応

+ +

+ +

最近のウェブアプリは、十分な機能を備えたブラウザーでは優れた使い勝手を、機能の劣るブラウザーでは (見劣りするものの) 許容できる使い勝手を提供するように開発することができます。私たちは、プログレッシブエンハンスメントなどのベストプラクティスを用いて、何年も前からこれを行ってきました。プログレッシブエンハンスメントを使用することで、 PWA はクロスブラウザーに対応します。つまり開発者は、 PWA の一部の機能や技術の実装が、ブラウザーの実装ごとに異なることを考慮する必要があります。

+ +

再エンゲージ可能性

+ +

+ +

ネイティブプラットフォームの大きな利点は、ユーザーがアプリを見ていない時や端末を使用していない時でも、アップデートや新しいコンテンツによってユーザーを簡単に再エンゲージできることです。最近のウェブアプリでは、ページを制御するサービスワーカー、サーバーからサービスワーカーを介してアプリに直接アップデートを送信する Web Push API、システム通知を生成する Notifications API などの新しい技術を使用することで、このようなことが可能になっていますが、ユーザーがウェブブラウザーを積極的に使用していないときにも、ユーザーの関心を引くことができます。

+ +

レスポンシブ性

+ +

+ +

レスポンシブウェブアプリでは、メディアクエリーやビューポートなどの技術を用いて、デスクトップ、モバイル、タブレットなど、あらゆるフォームファクターに対応する UI を実現しています。

+ +

安全性

+ +

+ +

Facebook Messengerを探すために「Messenger」と検索すると、膨大な数の結果が表示されるスクリーンショット。どれが正しいのでしょうか？{{Glossary("HTTPS")}} を利用し、セキュリティを考慮してアプリを開発していれば、ウェブプラットフォームは、コンテンツが改ざんされていないことを確認すると同時に、盗み見されることを防ぐ安全な配信メカニズムを提供します。

+ +

また、アプリの URL がサイトのドメインと一致するため、ユーザーは正しいアプリをインストールしているかどうかを簡単に確認することができます。これは、アプリストアのアプリとは大きく異なります。アプリストアには似たような名前のアプリがいくつもあり、中には自分のサイトをベースにしたものもあるため、混乱を招くだけです。ウェブアプリは、そのような混乱を解消し、ユーザーに最高の使い勝手を提供します。

+ +

ブラウザーの対応

+ +

前述のように、PWA は単一の API に依存するのではなく、さまざまなテクノロジーを使用して、可能な限り最高のウェブの操作性を提供するという目標を達成します。

+ +

PWA に必要な重要な要素は、サービスワーカーのサポートです。ありがたいことに、サービスワーカーは現在、デスクトップとモバイルのすべての主要なブラウザーでサポートされています。

+ +

ウェブアプリマニフェストやプッシュ通知、お知らせ、ホーム画面に追加などの他の機能も幅広く対応されています。現在、Safari では、ウェブアプリマニフェストとホーム画面に追加の対応が制限されており、ウェブプッシュ通知には対応していません。ただし、他の主要なブラウザーはこれらすべての機能に対応しています。

+ +

特に、プログレッシブエンハンスメントのルールに従うべきです。つまり、利用可能な場合はアプリの外観や実用性を向上させる技術を使用し、それらの機能が利用できない場合はアプリの基本的な機能を提供します。信頼性の高いウェブサイトを優れたパフォーマンスで提供することは、これらの機能強化を使用することの結果であり、これは、より良い慣行に従ったウェブアプリを構築することを意味します。このようにして、誰もがアプリを使用できるようになりますが、モダンブラウザーを使用している人は、 PWA 機能の恩恵をさらに受けることができます。

+ +

アプリケーションの例

+ +

このシリーズの記事では、 js13kGames 2017 競技会の A-Frame category に提出されたゲームに関する情報をリストする、非常にシンプルなウェブサイトのソースコードを調べます。ウェブサイトの実際のコンテンツについて考える必要はありません。主なポイントは、自分のプロジェクトで PWA 機能を使用する方法を学ぶことです。

+ +

オンラインでは mdn.github.io/pwa-examples/js13kpwa (ソースコードも参照 ) で見つけることができます。これについては、次のいくつかの記事で詳しく説明します。

+ +

それでは、このシリーズの第 2 部に移り、サンプルアプリの構造を見ていきましょう。

{{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}

-- cgit v1.2.3-54-g00ecf