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

このチュートリアルでは、新しいAdobe Experience Manager(AEM) プロジェクトを導入する方法について説明します。 10 ～ 20 分で、独自のサイトが作成され、独自のコンテンツ、スタイル設定、新しいブロックの追加、作成、プレビュー、公開が可能になります。

前提条件：

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

テンプレートリポジトリテンプレートの概要

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

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

クリックするだけで Use this template ボタンと選択 Create a new repositoryをクリックし、このリポジトリを作成する場所を選択します。

リポジトリを public.

残りの手順は、 AEMコード同期 GitHub アプリ リポジトリで、次のリンクにアクセスします。 https://github.com/apps/aem-code-sync/installations/new

Adobe Analytics の Repository access AEM Code Sync App の設定で、必ず Only select Repositories ( ではない All Repositories) をクリックします。 次に、新しく作成したリポジトリを選択し、 Save.

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

これで完了です。新しい Web サイトがで実行されています https://<branch>--<repo>--<owner>.hlx.page/ 上記の例では、 https://main--my-website--lighthouse100.hlx.page/

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

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

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

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

独自のコンテンツのオーサリングを開始するには、コピーを使用します。 index, nav および footer サンプルコンテンツを参照し、コンテンツ構造に慣れてください。 nav および footer は、プロジェクト内で頻繁に変更されず、特別な構造を持っています。 プロジェクト内のファイルのほとんどは、 index.

ファイルを開き、コンテンツ全体を、独自のGoogle Drive 内の対応するファイルにコピー&ペーストします。 また、 Download All または個々のファイルをダウンロードします。 ただし、必ずダウンロードした .docx ファイルをネイティブのGoogleドキュメントに戻す (Google Drive のフォルダーにアップロードする場合 )。

コンテンツが揃ったら、そのコンテンツを GitHub リポジトリに接続する必要があります。 これを行うには、 fstab.yaml GitHub リポジトリの、共有したフォルダーに移動します。
Google Drive からフォルダー URL をにコピー&ペーストします。 fstab.yaml.

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

変更をコミットし、Web サイトに独自のコンテンツソースを接続しました。

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

最後の手順を完了すると、新しいコンテンツソースは空にはなりませんが、 preview または live ステージと呼ばれ、Web サイトが 404 秒を提供することを意味します。

コンテンツをプレビューするには、作成者がSidekickChrome 拡張機能をインストールする必要があります。 次を検索： Chrome 拡張機能はこちら.

拡張機能を Chrome に追加した後、必ずピン留めしておくと、見つけやすくなります。

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

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

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

を開きます。 index ドキュメントを開き、変更を加えます。 固定したSidekickをクリックして拡張機能を有効にし、 Preview ボタンをクリックします。このボタンを使用して、プレビュー操作をトリガーし、新しいタブを開いてコンテンツのプレビューレンディションを表示します。

スタイルと機能の開発を開始する

開発を開始するには、AEM Command Line Interface(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>.hlx.page/) および実稼動 (https://<branch>--<repo>--<owner>.hlx.live/) サイトで使用できます。

それだお前が作った！ おめでとうございます。最初のサイトが起動し、実行されています。 チュートリアルでサポートが必要な場合は、 Discord チャネルに参加する または 我々と連絡を取る。