こんにちは、FlashDevelopデビューして早数ヶ月のkijimaです。

今回の記事は、悠々自適にFlashDevelopで開発を進める僕を見てMacからWindowsに開発環境を移行しようか真剣に考えている、隣の席の弊社Flasherに捧げます。


それではさっそく、カスタマイズ方法について解説していきます!

  • 0. まずFlashDevelopをインストール
    下記ページの「download」から、最新版のFlashDevelopをダウンロードします(現行の3.0.0 beta9バージョンと想定して進めます)
    http://www.flashdevelop.org/community/

  • 1. とりあえず日本語化しましょうか
    このFlashDevelopというアプリケーションは、設定用XMLファイルの内容を書き換えることでかなり細かい部分までカスタマイズすることが可能です。
    その設定用ファイルが格納されているディレクトリへは、起動したアプリケーション内から呼び出すことができます。
    ここからエクスプローラーで設定ディレクトリを開けます
    メニュー内「Tools」から「Application Files」を選択しましょう。普通にエクスプローラーから探して開く場合は、下記ディレクトリになります(Vistaの場合)

    C:\Users\ユーザー名\AppData\Local\FlashDevelop



    すると、エクスプローラーで各種設定ファイルが格納されているディレクトリが開かれます。
    今回のカスタマイズで変更するのは、「Settings」「Snippets」「Templates」内のファイルたちです。
    • Settings …アプリケーション全体の設定
    • Snippets …コード記述時に表示されるコードヒント系
    • Templates …新規ASファイルを作成したときのテンプレートなど
    とはいっても、初期状態ではメニュー名もなにもかも英語なので、どのファイルをいじればどこが変更される、という情報は探っていくしかありません。そんなときは迷わず先人達に教えを請うということで、日本語化について参考にさせていただいたサイトがこちら。
    code:x - FlashDevelop

    で、実際に僕がカスタマイズしたファイルがこちらです。同名ファイルを入れ替えてお使い下さい。「Help」メニューから開けるリファレンスのリンク先も最新版の日本語ページに変更してあります。
    081126_fdev_Setting.zip

    ※注意! 設定ファイルをいじる場合は元ファイルを他の関係ないディレクトリにバックアップしておくことをおすすめします。過去に一度、同ディレクトリ内にバックアップファイルを保存しておいたら、なんらかのタイミングでディレクトリ内ごと初期化されたことがあり、その晩は悔しくて枕を濡らしました。

    補足:リファレンスのリンク先を変更する方法については、こちらの記事でもくわしく解説しています。
    FlashDevelopの言語リファレンスのリンク先

  • 2.新規ファイル作成時のテンプレートをカスタマイズ
    全体を日本語化できたら、今度は「新規ファイル作成」したときに開かれるテンプレートを設定しましょう。さきほど紹介した「Templates」ディレクトリ内のファイル内容を書き換えます。今回は例として、「AS3.fdt」ファイルを以下のように変更してみました。至極シンプルなカスタマイズにとどめてあります。

    package { public class $(EntryPoint) { //メンバ変数 //コンストラクタ public function ():void{ } } }

    「$(EntryPoint)」という記述は、開いたときにキー入力位置をどこにするか?というもので、上の例では初期設定と同じく、クラス名を決定するところに配置しました。
    で、変更を保存してから新規AS3ファイルを作成(ショートカットで「Ctrl+2」)すると、先程設定した時点からいきなり記述を始められます。これでスタートダッシュをアイツより一歩リードできるはず!
    Templates>AS3設定

  • 3. オリジナルのスニペッツを登録して[Ctrl+B]で呼び出し
    FlashDevelopはもともとコードヒント機能が優秀で、自前で作成したクラスやメソッドもヒント表示してくれるなど、いったん使い始めるともうFlash IDEでは開発できない!と思うくらいなんですが、記述中に自動表示されるコードヒントとは別に、いつでも自ら呼び出して使えるスニペッツ機能があります。それもカスタマイズしてしまいます。
    スニペッツ使用時のスクリーンショット

    初期設定の状態でもコード記述時に「Ctrl+B」のショートカットで上記のようなポップアップウィンドウを表示してくれます。ですが、そこでたとえば「for」を選択したときに挿入される実際のコード内容をカスタマイズしたいときはどうすればいいか? 勘のいい方はお気づきですね。さきほど紹介した「Snippets」ディレクトリ内にある下記ファイルを書き換えます。

    C:\Users\ユーザー名\AppData\Local\FlashDevelop\Snippets\as3\for.fds

    しかも、既存のSnippetsを書き換えるだけでなく、自分で好きなスニペッツを登録してしまうこともできます!試しに、「trace.fds」というスニペッツを作成してみました。

    trace( $(EntryPoint) );

    これだけ。 これだけ記述して、「trace.fds」という名前でさきほど「for.fds」があったディレクトリと同階層に新規保存します。
    そして改めてコード記述時に「Ctrl+B」してみると…
    スニペッツ使用時のスクリーンショット(trace)
    以上です。カスタマイズ魂を存分に発揮してみてください。

  • 4. 便利なFlashDevelop用プラグインを入れる
    プラグインについては、こちらの記事でくわしく解説していますのでご覧下さい。決して手抜きではありません。
    FlashDevelopのプラグインをいろいろ試してみた!

  • 5. カラーリングを変更(記事にリンク)
    またも同じく、こちらの記事でくわしく解説しています。決して手抜きではありません。
    FlashDevelopのカラーリング

  • 6. ウィンドウ分割して複数表示
    さて、ここからは実際にコーディングしているときのカスタマイズ方法です。
    エディタによくある?機能としてウィンドウを分割して、複数ファイルを表示することができます。クラスが入り組んできたり、継承したクラスを確認しつつ…みたいな作業のときに便利です。
    使い方は、タブをドラッグして、出てきた十字のボタンに合わせて好きな方向にドロップするだけ。
    複数ウィンドウ分割時のスクリーンショット
    すると、下のように分割表示に!
    複数ウィンドウ分割時のスクリーンショットその2

  • 7. ブックマーク機能を駆使する
    自分もあまり使ってなかったんですが、ブックマーク機能というものがありました。ファイル内の好きな行をブックマークして、ショートカットひとつで自由に行き来することが出来るみたいです。
    「Ctrl+F2」でカーソルがある行をブックマーク登録。行番号の横に星マークがつきます。星マークがある状態で「F2」キーを押すと、そのブックマーク箇所へカーソルが移動します。使いようによってはけっこう便利な気がします。
    こんな使い方もできます。下記のフィールドでブックマークしたいワードを入力してEnterキーを押すと…、
    ブックマーク一括登録時のスクリーンショット
    「function」と記述された行すべてがブックマークされます。
    ブックマーク一括登録時のスクリーンショットその2

最後に~カスタマイズしてみての感想

…と、かなり駆け足で解説してしまったんですが、以上が自分のカスタマイズした方法のすべてです。自分はFlashDevelopを導入してから、作業スピードが1.5倍は向上したと思います。
基本的な方法だけの説明だったので、実際に導入して好きなようにカスタマイズしていくと、その便利さに驚くはず。今回解説した部分以外にも、ちょっとした便利な点がいろいろあります。その効果はぜひ実際に使って体験してみて下さい!

HTML5飯