AEM Brackets 拡張 aem-brackets-extension
概要 overview
AEM Brackets Extension は、AEM コンポーネントとクライアントライブラリを編集するためのスムーズなワークフローを提供し、Brackets コードエディターのパワーを使用して、コードエディター内から Photoshop ファイルおよびレイヤーにアクセスできるようにします。この拡張機能によって（Maven や File Vault は不要）同期が容易になるので、開発者の効率性が向上すると共に、AEM に関する知識が限られているフロントエンド開発者もプロジェクトに参加できます。この拡張機能は、HTML Template Language（HTL）のサポートも提供しており、複雑な JSP を使用しない、より手軽でセキュアなコンポーネント開発を可能にします。
機能 features
AEM Brackets Extension の主な機能には次があります。
- 変更されたファイルの AEM 開発インスタンスへの自動同期。
- ファイルおよびフォルダーの手動双方向同期。
- プロジェクトのコンテンツパッケージ全体の同期。
- 式および
data-sly-*ブロックステートメントの HTL コードコンプリート。
さらに、Brackets には AEM フロントエンド開発者にとって役に立つ機能が数多く付属しています。
- レイヤー、測定値、カラー、フォント、テキストなどの情報を PSD ファイルから抽出するための Photoshop ファイルサポート。
- 抽出されたこれらの情報をコード内で再利用しやすくするための PSD からのコードヒント。
- LESS および SCSS などの CSS プリプロセッサーサポート。
- より具体的なニーズに対応する何百もの追加の拡張機能。
インストール installation
Brackets brackets
AEM Brackets Extension は、Brackets バージョン 1.0 以上をサポートしています。
最新バージョンの Brackets を brackets.io からダウンロードしてください。
AEM Brackets Extension the-extension
この拡張をインストールするには、次の手順を実行します。
-
Brackets を開きます。ファイル メニューで、「Extension Manager」を選択します。
-
検索バーに「AEM」と入力し、AEM Brackets Extension を探します。
-
「インストール」をクリックします。
-
インストールが完了したら、ダイアログと Extension Manager を閉じます。
はじめに getting-started
コンテンツパッケージプロジェクト the-content-package-project
拡張をインストールしたら、Brackets を使用してファイルシステムのコンテンツパッケージフォルダーを開き、AEM コンポーネントの開発を始めることができます。
プロジェクトには、少なくとも次のものが必要です。
-
jcr_rootフォルダー（例：myproject/jcr_root） -
filter.xmlファイル（例：myproject/META-INF/vault/filter.xml）。filter.xmlファイルの構造について詳しくは、ワークスペースフィルターの定義を参照してください。
Brackets の File メニューで「Open Folder」を選択し、jcr_root フォルダーまたは親プロジェクトフォルダーを選択します。
jcr_root フォルダーを開きます。次に、以下の手順に従って プロジェクト設定 を行い、最後に「コンテンツパッケージ全体の同期」セクションの下部の説明に従って「Export Content Package」を実行して、パッケージ全体を AEM 開発インスタンスにアップロードします。/content/todo.html にアクセスし、Brackets でコード変更を開始できるようになり、web ブラウザーを更新することで変更内容がただちに AEM サーバーに同期されることを確認できます。プロジェクト設定 project-settings
コンテンツを AEM 開発インスタンスに、または AEM 開発インスタンスから同期するには、プロジェクト設定を定義する必要があります。プロジェクト設定の定義は、AEM メニューに移動し、「プロジェクト設定」を選択しておこないます。
プロジェクト設定では、次の項目を定義できます。
- サーバー URL（例：
http://localhost:4502） - 有効な HTTPS 証明書を持たないサーバーを許容するかどうか（必要な場合はオフにしておきます）
- コンテンツの同期に使用するユーザー名（例：
admin） - ユーザーのパスワード（例：
admin）
コンテンツの同期 synchronizing-content
AEM Brackets Extension は、filter.xml で定義されているフィルタリングルールによって許可されているファイルおよびフォルダーに対して、次のタイプのコンテンツ同期を提供します。
変更されたファイルの自動同期 automated-synchronization-of-changed-files
これは、変更内容を Brackets から AEM インスタンスへという方向にのみ同期するもので、逆方向には同期しません。
手動双方向同期 manual-bidirectional-synchronization
Project Explorer で、任意のファイルまたはフォルダーを右クリックしてコンテキストメニューを開き、「サーバーにエクスポート」または「サーバーからインポート」オプションにアクセスできます。
jcr_root フォルダー外にある場合、コンテキストメニュー項目「サーバーにエクスポート」および「サーバーからインポート」は無効になります。コンテンツパッケージ全体の同期 full-content-package-synchronization
Adobe Analytics の AEM メニュー、 コンテンツパッケージを書き出し または コンテンツパッケージを読み込む オプションを使用すると、プロジェクト全体をサーバーと同期できます。
同期ステータス synchronization-status
AEM Brackets 拡張機能によって、Brackets ウィンドウの右側のツールバーに、最新の同期ステータスを示す通知アイコンが追加されます。
- 緑 - すべてのファイルが正常に同期されました
- 青 - 同期が進行中です
- 黄 - 一部のファイルが同期されませんでした
- 赤 - ファイルがすべて同期されませんでした
通知アイコンをクリックすると、同期された各ファイルのステータスすべてを一覧表示する同期ステータスレポートダイアログボックスが開きます。
filter.xml のフィルタリングルールによって「含める」とマークされているコンテンツのみが同期されます。.vltignore ファイルがサポートされています。HTL コードの編集 editing-htl-code
AEM Brackets Extension によって、HTL 属性および式の作成を容易にするオートコンプリートも導入されます。
属性のオートコンプリート attribute-auto-completion
- HTML 属性に「
sly」と入力します。この属性は、「data-sly-」にオートコンプリートされます。 - ドロップダウンリストでこの HTL 属性を選択します。
式のオートコンプリート expression-auto-completion
式 ${} 内で、一般的な変数名がオートコンプリートされます。
詳細情報 more-information
AEM Brackets Extension はオープンソースのプロジェクトで、Apache License バージョン 2.0 に従って、Adobe Marketing Cloud チームにより GitHub にホストされています。
- コードリポジトリー：https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
- Apache License バージョン 2.0：https://www.apache.org/licenses/LICENSE-2.0.html
Brackets コードエディターもオープンソースのプロジェクトで、Adobe Systems Incにより GitHub にホストされています。
- コードリポジトリー：https://github.com/adobe/brackets
ご自由に投稿してください。