MENU
  1. ホーム
  2. JavaScript
  3. JavaScriptを使ったカスタムコンテキストメニューの実装ガイド

JavaScriptを使ったカスタムコンテキストメニューの実装ガイド

JavaScript

JavaScriptでカスタムコンテキストメニューを作成する方法を解説します。通常、右クリックをするとブラウザの標準のコンテキストメニューが表示されますが、これをカスタマイズすることで、特定の機能を提供する独自のメニューを表示させることができます。本記事では、contextmenuイベントを使用して標準のメニューを無効化し、HTMLとCSSを使ってカスタムメニューを作成し、JavaScriptでそのメニューを表示・操作する方法を詳細に説明します。これにより、ユーザー体験を向上させ、インタラクティブなWebアプリケーションを構築するための基礎知識を習得できます。

目次

contextmenuイベントの基礎

JavaScriptのcontextmenuイベントは、ユーザーがウェブページ上で右クリックを行った際に発生します。このイベントを利用することで、デフォルトのコンテキストメニューをカスタムメニューに置き換えることができます。

contextmenuイベントの基本的な使い方

contextmenuイベントは、特定の要素に対して以下のように設定します：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    // カスタムメニューを表示するコードをここに記述
});

このコードでは、document全体に対してcontextmenuイベントを監視し、右クリック時にデフォルトのメニューを表示させないようにしています。event.preventDefault()メソッドを使用することで、ブラウザのデフォルトの動作を防止します。

イベントの対象要素を特定する

右クリックされた要素を特定するには、イベントオブジェクトのtargetプロパティを使用します：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    let targetElement = event.target;
    console.log('右クリックされた要素:', targetElement);
});

これにより、右クリックされた具体的な要素に対してカスタムメニューを表示するなど、柔軟な操作が可能になります。

イベントの位置情報の取得

カスタムメニューを表示する際には、右クリックされた位置の情報も重要です。位置情報はイベントオブジェクトのclientXおよびclientYプロパティを使用して取得できます：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    let clickX = event.clientX;
    let clickY = event.clientY;
    console.log(`右クリック位置: X=${clickX}, Y=${clickY}`);
    // カスタムメニューを表示するコードをここに記述
});

この情報を利用して、カスタムメニューをクリック位置に表示させることができます。次のセクションでは、デフォルトのコンテキストメニューを無効にする方法を詳しく説明します。

デフォルトメニューの無効化

標準のコンテキストメニューを無効化することは、カスタムメニューを表示するための第一歩です。これにより、ユーザーが右クリックした際にブラウザのデフォルトメニューが表示されなくなります。

イベントのデフォルト動作を防止する

JavaScriptでは、event.preventDefault()メソッドを使用して、特定のイベントのデフォルト動作を防止できます。contextmenuイベントに対してこれを行うと、右クリック時にデフォルトのコンテキストメニューが表示されなくなります。

以下のコードは、ウェブページ全体で標準のコンテキストメニューを無効にする例です：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

このコードをページに追加すると、ユーザーが右クリックしてもブラウザのデフォルトメニューが表示されなくなります。これにより、カスタムメニューを表示する準備が整います。

特定の要素のみ無効化する方法

ウェブページ全体ではなく、特定の要素に対してのみデフォルトのコンテキストメニューを無効にしたい場合は、以下のようにイベントリスナーを設定します：

let targetElement = document.getElementById('myElement');
targetElement.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});

このコードは、idがmyElementの要素に対してのみ、右クリック時のデフォルトメニューを無効にします。

複数の要素に対して無効化する方法

複数の要素に対してコンテキストメニューを無効化するには、クラスセレクタを使用してイベントリスナーを設定します：

let elements = document.querySelectorAll('.no-context-menu');
elements.forEach(function(element) {
    element.addEventListener('contextmenu', function(event) {
        event.preventDefault();
    });
});

このコードは、クラスがno-context-menuのすべての要素に対して、右クリック時のデフォルトメニューを無効にします。

次のセクションでは、カスタムコンテキストメニューのHTML構造を作成する方法を紹介します。

カスタムメニューのHTML構造

カスタムコンテキストメニューを作成するためには、まずそのメニューのHTML構造を定義する必要があります。このセクションでは、シンプルで柔軟なカスタムメニューのHTMLテンプレートを作成する方法を紹介します。

基本的なHTMLテンプレート

カスタムコンテキストメニューは、通常のHTML要素を使用して作成できます。以下に基本的なテンプレートを示します：

<div id="customContextMenu" class="context-menu">
    <ul>
        <li><a href="#" id="menu-item-1">メニュー項目1</a></li>
        <li><a href="#" id="menu-item-2">メニュー項目2</a></li>
        <li><a href="#" id="menu-item-3">メニュー項目3</a></li>
    </ul>
</div>

この例では、div要素をコンテナとして使用し、その中にulリストを配置して各メニュー項目を定義しています。各メニュー項目はli要素としてリスト内に配置され、リンク（aタグ）として表示されます。

メニューのスタイルを定義

次に、カスタムメニューをスタイリングするための基本的なCSSを追加します：

.context-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.context-menu li {
    padding: 8px 12px;
    cursor: pointer;
}

.context-menu li:hover {
    background-color: #f0f0f0;
}

このCSSでは、context-menuクラスを持つ要素の初期表示をdisplay: noneに設定し、右クリック時にJavaScriptで表示できるようにしています。また、メニューの位置をposition: absoluteに設定し、メニュー項目のスタイルを定義しています。

HTMLをページに追加

作成したHTMLテンプレートをページに追加します。通常、ページの最後に追加することが一般的です：

<body>
    <!-- ページの内容 -->

    <!-- カスタムコンテキストメニュー -->
    <div id="customContextMenu" class="context-menu">
        <ul>
            <li><a href="#" id="menu-item-1">メニュー項目1</a></li>
            <li><a href="#" id="menu-item-2">メニュー項目2</a></li>
            <li><a href="#" id="menu-item-3">メニュー項目3</a></li>
        </ul>
    </div>

    <!-- スクリプト -->
    <script src="path/to/your/script.js"></script>
</body>

このHTML構造とCSSスタイルを使用することで、シンプルなカスタムコンテキストメニューの土台を作ることができます。次のセクションでは、このメニューをCSSを使用してスタイリングし、見た目を整える方法を解説します。

CSSによるカスタムメニューのスタイリング

カスタムコンテキストメニューをユーザーフレンドリーにするためには、適切なスタイリングが重要です。このセクションでは、カスタムメニューの見た目を整えるためのCSSスタイリングのコツを紹介します。

基本スタイルの設定

まずは基本的なスタイルを設定し、メニューの外観を整えます。以下のCSSを追加して、メニュー全体のデザインを改善します：

.context-menu {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-width: 150px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.context-menu li {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.context-menu li:last-child {
    border-bottom: none;
}

.context-menu li:hover {
    background-color: #f0f0f0;
}

このCSSでは、以下の点に注意しています：

  • メニュー全体に白い背景色と薄い灰色の境界線を設定。
  • 影を追加して浮き上がって見えるようにする。
  • メニュー項目は適度なパディングを持ち、ホバー時に背景色が変わるように設定。
  • 最後のメニュー項目には境界線を適用しないようにする。

レスポンシブデザインの対応

メニューが画面サイズに応じて適切に表示されるように、レスポンシブデザインを取り入れます。特にモバイルデバイスでは、タッチ操作に適したサイズにする必要があります：

@media (max-width: 600px) {
    .context-menu {
        font-size: 16px;
        min-width: 200px;
    }

    .context-menu li {
        padding: 10px 14px;
    }
}

このメディアクエリを追加することで、画面幅が600ピクセル以下の場合、フォントサイズとパディングを大きくしてタッチ操作をしやすくしています。

テーマカラーの変更

カスタムメニューのテーマカラーを変更して、サイト全体のデザインに統一感を持たせます。以下は、ダークテーマのカスタムメニューの例です：

.context-menu {
    background-color: #333;
    color: #fff;
    border: 1px solid #555;
}

.context-menu li {
    border-bottom: 1px solid #444;
}

.context-menu li:hover {
    background-color: #555;
}

このスタイルでは、背景色、テキスト色、境界線色をダークテーマに合わせて変更しています。

次のセクションでは、JavaScriptを使用して右クリック時にカスタムメニューを表示する方法を説明します。

JavaScriptでのカスタムメニュー表示

カスタムコンテキストメニューを表示するためには、JavaScriptを使用して右クリックイベントを監視し、適切なタイミングでメニューを表示する必要があります。このセクションでは、具体的な実装方法を解説します。

カスタムメニューを表示するスクリプト

まず、contextmenuイベントをキャプチャし、カスタムメニューを表示するための基本的なJavaScriptコードを作成します：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();

    let menu = document.getElementById('customContextMenu');
    menu.style.display = 'block';
    menu.style.left = `${event.pageX}px`;
    menu.style.top = `${event.pageY}px`;
});

このコードでは、以下の操作を行っています：

  • event.preventDefault()でデフォルトのコンテキストメニューを無効にする。
  • カスタムメニューの要素を取得し、表示する。
  • カスタムメニューの位置をクリック位置に設定する。

メニューの位置調整

右クリック位置に応じてメニューを表示しますが、画面の端に近い場合はメニューがはみ出さないように位置を調整します。以下のコードを追加して、メニューの表示位置を調整します：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();

    let menu = document.getElementById('customContextMenu');
    let clickX = event.pageX;
    let clickY = event.pageY;
    let menuWidth = menu.offsetWidth;
    let menuHeight = menu.offsetHeight;
    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;

    // 画面の右端や下端に近い場合の調整
    if ((clickX + menuWidth) > windowWidth) {
        clickX -= menuWidth;
    }
    if ((clickY + menuHeight) > windowHeight) {
        clickY -= menuHeight;
    }

    menu.style.left = `${clickX}px`;
    menu.style.top = `${clickY}px`;
    menu.style.display = 'block';
});

このコードでは、メニューが画面の右端や下端にはみ出さないように表示位置を調整しています。

メニューの非表示処理

カスタムメニューを表示した後、ユーザーが別の場所をクリックしたときにメニューを非表示にするための処理も必要です。以下のコードを追加して、メニューを非表示にします：

document.addEventListener('click', function(event) {
    let menu = document.getElementById('customContextMenu');
    if (menu.style.display === 'block') {
        menu.style.display = 'none';
    }
});

このコードでは、任意の場所をクリックしたときにメニューが表示されていれば非表示にします。これにより、ユーザーの操作が自然でスムーズになります。

次のセクションでは、カスタムメニューの項目にイベントを設定し、具体的なアクションを実行する方法を説明します。

カスタムメニューの位置調整

カスタムコンテキストメニューをユーザーの右クリック位置に表示するためには、正確な位置調整が重要です。画面の端に近い場合でもメニューが適切に表示されるように調整する方法を紹介します。

クリック位置の取得

まず、右クリック位置の座標を取得します。contextmenuイベントのclientXおよびclientYプロパティを使用して、クリック位置を取得します：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();

    let menu = document.getElementById('customContextMenu');
    let clickX = event.clientX;
    let clickY = event.clientY;

    // カスタムメニューの表示
    menu.style.display = 'block';
    menu.style.left = `${clickX}px`;
    menu.style.top = `${clickY}px`;
});

このコードでは、clientXとclientYを使用してクリック位置を取得し、カスタムメニューの位置を設定しています。

画面端の位置調整

次に、カスタムメニューが画面の端に近い場合に適切に位置調整を行います。画面の幅と高さ、およびメニューの幅と高さを考慮して、表示位置を調整します：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();

    let menu = document.getElementById('customContextMenu');
    let clickX = event.clientX;
    let clickY = event.clientY;
    let menuWidth = menu.offsetWidth;
    let menuHeight = menu.offsetHeight;
    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;

    // 画面の右端や下端に近い場合の調整
    if ((clickX + menuWidth) > windowWidth) {
        clickX -= menuWidth;
    }
    if ((clickY + menuHeight) > windowHeight) {
        clickY -= menuHeight;
    }

    // カスタムメニューの表示位置を設定
    menu.style.left = `${clickX}px`;
    menu.style.top = `${clickY}px`;
    menu.style.display = 'block';
});

このコードでは、メニューが画面の右端や下端にはみ出さないようにクリック位置を調整しています。クリック位置に対してメニューの幅と高さを考慮し、はみ出す場合は位置を修正します。

ウィンドウのリサイズ対応

ウィンドウのサイズが変更されたときにメニューが適切に表示されるように、リサイズイベントにも対応します。ウィンドウのリサイズ時にメニューが表示されていれば位置を再調整します：

window.addEventListener('resize', function() {
    let menu = document.getElementById('customContextMenu');
    if (menu.style.display === 'block') {
        menu.style.display = 'none'; // リサイズ時にメニューを非表示にする
    }
});

このコードでは、ウィンドウのリサイズ時にメニューが表示されている場合、メニューを非表示にします。これにより、リサイズ後に再び右クリックすることで、正しい位置にメニューが表示されるようになります。

次のセクションでは、カスタムメニューの項目にイベントを設定し、特定のアクションを実行する方法を解説します。

メニュー項目のイベントハンドリング

カスタムコンテキストメニューに特定のアクションを実行するためには、各メニュー項目にイベントハンドラーを設定する必要があります。このセクションでは、メニュー項目に対するクリックイベントを処理し、具体的なアクションを実行する方法を説明します。

メニュー項目にイベントリスナーを追加

各メニュー項目にクリックイベントリスナーを追加して、特定のアクションを実行するように設定します。以下のコードは、各メニュー項目に対してイベントリスナーを設定する例です：

document.getElementById('menu-item-1').addEventListener('click', function(event) {
    event.preventDefault();
    alert('メニュー項目1がクリックされました');
    hideContextMenu();
});

document.getElementById('menu-item-2').addEventListener('click', function(event) {
    event.preventDefault();
    alert('メニュー項目2がクリックされました');
    hideContextMenu();
});

document.getElementById('menu-item-3').addEventListener('click', function(event) {
    event.preventDefault();
    alert('メニュー項目3がクリックされました');
    hideContextMenu();
});

このコードでは、各メニュー項目に対してクリックイベントリスナーを追加し、クリックされたときにアラートを表示しています。また、カスタムメニューを非表示にするためにhideContextMenu関数を呼び出しています。

カスタムメニューの非表示関数

メニュー項目がクリックされた後にカスタムメニューを非表示にするための関数を定義します：

function hideContextMenu() {
    let menu = document.getElementById('customContextMenu');
    menu.style.display = 'none';
}

この関数は、カスタムメニューを非表示にするために、displayプロパティをnoneに設定します。

複数のイベントリスナーの設定方法

複数のメニュー項目に対してイベントリスナーを一括で設定する場合、以下のようにループを使用することができます：

document.querySelectorAll('.context-menu a').forEach(function(item) {
    item.addEventListener('click', function(event) {
        event.preventDefault();
        alert(`${this.textContent} がクリックされました`);
        hideContextMenu();
    });
});

このコードでは、すべてのメニュー項目に対してクリックイベントリスナーを一括で設定し、クリックされた項目のテキストをアラートで表示します。

カスタムアクションの実行

メニュー項目がクリックされたときに特定のアクションを実行するためには、各イベントリスナー内でそのアクションを定義します。例えば、テキストのコピーや特定の関数の呼び出しなどが考えられます：

document.getElementById('menu-item-1').addEventListener('click', function(event) {
    event.preventDefault();
    copyTextToClipboard();
    hideContextMenu();
});

function copyTextToClipboard() {
    // テキストをクリップボードにコピーする処理
    let text = 'コピーするテキスト';
    navigator.clipboard.writeText(text).then(function() {
        alert('テキストがクリップボードにコピーされました');
    }, function(err) {
        console.error('クリップボードへのコピーに失敗しました', err);
    });
}

この例では、メニュー項目がクリックされたときにテキストをクリップボードにコピーする関数を呼び出しています。

次のセクションでは、カスタムメニューを適切なタイミングで非表示にする方法をさらに詳しく紹介します。

カスタムメニューの非表示処理

カスタムコンテキストメニューを適切なタイミングで非表示にすることは、ユーザー体験を向上させるために重要です。このセクションでは、カスタムメニューを非表示にするための方法を紹介します。

クリックイベントによる非表示処理

ユーザーがカスタムメニュー以外の場所をクリックした際にメニューを非表示にするためには、document全体にクリックイベントリスナーを追加します：

document.addEventListener('click', function(event) {
    let menu = document.getElementById('customContextMenu');
    if (menu.style.display === 'block') {
        menu.style.display = 'none';
    }
});

このコードは、document全体に対してクリックイベントを監視し、カスタムメニューが表示されている場合に非表示にします。

スクロールイベントによる非表示処理

ページがスクロールされたときにもカスタムメニューを非表示にすることが望ましいです。以下のコードを追加して、スクロールイベントを監視します：

window.addEventListener('scroll', function() {
    let menu = document.getElementById('customContextMenu');
    if (menu.style.display === 'block') {
        menu.style.display = 'none';
    }
});

このコードは、ウィンドウがスクロールされたときにカスタムメニューを非表示にします。

コンテキストメニューの非表示関数

非表示処理を一元管理するために、カスタムメニューを非表示にする関数を定義します：

function hideContextMenu() {
    let menu = document.getElementById('customContextMenu');
    menu.style.display = 'none';
}

この関数を使用して、メニュー項目がクリックされた際や他のイベントに応じてメニューを非表示にします。

カスタムメニューの再表示処理

カスタムメニューが再表示される際に、以前の状態をリセットするために、表示前にメニューを一旦非表示にする処理を追加します：

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    hideContextMenu(); // メニューを表示する前に非表示にする

    let menu = document.getElementById('customContextMenu');
    let clickX = event.clientX;
    let clickY = event.clientY;
    let menuWidth = menu.offsetWidth;
    let menuHeight = menu.offsetHeight;
    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;

    if ((clickX + menuWidth) > windowWidth) {
        clickX -= menuWidth;
    }
    if ((clickY + menuHeight) > windowHeight) {
        clickY -= menuHeight;
    }

    menu.style.left = `${clickX}px`;
    menu.style.top = `${clickY}px`;
    menu.style.display = 'block';
});

このコードでは、カスタムメニューを表示する前に一旦非表示にすることで、メニューの再表示時にリセットされるようにしています。

次のセクションでは、カスタムメニューの応用例として、テキスト選択メニューの実装方法を紹介します。

応用例: テキスト選択メニュー

カスタムコンテキストメニューを利用して、選択したテキストに対して特定の操作を行うメニューを実装することができます。このセクションでは、テキスト選択に基づいたカスタムメニューの実装方法を紹介します。

テキスト選択の取得

まず、選択されたテキストを取得する方法を示します。以下のコードを使用して、選択されたテキストを取得します：

function getSelectedText() {
    let selectedText = '';
    if (window.getSelection) {
        selectedText = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        selectedText = document.selection.createRange().text;
    }
    return selectedText;
}

この関数は、ユーザーが選択したテキストを取得し、文字列として返します。

テキスト選択時にカスタムメニューを表示

次に、テキストが選択されている場合にのみカスタムメニューを表示するようにします。以下のコードをcontextmenuイベントリスナーに追加します：

document.addEventListener('contextmenu', function(event) {
    let selectedText = getSelectedText();
    if (selectedText) {
        event.preventDefault();
        hideContextMenu(); // メニューを表示する前に非表示にする

        let menu = document.getElementById('customContextMenu');
        let clickX = event.clientX;
        let clickY = event.clientY;
        let menuWidth = menu.offsetWidth;
        let menuHeight = menu.offsetHeight;
        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;

        if ((clickX + menuWidth) > windowWidth) {
            clickX -= menuWidth;
        }
        if ((clickY + menuHeight) > windowHeight) {
            clickY -= menuHeight;
        }

        menu.style.left = `${clickX}px`;
        menu.style.top = `${clickY}px`;
        menu.style.display = 'block';
    }
});

このコードでは、選択されたテキストがある場合にのみカスタムメニューを表示するようにしています。

メニュー項目に選択テキストを表示

選択されたテキストに基づいてメニュー項目に特定のアクションを設定します。例えば、選択されたテキストをコピーするメニュー項目を追加します：

<div id="customContextMenu" class="context-menu">
    <ul>
        <li><a href="#" id="copyText">コピー</a></li>
        <!-- 他のメニュー項目 -->
    </ul>
</div>

そして、コピーアクションを実行するためのイベントリスナーを設定します：

document.getElementById('copyText').addEventListener('click', function(event) {
    event.preventDefault();
    let selectedText = getSelectedText();
    if (selectedText) {
        navigator.clipboard.writeText(selectedText).then(function() {
            alert('テキストがクリップボードにコピーされました');
        }, function(err) {
            console.error('クリップボードへのコピーに失敗しました', err);
        });
    }
    hideContextMenu();
});

このコードでは、選択されたテキストをクリップボードにコピーし、コピーが成功したことを通知するアラートを表示します。

メニューのカスタマイズ例

他にも様々なアクションをカスタムメニューに追加できます。例えば、選択したテキストを検索するメニュー項目を追加します：

<li><a href="#" id="searchText">検索</a></li>

そして、検索アクションを実行するためのイベントリスナーを設定します：

document.getElementById('searchText').addEventListener('click', function(event) {
    event.preventDefault();
    let selectedText = getSelectedText();
    if (selectedText) {
        window.open(`https://www.google.com/search?q=${encodeURIComponent(selectedText)}`, '_blank');
    }
    hideContextMenu();
});

このコードでは、選択されたテキストをGoogleで検索する新しいタブを開きます。

次のセクションでは、画像に特化したカスタムコンテキストメニューの実装例を紹介します。

応用例: 画像右クリックメニュー

カスタムコンテキストメニューを利用して、画像に対して特定の操作を行うメニューを実装することができます。このセクションでは、画像に特化したカスタムコンテキストメニューの実装方法を紹介します。

画像に対するcontextmenuイベントの設定

まず、画像に対してcontextmenuイベントを設定し、カスタムメニューを表示するようにします。以下のHTML構造とJavaScriptコードを追加します：

<img src="example.jpg" alt="Example Image" id="image1" class="context-image">

<div id="imageContextMenu" class="context-menu">
    <ul>
        <li><a href="#" id="saveImage">画像を保存</a></li>
        <li><a href="#" id="viewImage">画像を表示</a></li>
        <li><a href="#" id="copyImageUrl">画像URLをコピー</a></li>
    </ul>
</div>

このHTML構造では、画像とカスタムコンテキストメニューを定義しています。

次に、画像に対してcontextmenuイベントリスナーを追加します：

document.querySelectorAll('.context-image').forEach(function(image) {
    image.addEventListener('contextmenu', function(event) {
        event.preventDefault();
        hideContextMenu(); // メニューを表示する前に非表示にする

        let menu = document.getElementById('imageContextMenu');
        let clickX = event.clientX;
        let clickY = event.clientY;
        let menuWidth = menu.offsetWidth;
        let menuHeight = menu.offsetHeight;
        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;

        if ((clickX + menuWidth) > windowWidth) {
            clickX -= menuWidth;
        }
        if ((clickY + menuHeight) > windowHeight) {
            clickY -= menuHeight;
        }

        menu.style.left = `${clickX}px`;
        menu.style.top = `${clickY}px`;
        menu.style.display = 'block';

        // メニュー項目に画像の情報を設定
        document.getElementById('saveImage').setAttribute('href', image.src);
        document.getElementById('viewImage').setAttribute('href', image.src);
        document.getElementById('copyImageUrl').setAttribute('data-url', image.src);
    });
});

このコードでは、画像に対してcontextmenuイベントリスナーを設定し、右クリック位置にカスタムメニューを表示します。また、各メニュー項目に画像の情報を設定しています。

メニュー項目のイベントハンドリング

次に、各メニュー項目に対して特定のアクションを実行するためのイベントリスナーを設定します：

document.getElementById('saveImage').addEventListener('click', function(event) {
    event.preventDefault();
    let imageUrl = this.getAttribute('href');
    let link = document.createElement('a');
    link.href = imageUrl;
    link.download = '';
    link.click();
    hideContextMenu();
});

document.getElementById('viewImage').addEventListener('click', function(event) {
    event.preventDefault();
    let imageUrl = this.getAttribute('href');
    window.open(imageUrl, '_blank');
    hideContextMenu();
});

document.getElementById('copyImageUrl').addEventListener('click', function(event) {
    event.preventDefault();
    let imageUrl = this.getAttribute('data-url');
    navigator.clipboard.writeText(imageUrl).then(function() {
        alert('画像URLがクリップボードにコピーされました');
    }, function(err) {
        console.error('画像URLのコピーに失敗しました', err);
    });
    hideContextMenu();
});

このコードでは、各メニュー項目に対してクリックイベントリスナーを設定し、それぞれ以下のアクションを実行します：

  1. 画像を保存: 画像URLを使って画像を保存します。
  2. 画像を表示: 画像URLを新しいタブで開きます。
  3. 画像URLをコピー: 画像URLをクリップボードにコピーします。

メニューの非表示処理の強化

前のセクションで紹介した非表示処理に加え、画像のカスタムメニューに対応する非表示処理を追加します：

document.addEventListener('click', function(event) {
    let imageMenu = document.getElementById('imageContextMenu');
    if (imageMenu.style.display === 'block') {
        imageMenu.style.display = 'none';
    }
});

このコードは、ドキュメント全体に対してクリックイベントを監視し、画像のカスタムメニューが表示されている場合に非表示にします。

これで、画像に特化したカスタムコンテキストメニューの実装が完了しました。次のセクションでは、JavaScriptを用いたカスタムコンテキストメニューの実装方法のまとめを行います。

まとめ

本記事では、JavaScriptを用いてカスタムコンテキストメニューを実装する方法について詳細に解説しました。まず、contextmenuイベントの基本的な仕組みを理解し、デフォルトのメニューを無効化する方法を学びました。その後、カスタムメニューのHTML構造を定義し、CSSでスタイリングを行い、JavaScriptを用いてメニューを表示する手順を説明しました。

さらに、メニュー項目に対するイベントハンドリングや、ユーザーがクリックした際やスクロールした際にメニューを非表示にする方法も紹介しました。応用例として、テキスト選択メニューや画像右クリックメニューの実装方法を具体的に示し、実践的な活用方法を提供しました。

カスタムコンテキストメニューを導入することで、ユーザー体験を向上させ、インタラクティブで直感的な操作を提供することができます。この記事で紹介した手法を活用して、あなたのウェブアプリケーションに独自のカスタムコンテキストメニューを追加してみてください。

JavaScript
JavaScript カスタムメニュー contextmenu

コメント

コメントする

目次