initial commit

2 files changed, 201 insertions, 0 deletions

diff --git a/files/ja/web/api/customevent/customevent/index.html b/files/ja/web/api/customevent/customevent/index.html
new file mode 100644
index 0000000000..d3d3978993
--- /dev/null
+++ b/files/ja/web/api/customevent/customevent/index.html
@@ -0,0 +1,104 @@
+---
+title: CustomEvent()
+slug: Web/API/CustomEvent/CustomEvent
+translation_of: Web/API/CustomEvent/CustomEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code><strong>CustomEvent()</strong></code> コンストラクターは新しい {{domxref("CustomEvent")}} を生成します。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"> <var>event</var> = new CustomEvent(<var>typeArg</var>, <var>customEventInit</var>);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><var>typeArg</var></dt>
+ <dd>{{domxref("DOMString")}} で、イベントの名前を表します。</dd>
+ <dt><var>customEventInit</var> {{optional_inline}}</dt>
+ <dd><code>CustomEventInit</code> 辞書で、以下のフィールドを持ちます。
+ <ul>
+  <li><code>"detail"</code>: 省略可で既定値は <code>null</code> であり、任意の型であり、イベントに関連付けられたイベントに依存する値です。</li>
+ </ul>
+
+ <div class="note">
+ <p><code>CustomEventInit</code> 辞書は、 {{domxref("Event.Event", "EventInit")}} 辞書のフィールドも受け付けます。</p>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>A new <code>CustomEvent</code> object of the specified type, with any other properties configured according to the <code>CustomEventInit</code> dictionary (if one was provided).</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">// add an appropriate event listener
+obj.addEventListener("cat", function(e) { process(e.detail) });
+
+// create and dispatch the event
+var event = new CustomEvent("cat", {
+  detail: {
+    hazcheeseburger: true
+  }
+});
+obj.dispatchEvent(event);</pre>
+
+<p>その他の例は、<a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">イベントの作成とトリガ</a>にあります。</p>
+
+<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('DOM WHATWG','#interface-customevent','CustomEvent()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.CustomEvent.CustomEvent")}}</p>
+
+<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+
+<p>Internet Explorer 9 以上では、 <code>CustomEvent()</code> の機能を以下のコードで代替することができます。</p>
+
+<pre class="brush: js">(function () {
+
+  if ( typeof window.CustomEvent === "function" ) return false;
+
+  function CustomEvent ( event, params ) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+    return evt;
+   }
+
+  CustomEvent.prototype = window.Event.prototype;
+
+  window.CustomEvent = CustomEvent;
+})();</pre>
+
+<p>Internet Explorer 9 以上では CustomEvent オブジェクトを window に追加していますが、正しい実装では、これは関数です。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li><a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">イベントの作成とトリガ</a></li>
+</ul>
diff --git a/files/ja/web/api/customevent/index.html b/files/ja/web/api/customevent/index.html
new file mode 100644
index 0000000000..5d08ed2c2f
--- /dev/null
+++ b/files/ja/web/api/customevent/index.html
@@ -0,0 +1,97 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+tags:
+  - API
+  - CustomEvent
+  - DOM
+  - Interface
+  - NeedsExample
+  - Reference
+  - インターフェイス
+translation_of: Web/API/CustomEvent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>CustomEvent</code></strong> インターフェイスは、何らかの目的でアプリケーションから初期化されるイベントを表します。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Constructor" name="Constructor">コンストラクター</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
+ <dd><code>CustomEvent</code> を生成します。</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
+ <dd>イベント初期化時にどんなデータでも受け渡すことができます。</dd>
+</dl>
+
+<p><em>このインターフェイスは親である {{domxref("Event")}} からプロパティを継承します</em></p>
+
+<p>{{Page("/ja/docs/Web/API/Event", "Properties")}}</p>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p><code>CustomEvent</code> オブジェクトを初期化します。もし該当イベントがすでに移譲されたことがある場合、この関数は何もしません。</p>
+ </dd>
+</dl>
+
+<p><em>このインターフェイスは親である {{domxref("Event")}} から関数を継承します</em>。</p>
+
+<p>{{Page("/ja/docs/Web/API/Event", "Methods")}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</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('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<h2 id="Firing_from_privileged_code_to_non-privileged_code" name="Firing_from_privileged_code_to_non-privileged_code">特権を持つコードから持たないコードへのイベント発行</h2>
+
+<p><code>CustomEvent</code> を特権を持つコード (つまり、エクステンション) から持たないコード (つまり、ウェブページ) へ発行する時、セキュリティの問題を考慮すべきです。Firefox と他の Gecko アプリケーションは、自動的にセキュリティホールを防ぐ為、他者から直接利用される1つのコンテキスト内で作られるオブジェクトを制限します。しかし、この制限によりコードが期待した通りに動作しない可能性があります。</p>
+
+<p><code>CustomEvent</code> オブジェクトが作られている間、同じ <a href="/ja/docs/XUL/window">window</a> からオブジェクトを作る必要があります。作られた <code>CustomEvent</code> の <code>detail</code> 属性は同じ制限の影響を受けるでしょう。制限のないコンテンツからは <code>String</code> と <code>Array</code> の値は読み込み可能ですが、カスタム <code>Object</code> は読み込めません。カスタムオブジェクトを使用している間、<a href="/ja/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.cloneInto">Components.utils.cloneInto()</a> を使ってコンテンツのスクリプトから読み込み可能なオブジェクトの属性を定義する必要があるでしょう。</p>
+
+<pre class="brush: js">// doc はコンテンツのドキュメントの参照
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}</pre>
+
+<p>しかし、関数を外部にさらすと、 chrome 特権でコンテンツスクリプトの実行を許可することになり、脆弱性となる可能性があることを覚えておく必要があります。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Window.postMessage()")}}</li>
+ <li><a href="/ja/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">特権を持つページと持たないページの相互作用</a></li>
+ <li><a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">イベントの生成とトリガー</a></li>
+</ul>