Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

「Adobe Edge Code」で使える、コーディングを加速させる様々なプラグイン

「Adobe Edge Code CC」徹底入門(3)

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

 Edge Codeはエディタ自体がHTML5で構築されており、拡張機能もHTML5で作成されています。前回までで触れている通り、Edge CodeはBracketsのディストリビューションであることから、Bracketsの拡張機能はEdge Codeでもほぼそのまま利用可能です。「ほぼ」と書いたのは、Bracketsはバージョンアップの頻度が高く、最新のBrackets用の拡張機能が使えない場合もあるためです。

 Bracketsのプラグインのラインナップはとても充実しており、うまく組み合わせればパワフルなエディタを構築することができます。今回はフロントエンド開発に役立つであろうプラグインをピックアップして紹介します。気になった機能は試しにインストールしてみることをおすすめします。

拡張機能のインストール方法

 現在のEdge Code CC Preview 5では、拡張機能のインストールパネルが表示されません。拡張機能はオンラインの一覧からURLを取得してインストールすることもできますが、エディタ内からシームレスにインストールしたいので、パネルを表示させる方法をこちらを参考にして有効にしてください。

 有効にできない場合は、Brackets Extension RegistryからインストールしたいプラグインのURLを、[File]-[Extension Manager…]より入力してインストールしてください。

UI関連

Themes

 CodeMirrorベースのテーマセットを使えるようになるプラグイン。インストールするとThemesというメニューが追加され、Sublime Textなどでおなじみの、Monokaiなどのテーマが選べるようになります。

brackets-code-folding

 Edge Codeにはデフォルトでコード折りたたみ機能がついていないため、このプラグインを入れておくと良いでしょう。js/json/css/html/less/xmlファイルに対応しています。

Markdown Preview

 Markdownファイルをプレビューするパネルを表示してくれるプラグイン。インストールすると、右のメニューにボタンが追加され、Markdownファイルを開いている時のみ有効になります。

Vimderbar

 Edge Codeをvim化してくれるプラグイン。挿入モード、ヴィジュアルモードの切り替えができ、基本のキーバインディングや:コマンドも使えるようになり、vimのような操作を可能にしてくれます。

ユーティリティ

To Gist

 EditメニューにCreate Gistというメニューが追加されます。エディタ上の選択エリアを新規ウィンドウで開き、匿名のGist URLを生成して表示してくれるプラグイン。

Todo

 TODO/NOTE/FIXME/CHANGESの4種類のTODOコメントの一覧を出せるようにするプラグイン。コメントの行頭に各キーワードを付記するだけで、一覧にTODOが出るようになります。とても管理しやすく、カラーリングも見やすい。

Brackets Key Remapper

 FileメニューにRemap Keys…というメニューが追加されます。これはキーボードショートカットを設定する機能を追加してくれるプラグインです。Edge Codeはデフォルトでキーボードショートカットのカスタマイズができないので重宝します。

Close Others

 サイドナビのコンテキストメニューに、Close Othersというメニューが追加されます。今開いているファイル以外を一括で閉じる機能を追加してくれるプラグイン。

コード整形

Emmet

 もはや説明は不要ですね。これがないと始まりません。

Prefixr

 http://prefixr.com/のプリフィックス機能をエディタ上で使えるようにするプラグイン。EditメニューにGenerate CSS Prefixesというメニューが追加されます。選択した範囲のCSSコードに、ベンダープリフィックスを追記してくれます。

コード向けユーティリティ

Beautify

 alt+command+LでJavaScript/HTML/CSSファイルを整形してくれるプラグイン。使いやすいです。

W3CValidation

 リアルタイムでHTMLバリデーションをしてくれるプラグイン。

Snippets

 f myFuncと打つと、下記のようにfunction定義を展開してくれます。

function myFunc () {

}

 for x myArrayと打つと変数定義して、for文を展開してくれます。

var x;
for (x = 0; x < myArray.length; x++) {

}

ImageToData

 インストールすると、右のメニューにボタンが追加されます。ボタンクリックで表示されるダイアログで直接画像のURLを指定すると、Data URIに変換してくれます。

Image dimension extractor

 このプラグインをインストールすると、コンテキストメニューにGet image dimensionというメニューが追加されます。また、CSSファイル上の画像パスを記述している箇所で実行すると、画像の幅と高さのプロパティが追加されます。

String Convert

 文字列を変換するメソッドを、Editメニュー/コンテキストメニューに追加してくれるプラグインです。

 以下のメニューが使えるようになります。

To Upper Case/To Lower Case/HTML Entity Encode/HTML Entity Decode/Double to Single Quotes/Single to Double Quotes/Toggle Quotes/Encode URI Component/Decode URI Component Strip Trailing Whitespace/Convert Tabs to Spaces/Convert Spaces to Tabs

Special Html Characters

 コンテキストメニューに、特殊文字を表示するHTMLのショートカット機能を追加してくれるプラグイン。コピーライトやトレードマークなどの特殊文字を簡単に挿入できるようにしてくれます。

JSHint

 標準ではJSLintのパネルのみ搭載されています。このプラグインでJSHintのエラーパネルを追加できます。少しLineの列幅が広いのはご愛嬌です。

Interactive-Linter

 自前のlinterをプロジェクト単位で使えるようにしてくれるプラグイン。プロジェクトフォルダに.jshintrc/.jslintrc/.coffeelintrcを用意することで有効になり、エラー箇所の行頭にアテンションを出してくれます。

xUnit&Blanket

 Jasmine/QUnit/YUI3などのテストをサポートしてくれるプラグイン。JSのコードから自動でテスト定義を生成してくれる機能を備えています。詳しくは、YouTubeの紹介映像でご覧いただけます。

プロジェクトテンプレート

Brackets New Project Creator

 プロジェクトファイルのブートストラップ機能を追加してくれるプラグイン。デフォルトでHTML5/HTML5 with jQuery/Brackets Extensionのプロジェクトテンプレートが利用できます。これは便利です。

Creative Cloud Extension Builder

 Photoshop/Illustrator/Premire/Prelude/InDesignの拡張機能を作成するビルダーを提供してくれるプラグイン。ダイアログで対象にしたいアプリケーションと拡張機能名、IDを入力して作成するだけで、ひな形が対象アプリケーションにインストールされます。Edge Code上でそのままひな形のプロジェクトが開かれ、すぐに開発を始めることが可能です。

入れておくと便利かも?

Column Ruler

 これはちょっと面白いプラグイン。有効にすると文字数のガイドとルーラーを表示してくれます。ただし、フォントをsource code proで表示している場合は、うまく動かないようです。

Unused Files

 プロジェクト内で利用されていないファイルを検索して、一覧で表示してくれるプラグイン。あくまで一覧表示してくれるだけですが、うっかり残してしまっているゴミファイルなどを探すときには重宝するかもしれません。

PageSuck

 alt+Sで表示されるダイアログにWebサイトのURLを入力するだけで、当該のページのhtmlを抜き出し、Edge Code上に新規ファイルで表示してくれます。

Lorem Ipsum

 ダミーテキストを生成してくれるプラグイン。lorem+Tabでダミーテキストを展開してくれます。その他にも文字数の制限を切り替える記法が用意されています。詳しくはgithubのページを確認してみてください。

HTML製エディタならではの統合性

 いかがでしたでしょうか。うまくプラグインを組み合わせると、かなり豊富な機能を備えたエディタが構築できることを実感できたと思います。これからプラグインの数がもっと増えていくことで、より可能性が増していくのではないでしょうか。Extension Managerで簡単に管理できるので、ぜひ試しに使ってみてください。次回は、自前のプラグインを作成する方法を見ていきたいと思います。

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

著者プロフィール

  • 又村 洋史(マタムラ ヒロフミ)

    株式会社イノーヴ WEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。個人ブログ「Deconcepter」ではWEBに関わる人が押さえておきたい情報の...

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