tips 0005 button expansion

← Tips Indexに戻る

ボタン処理の拡張・上書き

• v17.1.0より、既存ボタンを上塗りすることなく処理を足すことが可能になりました。
  既存ボタンに処理を足したり、上書きする場合の方法を記載します。

使い方

• customJs (danoni_custom.js) のボタンがある関数内に記述します。
  対応する画面とカスタム関数の対応表は次の通りです。
  ※末尾に2がつく関数は2つ目のcustomJsを使用する場合の関数名です。

画面	カスタム関数(従来)	カスタム関数(g_customJsObj)
タイトル画面	customTitleInit customTitleInit2	g_customJsObj.title
設定画面	customOptionInit customOptionInit2	g_customJsObj.option
設定（ディスプレイ）画面	customSettingsDisplayInit customSettingsDisplayInit2	g_customJsObj.settingsDisplay
キーコンフィグ画面	customKeyConfigInit customKeyConfigInit2	g_customJsObj.keyconfig
メイン画面(初期)	customMainInit customMainInit2	g_customJsObj.main
メイン画面(フレーム毎)	customMainEnterFrame customMainEnterFrame2	g_customJsObj.mainEnterFrame
結果画面	customResultInit customResultInit2	g_customJsObj.result

処理を足す

• g_btnAddFunc. の後に処理を追加するボタンのID名を指定します。
  下記の例では、「Click Here!!」のボタン (btnStart)に処理を追加しています。
• ID名については ID一覧をご覧ください。
• 既存ボタンの処理がされた後に、追加処理を行います。

    g_btnAddFunc.btnStart = _ => {
        commentInit(); // g_btnAddFunc.(ボタンID) に関数を定義することでその処理を後から挿入
    };

処理を上書きする

• 処理を上書きするには、g_btnDeleteFlg. の後に上書きしたいボタンのID名を指定し、trueを指定します。
  ※本来そのボタンが担う処理は無くなりますのでご注意ください。
• 実際にはその後に、カスタムで処理させたい処理を「処理を足す」と同様に記述します。

    g_btnDeleteFlg.btnStart = true;  // g_btnDeleteFlg.(ボタンID) = true でボタンIDが行っている処理をやめる
    g_btnAddFunc.btnStart = _ => {
        commentInit(); // g_btnAddFunc.(ボタンID) に関数を定義することでその処理を後から挿入
    };

処理を上書きした上で、本来の処理を任意の場所で実行する（通常ボタン版）

• 「処理を上書きする」ときと同様、g_btnDeleteFlg. の後に上書きしたいボタンのID名を指定し、trueを指定します。
• 本来のボタン処理は「_func」「_resetFunc」にて定義されているため、それを関数内に入れることで実現できます。単純な後挿入だけではうまく行かない場合に有用です。

    g_btnDeleteFlg.btnStart = true;  // g_btnDeleteFlg.(ボタンID) = true でボタンIDが行っている処理をやめる
    g_btnAddFunc.btnStart = (_evt, _func, _resetFunc) => {
        commentInit();    // g_btnAddFunc.(ボタンID) に関数を定義することでその処理を後から挿入
        _func(_evt);      // 本来実行するボタン処理を実行
        _resetFunc(_evt); // 本来実行するボタン処理(画面遷移系)を実行
    };

処理を上書きした上で、本来の処理を任意の場所で実行する（右クリック版）

• 上記とほぼ同じですが、右クリック版の場合、g_cxtDeleteFlg. の後に上書きしたいボタンのID名を指定し、trueを指定します。
• 本来のボタン処理は「_func」にて定義されているため、それを関数内に入れることで実現できます。単純な後挿入だけではうまく行かない場合に有用です。

    g_cxtDeleteFlg.btnStart = true;  // g_btnDeleteFlg.(ボタンID) = true でボタンIDが行っている処理をやめる
    g_cxtAddFunc.btnStart = (_evt, _func) => {
        commentInit();    // g_cxtAddFunc.(ボタンID) に関数を定義することでその処理を後から挿入
        _func(_evt);      // 本来実行するボタン処理（右クリック版）を実行
    };

動作確認バージョン

• v17.1.0以降で利用可能です。

ページ作成者

• ティックル

関連項目

• ID一覧
• カスタム関数の定義
• createCss2Button
• g_btnAddFunc / g_cxtAddFunc
• g_btnDeleteFlg / g_cxtDeleteFlg