最初のブラケットプラグインの作成

BracketsはAdobeの無料のオープンソースエディターで、PSDファイルから抽出するキラー機能のためにWeb開発者が好んでいます。 ブラケットは、JSに基づくプラグイン拡張システムをサポートします。 これらのプラグインの開発プロセスについてお話ししたいと思います。

Bracketsには、すぐに使用できる少数のプラグインが付属しています。 このため、新しいユーザーが通常最初に行うことは、追加の拡張機能をインストールすることです。 しかし、しばらくすると、おそらく「ブラケットだけに機能があれば...」と思うようになるでしょう。 幸いなことに、Bracketsはオープンソースのエディターです。 それ自体はWebアプリケーションです。お気に入りのテクノロジー（HTML、CSS、JS）に基づいて構築されており、Web開発者であれば、拡張機能を作成することで開発を支援できます。 そして、想像以上に簡単です。

ハローワールド

厳密に言えば、拡張機能は、Bracketsの起動時に実行されるmain.jsと呼ばれるJSファイルを含むフォルダーにすぎません。 メニュー項目「ヘルプ-拡張機能ディレクトリの表示」を選択すると、拡張機能を持つフォルダを見つけることができます。

拡張機能を持つフォルダーを開き、内部/ユーザーが新しいフォルダー「myFirstExtension」を作成します。 このフォルダー内に、main.jsを作成します。 簡単に始めるには、簡単なHelloWorldコードを挿入してください。

define(function (require, exports, module) { console.log('Hello myFirstExtension!'); }); 

「デバッグ-再起動」メニューからブラケットを再起動し、開発者ツール（F12または「デバッグ-開発者ツールを表示」）を呼び出して、拡張の結果を確認します。

BracketsのJavaScriptモジュールは、CommonJSモジュールと同様に機能します。 このプロセスを理解することはこのガイドの範囲を超えていますが、アプリケーションの起動時にdefine（）内の匿名関数の本体内のすべてのコードが実行されることを知る必要があります。

こんにちはアラート

ほとんどの場合、ブラケットの読み込み中ではなく、ユーザーがメニュー項目を選択したときにいくつかのコードを実行する拡張機能を作成する必要があります。 この動作は、チームマネージャーを使用して実装されます。 Bracketsのほとんどすべてのものと同様に、コマンドマネージャー自体はモジュールです。 モジュールにアクセスするには、brackets.getModule（）を呼び出すだけです。

 define(function (require, exports, module) { var CommandManager = brackets.getModule('command/CommandManager'); // ,       function handleHelloWorld() { window.alert('Hello, world!'); } // -,  ,   ID   handleHelloWorld var COMMAND_ID = 'helloworld.sayhello'; // package-style    var COMMAND_NAME = 'Hello World'; CommandManager.register(COMMAND_NAME, COMMAND_ID, handleHelloWorld); // -,         var Menus = brackets.getModule('command/Menus'); var fileMenu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU); fileMenu.addMenuItem(COMMAND_ID); }); 

こんにちは文書

では、条件付きで便利なことを試してみましょう。 Bracketsには、画像をスライスしたり、CSSプロパティを取得したり、PSDファイルからテキストを直接コピーしたりできるすばらしいExtract関数があります。 ただし、テキストはHTMLエンティティの形式で送信されるため、必ずしも便利ではありません。

 &# 1052;&# 1086;&# 1080; &# 1082;&# 1085;&# 1080;&# 1075;&# 1080; 

これらの文字をプレーンテキストに変換する拡張機能を作成してみましょう。 JS関数を使用してデコードします 。

Bracketsでは、開いているファイルはDocumentクラスのインスタンスとして表されます。 現在のドキュメント（ユーザーが編集用に開いたファイル）へのリンクを取得するには、EditorManagerモジュールを使用する必要があります。

 function handleDecodeHtml() { var editor = EditorManager.getFocusedEditor(); //   var selectedText = editor.getSelectedText(); //    var newText = decodeHtmlEntity(selectedText); //  var selection = editor.getSelection(); editor.document.replaceRange(newText, selection.start, selection.end); //  } 

ReplaceRangeは、テキストを追加、置換、または削除します。 範囲が指定されている場合、この範囲のテキストは新しいものに置き換えられます。 3番目の引数が指定されていない場合、選択したテキストを置き換えずに新しいテキストが挿入されます。

以上です。 コンテキストメニューの[編集]メニューで[登録]し、ホットキーを追加します。

 define(function (require, exports, module) { var CommandManager = brackets.getModule('command/CommandManager'); var Menus = brackets.getModule('command/Menus'); var Menu = Menus.getMenu(Menus.AppMenuBar.EDIT_MENU); //  "" var ContextMenu = Menus.getContextMenu(Menus.ContextMenuIds.EDITOR_MENU); var KeyManager = brackets.getModule('command/KeyBindingManager'); // ... var COMMAND_ID = 'decodehtmlentity.convert'; CommandManager.register('Decode HTML Entity', COMMAND_ID, handleDecodeHtml); Menu.addMenuItem(COMMAND_ID); KeyManager.addBinding(COMMAND_ID, 'Ctrl-Alt-D'); // Ctrl    CMD  Mac ContextMenu.addMenuItem(COMMAND_ID); }); 

こんにちは出版

アプリケーションを公開するには 、main.jsを含むフォルダーにpackage.jsonを追加する必要があります。 パッケージの形式は非常にシンプルで、Node.jsとnpmの経験がある人には馴染みのあるものです。

 { "name": "brackets.decode-html-entity", "title": "Decode HTML Entity", "description": "This extension uses to decode any HTML-encoded string.", "version": "0.1.0", "engines": { "brackets": ">=1.7.0" }, "license": "MIT", "i18n": ["en", "ru"], "package-i18n": { "ru": { "description": "     HTML-." } } } 

フォルダーを拡張子でアーカイブし（githubに「ZIPをダウンロード」ボタンがあります）、brackets -registry Webサイトにログインし、zipファイルをレジストリにアップロードして拡張機能を公開します。

»プラグインのソースコードはgitbakhで入手できます 。