AEM Brackets 拡張 aem-brackets-extension

概要 overview

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

chlimage_1-53

機能 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

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

  1. Brackets を開きます。ファイル ​メニューで、「Extension Manager」を選択します。

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

    chlimage_1-54

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

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

はじめに getting-started

コンテンツパッケージプロジェクト the-content-package-project

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

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

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

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

Brackets の​ ファイル ​メニューで「フォルダーを開く」を選択し、jcr_root フォルダーまたは親プロジェクトフォルダーをクリックします。

NOTE
コンテンツパッケージを伴うプロジェクトを所有していない場合は、HTL TodoMVC の例を使用できます。GitHub で、「Download ZIP」をクリックし、ファイルをローカルに抽出し、上記の説明に従って Brackets で jcr_root フォルダーを開きます。次に、以下の手順に従って​ プロジェクト設定 ​を行い、最後に「コンテンツパッケージ全体の同期」セクションの下部の説明に従って「Export Content Package」を実行して、パッケージ全体を AEM 開発インスタンスにアップロードします。
これらの手順が完了したら、AEM 開発インスタンス上の URL /content/todo.html にアクセスし、Brackets でコード変更を開始できるようになり、web ブラウザーを更新することで変更内容がただちに AEM サーバーに同期されることを確認できます。

プロジェクト設定 project-settings

コンテンツを AEM 開発インスタンスに、または AEM 開発インスタンスから同期するには、プロジェクト設定を定義する必要があります。プロジェクト設定の定義は、AEM メニューに移動し、「プロジェクト設定」を選択しておこないます。

chlimage_1-55

プロジェクト設定では、以下のものを定義できます。

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

コンテンツの同期 synchronizing-content

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

変更されたファイルの自動同期 automated-synchronization-of-changed-files

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

手動双方向同期 manual-bidirectional-synchronization

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

chlimage_1-56

NOTE
選択したエントリが jcr_root フォルダー外にある場合、コンテキストメニュー項目「サーバーにエクスポート」および「サーバーからインポート」は無効になります。

コンテンツパッケージ全体の同期 full-content-package-synchronization

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

chlimage_1-57

同期ステータス synchronization-status

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

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

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

chlimage_1-58

NOTE
使用する同期方法にかかわらず、filter.xml のフィルタリングルールによって「含める」とマークされているコンテンツのみが同期されます。
さらに、リポジトリーへの同期およびリポジトリーからの同期からコンテンツを除外するために、.vltignore ファイルがサポートされています。

HTL コードの編集 editing-htl-code

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

属性のオートコンプリート attribute-auto-completion

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

式のオートコンプリート expression-auto-completion

${} 内で、一般的な変数名がオートコンプリートされます。

詳細情報 more-information

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

Brackets コードエディターもオープンソースのプロジェクトで、Adobe Systems Incにより GitHub にホストされています。

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

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2