戻る / 目次 /  /  /  /  /  /  /  /  /  / 10 / 11 / 12 /  /  / 次へ


  spanとpタグ
  XHTMLファイルにイメージを貼りつける
  スタイルシート
  プロジェクトの新規作成
  音声のインポート
  編集とイメージのシンクロ
  書誌情報の入力
  プロジェクトの整理と圧縮
  CD-Rに書き込む


演習
テキストファイルからXHTMLファイルを作成し、マルチメディア版プロジェクトを完成させる

教材データにある「breP」をLp PlayerJPで再生してみてください。このプロジェクトは、1ページを1ファイルとして作ったものです。絵本などをXHTMLファイルにする場合に、ファイルごとのCSS(カスケーディングスタイルシート)の適用をしやすくするため、ファイルを分けました。
 この演習では、一つのXHTMLファイルでプロジェクトを開き、そこに6分程度の音声データをインポートしてマルチメディア版プロジェクトを完成させることにします。
 教材データにある「bread」フォルダに「お父さんのパン作り」の元データが入っています。

図付1−1 メイン画面「お父さんのパン作り」
図付1−1 メイン画面「お父さんのパン作り」

 spanとpタグ
 教材データの「bread」フォルダをデータドライブのルートにコピーしてください。そして、「bread」フォルダを指定してから、「ファイル」メニューの「プロパティ」を開き、「読み取り専用」にチェックが入っている場合は、チェックを外してください。

図付1−2 フォルダのプロパティでチェックを外す
図付1−2 フォルダのプロパティでチェックを外す

[HINT 14] 確認ダイアログが出て、サブフォルダやすべてファイルの属性を一気に変更することができます。

 「bread.txt」をメモ帳で開いてください。見出しの構成をみると、すべてレベル1の構造で済むことがわかります。次の手順で、このテキストファイルをXHTMLファイルに仕立ててみましょう。

図付1−3 元のテキスト
図付1−3 元のテキスト

(1) bread.txtをタスクバーに落としておき、「bread」フォルダの中にあるdiscinfo.htmlをダブルクリックします。インターネットエクスプローラの「表示」メニューの「ソース」を選んで、discinfo.htmlのソースコードをメモ帳で開きます。

(2) <?xml・・・・>から続くhead部分と<body>までを反転させ、「編集」→「コピー」選択して、メモ帳を閉じます。

図付1−4 discinfo.htmlからコピーする
図付1−4 discinfo.htmlからコピーする

(3) タスクバーにあるメモ帳をクリックして、bread.txtを開きます。先頭部分に「貼り付け」ます。そして、<title>CD Information</title>の部分を、<title>お父さんのパン作り</title>と変更します。そして、テキストの最後に次のタグを付け加えます。

</body>
</html>

(4) このテキストファイルをXHTMLファイルにします。「ファイル」→「上書き保存」を選び、メモ帳を閉じます。データドライブの「bread」フォルダの「bread.txt」ファイルを選択し、「ファイル」→「名前の変更」を選びます。「bread.html」と入力し、「Enter」キーを押します。確認メッセージが出ますので、「はい」を選択します。

図付1−5 XHTMLファイルとして保存する
図付1−5 XHTMLファイルとして保存する

(5) データドライブの「bread」フォルダの「bread.html」をダブルクリックして、ブラウズ画面を開きます。テキスト部分が、見出しも本文もひと続きのべた文に表示されています。まず、見出しにhタグをつけましょう。「表示」→「ソース」でメモ帳を立ち上げます。

図付1−6 べた表示のbread.html
図付1−6 べた表示のbread.html

(6) 見出しに次のようなタグをつけます。

<h1 class="title">お父さんのパン作り</h1>
<h1>お父さんのパン作り(電脳紙芝居の巻)</h1>
たまの休み。あなたもパン作り、してみませんか?
感謝されるの請合い?です。
食パンのでき上がり所要時間は、夏で4時間、冬場ですと5時間程度かかります。

 ほかの見出し、「材料」「道具」などにもh1タグをつけます。

図付1−7 <h>タグを付ける
図付1−7 <h>タグを付ける

(7) そして、本文部分にspanタグをつけます。長い部分があったら、読みやすいよう間にspanタグで区切りを入れます。spanタグはインライン要素ですので、pタグ等のブロック要素で囲むようにしてください。

<h1 align="center" class="title">お父さんのパン作り</h1>
<h1>お父さんのパン作り(電脳紙芝居の巻)</h1>
<p><span> たまの休み。あなたもパン作り、してみませんか?</span>
<span> 感謝されること請合い?です。</span>
<span> 食パンのでき上がり所要時間は、夏で4時間、</span><span>冬場ですと5時間程度かかります。</span></p>

図付1−8 <span>タグを付ける
図付1−8 <span>タグを付ける

 すべてにspanタグがついたら、保存、終了します。

(8) インターネットエクスプローラの「更新」ボタンをクリックします。見出しが大きくなったものの、本文部分の改行が反映されていません。強制改行をさせましょう。brタグを使います。下の例では一部だけしか書いてありませんが、すべてにbrタグを付けてください。

図付1−9 見出しは大きくなったが文章がベタ
図付1−9 見出しは大きくなったが文章がベタ

<h1 class="title">お父さんのパン作り</h1>
<h1>お父さんのパン作り(電脳紙芝居の巻)</h1>
<span> たまの休み。あなたもパン作り、してみませんか?</span><br />
<span> 感謝されるの請合い?です。</span><br />
<span> 食パンのでき上がり所要時間は、夏で4時間、</span><span>冬場ですと5時間程度かかります。</span>

図付1−10 強制改行<br />を付ける
図付1−10 強制改行<br />を付ける

[HINT 15] 見出し直前の改行にはbrタグを付けていませんが、これはhタグで改行されるためです。

 これでテキスト部分のXHTML加工は終了しました。この次は、イメージ画像の貼り付けです。

図付1−11 見出しと文章部分は完成
図付1−11 見出しと文章部分は完成

 XHTMLファイルにイメージを貼りつける
 データドライブの「bread」フォルダの中にある「b_image」フォルダの中に画像が入っています。

(1) 今度はpタグとimgタグを使います。次のようにイメージ画像を貼り付けたい位置に追加します。後でスタイルシートを使って画面中央に表示させますので、<p class="img">としておきます。タスクバーにあるインターネットエクスプローラを開けて、「ソース」を表示します。

<p class="img"><img src="./b_image/bre00.jpg" /></p>

 それぞれの見出しに合った「brexx.jpg」ファイルを指定して、最後まで貼り付けてください。そしてメモ帳を保存、終了します。

図付1−12 イメージを貼り付ける
図付1−12 イメージを貼り付ける

 jpegファイルの前に「./b_image/」というパスを入れています。「bread.html」ファイルから相対的に見て、「b_image」というフォルダの中のbre00.jpgを指定しています。詳しくはHTMLのリファレンスブックなどを参照してください。

(2) インターネットエクスプローラを開けて「更新」ボタンをクリックします。貼り付けたイメージ画像が大きすぎます。幅(width)と高さ(height)を指定しましょう。

図付1−13 イメージが大きすぎる
図付1−13 イメージが大きすぎる

<p class="img"><img src="./b_image/bre00.jpg" width="400" height="300" /></p>

図付1−14 幅と高さを指定する
図付1−14 幅と高さを指定する

 一つ書き換えたら、保存、終了。タスクバーにあるインターネットエクスプローラを開いて「更新」ボタンをクリック。幅と高さのバランスが悪いときは、「ソース」を表示して、メモ帳で数値を変えて調整しましょう。
 書き換えが済んだら、保存、終了。そしてタスクバーにあるインターネットエクスプローラを開き、「更新」ボタンをクリック。
 すべての貼り付け位置でこれを繰り返します。

図付1−15 すべてのイメージを貼り付ける
図付1−15 すべてのイメージを貼り付ける

(3) すべての位置のイメージ画像のサイズ調整が終わったら、ほぼ完成ですが、大事なことが残っています。アクセシブルなXHTMLファイルにするためのalt(オルト)テキストの追加です。

<p class="img"><img src="/b_image/bre00.jpg" width="400" height="300" alt="オーブンから出したばかりの食パン" /></p>

図付1−16 altオルトテキストを書き込む
図付1−16 altオルトテキストを書き込む

 写真をみて、簡略な説明をすべてのイメージ画像につけてゆきます。面倒な作業ですが、メモ帳で書き加え、保存、終了、インターネットエクスプローラで「更新」を繰り返し、マウスポインタをイメージ画像の上に置いてポップ表示させ、説明が適切かどうか確認をしてゆきます。

図付1−17 altテキストの確認
図付1−17 altテキストの確認

これでイメージの貼り付けは終了しました。次はスタイルシートを使って、スタイルを定義します。

 スタイルシート
XHTMLでは、デザイン面の設定はスタイルシートを使います。

(1) まず、XHTMLファイルにスタイルシートを読み込むために次の一文をheadタグ内に記述します。

<link rel="stylesheet" href="bread.css" type="text/css" />

図付1−18 外部スタイルシートの読み込み
図付1−18 外部スタイルシートの読み込み

記入したら、メモ帳を保存、終了します。

(2) 次に、外部スタイルシートを作成します。
 データドライブの「bread」フォルダの中にある「bread.css」ファイルをメモ帳で開きます。

図付1−19 bread.css
図付1−19 bread.css

 このスタイルシートには、初歩的なスタイルがすでに書かれています。以下は各項目の説明です。
 詳細や、さらにスタイルを定義したい場合は、スタイルシートのリファレンスブックなどを参照してください。

 h1.title {text-align: center;}

<h1 class="title"> 〜 </h1>の部分をセンタリングして表示します。
左寄せはleft、センタリングはcenter、右寄せはrightを指定します。

 p.img {text-align: center;}

<p class="img"> 〜 </p>の部分をセンタリングして表示します。

 body {
 margin: 3%;
 background-color: #fffacd;}

<body> 〜 </body>に対して、上下左右に余白を3%ずつ取り、背景の色をRGBで指定しています。

 変更または追記した場合は「上書き保存」をして、メモ帳を閉じてください。そしてタスクバーにあるインターネットエクスプローラを開き、「更新」ボタンをクリックし、確認してください。

図付1−20 スタイルシート適応後
図付1−20 スタイルシート適応後

 これで、XHTMLファイルの加工は終了しました。次はこのファイルを使って、プロジェクトを新規に作ります。

 プロジェクトの新規作成
 ここでは「シンクロされた図書」から、XHTMLファイルの追加、MDFファイルの設定、開いたプロジェクトの確認をします。

(1) Sigtuna3を立ち上げ、ツールバーの「新規作成」ボタンをクリックします。ダイアログが開いたら、「シンクロされた図書」を選び、「OK」ボタンをクリックします。

図付1−21 シンクロされた図書を選ぶ
図付1−21 シンクロされた図書を選ぶ

(2) 「保存先の選択」ダイアログで、タイトルに「お父さんのパン作り」と入力し、「パスの選択」ボタンをクリックします。

(3) 「新しいフォルダの選択/作成」ダイアログが開いたら、データドライブのルートを選択して、「New Folder」ボタンをクリックします。データドライブのルートで「New Folder」が反転表示されていますから、ここへ「bre」と入力し、「OK」ボタンをクリックします。「プロジェクトの保存先」ダイアログに戻りますから「OK」ボタンをクリックします。

図付1−22 breフォルダを作る
図付1−22 breフォルダを作る

(4) 「新しいDAISY 2.02プロジェクトの作成」ダイアログが開きます。「追加するドキュメント」欄の下にある「追加」ボタンをクリックします。「プロジェクトにドキュメントを追加する」ダイアログで、データドライブの「bread」フォルダに作成してあった、「bread.html」を選択し「開く」ボタンをクリックします。

(5) 今度は右側欄の「現在のMDFファイル」の選択です。「daisy_default.mdf」になっていたら、右側の「修正」ボタンをクリックします。他のファイルの場合は、「daisy_default.mdf」を選んで、「選択」ボタンをクリックし、「修正」ボタンをクリックします。
 「このMDFファイルは読み取り専用のファイルですので、変更後は別名で保存してください」のメッセージがでます。「OK」ボタンをクリックします。
 「MDFファイルの修正」ダイアログが表示されたら、区切りに使ったspanタグを追加します。このダイアログの左下、「タグの作成」ボタンをクリックします。

図付1−23 daisy_default.mdfを修正する
図付1−23 daisy_default.mdfを修正する

 「名前」の欄には「span」と記入し、「クラス」は空欄、「説明」には「span_id」、「レベル」は「nothing」を選択します。下のチェック欄では「NCCに含む」「リンクを張る」「ネスティング」のチェックを外します。

図付1−24 span_idの追加
図付1−24 span_idの追加

 確認したら、「タグの保存」をクリックします。説明欄の「span_id」が表示されました。これで「OK」ボタンをクリックします。
 確認のメッセージが出ますから、「はい」をクリックします。「ファイル名変更」のダイアログが開きますから、反転したままで、「bread」と入力し、文字の確定後、「保存」ボタンをクリックします。
 「現在のMDFファイル」欄にはbread.mdfと表示されます。これでこの図書用のMDFファイルが設定されました。
 「終了」ボタンをクリックします。

図付1−25 bread.mdfが設定された
図付1−25 bread.mdfが設定された

(6) プロジェクトが開かれました。メイン画面左側のプロジェクトのツリー構造表示のすべての見出しができているか確認をします。

図付1−26 ツリー構造表示を確認する
図付1−26 ツリー構造表示を確認する

[HINT 16] hタグの間違いなどでNCCアイテムができていなかったりした場合は、このプロジェクトを破棄し、XHTMLファイルを修正の後、もう一度プロジェクトを新規に開いたほうがよいでしょう。

 音声のインポート
 XHTMLファイルを使って「シンクロされた図書」のプロジェクトを作ったら、マイクを使って録音するか、テープ転送か音声ファイルのインポートをします。この演習では、データドライブの「bread」フォルダの中の「b_audio」フォルダにあるWAVEファイルをインポートします。
 WAVEファイルはNCCアイテムの順にファイル名がつけてあります。

(1) インポートする前に、音声ファイルを使ってキャリブレーションをします。エクスプローラーで「breP」を開き、少し長めのWAVEファイルのアイコンをダブルクリックします。マルチメディアプレーヤーが起動しますから、これをタスクバーに落としておきます。

(2) ツールバーのマイクアイコン「録音設定」ボタンをクリックし、「22050kHz」「モノラル」を確認します。他のタブもクリックで開けて確認してください。

図付1−27 データフォーマット設定の確認
図付1−27 データフォーマット設定の確認

(3) 次にツールバーの「キャリブレーション」ボタンをクリックし、録音レベルの調整をします。先にタスクバーに落としてあったマルチメディアプレーヤーを開き音声を再生させます。録音のレベル調整は、メイン画面右のメーター下にある「ミキサーコントロール」ボタンをクリックしてミキサーを出し、WAVEボリュームで「-3dB」以下になるよう調整します。

図付1−28 メディアプレーヤーを使ったキャリブレーション
図付1−28 メディアプレーヤーを使ったキャリブレーション

 調整が終わったら「キャリブレーションの開始」ボタンで10秒間のためし録音をします。
 メッセージを確認して、「閉じる」ボタンをクリックします。ボリュームを閉じ、メディアプレーヤーも終了させておきます。

(4) 最初のNCCアイテム「お父さんのパン作り」のアイコンを選択します。メイン画面からツールバー左から三番目の「外部ソースからのインポート」ボタンをクリックし、「音声ファイルの挿入」をクリックし、「OK」ボタンをクリックします。

図付1−29 インポートダイアログ
図付1−29 インポートダイアログ

 「音声ファイルの挿入」ダイアログが開いたら、データドライブの「bread」フォルダの中の「b_audio」フォルダを開き、「01.wav」を指定し、「次へ」、「次へ」、「終了」とクリックしてファイルを取り込みます。
 1つのアイテムが終わったら、次のNCCアイテム「お父さんのパン作り (電子紙芝居の巻)」を選択し、同様に繰り返します。指定ファイルに自信がないときは、ダイアログにある「再生」ボタンで確認をしてください。

図付1−30 インポートするファイルの確認
図付1−30 インポートするファイルの確認

 編集とイメージのシンクロ
 音声ファイルのインポートが終わったら、音声イベントの編集です。実際には雑音の除去などもありますが、編集済みの音声ファイルですから、最初のテキストイベントと次の音声イベントが対応しているか確認をします。ツールバーの「編集画面」ボタンをクリックして編集画面を開いてください。

(1) 最初のテキストイベントと音声イベントが対応しているか確認。音声イベントの後にテキストイベントがなければ、左のツリー構造表示の次のNCCアイテムを選択します。

(2) 前と同様にテキストイベントとオーディオイベントが対応しているか確認。見出しにあたるテキストに対し音声イベントが2つに分かれてしまっている場合は、2つの音声イベントをドラッグで反転表示させ、メニューバーにある「音声イベント編集」の「音声イベントの結合」をクリックします。確認メッセージで「はい」をクリックして実行します。

図付1−31 見出しは1つの音声イベントに結合
図付1−31 見出しは1つの音声イベントに結合
結合確認メッセージ

(3) 「材料」のところでは、音声イベントの後に、たくさんのテキストイベントがあります。音声イベントの番号をクリックし音声を聞いたあと、イベント番号を覚えておき、音声に対応する下方のテキストイベントを選択し、ツールバーにある「e↑」ボタンで、記憶したイベント番号まで移動させます。

図付1−32 テキストイベントの移動
図付1−32 テキストイベントの移動

(4) すべてのNCCイベントを前の編集要領で繰り返します。

(5) 音声イベントとテキストイベントのシンクロが終わったら、イメージ画像のシンクロです。各NCCアイテムのイメージとシンクロさせたい音声イベントを選択したら、ツールバーの「画像の挿入」ボタンをクリックします。「SMILに画像を挿入」ダイアログが開きますから、データドライブの「bread」フォルダ内の「b_image」フォルダをダブルクリックで開きます。

図付1−33 イメージの下のリンクをクリックします
図付1−33 イメージの下のリンクをクリックします

 「b_image」内にあるJPEGファイルがプレ表示されますから、正方形に切抜きした「popxx.jpg」を選びます。画像の下のリンクをクリックすると確認メッセージが出ますから、「はい」をクリックします。
 画像のイベントは音声イベントの前に挿入されます。

図付1−34 音声イベントの前に入る
図付1−34 音声イベントの前に入る

(6) 各NCCアイテムで必要な個所に同じ要領で画像を挿入します。終わったらツールバーの一番左の「EXIT」ボタンをクリックして編集画面を終了し、メイン画面に戻ります。

 書誌情報の入力
 書誌情報(メタデータ)を入力します。必須項目は必ず入力しましょう。

(1) メイン画面のメニューバー、「オプション」から「NCCのメタデータを修正する」をクリックします。

(2) 「書誌記述メタデータ」が開きます。自動的に記入されている項目もありますが、必須項目で未入力の部分には赤い!マークが付いてます。この赤い!マークの項目は必ず入力します。

図付1−35 書誌記述メタデータ
図付1−35 書誌記述メタデータ」

 dc:creator

ダブルクリックし、Contentの部分に、原本の著者を記入します。
OKボタンを押します。

 dc:date

ダブルクリックし、Contentの部分に、制作したDAISY録音図書を公表した日付を記入します。
スキームが「yyyy-mm-dd」となっていますので、2004-04-01のように記入します。
OKボタンを押します。

 dc:identifier

ダブルクリックし、Contentの部分に、他のDAISY録音図書と区別するようなコードや番号を記入します。
発行する団体で固有の管理番号を付けることができます。例えば、daisy0001等。
OKボタンを押します。

 dc:language

ダブルクリックし、Contentの部分で、Japanese [ja]を選びます。スキームはISO 639のままです。
OKボタンを押します。

 dc:publisher

ダブルクリックし、Contentの部分に、DAISY録音図書の公表者または出版者を記入します。
OKボタンを押します。

(3) すべての必須項目に入力したら、「OK」ボタンを押します。

 プロジェクトの整理と圧縮
 音声イベントの編集、テキストイベントのシンクロ、イメージ画像のシンクロ、メタ情報の入力が終わったら、プロジェクトの整理をします。

(1) メイン画面のツールバー、歯車アイコンの「プロジェクト全体のクリーンアップ」ボタンをクリックします。自動で各SMILの時間情報が更新されます。
 不要な音声ファイルができている場合は、「不要な音声ファイルのクリーンアップ」ダイアログが開きます。

図付1−36 不要な音声ファイルのクリーンアップ
図付1−36 不要な音声ファイルのクリーンアップ

(2) ダイアログが開いたら、「クリーンアップの開始」ボタンをクリックします。確認メッセージが出ますので、「OK」ボタンをクリックして実行します。

図付1−37 ファイル削除の確認メッセージ
図付1−37 ファイル削除の確認メッセージ

 これでクリーンアップが済み、「QAプレーヤー」で確認をします。

(3) 次の段階が「エクスポート」です。CDに書き込んで配布する場合は、プロジェクトをエクスポートします。
 メイン画面のツールバー、稲妻アイコンのついた「エクスポート/変換」ボタンをクリックします。
 エクスポートダイアログが開きますから、「音声の圧縮」を選択します。

図付1−38 音声の圧縮を選ぶ
図付1−38 音声の圧縮を選ぶ

(4) 「プロジェクトのビルド」ダイアログが開きますから、まずデータドライブのルートを選択します。そして「新しいフォルダの作成」ボタンをクリックして「サブフォルダを作成する」ダイアログを開き、「breP」と書き込み「OK」ボタンをクリックします。

図付1−39 brePと書き込む
図付1−39 brePと書き込む

 次にダイアログ右側上でコーデックを選択します。「Uncompressed PCM」を選んでください。

図付1−40 Uncompressed PCMを選択
図付1−40 Uncompressed PCMを選択

(5) 「ビルドの開始」ボタンをクリックすると、もう一度クリーンアップ確認がされます。その後、「エンコード中」というダイアログが開き、NCCアイテムのツリー構造表示で進行状況が表されます。

図付1−41 進行状況の表示
図付1−41 進行状況の表示

(6) Sigtuna3をいったん終了させ、エクスプローラーでデータドライブを開きます。「breP」を開いてみると、「b_image」というフォルダがありません。このエクスポートではシンクロさせたイメージ画像はコピーされていますが、XHTMLファイルに貼り付けたJPEGファイルがXHTMLファイルと別のフォルダに入っている場合はコピーされません。データドライブの「bre」フォルダの中の「b_image」フォルダをを「breP」フォルダにコピーしてください。

 これでできあがりです。Lp PlayerJPでできあがったプロジェクトを確認してみてください。

 CD-Rに書き込む
 CD-Rに書き込んで配布する場合は「discinfo.html」ファイルが必要です。
 データドライブの「bread」フォルダの中に、すでにできている「discinfo.html」ファイルが入っています。ダブルクリックで開き、「表示」メニューの「ソース」を選んで、ソースコードを確認してください。

図付1−42 discinfo.htmlのソースコード
図付1−42 discinfo.htmlのソースコード

自分で製作したプロジェクトの「discinfo.html」ファイルを作る場合は、
<a href="./breP/ncc.html">お父さんのパン作り</a>
の部分の、フォルダ名(breP)とタイトル名(お父さんのパン作り)を変更すれば、そのまま使えます。

データドライブの「bread」フォルダの中にある「discinfo.html」ファイルと、「breP」フォルダを一緒にCD-Rに書き込めば、マルチメディア版DAISY図書の完成です。


戻る / 目次 /  /  /  /  /  /  /  /  /  / 10 / 11 / 12 /  /  / 次へ