SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

 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ガイドライン)のドラフトを参照してください。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

David Deraedt(David Deraedt)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6950 2013/01/24 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング