initial commit

1 files changed, 74 insertions, 0 deletions

diff --git a/files/ja/web/api/navigatoronline/online_and_offline_events/index.html b/files/ja/web/api/navigatoronline/online_and_offline_events/index.html
new file mode 100644
index 0000000000..70c0a55c4b
--- /dev/null
+++ b/files/ja/web/api/navigatoronline/online_and_offline_events/index.html
@@ -0,0 +1,74 @@
+---
+title: Online and offline events
+slug: Web/API/NavigatorOnLine/Online_and_offline_events
+translation_of: Web/API/NavigatorOnLine/Online_and_offline_events
+---
+<div>{{outdated()}}</div>
+<div>{{ Fx_minversion_header(3) }}</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>&lt;body&gt;</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>&lt;body&gt;</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"> &lt;!doctype html&gt;
+ &lt;html&gt;
+ &lt;head&gt;
+   &lt;script&gt;
+     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);
+     }
+   &lt;/script&gt;
+   &lt;style&gt;...&lt;/style&gt;
+ &lt;/head&gt;
+ &lt;body onload="loaded()"&gt;
+   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
+   &lt;div id="log"&gt;&lt;/div&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;
+</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>