長押しコンテキストメニュー
写真タイルを長押し（PC は押し続け）すると、タイルがわずかに縮んで「押している」手応えを返し、450ms 後にメニューが浮かぶ。離すか外側をタップすると閉じる。
プレビュー
長押し
操作ホバー（スマホは長押し）でメニューが開きます。
デザインの要点
- 長押しの待ち時間中は対象を 0.96 倍に縮めて「受け付けている」ことを示す。無反応の 450ms は長すぎて指が離れる
- 指が 8px 以上動いたら長押しを取り消す。スクロールの始まりを長押しと誤認しない
- メニューは対象の近くに出し、画面の外へはみ出す位置なら内側へ寄せる。1 番目は最もよく使う操作にする
- ブラウザ標準の contextmenu は抑止する。自前のメニューと二重に出ると操作が止まる
実装メモ
長押しの待ち時間（HOLD_MS）は iOS の標準に近い 450ms を採用しています。タイル自体が <button> なので、キーボードでは Shift+F10 で同じメニューが開きます。実装ではタップ（短押し）で写真を開く動作を別途つけ、長押しと衝突しないように pointerup 時に「長押しが発火していなければ開く」と分岐してください。
コード（コピーして使えます）
<div class="lpc-phone" id="lpc-phone">
<header class="lpc-head"><h2 class="lpc-title">最近の写真</h2><span class="lpc-meta">248 枚</span></header>
<div class="lpc-grid">
<button class="lpc-tile lpc-t1" type="button" data-name="海辺の朝"><span class="lpc-cap">海辺の朝</span></button>
<button class="lpc-tile lpc-t2" type="button" data-name="打ち合わせのホワイトボード"><span class="lpc-cap">ホワイトボード</span></button>
<button class="lpc-tile lpc-t3" type="button" data-name="夕方の公園"><span class="lpc-cap">夕方の公園</span></button>
<button class="lpc-tile lpc-t4" type="button" data-name="レシピのメモ"><span class="lpc-cap">レシピのメモ</span></button>
</div>
<p class="lpc-status" id="lpc-status" role="status" aria-live="polite">タイルを長押しするとメニューが開きます</p>
<div class="lpc-menu" id="lpc-menu" role="menu" hidden>
<p class="lpc-menu-title" id="lpc-menu-title"></p>
<button class="lpc-item" type="button" role="menuitem" data-act="共有">共有</button>
<button class="lpc-item" type="button" role="menuitem" data-act="お気に入りに追加">お気に入りに追加</button>
<button class="lpc-item" type="button" role="menuitem" data-act="アルバムへ移動">アルバムへ移動</button>
<button class="lpc-item lpc-item-danger" type="button" role="menuitem" data-act="削除">削除</button>
</div>
</div>