オープンソースのWeb用コードエディター「Brackets」の拡張機能を作成する

原題：初めてのBrackets拡張機能の作成

Bracketsのリポジトリクローンからの作業

　また、Bracketsソースの別のコピーからコードを開発することもお勧めします。メリットとして、アプリケーションコードの最新バージョンを使って作業することができ、拡張機能が最新の状態であることを保証できます。また、オリジナルのアプリケーションソースを編集する必要性を回避することができます。オリジナルのソースを編集すると、好ましくない結果がもたらされる可能性があります。Bracketsリポジトリのクローンから作業するための簡単な方法は、以下の手順に従って、GitHubからBracketsリポジトリのフォークまたはクローンを実行することです。

　1. GitHubのBracketsリポジトリに移動します。

　2. GitHub client for MacまたはGitHub client for Windowsを使用している場合は、このリポジトリのホームページから、プラットフォームに応じて「Clone in Mac（Mac用クローン）」または「Clone in Windows（Windows用クローン）」ボタンをクリックし、ローカルディスク上の保存先を選択します。

図6.Mac用のBracketsリポジトリのクローン作成

　3. Shiftキーを押しながらBracketsを起動することによって、Bracketsでデフォルトのアプリケーションコンテンツではなく、このコードを実行することを指定します。

　この説明を十分に理解するには、Bracketsアプリケーションが実際には2つの部分から構成されていることを理解しておく必要があります。

• 1つは、Chromium Embedded Frameworkを使って作成されたBracketsシェルで、ネイティブデスクトップアプリケーションシェル内で、ローカルWebコンテンツを実行します。
• もう1つは、HTML、CSS、JavaScriptファイルなどのローカルWebコンテンツで、Bracketsエディターのソースコードです。

　デフォルトでは、Bracketsシェルは、アプリケーションのインストール時に作成されたアプリケーションコンテンツフォルダー内に格納されているWebファイルを実行します。ただし、このフォルダーから直接コードを編集することはお勧めしません。そのため、ネイティブアプリケーションでは、Shiftキーを押しながらアプリケーションを起動することによって、別のソースフォルダー内から実行できます。または、アプリケーションソースコードのtoolsフォルダーにあるsetup_for_hackingスクリプトを使用することもできます。このスクリプトは、GitHubの記事「How to Hack on Brackets」（Bracketsを改良する方法）から入手できます。

拡張機能テンプレートの使用

　もちろん、拡張機能を一から作成することもできますが、テンプレートを使用する方法をお勧めします。ユーザーが選択できるオプションがいくつかあります。

　拡張機能の開発を始める一般的な方法は、自分が実現しようとする機能に比較的近い既存の拡張機能をコピー＆ペーストすることです。これは最初の一歩として有効な方法ですが、すべての拡張機能が最新というわけではないことと、すべての拡張機能が必ずしも最新のベストプラクティスを示しているわけではないことに注意してください。また、拡張機能の中には、特に拡張機能開発の初心者にとって、非常に読みづらいものもあります。

　その代わりとして、Brackets Extension Toolkitを使用することもできます。このツールキットには、専用のテンプレートが用意されており、src/extensions/devフォルダーにドラッグ＆ドロップすることができます。また、拡張機能を初めて開発する際のガイドとして使用できる、豊富なコメント付きのコードや、関連するヘルパーツールも用意されています。

　どのオプションを選択した場合でも、比較的快適な環境が整ったら、独自のカスタムテンプレートを、後ですばやくアクセスできるように、src/extensions/disabledフォルダーに格納しておくことをお勧めします。ユーザー拡張機能フォルダーにコピーするだけで使用できます。

Brackets拡張機能APIの概要

　既存の拡張機能を初めて見る場合は、少しとまどうかもしれません。Brackets拡張機能は、RequireJSのSimplified CommonJS Wrapperで指定されているようなJavaScriptモジュールです。JavaScriptモジュールの説明はこのチュートリアルの対象範囲外です。詳しくは、Addy Osmani氏の「Modern Modular JavaScript Design Patterns」（最新のモジュール化JavaScriptデザインパターン）を参照してください。デモンストレーション用に最もシンプルな形式の拡張機能を考えると、次のようになります。

define(function (require, exports, module) {
    'use strict';
    // Extension code goes here
    console.log("Extension initialized");
});

　define呼び出し内の匿名関数の本体に含まれるすべてのコードが、アプリケーションの起動時に実行されます。

　当然、多くの場合、作成しようとしているのは、アプリケーションの別の部分で拡張機能を呼び出したときに、何かのコードを実行できるようにする拡張機能です。例えば、ユーザーがメニュー項目を選択したとき、これによってアプリケーションはアクションを実行します。

　このような種類のメカニズムは、コマンドを使用してコーディングすることができます。コマンドIDを関数に登録することによって、アプリケーションがこのIDを呼び出したときに、関数が実行されます。これは、CommandManagerのジョブです。Bracketsのほとんどすべての機能と同様に、CommandManager自体もモジュールです。拡張機能から他のモジュールにアクセスするには、専用のbrackets.getModule()メソッドを呼び出して、srcフォルダーからのモジュールの相対パスをメソッドに渡すだけです。以下のコードでは、JSファイル拡張子を指定していないことに注意してください。

var CommandManager = brackets.getModule("command/CommandManager");

　CommandManagerに対して、どの関数を、いつ実行するかを指定するには、register(name, command_id, function)メソッドを指定します。このメソッドのパラメーターは、次のとおりです。

• nameパラメーターは、判読可能なユーザーフレンドリな名前で、ユーザーインターフェイスのメニューラベルとしても使用されます。
• command_idパラメーターは、このコマンドを一意に識別するための文字列です。このパラメーターの形式は、[author].[my_extension].[menu_name].[my_command_name]です。
• 最後のパラメーターのfunctionは、ユーザーがUIでメニュー項目を選択したときに、メソッドが呼び出す関数です。ユーザーがUIでメニュー項目を選択すると、次のコード例に示されているように、アプリケーションは自動的に、対応するIDを使用してexecute(command_id)メソッドを呼び出します。

var COMMAND_ID = "dderaedt.tutorialExt.logHelloWorld.logHelloWorld";
var COMMAND_NAME = "Log Hello World";

function sayHello() {
   console.log("Hello World");
}
CommandManager.register(COMMAND_NAME, COMMAND_ID, sayHello);

　この段階で、拡張機能は機能しますが、何かがコマンドIDを呼び出す必要があるので、呼び出されません。そのためには、Menusモジュールを通じて対応するコマンドIDを呼び出すメニュー項目を追加し、その結果として関数を実行します。そのために、まず次のように、Menusモジュールにアクセスします。

var Menus = brackets.getModule("command/Menus");

　次に、項目を追加するメニュー（この例では、Fileメニュー）のハンドルを取得します。

var fileMenu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU);

　最後に、次のように、トリガーするコマンドに対応する項目を追加します。

fileMenu.addMenuItem(COMMAND_ID);

　このHello World拡張機能の完成したコードは、次のようになります。

define(function (require, exports, module) {
    'use strict';

    var CommandManager = brackets.getModule("command/CommandManager");
    var Menus          = brackets.getModule("command/Menus");

    var COMMAND_ID = "dderaedt.tutorialExt.LogHelloWorld";
    var COMMAND_NAME = "Log Hello World";

    function sayHello() {
        console.log("Hello World");
    }

    CommandManager.register(COMMAND_NAME, COMMAND_ID, sayHello);

    var fileMenu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU);
    fileMenu.addMenuItem(COMMAND_ID);
});