initial commit

3 files changed, 262 insertions, 0 deletions

diff --git a/files/ja/web/api/clipboard/index.html b/files/ja/web/api/clipboard/index.html
new file mode 100644
index 0000000000..cd25f411b6
--- /dev/null
+++ b/files/ja/web/api/clipboard/index.html
@@ -0,0 +1,93 @@
+---
+title: Clipboard
+slug: Web/API/Clipboard
+tags:
+  - API
+  - Clip
+  - Clipboard
+  - Clipboard API
+  - Cut
+  - Editing
+  - Interface
+  - Pasteboard
+  - Reference
+  - copy
+  - paste
+translation_of: Web/API/Clipboard
+---
+<p>{{APIRef("Clipboard API")}}</p>
+
+<div class="blockIndicator note">
+<p><strong>クリップボード</strong>とは、短期間のデータ格納や転送のために使われるバッファであり、文書やアプリケーションの間で使われます。<br>
+ これは、通常名前のない一時的な<a href="https://ja.wikipedia.org/wiki/バッファ" title="Data buffer">バッファ</a>として実装され、貼り付けバッファと呼ばれることもあり、その環境で定義された<a href="https://ja.wikipedia.org/wiki/アプリケーションプログラミングインタフェース" title="Application programming interface">アプリケーションプログラムインターフェイス</a>を使うことで、ほとんど全てのプログラムがアクセスすることができます。</p>
+
+<p>多くのアプリケーションでは、<a href="https://ja.wikipedia.org/wiki/ショートカットキー">ショートカットキー</a>や<a href="https://ja.wikipedia.org/wiki/メニュー_(コンピュータ)">メニュー</a>など、このインターフェイスに結び付けられた<a href="https://ja.wikipedia.org/wiki/入出力">ユーザーからの入力</a>を使うことにより、クリップボード機能にアクセスします。</p>
+</div>
+
+<div></div>
+
+<p><span class="seoSummary"><strong><code>Clipboard</code></strong> インターフェイスは <a href="/ja-jp/docs/Web/API/Clipboard_API">Clipboard API</a> を実装します。この API は、ユーザーが許可する場合、システムクリップボードの内容に対する読み取りと書き込みの両方を提供します。</span> Clipboard API は、ウェブアプリケーションにカット (切り取り)、コピー (複写)、ペースト (貼り付け) の機能を実装するために使うことができます。</p>
+
+<p>システムクリップボードは、グローバルの {{domxref("Navigator.clipboard")}} プロパティにより公開されています。</p>
+
+<p><code>Clipboard</code> オブジェクトのメソッド呼び出しは、ユーザーが <a href="/ja-jp/docs/Web/API/Permissions_API">Permissions API</a> と <code>"clipboard-read"</code> や <code>"clipboard-write"</code> パーミッションを適切に使って必要なパーミッションを与えていない場合、成功しません。</p>
+
+<div class="note">
+<p><strong>注意:</strong> 現実には、ブラウザーがクリップボードへアクセスする場合に必要となることは、非常に多岐に渡ります。詳細は {{anch("Clipboard_availability", "クリップボードの可用性")}} を参照してください。</p>
+</div>
+
+<p>Clipboard API の全てのメソッドは非同期で動作します。つまり、それらはクリップボードにアクセスできたときに解決される {{jsxref("Promise")}} オブジェクトを返します。この Promise は、クリップボードへのアクセスが拒絶された場合には拒否されます。</p>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em><code>Clipboard</code> は、{{domxref("EventTarget")}} インターフェイスに基づいており、そのメソッドを含みます。</em></p>
+
+<dl>
+ <dt>{{domxref("Clipboard.read()","read()")}}</dt>
+ <dd>クリップボードから任意のデータ (画像など) を要求し、{jsxref("Promise")}} を返します。データが取得されたとき、この Promise はそのデータを提供する {{domxref("DataTransfer")}} オブジェクトにより解決されます。</dd>
+ <dt>{{domxref("Clipboard.readText()","readText()")}}</dt>
+ <dd>システムクリップボードからテキストを要求します。利用可能になるとクリップボードのテキストを含む {{domxref("DOMString")}} により解決される <code>Promise</code> を返します。</dd>
+ <dt>{{domxref("Clipboard.write()","write()")}}</dt>
+ <dd>システムクリップボードに任意のデータを書き込みます。この非同期操作は、返された <code>Promise</code> が解決することにより、その操作が完了したことを示します。</dd>
+ <dt>{{domxref("Clipboard.writeText()","writeText()")}}</dt>
+ <dd>システムクリップボードにテキストを書き込み、そのテキストがクリップボードに完全にコピーされたときに解決する <code>Promise</code> を返します。</dd>
+</dl>
+
+<h2 id="Clipboard_availability" name="Clipboard_availability">クリップボードの可用性</h2>
+
+<p>非同期の Clipboard API は比較的最近追加されたものであり、ブラウザーへの実装プロセスはまだ完了していません。潜在的なセキュリティ懸念事項や技術的複雑さの両方により、ほとんどのブラウザーはこの API の統合を少しずつ行っています。</p>
+
+<p>例えば、Firefox はまだ <code>"clipboard-read"</code> と <code>"clipboard-write"</code> パーミッションをサポートしていないため、これとは異なる方法でクリップボードの内容にアクセスし変更するメソッドへのアクセスを制限します。</p>
+
+<p>WebExtension の場合、clipboardRead や clipboardWrite パーミッションを要求することで clipboard.readText() や clipboard.writeText() を使うことができます。ウェブサイトに適用されたコンテンツスクリプトは、Clipboard オブジェクトにアクセスすることはできません。<a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">Extensions in Firefox 63</a> を参照してください。</p>
+
+<p>また、{{domxref("Clipboard.read", "read()")}} と {{domxref("Clipboard.write", "write()")}} はデフォルトで無効にされており、これらを有効にするには設定を変更する必要があります。これらを使う前にブラウザー実装状況の表を確認してください。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#clipboard-interface','Clipboard')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("api.Clipboard")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Document.execCommand()")}}</li>
+</ul>
diff --git a/files/ja/web/api/clipboard/read/index.html b/files/ja/web/api/clipboard/read/index.html
new file mode 100644
index 0000000000..2fc53c2dd4
--- /dev/null
+++ b/files/ja/web/api/clipboard/read/index.html
@@ -0,0 +1,94 @@
+---
+title: Clipboard.read()
+slug: Web/API/Clipboard/read
+tags:
+  - API
+  - Clip
+  - Clipboard
+  - Clipboard API
+  - Editing
+  - Method
+  - Reference
+  - Scrap
+  - Text
+  - paste
+  - read
+translation_of: Web/API/Clipboard/read
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p><span class="seoSummary">{{domxref("Clipboard")}} インターフェイスの <strong><code>read()</code></strong> メソッドは、クリップボードの内容のコピーを要求し、戻り値の {{jsxref("Promise")}} が解決されたときにそのデータを取得できます。{{domxref("Clipboard.readText", "readText()")}} とは異なり、<code>read()</code> メソッドは画像など任意のデータを取得することができます。</span></p>
+
+<p>クリップボードから読み込みを行うためには、まず <code>"clipboard-read"</code> パーミッションを取得する必要があります。</p>
+
+<div class="note">
+<p><strong>注意:</strong> 非同期の Clipboard API と <a href="/ja/docs/Web/API/Permissions_API">Permissions API</a> は、ほとんどのブラウザーでは組み込み途中の状態です。そのため、パーミッションなどが公式仕様とは異なっていることがよくあります。これらのメソッドを使う前に {{anch("Browser_compatibility", "ブラウザー実装状況")}} を確認してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.read();</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>クリップボードの内容を持つ {{domxref("DataTransfer")}} に解決される、{{jsxref("Promise")}} オブジェクト。クリップボードへのアクセスが許可されない場合、この Promise は拒否される。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この使用例は、最初に {{domxref("Permissions.query", "navigator.permissions.query()")}} を使って <code>"clipboard-read"</code> 権限があるかどうか (またはプロンプトによってユーザーがそれを許可するかどうか) を調べ、その後クリップボードに現在あるデータを取得します。もしデータがプレーンテキストでない場合、エラーメッセージを表示します。そうでない場合は、変数 <code>textElem</code> により参照している要素の内容を、クリップボードの内容に置き換えます。</p>
+
+<pre class="brush: js">// まず、Permissions API を使って、
+// "clipboard-read" 機能を使えるかどうか確認します。
+
+navigator.permissions.query({name: "clipboard-read"}).then(result =&gt; {
+  // クリップボードの読み取りが許可されているか、またはプロンプトによって
+  // ユーザーがそれを許可する場合、処理を続行します。
+
+  if (result.state == "granted" || result.state == "prompt") {
+    navigator.clipboard.read().then(data =&gt; {
+      for (let i=0; i&lt;data.items.length; i++) {
+        if (data.items[i].type != "text/plain") {
+          alert("クリップボードの内容がテキストでないため、読み込めません。");
+        } else {
+          textElem.innerText = data.items[i].getAs("text/plain");
+        }
+      }
+    });
+  }
+});
+</pre>
+
+<div class="note">
+<p><strong>注意:</strong> 現時点で Firefox は <code>read()</code> を実装していますが、<code>"clipboard-read"</code> パーミッションは認識できません。そのため、<a href="/ja/docs/Web/API/Permissions_API">Permissions API</a> を使ってこの API にアクセスしようとしても、失敗するでしょう。</p>
+</div>
+
+<div class="note">
+<p><strong>日本語訳注:</strong> 翻訳時点 (2020/02/15) で、この使用例は Google Chrome (v80) でも実行できなくなっています。クリップボードから取得するデータの型が <code>DataTransfer</code> から <code><a href="https://www.w3.org/TR/clipboard-apis/#typedefdef-clipboarditems">ClipboardItems</a></code> に変更されるなど、仕様が変更されているためです。</p>
+</div>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#dom-clipboard-read','read()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("api.Clipboard.read")}}</p>
diff --git a/files/ja/web/api/clipboard/readtext/index.html b/files/ja/web/api/clipboard/readtext/index.html
new file mode 100644
index 0000000000..9ce26b644f
--- /dev/null
+++ b/files/ja/web/api/clipboard/readtext/index.html
@@ -0,0 +1,75 @@
+---
+title: Clipboard.readText()
+slug: Web/API/Clipboard/readText
+tags:
+  - API
+  - Async Clipboard API
+  - Clip
+  - Clipboard
+  - Clipboard API
+  - Cut
+  - Editing
+  - Method
+  - Pasteboard
+  - Reference
+  - Text
+  - copy
+  - paste
+  - readText
+translation_of: Web/API/Clipboard/readText
+---
+<div>{{APIRef("Clipboard API")}}</div>
+
+<p><span class="seoSummary"><strong>{{domxref("Clipboard")}}</strong> インターフェイスの <strong><code>readText()</code></strong> メソッドは、システムクリップボードのテキストの内容のコピーに解決される {{jsxref("Promise")}} を返します。</span></p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.readText()</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<p>なし。</p>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>クリップボードのテキストの内容を持つ {{domxref("DOMString")}} に解決される、{{jsxref("Promise")}} オブジェクト。クリップボードが空であったり、テキストがないか、クリップボードの内容を表す {{domxref("DataTransfer")}} オブジェクトがテキストの表現を持たない場合は、空文字列を返します。</p>
+
+<p>テキストでない内容をクリップボードから読むためには、代わりに {{domxref("Clipboard.read", "read()")}} メソッドを使ってください。クリップボードへのテキストの書き込みには、{{domxref("Clipboard.writeText", "writeText()")}} を使ってください。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この使用例は、クリップボードからテキストの内容を取得し、ある要素の内容にその取得されたテキストを設定します。</p>
+
+<pre class="brush: js">navigator.clipboard.readText().then(
+  clipText =&gt; document.getElementById("outbox").innerText = clipText);</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Clipboard API','#dom-clipboard-readtext','readText()')}}</td>
+   <td>{{Spec2('Clipboard API')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("api.Clipboard.readText")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Clipboard_API">Clipboard API</a></li>
+ <li>{{domxref("Clipboard.writeText()")}}</li>
+ <li>{{domxref("Clipboard.write()")}}</li>
+</ul>