10行でクリップボードデータをHTMLサイトに表示させる

10行以内のプログラム

10行プログラムでクリップボードに保存したテキストデータをサイト上に表示させることをやってみます。

クリップボードデータをブラウザで取得するにはユーザの許可が必要になります。
ページ起動時にメッセージが表示されるので許可してください。

10行プログラム

HTML, CSS, JavaScript部分を全て1つのファイル(index.html)に収めました。
10行以内にするため、html, head, bodyなどのコードの整列がいま一つですがきちんとしたHTMLです

index.html

<!DOCTYPE html>
<html><head><title>10line clipboard</title></head>
<body style="background-color:royalblue">
    <p class="clipboard" style="word-break: break-all;color: white;font-size: 64pt"></p>
    <script>
        navigator.clipboard.readText().then(
            data => document.querySelector(".clipboard").textContent = data
        )
    </script>
</body></html>

解説

HTMLとCSS部分

クリップボード内容を表示する場所は、pタグのclipboardクラスの箇所です。
長い文字列を考慮して単語の改行をword-break: break-all として、ブラウザの端で改行するようにしています。

<p class="clipboard" style="word-break: break-all;color: white;font-size: 64pt"></p>

JavaScript部分

一番のポイントはscriptタグ内の処理です。
navigator.clipboard.readText() は、クリップボード内にテキストデータがあれば読み取ってくれます。

読み取った場合、then()の処理に移ります。

navigator.clipboard.readText().then(
    data => document.querySelector(".clipboard").textContent = data
)

data => ~ の部分が分かりにくいので図示するとこんな感じとなります。

以上、10行でクリップボードデータをHTMLサイトに表示させるでした。

コメント

タイトルとURLをコピーしました