diff options
Diffstat (limited to 'files')
| -rw-r--r-- | files/ja/_redirects.txt | 13 | ||||
| -rw-r--r-- | files/ja/_wikihistory.json | 56 | ||||
| -rw-r--r-- | files/ja/orphaned/web/api/navigatoronline/index.html | 60 | ||||
| -rw-r--r-- | files/ja/orphaned/web/api/navigatoronline/online/index.html | 89 | ||||
| -rw-r--r-- | files/ja/orphaned/web/api/navigatoronline/online_and_offline_events/index.html | 74 | ||||
| -rw-r--r-- | files/ja/web/api/navigator/online/index.html | 78 | ||||
| -rw-r--r-- | files/ja/web/api/navigator/online_and_offline_events/index.html | 127 |
7 files changed, 236 insertions, 261 deletions
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 1b4a256351..9331206b20 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -1594,7 +1594,7 @@ /ja/docs/DOM/window.navigator.language /ja/docs/orphaned/Web/API/NavigatorLanguage/language /ja/docs/DOM/window.navigator.mimeTypes /ja/docs/orphaned/Web/API/NavigatorPlugins/mimeTypes /ja/docs/DOM/window.navigator.mozIsLocallyAvailable /ja/docs/Web/API/Navigator/mozIsLocallyAvailable -/ja/docs/DOM/window.navigator.onLine /ja/docs/orphaned/Web/API/NavigatorOnLine/onLine +/ja/docs/DOM/window.navigator.onLine /ja/docs/Web/API/Navigator/onLine /ja/docs/DOM/window.navigator.oscpu /ja/docs/Web/API/Navigator/oscpu /ja/docs/DOM/window.navigator.platform /ja/docs/orphaned/Web/API/NavigatorID/platform /ja/docs/DOM/window.navigator.plugins /ja/docs/orphaned/Web/API/NavigatorPlugins/plugins @@ -1819,7 +1819,7 @@ /ja/docs/DOM:window.navigator.language /ja/docs/orphaned/Web/API/NavigatorLanguage/language /ja/docs/DOM:window.navigator.mimeTypes /ja/docs/orphaned/Web/API/NavigatorPlugins/mimeTypes /ja/docs/DOM:window.navigator.mozIsLocallyAvailable /ja/docs/Web/API/Navigator/mozIsLocallyAvailable -/ja/docs/DOM:window.navigator.onLine /ja/docs/orphaned/Web/API/NavigatorOnLine/onLine +/ja/docs/DOM:window.navigator.onLine /ja/docs/Web/API/Navigator/onLine /ja/docs/DOM:window.navigator.oscpu /ja/docs/Web/API/Navigator/oscpu /ja/docs/DOM:window.navigator.platform /ja/docs/orphaned/Web/API/NavigatorID/platform /ja/docs/DOM:window.navigator.plugins /ja/docs/orphaned/Web/API/NavigatorPlugins/plugins @@ -3222,7 +3222,7 @@ /ja/docs/Notification_object/title /ja/docs/Web/API/Notification/title /ja/docs/NsIDOMHTMLMediaElement /ja/docs/orphaned/NsIDOMHTMLMediaElement /ja/docs/Offline_resources_in_Firefox/Using_audio_and_video_in_Firefox /ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/ja/docs/Online_and_offline_events /ja/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events +/ja/docs/Online_and_offline_events /ja/docs/Web/API/Navigator/Online_and_offline_events /ja/docs/Other_JavaScript_tools /ja/docs/Tools /ja/docs/Parsing_and_serializing_XML /ja/docs/Web/Guide/Parsing_and_serializing_XML /ja/docs/Participating_in_the_Mozilla_project /ja/docs/orphaned/Participating_in_the_Mozilla_project @@ -3618,9 +3618,8 @@ /ja/docs/Web/API/NavigatorLanguage.languages /ja/docs/orphaned/Web/API/NavigatorLanguage/languages /ja/docs/Web/API/NavigatorLanguage/language /ja/docs/orphaned/Web/API/NavigatorLanguage/language /ja/docs/Web/API/NavigatorLanguage/languages /ja/docs/orphaned/Web/API/NavigatorLanguage/languages -/ja/docs/Web/API/NavigatorOnLine /ja/docs/orphaned/Web/API/NavigatorOnLine -/ja/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ja/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -/ja/docs/Web/API/NavigatorOnLine/onLine /ja/docs/orphaned/Web/API/NavigatorOnLine/onLine +/ja/docs/Web/API/NavigatorOnLine/Online_and_offline_events /ja/docs/Web/API/Navigator/Online_and_offline_events +/ja/docs/Web/API/NavigatorOnLine/onLine /ja/docs/Web/API/Navigator/onLine /ja/docs/Web/API/NavigatorPlugins /ja/docs/orphaned/Web/API/NavigatorPlugins /ja/docs/Web/API/NavigatorPlugins/javaEnabled /ja/docs/orphaned/Web/API/NavigatorPlugins/javaEnabled /ja/docs/Web/API/NavigatorPlugins/mimeTypes /ja/docs/orphaned/Web/API/NavigatorPlugins/mimeTypes @@ -3936,7 +3935,7 @@ /ja/docs/Web/API/window.navigator.appName /ja/docs/orphaned/Web/API/NavigatorID/appName /ja/docs/Web/API/window.navigator.battery /ja/docs/Web/API/Navigator/battery /ja/docs/Web/API/window.navigator.language /ja/docs/orphaned/Web/API/NavigatorLanguage/language -/ja/docs/Web/API/window.navigator.onLine /ja/docs/orphaned/Web/API/NavigatorOnLine/onLine +/ja/docs/Web/API/window.navigator.onLine /ja/docs/Web/API/Navigator/onLine /ja/docs/Web/API/window.navigator.oscpu /ja/docs/Web/API/Navigator/oscpu /ja/docs/Web/API/window.navigator.platform /ja/docs/orphaned/Web/API/NavigatorID/platform /ja/docs/Web/API/window.navigator.plugins /ja/docs/orphaned/Web/API/NavigatorPlugins/plugins diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 5c11c60d68..baa0d4f3bd 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -18943,6 +18943,31 @@ "Potappo" ] }, + "Web/API/Navigator/Online_and_offline_events": { + "modified": "2019-03-23T23:53:08.504Z", + "contributors": [ + "chrisdavidmills", + "ethertank", + "Marsf", + "Mgjbot", + "Koyamak" + ] + }, + "Web/API/Navigator/onLine": { + "modified": "2020-10-15T21:16:47.171Z", + "contributors": [ + "isdh", + "ryutamaki", + "yyss", + "dextra", + "fscholz", + "khalid32", + "ethertank", + "Potappo", + "Norah", + "Mgjbot" + ] + }, "Web/API/Navigator/oscpu": { "modified": "2020-10-15T21:16:44.807Z", "contributors": [ @@ -51169,37 +51194,6 @@ "nshimizu" ] }, - "orphaned/Web/API/NavigatorOnLine": { - "modified": "2019-03-23T23:00:36.403Z", - "contributors": [ - "fscholz" - ] - }, - "orphaned/Web/API/NavigatorOnLine/Online_and_offline_events": { - "modified": "2019-03-23T23:53:08.504Z", - "contributors": [ - "chrisdavidmills", - "ethertank", - "Marsf", - "Mgjbot", - "Koyamak" - ] - }, - "orphaned/Web/API/NavigatorOnLine/onLine": { - "modified": "2020-10-15T21:16:47.171Z", - "contributors": [ - "isdh", - "ryutamaki", - "yyss", - "dextra", - "fscholz", - "khalid32", - "ethertank", - "Potappo", - "Norah", - "Mgjbot" - ] - }, "orphaned/Web/API/NavigatorPlugins": { "modified": "2019-03-23T23:01:18.262Z", "contributors": [ diff --git a/files/ja/orphaned/web/api/navigatoronline/index.html b/files/ja/orphaned/web/api/navigatoronline/index.html deleted file mode 100644 index 35fed754da..0000000000 --- a/files/ja/orphaned/web/api/navigatoronline/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: NavigatorOnLine -slug: orphaned/Web/API/NavigatorOnLine -tags: - - API -translation_of: Web/API/NavigatorOnLine -original_slug: Web/API/NavigatorOnLine ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>NavigatorOnLine</strong></code> interface contains methods and properties related to the connectivity status of the browser.</p> - -<p>There is no object of type <code>NavigatorOnLine</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorOnLine</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from the latest snapshot, {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.NavigatorOnLine")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("Navigator")}} interface that implements it.</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatoronline/online/index.html b/files/ja/orphaned/web/api/navigatoronline/online/index.html deleted file mode 100644 index 162165986b..0000000000 --- a/files/ja/orphaned/web/api/navigatoronline/online/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: window.navigator.onLine -slug: orphaned/Web/API/NavigatorOnLine/onLine -tags: - - API - - DOM Reference - - NavigatorOnLine - - Online - - Property - - Reference -translation_of: Web/API/NavigatorOnLine/onLine -original_slug: Web/API/NavigatorOnLine/onLine ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p>ブラウザの接続状態を返します。このプロパティは真偽値を返して <code>true</code> はオンライン、<code>false</code> はオフラインを表します。ブラウザのネットワーク接続状態が変化するたびに、プロパティを更新します。この更新はユーザがリンクをたどる、あるいはスクリプトがリモートページを要求するときに発生します。例えばインターネットへの接続が失われた後にユーザがリンクをクリックすると、このプロパティは <code>false</code> を返します。</p> - -<p>このプロパティの実装は、ブラウザにより異なります。</p> - -<p>Chrome および Safari は、ブラウザがローカルエリアネットワーク (LAN) またはルータに接続できないときにオフライン、それ以外の状況では <code>true</code> を返します。従って、<code>false</code> 値が返る場合はブラウザがオフラインであると考えることができますが、<code>true</code> 値は必ずインターネットにアクセスできると考えることはできません。仮想イーサネットアダプタを持つ仮想化ソフトウェアを実行しているコンピュータでは常に "接続中" になるなど、偽陽性になる可能性があります。よって、実際のブラウザのオンライン状態を検出したい場合は、付加的なチェック方法を開発するべきでしょう。詳しくは HTML5 Rocks の記事 <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a> をご覧ください。</p> - -<p>Firefox および Internet Explorer は、ブラウザをオフラインモードに切り替えると <code>false</code> 値を送信します。Firefox 41 まで、他の状態では <code>true</code> 値を返していました。Firefox 41 より OS X および Windows で、実際のネットワーク接続状態に従って値を返します。</p> - -<p><a href="/ja/docs/Web/API/document.ononline"><code>window.ononline</code></a> および <a href="/ja/docs/Web/API/document.onoffline"><code>window.onoffline</code></a> イベントをリッスンすることにより、ネットワーク接続状態の変化を確認できます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>online</em> = <em>window</em>.navigator.onLine; -</pre> - -<h3 id="Value" name="Value">値</h3> - -<p><code>online</code> には <code>true</code> か <code>false</code> の真偽値が返されます。</p> - -<h2 id="Example" name="Example">例</h2> - -<p><a href="http://html5-demos.appspot.com/static/navigator.onLine.html">live example</a> をご覧ください。</p> - -<p>オンラインであるかを確認するには、以下のサンプルのように <code>window.navigator.onLine</code> を確認します:</p> - -<pre class="brush: js">if (navigator.onLine) { - console.log('online'); -} else { - console.log('offline'); -}</pre> - -<p>ブラウザが <code>navigator.onLine</code> をサポートしない場合は、上記のサンプルでは常に <code>false</code>/<code>undefined</code> が返ります。</p> - -<p>ネットワーク接続状態の変化を確認するには、以下のように <code>window.online</code> および <code>window.offline</code> をリッスンするため <code><a href="/ja/docs/DOM/element.addEventListener">addEventListener</a></code> を使用します:</p> - -<pre class="brush: js">window.addEventListener("offline", function(e) { console.log("offline"); }); - -window.addEventListener("online", function(e) { console.log("online"); }); -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "browsers.html#navigator.online", "navigator.onLine")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>最初期の定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<div>{{Compat("api.NavigatorOnLine.onLine")}}</div> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>Firefox 3 で導入された新しいオフライン関連イベントと、このプロパティの詳しい説明は、<a href="/ja/docs/Online_and_offline_events">Online/Offline Events</a> を参照してください。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li> - <li><a href="http://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatoronline/online_and_offline_events/index.html b/files/ja/orphaned/web/api/navigatoronline/online_and_offline_events/index.html deleted file mode 100644 index 4a136cde1c..0000000000 --- a/files/ja/orphaned/web/api/navigatoronline/online_and_offline_events/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Online and offline events -slug: orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -translation_of: Web/API/NavigatorOnLine/Online_and_offline_events -original_slug: Web/API/NavigatorOnLine/Online_and_offline_events ---- -<div>{{outdated()}}</div> -<p><a href="ja/Firefox_3_for_developers">Firefox 3</a> は <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 仕様</a>に従い <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline イベント</a>を実装します。</p> -<h3 id=".E6.A6.82.E8.A6.B3" name=".E6.A6.82.E8.A6.B3">概観</h3> -<p>オフラインに対応する良い Web アプリケーションを構築するためには、アプリケーションが実際にいつオフラインなのか知る必要があります。ついでに言えば、アプリケーションが 'オンライン' の状態に再び戻ったのがいつかを知る必要もあります。効果的に、その要件は次のように分解されます。</p> -<ol> - <li>ユーザがいつオンラインに戻るか知らなければなりません。そうすることでサーバと再び同期を取ることができます。</li> - <li>ユーザがいつオフラインになるのかを知らなければなりません。そうすることでサーバへの要求を後で用いるようキューに貯めることができます。</li> -</ol> -<p>オンライン／オフラインイベントがこのプロセスを一般化することを手助けします。</p> -<p>あなたの Web アプリケーションは、オフラインリソースのキャッシュで確実に管理されるドキュメントを確立する必要があります。これを行うための方法を <a href="ja/Offline_resources_in_Firefox">Firefox のオフラインリソース</a>の記事で学んでください。</p> -<h3 id="API" name="API">API</h3> -<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4> -<p><code><a href="ja/DOM/window.navigator.onLine">navigator.onLine</a></code> は <code>true</code>/<code>false</code> の値を保持するプロパティで、<code>true</code> はオンラインを、<code>false</code> はオフラインを意味します。このプロパティはユーザが対応するメニューアイテム (ファイル→オフライン作業) を選択することによりオフラインモードに移行する度に更新されます。</p> -<p>加えて、このプロパティはブラウザがネットワークに接続することがそれ以降不可能になった時にもその度に更新される必要があります。次の仕様に従います。</p> -<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline"> - <code>navigator.onLine</code> 属性はユーザがリンクを押した時やスクリプトが外部のページを要求したときに、ユーザエージェントがネットワークに連絡できない場合（またはそのような試みが失敗した場合）に必ず false を返す必要があります。</blockquote> -<p>Firefox 2 はこのプロパティをブラウザのオフラインモードが切り替わる度に更新していました。また Windows と Linux においてネットワークへの接続が失われたとき、復活したときにも更新していました。</p> -<p>このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。(仕様はこれらの先の実装を基にしました。) 従って今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。</p> -<h4 id=".22online.22_.E3.81.8A.E3.82.88.E3.81.B3_.22offline.22_.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88" name=".22online.22_.E3.81.8A.E3.82.88.E3.81.B3_.22offline.22_.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88">"<code>online</code>" および "<code>offline</code>" イベント</h4> -<p><a href="ja/Firefox_3">Firefox 3</a>の 2 つの新しいイベントを紹介します。"<code>online</code>" と "<code>offline</code>" です。これらの 2 つのイベントは各ページの <code><body></code> にてブラウザがオンラインとオフラインのモードを切り替えるたびに発生します。加えてこのイベントは <code>document.body</code> から <code>document</code> へと浮上し、<code>window</code> までたどり着きます。これらのイベントはキャンセルできません (ユーザのオンラインモードやオフラインモードへの移行を防ぐことはできません)。</p> -<p>これらのイベントに対するリスナを登録することもいくつかの馴染みのある方法にて可能です。</p> -<ul> - <li><code>window</code>, <code>document</code>, <code>document.body</code> 上にて <code><a href="ja/DOM/element.addEventListener">addEventListener</a></code> を利用します。</li> - <li><code>document</code> または <code>document.body</code> の <code>.ononline</code> または <code>.onoffline</code> プロパティを JavaScript の <code>Function</code> オブジェクトに設定します。(<b>注意：</b><code>window.ononline</code> または <code>window.onoffline</code> を利用することは互換性が原因で動作しません)</li> - <li>HTML マークアップにて <code><body></code> タグの <code>ononline="..."</code> または <code>onoffline="..."</code> 属性を指定します。</li> -</ul> -<h3 id=".E5.AE.9F.E8.A1.8C.E4.BE.8B" name=".E5.AE.9F.E8.A1.8C.E4.BE.8B">実行例</h3> -<p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a>を実行してこれらのイベントの動作を確認することができます。 <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p> -<pre class="eval"> <!doctype html> - <html> - <head> - <script> - function updateOnlineStatus(msg) { - var status = document.getElementById("status"); - var condition = navigator.onLine ? "ONLINE" : "OFFLINE"; - status.setAttribute("class", condition); - var state = document.getElementById("state"); - state.innerHTML = condition; - var log = document.getElementById("log"); - log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n")); - } - function loaded() { - updateOnlineStatus("load"); - document.body.addEventListener("offline", function () { - updateOnlineStatus("offline") - }, false); - document.body.addEventListener("online", function () { - updateOnlineStatus("online") - }, false); - } - </script> - <style>...</style> - </head> - <body onload="loaded()"> - <div id="status"><p id="state"></p></div> - <div id="log"></div> - </body> - </html> -</pre> -<h3 id=".E5.8F.82.E8.80.83" name=".E5.8F.82.E8.80.83">参考</h3> -<ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG Web Applications 1.0 仕様の 'Online/Offline イベント' セクション</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Firefox に実装された online/offline イベントのバグ追跡</a>および<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">関連バグ</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a></li> - <li><a class="external" href="http://ejohn.org/blog/offline-events/">Online/Offline イベントの解説</a></li> -</ul> -<div> - {{HTML5ArticleTOC()}}</div> diff --git a/files/ja/web/api/navigator/online/index.html b/files/ja/web/api/navigator/online/index.html new file mode 100644 index 0000000000..e10c02acbe --- /dev/null +++ b/files/ja/web/api/navigator/online/index.html @@ -0,0 +1,78 @@ +--- +title: Navigator.onLine +slug: Web/API/Navigator/onLine +tags: + - API + - DOM Reference + - Navigator + - Online + - Property + - Reference +translation_of: Web/API/Navigator/onLine +original_slug: Web/API/NavigatorOnLine/onLine +browser-compat: api.Navigator.onLine +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>ブラウザーのオンライン状態を返します。このプロパティは、オンラインを意味する <code>true</code> とオフラインを意味する <code>false</code> の論理値を返します。このプロパティは、ブラウザーのネットワークへの接続状態が変化するたびに更新を送信します。更新は、ユーザーがリンクをたどったときや、スクリプトがリモートページを要求したときに発生します。例えば、ユーザーがインターネット接続を失った直後にリンクをクリックした場合、このプロパティは <code>false</code> を返します。</p> + +<p>このプロパティの実装は、ブラウザーにより異なります。</p> + +<p>Chrome および Safari は、ブラウザーがローカルエリアネットワーク (LAN) またはルーターに接続できないときにオフライン、それ以外の状況では <code>true</code> を返します。従って、<code>false</code> 値が返る場合はブラウザーがオフラインであると考えることができますが、<code>true</code> 値は必ずインターネットにアクセスできると考えることはできません。仮想イーサネットアダプタを持つ仮想化ソフトウェアを実行しているコンピュータでは常に「接続中」になるなど、誤検出になる可能性があります。よって、本当にブラウザーのオンラインである状態を検出したい場合は、チェックするための追加の手段を開発する必要があります。詳しくは HTML5 Rocks の記事 <a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html"> Working Off the Grid</a> をご覧ください。</p> + +<p>Firefox と Internet Explorer では、ブラウザーをオフラインモードに切り替えると、 <code>false</code> 値が送信されます。 Firefox 41 までは、それ以外の条件では <code>true</code> 値が返されます。 Windows の Nightly 68 で実際の動作を確認したところ、 Chrome や Safari のように LAN 接続のみを確認しているため、誤検出が発生していました。</p> + +<p><a href="/ja/docs/Web/API/document.ononline"><code>window.ononline</code></a> および <a href="/ja/docs/Web/API/document.onoffline"><code>window.onoffline</code></a> イベントを待ち受けすることにより、ネットワーク接続状態の変化を確認することができます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>online</em> = <em>window</em>.navigator.onLine; +</pre> + +<h3 id="Value">値</h3> + +<p><code>online</code> には <code>true</code> または <code>false</code> の論理値が返されます。</p> + +<h2 id="Example">例</h2> + +<h3 id="Basic_usage">基本的な使い方</h3> + +<p>オンラインであるかを確認するには、以下の例のように <code>window.navigator.onLine</code> を確認します。</p> + +<pre class="brush: js">if (navigator.onLine) { + console.log('online'); +} else { + console.log('offline'); +}</pre> + +<p>ブラウザーが <code>navigator.onLine</code> に対応していない場合は、上記の例では常に <code>false</code>/<code>undefined</code> が返ります。</p> + +<h3 id="Listening_for_changes_in_network_status">ネットワーク状態の変化の待ち受け +</h3> + +<p>ネットワーク接続状態の変化を確認するには、以下の例のように <code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を使用して、 <code>window.online</code> および <code>window.offline</code> を待ち受けします。</p> + +<pre class="brush: js">window.addEventListener('offline', function(e) { console.log('offline'); }); + +window.addEventListener('online', function(e) { console.log('online'); }); +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="Notes">注</h2> + +<p>Firefox 3 で導入された新しいオフライン関連イベントと、このプロパティの詳しい説明は、<a href="/ja/docs/Web/API/Navigator/Online_and_offline_events">Online/Offline Events</a> を参照してください。</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html">HTML5 Rocks: Working Off the Grid With HTML5 Offline</a></li> + <li><a href="https://www.html5rocks.com/en/tutorials/offline/whats-offline/">HTML5 Rocks: "Offline": What does it mean and why should I care?</a></li> + <li><a href="https://hacks.mozilla.org/2010/01/offline-web-applications/">Mozilla Blog: Offline Web Applications</a></li> +</ul> diff --git a/files/ja/web/api/navigator/online_and_offline_events/index.html b/files/ja/web/api/navigator/online_and_offline_events/index.html new file mode 100644 index 0000000000..c0a18179d4 --- /dev/null +++ b/files/ja/web/api/navigator/online_and_offline_events/index.html @@ -0,0 +1,127 @@ +--- +title: オンライン・オフラインイベント +slug: Web/API/Navigator/Online_and_offline_events +tags: + - AJAX + - DOM + - HTML5 + - Intermediate + - NeedsUpdate + - Offline web applications + - Web Development +translation_of: Web/API/Navigator/Online_and_offline_events +original_slug: Web/API/NavigatorOnLine/Online_and_offline_events +--- +<p>一部のブラウザーは、 <a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline イベント</a>を <a href="https://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 仕様書</a>に従って実装しています。</p> + +<h3 id="Overview">概要</h3> + +<p>オフラインに対応した良いウェブアプリケーションを構築するためには、アプリケーションが実際にオフラインになったタイミングを知る必要があります。また、アプリケーションが「オンライン」の状態に復帰したタイミングも知る必要があります。要件を分解すると次のようになります。</p> + +<ol> + <li>サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。</li> + <li>サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。</li> +</ol> + +<p>オンライン／オフラインイベントがこのプロセスを一般化するのに役立ちます。</p> + +<p>残念ながら、これらのイベントは完全には信頼できません。より高い信頼性が必要な場合や、 API がブラウザーに実装されていない場合は、サービスワーカーを使用したり <a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を利用してオフラインであるかどうかを検出することができます。</p> + +<h2 id="API">API</h2> + +<h3 id="navigator.onLine"><code>navigator.onLine</code></h3> + +<p><code><a href="/ja/docs/Web/API/Navigator/onLine">navigator.onLine</a></code> は、 <code>true</code>/<code>false</code> の値を保持しているプロパティです (オンラインの場合は <code>true</code>、オフラインの場合は <code>false</code>)。</p> + +<p>このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル→オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。</p> + +<blockquote cite="https://www.whatwg.org/specs/web-apps/current-work/#offline"> + <code>navigator.onLine</code> 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。</blockquote> + +<p>Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 <a href="/en-US/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。</p> + +<p>このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。</p> + +<h3 id=".22online.22_and_.22offline.22_events">"<code>online</code>" および "<code>offline</code>" イベント</h3> + +<p><a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a> は 2 つの新しいイベントを導入しました。"<a href="/ja/docs/Web/API/document.ononline"><code>online</code></a>" and "<a href="/ja/docs/Web/API/document.onoffline"><code>offline</code></a>" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの <code><body></code> に発行されます。加えて、このイベントは <code>document.body</code> から <code>document</code> へとバブリングし、 <code>window</code> までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。</p> + +<p><a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。</p> + +<p>これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。</p> +<ul> + <li><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を、 <code>window</code>, <code>document</code>, <code>document.body</code> に対して使用します。</li> + <li><code>document</code> または <code>document.body</code> の <code>.ononline</code> または <code>.onoffline</code> プロパティを JavaScript の <code>Function</code> オブジェクトに設定します。(<strong>注意:</strong> <code>window.ononline</code> または <code>window.onoffline</code> は互換性の理由で動作しません)</li> + <li>HTML マークアップで <code><body></code> タグの <code>ononline="..."</code> または <code>onoffline="..."</code> 属性を指定します。</li> +</ul> + +<h2 id="Example">例</h2> + +<p>イベントが機能しているかどうかを確認するために、<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a>を用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。</p> + +<p>こちらが JavaScript 部分です。</p> + +<pre class="brush: js">window.addEventListener('load', function() { + var status = document.getElementById("status"); + var log = document.getElementById("log"); + + function updateOnlineStatus(event) { + var condition = navigator.onLine ? "online" : "offline"; + + status.className = condition; + status.innerHTML = condition.toUpperCase(); + + log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition); + } + + window.addEventListener('online', updateOnlineStatus); + window.addEventListener('offline', updateOnlineStatus); +});</pre> + +<p>CSS 部分です。</p> + +<pre class="brush: css">#status { + position: fixed; + width: 100%; + font: bold 1em sans-serif; + color: #FFF; + padding: 0.5em; +} + +#log { + padding: 2.5em 0.5em 0.5em; + font: 1em sans-serif; +} + +.online { + background: green; +} + +.offline { + background: red; +} +</pre> + +<p>対応する HTML です。 <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p> + +<pre class="brush: html"><div id="status"></div> +<div id="log"></div> +<p>This is a test</p> +</pre> + +<p>実行例はこちらです。</p> + +<p>{{ EmbedLiveSample('Example', '100%', '150') }}</p> + +<h2 id="Notes">注</h2> + +<p>この API がブラウザに実装されていない場合は、サービスワーカーや <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。</p> + +<h2 id="References">参考文献</h2> + +<ul> + <li><a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG Web Applications 1.0 仕様の「Online/Offline イベント」の節</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Firefox に実装された online/offline イベントのバグ追跡</a>および<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">関連バグ</a></li> + <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a></li> + <li><a href="http://ejohn.org/blog/offline-events/">Online/Offline イベントの解説</a></li> +</ul> |