ぷよクエをたのしく！アプリをつくってみよう！（UI操作編：クリップボード連携）

TABLEタグの内容を他デバイスへ連携したい

表形式UIを作れたので内容を保存したい、または他のデバイスへ送りたいと思った。
Geminiにこれを相談すると、JSON形式の文字列へ加工し、
・エクスポート＆インポートという機能を実装
　ファイル経由でアップロードやダウンロードする方法
・クリップボード連携
の２通りの方法があるとおしえてもらった。

メリット・デメリットの比較

どういうメリットがあるのか考えてみた結果、クリップボード連携で行こうと思った。
【メリット】
・そもそもファイル化する必要がない
・エクスポート＆インポートの実装は割と難しい印象
　クリップボード連携のほうが簡単
・実際の運用でデバイスを選ばない（ブラウザ全般でサポートしているらしい）
・「コピペ」の内容を受け渡す方法をユーザーが選択できる
【デメリット】
・ブラウザに権限がある前提で動作する
　初期状態では権限が付与されていない

DOM APIをクラス化

クラス化といっても、どこからでも使えること、DOM APIを直接使わない、くらいのメリットしかないけど。

export class ClipboardHelper {
    public static async put(text: string) {
        try {
            await navigator.clipboard.writeText(text)
        } catch (err) {
            console.error("コピー失敗...", err)
            return false
        }
        return true
    }
    public static async get(): Promise<string | null> {
        let text = ``
        try {
            text = await navigator.clipboard.readText();
        } catch (err) {
            console.error("ペースト失敗...", err);
            return null
        }
        return text
    }
}

使い方は、こんな感じ。

//コピー
const toText = toJsonText(何かのオブジェクトインスタンス)
await ClipboardHelper.put(toText)

//ペースト
const fromText = await ClipboardHelper.get()

「navigator.clipboard」を使ううえで気をつけること。

・ブラウザのデバッガでステップ実行ができない
これ、最初はハマるというか結構ハマって、なんでできないのかな？って思うけど、そういうものらしい。
実際にやってみると、こんな例外がでた。

ClipboardHelper.js:8 コピー失敗... NotAllowedError: Failed to execute 'writeText' on 'Clipboard': Document is not focused.
    at ClipboardHelper.put (ClipboardHelper.js:5:39)

※Edgeでの結果。他のブラウザでは試していません。

次は、ブラウザのタブ間連携

次で、最後になると思います。
最後は、一つのアプリを何かの仕様に基づき２つ以上のタブへ分割した場合の、タブ間連携を考えてみる。

つづく。