files/ja/web/api/navigator/clipboard/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

---
title: Navigator.clipboard
slug: Web/API/Navigator/clipboard
tags:
  - API
  - Clipboard
  - Navigator
  - Property
  - Read-only
  - Reference
  - クリップボード
  - コピー
  - プロパティ
  - 切り取り
  - 貼り付け
translation_of: Web/API/Navigator/clipboard
---
<p><span class="seoSummary"><a href="/ja/docs/Web/API/Clipboard_API">Clipboard API</a> は <strong>{{domxref("Navigator")}}</strong> インターフェイスに読み取り専用の <strong><code>clipboard</code></strong> プロパティを追加し、クリップボードの内容を読み書きするために使用する {{domxref("Clipboard")}} オブジェクトを返します。</span> Clipboard API は切り取り、コピー、貼り付け機能をウェブアプリケーションに実装するために使用することができます。</p>

<p>非同期のクリップボード読み書きメソッドを使用するには、ユーザーがウェブサイトやアプリにクリップボードへのアクセスを許可する必要があります。この許可は <a href="/ja/docs/Web/API/Permissions_API">Permissions API</a> から、 <code>"clipboard-read"</code> や <code>"clipboard-write"</code> の権限を取得する必要があります。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox"><em>theClipboard</em> = navigator.clipboard;
</pre>

<h2 id="Value" name="Value">値</h2>

<p>システムのクリップボードにアクセスするために使用される {{domxref("Clipboard")}} オブジェクトです。</p>

<h2 id="Examples" name="Examples">例</h2>

<p>以下のコードは、クリップボードの内容を読み取る目的でシステムのクリップボードにアクセスするため、 <code>navigator.clipboard</code> を使用します。</p>

<pre class="brush: js">navigator.clipboard.readText().then(
  clipText =&gt; document.querySelector(".cliptext").innerText = clipText);</pre>

<p>このスニペットは、クラスが <code>"cliptext"</code> の要素の内容を、クリップボードのテキストコンテンツで置き換えます。おそらくこのコードは現在のクリップボードの内容を表示するブラウザー拡張機能に使用されているもので、定期的または特定のイベントが発火したときに自動的に更新されます。</p>

<p>クリップボードが空であるか、テキストが含まれていない場合、 <code>"cliptext"</code> の要素の内容はクリアされます。これは、クリップボードが空かテキストが含まれていない場合、 {{domxref("Clipboard.readText", "readText()")}} が空文字列を返すからです。</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('Clipboard API','#navigator-clipboard','navigator.clipboard')}}</td>
   <td>{{Spec2('Clipboard API')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.Navigator.clipboard")}}</p>

<div>{{APIRef("Clipboard API")}}</div>