AEM Brackets Extension

概要

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

機能

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

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

1. Brackets を開きます。File メニューで、「Extension Manager」を選択します。

2. 検索​バーに「AEM」と入力し、AEM Brackets Extension を探します。

   

3. 「インストール」をクリックします。

4. インストールが完了したら、ダイアログと Extension Manager を閉じます。

はじめに

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

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

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

1. jcr_rootフォルダー(例：myproject/jcr_root)

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

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

プロジェクト設定

コンテンツを AEM 開発インスタンスに、または AEM 開発インスタンスから同期するには、プロジェクト設定を定義する必要があります。これは、AEM​メニューに移動し、「プロジェクト設定…」を選択することで実行できます。

プロジェクト設定を使用して、次のものを定義できます。

1. サーバーURL(例：http://localhost:4502)
2. 有効なHTTPS証明書を持たないサーバーを許容するかどうか（必要な場合を除き、オフのままにします）。
3. コンテンツの同期に使用するユーザー名（例：admin）
4. ユーザーのパスワード(例：admin)

コンテンツの同期

AEM Brackets Extensionは、filter.xmlで定義されたフィルタールールで許可されるファイルおよびフォルダーのコンテンツ同期を、次のタイプで提供します。

変更されたファイルの自動同期

これは、変更内容を Brackets から AEM インスタンスへという方向にのみ同期するもので、逆方向には同期しません。

手動双方向同期

Project Explorerで、任意のファイルまたはフォルダーを右クリックしてコンテキストメニューを開き、「Export to Server」または「Import from Server」オプションにアクセスできます。

コンテンツパッケージ全体の同期

AEM​メニューで、「コンテンツパッケージを書き出し 」または「コンテンツパッケージを読み込み 」オプションを使用して、プロジェクト全体をサーバーと同期できます。

同期ステータス

AEM Brackets Extension によって、Brackets ウィンドウの右側のツールバーに、最新の同期ステータスを示す通知アイコンが追加されます。

• 緑 - すべてのファイルが正常に同期されました
• 青 - 同期操作中です
• 黄 - 一部のファイルが同期されませんでした
• 赤 - ファイルがすべて同期されませんでした

通知アイコンをクリックすると、同期された各ファイルのステータスすべてを一覧表示する同期ステータスレポートダイアログが開きます。

HTL コードの編集

AEM Brackets Extension によって、HTL 属性および式の作成を容易にするオートコンプリートも導入されます。

属性のオートコンプリート

1. HTML 属性に「sly」と入力します。この属性は、「data-sly-」-」にオートコンプリートされます。
2. ドロップダウンリストでこの HTL 属性を選択します。

式のオートコンプリート

式${}内では、共通の変数名がオートコンプリートされます。

詳細情報

AEM Brackets Extension はオープンソースのプロジェクトで、Apache License バージョン 2.0 に従って、Adobe Marketing Cloud チームにより GitHub にホストされています。

• コードリポジトリ：https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Apacheライセンス、バージョン2.0:https://www.apache.org/licenses/LICENSE-2.0.html

また、Bracketsコードエディターはオープンソースプロジェクトで、GitHub上でAdobe Systems Incorporated組織によってホストされます。

• コードリポジトリ：https://github.com/adobe/brackets

ご自由に投稿してください。