AEM Brackets Extension は、AEM コンポーネントとクライアントライブラリを編集するためのスムーズなワークフローを提供し、Brackets コードエディターのパワーを活用して、コードエディター内から Photoshop ファイルおよびレイヤーにアクセスできるようにします。この拡張機能によって(Maven や File Vault は不要です)同期が容易になるので、開発者の効率性が向上すると共に、AEM に関する知識が限られているフロントエンド開発者もプロジェクトに参加できます。この拡張機能は、HTML Template Language(HTL)のサポートも提供しており、複雑な JSP を使用しない、より手軽でセキュアなコンポーネント開発を可能にします。
AEM Brackets Extension の主な機能には次のものがあります。
data-sly-*
ブロックステートメントの HTL コードコンプリート。さらに、Brackets には AEM フロントエンド開発者の役に立つ機能が数多く付属しています。
AEM Brackets Extension は、Brackets バージョン 1.0 以上をサポートしています。
最新バージョンの Brackets を brackets.io からダウンロードしてください。
この拡張をインストールするには、次の手順を実行します。
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 Example を使用できます。GitHub で、「Download ZIP」をクリックし、ファイルをローカルに抽出し、上記の説明に従って Brackets で jcr_root
フォルダーを開きます。次に、以下の手順に従ってプロジェクト設定を行い、最後に「コンテンツパッケージ全体の同期」セクションの下部の説明に従って「Export Content Package」を実行して、パッケージ全体を AEM 開発インスタンスにアップロードします。
これらの手順が完了したら、AEM 開発インスタンス上の URL /content/todo.html
にアクセスし、Brackets でコード変更を開始できるようになり、web ブラウザーを更新することで変更内容がただちに AEM サーバーに同期されることを確認できます。
コンテンツを AEM 開発インスタンスに、または AEM 開発インスタンスから同期するには、プロジェクト設定を定義する必要があります。プロジェクト設定の定義は、AEM メニューに移動し、「プロジェクト設定」を選択しておこないます。
プロジェクト設定を使用して、次を定義できます。
http://localhost:4502
)admin
)admin
)AEM Brackets Extension は、filter.xml
で定義されているフィルタリングルールによって許可されているファイルおよびフォルダーに対して、次のタイプのコンテンツ同期を提供します。
これは、変更内容を Brackets から AEM インスタンスへという方向にのみ同期するもので、逆方向には同期しません。
Project Explorer で、任意のファイルまたはフォルダーを右クリックしてコンテキストメニューを開き、「サーバーにエクスポート」または「サーバーからインポート」オプションにアクセスできます。
選択したエントリが jcr_root
フォルダー外にある場合、コンテキストメニュー項目「サーバーにエクスポート」および「サーバーからインポート」は無効になります。
AEM メニューで、「コンテンツパッケージのエクスポート」または「コンテンツパッケージのインポート」オプションを使用して、プロジェクト全体をサーバーと同期できます。
AEM Brackets Extension によって、Brackets ウィンドウの右側のツールバーに、最新の同期ステータスを示す通知アイコンが追加されます。
通知アイコンをクリックすると、同期された各ファイルのステータスすべてを一覧表示する同期ステータスレポートダイアログが開きます。
使用する同期方法にかかわらず、filter.xml
のフィルタリングルールによって「含める」とマークされているコンテンツのみが同期されます。
さらに、リポジトリーへの同期およびリポジトリーからの同期からコンテンツを除外するために、.vltignore
ファイルがサポートされています。
AEM Brackets Extension によって、HTL 属性および式の作成を容易にするオートコンプリートも導入されます。
sly
」と入力します。この属性は、「data-sly-
」にオートコンプリートされます。式 ${}
内で、一般的な変数名がオートコンプリートされます。
AEM Brackets Extension はオープンソースのプロジェクトで、Apache License バージョン 2.0 に従って、Adobe Marketing Cloud チームにより GitHub にホストされています。
Brackets コードエディターもオープンソースのプロジェクトで、Adobe Systems Incにより GitHub にホストされています。
ご自由に投稿してください。