はじめに – 開発者チュートリアル

このチュートリアルでは、新しい Adobe Experience Manager（AEM）プロジェクトを起動および実行する方法について説明します。10～20 分で、独自のサイトを作成し、独自のコンテンツの作成、プレビューおよび公開、スタイル設定、新しいブロックの追加を実行できます。

前提条件：

このチュートリアルでは、macOS、Chrome、Visual Studio Code を開発環境として使用し、その設定をスクリーンショットと手順に反映させます。 別のオペレーティングシステム、ブラウザーおよびコードエディターを使用することもできますが、表示される UI と実行する必要がある手順は、それに応じて異なる場合があります。

ボイラープレートリポジトリテンプレートの基本を学ぶ

AEMのベストプラクティスに従って作業を開始する最も速くて簡単な方法は、ボイラープレート GitHub リポジトリーをテンプレートとして使用して、リポジトリーを作成することです。

https://github.com/adobe/aem-boilerplate

「Use this template」ボタンをクリックして「Create a new repository」を選択し、リポジトリを所有するユーザー組織を選択します

リポジトリは public に設定することをお勧めします。

GitHub で残っている手順は、次のリンクにアクセスして、AEM コード同期 GitHub アプリをリポジトリにインストールすることです。https://github.com/apps/aem-code-sync/installations/new

AEM コード同期アプリの Repository access 設定で、「Only select Repositories」（All Repositories ではなく）を選択していることを確認します。 次に、新しく作成したリポジトリを選択し、「Save」をクリックします。

メモ:IP フィルタリング機能を備えた Github Enterprise を使用している場合は、次の IP を許可リストに追加できます。3.227.118.73

これで完了です。 https://<branch>--<repo>--<owner>.aem.page/ で新しい web サイトが実行されている。上記の例では、https://main–mysite–aemtutorial.aem.page/です。

Google Drive を使用して独自のコンテンツソースをリンク

Boilerplate GitHub リポジトリのフォークで、サイトがGoogle Drive の既存のコンテンツソースを指しています。 コンテンツの例については、 このフォルダーを参照してください。

このコンテンツは読み取り専用ですが、Google Drive フォルダーにコピーして開始点にすることができます。

独自のコンテンツを作成するには、独自のGoogle ドライブにフォルダーを作成し、そのフォルダーをAdobe Experience Manager ユーザー（helix@adobe.com）と共有します。

独自のコンテンツのオーサリングを開始する良い方法は、サンプルコンテンツの index、nav、footer をコピーして、コンテンツ構造を理解することです。 nav と footer は、プロジェクト内で頻繁に変更されることはなく、特別な構造になっています。 プロジェクト内のほとんどのファイルは、index に似ています。

ファイルを開き、コンテンツ全体をコピーして、独自のGoogle ドライブ内の対応するファイルに貼り付けます。 Download All からファイルをダウンロードしたり、個々のファイルをダウンロードしたりすることもできます。 ただし、ダウンロードした .docx ファイルをGoogle ドライブのフォルダーにアップロードする際には、必ず元のGoogle Docsに戻してください。

コンテンツが用意できたので、そのコンテンツを GitHub リポジトリに接続する必要があります。 これを行うには、GitHub リポジトリの fstab.yaml の参照を、共有したフォルダーに変更します。
フォルダー URL をGoogle ドライブから fstab.yaml にコピー&ペーストします。

この変更を行うと、コンテンツがまだプレビューされていないので、404 not found エラーが表示されることに注意してください。 コンテンツのオーサリングとプレビューを開始する方法については、次の節を参照してください。 index nav footer を超えてコピーした場合、3 つのドキュメントすべてが別々のドキュメントになり、それぞれ独自のプレビューと公開サイクルを持つため、必要に応じて、それらすべてをプレビュー（および公開）してください。

変更をコミットし、独自のコンテンツソースを web サイトにフックした場合。

コンテンツのプレビューと公開

最後の手順を完了すると、新しいコンテンツソースは空ではありませんが、コンテンツは preview または live ステージに昇格されていません。つまり、web サイトは 404 秒を提供します。

コンテンツをプレビューするには、作成者がSidekick Chrome拡張機能をインストールする必要があります。 Chrome Web ストアで Chrome拡張機能を見つけす。

拡張機能をChromeに追加した後は、必ずピン留めしてください。これにより、拡張機能を見つけやすくなります。

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

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

3 つのドキュメントをすべて選択し、ピン留めされた拡張機能をクリックして、AEM Sidekickをアクティブ化します。 新しいツールバーが表示されます。 preview または publish のボタンをクリックすると、対応する操作がトリガーされます。

index ドキュメントを開き、変更を加えます。 ピン留めされた拡張機能をクリックしてSidekickをアクティベートし、プレビュー操作をトリガーする「Preview」ボタンをクリックすると、コンテンツのプレビューレンディションを含む新しいタブが開きます。

スタイル設定と機能の開発の開始

開発を開始するには、AEM コマンドラインインターフェイス（CLI）をインストールし、次を使用してリポジトリのクローンをローカルに作成するのが最も簡単です。

npm install -g @adobe/aem-cli
git clone https://github.com/<owner>/<repo>

そこから、プロジェクトフォルダーに移動し、次の方法を使用してローカル開発環境を開始します。

cd <repo>
aem up

これにより http://localhost:3000/ が開き、変更を加える準備が整います。
手始めに、スタイル設定とコードのほとんどがプロジェクト内に存在する blocks フォルダーから開始することをお勧めします。 .css または .js で変更を加えるだけで、ブラウザーにすぐに変更が表示されます。

変更をプッシュする準備が整ったら、Git を使用してコードを追加、コミット、プッシュし、プレビュー（https://<branch>--<repo>--<owner>.aem.page/）サイトと実稼動（https://<branch>--<repo>--<owner>.aem.live/）サイトにデプロイします。

これだ、あなたはそれを作った！ お疲れ様でした。最初のサイトが稼働しています。 チュートリアルでサポートが必要な場合は ​ Discord チャンネルに参加してください ​ または ​ 連絡してください。