UX を向上するマイクロコンテンツを作成する方法 (2)

ユーザーの注意を引き、素早く情報を伝えることを目的とした小規模で簡潔なマイクロコンテンツは、ウェブサイトやオンラインヘルプでユーザーエクスペリエンスを大幅に向上させるのに役立ちます。

この記事は、オンプレミス版の MadCap Flare Desktop を使って、HTML5 検索結果に表示するマイクロコンテンツを作成する方法を紹介するシリーズのパート 2 です。

パート 1 では、オンプレミスのコンテンツオーサリングツールである MadCap Flare Desktop を使って、HTML5 検索結果に表示するマイクロコンテンツを作成するため、Flare プロジェクトとマイクロコンテンツファイルを作成し、マイクロコンテンツの応答と代替フレーズを作成する方法を説明しました。

パート 2 では、マイクロコンテンツをシングルソース化する方法について説明します。

このシリーズのパート 1 をまだご覧になっていない場合は、先にパート 1 をご覧ください。

マイクロコンテンツのシングルソース化
まとめ
関連情報とツール

マイクロコンテンツのシングルソース化

このチュートリアルで説明した方法を使用すれば、検索結果に表示されるマイクロコンテンツに関して、多くの目的を達成できます。しかし、マイクロコンテンツの表示場所や外観を制御するために、特定の変更を加えたい場合もあるでしょう。例えば、マイクロコンテンツのフレーズを一部の出力には含め、他の出力には含めないといった場合です。また、トピック内とマイクロコンテンツ内では外観を変えたい場合も、コンテンツセットを 2 つ作成するのは避けたいでしょう。これらの目的を達成するため、条件やスタイルを使用してコンテンツをシングルソース化することができます。

出力からマイクロコンテンツを除外する方法
マイクロコンテンツからコンテンツを除外する方法
コンテンツの外観を変更する方法

出力からマイクロコンテンツを除外する方法

インターフェイスの左側で、[プロジェクトオーガナイザ] を開きます。
条件付きテキスト フォルダを展開し、Default をダブルクリックします。[条件タグ設定エディタ] が開きます。
ここでは、2 つの新しい条件を作成しましょう。ツールバーにあるをクリックします。新しい行が追加され、選択状態になります。
F2 キーを押してテキストを選択し、「HTML5Output1」と入力して ENTER キーを押します。新しい条件のデフォルトの色を変更することもできますが、ここでは変更しません。
(クリックして拡大)
前の手順を繰り返して、「HTML5Output2」という別の条件を作成します。
(クリックして拡大)
をクリックして作業内容を保存します。
[プロジェクトオーガナイザ] から「All-About-Austin-HTML5」ターゲットを開きます。
[ターゲットエディタ] で、[条件付きテキスト] タブを選択します。
「Default.HTML5Output1」を [含める] に、「Default.HTML5Output2」を [除外] に設定します。
(クリックして拡大)
をクリックして作業内容を保存します。
マイクロコンテンツファイルを開きます。
エディタの左側で、「Music」行を右クリックし、[プロパティ] を選択します。
ダイアログで [条件付きテキスト] タブを選択し、「HTML5Output1」の横にあるチェックボックスをオンにします。
(クリックして拡大)
[OK] ボタンをクリックします。
「zilker park」行についても、[プロパティ] ダイアログで [条件付きテキスト] を選択し、「HTML5Output2」の横にあるチェックボックスをオンにします。
(クリックして拡大)
[マイクロコンテンツエディタ] で、各フレーズの横に対応する色が表示されます。
(クリックして拡大)
をクリックして作業内容を保存します。
「All-About-Austin-HTML5」ターゲットをビルドし、出力を確認します。
「Music」を検索します。検索結果にマイクロコンテンツが表示されます。これは、ターゲットにその条件を含めたためです。
「Zilker Park」を検索します。検索結果にマイクロコンテンツが表示されていません。これは、ターゲットでその条件を除外したためです。

マイクロコンテンツからコンテンツを除外する方法

次の手順では、同じコンテンツへのリンクを設定する方法を説明します。トピックとして表示する場合はコンテンツ全体を表示し、マイクロコンテンツとして表示する場合は一部のコンテンツが非表示になるようにします。この手順では条件を使用しますが、スタイルを使用することもできます。

[プロジェクトオーガナイザ] から、「Default」条件タグセットを開きます。[条件タグ設定エディタ] が開きます。
ここでは、新しい条件を作成しましょう。ツールバーにあるをクリックします。新しい行が追加され、選択状態になります。
F2 キーを押してテキストを選択し、「TopicsOnly」と入力して ENTER キーを押します。新しい条件のデフォルトの色を変更することもできますが、ここでは変更しません。
(クリックして拡大)
をクリックして作業内容を保存します。
Music.htm トピックを開きます。
作成した TopicsOnly 条件を、見出しと、相互参照を含む段落の最後の文に適用します (「コンテンツへの条件の適用を参照)。完了すると、次のようになります。
(クリックして拡大)
をクリックして作業内容を保存します。
マイクロコンテンツファイルを開きます。次に、エディタでメインの「Music」フレーズまたは代替フレーズのいずれかを選択すると、リンクされた応答が右側に表示されます。
(クリックして拡大)
エディタの左側で「Music」フレーズを右クリックし、コンテキストメニューから [プロパティ] を選択します。
[プロパティ] ダイアログで、[マイクロコンテンツの条件] タブを選択します。
「Default.TopicsOnly」条件行を選択し、右側の [除外] をクリックします。
(クリックして拡大)
[OK] ボタンをクリックします。条件コンテンツがエディタの右側に表示されなくなります。
(クリックして拡大)
をクリックして作業内容を保存します。
ビルドして出力を表示します。
「music」を検索します。マイクロコンテンツの応答には、相互参照を含む見出しと文が表示されていません。
(クリックして拡大)
マイクロコンテンツの応答の下部にある「Music」リンクをクリックすると、トピックが表示されます。トピックでは、相互参照を含む見出しと文が表示されます。
(クリックして拡大)

コンテンツの外観を変更する方法

マイクロコンテンツの検索結果とトピックで、コンテンツの外観を変えたい場合があります。これはスタイルを使って実現できます。

[コンテンツエクスプローラ] で Resources フォルダを展開します。Stylesheets フォルダを右クリックして、[新規] > [スタイルシート] を選択します。[ファイルを追加] ダイアログが開きます。
[ファイル名] フィールドに「Micro-Content」と入力し、[追加] ボタンをクリックします。新しいスタイルシートが作成され、[スタイルシートエディタ] が開きます。
ツールバーの最初のボタンがであることを確認してください。の場合はクリックしてください。
[スタイルシートエディタ] の左側で、ul スタイル (箇条書きリスト) を選択します。
(クリックして拡大)
エディタの右側で、color プロパティを #ff0000 (赤) に設定します。
(クリックして拡大)
をクリックして作業内容を保存します。
[コンテンツエクスプローラ] で、Resources > MicroContent フォルダを展開します。
「My-Micro-Content.flmco」を右クリックして、[プロパティ] を選択します。
ダイアログで、[スタイルシートリンク] タブを選択します。
ダイアログの左側で、「Micro-Content.css」をダブルクリックして右側に移動し、[OK] ボタンをクリックします。これにより、マイクロコンテンツファイルとスタイルシートが関連付けられます。マイクロコンテンツファイルは引き続きプロジェクトレベルで設定されているメインのスタイルシートを使用しますが、競合する場合は、マイクロコンテンツファイルに関連付けられた新しいスタイルシートが優先されます。
[コンテンツエクスプローラ] で、Famous-Austin-Folks.htm をダブルクリックします。
箇条書きリストを使ってマイクロコンテンツを作成してみましょう。リストの左側にある ul 構造バーを右クリックし、コンテキストメニューから [マイクロコンテンツの作成] を選択します。
(クリックして拡大)
ダイアログの [フレーズ] フィールドに「famous」と入力します。
[OK] ボタンをクリックします。[マイクロコンテンツエディタ] が開き、新しいフレーズが選択され、リンクされた応答 (箇条書きリスト) が右側に表示されます。
(クリックして拡大)
をクリックしてすべてのファイルを保存します。
「All-About-Austin-HTML5」ターゲットをビルドし、出力を確認します。
「famous」を検索します。リストが赤色で表示されます。
(クリックして拡大)
マイクロコンテンツの下部にあるリンクをクリックすると、トピックが開きます。トピックでは、リストが黒色 (メインのスタイルシートでは変更していないデフォルトの色) で表示されています。
(クリックして拡大)