こぴぺったり

ワンタップコピーの仕組み

こぴぺったりのワンタップコピー機能の使い方、Clipboard API のブラウザ要件 (HTTPS / フォーカス必須)、誤クリック対策の設計、視覚フィードバックの仕組みを解説します。

「こぴぺったり」の核となる機能は ワンタップコピー です。アイテムの行をクリック (またはタップ) するだけで、本文がクリップボードに即座に書き込まれます。本ページでは、操作方法とブラウザ要件、誤クリック対策の設計を解説します。

基本操作

アイテム一覧で、行のどこかをクリックまたはタップしてください。本文がクリップボードにコピーされます。

コピー成功時には:

という視覚フィードバックがあるので、コピーされたかどうかが一目で分かります。

明示的な コピーボタン も行内に用意されているため、行クリックを誤クリックとして扱いたい状況ではこちらを使ってください (例: 行を長押しメニューで操作したいときなど)。

ブラウザの要件

クリップボード書き込みには Clipboard API (navigator.clipboard.writeText()) を使用しています。これは現代のブラウザの標準 API ですが、いくつかの 要件 があります。

HTTPS が必須

Clipboard API は セキュアコンテキスト (HTTPS / localhost) でのみ動作します。HTTP のサイトでは使えません。「こぴぺったり」のサイトは HTTPS で配信されているため通常は問題ありません。

ローカルで開発する場合は localhost が許容されているため、vite dev の URL でも問題なく動作します。

ページにフォーカスが必要

Chrome や Safari は、ページがバックグラウンドにある (タブが非アクティブ、ウィンドウが最小化) ときの書き込みをブロックします。

「こぴぺったり」を別タブで開きながら別アプリを操作している場合、いったん「こぴぺったり」のタブをクリックしてフォーカスしてからコピー操作する必要があります。これは仕様上の制約で、回避はできません。

iOS Safari の制約

iOS Safari では Clipboard API はユーザー操作 (タップなど) に直接連動した処理でしか動作しません。こぴぺったりでは行のタップイベント内で writeText() を呼んでいるため、この制約には抵触しません。

誤クリック対策の設計

行全体がクリック可能であるため、「コピーしたつもりがなかったのに勝手にコピーされた」という誤動作が発生しやすくなります。こぴぺったりでは以下の設計でこれを軽減しています。

1. メニュー (⋮) は別領域

行右側の ⋮ メニュー は明示的に区切られたボタンで、ここをタップしても行のコピー処理は走りません。更新・移動・アーカイブ・削除などの操作は誤コピーの心配なく実行できます。

2. ドラッグ操作と区別

ソート「手動」モードのときに行をドラッグして並び替える場合、マウスダウン → ドラッグ → ドロップの一連の操作はコピーとして扱いません。「クリック」 (短時間のマウスダウン → アップ) のみがコピー扱いになります。

3. 視覚フィードバックでコピー成功を即時通知

コピー後すぐに行が一瞬光るため、誤ってコピーしてしまった場合も気づきやすく、続けて目的のアイテムをコピーすれば前のものは上書きされます。

大量テキストのコピー

クリップボードに書き込めるサイズはブラウザ実装に依存しますが、数 MB 程度までは問題なく動作します。こぴぺったりで保存できる本文は localStorage の容量制限 (約 5MB) 以内のため、保存したものはすべてコピーできると考えてよいです。

ただし、Excel や Word に貼り付ける場合、長すぎるテキストは描画が重くなることがあります。これは貼り付け先アプリの問題で、こぴぺったり自体の制約ではありません。

コピー時の文字コード

Clipboard API は UTF-8 (内部的には UTF-16) でテキストを扱います。日本語・絵文字・特殊記号はすべて問題なくコピーできます。

ただし、貼り付け先のアプリが古い文字コードしかサポートしていない場合 (例: Shift_JIS のみのレガシーアプリ)、貼り付け時に文字化けする可能性があります。これは貼り付け先側の制約です。

改行・空白の扱い

こぴぺったりは本文をそのままクリップボードに書き込みます。改行文字 (\n) や連続する空白も保持されます。

関連ページ