アドビ
チュートリアル
他のユーザが簡単に更新できるWebページを作成:チュートリアル
デザインしたレイアウトと書式に従って、他のユーザ(共同作業者)が実際のコンテンツを入力または更新したり、更新したWebページを公開したりします。Co-Authorワークフローは、コンテンツの更新を担当するユーザがWebテクノロジに慣れていない場合などに特に威力を発揮します。

セクションを作成する前に、セクションの構造とセクション内のページのデザインを決定する必要があります。サンプルとして、企業WebサイトのNewsセクションを作成する手順に沿って説明していきます。 Newsセクションは、記事ごとに1つのニュースページ(ヘッドライン、ティーザー、ボディおよび画像サムネールの各エレメントを含む)と1つの画像ページ(記事のフルサイズ画像を含む)、およびニュースのメインページ(ナビゲーションコンポーネントを含む)の各Webページで構成されます。 最初のデザインの後は、管理アシスタントがセクションの更新を担当します。

1 Co-Authorセクションを作成してアイテムを追加
サイトを開いて、その他/Co-Authorセクションを作成を選択してsection.aglsecウィンドウを開き、セクションタイトルフィールドにセクション名を入力します。 「アイテム名」列で「name」を選択し、リストの下部にある編集可能フィールドを使用して、必要な最初のアイテム(コンテンツコンテナ)を設定します。アイテム名と表示名を入力し、フォーマットタイプを指定します。 必要に応じてアイテムの高さをピクセル単位で入力します。 新規アイテムを作成ボタンを使用してセクションに必要な他のアイテムを追加し、各アイテムのプロパティを指定します。

Newsセクションのサンプルでは、各記事の最初のアイテムはヘッドラインとし、インラインテキストエレメントとして書式設定しています。 このサンプルには、ティーザー、ボディ、画像も追加されています。 ヘッドラインに選択されたインラインテキスト書式とティーザーに選択されたテキストブロック書式では、CSSを使用してテキストを書式設定できます。 ボディに選択されたスタイルテキストブロック書式では、共同作業者がリンクを追加して編集し、選択したテキストをイタリックまたはボールドに設定できます。

step01_int
2 Co-Authorエディタで記事をソートする方法と名前を付ける方法を指定
section.aglsecウィンドウを使用してデータアイテムやストーリーをCo-Authorエディタに表示する方法を指定します。 ソートメニューから、ストーリーリストのソート順を選択します。 作成日またはデータアイテム別にソートできます。 データアイテムを選択した場合は、ソートメニューの右にあるポップアップメニューからアイテムを選択してください。 リストアイテムメニューで、ストーリーリストのストーリーを識別するためのアイテムを選択し、ファイルを保存します。 この時点では、プレビューページのリンクを気にする必要はありません。このリンクはテンプレートの作成後に設定します。

ストーリー(サンプルでは記事)をCo-Authorエディタに表示する方法と名前を付ける方法を制御できます。共同作業者は、このCo-Authorエディタを使用してセクションを管理します。 共同作業者が左のストーリーリストから記事を選択すると、記事の各アイテムが右にフィールドとして表示されます。ここでアイテムを追加または編集します。 前の手順で設定した表示名は、ラベルとして編集可能アイテムの横に表示されます。 サンプルでは、Newsセクションのストーリーは作成日の逆順にソートされ、ヘッドラインアイテムがストーリーリストに表示されます。

step02_int
3 セクションに必要なページテンプレートを作成
ページテンプレートを作成するには、必要なアイテムのレイアウトを使用して新しいページを作成します。この場合、サンプルのコンテンツをプレースホルダとして含めます。 サイトウィンドウで、ページをセクションのテンプレートフォルダ(サイトのテンプレートフォルダではなく)に保存し、Co-Authorパレットをアクティブにします。 Co-Authorパレットが表示されない場合は、ウィンドウ/Co-Authorを選択して表示します。 アイテムのコンテンツをレイアウトウィンドウで選択し、Co-Authorパレットで範囲を適用メニューから一致する範囲を選択します。 同じ手順を使用してページテンプレートの他のアイテムに範囲を適用し、ファイルを保存します。

大半のCo-Authorセクションには、ページテンプレート、リストテンプレート、スタティックページ(テンプレートから作成されないWebページ)があります。 ページテンプレートから、ストーリー(記事)ごとのWebページが作成されます。 サンプルのNewsセクションでは、2つのページテンプレートとして、newspage.html(記事ごとのページ)およびnewsimage.html(記事ごとのフルサイズ画像ページ)を使用します。

step03_int
4 セクションに必要なリストテンプレートを作成
リストテンプレートを作成するには、必要なアイテムのレイアウトを使用して新しいページを作成します。この場合、サンプルのコンテンツをプレースホルダとして含めます。作成した新しいページは、セクションのテンプレートフォルダに保存します。 Co-Authorパレットを使用してテンプレート範囲を指定します。 繰り返す範囲を含むエレメント(コンテナ)を選択し、Co-Authorパレットの「繰り返し」を選択します。 エレメント内のコンテンツは選択せずに、繰り返すエレメント自体を選択してください。 複数のアイテムを繰り返す場合は、一括して選択して「繰り返し」を選択します。 特定のストーリーのみを使用してリストを作成する場合は、開始フィールドに最初のストーリーの番号を入力し、回数フィールドに使用するストーリーの合計数を入力します。 ストーリーリストの最初のストーリーを1として、以下連続した番号が各ストーリーに割り当てられます。

リストテンプレートから、ストーリーごとの選択アイテムを一覧表示するWebページが作成されます。 サンプルのNewsセクションでは、各記事のヘッドラインとティーザーおよびこれらのアイテムへのリンクを含むnewslist.htmlという1つのリストテンプレートが必要です。 ヘッドラインとティーザーおよび「Read More」リンクを含む1つのテーブルセルを繰り返すように設定します。 newslist.htmlテンプレートから作成したページは、mainnewspage.htmlにナビゲーションコンポーネントとして表示されます。

step04_int
5 セクションに必要なスタティックページを作成
スタティックページを作成するには、必要な新しいページを作成し、それをセクションのルートフォルダに保存します。 目次などのナビゲーションコンポーネントを作成するには、リストテンプレートから作成したページにリンクするコンポーネントを含めます。 ナビゲーションコンポーネントの作成とリンクは後で行います。

Newsセクションのサンプルでは、Newsセクションの目次としてmainnewspage.htmlという1つのスタティックページが必要です。 mainnewspage.htmlに含まれるテーブルの1つのセルには、newslist.htmlテンプレートから作成したnewslist.htmlページ(コンポーネント)が入ります。

step05_int
6 セクションをプレビューページテンプレートにリンク
section.aglsecウィンドウで、プレビューページフィールドを使用してページプレビューを生成するためのテンプレートを指定します。 ポイント&シュートを使用してテンプレートファイルをリンクできます。

セクションに複数のテンプレートが含まれている場合でも、Co-Authorエディタではセクションウィンドウのプレビューページフィールドでリンクしたテンプレートだけが共同作業者に表示されます。 Newsセクションでは、newspage.htmlテンプレートをプレビューページとして使用します。

step06_int
7 ページテンプレート内にリンクを作成
ページテンプレート内に「previous」や「next」のリンクを追加し、ストーリー別に作成したページ間を移動します。 ページ間を移動するリンクを作成するには、テンプレートのプレースホルダリンクテキストを選択し、インスペクタにリンク情報を入力します。 nextとpreviousのリンクを作成する場合は、リンクフィールドに「#next」または「#previous」の文字列を挿入します。 通常、これらのリンクテキストはページテンプレートのテーブルセルごとに「previous」および「next」として表示されます。テキストの代わりに画像アイコンを使用することもできます。

Newsセクションのサンプルでは、newspage.htmlテンプレートだけにnextとpreviousのリンクが含まれます。 これらのリンクを使用して、記事から記事へと移動できます。

step07_int
8 ページテンプレート間にリンクを作成
ページテンプレート間にリンクを追加して、1つのストーリーを構成する複数のページ間をリンクします。例えば、ストーリーのページ1からページ2へのリンクを追加します。 ページテンプレート間にリンクを作成するには、リンクするコンテンツを選択し、インスペクタのポイント&ショートを使用してリンク先のファイルを指定します。

Newsセクションのサンプルでは、newspage.htmlテンプレートとnewsimage.htmlテンプレートの間にリンクを作成して、メインのニュース記事からフルサイズ画像に移動したり、逆に戻れるようにします。 newspage.htmlテンプレートでは、画像サムネールアイテム(セクションファイルでサイズを設定)がnewsimage.htmlテンプレートへのリンクになります。newsimage.htmlテンプレートでは、「back to article」というテキストがnewspage.htmlテンプレートへのリンクになります。

step08_int
9 リストテンプレートとページテンプレートまたはスタティックページの間にリンクを作成
リストテンプレートからページテンプレートまたはスタティックページへのリンクを追加して、目次などのナビゲーションエレメントを作成します。 リストテンプレートから作成したページを他のページのコンポーネントとして使用します。 最初に、その他/Co-Author のページを作成を選択して、リストテンプレートからページを作成します。 データを入力していないのでページは不完全ですが、コンポーネントを作成するためにリストページを作成する必要があります。 コンポーネントを含めるページを開いて、オブジェクトパレットの「スマート」タブからコンポーネントエレメントをページにドラッグします。

Newsセクションのサンプルでは、newslist.htmlテンプレートから作成したWebページをmainnewspage.htmlの目次として使用します。 ページ内のテーブルセルには、作成したnewslist.htmlページにリンクするコンポーネントが入ります。リンク先のページは記事のリンクリストとして表示されます。

step09_int
10 Webページを作成するためのストーリーを作成
Newsセクションの構造を決定したので、共同作業者への見本としてセクションに最初のストーリーを入力できます。 Co-Authorエディタを使用してストーリーを入力します。 Co-Authorエディタの「編集」タブで「新規ストーリー」をクリックして必要なコンテンツを入力します。

Newsセクションのサンプルには3つのストーリーがあります。 1つのストーリーのボディアイテムには、リンクテキストとスタイルテキストが含まれています。

step10_int
11 Webページを作成し、セクションをプレビューしてテスト
セクションのWebページを作成する準備が完了しました。 Co-Authorエディタで、「生成」ボタンをクリックします。 Webページが作成されて、サイトウィンドウのセクションのページフォルダに挿入されます。画像は画像サブフォルダに挿入されます。

GoLiveと目的のブラウザでページをプレビューしてテストします。 GoLiveでは、ページのドキュメントウィンドウまたはCo-Authorエディタの「プレビュー」タブでプレビューできます。 必要な更新を行って新しいページを作成します。 準備が完了したら、ページをアップロードします。

step11_int
12 サイトロケータファイルを書き出し、共同作業者にセクションを送付
ファイル/書き出し/サイトロケータを選択し、ファイルの名前と場所を入力します(ファイルの拡張子は必ず.aglslを使用してください)。次に「保存」をクリックします。 電子メールでサイトロケータファイルを共同作業者に送信し、管理を行う共同作成者にセクションを渡す準備をします。 Webページをデザインしたユーザは、共同作業者(特にWebオーサリングの経験が少ないユーザ)にサイトのダウンロードと更新の手順を示すこともできます。

サイトロケータファイルはリモートサーバのサイトの場所を示します。 サイトロケータファイルを使用すると、共同作業者は各自のローカルドライブにセクションをすばやくダウンロードして編集し、更新したページをアップロード(公開)することができます。

その他関連チュートリアルや製品情報については以下のURLをご覧ください
http://www.adobe.co.jp/framemaker/
2002 Adobe Systems Incorporated. All rights reserved.