クイックスタート | StoryBookReader

クイックスタート

ここでは新規にスライドショーを作成し、公開するまでを実践していきます。これから作成していくフォルダ名、ファイル名などは自由ですが、パスを指定する際に注意が必要です。

1. sbrフォルダを開きます。

sbrフォルダ内の状態

2. 素材を用意

スライドショーに使うJPEGファイルを2つ、MP3ファイルを1つを用意します。用意できない場合は以下をクリックしてダウンロード後、解凍してお使いください。

スライドショーに使う素材はフォルダにまとめておくのが好ましいので、ここでは新規に lessonフォルダを作成し、その中に先ほど用意したファイルをコピーします。コピーしたファイル名は lesson1.jpg, lesson2.jpg, lesson.mp3 とします。

sbrフォルダ内の状態

3. ブックファイルの作成

付属の temp_min.xml を複製し、ファイル名を lesson.xml とします。

sbrフォルダ内の状態

4. ブックファイルの編集

先ほど作成した lesson.xml をあなたの使い慣れたテキストエディタで開きます。以下ように修正し、保存します。

<?xml version="1.0" encoding="Shift_JIS"?>
<book version="1.0">

  <page title="はじめてのページ">
    <image src="lesson/lesson1.jpg" />
    <text><![CDATA[

    こんにちは世界！

    ]]></text>
  </page>

</book>

5. HTMLファイルの作成

付属の temp.html を複製し、ファイル名を lesson.html とします。

sbrフォルダ内の状態

6. HTMLファイルの編集

lesson.xml を編集したときと同じように、テキストエディタで lesson.html を開きます。先のステップで編集するので、ここでは開いたままにしておきます。

7. タグの作成

タグ作成ページを開いて以下のようにフォームに入力し、「作成」ボタンをクリックして、テキストエリアに出力された文字列をすべて選択してコピーします。

storybookreader.swfへのパス: storybookreader.swf
ブックファイルへのパス: lesson.xml
ブックファイルの文字コード: SJIS
ブックの表示領域: 横480px、縦300px

8. HTMLファイルにタグをペースト

テキストエディタで開いている lesson.html のここにペーストと書かれている位置に、先ほどタグ作成でコピーした文字列をペーストして保存します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>StoryBookReader</title>
</head>
<body>
<p>

ここにペースト

</p>
</body>
</html>

9. WEBブラウザで確認

lesson.html をWEBブラウザで表示します。スライドショー内に用意した画像が表示されていれば成功です。操作パネルのボタンをクリックして、ページの文章やタイトルを確認しましょう。

トラブルシューティング

この時点でスライドショーが正しく表示されないときは以下の項目を確認してください。

Flash Playerがインストールされているか
画像ファイルの形式、位置やパス
ブックファイルの記述
タグ作成での入力に誤りがないか
作成したHTMLタグを入れ込んだ位置に誤りがないか

イメージやサウンドがうまく再生されない場合はスライドショーをクリックし、半角入力にしてから[0]キーを押してください。表示されたアラートにエラーが表示されていたらファイルの位置やパスをもう一度よく調べてください。

10. 修正と再確認

テキストエディタで lesson.xml を開き、<page>...</page> を選択してコピーし、すぐ下の位置にペーストします。今度は MP3を再生したいので、以下のように修正し、保存します。次に lesson.html を再度WEBブラウザで表示 (再読込) します。ページが増えているか、 MP3が再生されるかを確認しましょう。

<?xml version="1.0" encoding="Shift_JIS"?>
<book version="1.0">

  <page title="はじめてのページ">
    <image src="lesson/lesson1.jpg" />
    <text><![CDATA[

    こんにちは世界！

    ]]></text>
  </page>

  <page title="ページの追加">
    <image src="lesson/lesson2.jpg" />
    <sound src="lesson/lesson.mp3" />
    <text><![CDATA[

    ページはこのように追加します。

    ]]></text>
  </page>

</book>

トラブルシューティング

再読込を繰り返してもページが増えない場合、WEBブラウザに古いデータのキャッシュが残っている可能性があります。その際はWEBブラウザを一度終了し、あらためて lesson.html を開いてください。

11. 公開

今回作成したスライドショーを公開するのに必要なものは以下になります。

濃い部分が必要なもの

sbrフォルダ内の状態

これらをあなたのホームページにアップロードし、WEBブラウザで確認します。問題がなければ公開は成功です。お疲れ様でした。

Tips

あいにくホームページがない、または一部の人にしか見せたくない場合は、 CD-Rなどにこれらを書き込んでプレゼントするという手段があります。

12. 最後に

新たにスライドショーを作成する際は、リファレンスの注意事項に必ず目を通してください。より高度な設定方法についてもリファレンスを参考にしてください。公開前には必ず、ブックファイルの記述やファイルまでのパスに誤りがないか確認しましょう。