From 5df2f8890322c46fc10accad06753d9e896a909b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 14 Jul 2021 00:11:29 +0900 Subject: Web/Progressive_web_apps を更新 (#1407) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版は英語版で削除された記事であるため削除 - 2021/05/07 時点の英語版に同期 --- files/ja/_redirects.txt | 2 +- files/ja/_wikihistory.json | 8 --- .../web/progressive_web_apps/index.html | 78 ---------------------- files/ja/web/progressive_web_apps/index.html | 50 ++++++-------- 4 files changed, 23 insertions(+), 115 deletions(-) delete mode 100644 files/ja/conflicting/web/progressive_web_apps/index.html diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index c2b4efc414..bb4d6f9353 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -5245,7 +5245,7 @@ /ja/docs/Web_Development/Historical_artifacts_to_avoid /ja/docs/conflicting/Learn/HTML/Introduction_to_HTML /ja/docs/Web_Development/Introduction_to_Web_development /ja/docs/conflicting/Web/Guide/Introduction_to_Web_development /ja/docs/Web_Development/Mobile /ja/docs/Web/Guide/Mobile -/ja/docs/Web_Development/Mobile/Responsive_design /ja/docs/conflicting/Web/Progressive_web_apps +/ja/docs/Web_Development/Mobile/Responsive_design /ja/docs/Web/Progressive_web_apps /ja/docs/Web_Development/Writing_forward-compatible_websites /ja/docs/Web/Guide/Writing_forward-compatible_websites /ja/docs/Whitespace_in_the_DOM /ja/docs/Web/API/Document_Object_Model/Whitespace /ja/docs/XForms:API_Reference /ja/docs/XForms/API_Reference diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 0bc732a8d0..d717c7de3d 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -48702,14 +48702,6 @@ "Potappo" ] }, - "conflicting/Web/Progressive_web_apps": { - "modified": "2019-04-10T11:40:04.877Z", - "contributors": [ - "Wind1808", - "dskmori", - "manji_black" - ] - }, "conflicting/tools/Keyboard_shortcuts": { "modified": "2020-07-16T22:34:03.446Z", "contributors": [ diff --git a/files/ja/conflicting/web/progressive_web_apps/index.html b/files/ja/conflicting/web/progressive_web_apps/index.html deleted file mode 100644 index c0c8560dda..0000000000 --- a/files/ja/conflicting/web/progressive_web_apps/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: レスポンシブデザイン -slug: conflicting/Web/Progressive_web_apps -tags: - - Apps - - Mobile - - Responsive Design - - Web Development -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Guide/Responsive_design -original_slug: Web_Development/Mobile/Responsive_design ---- -

モバイル向けとデスクトップ向けの Web サイトの開発に対する 別々のサイト 手法に関連する問題に対する反応として、比較的新しい (実際は とても古い) アイディアが人気を集め始めています。ユーザーエージェントでの判別とは別れを告げ、かわりにクライアント側のブラウザの機能でページを対応させましょう。この手法は Ethan Marcotte のブログ記事 A List Apart で紹介され、レスポンシブ Web デザイン として知られるようになりました。分離したサイト開発手法と同様に、レスポンシブ Web デザインにも短所があります。

- -

長所

- -

最初は、モバイルサイトを作成するための手法として提案されたものではありませんでしたが、分離したモバイルサイトの代わりにレスポンシブデザインは最近、モバイル・フレンドリーに対する第一歩として多くの注目を浴び始めました。

- -
    -
  1. デバイスごとに異なる Web サイトをメンテナンスする必要がなくなるため、時間と費用を削減できます。
    2. -
  2. レスポンシブデザインは、1 つの URL だけで、すべてのデバイスのページを表示できます。
    3. -
  3. モバイルとデスクトップの Web ページで 1 つの URL を使用しているため、ソーシャルシェアの統計 (Facebook の「いいね」、Twitter のツイート数、Google plus の +1) が分離されません。
    4. -
  4. レスポンシブデザインはユーザーエージェントを気に掛ける必要がありません。
    5. -
- -

この手法には本当に素晴らしい側面があります。ユーザーエージェント判別によらないため、サイトを分離する手法よりも柔軟性が高く、古くなりにくい点です。単純なサイトに対しては、他の選択肢よりも改修やメンテナンスが簡単です。

- -

短所

- -

この手法に何も制限がないわけではありません。コンテンツがクライアント側の JavaScript で処理されるため、変更は最小限となることが推奨されます。一般に、同じ DOM を動作させるために、別々に 2 つの JavaScript を記述すると、劇的に悪化することも改善することもあります。これが、Web アプリケーションがこの手法に適応していない大きな理由です。

- -

もし フレキシブルなレイアウト に対応していなければ、既存のサイトをレスポンシブデザインにするには、スタイルシートも書き直す必要があります。これは不幸中の幸いと言えます。レイアウトをレスポンシブデザインに対応することは、CSS を近代化しきれいにする良い機会となるからです。

- -

最後に、スクリプトやスタイルのコードを追加するため、分離サイト手法よりもパフォーマンスが悪化するかもしれません。これに対する回避策はありません。スクリプトやスタイルコードをリファクタリングして、根気強くバイト数を削減するしかありません。

- -

この選択肢を選ぶとき

- -

teixido_responsive-300x177.png上述したように、コンテンツの変更は難しいため、この手法を取り扱うとき、複雑なコードを追加せずにユーザに対してモバイルデバイスで異なる体験を与えることはできません。つまり、デスクトップとモバイルのサイトがとても似ているのであれば、この手法は素晴らしい選択肢となります。文章中心でユースケースが複数のデバイスにまたがっているのサイトによく適しています。以下に示す例が、すべてブログやポートフォリオであることに気づくでしょう！

- -

用例

- -

分離サイト手法ほどの人気はありませんが、日に日により多くの Web サイトがこの技術を採用し始めています。幸運にも、すべてのコードはクライアント側にあるため、この手法がサイトで技術的にどのように実装されているか見たければ、サイトを訪問して、“ページのソースを表示” をクリックしてください。

- - - -

比較的若い手法であるにもかかわらず、既にいくつかベストプラクティスが現れています。例えば、サイトを一からデザインするのに、この選択肢を使おうと考えているなら、モバイルには初めから制約があるため、まず小さい画面で作成する のがよいでしょう。また、メディアクエリで既存のサイトの要素を隠す代わりに、進歩した機能をスタイルに使用することもよいことです。この方法は、メディアクエリをサポートしてない古いブラウザで正しくレイアウトすることができます。この手法のメリットについての素晴らしいプレゼンテーションが ここ から利用できます。

- -

モバイル Web 開発手法

- -

以下の記事は、モバイルプラットフォーム向け開発の背景や手法です。

- - - -

関連文書

- - - -
-

元の文書

- -

Mozilla Webdev ブログの "Approaches to Mobile Web Development Part 3 - Responsive Design" の記事として 2011 年 5 月 27 日に Jason Grlicky によって発行されました。

-
- -

 

diff --git a/files/ja/web/progressive_web_apps/index.html b/files/ja/web/progressive_web_apps/index.html index 9c729f609f..c02a19b5cc 100644 --- a/files/ja/web/progressive_web_apps/index.html +++ b/files/ja/web/progressive_web_apps/index.html @@ -1,18 +1,21 @@ --- -title: プログレッシブウェブアプリ +title: プログレッシブウェブアプリ (PWA) slug: Web/Progressive_web_apps tags: + - App + - Application - Apps - - Modern web apps - PWA - Progressive web apps + - Web app + - Web applications - アプリ - プログレッシブウェブアプリ translation_of: Web/Progressive_web_apps ---
{{draft}}
-

PWA community logoプログレッシブウェブアプリ (Progressive web apps) (PWA) は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。プログレッシブウェブアプリは正式な標準ではありませんが、有用なデザインパターンです。 PWA は、特定のウェブ技術や技法の使用を含む、一連のアプリケーション属性を包含しているという点で AJAX や他の同様のパターンに似ていると考えることができます。この一連の文書では、これについて知るために必要なすべてをお伝えします。

+

PWA community logoプログレッシブウェブアプリ (Progressive web apps, PWA) は、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。プログレッシブウェブアプリは正式な標準ではありませんが、有用なデザインパターンです。 PWA は、特定のウェブ技術や技法の使用を含む、一連のアプリケーション属性を包含しているという点で AJAX や他の同様のパターンに似ていると考えることができます。この一連の文書では、これについて知るために必要なすべてをお伝えします。

ウェブアプリを PWA と呼ぶには、技術的に言えば、 安全なコンテキスト ({{Glossary("HTTPS")}})、1つ以上のサービスワーカー、マニフェストファイルを持つべきです。

@@ -25,23 +28,23 @@ translation_of: Web/Progressive_web_apps
アプリがユーザーにどのように表示されるかを制御し、プログレッシブウェブアプリを確実に発見できるようにする {{Glossary("JSON")}} ファイルです。アプリの名前、開始 URL、アイコン、その他ウェブサイトをアプリのような形式に変換するために必要なすべての詳細が記述されています。
-

PWA の利点

+

PWA の利点

-

PWA は発見でき、インストールでき、リンクでき、ネットワークに依存せず、プログレッシブで、再エンゲージでき、レスポンシブで、安全です。これらが何を意味するのかについては、プログレッシブウェブアプリの利点をお読みください。

+

PWA は発見でき、インストールでき、リンクでき、ネットワークに依存せず、プログレッシブで、再エンゲージでき、レスポンシブで、安全です。これらが何を意味するのかについては、プログレッシブウェブアプリの利点をお読みください。

PWA の実装方法については、 PWA 開発者ガイドをお読みください。

-

ドキュメント

+

ドキュメント

<-- 以下のものは一時的な自動生成リストで、すぐに置き換えられます -->

{{LandingPageListSubpages}}

-
+

ここから下は全て旧バージョンのままで、他のコンテンツの全面見直しに合わせて刷新していきます。

-

基本的な PWA のガイド

+

基本的な PWA のガイド

以下のガイドは PWA を実装するのに必要なことを、単純な例を実行し、すべての部分がどのように動作するかを示します。

@@ -54,26 +57,22 @@ translation_of: Web/Progressive_web_apps
  • プログレッシブ読み込み
    • -
    -
    -

    技術ガイド

    +

    技術ガイド

    -
    -
    -

    ツール

    +

    ツール

    • localForage — クライアントサイドのデータストレージを簡単に扱えるようにする素晴らしいシンプルな JavaScript ライブラリ、これは既定で IndexedDB を使用し、必要に応じて Web SQL/Web Storage にフォールバックする。
      • @@ -83,22 +82,17 @@ translation_of: Web/Progressive_web_apps
    • workbox — 気持ち的には、より進んだキャッシングの手法と簡単なプリキャッシュを有するsw-precacheの後継者。
    • upup — あなたのサイトが常にあなたのユーザーのために存在するようにする小さなスクリプト。
    • The service worker cookbook — 一連の素晴らしい Service Worker/プッシュレシピ、オフラインアプリケーションの実装方法を紹介しているが、より多くの機能を持っている。
      • -
    • PWA VS Code extension - VisualStudio コード環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。
      • +
    • PWA VS Code extension - VS Code 環境でプログレッシブウェブアプリを構築するために必要な、すべての重要なコードスニペットのコレクションです。
    -
    -