AEM Brackets Extension

概要

AEM Brackets Extension は、AEM コンポーネントとクライアントライブラリを編集するためのスムーズなワークフローを提供し、Brackets コードエディターのパワーを活用して、コードエディター内から Photoshop ファイルおよびレイヤーにアクセスできるようにします。この拡張機能によって（Maven や File Vault は不要です）同期が容易になるので、開発者の効率性が向上すると共に、AEM に関する知識が限られているフロントエンド開発者もプロジェクトに参加できます。この拡張機能は、HTML Template Language (HTL)もサポートします。これにより、コンポーネントの開発を容易にし、より安全にするためにJSPの複雑さが解消されます。

chlimage_1-53

特長

AEM Brackets Extension の主な機能には次のものがあります。

変更されたファイルをAEM開発インスタンスに自動で同期します。
ファイルとフォルダーの手動の双方向同期。
プロジェクトの完全なコンテンツパッケージの同期。
式およびdata-sly-*ブロック文のHTLコード補完

さらに、Brackets には AEM フロントエンド開発者の役に立つ機能が数多く付属しています。

レイヤー、測定値、色、フォント、テキストなどの情報を PSD ファイルから抽出するための Photoshop ファイルサポート。
抽出されたこれらの情報をコード内で再利用しやすくするための PSD からのコードヒント。
LESSやSCSSなど、CSSプリプロセッサのサポート。
より具体的なニーズに対応する何百もの追加の拡張。

インストール

Brackets

AEM Brackets Extension は、Brackets バージョン 1.0 以上をサポートしています。

brackets.ioから最新のBracketsバージョンをダウンロードします。

AEM Brackets Extension

この拡張をインストールするには、次の手順を実行します。

Brackets を開きます。File メニューで、「Extension Manager」を選択します。
検索バーに「AEM」と入力し、AEM Brackets Extension を探します。
「インストール」をクリックします。
インストールが完了したら、ダイアログと Extension Manager を閉じます。

はじめに

コンテンツパッケージプロジェクト

拡張をインストールしたら、Brackets を使用してファイルシステムのコンテンツパッケージフォルダーを開き、AEM コンポーネントの開発を始めることができます。

プロジェクトには、少なくとも次のものが必要です。

jcr_rootフォルダー(例：myproject/jcr_root)
filter.xmlファイル(例：myproject/META-INF/vault/filter.xml);filter.xmlファイルの構造の詳細については、ワークスペースフィルター定義を参照してください。

Brackets の File メニューで「Open Folder」を選択し、jcr_root フォルダーまたは親プロジェクトフォルダーを選択します。

メモ

コンテンツパッケージを持つプロジェクトがない場合は、HTL TodoMVCの例を試してみてください。 GitHubで、「ZIPをダウンロード」をクリックし、ファイルをローカルに展開します。上記の指示に従って、Bracketsのjcr_rootフォルダーを開きます。次に、次の手順に従ってプロジェクト設定を設定し、最後に、「コンテンツパッケージ全体の同期」セクションの指示に従ってコンテンツパッケージの書き出しを実行し、AEM開発インスタンスにパッケージ全体をアップロードします。

これらの手順の後、AEM開発インスタンスの/content/todo.html URLにアクセスできるはずです。また、Brackets内のコードを変更する開始が、Webブラウザーで更新を行った後、変更がAEMサーバーに直ちに同期された方法を確認できます。