Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

目次

現在のドキュメントの編集

 ここでは、何かもう少し役に立つ処理をするために、現在のドキュメント内でコードを生成する拡張機能が必要であると仮定しましょう。

 Bracketsでは、ツールで開いたファイルはDocumentクラスのインスタンスとして表されます。現在のドキュメント(つまり、ユーザーが現在開いて、編集しているファイル)への参照を取得するには、DocumentManagerモジュールを使用する必要があります。最初に、このモジュールへの参照を取得する必要があります。このモジュールはdocumentフォルダー内にあります。

var DocumentManager = brackets.getModule("document/DocumentManager");

 ここでは、前のセクションのコードを利用して、sayHello()関数の名前をaddSomeText()に変更します。

 この関数の内部で最初に行う必要がある処理は、現在のドキュメントへの参照を取得することです。

var currentDoc = DocumentManager.getCurrentDocument();

 ここで、テキストコンテンツの操作に役立つDocument APIを使用します。使用可能なメソッドのいくつかを以下に示します。

  • getText()は、テキストコンテンツ全体を返します。
  • setText()は、テキストコンテンツ全体を設定します。
  • getRange(start, end)は、テキストコンテンツの一部を返します。
  • replaceRange(text, start, end)は、指定された位置にあるテキストを置換します。

 テキスト内の位置(前述のstartおよびendパラメーターなど)は位置オブジェクトによって表されます。このオブジェクトには、line(行番号)とch(文字番号)の2つのプロパティがあります。

 次のシナリオでは、現在のカーソル位置に1行のコメントを生成する必要があると仮定します。Editorオブジェクトでコード編集を管理するので、EditorManager.getCurrentFullEditor()メソッドによって返される現在のエディターインスタンスへのアクセスを取得する必要があります。その後、次のように対応するモジュールをインポートします。

var EditorManager = brackets.getModule("editor/EditorManager");

 次のように、現在のドキュメントのエディターにアクセスできます。

var editor = EditorManager.getCurrentFullEditor();

 最後に、このエディターを使用して、次のような、選択したテキストに関連するあらゆる種類の操作を実行できるようになります。

  • getSelectedText()
  • setSelection(start, end)
  • selectWordAt(position)
  • getCursorPos()

 これで、必要なすべてのものにアクセスできるようになったので、addSomeText()関数を次のように作成し直すことができます。

function addSomeText() {        
    var currentDoc = DocumentManager.getCurrentDocument();
    var editor = EditorManager.getCurrentFullEditor();
    var pos = editor.getCursorPos();

    currentDoc.replaceRange("//Black magic. Do not modify EVER", pos);
}

次のステップ

 当然、このようなシンプルな例では、ある程度までしか導いてくれません。すぐに、他のモジュールによって公開されるAPIの詳細を学習することが必要になります。詳しく学習するために役立つリソースのいくつかを以下に示します。

  • Bracketsのソースコード自体は、当然、究極の唯一100%信頼できる情報源です。Brackets Extension Toolkitをインストールしている場合は、Help(ヘルプ)/Open Brackets src(Brackets srcを開く)を選択します。Document、Editor、EditorManager、FileUtilsを始め、デフォルトの拡張機能をすべて参照してください。
  • Brackets wikiには役に立つ情報が豊富にあります。特に、「How to write extensions page」(拡張機能ページを作成する方法)では、知っておく必要がある基本事項が説明されています。Brackets Extension ToolkitのHelpメニューには、このwikiへのショートカットがあります。
  • 現在のドキュメントのコードを編集する拡張機能を作成しようとしている場合、下位のコード編集ロジックを担当するプロジェクトである、CodeMirrorに慣れておくことをお勧めします。
  • より高いレベルでBracketsの仕組みを理解するには、記事「An overview of Brackets code architecture」(Bracketsのコードアーキテクチャの概要)でBracketsの一般的なアーキテクチャの詳細を学習してください。
  • 最後に、拡張機能にUIを含める予定である場合は、Brackets wikiにある「Extension UI Guidelines」(拡張機能のUIガイドライン)のドラフトを参照してください。


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

著者プロフィール

  • David Deraedt(David Deraedt)

    David DeraedtはAdobe FlexおよびAdobe AIRを専門に手がけるFlash Platformコンサルタントです。Davidは認定トレーニングセンターのRegart.netにてインストラクターとしても活躍しています。また、これまで、AIR for Flex Developers...

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

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