前の関連記事：linuxBean14.04(13)BracketsでJavaScriptにブレークポイントを張りたい
拡張機能をたくさんインストールするとBracketsの右クリックメニュー(コンテクストメニュー)の項目が操作に差し支えるほど増えすぎてしまいました。簡単に項目の編集ができる方法がないが探してみましたが見つけられませんでした。そこで拡張機能のソースコードをいじることにしました。
Extention Toolkitのインストール
まずは拡張機能のどこをいじればよいのか学習するために拡張機能の作り方について学習します。
初めてのBrackets拡張機能の作成 | Adobe Developer Connectionというページをみつけました。
そこに書いてあるBrackets-extension-toolkitをインストールします。
Bracketsのメニュー、ファイル→拡張機能マネージャー。
Extension Toolkitをインストールします。
Bracketsのヘルプメニューに3つの項目が追加されました。
Open Extension Tutorial scrを選択すると~/.config/Brackets/extensions/user/dehats.exttoolkit/main.jsが開きます。
Bracketsの拡張機能はJavaScriptで書かれていることがわかります。
define(function (require, exports, module) {
BracketsはRequireJSを使ってモジュール管理をしており、拡張機能もdefineで定義しています。拡張機能がメニュー項目を追加している仕組みをみてみる
さっそくメニュー登録している部分をみてみましょう。
// This will let us add menus items
Menus = brackets.getModule("command/Menus"),
コマンドIDとメニュー項目を関連付けてくれるMenusモジュールを呼び出しています。 /*
Now, we'll add a menu item somewhere in the application Help menu
*/
var menu = Menus.getMenu(Menus.AppMenuBar.HELP_MENU);
menu.addMenuItem(OPEN_WIKI_COMMAND_ID, [], Menus.AFTER, Commands.HELP_FORUM);
84行目で項目を追加するメニューのハンドルを取得しています。メニューハンドル一覧はAppMenuBarのShow codeをクリックすると見ることができます。
85行目でaddMenuItemで取得したメニューハンドルにメニュー項目を追加しています。
addMenuItem(command, keyBindings, position, relativeID)
commandはメニュー項目が選択されたときに実行されるコマンド。コマンドIDで指定します。
keyBindingsはショートカットキーの指定。指定しないときは[]と書くようです。
positionは項目を挿入する相対位置をBEFORE定数で指定します。
相対の対象となるのは次の引数のrelativeIDになります。
relativeIDを指定しないときはMenus.FIRSTかMenus.LASTを指定します。デフォルトはMenus.LASTになります。
relativeIDにコマンドIDを指定したときはMenus.BEFOREかMenus.AFTERになります。
relativeIDにメニューセクションを指定したときはMenus.FIRST_IN_SECTIONかMenus.LAST_IN_SECTINになります。
relativeIDは相対位置の対象を指定します。
コマンドIDかメニューセクションを指定します。（メニューセクション名はどこで知る？)
サブメニューはまだサポートされていないそうです。
ContextMenuTest
Extention Toolkitの中にはコンテクストメニューの追加の例がありませんので、Bracketsのインストールフォルダの中にあった例をみます。
/opt/brackets/www/extensions/samplesにあるContextMenuTestフォルダを~/.config/Brackets/extensions/userにコピーします。
Bracketsの再起動後機能拡張マネージャでみるとインストール済拡張機能として登録されました。
エディター部分で右クリックすると3つの項目が追加されています。
Toggle Checkmarkを選択すると、次の項目が使えるようになるというアラートがでます。
Toggle Checkmarkにチェックがついて次のEnable when previous is Checkedが選択できるようになりました。
チェックをはずすとまた元に戻ります。
Enabled when text selectedは文字を選択した状態で右クリックすると選択できるようになります。
右クリックメニュー（コンテクストメニュー）の追加の仕組みをみてみる
ContextMenuTestのmain.jsをみてみます。
var editor_cmenu = Menus.getContextMenu(Menus.ContextMenuIds.EDITOR_MENU);コンテクストメニューハンドラを取得しています。
ContextMenuIdsに引数の一覧があります。
今回はエディター部分のコンテクストメニューを取得しています。
var editor_cmenu = Menus.getContextMenu(Menus.ContextMenuIds.INLINE_EDITOR_MENU);INLINE_EDITOR_MENUとするとクイック編集で出現する部分での右クリックメニューに追加されます。
PROJECT_MENUはサイドバーの右クリックメニュー、WORKING_SET_CONTEXT_MENUは編集しているファイルのタブを右クリックしたときのメニューでした。
SPLITVIEW_MENUは「分割なし」「左右分割」「上下分割」の項目がある右クリックメニュー、WORKING_SET_CONFIG_MENUは「追加日時順」「名前順」「種類順」「自動ソート」がある右クリックメニューですがどこででてくるのかわかりませんでした。
メニューハンドラを取得したあとは普通のメニューと同様にaddMenuItemで項目追加しています。
// Add the Commands as MenuItems of the Editor context menu
if (editor_cmenu) {
editor_cmenu.addMenuDivider();
editor_cmenu.addMenuItem("extensionTest.command1");
editor_cmenu.addMenuItem("extensionTest.command2");
editor_cmenu.addMenuItem("extensionTest.command3");
}
positionを省略すると最後に追加されるのでこの順に項目が追加されます。 // Add the Commands as MenuItems of the Editor context menu
if (editor_cmenu) {
editor_cmenu.addMenuDivider();
editor_cmenu.addMenuItem("extensionTest.command1");
editor_cmenu.addMenuItem("extensionTest.command2", [], Menus.BEFORE, "extensionTest.command1");
editor_cmenu.addMenuItem("extensionTest.command3");
}
このようにすると書く順番を変えずに項目の順が変更できました。
positionを指定しないときの異なる拡張機能の項目との相対位置はどう決まるのでしょう？
おそらく拡張機能の読み込み順で決まると思うのですが、読み込み順はどのように決まるのでしょう？
拡張機能のフォルダ名やnameやtitleをいじってみましたがメニュー項目の順番は変わりませんでした。
参考にしたサイト
初めてのBrackets拡張機能の作成 | Adobe Developer Connection
AdobeによるBrackets拡張機能の作成の解説。
RequireJS
BracketsはRequireJSで拡張機能を読み込みます。
brackets - Brackets API
Brackets APIの解説。
0 件のコメント:
コメントを投稿