オープンIDE Adob​​e Bracketsの概要

環境の最初のレビュー （このレビューは1年以上前に公開されました）以来、IDE Bracketsは有望なプロトタイプからWebアプリケーション開発用の本格的なツールに進化しました。 最近、このメディアがパスで言及された投稿も公開されましたが、テキストとコメントはプロジェクトの説明に非常にけちだったので、このIDEの可能性についてコミュニティにもっと詳しく伝えることが有用であることがわかりました。



IDEブラケットとは何かに関する少しの情報。 この環境は、AdobeのChromium Embedded Framework（CEF）を使用するWebプログラマ向けのWebプラットフォーム（HTML、CSS、およびJavaScript）で開発されています。 ブラケットは、CodeMirror、jQuery、require.js、Bootstrap、Node.jsなどのプロジェクトに基づいています。 ソースコードは 、オープンソースのMITライセンスの下で配布されます。 プロジェクトの主な目標は、Web開発プロセスを簡素化することです。 IDEでの作業は、スクラム方法論に基づいています（2.5週間のスプリント）。 環境は非常に安定しています-IDE Brackets開発者自身がかなりの期間、日常業務で使用し始めました。 ここから環境をダウンロードできます。



ハイライト：環境がLinuxで利用可能になり、Node.jsのサポートが登場し、HTML、CSS、JavaScriptのインテリジェントなコード補完が実装され、コミュニティは100を超える便利なプラグインを作成し、さらにレスポンシブデザインでレイアウトの作成を簡素化する高度なシステムが開発されました。それを見た人にすごい効果をもたらします。



（猫のスクリーンショットの下で〜1.5Mb）

インテリジェントなコード補完

新しいAPIのおかげで、自動補完はどこでも機能します：HTML、CSS、JavaScript（jQueryを含む）。

HTML：

CSS：

CSS補完







オートコンプリートURLパラメーター

JavaScript（jQuery）：

インラインコード編集

IDEの主なアイデアの1つ-同じプロジェクト内のファイル間の移動数を減らす-は、いわゆるインライン編集を使用して実装されます。これにより、プロジェクト内の現在の場所を離れることなく、他のファイルの状況依存部分を操作できます。 ホットキー（PCではCtrl + E / Mac OSではCmd + E）によって呼び出されます。 開発者は、このアイデアを使用する新しい機能（「インラインカラーエディター」、「インラインベジェツール」など）も追加します。

CSSインライン編集

インライン編集は、複数の要素に対して同時に呼び出すことができます。 複数のスタイルが要素に適用されている場合、右側のリストから対応する要素を選択するか、ホットキーAlt +↑、Alt +↓を使用して、スタイル間を移動できます。

JavaScript関数宣言へのクイックアクセス：

現時点では、具体的な遅延で動作します。関数/メソッドの宣言が見つからない場合があります。

インラインカラーエディター：

インラインベジェツール：

CSSトランジションで一時的な関数として使用されるベジェ曲線の視覚化ツール。 それは活発に開発中です。

ドキュメントへのクイックアクセス（クイックドキュメント）

実際、これはそれほど新しい機能ではありませんが、非常に便利で、以前の機能と少し重複しています。 コードの操作中にCSS要素のヘルプを直接表示します（PCの場合はCtrl + K / Mac OSの場合はCmd + K）。 ヘルプシステムはwebplatform.orgの資料に基づいています。

プロジェクトファイルへのクイックアクセス（クイックオープン）

Ctrl / Cmd-Shift-Oを押すと、プロジェクトファイルにすばやく移行するための素敵なパネルがポップアップします。 必要なファイルの名前の先頭を入力してください-結果が得られます：

プラグイン管理

IDEには、長年にわたってプラグインを管理するためのヒューマンインターフェイスがあり、開発者はこれを非常に誇りに思っています。実際、非常に使いやすいです。







現時点で120以上のアドオンがすでに利用可能であることを言っておく価値がありますが、その中にはGemとの統合ツールであるEmmet 、Sublime Textなどのコードのミニマップがあります。 また、利用可能なプラグインの数が着実に増加していることも注目に値します。 追加のプラグインを備えたIDEを表示します。

Node.jsに基づくライブプレビュー

デフォルトでは、ローカルのNode.jsサーバーのおかげでライブプレビューが機能します。 以前のバージョンでは、この関数はfile：//を介して機能していました。これにより、Typekitなどの外部サービスの統合で問題が発生する可能性がありました。



「ライブプレビュー」の特性は、CSSファイルの編集時、HTMLおよびJavaScriptの編集時、変更後すぐに結果が表示されることです-保存後のみ（HTMLファイルの「ライブプレビュー」は次のバージョンから、JavaScriptライブプレビューを実装するプラグイン ）。 また、ブラケットでHTMLを編集する場合、対応する編集可能な要素がブラウザーで強調表示されます。

ローカリゼーション

開発環境は、ロシア語、日本語、ドイツ語、スペイン語、ノルウェー語、チェコ語、ポーランド語を含む17言語で利用可能です。 ロシア語のサポートは最高レベルではありませんが、作業は可能です。 最大の誤解は、Adobe Sourceフォントファミリにキリル文字が含まれていないことに関連しているため、現在のシステムフォントが使用されているため、プログラムの全体的な認識が若干損なわれます。 もちろん、これはすべて、フォントSourceCodeProをキリルアルファベットをサポートするフォントに変更することで処理されますが、このためには少し手で作業する必要があります。

責任ある設計ツール

今年の5月、Lee Brimelowは、レスポンシブデザインの作業を簡素化するために、 ブログで有望なプラグイン（まだユーザーが利用できない）について話しました。 このプラグインの原則は、CSS3メディアクエリを操作するための視覚的なベースを作成することです。 一般に、彼らが言うように、百回聞くよりも一度見た方が良いです：







上記のように、プラグインはまだ作者のビンのどこかにあります。 Githubでプロジェクトをホストするという提案で、彼はResponsive Design Toolはプラグインとして配布されず、Bracketsに直接実装されるので、公式リリースを待つ必要があると答えました。

Linuxサポート

現時点では、LinuxバージョンのBracketsはアルファ版の段階にさえありません。開発者自身が言うように、これは一種の「超早期プレビュー」です。なぜなら、すべての基本機能が実装/動作するはずがないからです。 それでも、現在のLinuxバージョンを使用して作業できます（いくつかの制限があります）。

まとめ

はい、機能とプラグインの数の点で、IDEブラケットは他の成熟した環境やエディターより劣っていますが、それでもいくつかのユニークな機能を提供するWeb開発者向けの完全なツールになります。 もちろん、欠点は、IDEをセットアップするための明確なメカニズムがなく、アプリケーションの最速のダウンロード速度や特定の機能（特にJavaScriptのインライン編集）が動作しないことです。 いずれにせよ、Webプログラミングに精通している開発者なら誰でもBrackets開発に接続し、驚くべきアイデアを実現できるという事実は、この環境を特別なものにします。

参照資料

公式サイト 、 ダウンロードページ 、 ブラケット用プラグイン

Githubプロジェクト

Tuts +チュートリアルビデオ

プロジェクトバックログ



PSテキストに間違いや不正確な点が見つかった場合は、プライベートメッセージでお知らせください。