カスタムメニューからコマンドを実行できるようにする
先ほどのコンソールにログを表示するサンプルは、Brackets/Edge Codeの起動時に実行されるのみですので、今度は任意のタイミングでメニューから実行してアラートパネルを表示してみましょう。ここでの工程が拡張機能開発の基本構成となりますので、しっかり抑えておきます。このセクションではhelloworldと同様に今度は拡張機能フォルダにcustom_menuというフォルダを作成して進めていきます。
手順は下記の5つで、シンプルです。
- 利用するBracketsのモジュールを読み込む
- 拡張機能固有のIDを定義する
- 実行するコマンドの関数を定義する
- 関数をコマンドに登録する
- カスタムメニューを追加する
1. 利用するBracketsのモジュールを読み込む
コマンドの管理とメニューへの追加を行うために、CommandManagerとMenusというモジュールを読み込みます。
var CommandManager = brackets.getModule("command/CommandManager"),
Menus = brackets.getModule("command/Menus");
後ほどモーダルダイアログを使ったサンプルも作成しますが、この手順で必要なモジュールを追加して開発していきます。
2. 拡張機能固有のIDを定義する
自作の拡張機能をメニューに追加するために固有のIDを付与します。IDが重複してしまうと他の拡張メニューとバッティングしてしまう可能性があるので、配布をする前提であればドメインなどで名前空間を定義して、他の拡張機能と重複しないようにIDを定義します。
var COMMAND_ID = "jp.codezine.commands.hello_world"; var MENU_ID = "jp.codezine.custom_menu";
3. 実行するコマンドの関数を定義する
コマンドとして登録するための関数を定義します。通常の関数定義です。ここでは実行したらアラートを出すための関数を定義します。
function helloworld() {
alert('hello world');
}
4. 関数をコマンドに登録する
3で定義した関数をCommandManagerモジュールに登録します。
CommandManager.register("Hello world", COMMAND_ID, helloworld);
5. カスタムメニューを追加する
Menuモジュールを利用して、自作拡張機能向けのメニューを追加します。addMenuで上部メニューが追加され、addMenuItemで4で登録したコマンドをメニューに追加ですることができます。
var menu = Menus.addMenu("CustomMenu", MENU_ID);
menu.addMenuItem(COMMAND_ID);
addMenuで追加するメニューの位置は第3,4引数で指定することができます。例えばヘルプメニューの手前に追加したい場合は下記のように記述します。
var menu = Menus.addMenu("CustomMenu", MENU_ID, Menus.BEFORE, Menus.AppMenuBar.HELP_MENU);
また、追加したメニューにショートカットを割り当てるには、addMenuItemの第二引数に下記のように文字列を渡します。Ctrlは、Macではcommandに該当します。
menu.addMenuItem(COMMAND_ID, "Ctrl-Alt-Shift-H");
Bracketsを再起動すると、下図のようにメニューが追加されたことを確認できます。
メニューを選択するとアラートが表示されました。
以下は、このセクションのコードの全体像です。
define(function (require, exports, module) {
"use strict";
/*
* 利用するBracketsのコンポーネントを読み込む
*/
var CommandManager = brackets.getModule("command/CommandManager"),
Menus = brackets.getModule("command/Menus");
/*
* @constant {string}
* 各拡張機能固有のIDを付与する
*/
var COMMAND_ID = "jp.codezine.commands.hello_world";
var MENU_ID = "jp.codezine.custom_menu";
/*
* メニューから実行するコマンドを定義
*/
function helloworld() {
alert('hello world');
}
/*
* Commandを登録
*/
CommandManager.register("Hello world", COMMAND_ID, helloworld);
/*
* Custom menu
*/
//var menu = Menus.addMenu("CustomMenu", MENU_ID);
var menu = Menus.addMenu("CustomMenu", MENU_ID, Menus.BEFORE, Menus.AppMenuBar.HELP_MENU);
menu.addMenuItem(COMMAND_ID, "Ctrl-Alt-Shift-H");
});
