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.ioから最新のBracketsバージョンをダウンロードします。
この拡張をインストールするには、次の手順を実行します。
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サーバーに直ちに同期された方法を確認できます。
コンテンツを AEM 開発インスタンスに、または AEM 開発インスタンスから同期するには、プロジェクト設定を定義する必要があります。これを行うには、AEMメニューに移動し、プロジェクト設定…を選択します。
プロジェクト設定を使用して、次のものを定義できます。
http://localhost:4502
)admin
)admin
)AEM Brackets Extensionは、filter.xml
で定義されたフィルタリング規則で許可されるファイルおよびフォルダに対して、次の種類のコンテンツ同期を提供します。
これは、変更内容を Brackets から AEM インスタンスへという方向にのみ同期するもので、逆方向には同期しません。
Project Explorerで、任意のファイルまたはフォルダーを右クリックしてコンテキストメニューを開き、Export to ServerまたはImport from Serverオプションにアクセスできます。
選択したエントリがjcr_root
フォルダー外にある場合、Export to ServerとImport from Serverコンテキストメニューのエントリは無効になります。
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 Incorporated組織がGitHub上でホストしています。
ご自由に投稿してください。