■チュートリアル3 「応用編」の説明

チュートリアル3も前のチュートリアルで作成した電子ブックを利用します。説明する内容は下記の通りです。

1.ページ移動コマンドによって任意のページへ移動する
2.ページ内で効果音や音声を利用する
3.ページ自動送り時に各ページ毎の表示時間の指定を行う
4.複数の電子ブックを1つのWINDシステムで管理する
5.インターネットへの公開

1はあるページから任意の他のページへ自由に移動する手段で、問題の回答のページを見たり説明の参照等に利用できて大変便利です。3は適切にページ表示時間を設定すると、読者に本格的な自動読書環境を提供することができます。4は多数の電子ブックを一括管理してメンテナンス性を向上し、BOOK CENTER導入の際にスムーズに移行する手段として有効です。

1.ページ移動コマンド

ページ内からページ移動コマンドを発行することで、任意のページへ移動することができる機能です。使用するのは簡単で、ページ内の画像タグ(<img~>)または文字を囲うタグ(<p>や<span>等)に独自のgo()コマンドを記述をするだけです。これにより読者のクリックとほぼ同時にターゲットとなるページへと移動します。

例えばあるページにページに移動するコマンドを加えるには、前述のタグの中に次の記述をします。

onclick="go(3, 5)"

チュートリアル3で置き換えるページ(下記)には、ロボ犬のイメージにページ移動コマンド(2章の6ページに移動する)が付加されています。メモ帳等で記述を確認するとより理解が深まると思います。


2.効果音・音声の利用

BGMに続き効果音・音声をサポートすることで、WINDはエンターテインメント系の媒体としても有用です。簡単な手続きでこれらの機能を利用することができるので早速実践してみましょう。

<準備>

前のチュートリアルで作成した電子ブックのページを効果音と音声を利用するページに置き換えます。2章にはBGMを設定したので、効果音は1章で試してみましょう。

最初に材料となるページをコピーします。次の順に開いて下さい。

チュートリアル3 > ページ部品

ページ部品フォルダの中には1章に加える新しいファイル002.htmlが入っています。これをチュートリアルで作成した電子ブックにコピーします。次の場所にコピーしますから、コンテキストメニュー(マウスの右クリックで表示)でコピーを選択した後に順にフォルダを開いて下さい。

wind > book > 1

ここでペーストを実行すると既にファイルがあるために警告のダイアログが表示されますが、そのまま上書きコピーして新しいファイルで置きかえて下さい。新しいページは見た目は変わりませんが、効果音と音声を利用するための記述が追加されています。メモ帳等でファイルの中身を見ると違いがわかります。

続いて効果音をコピーします。次の順に開いて下さい。

チュートリアル3 > 効果音部品

効果音部品フォルダの中には効果音となるサウンドデータが入っています。これを次の場所にコピーしますから、コンテキストメニューでコピーを選択した後に順にフォルダを開いて下さい。

wind > book > effect

コピーしたら更に音声をコピーします。次の順に開いて下さい。

チュートリアル3 > 音声部品

音声部品フォルダの中には音声となるサウンドデータが入っています。これも次の場所にコピーしますから、コンテキストメニューでコピーを選択した後に順にフォルダを開いて下さい。

wind > book > voice

コピーしたら準備は完了です。

<設定ファイルの編集>

今回は設定する必要はありません。そのままで効果音と音声機能を利用することができます。ただし、ページには必ず付属するテンプレートを使用して下さい。

(参考)
操作パネルにはサウンドを一括してON/OFFするサウンドボタンがあります。BGM、効果音、音声を再生する場合は、ボタンをクリックして点灯状態にして下さい。また、起動時にON/OFFのどちらを選択するかは、設定ファイルのsound設定値で決定できるようになっています。

ところで一連の手続きによって効果音・音声が使えることは確認できましたが、いったいどうすればページにこのような機能を持たせることができるでしょうか。それを次に説明します。ページはHTMLで記述されていることは前に述べましたが、HTMLではJavaScriptというプログラム言語が使えます。効果音や音声はこのプログラム言語によって利用します。なんだか難しそうに感じられるかもしれませんが、プログラムの知識が無くてもこれから説明する例の通りにすれば誰でも利用できますので、ここは少しがまんして説明を読み進めて下さい。WINDと共に提供するページ用HTMLテンプレートにはJavaScript用のタグが用意されていて、開始・終了の2つのタグの間にプログラムを記述します。

★JavaScriptのタグ
<script>
// ユーザープログラム(ここから) --------------------------------------------------
// JavaScriptによるプログラムを記述します。



// ユーザープログラム(ここまで)--------------------------------------------------
</script>

最初はこういう呪文だと思って、JavaScriptを使用する場合はHTMLページのヘッダー内に記述して下さい。WIND付属のHTMLテンプレートには、効果音や音声を簡単に扱うための処理が用意してありますから、それを呼び出すためのプログラムを追加するだけで済みます。では、実際に先ほど置き換えた1章の2ページで、このタグの間に変化音を再生する効果音用の命令が書いてあるか確認してみましょう。内容は次の通りです。

playEffect("change.mp3", 1);

change.mp3は効果音用のeffectフォルダに収めたサウンドファイルの名前です。後ろの1は効果音を1回だけ再生する指示です。これを2にすると繰り返し再生を続けます。必要な命令はこの1行だけで、別のサウンドファイルを用意すれば、そのファイル名に変えるだけでどんな効果音でも利用できます。記述した命令はページが読み込まれた時にブラウザによって実行されます。この例ではプログラムを実行するための引き金に相当する記述はありませんが、ページ読み込み動作がそれを代行しているわけです。一般的にはマウス操作やタイマー等を利用して、プログラムを実行する手続きをとります。

サウンドが長かったり連続して再生を続ける場合には、途中で止めたいこともあるでしょう。再生を停止するには次のようにします。

playEffect("change.mp3", 0);

数値が0であることに注目して下さい。これをタイマー等を利用して適当なタイミングで出力すれば、時間差で音声を停止できます。

WINDでは便宜上効果音と音声とに分けていますが、ブラウザが処理する方法はどちらも同じです。もしも、このサウンドファイルを音声として利用するならば、サウンドファイルを音声用のvoiceフォルダに入れて、上記の命令を次のようにすれば同じように利用できます。

playVoice("change.mp3", 1);

青字の部分が異なる点です。

1章の2ページには効果音の他に音声も付加しています。犬のイラストの部分に加えた機能ですが、同じJavaScriptでありながら記述方法が若干違います。HTMLのタグの中に直接記述する場合は、前述のようなJavaScriptのタグは書きません。命令を記述するためのHTMLのタグの場所(bodyタグ~の中)は犬のイラストのイメージタグ<img~>の中です。マウスカーソルが入った時に実行するアクションなので次のようにします。

onmouseover="playVoice('dog.mp3', 1)"

後ろの1は効果音の時と同様に音声を1回だけ再生する指示です。これを2にすると繰り返し再生を続けます。再生中に停止する命令も効果音の場合と同様です。タグ内に記述する際にはファイル名を囲っているコーテーション(')に注意して下さい。既にダブルコーテーション(")はタグ内で使われているため、重複するダブルコーテーションは使えないのです。

例ではポインタが離れた時に音声が停止します。この音声自体が短いため、試すにはすぐにポインタをイメージ外に出して下さい。あらかじめ1回再生から連続再生に変更しておくと違いがはっきりします。これはマウスカーソルを離した時に実行するアクションなので次のようにします。

onmouseout="playVoice('dog.mp3', 0)"

青字の部分がポインタが離れた時に実行される命令です。また、前記の2つの代わりに次のような記述にするとクリックしたら鳴くようにできます。

onclick="playVoice('dog.mp3', 1)"

青字の部分が異なる点です。例ではそこに仕掛けがあることを明示するために、マウスカーソルが重なるとポインタを指型に変更するよう操作しています。これも同じイメージタグの中に次のように記述してあります。

style="cursor: pointer"

マウスカーソルの形状変更は色々な場面で使えるので覚えておくと便利です。pointerの部分を変えれば他の形状に変更することもできます。WINDに用意された効果音や音声の命令は、他のJavaScriptによるプログラムと併用する形で様々な応用ができますので、JavaScript関連の書籍等を参考にして活用して下さい。



3.個別のページ表示時間指定

WINDでは自動ページ送りを行う場合の基本ページ送り時間を、設定ファイルの中で指定しています。しかし、これは一律でページ送りを行うもので、ページ毎に異なるボリュームに対しては十分な対応ができません。快適な自動読書環境を実現するためには、ページ毎に異なる表示時間を設定する必要があるのです。WINDは個別のページに時間を設定することで、柔軟な表示時間制御を実現しました。WINDではこれをIPC(Intelligent Page Control)機能と呼んでます。

WINDでは管理を容易に行うため、専用のタイムテーブルファイルを用意しています。ファイル名はipc.jsで、設定ファイルと同じ次の場所にあります。

wind > book

ipc.jsは設定ファイルと同じテキストファイルのため編集も同じようにできます。ファイルを開くと1章の1ページ目が記述されています。これをコピー&ペーストによって必要なページ数分だけ用意し、中の記述を変更していくわけです。設定形式は次の通りです。記述はこれまで同様半角数字を使用して下さい。

pTime[章番号][ページ番号] = "表示時間";

左辺はページを特定するための設定で、章番号とページ番号を指定します。右辺はページ表示時間(秒数)を記入します。例えば記載された初期値では1章の1ページを15秒に設定しています。元々用意されている表紙は短い表示で構わないので、15秒だけ表示するようにしているわけです。更に3章の5ページを60秒にするならば、次のように記述します。なお、基本設定の時間(pageTime)で構わないページは記述の必要はありません。

pTime[1][1] = "15";
pTime[3][5] = "60";

設定値は必ずプラスの整数値にします。また、WINDの最小表示時間は15秒ですから、条件を満たさない設定を行った場合には自動調整されます。

(ご注意)
読者が操作パネルの速度インジケーター(ボタン)でページ送り速度を変更した場合、表示時間にも影響が及びます。その割合は標準に対して50(最小)~150%(最大)となります。もしページ表示時間が30秒に設定されていたとすると、最も遅い設定では45秒、最も速い設定では15秒になります。そのため、表示時間をあまり短く設定することはお勧めできません。

個別にページ表示時間を設定する場合は、あらかじめ普通に読んだ時にどれ位の時間が必要なのかチェックし、平均的な値を書き出しておきます。これを全てのページについて行います。そして、得られたデータを総合して自動ページ送りの基本時間を設定します。その際、読書時間を積算してページ数で割って平均値を得るよりも、同程度の時間が最も多いページ数を基本時間にした方がIPCの設定を簡略化できます。基本時間が決まったら、書き出しておいたページの時間リストに従って、基本時間とは異なるページだけをIPC設定ファイルに記述します。


4.複数の電子ブックを1つのWINDシステムで管理

WINDは他のAD-BOOKシリーズ同様に、書庫を構築するBOOK CENTERに対応しています。これにより、WINDは1つのシステムで複数の電子ブックデータを閲覧できます。

これまで説明してきたように、ユーザーの作成したコンテンツはwindフォルダ内のbookフォルダに入っています。これを1冊目のブックデータとすると、2冊目としてbook2というフォルダ名のブックデータを用意して、同じ場所にコピーします。そして起動ファイルとなるstart.htmlをコピーして、例えばstart2.html等とします。するとwindフォルダの中身は右図のようになります。改めて説明するまでもありませんが、systemフォルダにはWINDのシステムが一式入っています。

start2.htmlをメモ帳やエディタで開くと最初の方に次のような記述があります。

dtf = "book";     //起動する電子ブックのフォルダ名

このbookはstart.htmlから起動する際のブックデータが入っているフォルダ名です。今はまだコピーしたままなのでstart.htmlと同じ内容です。これをbook2に変更して保存すれば準備は完了です。早速start2.htmlをダブルクリックして開始プラットフォームを開いてみましょう。この変更によりSTARTボタンをクリックして起動するのはbook2の電子ブックになります。更にbook3以降も同様にして加えていけば、1つのWINDシステムに対していくらでもブック数を増やすことができます。HTMLの知識があれば、メニューページを作って個々の起動ファイルを選択するようにすれば、複数の電子ブックをスマートに管理できるようになります。この仕組みを応用したのがBOOK CENTERなのです。


5.インターネットへの公開

インターネットにWINDを公開する場合は設定ファイルのnetの値をに変更して下さい。ローカルでのスクロール制限をネット上では外すことができます。

net = '1';

ホームページの一部にWINDを組み込むためには、windフォルダを丸ごとサイトの適当なディレクトリにアップロードします。そして、リンク元となるページからWINDのプラットフォーム(開始ページ)であるstart.htmlへリンクを張ります。

WINDへのリンク元には、WINDへリンクするためのタグを記述します。例えば、リンク元と同じディレクトリにwindフォルダをアップロードした場合、リンク元のタグの記述は次のようになります。

<a href="wind/start.html">マイブック</a>

この例ではマイブックと書かれた部分をクリックすると、WINDのプラットフォームを開くようにしています。このように相対アドレスで記述する利点は、インターネットでの公開に限らず、ローカルのパソコン環境でもサイト構造の一部にWINDを組み込める点です。例えばCD等に収録するマニュアル等の一部にROOTSを利用する用途を考えた時、リンク元との関係はまったく同じ形で扱うことができるのです。

インターネットで公開する場合には、https://(暗号化通信をサポートしないサイトはhttp://)から始まる絶対アドレスでリンク指定することもできます。例えばwindフォルダをサイトのトップディレクトリにあるsampleフォルダの直下にアップロードした場合、WINDのプラットフォームを開くには次のように記述します。

<a href="http://あなたのホームページアドレス/sample/wind/start.html">マイブック</a>

(参考)
ホームページでの利用において、windフォルダ内にある全てのフォルダとファイルをサイトのトップディレクトリ(サイトの一番上の部分で通常index.htmlを設置する場所)に置き、start.htmlをindex.htmlに名前を書き換えれば、WIND自身をそのままホームページとして利用することができます。その場合、あなたのホームページアドレスにアクセスすると、次のようなWINDのプラットフォームが表示されます。

(ご注意)
インターネット上にはWINDに関わらず、重要なコンテンツは公開しないことをお勧めします。不特定多数の閲覧者に対して情報を秘匿することは困難であり、公開自体がリスクのあることをご承知おき下さい。