はじめに - 開発者向けチュートリアル

AEM プロジェクトの GitHub リポジトリを作成します。リポジトリを作成するには：

1. https://github.com/adobe-rnd/aem-boilerplate-forms に移動します。

   

2. 「このテンプレートを使用」オプションをクリックし、「新しいリポジトリを作成」オプションを選択します。新しいリポジトリを作成画面が開きます。

   

3. 新しいリポジトリを作成画面で、所有者 ​を選択し、リポジトリ名 ​を指定します。アドビでは、リポジトリを​ パブリック ​に設定することをお勧めします。したがって、「パブリック」オプションを選択し、「リポジトリを作成」をクリックします。

AEM Code Sync GitHub アプリをリポジトリにインストールします。インストールするには：

1. https://github.com/apps/aem-code-sync/installations/new に移動します。
2. AEM Code Sync をインストール画面で、「リポジトリのみを選択」オプションを選択し、新しく作成したリポジトリを選択します。「保存」をクリックします。

これで完了です。https://<branch>--<repo>--<owner>.hlx.page/ で新しい web サイトを実行しています。

• <branch> は、GitHub リポジトリのブランチを指します。
• <repository> は GitHub リポジトリを示します。
• <owner> は、GitHub リポジトリをホストする GitHub アカウントのユーザー名を指します。

例えば、ブランチ名が main、リポジトリが wefinance、所有者が wkndforms の場合、web サイトは https://main—wefinance—wkndforms.hlx.page/ で稼働しています。

Google Drive または Microsoft SharePoint で、AEM コンテンツ専用の新しいフォルダーを作成します。このドキュメントでは、Microsoft SharePoint で作成されたフォルダーを使用します。

Adobe Experience Manager ユーザー（helix@adobe.com）とフォルダーを共有します。

フォルダーに対する編集権限が Adobe Experience Manager ユーザーに付与されていることを確認します。

Google Drive フォルダーに保存されたサンプルコンテンツをフォルダーにコピーします。コピーする手順は、次のとおりです。

1. ファイルを一緒にダウンロードするか、個々のファイルをダウンロードします。

   

   nav および footer ファイルはページの基本レイアウトを定義し、プロジェクト全体で変更されることはほとんどありません。また、他のほとんどのコンテンツファイルとは異なる特定の構造を持っています。これらのファイルを調べると、AEM プロジェクトでコンテンツがどのように編成されているかがわかります。

2. これらのファイルを Microsoft SharePoint または Google Drive フォルダーにアップロードします。

   

   必ず、サンプルコンテンツの enquiry シートを Google Drive または Microsoft SharePoint のフォルダーにコピーしてください。サンプルフォームの構造が含まれています。

コンテンツフォルダーの設定が完了したので、以前に AEM Forms ボイラープレートを使用して作成した GitHub 上のプロジェクトにリンクします。接続する手順は、次のとおりです。

1. AEM Forms ボイラープレートを使用して以前に作成した GitHub リポジトリに移動します。

2. fstab.yaml を開いて編集します。

3. 既存の参照を、AEM ユーザー（helix@adobe.com）と共有したフォルダーのパスに置き換えます。

   

   Microsoft SharePoint を使用する場合、フォルダーパスは次の形式を使用します。

   code language-html
   https://<tenant>.SharePoint.com/sites/<sp-site>/Shared%20Documents/<folder-name>

   例：

   code language-html
   https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance

   Microsoft SharePoint でのファイル管理について詳しくは、Adobe SharePoint の使用方法を参照してください。

4. 参照を更新し、すべてが正しく表示されたら、更新された fsatb.yaml ファイルをコミットします。ビルドの問題が発生した場合は、GitHub ビルド問題のトラブルシューティングを参照してください。

   

   これにより、コンテンツフォルダーが web サイトに接続されます。参照を更新した後、最初に「404 Not Found」というエラーが発生する場合があります。これは、コンテンツがまだプレビューされていないためです。次の節では、コンテンツのオーサリングとプレビューを開始する方法について説明します。

AEM Sidekick という Chrome 拡張機能をインストールします。

拡張機能を Chrome にインストールした後、ピン留めしておくと、見つけやすくなります。

Sidekick Chrome 拡張機能を設定するには、以前に共有した Google Drive または Microsoft SharePoint フォルダーに移動し、ブラウザのツールバーにある拡張機能アイコンを右クリックして、「Add this project」を選択します。

拡張機能がインストールされ、プロジェクトが追加されると、Google Drive からコンテンツをプレビューして公開する準備が整います。

Microsoft SharePoint または Google Drive フォルダー内のすべてのドキュメントを選択します。Ctrl キー（Windows／Linux）または Cmd キー（Mac）を押しながらクリックすると、複数のドキュメントを選択できます。

Chrome 拡張機能バーにピン留めされている AEM Sidekick アイコンをクリックします。画面にツールバーが表示されます。コンテンツのプレビューまたは公開を選択できます。

index、nav、footer および enquiry ファイルをコピーした場合、これらはすべて独自のプレビューおよび公開サイクルを持つ別個のドキュメントになるので、すべてをプレビュー（および公開）します。

ファイルをプレビューすると、新しいブラウザータブにドキュメントが表示されます。サンプルフォームをプレビューするには、次の URL に移動します。

https://<branch>--<repository>--<owner>.hlx.live

• <branch> は、GitHub リポジトリのブランチを参照します。
• <repository> は GitHub リポジトリを示します。
• <owner> は、GitHub リポジトリをホストする GitHub アカウントのユーザー名を参照します。

https://<branch>--<repo>--<owner>.hlx.page/enquiry の URL。

例えば、プロジェクトのリポジトリの名前が「wefinance」で、アカウント所有者「wkndforms」の下にあり、「main」ブランチを使用している場合、URL は次のようになります。

https://main–wefinance–wkndforms.hlx.page。

AEM CLI をインストールします。AEM CLI により、開発タスクが簡素化されます。npm を使用してグローバルにインストールしましょう。

    npm install -g @adobe/aem-cli

GitHub プロジェクトのクローンを作成します。次のコマンドを使用して、GitHub からプロジェクトリポジトリのクローンを作成します。 リポジトリの所有者と リポジトリ名を置き換えます。

git clone https://github.com/<owner>/<repo>

ローカル環境を起動します。プロジェクトディレクトリに移動し、次の 1 つのコマンドでローカル AEM インスタンスを起動します。

cd <repo>
aem up

アダプティブフォームブロックリポジトリ：https://github.com/adobe-rnd/aem-boilerplate-forms をコンピューターにクローンします。

ダウンロードしたフォルダー内で、blocks/form フォルダーを見つけます。このフォルダーをコピーします。次に、AEM プロジェクトのローカル blocks フォルダーに移動し、コピーしたフォームフォルダーをここにペーストします。

これらの変更を GitHub 上の AEM プロジェクトにコミットしてプッシュします。