クリップボード連携のUXを整える — iOSのペースト許可バナーを増やさずに「コピー」と「貼り付け」を成立させる

個人開発で運用している壁紙アプリに招待コードの引き換え画面を足したとき、画面を開くたびに「○○からペーストしました」という小さな通知が画面上部に出てしまい、テスターから「これは大丈夫なものなんですか」と何度も尋ねられました。原因はすぐに分かりました。親切心のつもりで、画面が表示されると同時にクリップボードを読み、コード欄へ自動入力していたのです。読んだ瞬間にあのバナーが出ます。私自身、App Store に出している複数のアプリで同じ落とし穴を踏んでおり、これは一度きちんと整理しておく価値のある題材だと考えています。

クリップボード連携は、コードを1行コピーするだけの単純な機能に見えて、iOS の挙動を知らないと「うるさいアプリ」になってしまいます。ここでは expo-clipboard を使いながら、ペースト許可バナーを必要以上に出さず、それでいてコピーと貼り付けが気持ちよく成立する設計を整理します。

ペースト許可バナーはどこで発生するのか

混乱しやすいのですが、コピー（書き込み）とペースト（読み取り）では扱いがまったく違います。

書き込み、つまり Clipboard.setStringAsync() は何の通知も出しません。ユーザーがコピーボタンを押した結果なので、当然といえば当然です。問題は読み取り側です。iOS 16 以降、別アプリがコピーした内容を Clipboard.getStringAsync() で読むと、「○○からペーストしました」というバナーが表示されます。これはユーザーに「いま勝手にクリップボードを覗きましたよ」と知らせるための仕様で、無効化できません。

ここで効いてくるのが「いつ読むか」です。私の失敗は、ユーザーが何も操作していないのに画面表示と同時に読んでしまったことでした。ユーザー自身が「貼り付け」を押した直後の読み取りなら、バナーが出ても文脈と一致しているので不快になりません。逆に、開いた瞬間や数秒おきのポーリングで読むと、身に覚えのないバナーが連発し、不信感につながります。

読むタイミングを決めるときは、次の順序で考えると迷いません。

1. クリップボードに何か入っているかは、内容を読まずに確認する
2. 「貼り付け」ボタンは、入っているときだけ押せるようにする
3. 実際に中身を読むのは、ユーザーがそのボタンを押した直後だけにする

この3点を守るだけで、不要なバナーはほぼ回避できます。

hasStringAsync で内容を読まずにボタンを出し分ける

最後の行が鍵です。hasStringAsync() は「クリップボードに文字列があるか」を真偽値で返すだけで、中身そのものは読みません。そのためバナーも出ません。これを使えば、クリップボードが空のときは「貼り付け」ボタンを無効化し、何か入っているときだけ押せるようにできます。実際に読むのはユーザーがそのボタンを押した瞬間だけです。

import { useEffect, useState } from "react";
import * as Clipboard from "expo-clipboard";
 
function RedeemCodeField({ onPaste }: { onPaste: (value: string) => void }) {
  const [canPaste, setCanPaste] = useState(false);
 
  // 中身は読まず「有無」だけ確認するのでバナーは出ない
  useEffect(() => {
    let mounted = true;
    Clipboard.hasStringAsync().then((has) => {
      if (mounted) setCanPaste(has);
    });
    return () => {
      mounted = false;
    };
  }, []);
 
  // 実際に読むのはユーザーがボタンを押した瞬間だけ
  const handlePaste = async () => {
    const text = await Clipboard.getStringAsync();
    if (text) onPaste(text.trim());
  };
 
  return (
    <PasteButton disabled={!canPaste} onPress={handlePaste} />
  );
}

hasStringAsync() を画面表示時に一度呼ぶだけなら、バナーは出ません。アプリがフォアグラウンドに戻ったタイミングでも確認したい場合は、AppState の change イベントで active になったときに再度 hasStringAsync() を呼びます。ここでも読むのは有無だけなので安全です。

招待コードのように形式が決まっているなら、貼り付けた文字列をそのまま入れず、text.trim() で前後の空白を落としたうえで、想定する形式に合うかを軽く検証してから反映すると、ユーザーが余計な文字ごとコピーしてしまったときにも破綻しません。