AEM Brackets Extension

概要

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

chlimage_1-53

特長

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 を探します。

    chlimage_1-54

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

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

はじめに

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

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

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

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

  2. 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​メニューに移動し、プロジェクト設定…​を選択します。

chlimage_1-55

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

  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​オプションにアクセスできます。

chlimage_1-56

メモ

選択したエントリがjcr_rootフォルダー外にある場合、Export to Server​と​Import from Server​コンテキストメニューのエントリは無効になります。

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

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

chlimage_1-57

同期ステータス

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

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

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

chlimage_1-58

メモ

使用する同期方法にかかわらず、filter.xml のフィルタリングルールによって「含める」とマークされているコンテンツのみが同期されます。

また、.vltignoreファイルは、リポジトリとの同期およびリポジトリとの同期からのコンテンツの除外に対してサポートされています。

HTL コードの編集

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

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

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

式のオートコンプリート

${}内では、共通の変数名は自動入力されます。

詳細情報

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

Bracketsコードエディターもオープンソースプロジェクトで、Adobe Systems Incorporated組織がGitHub上でホストしています。

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

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now