Components using Adobe Experience Manager v6.x Develop Websites and
目次 1 アーキテクチャスタック...8 1.1 アーキテクチャスタックの基礎... 8 1.2 Granite プラットフォームの概要... 8 1.3 Java Content Repository の概要... 9 1.4 Apache Sling の概要... 9 1.5 AEM の機能的な基本要素... 10 2 インストール... 11 2.1 AEM とは... 11 2.2 前提条件... 11 2.3 AEM のインストール... 12 2.4 AEM インスタンスの起動... 13 2.4.1 GUI を使用した AEM インスタンスの起動... 13 2.4.2 コマンドラインを使用した AEM 作成者インスタンスの起動... 15 2.4.3 コマンドラインを使用した AEM 発行インスタンスの起動... 16 2.5 Lab Activity... 17 タスク 1:AEM 作成者インスタンスを起動する... 17 タスク 2:AEM 発行インスタンスを起動する... 18 タスク 3: コマンドラインを使用して AEM をインストールして起動する ( オプション )... 20 3 オーサリングの基本... 21 3.1 タッチ UI について... 21 3.2 ページを作成および編集する... 23 3.2.1 ページの作成... 23 3.2.2 ページの編集... 25 4 開発者向けツール... 27 4.1 Web コンソール... 27 4.2 CRXDE Lite... 27 4.3 パッケージの操作... 28 4.3.1 新しいパッケージを作成および構築する... 29 4.3.2 ファイルシステムにパッケージをダウンロードする... 30 4.3.3 パッケージ共有を使用する... 30
4.4 Lab Activity I... 31 タスク - AEM でパッケージをインストールする... 31 タスク - パッケージを作成 ビルド およびダウンロードする... 32 4.5 Brackets の操作... 34 4.5.1 AEM Brackets Extension をインストールする... 34 4.5.2 プロジェクトを設定する... 35 4.6 Lab Activity II( オプション )... 36 タスク - AEM Bracket 拡張をインストールする... 36 タスク - Brackets を使用してリポジトリを変更する... 37 4.7 開発におけるベストプラクティス... 40 5 コンテンツのレンダリングの概要... 41 5.1 リポジトリのフォルダ構造... 41 5.2 Lab Activity - I... 42 タスク /apps の中にプロジェクトの構造を作成する... 42 5.3 ページレンダリングコンポーネント... 43 5.4 Lab Activity II... 44 タスク - ページレンダリングコンポーネントを作成する... 44 タスク - レンダリングされるコンテンツを作成する... 45 5.5 Sling の解決プロセスについて... 46 5.6 リクエスト処理の基本手順... 46 5.7 URL を分解する... 46 5.8 リクエストをリソースにマッピングする... 47 5.9 スクリプトを特定およびレンダリングする... 48 5.10 URL の分解について... 49 5.11 Lab Activity III... 49 タスク - 基本的な Sling リソースの解決とレンダリングスクリプトへのマッピング... 49 タスク - セレクターの操作... 51 6 テンプレート... 53 6.1 テンプレートとは... 53 6.2 テンプレートのプロパティ... 53 6.3 Lab Activity - I... 53 タスク - テンプレートを作成する... 53 タスク - contentpage テンプレートをテストする... 55 タスク - テンプレートの使用を制限する... 57 タスク - テンプレートにコンテンツ構造を追加する... 58
6.4 Web サイト構造の作成...60 6.5 Lab Activity II... 61 タスク - サイトのページを作成する... 61 7 Sightly の概要... 63 7.1 Sightly の操作... 63 7.1.1 Sightly の構文... 63 7.2 ページレンダリングスクリプト... 64 7.3 API を使用した基本ページコンテンツの表示... 64 7.4 ページコンポーネントのモジュール化... 65 7.5 Lab Activity - I... 65 タスク - 基本的なページコンテンツをレンダリングする... 65 タスク - contentpage コンポーネントをモジュール化する... 67 8 継承... 70 8.1 ファンデーションコンポーネントの継承... 70 8.1.1 階層のタイプ... 70 8.2 Lab Activity... 71 タスク contentpage sling:resourcesupertype プロパティを調査する... 71 タスク - ファンデーションページコンポーネントを調査する... 71 タスク - contentpage.html スクリプトを削除する... 72 補足タスク - レンダリングチェーンを構築する... 72 9 デザインおよびスタイル... 73 9.1 サイトにデザインを追加する... 73 9.2 Lab Activity... 73 タスク - デザインを定義する... 73 タスク - デザインでコールする contentpage コンポーネントを変更する... 76 タスク - Web サイトにデザインを割り当てる... 78 10 構造コンポーネントを作成する...81 10.1 上部ナビゲーションコンポーネントを作成する... 81 10.2 Lab Activity - I... 82 タスク - 簡単なナビゲーションコンポーネントを作成する... 82 タスク - ナビゲーションコンポーネントが応答するようにする... 85 タスク - Java Helper を使用して 複雑なナビゲーションコンポーネントを作成する... 87 補足タスク... 89 タスク - Javascript Helper を使用して 複雑なナビゲーションコンポーネントを作成する... 89 10.3 ロギング... 91
10.4 Lab Activity - II... 92 タスク カスタムログファイルを作成する... 92 タスク - topnav コンポーネントでログステートメントを使用する... 93 補足タスク - Java ヘルパーにロギングを追加する... 94 10.5 コンポーネントダイアログボックス... 94 10.5.1 ダイアログボックスの種類について... 95 10.5.2 クラシック UI ダイアログボックス... 95 10.5.3 タッチ操作に最適化された UI ダイアログボックス...96 10.5.4 Granite UI および Classic UI のダイアログボックスの違い... 97 10.6 Lab Activity - III... 98 タスク - タイトルコンポーネントを作成する... 98 タスク - タイトルコンポーネントのダイアログボックスを作成する... 101 10.7 EditConfig を使用したコンポーネントの拡張... 102 10.8 Lab Activity - IV... 103 タスク - タイトルコンポーネントの editconfig を作成する... 103 タスク - Title ダイアログを使用する... 104 10.9 グローバルコンテンツ用のデザインダイアログボックスの使用... 105 10.10 Lab Activity - V... 105 タスク - デザインダイアログを追加する... 105 タスク - Title コンポーネントのコードを変更し デザインダイアログを使用する... 109 10.11 FileUpload Form フィールド... 111 10.12 Lab Activity - VI... 111 タスク - 最初の Hero Image コンポーネントを作成する... 111 タスク - 作成者による入力用のダイアログを作成する... 113 タスク - Hero コンポーネントのテキスト機能を変更する... 114 タスク - Hero コンポーネントをテストする... 114 タスク - Hero コンポーネントを変更し 画像を表示する... 115 補足タスク - Hero コンポーネントに画像をドラッグ & ドロップする... 118 タスク - Hero コンポーネントのデザインダイアログを作成する... 118 11 レスポンシブグリッド... 123 11.1 レスポンシブデザインの長所と短所... 124 11.2 Lab Activity... 125 タスク - レスポンシブグリッドを追加する... 125 タスク - レスポンシブエミュレーターを有効にする... 126 タスク - レイアウトモードを統合する... 128
12 国際化 ( グローバリゼーション / ローカライゼーション )... 130 12.1 オーサリングインターフェイスを国際化する... 130 12.2 ミックスインノード... 130 12.3 Lab Activity... 130 タスク - ローカライゼーション情報を作成する... 130 タスク - ローカライズされるコンテンツを作成する... 132 タスク - ローカライズされたコンテンツをテストする... 134 13 高度な Sling 機能... 135 13.1 Lab Activity Sling セレクター... 135 タスク [Print Friendly] ボタンを調査する... 135 タスク - print.html スクリプトを作成する... 136 13.2 オーバーレイと Sling リソースマージャー... 137 13.2.1 オーバーレイ... 137 13.2.2 Sling リソースマージャー... 138 13.2.3 オーバーレイと Sling リソースマージャーを比較する... 138 13.3 Lab Activity Sling リソースマージャー... 139 タスク - ナビゲーションボタンを変更する... 139 13.4 Lab Activity カスタムエラーハンドラー... 140 タスク - カスタム 404 エラーハンドラーを作成する... 140 13.5 Lab Activity Sling リダイレクト... 142 タスク we-train.html が別のページにリダイレクトされるようにする... 142 14 複雑なコンポーネント...143 14.1 Lab Activity - 複雑なコンポーネントの作成... 143 タスク - 初期の StockPlex コンポーネントを作成する... 143 タスク - Stockplex コンポーネントを有効にする... 145 タスク - プレースホルダーを追加する... 147 タスク - ダイアログボックスを構築する... 149 14.2 クライアントライブラリの使用... 152 14.2.1 クライアント (HTML) ライブラリ... 152 14.2.2 クライアントライブラリの規則... 152 14.2.3 クライアントライブラリの例... 153 14.2.4 クライアントライブラリのインクルード... 153 14.3 Lab Activity クライアントライブラリ... 154 タスク - クライアントライブラリを追加する... 154 タスク - ダイアログボックスを拡張し 作成者により多くのオプションを提供します... 157
タスク - デザインダイアログボックスを追加する... 164 14.4 Lab Activity 検索コンポーネント... 165 タスク - search コンポーネントを作成する... 165 15 デバッグおよびテスト... 175 15.1 開発者モード... 175 15.2 パラメータのデバッグ... 175 15.3 Hobbes テストの実行... 177 15.4 Lab Activity... 178 タスク - クライアントライブラリを作成する... 178 タスク Hobbes テストスイートを実行する... 179 16 AEM の環境...181 16.1 パフォーマンスの考慮事項... 181 16.2 Lab Activity... 183 タスク ページ応答を監視する... 183 タスク 応答パフォーマンスを把握する... 183 タスク - コンポーネント別の応答時間を監視する... 184 16.3 セキュリティチェックを実行する... 184 16.4 AEM デプロイメント... 186 16.4.1 レプリケーション... 188 16.4.2 リバースレプリケーション... 189 16.4.3 Dispatcher... 190