Skip to content

Commit

Permalink
変換後処理
Browse files Browse the repository at this point in the history
  • Loading branch information
mfuji09 committed Aug 21, 2022
1 parent 71f00fe commit b0543f8
Show file tree
Hide file tree
Showing 6 changed files with 17 additions and 17 deletions.
16 changes: 8 additions & 8 deletions files/ja/web/progressive_web_apps/add_to_home_screen/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,23 @@ A2HS を説明するために最小構成のサンプルページを作成しま

もし Android 版 Firefox を使用可能であれば、それを使用して `https://mdn.github.io/pwa-examples/a2hs/` にあるデモに移動してみてください。キツネの写真を見ることができますが、もっと重要なのは、その中にプラス (+) アイコンを持つ "ホーム " のアイコンが表示されることです。 — これは、必要な機能が所定の場所にある任意のサイトのために表示される "ホーム画面に追加 "アイコンです。

![](https://mdn.mozillademos.org/files/15762/add-to-home-screen-icon.png)
![](add-to-home-screen-icon.png)

このボタンをタップすると、このページをホーム画面に追加するかどうかの確認バナーが表示されます。ここで大きな + _ADD TO HOME SCREEN_ を選択するとウェブアプリがホーム画面に追加されます。

![](https://mdn.mozillademos.org/files/15772/fx-a2hs-banner.png)
![](fx-a2hs-banner.png)

もし Chrome をお使いの場合は操作方法がやや異なります。 Chrome では、ページを読み込むと自動的にホーム画面に追加するかどうかのポップアップが現れます。

![](https://mdn.mozillademos.org/files/15771/chrome-a2hs-banner.png)
![](chrome-a2hs-banner.png)

> **Note:** ****: Chrome でもバナーを表示したい場合は [Web App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners/) の記事が役立ちます。
> **Note:** Chrome でもバナーを表示したい場合は [Web App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners/) の記事が役立ちます。
このポップアップで「追加しない」を選んでしまったけれど、やっぱりインストールを行ないたい場合は Chrome のメニューを開いて「ホーム画面に追加」を押せば追加することができます。

ホーム画面に追加したウェブアプリは、どのブラウザーをお使いの場合でもフルネームではなく短縮名のほうで表示されます。これはほかのネイティブアプリの挙動と同じです。

![](https://mdn.mozillademos.org/files/15770/a2hs-on-home-screen.png)
![](a2hs-on-home-screen.png)

このアイコンをタップすると開きますが、全画面アプリとして開き、その周囲のブラウザー UI は表示されません。

Expand All @@ -63,7 +63,7 @@ A2HS を説明するために最小構成のサンプルページを作成しま

マニフェストファイルは JSON 形式で書かれ、ウェブアプリ内のどこかに設置される必要があります (置き場所はルートディレクトリにするのがよいです)。またファイルの拡張子は `.webmanifest` にします。ここでは `manifest.webmanifest` といファイル名にしました。このファイルにはウェブアプリについての情報やどのような挙動をするのかについての設定が記されています。

> **Note:** ****: 拡張子`.webmanifest` は W3C の[WebAppManifest についてのドキュメント](/ja/docs/)の中の [Media type registration](https://w3c.github.io/manifest/#media-type-registration) の節の中で定義されています。ただ、多くの場合ブラウザーは拡張子 `.json` マニフェストファイルをサポートしています。
> **Note:** 拡張子`.webmanifest` は W3C の[WebAppManifest についてのドキュメント](/ja/docs/)の中の [Media type registration](https://w3c.github.io/manifest/#media-type-registration) の節の中で定義されています。ただ、多くの場合ブラウザーは拡張子 `.json` マニフェストファイルをサポートしています。
A2HS に必要なフィールドは次の通りです。

Expand Down Expand Up @@ -196,11 +196,11 @@ The click handler contains the following steps:

So when the button is clicked, the install prompt appears.

![](https://mdn.mozillademos.org/files/16281/chrome-desktop-a2hs-banner.png)
![](chrome-desktop-a2hs-banner.png)

If the user selects _Install_, the app is installed (available as standalone desktop app), and the Install button no longer shows (the `onbeforeinstallprompt` event no longer fires if the app is already installed). When you open the app, it will appear in its own window:

![](https://mdn.mozillademos.org/files/16280/a2hs-installed-desktop.png)
![](a2hs-installed-desktop.png)

If the user selects _Cancel_, the state of the app goes back to how it was before the button was clicked.

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/progressive_web_apps/app_structure/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Streams API を使用すると、開発者はサーバーからのデータス

[js13kPWA](https://mdn.github.io/pwa-examples/js13kpwa/) ウェブサイトの構造は非常に単純です。単一の HTML ファイル ([index.html](https://github.com/mdn/pwa-examples/blob/master/js13kpwa/index.html)) と基本的な CSS のスタイル付け ([style.css](https://github.com/mdn/pwa-examples/blob/master/js13kpwa/style.css))、いくつかの画像、スクリプト、およびフォントで構成されています。 フォルダー構造は次のようになります。

![js13kPWA のフォルダー構成](https://mdn.mozillademos.org/files/15925/js13kpwa-directory.png)
![js13kPWA のフォルダー構成](js13kpwa-directory.png)

### HTML

Expand Down
10 changes: 5 additions & 5 deletions files/ja/web/progressive_web_apps/installable_pwas/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,27 +87,27 @@ translation_of: Web/Progressive_web_apps/Installable_PWAs

ユーザーがサポートしているモバイルブラウザーで PWA にアクセスすると、アプリを PWA としてインストールすることが可能であることを示す通知 (バナーやダイアログボックスなど) が表示されます。

![js13kPWA のホーム画面に追加のポップアップ。](https://mdn.mozillademos.org/files/15928/js13kpwa-icon.png)
![js13kPWA のホーム画面に追加のポップアップ。](js13kpwa-icon.png)

ユーザーがインストールを実行する意志を示したら、インストールバナーが表示されます。 そのバナーは、マニフェストファイルからの情報に基づいて、ブラウザーによって自動的に作成されます。例えば、プロンプトにはアプリの名前とアイコンが含まれています。

![js13kPWA のインストールバナー。](https://mdn.mozillademos.org/files/15927/js13kpwa-banner.png)
![js13kPWA のインストールバナー。](js13kpwa-banner.png)

ユーザーがボタンをクリックすると、アプリがどのように表示されるかを示し、間違いなくアプリを追加するかどうかをユーザーに選択させる最後のステップがあります。

![js13kPWA のホーム画面に追加のポップアップ。](https://mdn.mozillademos.org/files/15926/js13kpwa-add.png)
![js13kPWA のホーム画面に追加のポップアップ。](js13kpwa-add.png)

確認すると、アプリがホーム画面にインストールされます。

![](https://mdn.mozillademos.org/files/15834/js13kpwa-installed.png)
![](js13kpwa-installed.png)

これでユーザーは、端末上の他のアプリケーションと同じようにウェブアプリを起動して使用することができるようになりました。端末やオペレーティングシステムによっては、ウェブアプリのアイコンにウェブアプリであることを示す小さなアイコンが付けられている場合があります。例えば、上のスクリーンショットでは、アプリには小さな Firefox のアイコンが付いており、 Firefox ランタイムを使用するウェブアプリであることを示しています。

### スプラッシュ画面

一部のブラウザーでは、マニフェストの情報からスプラッシュ画面も生成されます。 これは、 PWA が起動され読み込まれている間に表示されます。

![](https://mdn.mozillademos.org/files/15835/js13kpwa-splash.png)
![](js13kpwa-splash.png)

この画面の作成には、アイコンとテーマカラーと背景色が使用されます。

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/progressive_web_apps/introduction/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ translation_of: Web/Progressive_web_apps/Introduction

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

> **Note:** ### 注「プログレッシブウェブアプリ」という用語は、公式または正式な名称ではありません。ウェブ技術だけを使って、柔軟性と適応性のあるアプリケーションを作成するというコンセプトのもと、 Google が当初使用していた略語です。
> **Note:** 「プログレッシブウェブアプリ」という用語は、公式または正式な名称ではありません。ウェブ技術だけを使って、柔軟性と適応性のあるアプリケーションを作成するというコンセプトのもと、 Google が当初使用していた略語です。
PWA は数々の特定の技術と、ウェブアプリとネイティブアプリの機能の利点を併せ持った標準パターンを使用して開発されたウェブアプリです。例えば、ウェブアプリはより見つけやすいものです。アクセスするのは、アプリケーションをインストールするよりはるかに簡単で手早く、リンクを通してウェブアプリを共有することもできます。

Expand Down
2 changes: 1 addition & 1 deletion files/ja/web/progressive_web_apps/loading/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ imagesToLoad.forEach((img) => {

プロセス全体を視覚的により魅力的にするために、プレースホルダーは CSS で、ぼかしています。

![js13kPWA アプリのプレースホルダー画像のスクリーンショット](https://mdn.mozillademos.org/files/15992/js13kpwa-placeholders.png)
![js13kPWA アプリのプレースホルダー画像のスクリーンショット](js13kpwa-placeholders.png)

最初にぼかしを付けて画像をレンダリングするので、シャープな画像に遷移することができます。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ button.addEventListener('click', function(e) {

これは、次のようにオペレーティングシステム独自の通知サービスを使ったポップアップを表示します。

![Notification of js13kPWA.](https://mdn.mozillademos.org/files/15930/js13kpwa-notification.png)
![Notification of js13kPWA.](js13kpwa-notification.png)

ユーザーが通知を受け取ることを確認すると、アプリはそれらを表示できます。 ユーザー操作の結果は、デフォルト(`default`)、許可(`granted`)、または拒否(`denied`)になります。 ユーザーが後で選択する場合はデフォルトの選択肢が選択され、ユーザーがそれぞれ「はい」または「いいえ」をクリックすると他の 2 つが設定されます。

Expand Down

0 comments on commit b0543f8

Please sign in to comment.