Valence ファンクションキーの押下を無効化する方法

Valenceのアプリはブラウザ上で動作するため、利用者がファンクションキーを押すと、ブラウザ本来の機能が動作します。たとえば、F1キーでヘルプが表示されたり、F5キーで画面が再読み込みされたり、F11キーで全画面表示に切り替わったりします。業務中に誤ってこれらのキーを押してしまうと、入力中の内容が失われるなど、思わぬトラブルにつながることがあります。本Tipsでは、JavaScriptを使用してファンクションキー（F1～F12）の動作を無効化する方法をご紹介します。また、特定のキーだけは無効化せずに動作させることもできます。

前提条件

• Valenceの[ポータル管理]で設定を変更できる権限
• FTPツールなど、Valenceサーバーにファイルを配置できる環境

設定手順

設定は次の4つの手順で行います。

1. スクリプトファイル（prevent.js）を作成する
2. スクリプトファイルをサーバーに配置する
3. [ポータル管理]で追加リソースを設定する
4. アプリのStartupでスクリプトを実行する

1. スクリプトファイル（prevent.js）を作成する

以下のJavaScriptを記述したファイル prevent.js を作成します。

このスクリプトは、F1～F12キー（キーコード112～123）が押されたときにブラウザの既定動作を止めます。ただし、配列 NOT_BLOCK_KEYS に登録したキー（ここではF4キー：115）は無効化せず、そのまま動作させます。

F4キーを押下した際にイベントを実行する方法等は次回以降のTipsで紹介致します。

function blockFkey() {
    // ブロック対象のキーコード範囲（F1=112 ～ F12=123）
    const BLOCK_KEYS_RANGE = { min: 112, max: 123 };

    // 範囲内だが例外的にブロックしないキー（115 = F4）
    const NOT_BLOCK_KEYS = [115];

    // F1～F12 の範囲内、かつ例外リストに含まれない場合に true
    const isBlockKey = (code) =>
        code >= BLOCK_KEYS_RANGE.min &&
        code <= BLOCK_KEYS_RANGE.max &&
        !NOT_BLOCK_KEYS.includes(code);

    window.addEventListener(
        'keydown',
        function (e) {
            const code = e.keyCode;

            // 許容キー：既定動作を止めず、後続の処理に任せる
            if (NOT_BLOCK_KEYS.includes(code)) {
                console.log('F4キーThrow');
                return;
            }

            // ブロック対象：既定動作とイベントの伝播を止める
            if (isBlockKey(code)) {
                e.preventDefault();   // ブラウザの既定動作（ヘルプ表示等）を抑止
                e.stopPropagation();  // 上位要素へのイベント伝播を停止
                if (e.stopImmediatePropagation) {
                    e.stopImmediatePropagation(); // 他のリスナーの実行も止める
                }
                return false;
            }
        },
        true // キャプチャフェーズで捕捉し、他のリスナーより先に処理する
    );
}

2. スクリプトファイルをサーバーに配置する

1. 作成した prevent.js を、FTPなどを使用してValenceサーバーの以下の場所に配置します。

/valence-6t/resources/prevent.js

3. [ポータル管理]で追加リソースを設定する

1. Valenceにログインします。
2. [ポータル管理]の[設定]を開きます。
3. [Nitro App Builder]欄の[追加リソース]にある[URL]に、/resources/prevent.js を入力します（図1）。

追加リソースに登録したスクリプトは、Nitro App Builderのアプリ実行時に読み込まれます。これにより、アプリから blockFkey() 関数を呼び出せるようになります。

4. アプリのStartupでスクリプトを実行する

1. ファンクションキーを無効化したいアプリの編集画面を開きます。
2. [動作内容]で、[Application]の[Startup]に[スクリプトの実行]（Script）を追加します（図2）。

3. [スクリプトの実行]画面で、以下のスクリプトを入力します（図3）。

blockFkey();
success();

success(); を呼び出すことで、Startupの後続の処理が継続して実行されます。

補足・注意事項

• ファンクションキーを無効化できるのは、アプリの画面（Webページ）にフォーカスがある場合のみです。ブラウザのアドレスバーやブックマークバーなど、Webページ以外にフォーカスがある場合は無効化できません。
• 本スクリプトでは、F12キー（デベロッパーツールの表示）も無効化されます。開発時にF12キーを使用したい場合は、一度ブラウザのアドレスバーをクリックしてフォーカスを移してから、F12キーを押してください。
• 無効化しないキーを変更・追加したい場合は、NOT_BLOCK_KEYS に対象キーのキーコードを追加します。

// 例：F4 (115) に加えて F3 (114) も無効化しない場合
const NOT_BLOCK_KEYS = [114, 115];

おわりに

追加リソースとStartupのスクリプト実行を組み合わせることで、App Builderアプリにファンクションキーの無効化処理を簡単に組み込むことができます。特定のキーだけを動作させ、それ以外のキーによるブラウザの動作を止めることで、利用者の誤操作を防ぐことができます。

ファンクションキーの誤操作によるトラブルを防ぎたい場合に、ぜひお試しください。