Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

JavaScriptとHTML/CSSで行う、軽量エディタ「Adobe Edge Code」の拡張機能開発

「Adobe Edge Code CC」徹底入門(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/10/21 14:00

目次

カスタムメニューからコマンドを実行できるようにする

 先ほどのコンソールにログを表示するサンプルは、Brackets/Edge Codeの起動時に実行されるのみですので、今度は任意のタイミングでメニューから実行してアラートパネルを表示してみましょう。ここでの工程が拡張機能開発の基本構成となりますので、しっかり抑えておきます。このセクションではhelloworldと同様に今度は拡張機能フォルダにcustom_menuというフォルダを作成して進めていきます。

 手順は下記の5つで、シンプルです。

  1. 利用するBracketsのモジュールを読み込む
  2. 拡張機能固有のIDを定義する
  3. 実行するコマンドの関数を定義する
  4. 関数をコマンドに登録する
  5. カスタムメニューを追加する

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");
});

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 又村 洋史(マタムラ ヒロフミ)

    株式会社イノーヴ WEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。個人ブログ「Deconcepter」ではWEBに関わる人が押さえておきたい情報の...

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5