JavaScriptでiOSのクリップボードにコピー-RilsTIL(1h)

iOSのクリップボードにコピーする

clipboard_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  copy(event) {
    event.preventDefault();
    // ここにデータをfetchして加工するプログラムを記述
    copyClipBoard(resData); //取得したデータをcopyClipBoardにわたす。
    
    const copyClipBoard = (targetValue) => {
      if (navigator.clipboard) {
        navigator.clipboard
          .writeText(targetValue)
          .then(() => {
            alert("Successfully copied");
          })
          .catch((err) => {
            console.error("Error:", err);
            fallbackCopyText(targetValue);
          });
      } else {
        console.warn("Clipboard API is not supported.");
        fallbackCopyText(targetValue);
      }
    };
    const fallbackCopyText = (text) => {
      // iOSの互換性のためのフォールバック
      const textarea = document.createElement("textarea");
      textarea.value = text;
      textarea.style.position = "absolute";
      textarea.style.width = "300px";
      textarea.style.height = "400px";
      textarea.style.top = "0";
      textarea.style.right = "0";
      textarea.style.zIndex = "1000";
      document.body.appendChild(textarea);
      textarea.select();
      setTimeout(() => {
        document.body.removeChild(textarea);
      }, "5000");
    };
  }
}

• WebアプリのボタンでiOSのクリップボードにコピーする方法です。
• navigator.clipboard.writeText(targetValue)が基本です。

iOSのエラー

Unhandled Promise Rejection: NotAllowedError:
The request is not allowed by the user agent or
the platform in the current context,
possibly because the user denied permission.

• iOSではエラーになります。
• とりあえずテキストボックスを表示して自分でコピーしてもらいます。

参考

• iOSの逃げ方はChatGPTさんです。

Webインスペクタ

• iPadとMacを繋いで、開発者ツールを開く方法です。

▼ iPad 側の設定

ホーム画面から、［設定］から［Safari］を開く

画面一番下の［詳細］を開き、［Webインスペクタ］をONにする

▼Macを側の設定

Safariを開く

Safariのメニューから、［環境設定］を開く

［詳細］タブをクリックし、［メニューバーに”開発”メニューを表示］にチェックを付ける

[開発]を開き、iPadをクリックする

iPadで許可をタップ

CSSのcalc

calcとzIndex

//bad
textarea.style.right = "calc(50vw-200px)"

//good
textarea.style.right = "calc(50vw - 200px)"

//z-index => zIndex
textarea.style.zIndex = "1000"

• 小さいことですが、calcのエラーについて、スペースを忘れないように気をつけます。
• zIndexやclassNameなど他にもJavaScriptの書き方がありそうです。