From be1e835af9c32c322e36e9fd14c46b6a68f70102 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Sun, 2 Jul 2023 04:53:18 +0200 Subject: [PATCH] [ja] sync translated content (#13973) * ja: sync translated content * Update _redirects.txt * Delete index.md * Delete index.md * Delete index.md * Delete index.md * Update _redirects.txt * Update _redirects.txt * Update _wikihistory.json * Delete index.md --------- Co-authored-by: Masahiro FUJIMOTO --- files/ja/_redirects.txt | 25 +- files/ja/_wikihistory.json | 86 +---- .../css/howto/create_fancy_boxes/index.md | 4 +- .../index.md | 5 +- .../api/installevent/activeworker/index.md | 33 -- files/ja/web/guide/ajax/community/index.md | 17 - .../web/guide/ajax/getting_started/index.md | 350 ------------------ .../ja/web/http/link_prefetching_faq/index.md | 126 ------- .../guides/structural_overview/index.md | 307 --------------- .../js13kgames/{introduction => }/index.md | 6 +- 10 files changed, 38 insertions(+), 921 deletions(-) rename files/ja/{web/guide/ajax => mozilla/firefox/releases/3}/wai_aria_live_regions_api_support/index.md (99%) delete mode 100644 files/ja/web/api/installevent/activeworker/index.md delete mode 100644 files/ja/web/guide/ajax/community/index.md delete mode 100644 files/ja/web/guide/ajax/getting_started/index.md delete mode 100644 files/ja/web/http/link_prefetching_faq/index.md delete mode 100644 files/ja/web/progressive_web_apps/guides/structural_overview/index.md rename files/ja/web/progressive_web_apps/tutorials/js13kgames/{introduction => }/index.md (98%) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 63fc00c77caa50..5505d21a9d8233 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -5,10 +5,10 @@ # # FROM-URL TO-URL /ja/docs/AJAX /ja/docs/Web/Guide/AJAX -/ja/docs/AJAX/Community /ja/docs/Web/Guide/AJAX/Community -/ja/docs/AJAX/Getting_Started /ja/docs/Web/Guide/AJAX/Getting_Started -/ja/docs/AJAX:Community /ja/docs/Web/Guide/AJAX/Community -/ja/docs/AJAX:Getting_Started /ja/docs/Web/Guide/AJAX/Getting_Started +/ja/docs/AJAX/Community /ja/docs/Web/Guide/AJAX +/ja/docs/AJAX/Getting_Started /ja/docs/Web/Guide/AJAX +/ja/docs/AJAX:Community /ja/docs/Web/Guide/AJAX +/ja/docs/AJAX:Getting_Started /ja/docs/Web/Guide/AJAX /ja/docs/API /ja/docs/Web/API /ja/docs/API/Document /ja/docs/Web/API/Document /ja/docs/API/Document/Document /ja/docs/Web/API/Document/Document @@ -2136,7 +2136,7 @@ /ja/docs/Learn/Performance/Populating_the_page:_how_browsers_work /ja/docs/Web/Performance/How_browsers_work /ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async /ja/docs/Learn/Server-side/Express_Nodejs/Displaying_data /ja/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry /ja/docs/orphaned/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry -/ja/docs/Link_prefetching_FAQ /ja/docs/Web/HTTP/Link_prefetching_FAQ +/ja/docs/Link_prefetching_FAQ /ja/docs/Glossary/Prefetch /ja/docs/Localization /ja/docs/Glossary/Localization /ja/docs/Localizing_extension_descriptions /ja/docs/orphaned/Localizing_extension_descriptions /ja/docs/MDN/About /ja/docs/MDN/Writing_guidelines @@ -2913,6 +2913,7 @@ /ja/docs/Web/API/Index /ja/docs/Web/API /ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ja/docs/Web/API/IndexedDB_API/Basic_Terminology /ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria /ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria +/ja/docs/Web/API/InstallEvent/activeWorker /ja/docs/Web/API/InstallEvent /ja/docs/Web/API/LocalFileSystem /ja/docs/Web/API/File_and_Directory_Entries_API /ja/docs/Web/API/LocalFileSystemSync /ja/docs/Web/API/File_and_Directory_Entries_API /ja/docs/Web/API/Location/password /ja/docs/Web/API/Location @@ -3475,7 +3476,7 @@ /ja/docs/Web/Apps/Progressive/Add_to_home_screen /ja/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable /ja/docs/Web/Apps/Progressive/App_structure /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure /ja/docs/Web/Apps/Progressive/Installable_PWAs /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs -/ja/docs/Web/Apps/Progressive/Introduction /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Introduction +/ja/docs/Web/Apps/Progressive/Introduction /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames /ja/docs/Web/Apps/Progressive/Offline_Service_workers /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers /ja/docs/Web/Apps/Progressive/Re-engageable_Notifications_Push /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push /ja/docs/Web/CSP_(Content_Security_Policy) /ja/docs/Web/HTTP/CSP @@ -3833,6 +3834,9 @@ /ja/docs/Web/Events/vrdisplaydisconnected /ja/docs/Web/API/Window/vrdisplaydisconnect_event /ja/docs/Web/Events/vrdisplaypresentchange /ja/docs/Web/API/Window/vrdisplaypresentchange_event /ja/docs/Web/Events/waiting /ja/docs/Web/API/HTMLMediaElement/waiting_event +/ja/docs/Web/Guide/AJAX/Community /ja/docs/Web/Guide/AJAX +/ja/docs/Web/Guide/AJAX/Getting_Started /ja/docs/Web/Guide/AJAX +/ja/docs/Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support /ja/docs/Mozilla/Firefox/Releases/3/WAI_ARIA_Live_Regions_API_Support /ja/docs/Web/Guide/API/Gamepad /ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API /ja/docs/Web/Guide/API/Vibration /ja/docs/Web/API/Vibration_API /ja/docs/Web/Guide/Audio_and_video_delivery/H.264_support_in_Firefox /ja/docs/Web/Guide/Audio_and_video_delivery @@ -4088,6 +4092,7 @@ /ja/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking /ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking /ja/docs/Web/HTTP/Headers/Set-Cookie2 /ja/docs/Web/HTTP/Headers/Set-Cookie /ja/docs/Web/HTTP/Index /ja/docs/Web/HTTP +/ja/docs/Web/HTTP/Link_prefetching_FAQ /ja/docs/Glossary/Prefetch /ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file /ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file /ja/docs/Web/HTTP/Public_Key_Pinning /ja/docs/conflicting/Web/Security/Certificate_Transparency /ja/docs/Web/HTTP/Response_codes /ja/docs/Web/HTTP/Status @@ -4417,10 +4422,11 @@ /ja/docs/Web/MathML/Index /ja/docs/Web/MathML /ja/docs/Web/Media/images/aspect_ratio_mapping /ja/docs/Learn/Performance/Multimedia /ja/docs/Web/Progressive_web_apps/Add_to_home_screen /ja/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable -/ja/docs/Web/Progressive_web_apps/Advantages /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Introduction +/ja/docs/Web/Progressive_web_apps/Advantages /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames /ja/docs/Web/Progressive_web_apps/App_structure /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure +/ja/docs/Web/Progressive_web_apps/Guides/Structural_overview /ja/docs/Web/Progressive_web_apps /ja/docs/Web/Progressive_web_apps/Installable_PWAs /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs -/ja/docs/Web/Progressive_web_apps/Introduction /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Introduction +/ja/docs/Web/Progressive_web_apps/Introduction /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames /ja/docs/Web/Progressive_web_apps/Loading /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Loading /ja/docs/Web/Progressive_web_apps/Offline_Service_workers /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers /ja/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push @@ -4429,7 +4435,8 @@ /ja/docs/Web/Progressive_web_apps/Responsive/Mobile_first /ja/docs/Learn/CSS/CSS_layout/Responsive_Design /ja/docs/Web/Progressive_web_apps/Responsive/Responsive_navigation_patterns /ja/docs/Learn/CSS/CSS_layout/Responsive_Design /ja/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks /ja/docs/Learn/CSS/CSS_layout/Responsive_Design -/ja/docs/Web/Progressive_web_apps/Structural_overview /ja/docs/Web/Progressive_web_apps/Guides/Structural_overview +/ja/docs/Web/Progressive_web_apps/Structural_overview /ja/docs/Web/Progressive_web_apps +/ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Introduction /ja/docs/Web/Progressive_web_apps/Tutorials/js13kGames /ja/docs/Web/Reference /ja/docs/Web /ja/docs/Web/Reference/API /ja/docs/Web/API /ja/docs/Web/Reference/Events /ja/docs/Web/Events diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 2aad994a3ae7fd..42e088a2f42747 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -2424,14 +2424,14 @@ "modified": "2020-07-16T22:25:45.204Z", "contributors": ["silverskyvicto", "mfuji09", "yyss"] }, + "Learn/CSS/Howto/Create_fancy_boxes": { + "modified": "2020-07-16T22:25:49.512Z", + "contributors": ["Wind1808"] + }, "Learn/CSS/Howto/Generated_content": { "modified": "2020-07-16T22:25:47.914Z", "contributors": ["silverskyvicto", "chrisdavidmills", "teoli", "ethertank"] }, - "Learn/CSS/Howto/create_fancy_boxes": { - "modified": "2020-07-16T22:25:49.512Z", - "contributors": ["Wind1808"] - }, "Learn/CSS/Styling_text": { "modified": "2020-07-16T22:25:58.768Z", "contributors": ["dskmori", "Wind1808", "mfuji09"] @@ -5145,6 +5145,10 @@ "Taken" ] }, + "Mozilla/Firefox/Releases/3/WAI_ARIA_Live_Regions_API_Support": { + "modified": "2019-03-18T21:27:30.169Z", + "contributors": ["silverskyvicto"] + }, "Mozilla/Firefox/Releases/30": { "modified": "2019-03-23T23:19:52.782Z", "contributors": ["kohei.yoshino", "yyss", "teoli"] @@ -20475,43 +20479,6 @@ "Dria" ] }, - "Web/Guide/AJAX/Community": { - "modified": "2019-03-30T16:54:59.132Z", - "contributors": [ - "silverskyvicto", - "bestinterviewquestion", - "SphinxKnight", - "chrisdavidmills", - "Marsf", - "Mgjbot", - "Okome", - "Shimono" - ] - }, - "Web/Guide/AJAX/Getting_Started": { - "modified": "2020-07-28T22:57:33.766Z", - "contributors": [ - "eltociear", - "mfuji09", - "Uemmra3", - "chrisdavidmills", - "ethertank", - "maco81", - "Mgjbot", - "Shoot", - "Marsf", - "Taken", - "Okome", - "Taken Bot", - "Diskostu", - "Yu-raku-an", - "Shimono" - ] - }, - "Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support": { - "modified": "2019-03-18T21:27:30.169Z", - "contributors": ["silverskyvicto"] - }, "Web/Guide/API": { "modified": "2019-11-24T06:54:13.469Z", "contributors": ["mfuji09", "silverskyvicto", "Uemmra3", "Sheppy"] @@ -22423,25 +22390,6 @@ "modified": "2020-10-15T22:05:39.038Z", "contributors": ["mfuji09", "pcw", "kurimaru"] }, - "Web/HTTP/Link_prefetching_FAQ": { - "modified": "2020-01-12T13:11:34.893Z", - "contributors": [ - "mfuji09", - "silverskyvicto", - "SphinxKnight", - "yumetodo", - "hamasaki", - "jigs12", - "ethertank", - "Marsf", - "Potappo", - "Kohei", - "Mgjbot", - "Taken", - "Shimono", - "Yama" - ] - }, "Web/HTTP/Messages": { "modified": "2020-07-11T01:20:50.882Z", "contributors": ["mfuji09", "yyss"] @@ -29264,15 +29212,7 @@ "k-kuwahara" ] }, - "Web/Progressive_web_apps/Tutorials/js13kGames/App_structure": { - "modified": "2020-08-07T03:55:19.974Z", - "contributors": ["mfuji09", "Wind1808", "chrisdavidmills", "silverskyvicto"] - }, - "Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs": { - "modified": "2020-08-07T04:55:28.888Z", - "contributors": ["mfuji09", "Wind1808", "chrisdavidmills"] - }, - "Web/Progressive_web_apps/Tutorials/js13kGames/Introduction": { + "Web/Progressive_web_apps/Tutorials/js13kGames": { "modified": "2020-02-27T11:44:15.897Z", "contributors": [ "Uemmra3", @@ -29284,6 +29224,14 @@ "szk0u" ] }, + "Web/Progressive_web_apps/Tutorials/js13kGames/App_structure": { + "modified": "2020-08-07T03:55:19.974Z", + "contributors": ["mfuji09", "Wind1808", "chrisdavidmills", "silverskyvicto"] + }, + "Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs": { + "modified": "2020-08-07T04:55:28.888Z", + "contributors": ["mfuji09", "Wind1808", "chrisdavidmills"] + }, "Web/Progressive_web_apps/Tutorials/js13kGames/Loading": { "modified": "2019-11-04T15:24:56.030Z", "contributors": ["mfuji09", "Wind1808"] diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.md b/files/ja/learn/css/howto/create_fancy_boxes/index.md index c5c0f8b4e63f73..98af1651f5b452 100644 --- a/files/ja/learn/css/howto/create_fancy_boxes/index.md +++ b/files/ja/learn/css/howto/create_fancy_boxes/index.md @@ -1,8 +1,6 @@ --- title: 装飾的なボックスの作成 -slug: Learn/CSS/Howto/create_fancy_boxes -l10n: - sourceCommit: 8e2641ebe076ab89299c77a51ece882de4ba5efb +slug: Learn/CSS/Howto/Create_fancy_boxes --- {{LearnSidebar}} diff --git a/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.md b/files/ja/mozilla/firefox/releases/3/wai_aria_live_regions_api_support/index.md similarity index 99% rename from files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.md rename to files/ja/mozilla/firefox/releases/3/wai_aria_live_regions_api_support/index.md index 3428eb69c78ad9..903519517bdc49 100644 --- a/files/ja/web/guide/ajax/wai_aria_live_regions_api_support/index.md +++ b/files/ja/mozilla/firefox/releases/3/wai_aria_live_regions_api_support/index.md @@ -1,8 +1,7 @@ --- title: WAI ARIA ライブリージョン/API 対応 -slug: Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support -l10n: - sourceCommit: 9b38f886d21c5d0a428f58acb20c4d0fc6c2e098 +slug: Mozilla/Firefox/Releases/3/WAI_ARIA_Live_Regions_API_Support +original_slug: Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support --- > **警告:** これらの注釈は、スクリーンリーダーの開発者向けです。 開発者は、[ARIA ライブリージョン開発者のドキュメント](/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)を使用する必要があります。 diff --git a/files/ja/web/api/installevent/activeworker/index.md b/files/ja/web/api/installevent/activeworker/index.md deleted file mode 100644 index 73811aa51c2435..00000000000000 --- a/files/ja/web/api/installevent/activeworker/index.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: InstallEvent.activeWorker -slug: Web/API/InstallEvent/activeWorker -l10n: - sourceCommit: 21d3e89589aaf9e5cfa667de679134513ab833f3 ---- - -{{APIRef("Service Workers API")}}{{Deprecated_Header}}{{Non-standard_Header}} - -**`activeWorker`** は {{domxref("InstallEvent")}} インターフェイスの読み取り専用プロパティで、このメソッドは、現在ページをアクティブに制御しているサービスワーカー ({{domxref("ServiceWorker")}}) を返します。 - -すでにページを制御しているアクティブワーカーがいない場合、`null` を返します。 - -## 値 - -{{domxref("ServiceWorker")}} オブジェクト。 - -## 例 - -```js -self.addEventListener("install", (event) => { - const myActiveWorker = event.activeWorker; -}); -``` - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{jsxref("Promise")}} -- [フェッチ API](/ja/docs/Web/API/Fetch_API) diff --git a/files/ja/web/guide/ajax/community/index.md b/files/ja/web/guide/ajax/community/index.md deleted file mode 100644 index 4945c488ed40ce..00000000000000 --- a/files/ja/web/guide/ajax/community/index.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: コミュニティ -slug: Web/Guide/AJAX/Community ---- - -AJAX に関する有用なメーリングリスト、ニュースグループ、フォーラム、その他のコミュニティを御存知の場合は、リンクを追加してください。 - -## AJAX リソース - -## AJAX ワークショップとコース - -- [skillsmatter.com](https://skillsmatter.com/go/ajax-ria): Courses and events on JavaScript, Ajax, and Reverse Ajax technologies -- [telerik.com](https://www.telerik.com/forums/aspnet-ajax): An active community forum for Ajax -- [community.tableau.com](https://community.tableau.com/search.jspa?q=ajax): Community support forum and courses available for Ajax -- [codementor.io](https://www.codementor.io/community/search?q=ajax): Social platform with Ajax forums and tutorials -- [lynda.com](https://www.lynda.com/search?q=ajax): Tutorials available for learning the fundamentals of Ajax -- [Ajax Interview Questions and answer and answer](https://www.onlineinterviewquestions.com/ajax-interview-questions/) Interwiki links diff --git a/files/ja/web/guide/ajax/getting_started/index.md b/files/ja/web/guide/ajax/getting_started/index.md deleted file mode 100644 index e41fe800fb23b8..00000000000000 --- a/files/ja/web/guide/ajax/getting_started/index.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -title: 始めましょう -slug: Web/Guide/AJAX/Getting_Started -l10n: - sourceCommit: 20bbabd48da81dda9d79d123cb1c880c43925719 ---- - -{{QuickLinksWithSubpages("/ja/docs/Web/Guide/AJAX")}} - -この記事は AJAX の基礎の概観と、入門のための 2 つの実践的なサンプルを示します。 - -### AJAX とは? - -AJAX は **A**synchronous **J**avaScript **A**nd **X**ML の頭文字を取ったものです。これは一言で言えば、 [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) オブジェクトを使ってサーバーと通信することです。 AJAX は JSON, XML, HTML, テキストファイルなど、様々な形式の情報で送受信することができます。 AJAX の最も魅力的な特徴は「非同期」であること、つまり、サーバーとの通信、データの交換、ページの更新を、ページの再読み込みなしに行うことができる点です。 - -AJAX でできることには、2 つの重要な特徴があります。 - -- ページを再読み込みすることなくサーバーに要求を送る -- サーバーからデータを受け取って処理する - -## Step 1 – HTTP リクエストの送り方 - -JavaScript からサーバーに [HTTP](/ja/docs/Web/HTTP) リクエストを送るためには、この機能を提供するオブジェクトのインスタンスが必要になります。これが `XMLHttpRequest` の登場する場所です。 - -```js -const httpRequest = new XMLHttpRequest(); -``` - -リクエストを行った後、レスポンスが返ってきます。この段階で `XMLHttpRequest` オブジェクトに、どの JavaScript 関数がレスポンスを処理するかを指示する必要があります。オブジェクトの `onreadystatechange` プロパティを、以下のようにリクエストの状態が変化したときに呼び出される関数に設定します。 - -```js -function handler() { - // ここでサーバーのレスポンスを処理します。 -} - -httpRequest.onreadystatechange = handler; -``` - -このとき、関数名の後に括弧や引数がないことに注意してください。実際にその関数を呼び出すのではなく、関数への参照を代入しているからです。また、関数名を設定するのではなく、以下のように関数やレスポンスを処理する動作をその場で定義するという JavaScript の機能（「無名関数」と呼ばれる）を利用することもできます。 - -```js -httpRequest.onreadystatechange = () => { - // ここでサーバーからのレスポンスを処理します。 -}; -``` - -次に、レスポンスを受け取った後に何をするかを宣言した後で、以下のように HTTP リクエストオブジェクトの `open()` と `send()` 呼び出して、リクエストを作成する必要があります。 - -```js -httpRequest.open("GET", "http://www.example.org/some.file", true); -httpRequest.send(); -``` - -- `open()` の最初の引数は HTTP リクエストメソッド、つまり、GET、POST、HEAD などのサーバーが対応しているメソッドです。HTTP 標準に準拠するために、メソッド名はすべて大文字にしてください。そうでなければ、ブラウザーによっては（Firefox などでは）リクエストを送信しません。利用可能な HTTP リクエストメソッドに関しての詳細情報については、[仕様書](https://www.rfc-editor.org/rfc/rfc9110.html#name-methods)を確認してください。 -- 第二引数は、リクエストを送信するページの URL です。セキュリティ上の問題から、既定では第三者のドメインの URL を呼び出すことはできません。すべてのページで正確なドメイン名を使用するようにしてください。さもないと、`open()` を呼び出したときに "permission denied" エラーを受け取ることになります。よくある落とし穴は、自分のサイトに `domain.tld` でアクセスしているのに、`www.domain.tld` でページを呼び出そうとすることです。実際に別のドメインにリクエストを送る必要がある場合は、 [HTTP アクセス制御 (CORS)](/ja/docs/Web/HTTP/CORS) を参照してください。 -- 第三引数は、リクエストを非同期 (asynchronous) に送るかどうかを示します。 `true` （既定値）であれば、 JavaScript の実行が継続され、サーバーのレスポンスが届くまでの間もユーザーがページを操作することができます。これが、 AJAX の最初の A です。 - -`send()` メソッドの引数は、要求を `POST` するときにサーバーに送信したい任意のデータです。フォームデータはサーバーが解釈できる形式、例えばクエリー文字列のような形式の文字列です。 - -``` -"name=value&anothername="+encodeURIComponent(myVar)+"&so=on" -``` - -または、 `multipart/form-data`, JSON, XML など形式にしてください。 - -なお、データを `POST` する場合、リクエストの MIME タイプを設定する必要がある場合があります。例えば、フォームデータをクエリー文字列として `send()` を呼び出して送る前に、次の文を使用してください。 - -```js -httpRequest.setRequestHeader( - "Content-Type", - "application/x-www-form-urlencoded" -); -``` - -## Step 2 – サーバーレスポンスの取り扱い - -リクエストを送った時に、レスポンスを取り扱う JavaScript 関数の名前を設定しました。 - -```js -httpRequest.onreadystatechange = 関数名; -``` - -この関数では何を行うべきでしょうか。最初に、この関数ではリクエストの状態を調べる必要があります。状態が `XMLHttpRequest.DONE` （4 に対応）であるなら、サーバーからのレスポンスが完了しており、処理を進められることを意味します。 - -```js -if (httpRequest.readyState === XMLHttpRequest.DONE) { - // すべてが問題ない状態で、レスポンスも返ってきています -} else { - // まだ準備ができていません -} -``` - -`readyState` の値の一覧は [XMLHTTPRequest.readyState](/ja/docs/Web/API/XMLHttpRequest/readyState) で文書化されていて、以下のようになっています。 - -- 0 （初期化前）または（**リクエストが初期化されていません**） -- 1 （読み込み中）または（**サーバーへの接続が確立されました**） -- 2 （読み込み完了）または（**リクエストを受信しました**） -- 3 （対話中）または（**リクエストを処理中です**） -- 4 （完了）または（**リクエストが完了してレスポンスの準備ができました**） - -次に、 HTTP レスポンスの [レスポンスコード](/ja/docs/Web/HTTP#http_response_codes)を調べます。返ってくる可能性があるコードは [W3C](https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html) でリスト化されています。以下の例では、 AJAX 呼び出しが成功したか失敗したかを {{HTTPStatus("200", "200 OK")}} レスポンスコードをチェックすることで判別します。 - -```js -if (httpRequest.status === 200) { - // 完璧です！ -} else { - // 何らかの問題が発生しています。 - // たとえば、レスポンスに 404 (Not Found) や - // 500 (Internal Server Error) レスポンスコードが返っているなど。 -} -``` - -リクエストの状態とレスポンスの HTTP 状態コードをチェックした後、サーバーが送信したデータを使って好きなことが何でもできます。データにアクセスするには 2 つの選択肢があります。 - -- `httpRequest.responseText` – サーバーのレスポンスをテキスト文字列として返します -- `httpRequest.responseXML` – サーバーのレスポンスを JavaScript DOM 関数で扱える `XMLDocument` オブジェクトとして返します - -なお、上記の段階は非同期リクエストを使用した場合（`open()` の第三引数が未指定か `true` に設定されていた場合）のみ有効です。**同期**リクエストを使用した場合は関数を指定する必要はありませんが、これはユーザーの使い勝手をひどく損なうので、避けるべきです。 - -## Step 3 – 簡単な例 - -さて、ここまでに紹介した方法を使って簡単な HTTP リクエストを実行してみましょう。われわれの JavaScript では `test.html` という名前の、「これはテストです」と書かれた HTML 文書をリクエストし、その内容を `alert()` で表示します。注意として、この例では vanilla JavaScript を使っています — jQuery は入っていません。また HTML, XML, PHP ファイルは同一ディレクトリに置かれています。 - -```html - - - -``` - -このサンプルでは以下のことを行います。 - -- ユーザーがブラウザーで「リクエストを実行」をクリックする。 -- イベントハンドラーから `makeRequest()` 関数が呼び出される。 -- リクエストが行われ、(`onreadystatechange`) により `alertContents()` へ処理が渡される。 -- `alertContents()` では、レスポンスを受信していて問題無いかを確認した後、 `alert()` で `test.html` ファイルの中身を表示する。 - -> **メモ:** リクエストを送信する先が静的な HTML ファイルではなく、 XML を返すコードである場合、 Internet Explorer にレスポンスヘッダーを設定しなければなりません。`Content-Type: application/xml` というヘッダーを設定しなければ、XML 要素にアクセスしようとしている行で IE が "Object Expected" という Javascript エラーを投げるでしょう。 - -> **メモ:** `Cache-Control: no-cache` ヘッダーを設定しなければ、ブラウザーがレスポンスをキャッシュしてレスポンスを再送信しなくなるため、デバッグが難しくなるでしょう。 GET 引数に、タイムスタンプやランダムな数字のような、常に異なるものを追加する方法もあります ([キャッシュをバイパスする](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#キャッシュをバイパスする)をご覧ください) - -> **メモ:** `httpRequest` 変数をグローバルに使用すると、関数の呼び出しが競合して `makeRequest()` が互いに上書きし合うため、競合状態が発生します。 `httpRequest` 変数を、 AJAX 関数を含んでいる[クロージャ](/ja/docs/Web/JavaScript/Closures)のローカルで宣言することでこれを防ぐことができます。 - -通信エラーのイベント（サーバーがダウンしたなど）では、レスポンスステータスにアクセスすると `onreadystatechange` メソッドの中で例外が発生します。この問題を防ぐため、 `if...then` 文は必ず `try...catch` で囲むようにしてください。 - -```js -function alertContents() { - try { - if (httpRequest.readyState === XMLHttpRequest.DONE) { - if (httpRequest.status === 200) { - alert(httpRequest.responseText); - } else { - alert("リクエストに問題が発生しました"); - } - } - } catch (e) { - alert(`例外を捕捉: ${e.description}`); - } -} -``` - -### Step 4 – XML レスポンスの扱い - -前の例では、 HTTP リクエストへのレスポンスを受け取った後、そのリクエストオブジェクトの `responseText` プロパティを用いて、それに含まれている `test.html` の中身を取得しました。では、次に `responseXML` プロパティのほうを試してみましょう。 - -はじめに、あとでサーバーにリクエストするための妥当な XML 文書を作成します。 文書 (`test.xml`) ファイルの中身は以下のようなものです。 - -```html - - I'm a test. -``` - -次に、`makeRequest()` の中で、 `test.html` を作成した XML ファイルに置き換える必要があります。 - -```js -httpRequest.open("GET", "test.xml"); -``` - -そして、`alertContents()` では、 `alert(httpRequest.responseText);` としている行を以下のように変更します。 - -```js -const xmldoc = httpRequest.responseXML; -const root_node = xmldoc.querySelector("root"); -alert(root_node.firstChild.data); -``` - -このコードでは、`XMLDocument` オブジェクトを `responseXML` から取得し、 DOM メソッドを利用して XML 文書に含まれるデータにアクセスしています。 - -### Step 5 – データの処理 - -最後に、データをサーバーに送ってレスポンスを受け取りましょう。JavaScript はここで動的なページ `test.php` をリクエストし、このページは送ったデータを受けて「計算した」文字 - "Hello, \[user data]!" - を返し、これを `alert()` で表示します。 - -まずは HTML にテキストボックスを追加し、ユーザーが名前を入れられるようにします。 - -```html - - - Make a request - -``` - -イベントハンドラーに、テキストボックスからユーザーデータを取得してサーバーサイドスクリプトの URL と一緒に `makeRequest()` に送るような行も追加します。 - -```js -document.getElementById("ajaxButton").onclick = () => { - const userName = document.getElementById("ajaxTextbox").value; - makeRequest("test.php", userName); -}; -``` - -`makeRequest()` を編集してユーザーデータを受け取ってサーバーに渡すようにします。リクエストメソッドは `GET` から `POST` に変更し、データを `httpRequest.send()` 呼び出しのパラメーターとして入れます: - -```js -function makeRequest(url, userName) { - // … - - httpRequest.onreadystatechange = alertContents; - httpRequest.open("POST", url); - httpRequest.setRequestHeader( - "Content-Type", - "application/x-www-form-urlencoded" - ); - httpRequest.send(`userName=${encodeURIComponent(userName)}`); -} -``` - -`alertContents()` 関数はステップ 3 と同じように書かれて、サーバーが計算された文字列を返していたら、 alert で表示するようにします。しかし、サーバーが計算された文字列と元のユーザーデータの両方を返すとしましょう。つまり、ユーザーがテキストボックスに「Jane」と入力した場合、サーバーのレスポンスは次のようになります。 - -```json -{ "userData": "Jane", "computedString": "Hi, Jane!" } -``` - -このデータを `alertContents()` 内で使うには、単に `responseText` を alert で表示することはできず、これを解釈して、求めるプロパティの `computedString` を alert で表示します。 - -```js -function alertContents() { - if (httpRequest.readyState === XMLHttpRequest.DONE) { - if (httpRequest.status === 200) { - const response = JSON.parse(httpRequest.responseText); - alert(response.computedString); - } else { - alert("There was a problem with the request."); - } - } -} -``` - -`test.php` には以下のようなものが入ります。 - -```php -$name = $_POST['userName'] ?? 'no name'; -$computedString = "Hi, " . $name . "!"; -$array = ['userName' => $name, 'computedString' => $computedString]; -echo json_encode($array); -``` - -DOM メソッドについてより詳しくは、[ドキュメントオブジェクトモデル (DOM)](/ja/docs/Web/API/Document_Object_Model) の文書を参照してください。 - -## シンプルな制限時間付きの XHR の例 - -もう一つの単純な例を以下に示します。ここでは、XHR を介して次のような構造のテキストファイルを読み込むとします。 - -``` -TIME: 312.05 -TIME: 312.07 -TIME: 312.10 -TIME: 312.12 -TIME: 312.14 -TIME: 312.15 -``` - -テキストファイルが読み込まれると、それぞれの改行文字（`\n` - 基本的にはテキストファイルの各改行位置）で項目を配列に `split()` してから、タイムスタンプの完全なリストと最後のタイムスタンプをページに表示しています。 - -これは `setInterval()` 呼び出しを使って、5 秒ごとに繰り返されます。つまり、ある種のサーバー側のスクリプトが継続的に、新しいタイムスタンプでテキストファイルを更新し、クライアント側で XHR コードが最新のタイムスタンプを報告するために使用するという想定です。 - -```html - - - - - XHR log time - - - -

Off-Line

-

No Data yet

- - - - -``` diff --git a/files/ja/web/http/link_prefetching_faq/index.md b/files/ja/web/http/link_prefetching_faq/index.md deleted file mode 100644 index f92e0663785c54..00000000000000 --- a/files/ja/web/http/link_prefetching_faq/index.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: リンク先読みの FAQ -slug: Web/HTTP/Link_prefetching_FAQ ---- - -### リンクの先読みとは? - -リンクの先読みとはブラウザーの機能の一つで、ブラウザーのアイドル時間を使って、ユーザーが近い将来に訪問するであろう文書をダウンロードして、予め読み込んでおくことを指します。まず、Web ページの方から先読みのヒントをブラウザーに渡します。そのページの読み込みが完了すると、ブラウザーは黙って指定された文書を先読みし、キャッシュに蓄積しておきます。ユーザーが先読みされている文書を訪問すると、ブラウザーのキャッシュからすぐに提供できます。 - -### HTTPS でも先読みしますか? - -Gecko 1.9.1 (Firefox 3.5) 以降から HTTPS コンテンツも先読みできます。 - -### 先読みのヒントとは? - -HTML の `link` タグまたは [HTTP の `Link:` ヘッダー](/ja/docs/Web/HTTP/Headers)において、`next`, `prefetch` のいずれかの関係を持つものです。 `link` タグを使う例を以下に示します。 - -``` - -``` - -同じヒントを [HTTP の `Link:` ヘッダー](/ja/docs/Web/HTTP/Headers)を使って表すと次のようになります。 - -``` -Link: ; rel=prefetch -``` - -`Link:` ヘッダーは HTML 文書中からも HTML の `` タグを使って指定できます。 - -``` - -``` - -`Link:` ヘッダーの書式は、 [RFC 2068](http://tools.ietf.org/html/rfc2068) の 19.6.2.4 節で説明されています。 - -ブラウザーはこれらのヒント全てを元に、ブラウザーが使われていない時に先読みするための各リクエストを待ち行列に入れます。1 ページに複数のヒントがあれば、複数の文書に対して先読みを行います。例えば、次の文書としていくつかの大きな画像を指定することもあります。 - -他にも以下のような指定ができます。 - -``` - - -``` - -### アンカータグ（\）の内容も先読みされますか? - -いいえ。 `next` か `prefetch` のリンク形式を持つ `` タグだけが先読みの対象です。しかし、要望が多いようなら、将来的には `next` や `prefetch` の関係を含む `` タグのリンクの先読みにも対応するようになるかもしれません。そうすれば、コンテンツ提供者が先読みリンクを更新し忘れるという問題を回避しやすくなるでしょう。 - -### リンクの先読み機能は標準に準拠していますか? - -はい。ここで述べているリンクの先読み機能は、既存のウェブ標準に違反していません。実際、HTML 4.01 仕様書では新たなリンク形式の定義が明確に許されています([Section 6.12: Link types を参照](http://www.w3.org/TR/html4/types.html#type-links))。しかし、Mozilla で採用した手法自体はまだ標準化されていません。 Internet Draft を現在準備中です。 - -この手法の標準化は HTML5 の範囲の一部です。現在のワーキングドラフトの [section §5.11.3.13. Link type "prefetch"](https://www.whatwg.org/specs/web-apps/current-work/#link-type-prefetch) を参照してください。 - -### ブラウザーのアイドル時間はどのように判定されますか? - -現在の実装（Mozilla 1.2）では、アイドル時間は `nsIWebProgressListener` API を用いて判定されます。トップレベルの `nsIWebProgress` オブジェクトにリスナーを追加しました（"@[mozilla.org/docloaderservice;1](http://mozilla.org/docloaderservice;1)"）。このリスナーから、文書の開始と停止の通知を受け取って、前の文書の停止と次の文書の開始の間の時間をアイドル時間として概算します。前の文書の停止通知は、大まかに言って、トップレベル文書の onLoad ハンドラが起動した時に行われます。この時が先読みリクエストを行う時になります。サブフレームが先読みのヒントを含む場合にも、先読みは最上位のフレームとその「子」フレームの読み込みが終了するまで始まりません。 - -### 先読みの取得中に別のリンクをクリックするとどうなりますか? - -ユーザーがリンクをクリックしたり、何らかの種類のページ読み込みを発生させたりすると、先読みは停止し、先読みのヒントは捨てられます。先読みしている文書が部分的にダウンロードされている場合は、途中までの文書をサーバから送られた "Accept-Ranges: bytes" レスポンスヘッダー付きでキャッシュに蓄積されます。このヘッダーは、大抵、ウェブサーバが静的なコンテンツを提供する際に生成するものです。ユーザーが先読みした文書を実際に訪問する際には、その文書の残りの部分を HTTP の byte-range リクエストを使って取得します。 - -### バックグラウンドで何かをダウンロードしている場合はどうですか? リンクの先読み機能は回線容量を奪い合いますか? - -「イエス」であり、「ノー」でもあります。まず、Mozilla を使って何かをダウンロードしている場合は、全てのダウンロードが終わるまでリンクの先読み機能を遅らせます。例えば、ブックマーク・グループを読み込んでいる（複数のタブを開く）場合には、そのブックマークされたページで発生した先読みリクエストは、全てのタブがロードし終わるまで、開始されません。一方、別のアプリケーションがネットワークを使っている場合は、Mozilla のリンクの先読みはその他のアプリケーションと回線容量を奪い合います。将来的には、ネットワークのアイドル時間を監視するオペレーティングシステムのサービスを利用して、この問題を解決したいと思っています - -### 先読みできるものに何か制限はありますか? - -はい。 (と Gecko 1.9.1 からは )URL だけが先読み可能です。（FTP などの）その他のプロトコルはクライアントサイドのキャッシュへの対応が十分でありません。 - -### Mozilla は別のホストからも文書を先読みしますか? - -はい。先読みには、 同一オリジン (same-origin) についての制限はありません。リンクの先読みを同一サーバの URL に限定したとしても、ブラウザーのセキュリティ向上にはならないでしょうから。 - -### 先読みのリクエストには Referer: ヘッダーが付きますか? - -はい。先読みリクエストには、どの文書から先読みヒントを取ったかを示す、HTTP の `Referer:` ヘッダーが付きます。 - -このことは、多くのサイトで広く行われている参照元の追跡に影響するかもしれません。このため、リンクの先読みは全てのコンテンツに対して向くものではないかもしれません。そこで、`Cache-control: must-revalidate` HTTP レスポンスヘッダーを指定することにより、ユーザーが先読みされた文書へのリンクを辿った際に、Mozilla にその先読みされた文書を検証させることができるようにしています。このヘッダーが使われると、キャッシュは有効なままですが、ブラウザーのキャッシュから文書を取り出す前には、`If-Modified-Since` もしくは `If-None-Match` の検証用リクエストが必要になります。 - -### サーバ管理者ですが、先読みのリクエストを通常のリクエストと区別する方法はありますか? - -はい。先読みのリクエストには、次のようなヘッダーが付きます。 - -``` -X-moz: prefetch -``` - -もちろん、このリクエストヘッダーは全く標準化されていないものですので、将来の Mozilla リリースでは変更される可能性もあります。 - -### リンクの先読み機能を無効化する設定はありますか? - -はい。リンクの先読み機能を無効化できる隠し設定があります。 あなたのプロファイルディレクトリにある prefs.js ファイルに次の行を追加してください（もしくは、about:config 経由で変更してください）。 - -``` -user_pref("network.prefetch-next", false); -``` - -しかし、リンクの先読み機能を無効にしたいという場合には、この先読みの実装に何か不具合があるのではないかと思います。我々としては、不具合がある場合には、ユーザーに設定ユーザーインターフェイスの中から目立たない設定項目を探させて変更させるよりも、実装を改善したいと思っています。 - -### ネットワーク回線を従量制課金で使っている人たちについてはどうですか? - -基本的には、この問題は二つの観点から見ることができます。ウェブサイトでは既に JavaScript や DOM 等の小技を使って、暗黙のダウンロードが行われていること。先読みはブラウザーの機能の一つであり、ユーザーが簡単に無効化できるようにしておくべきだということです。 - -ウェブサイトで JavaScript や DOM の色々な小技を使用して暗黙にダウンロードをどんどん進めようとする代わりに、 `` タグを使った先読みを採用してもらうことが重要です。 `` タグにより、ブラウザーはどのサイトが最新であるかを知ることができ、文書の先読みの優先順序をより良く付けることができます。ユーザー設定で `` タグによる先読みを無効化できるようにすると、単に JavaScript や DOM による小技を推奨させることにつながり、ユーザーにとって良い結果にはなり m 差円。先読み機能が既定で有効なのは、このためです。 - -### どのブラウザーがリンクの先読み機能に対応していますか? - -Mozilla 1.2 以降ベースおよび Mozilla 1.0.2 以降ベースのブラウザーが先読み機能に対応しています。これには Netscape 7.01 以降と Phoenix ビルドも含まれます。 2003 年 3 月現在の Chimera ビルドは Mozilla 1.0.1 ベースですので、先読み機能に対応していません。あなたのブラウザーがリンクの先読みに対応しているかどうか[テスト](http://gemal.dk/browserspy/prefetch.php)できます。 - -### プライバシーとの関わり - -参照元と URL の追跡との関係はすでに上記で説明されているとおりであり、先読みは一般的に先読みサイトの Cookie へのアクセスを引き起こします。（例えば、 amazon を Google で検索するとき、 Google の結果ページは www\.amazon.com google.co.jp で検索した場合は www\.amazon.co.jp を先読みし、ブラウザーに Cookie が送られてきます。 Firefox で サードパーティの Cookie をブロックするには、[Disabling third party cookies](http://support.mozilla.com/kb/Disabling+third+party+cookies) を参照してください。） - -### 他には...? - -リンクの先読み機能について質問やコメントなどありましたら、私の方までお気軽にどうぞ。 :-) - -#### 関連情報... - -[Prefetching Hints](http://www.edochan.com/programming/pf.htm) - -## 原文情報 - -- 著者: Darin Fisher (darin at meer dot net) -- 最終更新日: Updated: March 3, 2003 diff --git a/files/ja/web/progressive_web_apps/guides/structural_overview/index.md b/files/ja/web/progressive_web_apps/guides/structural_overview/index.md deleted file mode 100644 index 56a6e9d9bdf6cd..00000000000000 --- a/files/ja/web/progressive_web_apps/guides/structural_overview/index.md +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: プログレッシブウェブアプリの構造的な概要 -slug: Web/Progressive_web_apps/Guides/Structural_overview -original_slug: Web/Progressive_web_apps/Structural_overview ---- - -プログレッシブウェブアプリ (PWA) はあらゆるウェブコンテンツに対応していますが、ウェブ上で使用することも、ローカルアプリケーションとしてインストールして実行することも可能なウェブアプリとして認識されるためには、特定の構造を持ち、特定のコンポーネントを含む必要があります。この構造概要では、標準的なウェブアプリケーションを構成する機能と、PWA を構築する際に従うことができるいくつかのデザインパターンを見ていきます。 - -## アプリの構造 - -ウェブサイトのレンダリングには、大きく分けて、サーバー上で行う方法と、クライアント上で行う方法があります。どちらも一長一短がありますが、この 2 つのアプローチをある程度混合することも可能です。 - -- **サーバーサイドレンダリング** (**SSR**) とは、ウェブサイトがサーバー上でレンダリングされることで、初回の読み込みは速くなりますが、ページ間の移動には新しい HTML コンテンツのダウンロードが必要になります。これはブラウザーを問わず動作しますが、ページ間の移動に時間がかかるため、一般的に認識されるパフォーマンスに影響を与えます。ページを読み込むのにサーバーへの新しいラウンドトリップが必要となるからです。 -- **クライアントサイドレンダリング** (**CSR**) は、異なるページに移動した際に、ほぼ瞬時にブラウザー内でウェブサイトを更新することができますが、最初のダウンロードとクライアントでの余分なレンダリングが必要になります。最初の訪問時にはウェブサイトの表示速度が遅くなりますが、移動時には速くなります。 - -クライアントサイドレンダリングとサーバーサイドレンダリングの両方を使用すると、最良の結果が得られます。サーバー上でウェブサイトをレンダリングし、そのコンテンツをキャッシュし、必要に応じてクライアントサイドでレンダリングを更新します。SSR のおかげで最初のページロードが早く、クライアントが変更部分のみを再レンダリングできるので、ページ間の移動がスムーズになります。 - -PWA はどのようなアプローチでも構築できますが、一部のアプローチは他のアプローチよりもうまく機能します。最も一般的なアプローチは、**アプリシェル** (app shell) の概念です。これは、SSR と CSR を前述の方法で正確に組み合わせたもので、さらに「オフラインファースト」の方法論に従っています。これについては、今後の記事で詳しく説明し、サンプルアプリケーションで使用します。また、Streams API を使った新しいアプローチもありますが、これについても簡単に説明します。 - -## アプリシェルの概念 - -アプリシェルの概念は、最小限のユーザーインターフェースとコンテンツをできるだけ早く読み込み、それをキャッシュしてオフラインでも次回のアクセス時に利用できるようにしてから、アプリの残りのコンテンツを読み込むというものです。そうすることで、端末からアプリにアクセスしたときに、UI がすぐにキャッシュから読み込まれ、新しいコンテンツは (キャッシュにない場合は) サーバーにリクエストされます。 - -この構造は高速であり、ユーザーはローディングスピナーや空白のページではなく、即座に「何か」を目にするため、高速であると感じます。また、ネットワーク接続が利用できない場合でも、オフラインでウェブサイトにアクセスすることができます。 - -[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)を使うと、サーバーからのリクエストとキャッシュからの取得を制御することができますが、これについては次回詳しく説明します。 - -### アプリシェルパターンの利点 - -このアーキテクチャにより、ウェブサイトは PWA のすべての機能の恩恵を受けることができます。アプリシェルをキャッシュし、動的コンテンツを管理することで、パフォーマンスが大幅に向上します。基本的なシェルに加えて、[ホーム画面への追加](/ja/docs/Web/Progressive_web_apps/Add_to_home_screen)や[プッシュ通知](/ja/docs/Web/API/Push_API)などの機能を追加することができます。これらの機能がユーザーのブラウザーで対応していなくても、アプリは問題なく動作します。これがプログレッシブエンハンスメントの優れた点です。 - -ウェブサイトは、ウェブの利点を維持しながら、即時の操作性と確かなパフォーマンスを備えたネイティブアプリのように感じられるようになります。 - -### リンク可能で、プログレッシブ性、レスポンシブ性を兼ね備えたデザイン - -PWA の利点を覚えておき、アプリケーションを設計する際に念頭に置いておくことが重要です。アプリシェルのアプローチにより、ウェブサイトは以下のようになります。 - -- リンク可能であること。ページ内のリンクをクリックしたり、共有したい場合は URL を誰かに送ったりすることができ、ネイティブアプリのように動作しても、ウェブサイトであることに変わりはありません。 -- プログレッシブであること。「古き良き基本的なウェブサイト」から始めて、徐々に新しい機能を追加していきます。その際、ブラウザーで利用可能かどうかを検出し、対応していない場合に発生するエラーを優雅に処理することを忘れないでください。例えば、サービスワーカーの助けを借りたオフラインモードは、ウェブサイトの使い勝手をより良いものにするための付加的な特徴に過ぎませんが、それがなくても全く問題なく使用できます。 -- レスポンシブであること。レスポンシブウェブデザインは、プログレッシブウェブアプリにも適用されます。どちらも主にモバイル端末向けのデザインだからです。ブラウザーが搭載されている端末の種類は非常に多く、[meta viewport タグ](/ja/docs/Mozilla/Mobile/Viewport_meta_tag)、[CSS メディアクエリー](/ja/docs/Web/CSS/Media_queries)、[フレックスボックス](/ja/docs/Learn/CSS/CSS_layout/Flexbox)、[CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)などの技術を使用して、様々な画面やビューポートの大きさ、ピクセル密度でも動作するようにウェブサイトを準備することが重要です。 - -## もう一つのアプローチ: ストリーム - -[Streams API](/ja/docs/Web/API/Streams_API) を使用すると、サーバーサイドまたはクライアントサイドのレンダリングに対して、まったく異なるアプローチをとることができます。サービスワーカーの助けを借りれば、ストリームはコンテンツを解析する方法を大幅に改善することができます。 - -アプリシェルモデルでは、ウェブサイトがレンダリングを開始する前に、すべてのリソースが利用可能であることが必要です。HTML の場合は違います。実際にはブラウザーがすでにデータをストリーミングしており、要素が読み込まれてウェブサイトにレンダリングされたことを確認することができます。しかし、JavaScript を実際に動作させるためには、JavaScript をすべてダウンロードする必要があります。 - -Streams API を使用すると、開発者はサーバーからストリーミングされるデータに直接アクセスすることができます。データに対して何らかの操作を行いたい場合 (例えば、動画にフィルターを追加するなど)、すべてのデータがダウンロードされ、blob (またはその他のもの) に変換されるのを待つ必要はもうありません。その代わりに、すぐに始めることができます。ストリームの開始、他のストリームとの連結、キャンセル、エラーのチェックなど、きめ細かな制御が可能になります。 - -理論的には、ストリーミングはアプリのシェルモデルよりも優れたモデルですが、より複雑であり、 Streams API は主要なブラウザーはまだ完全に対応していません。しかし、Streams API が利用可能になれば、アプリのコンテンツを提供する最速の方法になります。パフォーマンス面でのメリットは、まさに目を見張るものがあります。 - -動作する例や詳しい情報は、[Streams API のドキュメント](/ja/docs/Web/API/Streams_API)を参照してください。 - -## サンプルアプリケーションの構造 - -js13kPWA のウェブサイトの構造はとてもシンプルです。1 つの HTML ファイル (index.html) で構成されており、基本的な CSS スタイルは style.css で提供されています。また、画像やスクリプト、フォントなどもいくつか含まれています。ファイルとフォルダーの階層は次のようになっています。 - -- `app.js` -- `data/` - - - `games.js` - - `img/` - -- `favicon.ico` -- `fonts/` -- `icons/` -- `img/` - - - `bg.png` - - `js13kgames.png` - -- `index.html` -- `js13kpwa.webmanifest` -- `style.css` -- `sw.js` - -### HTML - -ファイル `index.html` の中の HTML がアプリの構造を作ります。アプリのシェルモデルに直接関連する部分は、このページ内の {{HTMLElement("section")}} のうち ID が `content` であるものの外側にあります。 - -```html - - - - - js13kGames A-Frame entries - - - - - - - - - - - - -
-

-
-
-

js13kGames A-Frame entries

-

List of games submitted to the - A-Frame category in the js13kGames 2017 - competition. You can - fork js13kPWA on GitHub to check its source code.

- -
- // Content inserted in here -
-
- - - -``` - -{{HTMLElement("head")}} セクションには、アプリのタイトル、説明、CSS ファイルへの必要な参照、ウェブマニフェスト、メインアプリケーションの JavaScript ファイル (アプリを初期化する `app.js`)、追加の JavaScript コードファイルなど、アプリに関する基本的な情報が含まれています。{{HTMLElement("body")}} は、画像を表示する {{HTMLElement("header")}} と、 {{HTMLElement("main")}} 要素の中にあるアプリの本文に分かれています。アプリは、タイトル、説明文、そしてアプリのコンテンツを表示する場所 (ID が `content` である {{HTMLElement("section")}} 要素) を表示します。コンテンツの下には、著作権表示と各種リンクを提供する{{HTMLElement("footer")}}があります。 - -このアプリの唯一の仕事は、js13kGames 2017 のコンペティションに参加した [A-Frame](https://aframe.io/) 作品をすべてリストアップすることです。ご覧の通り、これはごく普通の 1 ページのウェブサイトです。このアプリの唯一の目的は、実際の PWA 機能の実装を検討するために使用できるシンプルなものを用意することです。 - -### CSS - -このシンプルな例では、CSS も可能な限りシンプルにしています。{{cssxref("@font-face")}} を使用してカスタムフォントを読み込んで使用し、HTML 要素に簡単なスタイルを施しています。全体的なアプローチとしては、モバイル (レスポンシブウェブデザインのアプローチ) とデスクトップの両方で見栄えのするデザインを目指しています。 - -### app.js: メインアプリの JavaScript - -`app.js` というファイルは、アプリが最初にロードされたときに実行されます。このファイルの役割は、主にアプリの初期化ですが、それ以外のこともできます。アプリがどのように機能するかは、このガイドの後の記事で詳しく説明します。 - -このアプリが最初に行うことは、次のテンプレートを使ってアプリの表示内容を生成することです。 - -```js -const template = `
- NAME -

#POS. NAME

- -
`; -let content = ''; -for (let i = 0; i < games.length; i++) { - let entry = template.replace(/POS/g, (i + 1)) - .replace(/SLUG/g, games[i].slug) - .replace(/NAME/g, games[i].name) - .replace(/AUTHOR/g, games[i].author) - .replace(/TWITTER/g, games[i].twitter) - .replace(/WEBSITE/g, games[i].website) - .replace(/GITHUB/g, games[i].github); - entry = entry.replace('', '-'); - content += entry; -} -document.getElementById('content').innerHTML = content; -``` - -それから[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)を登録します。 - -```js -if ("serviceWorker" in navigator) { - navigator.serviceWorker.register("/pwa-examples/js13kpwa/sw.js"); -} -``` - -その後、ID が `notifications` のボタンがクリックされたときのハンドラーを追加します。このハンドラーは、ユーザーに通知を送信する許可を求め、ランダムな通知を生成して送信します。 - -```js -const button = document.getElementById('notifications'); -button.addEventListener('click', () => { - Notification.requestPermission().then((result) => { - if (result === 'granted') { - randomNotification(); - } - }); -}); -``` - -その後、`randomNotification()` 関数が続き、ファイル内の最後のコードが完成します。 - -```js -function randomNotification() { - const randomItem = Math.floor(Math.random() * games.length); - const notifTitle = games[randomItem].name; - const notifBody = `Created by ${games[randomItem].author}.`; - const notifImg = `data/img/${games[randomItem].slug}.jpg`; - const options = { - body: notifBody, - icon: notifImg, - }; - new Notification(notifTitle, options); - setTimeout(randomNotification, 30000); -} -``` - -### サービスワーカー - -最後に簡単にご紹介するのは、`sw.js` というファイルにあるサービスワーカーのファイルです。このスクリプトはまず、`data` ディレクトリーにある `games.js` というファイルからデータをインポートします。 - -```js -self.importScripts("data/games.js"); -``` - -そして、サービスワーカーがキャッシュする必要のあるすべてのファイルのリストを作成します。このリストには、アプリのシェルファイルとコンテンツファイルの両方が含まれます。 - -```js -const cacheName = 'js13kPWA-v1'; -const appShellFiles = [ - '/pwa-examples/js13kpwa/', - '/pwa-examples/js13kpwa/index.html', - '/pwa-examples/js13kpwa/app.js', - '/pwa-examples/js13kpwa/style.css', - '/pwa-examples/js13kpwa/fonts/graduate.eot', - '/pwa-examples/js13kpwa/fonts/graduate.ttf', - '/pwa-examples/js13kpwa/fonts/graduate.woff', - '/pwa-examples/js13kpwa/favicon.ico', - '/pwa-examples/js13kpwa/img/js13kgames.png', - '/pwa-examples/js13kpwa/img/bg.png', - '/pwa-examples/js13kpwa/icons/icon-32.png', - '/pwa-examples/js13kpwa/icons/icon-64.png', - '/pwa-examples/js13kpwa/icons/icon-96.png', - '/pwa-examples/js13kpwa/icons/icon-128.png', - '/pwa-examples/js13kpwa/icons/icon-168.png', - '/pwa-examples/js13kpwa/icons/icon-192.png', - '/pwa-examples/js13kpwa/icons/icon-256.png', - '/pwa-examples/js13kpwa/icons/icon-512.png', -]; -const gamesImages = []; -for (let i = 0; i < games.length; i++) { - gamesImages.push(`data/img/${games[i].slug}.jpg`); -} -const contentToCache = appShellFiles.concat(gamesImages); -``` - -ファイルリストの準備ができたら、いよいよサービスワーカー自体をインストールします。サービスワーカーは、リストアップされたすべてのファイルのキャッシングを実際に処理します。 - -```js -self.addEventListener('install', (e) => { - console.log('[Service Worker] Install'); - e.waitUntil((async () => { - const cache = await caches.open(cacheName); - console.log('[Service Worker] Caching all: app shell and content'); - await cache.addAll(contentToCache); - })()); -}); -``` - -このようにして、サービスワーカーの [fetch イベント](/ja/docs/Web/API/FetchEvent)のハンドラーを実装します。その仕事は、指定されたファイルのコンテンツを、キャッシュから、またはネットワーク経由でロードして (ロードする際にキャッシュして) 返すことです。 - -```js -self.addEventListener('fetch', (e) => { - e.respondWith((async () => { - const r = await caches.match(e.request); - console.log(`[Service Worker] Fetching resource: ${e.request.url}`); - if (r) { return r; } - const response = await fetch(e.request); - const cache = await caches.open(cacheName); - console.log(`[Service Worker] Caching new resource: ${e.request.url}`); - cache.put(e.request, response.clone()); - return response; - })()); -}); -``` - -### 補助的な JavaScript ファイル: games.js - -このアプリの例では、ゲームのデータは `games.js` という JavaScript のソースファイルで提供されています。他のアプリでは、このデータに JSON や他のフォーマットを使用するかもしれません。 - -```js -var games = [ - { - slug: 'lost-in-cyberspace', - name: 'Lost in Cyberspace', - author: 'Zosia and Bartek', - twitter: 'bartaz', - website: '', - github: 'github.com/bartaz/lost-in-cyberspace' - }, - { - slug: 'vernissage', - name: 'Vernissage', - author: 'Platane', - twitter: 'platane_', - website: 'github.com/Platane', - github: 'github.com/Platane/js13k-2017' - }, - // ... - { - slug: 'emma-3d', - name: 'Emma-3D', - author: 'Prateek Roushan', - twitter: '', - website: '', - github: 'github.com/coderprateek/Emma-3D' - } -]; -``` - -配列 `games` の各要素には特定のゲームが記述されており、`data/img/` ディレクトリーに対応する画像ファイルがあります。これが、JavaScript のコードを使って、ページの `content` セクションに読み込むコンテンツです。 - -## 関連情報 - -- [Fetch API](/ja/docs/Web/API/Fetch_API) diff --git a/files/ja/web/progressive_web_apps/tutorials/js13kgames/introduction/index.md b/files/ja/web/progressive_web_apps/tutorials/js13kgames/index.md similarity index 98% rename from files/ja/web/progressive_web_apps/tutorials/js13kgames/introduction/index.md rename to files/ja/web/progressive_web_apps/tutorials/js13kgames/index.md index e9e2225826aad9..3b41677b4de70d 100644 --- a/files/ja/web/progressive_web_apps/tutorials/js13kgames/introduction/index.md +++ b/files/ja/web/progressive_web_apps/tutorials/js13kgames/index.md @@ -1,9 +1,7 @@ --- title: プログレッシブウェブアプリの紹介 -slug: Web/Progressive_web_apps/Tutorials/js13kGames/Introduction -original_slug: Web/Progressive_web_apps/Introduction -l10n: - sourceCommit: f22e42182591e38590c9add80de91a51bce3cde2 +slug: Web/Progressive_web_apps/Tutorials/js13kGames +original_slug: Web/Progressive_web_apps/Tutorials/js13kGames/Introduction --- {{NextMenu("Web/Progressive_web_apps/App_structure", "Web/Progressive_web_apps")}}