From ad48e1045676331d18cb9d9a04dcc2a7f1233ebb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 13 Jan 2022 01:05:32 +0900 Subject: 2021/12/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/manifest/index.md | 96 ++++++++++++++++++------------------------ 1 file changed, 42 insertions(+), 54 deletions(-) (limited to 'files') diff --git a/files/ja/web/manifest/index.md b/files/ja/web/manifest/index.md index c4964ce6b0..8d3e36d2cc 100644 --- a/files/ja/web/manifest/index.md +++ b/files/ja/web/manifest/index.md @@ -2,43 +2,37 @@ title: ウェブアプリマニフェスト slug: Web/Manifest tags: - - App - - PWA - - Reference - アプリ - - ウェブ - マニフェスト + - PWA + - プログレッシブウェブアプリ - リファレンス + - ウェブ translation_of: Web/Manifest --- -
{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}
- -
{{SeeCompatTable}}
+{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}} -

ウェブアプリマニフェストは、プログレッシブウェブアプリ (PWA) と呼ばれる一連のウェブ技術の一部であり、アプリストアを通さずに端末のホーム画面にインストールすることができるものです。単純なホームスクリーンリンクやブックマークを持つ通常のウェブアプリとは異なり、 PWA は事前にダウンロードしてオフラインでも動作するだけでなく、通常の Web API を使用することもできます。

+**ウェブアプリマニフェスト**は、[プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps) (PWA) と呼ばれる一連のウェブ技術の一部であり、アプリストアを通さずに端末のホーム画面にインストールすることができるものです。単純なホーム画面リンクやブックマークを持つ通常のウェブアプリとは異なり、 PWA は事前にダウンロードしてオフラインでも動作するだけでなく、通常の [Web API](/ja/docs/Web/API) を使用することもできます。 -

ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる (例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの) ために必要なの情報を {{Glossary("JSON")}} テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。

+ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる（例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの）ために必要なの情報を {{Glossary("JSON")}} テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。 - +## メンバー -

メンバー

+ウェブマニフェストには、以下のキーを設定することができます。それぞれのリンクをクリックすると詳細情報を見ることができます。 -

ウェブマニフェストは以下のキーを含むことができます。それぞれのリンクをクリックすると詳細情報を見ることができます。

+{{ListSubpages("/ja/docs/Web/Manifest")}} -

{{ListSubpages("/ja/docs/Web/Manifest")}}

+## マニフェストの例 -

マニフェストの例

- -
{
+```json
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
   "name": "HackerWeb",
   "short_name": "HackerWeb",
   "start_url": ".",
   "display": "standalone",
   "background_color": "#fff",
-  "description": "A simply readable Hacker News app.",
+  "description": "読むことができるハッカーニュースアプリです。",
   "icons": [{
     "src": "images/touch/homescreen48.png",
     "sizes": "48x48",
@@ -68,49 +62,43 @@ translation_of: Web/Manifest
     "platform": "play",
     "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
   }]
-}
+} +``` + +## マニフェストの展開< + +ウェブアプリマニフェストは、文書の {{HTMLElement("head")}} 内の {{HTMLElement("link")}} 要素を使用して HTML ページから展開されます。 + +```html + +``` - +`.webmanifest` の拡張子が仕様書の [Media type registration](https://w3c.github.io/manifest/#media-type-registration) の節で指定されています（マニフェストファイルのレスポンスは `Content-Type: application/manifest+json` を返してください）。ブラウザーは一般に `.json` (`Content-Type: application/json`) のような他の適切な拡張子でもマニフェストに対応します。 -

ウェブアプリマニフェストは、文書の {{HTMLElement("head")}} 内にある {{HTMLElement("link")}} 要素を使用して HTML ページから展開されます。

+マニフェストへのアクセスに資格情報が必要な場合は、マニフェストファイルが現在のページと同じオリジンにあったとしても、 [`crossorigin`](/ja/docs/Web/HTML/Attributes/crossorigin) 属性を `use-credentials` に設定する必要があります。 -
<link rel="manifest" href="/manifest.webmanifest">
+```html + +``` -
-

注: .webmanifest の拡張子が仕様書の Media type registration の節で指定されています (マニフェストファイルのレスポンスは Content-Type: application/manifest+json を返してください)。ブラウザーは一般に .json (Content-Type: application/json) のような他の適切な拡張子でもマニフェストに対応します。

-
+## スプラッシュ画面 -
-

注: マニフェストのアクセスに資格情報が必要な場合は、マニフェストファイルが現在のページと同じオリジンにあったとしても、 {{domxref("HTML/CORS_settings_attributes", "crossorigin")}} 属性を use-credentials に設定する必要があります。

-
+一部のブラウザー（例えば Chrome 47 以降）では、ホーム画面からサイトが起動されるとスプラッシュ画面が表示されます。スプラッシュ画面はウェブアプリマニフェストのプロパティから、具体的には以下のように自動生成されます。 -

スプラッシュ画面

+- [`name`](/ja/docs/Web/Manifest/name) +- [`background_color`](/ja/docs/Web/Manifest/background_color) +- [`icons`](/ja/docs/Web/Manifest/icons) の配列中のアイコンで、端末の 128dpi に最も近いもの。 -

Chrome 47 以降では、ホーム画面からサイトが起動されるとスプラッシュ画面が表示されます。スプラッシュ画面はウェブアプリマニフェストのプロパティから、具体的には以下のように自動生成されます。

+## 仕様書 - +| 仕様書 | +| -------------------------------------------------- | +| [Web App Manifest](https://w3c.github.io/manifest) | -

仕様書

+## ブラウザーの互換性 - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Manifest")}}{{Spec2("Manifest")}}初回定義
+{{Compat}} -

ブラウザーの互換性

+## 関連情報 -

{{Compat("html.manifest")}}

+- [プログレッシブウェブアプリ (PWA)](/ja/docs/Web/Progressive_web_apps) -- cgit v1.2.3-54-g00ecf