チュートリアル

MADCAP FLARE 2023 r2

e ラーニング — 基礎編

Copyright © 2024 MadCap Software. All rights reserved.

本書の内容は、予告なしに変更されることがあります。本書に記載されているソフトウェアは、ライセンス契約または秘密保持契約に基づいて提供されます。それらの契約条件以外での使用または複製を一切禁止いたします。本書のいかなる部分も、事前に MadCap Software の書面による許可なく購入者の個人的な使用目的以外での複製、検索システムへの組込、またはあらゆる形式および手段による送信 (電磁的、機械的、複写および記録を含む) を禁じます。

MadCap Software
9171 Towne Center Drive, Suite 335
San Diego, California 92122
858-320-0387
www.madcapsoftware.com

Translated by XLsoft Corporation
2024 年 2 月

目次

ii

目次

第1章
はじめに

5

第2章
テンプレートからプロジェクトを作成

6

テンプレートから新規プロジェクトを作成する

7

第3章
出力のビルドと表示

9

知識チェック コースをビルドして表示する

10

テスト コースをビルドして表示する

21

知識チェックとテストを組み合わせたコースをビルドして
表示する

24

第4章

目次

e ラーニング コンテンツの作成

25

トピックを削除する

26

トピック ファイル名とコンテンツを変更する

31

知識チェック コンテンツを変更/追加する

47

テスト コンテンツを変更/追加する

60

iii

第5章
目次の更新

65

目次を更新する

66

第6章
バナー画像の変更

69

バナー画像とロゴの変更方法

70

テンプレート テキストの更新方法

73

その他の未使用ファイルの削除方法

75

注目すべき点75

第7章
出力のリビルドと表示

76

知識チェックとテストを組み合わせたコースをビルドして
表示する

目次

77

iv

第1章

はじめに
所要時間: 約 50 分
Flare e ラーニング チュートリアル基礎編へようこそ。


チュートリアルの目的: 本チュートリアルでは、Flare プロジェクト テンプレートからイ
ンタラクティブな e ラーニング コースをすばやく作成する方法を紹介します。



主要概念: コンテンツを編集したり、新しい質問や解答を追加したり、不要なコンテンツを削除したり、ブランディングに合わせてロゴや色を調整します。

第1章

5

第2章

テンプレートからプロジェクト
を作成
最初に、Flare の e ラーニング テンプレートの 1 つを使用して、新規プロジェクトを作成してみましょう。

テンプレートから新規プロジェクトを作成する
1. [スタート ページ] で [新規プロジェクト] を選択します。[新規プロジェクト開始ウィザード]が開きます。
2. [プロジェクト名] フィールドで任意の名前を入力します。
3. (オプション) [プロジェクト フォルダ] フィールドで、プロジェクトを保存する場所を入力します。デフォルトでは、C:\Users\<ユーザー名>\Documents\マイ プロジェクト フォル
ダーに保存されます。

注: このチュートリアルでは、英語のプロジェクトを作成しますが、日本語のプロジェクトを作成する場合は、下にある言語オプション設定で Japanese を選択して
ください。

第2章

6

4. [次へ] をクリックします。
5. 内蔵テンプレートの Online フォルダー内にある[eLearning] テンプレートを選択します。

6. [次へ] をクリックします。

第2章

7

7. ブランディング ページでは、新しい色を使ってコースの外観をカスタマイズしてみましょう(ロゴとバナー画像は後で変更します)。
a. [Colors] セクションの [Primary] フィールドに「#F2774B」と入力します。
b. [Secondary] に「#FCF6F3」と入力します。

8. [次へ] をクリックします。
9. [完了] をクリックします。プロジェクトが作成され、Flare に読み込まれます。

第2章

8

第3章

出力のビルドと表示
まだ何もしていませんが、プロジェクトはすでにいくつかのオンライン コースを生成するように設定されています。1 つ目のコースは、コンテンツと最後にスコア付きのテストを表示します。2 つ目のコースは、コンテンツとコースの途中で知識チェックを表示します。そして、3 つ目のコースは、前の 2 つのコースを組み合わせで、知識チェックと最後にクイズを含みます。3 つのコースはすべて、同じコンテンツ ソース ファイルを使用しているので、重複した作業がないのが素晴らしい点です。
これらのコースの出力をビルドして表示してみましょう。
この章では、以下について説明します。

第3章

知識チェック コースをビルドして表示する

10

テスト コースをビルドして表示する

21

知識チェックとテストを組み合わせたコースをビルドして表示する

24

9

知識チェック コースをビルドして表示する
1. Flare の左側で [プロジェクト オーガナイザ] バーを選択して開きます。

2. ターゲット フォルダーを展開します。

第3章

10

3. Online-Course-With-Knowledge-Check をダブルクリックして、このターゲットを右側に表示します。ターゲットとは、ファイルと設定を組み合わせて出力を生成するためのファイ
ルです。

第3章

11

4. [ターゲット エディタ] のローカル ツールバーで [ビルド] をクリックします。

5. Flare の下部にある [ビルド] ウィンドウ ペインで、[ステータス] が [完了] になり、[ビルド状況] がビルドが成功したことを示す濃い緑色になったら、行をダブルクリックして生成されたコースを表示します。

6. 最初のページの下部にある [START COURSE] リンクをクリックします (設定したブランディ
ング カラーがコースの出力の外観に影響することに注意してください)。

第3章

12

7. ページの下部にあるナビゲーション ボタンを使用してコース内を移動できます。

第3章

13

8. 質問を含む知識チェック ページでは、各質問で解答を選択すると [Submit] ボタンが有効になります。そして、すべての質問に解答すると、ページの下部にある [Next] ボタンが有効になります。

コースを進めていくと、ページごとに異なる機能が使用されていることが分かります。ブラウ
ザーのサイズを変更すると、コンテンツがページに収まるように自動的に調整されます。このプ
ロジェクト テンプレートでは、Flare の豊富な機能の中から、次の機能を使用しています。

第3章

14

タイル

第3章

15

ホットスポット ポップアップ

第3章

16

ドロップダウン

第3章

17

スライドショー

第3章

18

ビデオ

第3章

19

IFrame

9. コースの最後には、「The End」ページが表示されます。このプロジェクト テンプレートでは、
この出力でのみこのページを表示するように設定されています。ほかの出力では、最後にクイズの結果が表示されます。また、最後のページであるため、ページ下部の [Next] ボタンは無効になっています。

第3章

20

テスト コースをビルドして表示する
1. Flare の左側の [プロジェクト オーガナイザ] で、ターゲット フォルダー以下にある OnlineCourse-With-Test をダブルクリックして開きます。

2. 表示された [ターゲット エディタ] のローカル ツールバーで [ビルド] をクリックします。
3. Flare の下部にある [ビルド] ウィンドウ ペインで、[ステータス] が [完了] になり、[ビルド状況] がビルドが成功したことを示す濃い緑色になったら、行をダブルクリックして生成されたコースを表示します。
4. 1 つ目のコースと同様に、コースを開始して進めます。

第3章

21

5. ほとんどのページは 1 つ目のコースと同じですが、コースの途中に知識チェックがありません。
代わりに、コースを進めていくと「Austin Test」というページが表示されます。

6. [Next] をクリックして、続くページでテストの質問に答えます。

第3章

22

7. すべての質問に解答すると、テスト結果が表示されます。これでコースは終了です。

第3章

23

知識チェックとテストを組み合わせたコースをビルドして表示する
1. Flare の左側の [プロジェクト オーガナイザ] で、ターゲット フォルダー以下にある OnlineCombination-Course をダブルクリックして開きます。

2. 表示された [ターゲット エディタ] のローカル ツールバーで [ビルド] をクリックします。
3. Flare の下部にある [ビルド] ウィンドウ ペインで、[ステータス] が [完了] になり、[ビルド状況] がビルドが成功したことを示す濃い緑色になったら、行をダブルクリックして生成されたコースを表示します。
4. ほかの 2 つのコースと同様に、コースを開始して進めます。
5. ほかの 2 つのコースと同じコンテンツが使用され、コースの途中に知識チェックと最後にクイズが含まれています。
第3章

24

第4章

e ラーニング コンテンツの作成
これまでのステップで表示されたページは、Flare のトピック (とほかのファイルの組み合わせ) の結果です。このテンプレートを利用することで、何を追加し、変更し、削除すべきかを決定するだけで済みます。
最初に、使用しないいくつかの既存のトピックを削除してみましょう。次に、残すトピックのコンテ
ンツを変更します。これらのトピックの中には、一般的な情報やさまざまな機能が含まれているだけのものもあれば、インタラクティブな e ラーニングの質問セクションが含まれているものもあります。
この章では、以下について説明します。

第4章

トピックを削除する

26

トピック ファイル名とコンテンツを変更する

31

知識チェック コンテンツを変更/追加する

47

テスト コンテンツを変更/追加する

60

25

トピックを削除する
1. Flare の左側で [コンテンツ エクスプローラ] バーを選択して開きます。

2. このテンプレートでは、トピックはすべて [コンテンツ エクスプローラ] で個別のフォルダーに配置されています。Course-Content フォルダーを展開します。

第4章

26

3. ここでは、ホットスポット ポップアップ、スライドショー、ビデオを含むトピックをプロジェ
クトから削除します。4-0-Hotspot Popups.htm という名前のトピックを右クリックして、コンテキスト メニューから [削除] を選択します。ダイアログが表示されたら [OK] をクリックします。

4. これらのトピックはすべて、コースの進行順序を指定する目次 (TOC) ファイルでリンクされています。削除したトピックが目次から削除されるように、[リンクを更新する] ダイアログが表示されたら [リンクを削除する] をクリックします。

第4章

27

5. この操作を繰り返してほかのトピックを 1 つずつ削除することもできますが、もっと簡単な方法があります。[コンテンツ エクスプローラ] の上部にあるローカル ツールバーでをクリックします。[コンテンツ エクスプローラ] が分割され、左側で選択したフォルダーに含まれるファイルが右側に表示されます。

第4章

28

6. 左側で最初のフォルダーを選択して、Ctrl キーを押したまま右側で次のトピックを選択します。
4-1-State-Capitol.htm

4-2-Zilker-Park.htm



4-3-Lady-Bird-Lake.htm



6-Slideshow.htm



7-Video.htm

7. Delete キーを押します。

第4章

29

8. [リンクを更新する] ダイアログが表示されたら [リンクを削除する] をクリックします。
これで選択したトピックがすべて削除されます。残ったのは、1、2、3、5、8 で始まるファイ
ル名のトピックです。この番号は目次内で順番を確認しやすくするために付けられたものなので、連番になっていなくても問題ありません。トピックのファイル名は任意の名前に変更することができ、番号を含める必要はありません。
9. [コンテンツ エクスプローラ] のローカル ツールバーでを再度クリックして、分割表示を解除します。

第4章

30

トピック ファイル名とコンテンツを変更する
プロジェクト内の e ラーニングの質問セクションについて説明する前に、いくつかのトピックの情報コンテンツとファイル名を変更しましょう。
1. 最初に、プロジェクト内のいくつかのトピックの名前を変更します。[コンテンツ エクスプローラ] で Course-Content フォルダー以下にある 1-Course-Title.htm をクリックして
F2 キーを押します。拡張子を除くファイル名のみがハイライトされます。

2. San-Diego-Course-Intro と入力して Enter キーを押します。

第4章

31

3. [リンクを更新する] ダイアログが表示されたら [リンクを更新する] をクリックします。[コンテンツ エクスプローラ] の表示内容は次のようになります。

4. この手順を繰り返して、フォルダー内の残りのトピック ファイル名も次のように変更します。
[リンクを更新する] ダイアログが表示されたら、その都度 [リンクを更新する] をクリックしま
す。

第4章



2-Just-Text.htm を History に変更します。



3-Two-Tiles.htm を Climate に変更します。



5-Drop-Downs.htm を Beer に変更します。



8-IFrame.htm を Zoo に変更します。

32

5. San-Diego-Course-Intro.htm をダブルクリックして開きます。
6. [XML エディタ] で最初の段落の「Austin, Texas」を「San Diego, California」に変更します。
トピックの残りはそのままにします。

注: 背景色付きの段落は、「条件」が設定されていることを示します。条件は非常に便利な機能です。詳しくは、「e ラーニング チュートリアル応用編」で説明します。

7. Flare の左上にある

第4章をクリックして変更内容を保存します。

33

8. [コンテンツ エクスプローラ] で History.htm をダブルクリックして開きます。
9. 見出しを「History」に変更して、以下のテキストをコピー & ペーストして、見出しの下の既存のテキストを置き換えます。
San Diego was incorporated in 1850, the same year California became a state.However,before that, it had been part of the Spanish Empire, First Mexican Empire, and Mexican
United States.
Today, San Diego is the second-largest city in California and the eighth-largest city in
the United States.It is known as "America's Finest City," partially because of its yearround warm climate and beautiful beaches.San Diego has a large defense and military
sector, a thriving tourism industry, and many major research and manufacturing
companies.
10. [コンテンツ エクスプローラ] で Climate.htm をダブルクリックして開きます。
11. 見出しを「Climate」に変更します。
12. コンテンツの左側に構造バー (垂直の矩形ブロック) が表示されていない場合は、下部にある
ツールバーで第4章をクリックしてください。

34

見出しの下の「Note」セクションに対応する p 構造バーを右クリックして、コンテキスト メ
ニューから [削除] を選択します。

第4章

35

13. 以下のテキストをコピー & ペーストして、最初のタイルの既存のテキストを置き換えます。最初に段落を置き換えてから、箇条書き項目を 1 つずつ置き換えると良いでしょう。一度にすべてのテキストをコピーしてタイルにペーストすると、リボンバーの [ホーム] タブから箇条書きを再度指定する必要があるかもしれません。また、ワークスペースのサイズによってはタイルを並べて表示できないため、エディタ内でタイルが移動することがありますが、これは問題ありません。
Although it is located along the Pacific Ocean, San Diego County doesn't have theconstant, uniform weather you may associate with coastal California.San Diego County
is very large.It is so large that it spans several microclimates with different kinds ofweather.You can even see the different areas if you look at a picture of San Diego.
Here's what you can expect when you come to San Diego.


The coast has cool, breezy weather.



Inland valleys are warmer and more humid than the coast, with cool nights.



The mountains experience more precipitation, and it will sometimes snow in thewinter!



第4章

The desert is very hot and dry.

36

14. 以下をクリックして画像アセットを含む ZIP ファイルをダウンロードし、ZIP ファイルを展開
して画像を抽出し、コンピューターに保存します (ダウンロード後 ZIP ファイルを右クリックして、[新しいウィンドウで開く] を選択し、ファイルを任意の場所にコピー & ペーストします)。
これらの画像は後で使用します。ZIP ファイルをダウンロードできない場合は、コンピューターにある任意の画像を使用して、このチュートリアルを完了できます。ただし、使用する画像のサイズが ZIP ファイルに含まれる画像と異なる場合、このチュートリアルで示す結果と外観が異
なります。

第4章

37

15. Flare の Climate トピックで 2 つ目のタイルにある既存の画像を右クリックして、コンテキス
ト メニューから [画像プロパティ] を選択します。

第4章

38

16. 表示される [画像プロパティ] ダイアログで、[ファイルの選択] セクションの下部にあるボ

タンをクリックして、ZIP ファイルの画像を保存した場所を参照し、SD-Downtown.jpg をダ
ブルクリックして選択します。

17. [OK] をクリックします。

第4章

39

18. ファイルがプロジェクトにコピーされることを通知する [プロジェクトにコピー] ダイアログが表示されます。[OK] をクリックします。トピックは次のようになります。

19. [コンテンツ エクスプローラ] で Beer.htm をダブルクリックして開きます。

第4章

40

20. このトピックでは、学習者がホットスポットをクリックすると、ホットスポットの下にあるコンテンツが表示/非表示になるドロップダウン効果を使用しています。まず、見出しを「Beer」に変更して、見出しの下の「Note」セクションを削除します。

21. 以下のテキストをコピー & ペーストして、最初の段落を置き換えます。
San Diego is famous for its craft brewing scene.San Diego County is home to more than
100 breweries.
22. 「Austin City Limits」が 1 つ目のドロップダウン ホットスポットです。これを「Ballast Point
Brewing & Spirits」に置き換えます。次に、以下のテキストをコピー & ペーストして、ホットスポット以下にある段落を置き換えます。
Ballast Point opened in 1996 and now is the second largest craft brewery in San Diego
County.Its Sculpin India Pale Ale is a popular beer in bars and restaurants in San Diegoand across the country.

第4章

41

23. 2 つ目の「South by Southwest」ホットスポットを「Stone Brewing Company」に置き換えます。次に、以下のテキストをコピー & ペーストして、ホットスポット以下にある段落を置き換えます。
Stone Brewing Company is the largest brewery in Southern California and the ninth
largest brewery in the United States.It is well-known around the world for its hoppy
beers, like the Stone Pale Ale.Stone has two beer gardens in the San Diego area thatare must-visit spots for any craft beer fan.

24. ドロップダウン効果をもう 1 つ追加します。現在のドロップダウンをコピー & ペーストして、テキストを置き換えることで作成できますが、ここでは手動で新しいドロップダウンを作成してみましょう。見出し「Beer」以下の最初の段落の最後で Enter キーを押して、空の段落を新規作成します。
25. 以下のテキストをコピー & ペーストします。
AleSmith Brewing Company
AleSmith was founded in 1995.It has won many medals in the World Beer Cup
competition.One of their beers, the San Diego Pale Ale.394, was created in honor of San Diego Padres legend Tony Gwynn.

第4章

42

26. コピー & ペーストした 2 つの段落をハイライトして、リボンバーの [挿入] タブで [ドロップダウン テキスト] をクリックします。

第4章

43

これで、このトピックには 3 つのドロップダウンが含まれます。

27. [コンテンツ エクスプローラ] で Zoo.htm をダブルクリックして開きます。
28. 見出しを「San Diego Zoo」に置き換えて、見出しの下の「Note」セクションを削除します。
次に、以下のテキストをコピー & ペーストして、見出しの下の段落を置き換えます。
The San Diego Zoo was founded in 1916 and is located inside of Balboa Park.It is home
to more than 3700 rare and endangered animals, and more than 700,000 exotic
plants.Among the animals at the zoo are giant pandas, gorillas, koalas, and jaguars.

第4章

44

29. トピックの下部に灰色のバーがあります。これは、外部 Web サイトなどにリンクして、トピッ
クの出力からスクロールできるようにする IFrame 用のプレースホルダーです。現在、このIFrame はテキサス州オースティン市に関する Web ページにリンクされています。これを変更
して、San Diego Zoo (サンディエゴ動物園) に関する Web ページにリンクします。灰色のIFrame バーを右クリックして、コンテキスト メニューから [Edit IFrame] を選択します。

第4章

45

30. 表示される [Insert IFrame] ダイアログで、[Source] フィールドの値を次の URL に変更して、[OK] をクリックします。
https://en.wikipedia.org/wiki/San_Diego_Zoo/

31. これまでにいくつかのファイルを変更しましたが、変更内容を保存していません。左上のをクリックしてすべてのファイルを保存します。
32. そして、現在開いているすべてのファイルを閉じます。Flare の上部にあるリボンバーの [ウィンドウ] タブで [すべての文書を閉じる] をクリックします。

注: このチュートリアルでは、既存のトピックを削除したり、変更しましたが、実際のプロジェクトではトピックを新規作成することもあるでしょう。 新規トピックの作成は簡単です。[コンテンツ エクスプローラ] でフォルダーまたはサブフォル
ダーを右クリックして、コンテキスト メニューから [新規] > [トピック] を選択します。そして、表示される [ファイルを追加] ダイアログでフィールドの値を選択/入力して、[追加] ボタンをクリックします。

第4章

46

知識チェック コンテンツを変更/追加
する
このプロジェクト テンプレートの [コンテンツ エクスプローラ] には、Course-Content フォルダーのほかにいくつかのフォルダーがあります。そのうちの 1 つは、e ラーニング コースのさまざまな場
所に追加して学習者の理解度をチェックできる、知識チェック用のトピックが含まれています。これらのトピックの質問セクションは、採点やクイズに使用することを目的としたものではありません。
 [コンテンツ エクスプローラ] で Course-Knowledge-Check フォルダーを展開します。
 First-Knowledge-Check.htm をダブルクリックして開きます。
 このトピックには 2 つの知識チェックの質問セクションがあり、複数選択問題とフィードバッ
ク エリアが含まれています。1 つ目のセクションの質問を以下に置き換えます。
Where does San Diego rank in size in the state of California?
 これは、正解が 1 つしかない択一問題です。択一問題では、各解答の横にラジオボタンが使用されます。3 つの解答のテキストを以下に置き換えます。
Largest city in the state
Second largest city in the state
Third largest city in the state

第4章

47

 解答をもう 1 つ追加しましょう。3 つ目の回答の最後で Enter キーを押して、次のテキストを追加します。
Fourth largest city in the state

第4章

48

 正解である「Second largest city in the state」のラジオボタンをクリックします。

第4章

49

 解答の下のフィードバック エリアで、1 つ目の「The capital of Texas is Austin.」を削除します。2 つ目の「The capital of Texas is Austin.」は、以下に置き換えます。
San Diego is second in size only to Los Angeles.

 最初の質問の下にある画像を削除して、2 つ目の質問セクションに移動します。

第4章

50

 2 つ目の質問は、複数の正解が存在する可能性がある複数選択問題です。複数選択問題では、各解答の横にチェックボックスが使用されます。2 つ目の質問を以下に置き換えます。
「Select all that apply.」はそのまま残します。
Which of the following are true regarding San Diego's climate?


解答のテキストを以下に置き換えます。
It snows along the coast throughout November and December.Valleys can be cool atnight.
The desert areas can get extremely hot.



正解である 2 つ目と 3 つ目の解答のチェックボックスをクリックしてオンにします。1 つ目の解答は正解ではないため、チェックボックスをオフにします。変更後は以下のようになります。

第4章

51



フィードバック エリアで「Correct.」に続くテキストを削除します。そして、「Incorrect.」に続くテキストを以下に置き換えます。
The valleys can get cool at night, and desert areas are known for extreme heat.

第4章

52



択一問題をもう 1 つ追加してみましょう。2 つ目の質問の [Submit] ボタン の下に水平カーソ
ルが表示されるまで下矢印キーを押します。

Enter キーを押して空の段落を新規作成します。



Flare の上部にあるリボンバーの [eLearning] タブで [Multiple Choice] をクリックします。



次の質問テキストをコピー & ペーストします。
In what year was San Diego incorporated?



1 つ目の解答として 1776 を入力して Enter キーを押します。



2 つ目の解答として 1922 を入力して Enter キーを押します。

第4章

53



3 つ目の解答として 1850 を入力します。これはこの質問の最後の解答なので Enter キーを押
しません。



正解である「1850」のラジオボタンをクリックします。



学習者が正解/不正解を選択した場合のフィードバックを追加します。リボンバーの[eLearning] タブで [Add Feedback] をクリックします。

ヒント: コンテンツの左側にある MadCap 構造バーを右クリックして、フィード
バックを追加したり、その他の e ラーニング タスクを実行することもできます。

第4章

54



正解テキストをスニペットに置き換えます。スニペットとは、プロジェクト内の複数の場所で再利用できるコンテンツを含む、独立した小さなファイルです。[コンテンツ エクスプローラ]
で Resources フォルダーを展開します。そして、その下にある Snippets サブフォルダーを展開します。Feedback-Correct.flsnp ファイルをクリックしてドラッグし、プレースホル
ダー テキスト「Enter feedback for correct answers」の直前にドロップします。ファイルをドラッグすると赤色のバーが表示され、マウス ボタンを離したときにファイルがどこに配置されるかを示します。



スニペットを挿入したらプレースホルダー テキストを削除します。

第4章

55



同様に、Feedback-Incorrect.flsnp スニペットをプレースホルダー テキスト「Enter
feedback for incorrect answers」の直前にドロップします。そして、スペース キーを押してスニペットとプレースホルダー テキストの間にスペースを 1 つ追加します。最後に、プレース
ホルダー テキストを以下に置き換えます。
San Diego was incorporated in 1850.



次に、回答を送信するための [Submit] ボタンを追加します。リボンバーの [eLearning] タ
ブで [Add Submit Button] をクリックします。トピックの最後に 「Submit」というテキス
トのボタンが追加されます。

第4章

56

をクリックして変更内容を保存します。

[コンテンツ エクスプローラ] で Second-Knowledge-Check をダブルクリックして開きます。
上記と同様に、2 つの質問セクションを以下のコンテンツに置き換えます。以下の画像は、マー
クすべき正解を示しています。
1 つ目の質問セクション
How many breweries does San Diego have? 723Over 100 Correct.
Correct.
Incorrect.San Diego has over 100 breweries.Guess what? That's a lot of breweries!
2 つ目の質問セクション
Which of the following are not breweries in San Diego? (Select all that apply.)
Pint and Pail
Ballast Point
Do Be Do Be Do
Correct.
Incorrect.Ballast Point is a brewery in San Diego.The other two? Not so much.

第4章

57



第4章

をクリックして変更内容を保存します。

58

The End.htm トピックを開きます。このトピックには質問を追加しません。このトピックは、学習者にコースの最後に到達したことを知らせるために使用します。「Austin, Texas」を「San Diego, California」に変更します。

をクリックして変更内容を保存します。

注: このチュートリアルでは、リボンバーの [eLearning] タブでオプションを選択して、質問と解答のプレースホルダー コンテンツを追加していますが、既存のコンテンツを質問セクションに変換することもできます。マウスでコンテンツを選択して、リボンバーの [eLearning] タブで [Multiple Choice] または [Multiple
Response] を選択します。選択範囲の最初の段落が質問になり、続く段落はそれ
ぞれ解答となります。

第4章

59

テスト コンテンツを変更/追加する
ここでは、[コンテンツ エクスプローラ] の Course-Test フォルダーについて説明します。CourseTest フォルダーにあるトピックの目的は、コースの最後に学習者が受けることができるクイズの内容を提供し、テストの結果を表示することです。
1. [コンテンツ エクスプローラ] で Course-Test フォルダーを展開します。
2. クイズの概要トピックに加えて、質問セクションを含む 5 つのトピックがあります。このチュートリアルでは、Question3.htm、Question4.htm、および Question5.htm は使用しないため削除し、以下に示す残りの 3 つのトピックを使用します。[リンクを更新する] ダイ
アログが表示されたら [リンクを削除する] をクリックします。

3. 概要トピックのファイル名を San-Diego-Test-Intro に変更します。[リンクを更新する] ダ
イアログが表示されたら [リンクを削除する] をクリックします。

第4章

60

4. San-Diego-Test-Intro.htm をダブルクリックして開きます。
5. 見出しを「San Diego Test」に変更して、段落中の「Austin」を「San Diego」に変更します。

6.

をクリックして変更内容を保存します。

7. [コンテンツ エクスプローラ] で Question1.htm をダブルクリックして開きます。
8. 質問を以下のテキストに置き換えます。
Where is the San Diego Zoo?
9. 3 つの解答のテキストを以下に置き換えます。
Gaslamp Quarter
Balboa Park
Over there
10. 正解である「Balboa Park」のラジオボタンをクリックします。

第4章

61

注: この問題にはフィードバック エリアや [Submit] ボタンがありません。フィードバックを追加することもできますが、その場合でも、結果をすぐに表示しないた
め [Submit] ボタンは追加しません。代わりに、すべての質問に答えてクイズを完了した後に結果を表示します。

11.

をクリックして変更内容を保存します。

12. [コンテンツ エクスプローラ] で Question2.htm をダブルクリックして開きます。
13. 質問を以下のテキストに置き換えます。
Which of the following are not the motto for San Diego?
14. コンテンツ エクスプローラで Resources > Snippets を展開して、Select-Answers.flsnp
ファイルをドラッグして、この質問の直後にドロップします。そして、疑問符とスニペットの間にスペースを 1 つ追加します。

15. 3 つの解答のテキストを以下に置き換えます。
America's Finest CityYou Can't Stop Progress
Surf and Chill

第4章

62

16. 現在、この質問は正解を 1 つしか選択できない択一問題になっています。これを複数の解答を選択可能な複数選択問題に変更します。コンテンツの左側にある任意の e ラーニング構造バー(「p」 (段落) 構造バーではなく、質問セクションに対応するバー) を右クリックします。そして、コンテキスト メニューから [Switch to Multiple Response] を選択します。

第4章

63

17. 2 つ目と 3 つ目の解答のチェックボックスをクリックしてオンにします。

18.

第4章

をクリックして変更内容を保存します。

64

第5章

目次の更新
このプロジェクト テンプレートには、すでに目次 (TOC) が設定されています。目次には、これまで作業してきたトピックへのリンクが含まれており、以下の役割があります。


出力でトピックが表示される順序を指定します。



クイズを開始する場所を (Test Node オプションを使用して) 指定します。



クイズに含まれるスコア付きのトピックを指定します。

しかし、これまでにいくつかのトピックを削除したため、目次を更新してクリーンアップする必要が
あります。

第5章

65

目次を更新する
1. Flare の左側で [プロジェクト オーガナイザ] バーを選択して開きます。
2. 目次フォルダーを展開します。
3. Online-TOC (Primary) をダブルクリックして、右側に [目次エディタ] を開きます。

4. 目次の項目はトピックの見出しと一致していることが分かります。これ以外には、いくつかの点にお気付きでしょう。一部の項目のチェックボックスは色付きで表示されています。これは条件が設定されていることを示します。条件については、「e ラーニング チュートリアル応用編」
で説明します。また、いくつかの項目にはフラグと [[[Missing Linked File
System.LinkedTitle]]] テキストが表示されています。これらの項目は以前はプロジェクト内のトピックにリンクされていましたが、トピックが削除されたためリンク切れとなっています。
これらの項目を削除します。最初のリンク切れ項目をクリックして Delete キーを押します。

第5章

66

5. この作業を繰り返して残り 2 つのリンク切れ項目を削除します。すると、次のようなコース ト
ピック、知識チェック トピック、テスト トピックの組み合わせになります。

6. 最後の項目である「Austin Quiz」の左側には、疑問符と矢印が表示されています。疑問符はこの項目がスコア付きクイズを開始する「Test Note」であることを示しています。矢印をクリッ
クして展開すると、質問トピックが表示されます。

7. クイズの目次項目もクリーンアップが必要です。まず、「Austin Quiz」をクリックして F2
キーを押します。
8. テキストを「San Diego Quiz」に変更して Enter キーを押します。

第5章

67

9. 次に、最後の 3 つのリンク切れ項目を削除します。すると、次のような内容になります。

注: このチュートリアルでは目次に新規トピックを追加しませんが、 [コンテンツ
エクスプローラ] でトピックをクリックしてドラッグし、[目次エディタ] の任意の場所へドロップすることで、簡単に追加できます。

10.

第5章

をクリックして変更内容を保存します。

68

第6章

ブランディングの変更
以前のステップで出力を生成して表示したときに、コースのブランディングに関する要素が含まれていました。ブランディングのプライマリー カラーとセカンダリー カラーは変更済みですが、その他の要素として、最初のページの背景に使用されるバナー画像やロゴがあります。
この章では、以下について説明します。

第6章

バナー画像とロゴの変更方法

70

テンプレート テキストの更新方法

73

その他の未使用ファイルの削除方法

75

注目すべき点75

69

バナー画像とロゴを変更する
バナー画像とロゴ (およびその他のブランディング要素) の変更は、[新規プロジェクト開始ウィザー
ド] で簡単に行うことができますが、このチュートリアルでは、新規プロジェクトを作成する際にブランディング画像の変更をスキップしました。ここで変更してみましょう。
1. [コンテンツ エクスプローラ] で、Resources > Branding に移動します。

2. Branding.css をダブルクリックします。[Branding Editor] が開きます。
[Branding Editor] は、[新規プロジェクト開始ウィザード] のブランディング ページと基本的に同じであり、プロジェクト作成後、スタンドアロン エディターとしていつでも開くことができます。
プロジェクト作成時に、ブランディング要素の値を識別するブランディング スタイルシート(例: Branding.css) が追加され、値がプロジェクト内の CSS 変数に関連付けられます。

第6章

70

3. [Images] セクションで Austin の画像を San Diego の画像に変更しましょう。

4. [LogoImage] フィールドでをクリックして画像を選択します。[画像の挿入] ダイアログが開きます。
5.

をクリックして、[ファイルを開く] ダイアログを開きます。画像ファイルを含む ZIP ファ
イルをダウンロードした場所に移動して、SD-Logo.png を選択します。[開く] をクリックしてから、[OK] をクリックします。
[プロジェクトにコピー] ダイアログが表示されたら、[OK] をクリックすると、ファイルがプ
ロジェクトにコピーされます。

6. [HeroImage] フィールドでをクリックして画像を選択します。[画像の挿入] ダイアログが開きます。

第6章

71

7. 上記の手順 5 を繰り返して、SD-Hero.png ファイルをプロジェクトにコピーします。
[Branding Editor] では、画像フィールドが更新され、[Preview] 領域に選択した画像が表示されます。

8.

第6章をクリックして変更内容を保存します。

72

テンプレート テキストの更新方法
1. [コンテンツ エクスプローラ] で Resources > TemplatePages フォルダーを展開します。
2. Course-Title.flmsp をダブルクリックしてファイルを開きます。

これはテンプレート ページであり、出力されるトピックにコンテンツを自動的に追加するために使用されます。ほとんどの場合、テンプレート ページは多くのトピックで共通のコンテンツを表示するために使用されますが、このチュートリアルではコースの最初のページでのみ使用されています。
このテンプレート ページには 3 つの項目が含まれています。


1 つ目は、先程更新した San Diego ロゴを含む長方形のヘッダーを表示するスニペットです。



2 つ目は、先程更新した San Diego のバナー画像ですが、画像上のテキストは「Austin,
Texas」になっています。



3 つ目は、下部の灰色のバーです。これはプロキシであり、出力が生成されたときの各ト
ピックの通常のコンテンツを表しています。

第6章

73

3. バナー画像上のテキストを「Austin, Texas」から「San Diego」に変更します。

4.

第6章

をクリックして変更内容を保存します。

74

その他の未使用ファイルを削除する
このチュートリアルでは必要のないいくつかのファイルを削除します。
1. [コンテンツ エクスプローラ] で Template Instructions.pdf をクリックして Delete キーを押します。[OK] をクリックします。
この PDF には、このチュートリアルですでに行ったことに関する情報が含まれていますので、もう必要ありません。
2. Resources > TemplatePages フォルダーから Popups.flmsp を選択して Delete キーを押します。[OK] をクリックします。
このテンプレート ページは、以前のステップで削除したいくつかのポップアップ トピックに使用されていました。これらのトピックは削除したので、このテンプレートページはもう必要ありません。

注目すべき点
注: コースのプロジェクト作成時に [新規プロジェクト開始ウィザード] でブラン
ディング カラーを変更すると、e ラーニングのスキン コンポーネントとテスト結果のスキン コンポーネントの配色が自動的に更新されます。これは CSS 変数が、ブランディング スタイルシートを指すプロジェクト内のさまざまな場所に自動的にリンクされるためです。

第6章

75

第7章

出力のリビルドと表示
プロジェクトを変更したので、ビルドして出力を確認してみましょう。

第7章

76

知識チェックとテストを組み合わせたコースをビルドして表示する
1. Flare の左側の [プロジェクト オーガナイザ] で、ターゲット フォルダー以下にある OnlineCombination-Course をダブルクリックして開きます。

2. 表示された [ターゲット エディタ] のローカル ツールバーで [ビルド] をクリックします。
3. Flare の下部にある [ビルド] ウィンドウ ペインで、[ステータス] が [完了] になり、[ビルド状況] がビルドが成功したことを示す濃い緑色になったら、行をダブルクリックして生成されたコースを表示します。

第7章

77

4. 出力のタイトル ページでロゴとバナー画像が変わっていることが分かります。

5. [START COURSE] リンクをクリックしてコースを進めると、コンテンツとスタイルの変更も確認できます。
以上でこのチュートリアルは終了です。「e ラーニング チュートリアル応用編」では、シングルソー
ス コンテンツ、印刷出力の作成など、e ラーニング コースの作成に関する詳細や設定をさらに詳しく紹介しています。ぜひご活用ください。

第7章

78

付録

PDF
Flare オンライン ヘルプから各種チュートリアル、チートシート、ユーザーガイドの PDF をダウンロードできますので、ご活用ください。

付録

79