---
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>



<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() を使うことができます。HTTPサイトに適用されたコンテンツスクリプトは、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>