Image Pin Block

画像の上にラベル付きのピンを配置し、クリックやタップで説明を表示したり、同じページ内の見出しなどへジャンプできるようにする WordPress の Gutenberg ブロックです。アプリ紹介ページのスクリーンショットのように、画像の各部分から対応する説明箇所へ誘導する用途を想定して作られました。ビルドツールを使わない素の JavaScript / PHP / CSS で実装されています。

主な機能

• 画像上の好きな位置にピンを追加し、ドラッグで位置調整(画像に対する%座標で保存されるため、表示サイズが変わっても相対位置を保ちます)
• ピンごとに、近くに常時表示するラベル・クリックやタップで表示する説明文・同じページ内の見出し等への遷移先を設定できます
• ラベルはドラッグで、ピン/マーカーの周囲360度好きな位置へ配置できます
• マーカー画像: ピンごとに丸マーカーの代わりに任意の画像を指定できます。拡大率(元画像サイズを基準にした%)とラベル表示の有無を個別に設定できます
• PC / スマホでそれぞれ独立した動作設定(ホバー・クリック・タップの組み合わせ)を選べます
• ピンの追加・編集はすべて専用のフルスクリーン編集画面(Fullscreen Editor)で行います。ダブルクリックで新規ピンの追加位置を確認してから作成する、といった誤操作を防ぐ導線になっています
• 現在の状態を元画像の解像度でPNG画像として書き出せます(「画像として保存」)
• ピンのサイズ・色・ラベル/ポップオーバーの背景色・不透明度・文字色・縁取りを、WordPress 標準のカラーピッカー等で設定可能
• 画像の拡大表示(Lightbox): テーマのLightbox機能には依存しない自前実装です。ドラッグ/スワイプでの移動、マウスホイール/ピンチ/画面上のボタンでの拡大縮小に対応しています(この拡大表示は上記のFullscreen Editorとは別の、フロント表示側の機能です)
• ビルドツール不要(webpack 等を使わない素の JavaScript / PHP / CSS)

スクリーンショット

準備中です(実際の画面キャプチャは今後追加予定)。

インストール

方法A: GitHub Releases から ZIP をダウンロード

1. このリポジトリの Releases ページから最新の ZIP ファイルをダウンロードします
2. WordPress 管理画面の「プラグイン」→「新規追加」→「プラグインのアップロード」から ZIP ファイルを選択してインストールします
   • または、ZIP を解凍して wp-content/plugins/image-pin-block フォルダとして直接配置しても構いません
3. プラグイン一覧から「Image Pin Block」を有効化します

方法B: git clone

cd wp-content/plugins
git clone <このリポジトリのクローン用URL> image-pin-block

<このリポジトリのクローン用URL> は、GitHub の「Code」ボタンから取得できる URL に置き換えてください。配置後、WordPress 管理画面のプラグイン一覧から「Image Pin Block」を有効化します。

基本的な使い方

1. 投稿・固定ページの編集画面で、ブロック挿入メニューから「Image Pin Block」を追加します
2. 「画像を選択」ボタンから、メディアライブラリの画像(PNG / JPEG)を選びます
3. 画像のダブルクリック、または右サイドバーの「ピンを編集」ボタンで、フルスクリーン編集画面(Fullscreen Editor)を開きます。ピンの追加・編集はすべてこの中で行います(通常のブロック表示は、編集操作のない表示専用プレビューです)
4. プレビュー上の空いている場所をダブルクリックするか「＋」ボタンでピンを追加し、ラベル・説明・遷移先などを設定します
5. 編集が終わったら「編集を反映して終了」(または右上の×)でFullscreen Editorを閉じます。これはブロックの属性へ編集内容を反映するだけで、投稿そのもののサーバー保存にはなりません。最後に投稿・固定ページ側の「更新」「公開」等で保存してください

より詳しい操作手順は USER_GUIDE.md を参照してください。

主な操作(Fullscreen Editor)

• ピン/画像マーカーの追加: 空き部分のダブルクリック、または「＋」ボタン
• 選択: 1回クリック(選択のみ、ポップオーバーは開きません)。もう一度クリックするとポップオーバーが開閉します
• 移動: ピン・画像マーカー・ラベルをドラッグ
• 削除: 「このピンを削除」(削除後は次のピンを自動選択)
• Zoom / Pan: プレビュー上部のスライダー、またはマウスホイール操作(100〜200%)。100%を超えるとプレビュー上のドラッグで表示位置を移動できます
• 画像として保存: 現在のピン配置を元画像へ合成したPNGとして保存
• 全体を表示する: 画像全体をプレビューに収める倍率へ戻す

詳しい操作・用語の説明は USER_GUIDE.md を参照してください。

Frontend(投稿ページ側の表示)

• PCでの動作は「ホバーで説明表示、クリックで遷移」「クリックで説明表示、説明内のリンクで遷移」から選べます
• スマホでの動作は「タップで即遷移」「1回目タップで説明表示、2回目タップで遷移」「タップで説明表示、説明内のリンクで遷移」から選べます
• 説明文(Description)が空で遷移先(target)だけが設定されているピンは、上記いずれの設定でも説明表示の段階を飛ばして遷移先へ直接移動します
• 画像右上の拡大ボタンから、自前実装の拡大表示(Lightbox)を開けます。ドラッグ/スワイプでの移動、マウスホイール/ピンチ/画面上のボタンでの拡大縮小に対応しています

対応環境

• WordPress のブロックエディタ(Gutenberg)
• Cocoon(クラシックテーマ、子テーマ有効)での動作を確認しています

Pointer Events や `