最近仕事をしている夢ばかり見る野地である。最近職場でPhpStormを使用するようになり、とりあえずCtrlを押しながら関数名をクリックすると定義元までジャンプする機能に驚愕した。Studioという作業環境の変遷をたどってきたのだが、なるほど、Twitter上を始め様々なところで一流な方々が褒めちぎる理由も分かるという感想だ。JetBrainsさん、ヤバいっす。いくら機能に優れているとしてもIDEとしての宿命か、やはり重い......というのも正直なところだ。そんなわけで、ちょっとしたコードの修正や普通の文章を書く際は未だにBracketsを愛用している。実質使っていた期間は一番長く、軽快さや拡張の気楽さで、浮気しつつもやっぱり好きなエディタだが、今回はそんなBracketsの拡張機能を作成してみることにした。JavascriptでできているアプリなのでWeb開発者が気楽にカスタマイズできるアプリとしての側面がある。現在編集しているペインの色を反転させる閲覧者の皆さんはライトUIとダークUI、どちらが好きだろうか?自分は断然ダークUI使いで、明るい画面を見続けると目が疲れてしまう(このブログが文字を読ませるサイトのセオリーから外れて黒背景なのも、読むのに時間のかかる記事が多いからという理由があったりする)。そんな筆者でも、作業が煮詰まってくると気分転換にライトUIに変更することもしばしばあり、Bracketsではテーマを変えていた。このテーマを切り替える作業、デフォルトではショートカットキーが割り当てられておらず、あんまり数を試していると億劫になってくる。そこで今回作るのがテーマはそのままに作業中画面を反転色にする拡張機能だ。Bracketsは上のメニューバー部分以外HTMLで書かれているので、当然CSSが当たるしJavascriptで動的に変更することができる。ショートカットキーを押すというイベントを拾い、現在編集中のエディタ部分を括っているタグにstyleを当ててやれば拡張機能が作れるだろう。}と書けば.hogeの色が反転する。fiterにはプレフィックスが必要なので、普通のWebサイト相手にはautoprefixer等を使って様々なプレフィックスを付与する必要があるが、今回の相手はBracketsただ一つなので-webkit-だけでよい。このCSSを仕込んだ<style>を<head>に仕込み、イベントが発火したらエディタ部分のタグに.hogeを付けたり外したりするのが今回の拡張機能になる。main.jsを用意するまずBracketsを立ち上げ、上部メニューから「ヘルプ」→「拡張機能のフォルダーを開く」を選択する(Macの場合表記にブレがあるかもしれないが、似た名称のメニューを選択しよう)。すると文字通り、Bracketsの拡張機能を保存しているフォルダが現れる。そのフォルダ中、「user」というフォルダの中に、拡張機能名を付けたフォルダを作成しよう(今回は「reversePaneColor」とする)。Bracketsは拡張機能を認識する際、まず拡張機能のフォルダにあるmain.jsというファイルを読みに行く。主なBracketsとのやりとりはこの中に書いていくのだが、コードが短く済みそうならこの中にすべての処理を書いてしまっても構わないだろう。今回も機能部分のコードはすべてmain.jsに書いてしまうことにした。BabelやTypeScriptを使いたい人は設定を済ませた上で、そうでない人は直接、先ほど作った拡張機能のフォルダにmain.jsを作ろう。これから実際にmain.jsへコードを書くわけだが、Bracketsの拡張機能はJavascriptのモジュールとして定義する。Wrapper的な書き方をするのだが、ぶっちゃけ理解しなくても大丈夫だ。何も考えず、以下のコードをmain.jsに貼りつけよう。strict”;の下にコードを追加していく。次にすべきは、Bracketsが用意しているモジュール(というかAPI)のインポートだ。Bracketsは開発者がメニュバーの操作やショートカットキーのイベント発火に悩まないよう、専用のモジュールを用意してくれている。今回は処理を行う関数を登録をするCommandManagerショートカットキーを割り当てるKeyBindingManager初期化処理を管理するAppInit上部メニューバーを操作するMenusの四つを使いたいので、以下のようにmain.jsへコードを追加する。});開発者ツールを使ってBracketsの内部を調べる必要なモノをインポートしたら今度は処理部分を書いていくわけだが、開発対象がBracketsなのでコードを書き始める前に開発者ツールを開いてBrackets自身の解析から始めてみよう。開発者ツールは上部メニュー「デバック」→「開発者ツールを表示」を選択しても開くが、多くのブラウザと同じくF12でも開く。中身は英語だが、Chromeで使われている開発者ツールとほぼ同じものなので、そんなに迷うことなくデバックができるだろう。「Elements」タブの左隣にある矢印をクリックして、Bracketsの任意の部分をクリックすれば「Elements」タブの中で選択した部分のHTMLが指定される。これを用いて拡張機能で操作したいタグを見つけるのだ。今回は編集中のエディタ画面(以下ペイン)が対象なので、先に画面分割機能をonにした後開発者ツールでペインをくくるタグを探す。結果、それぞれid=”first-pane”とid=”second-pane”という属性が指定された<div>達を見つけることができるだろう。ご丁寧にidがふられているので、これを利用して処理を作成できるのが分かった。初期化処理を用意する大抵の拡張機能は、最初になにかしらの初期化処理をしたいことが殆どだろう。今回の拡張機能では、<head>に先述した<style>を挿入するのが目的だ。用意したモジュールのうち、AppInitは初期化処理のためのオブジェクトであり、appReadyメソッドの第一引数にfunctionを仕込んでやれば、その処理がBracketsが立ち上がったタイミングで実行される。});上記のコードをmain.jsに追記してやれば<head>に今回使用するCSSが含まれた<style>を挿入できるだろう。メインの処理を行う関数を作る初期化処理が作れたら、今度はイベントごとに実行されるメインの処理、今回の拡張機能で言えば「ペインの色を反転させる」関数を作成しよう。}CommandManagerへ関数を登録する時に関数名が必要になるので、今回はhandleReversePaneColorという名前を付けた。開発者ツールを使い、現在アクティブなペインには.active-paneというクラスが付くことが判明したので、これを用いてpaneにアクティブなペインを格納。paneに対してclassListメソッドを用いてreverseColorクラスを着脱する。これで先ほどhead内に挿入したstyleの中身に書かれてるCSSを実際のペインへあてることができた。CommandManagerで関数を登録する関数は用意するだけではなく使わねば意味がないので、Bracketsが用意しているCommandManagerへ関数を登録しよう。先ほどの関数にはhandleReversePaneColorという名前を付けておいた。この名前を使いまわしたいところだが、実際にこの関数を使いまわす際には別途IDを設定しなくてはならない。外側が即時関数で括られているように、この関数名はこのモジュール内でのみ有効なので、CommandManagerを通してこの関数を呼び出す時のIDが必要なのだ。いうわけで、変数を新たに作成し、文字列でIDを指定してやる。"reversePaneColor.run";今回はAdobe公式の例に従って「拡張機能名.アクション名」とした。このID名が被っていたら正常に動作しないので、複数の関数を登録する場合は違う名前を設定しよう。この変数をmain.jsを用意するで用意したCommandManagerオブジェクトを通して登録する。登録されるアクションをUI上に表示する際の名称。今回は後で「表示」メニューにアクションを追加する際に表示される。実際に登録する関数を仕込んであげよう。メニューに項目を追加する関数の登録が済んだので、このIDを使いまわしてメニュー項目への追加とキーボードショートカットの登録を行おう。メニューの場合もmain.jsを用意するで用意したMenusオブジェクトを利用して登録をする。「ヘルプ」の七つがあるが、「デバッグ」以外の6つには定数が割り当てられており、その定数で目当てのメニューを選択することになる。「デバッグ」は弄られたくない項目なのだろうか。内部のコードを覗いてみても、「デバッグ」のみ操作するあれやこれが用意されていないため、ここにメニューを挿入する時はゴリ押しで開発することになりそうである。「ファイル」FILE_MENU「編集」EDIT_MENU「検索」FIND_MENU「表示」VIEW_MENU「ナビゲート」NAVIGATE_MENU「ヘルプ」HELP_MENU今回は「表示」メニューへ項目を挿入したいので、コードは以下のようになる。menu.addMenuItem(MY_COMMAND_ID);MenusオブジェクトにあるgetMenuメソッドを用いてmenu変数に「表示」メニューそのものが格納されたオブジェクトをセットする。そのmenu変数に存在するaddMenuItemメソッドを用い、CommandManagerで関数を登録するで登録したIDを設定してやれば、「表示」メニュー項目にCommandManagerオブジェクトのregisterメソッド第一引数に登録した名前が表示され、選択すると実際に動作するはずだ。KeyBindingManagerでショートカットを登録する今度はKeyBindingManagerでキーボードショートカットを設定しよう。使い倒しているとは思うがBracketsには既に膨大な量のショートカットが存在するので、それらショートカットと被らないショートカットを設定する必要がある。デフォルトで設定されているショートカット一覧を調べつつ、実際に押しやすそうなショートカットを決定しよう。ショートカットを実際に登録する際、同時押しは–を間に挟んで記述する。“Ctrl-Shift-Alt-S”という文字列を用意しよう。この文字列をKeyBindingManagerのaddBindingメソッド第二引数にセットし、第一引数にはCommandManagerへ登録したIDをセットしてやればショートカットが動作する。"Alt-3");ただし、Bracketsが動いているOSでショートカットを変える場合にはもうひと手間かける必要がある。先述のコードはプラットフォーム名を省略した形なので、全てのOSで同じショートカットが働く(余談だが、Ctrlを使用した場合、Macでは自動でCmdキーに置き換わる。Brackets優秀)。特定のOSでショートカットを上書きする場合には、addBindingメソッドの第二引数を配列に変更しよう。配列の中身はオブジェクトとし、keyキーにショートカット文字列、platformキーに“Win”・“Mac”・“Linux”のいずれかをセットすればOKだ(platformを省略した場合は明示的に上書きされていないOSのショートカットとして扱われる)。]);package.jsonを作成するここまでで拡張機能としての動作部分は完成した。実際にBracketsの拡張機能として世界に公開する際には拡張機能自身の自己紹介文的なpackage.jsonが必要になる。雛形をAdobeが用意してくれているので、このデータを書き換えて用意するのがベストだろう。nameズバリ拡張機能の名前だが、作成者名.拡張機能名として設定するのが一般的なようである。nameには小文字しか使用できず、大文字を使用してしまうと後述するアップロードの際に怒られてエラーが発生してしまうので気を付けよう。title実際に表示される拡張機能の名前なので、機能が想像しやすくかつカッチョエエ名前を付けよう。description拡張機能の説明。頑張って英語で書こう。homepage拡張機能の説明ページURL。無ければ空白でもよいが、GitHubに上げてある拡張機能のリポジトリURLを載せるケースが多い。versionバージョンの数字。こだわりがないなら“1.0.0”で良い。author作成者の情報。<>内にメールアドレス、()内に自身のホームページを入れてもよい。homepageでGitHubへのリンクを指定すると、この文字列が勝手にGitHubのメンバーページにリンクするようになる。license拡張機能が該当するライセンスの文字列を指定する。文字列はSPDXのライセンスIDリスト中、「Identifier」の欄を参照。enginesオブジェクトを指定し、中身の“brackets”キーに“>=実際に動作確認をしたBracketsのバージョン”を設定する。設定していない言語でも拡張機能は動作するが、指定した言語に翻訳されています、という意味となる。Listsの「639-1」欄を参照。package-i18n先述したi18nで設定した国コードごとにdescriptionなどの翻訳を設定する。キーを国コードにし、値をpackage.json自身のように設定すればOK。以上を踏まえて、今回作成したpackage.jsonが以下になる。"この拡張機能で作業中ペインの色を反転させることができます。}そしてアップロードファイルが一通り揃ったらいよいよアップロードなのだが、アップロードにはGitHubのアカウントが必要なので、もし持っていなかったら作っておこう。ついでにREADME.mdを作ってGitHubのリポジトリを作っておくといいかもしれない。書き方で参考にさせて頂いたのがコチラの記事。ZIP」を利用するといいだろう。リポジトリを作成していない場合でもWindows10環境であればフォルダーを右クリックして「圧縮」から「.zip」で圧縮しても構わない。Mac環境を使用している場合はFinderから作成したZIPはエラーになる場合があるため、前述のGitHubを使用するかコマンドラインでの圧縮で回避しよう。extension」をクリックするかZIPをドロップして拡張機能をアップロードする。無事成功すれば、Bracketsの拡張機能マネージャーから自分のアップロードした拡張機能が確認できるはずだ。いかがだったろうか?実際に今回作成した拡張機能のリポジトリはhttps://github.com/Go-Noji/ReversePaneColorで確認できるので、参考にして欲しい。BracketsはいわゆるIDEと呼ばれるものとは違い、拡張機能で自分好みにカスタマイズしていくテキストエディターだが、肝心の拡張機能が少なければそのメリットも薄くなってしまう。ご存じの通り、Bracketsには膨大な数の拡張機能が存在する。理由の一つは間違いなく、Bracketsを扱うユーザーそのものが拡張機能を作るためのHTML・CSS・Javascriptを扱うスペシャリストだからだろう。スペシャリストと書いたが、多少の知識を持ってさえすれば誰でもすぐに拡張機能の作成に取り掛かれる敷居の低さはBracketsの大きな魅力だ。最近は他アプリの台頭も激しくなり様々な競合ソフトにシェアが分散しているが、いまだに無料かつ軽快な動きで人々を魅了して止まないBrackets。そんなBracketsの世界で多用されるような素晴らしい拡張機能を作ってみてはいかがだろうか。「こんな機能があったらいいのに」という願望を一番よく知っているのは、他でもないBracketsを使用しているあなたなのだから。コメントをキャンセル入力エリアすべてが必須項目です。designerTwitterhttps://twitter.com/Facebookhttps://www.facebook.com/others小田原産Webエンジニア。フロント/バック半々。最近はCodeigniterでECサイトばっかり作っている。