■準備
WINDには始めから次のページ素材が入っています。
●第0章(章00)として表紙に相当するHTMLページが1ページ
●第1章(章01)として1ページに相当する画像ページとHTMLページ(いずれかを使用)
●第2章(章02)として1ページに相当する画像ページとHTMLページ(いずれかを使用)
試しにこのキットの主体であるwindフォルダ(キットのadbWindフォルダ内)を開き、start.htmlファイルをダブルクリックして下さい。デフォルトのブラウザが立ち上がりWINDの開始プラットフォームが表示されます。そこでパネル下部のスタートボタンをクリックすればWINDが起動します。用意されたひな形だけでもWINDは動作していることがわかります。
チュートリアルで使用するWINDのひな形(母体)として、本キットに含まれるwindフォルダを使用します。最初にハードディスク内の適当な作業スペースにwindフォルダごとコピーして下さい。チュートリアルでは、その中に含まれるユーザー部品(ファイル)を置き変えたり追加して構成を作り直します。本番のオリジナル電子ブック作成の作業も同様で、常に電子ブック制作のひな形としてwindフォルダを使用しますので、元のフォルダを直接利用せずに必ずコピーを使用するようにして下さい。
(参考)
WINDでは電子ブック作成にwindフォルダを利用します。制作プロセスとして、まず電子ブックの素材となるページファイルを用意します。ページファイルは様々な方法で作成することができ、例えば画像であればスキャナで取り込んだり、グラフィックソフトで作画するなどの手段を使います。HTMLならホームページ作成ソフトで制作したり、各種ソフトウェアのHTML書き出し機能を利用したりします。次にWINDにはベースとなるひな形が既に存在しますから、その中にページファイルや付随するデータをコピーし、最後に設定ファイルを編集して電子ブックを完成させます。
1.制作する電子ブックの構成
チュートリアルで制作する電子ブックは次のような構成になっています。各章はいずれもページ総数が偶数ですが、実際にユーザーが電子ブックを制作する場合は偶数でも奇数でもかまいません。チュートリアルの画像ページは下部にAD-BOOKのロゴが入っていて、HTMLのページと区別がつきます。
0章(フォルダ 00)・・・画像ファイルのページが4ページ
1章(フォルダ 01)・・・HTMLファイルのページが2ページ
2章(フォルダ 02)・・・画像ファイルとHTMLファイルが混在したページが6ページ(1、2、5、6ページが画像で3、4ページがHTML)
※3章(フォルダ 03)・・・HTMLファイルのページが1ページ(追加の応用)
チュートリアルフォルダの中のページ部品フォルダを開くと、00~02、更に追加応用に03という名前で章ごとに分類されたフォルダが入っています。そして、それぞれの章フォルダの中に、上記のページファイルが入っています。 ページファイルは2種類あり、画像ファイルの場合は拡張子が.jpg、HTMLファイルの場合は拡張子が.htmlです。いずれもブラウザで開くことができるので、あらかじめどんなページなのか確認しておくと良いでしょう。画像ファイルはグラフィックソフト、HTMLファイルはエディタ(Windowsのメモ帳等の文書作成・編集ツール)やホームページ作成ソフトで見たり加工することができます。 参考までにお話しすると、電子ブックの素材として一番簡単なのは画像データを採用することです。既存の印刷物や手書きのドキュメントをスキャナでデジタル化したり、スクリーンショットやソフトウェアから画像ファイルに書き出す等、素材を用意する方法は色々あります。WINDの本来の使命は印刷物(紙媒体)から電子媒体への移行ですから、身近な素材を使って何でも電子ブックにしてしまいましょう。 話を元に戻すと、チュートリアルで作る電子ブックのフォルダとファイルの関係は右図のようになります。手順に従って作業し、完成後に正しくファイルが収められているか確認して下さい。上位の00~02の章フォルダは、最終的にユーザーのブックデータフォルダとなるbookフォルダ内に収まります。 |
![]() |
2.電子ブックの制作-1 (電子ブックを構成するためのページをフォルダに入れる)
WINDのページには拡張子を除いて次のファイル名の規則があります。拡張子は画像なら.jpg、HTMLなら.htmlです。
●ファイル名は001から999までの数(1つの章に収められるページ数は最大999ページまで)
●3ケタの数字で、ケタが少ない場合は上位を0で埋める
例えば15ページなら015の3ケタの名前になります。少し面倒なように感じるかもしれませんが、こうするとフォルダ内を表示した時に確実に番号順に並べることができるため、大量にページがある場合に管理しやすいのです。
同様に各章のフォルダ名には次の規則があります。
●フォルダ名は00から20までの数(本編部分は最大20章まで)
●2ケタの数字で、ケタが少ない場合は上位を0で埋める
<第0章(表紙等を含む本章より前の部分)の準備>
まず、これから作る電子ブックの材料となるページが入っているフォルダに移動します。コピーの方法は色々ありますが、1つの方法としてコピー元となるフォルダ(またはファイル)を右クリックして開くコンテキストメニューの一覧からコピーを選び、コピー先に移動して同じく右クリックしてメニューの貼り付け(ペースト)を選びます。
それでは次の順にフォルダを開いて下さい。
チュートリアル → ページ部品 → 0章(00)の部品
0章の部品の中を見ると、フォルダ名00の章フォルダがあります。上図を見ればわかるように中身は全て画像のページです。このフォルダを丸ごとこれから作る電子ブック内にコピーします。コピー先はひな形となるwindフォルダ(実際にはひな形をあらかじめコピーしたもの)内にある次の場所です。順にフォルダを開いて下さい。
wind → book
コピーをしようとすると警告のダイアログが表示されるはずです。なぜならWINDのひな形にはあらかじめ仮のデータとして0章が用意されているからです。そのため上書きしても良いか確認が出るというわけです。ここはそのまま上書きコピーして新しいファイルで置き換えて下さい。これでbookフォルダ内に0章のフォルダ00が準備できました。
<第1章の準備>
作業は0章の時と全く同じです。次の順に開いて下さい。
チュートリアル → ページ部品 → 1章(01)の部品
1章の部品の中を見ると、0章の時と同じような形でフォルダ名01の章フォルダがあります。上図を見ればわかるように中身は全てHTMLのページです。このフォルダを作成中の電子ブック内にコピーして下さい。コピー先は次の場所で0章の時と同じです。
wind → book
この時、警告のダイアログが表示されるはずです。なぜなら1章もあらかじめ仮のデータが収められているからです。そのまま上書きコピーして新しいファイルで置き換えて下さい。
これでbookフォルダ内に1章のフォルダ01が準備できました。
(ご注意)
1章の2ページにはイラストが配置されています。そのため章フォルダ01の中にはimageというフォルダがあり、そこにイラストファイルが入っています。WINDではHTMLのページファイルに使われている部品を、同じフォルダ内に用意したimageフォルダに入れて管理しているのです。通常はイラストファイルにJPEGの画像を使用しますが、ここではGIFと呼ばれるセルフアニメーションファイルを使います。動きのある画像を実現できるもので、効果的に使うと面白い表現ができます。
(参考)
一般的に画像等の部品を配置したページを作る場合、ページと同じフォルダ内に部品用のフォルダを作り、その中に部品を収めて管理するとメンテナンスが楽になります。
<第2章の準備>
作業は同じです。次の順にフォルダを開いて下さい。
チュートリアル → ページ部品 → 2章(02)の部品
2章の部品の中を見ると、これまでと同じようにフォルダ名02の章フォルダがあります。この章はページに画像とHTMLの両方を使っています。フォルダの中身を見ればわかりますが、001から画像とHTMLの区別無く通し番号で並んでいます。ただし、拡張子はそれぞれのデータ形式で異なることに注意して下さい。WINDでは画像ページもHTMLページもページとしては同じ扱いなのです。それでは、これまでと同様に作成中の電子ブック内にコピーして下さい。場所も同じです。
wind → book
今回もコピー時に警告が出ますが、これまで同様に続けて下さい。なお、3章以降は用意されていないため、新しく章フォルダを作る必要があります。名前は半角数字で3章なら03、4章なら04と言った具合です。
これでbookフォルダ内に2章のフォルダ02が準備できました。
第1章~第2章までのコピー作業が済めばデータの準備は完了です。新しく作成する電子ブックのwindフォルダ内には、bookという名のフォルダで電子ブックのコンテンツとなる00~02の3章分のページが準備できたことになります。改めて上の図と同じ配置になっているか確認して下さい。実際にユーザーが電子ブックを作成する際も、このようにまず別の場所で章毎のページを準備し、整ったら電子ブックのひな形にコピーするという方法をとるようにしましょう。こうすることで、万一電子ブック内での作業中にファイルを消去してしまっても、やり直しができて安心というわけです。
3.電子ブックの制作-2 (設定ファイルを編集する)
WINDで電子ブックを作成する際に重要なのが設定ファイルを編集する作業です。この設定ファイルは1冊の電子ブックに必ず1つ存在します。編集といっても数値を書き換えるのが中心ですから難しくはありません。設定ファイルはテキスト形式のため、Windowsに付属するメモ帳でも編集できます。また、フリーウェアや市販のエディタを使うこともできます。bookの設定ファイルは次の場所にあります。
wind → book
ファイル名はbookSetting.jsです。拡張子が.txtでは無く.jsとなっていることに注意して下さい。メモ帳で編集する場合は、ファイルダイアログでファイルの種類を「全てのファイル」に指定すれば開けます。保存の際に.txtになってしまったら、正しい名前.jsに訂正して下さい。
WINDの設定ファイルはシンプルなものです。いくつかの動作設定と主・副タイトル等の記入をすれば完了します。とりあえず今回の電子ブックが使えるように最小限の設定をしてみましょう。
●各章のページ数
今回作る電子ブックの構成をもう一度確認すると、
1章(フォルダ 00)・・・画像ファイルのページが4ページ
2章(フォルダ 01)・・・HTMLファイルのページが2ページ
3章(フォルダ 02)・・・画像ファイルとHTMLファイルが混在したページが6ページ(1、2、5、6ページが画像で3、4ページがHTML)
となっています。
設定ファイルを上から順に見ていくと、各章(chapter)のページ数という項目があり、ずらりと式が並んでいます。1行目の式はchap[0] = 1;と書いてあります。この式でchap[0]の[ ]内の数字は章番号を意味しています。00~09までの章フォルダと違い、既に設定ファイルに用意された数のため、簡略化して1桁の0~9で表しているのです。数字が0なら0章、1なら1章というわけです。=の右側の数字は各章のページ数です。あらかじめ用意されている数値を次のように書き変えます。
chap[0] = '4';
chap[1] = '2';
chap[2] = '6';
・・・
(ご注意)
数値を囲むコーテーション(')や後ろに付いているセミコロン(;)は絶対に消さないで下さい。式は半角の英数字を使い後述する主・副タイトル名以外は全角の文字を使ってはいけません。WINDで扱える最大章数は21章(初章00を含む)までです。
●各章の主タイトル
主タイトルはメインウインドウ上部にある情報表示部に表示するための章を代表する名前です。NAVIパネルに表示する目次の主タイトルとしても使われます。主タイトルの設定場所は各章のページ数設定の下にある、主(Main)タイトルという項目です。今回のタイトルは仮のものなので次のように記入して下さい。
titleM[0] = '第0章';
titleM[1] = '第1章';
titleM[2] = '第2章';
・・・
これもあらかじめ用意された内容を書き換えるだけです。文字は原則として全角をお使い下さい。半角も使えますが記号類は注意が必要です。ダブルコーテーションやコーテーション等のJavaScriptの予約文字を使うとブックビューワーは正常に動作できません。
(参考)
半角のダブルコーテーション(")やコーテーション(')等をタイトルに使用する場合は、頭に半角の\記号をつけて「\"」や「\'」の形で使用します。この\記号のことをエスケープ文字と呼びます。
●各章の副タイトル
WINDでは複数の副タイトル(1章につき最大20個まで)を記述できるため、分かりやすいように設定場所を前記の主タイトルとセットにして配置しました。各章の主タイトルのすぐ下にある副(Sub)タイトルという項目がそれです。主タイトルと違い副タイトルは章の中に複数あるのが普通で、どこからそのページが始まるのか指定します。記述は副タイトルと始まるページ番号をセットにして、半角記号の,(カンマ)を間に入れて両者を分けます。ここでは、主タイトル同様に仮の設定として次のように記入して下さい。必要のない副タイトルは何も記入せず、コーテーション(')が2つ並んだ状態のまま(中の文字が無いので空白を意味します)にしておきます。注意点として、編集するのは=の右側だけで、左側はそのまま使います。
titleM[0] = '第0章'; の副タイトル書き換え
titleS[0][1] = '画像のページ,1';
・・・
titleM[1] = '第1章'; の副タイトル書き換え
titleS[1][1] = 'HTMLのページ,1';
・・・
titleM[2] = '第2章'; の副タイトル書き換え
titleS[2][1] = '混在のページ(画像),1';
titleS[2][2] = '混在のページ(HTML),3';
titleS[2][3] = '混在のページ(画像),5';
・・・
●ブック名
説明が後になりましたが、設定ファイルの最初の項目にブック名があります。開始プラットフォームに表示されるので、読む前に電子ブックのタイトル名がわかります。初期設定はユーザーブックとなっていますから、変更しなければこれがブック名になります。それでは次のように変更してみましょう。
bookName = '練習ブック';
以上により基本的な設定は終わりました。設定ファイルを上書き保存して下さい。メモ帳を利用した場合は保存したファイルの拡張子が.txtとなっているかもしれません。繰り返しますが設定ファイルの正しいファイル名はbookSetting.jsなので、もしも違っていたら訂正して下さい。
●ページタイプ
WINDでは画像ページとHTMLの両方が使えると最初に説明しました。今回制作する「練習ブック」には両方のページが混在しています。これをWINDが正しく判別できるようにしなければなりません。そのため、まずは基本となるページタイプを設定します。「練習ブック」の構成を見ると、画像ページの方がHTMLページより多く使われています。従って基本となるページタイプは画像とします。一般的に電子ブックを制作する場合、どちらか一方が圧倒的に多いのが普通です。そのためWINDではまず基本となるページタイプを定め、それ以外の小数派を個別に設定する方法をとります。それでは基本ページタイプを次のように変更してみましょう。
pageType = '1';
1は画像ページを、2はHTMLページを基本にします。基本ページの設定が済んだら、次はこれとは違うタイプ(今回はHTML)の個別ページを登録します。設定を行うのはpt.jsファイルです。bookSetting.jsと同じ場所にあるので、エディタ等で開いて下さい。設定ファイルを見ると、個別にページファイルを設定するために、左辺で章とページを、右辺でページタイプを指定します。今回はHTMLである2が設定値になります。再度ブック構成を見ると、1章に2ページ(1、2ページ)、2章に2ページ(3、4ページ)のHTMLページがあるので全てを記述します。
pType[1][1] = '2';
pType[1][2] = '2';
pType[2][3] = '2';
pType[2][4] = '2';
以上により基本的な設定は終わりました。設定ファイルを上書き保存して下さい。
4.起動確認
それではチュートリアルの最初(準備)で確認したように、WINDを再び起動して動作や表示を確認してみましょう。コピーしたページ類は正しく表示されているでしょうか。もし起動しなかったり動作がおかしいようなら設定ファイルのミスを疑って下さい。文末のセミコロンが抜けていたり、半角の英数字が全角になっていたりと、うっかりミスはよくあることなのでご注意下さい。
5.簡単な応用
これまでの練習で作業の概略はご理解頂けたと思います。そこで、簡単な応用として更に3章目を加えてみます。3章は日記用のひな形のページです。ページ部品フォルダには3章の部品と言うフォルダがあります。この中にはHTMLのページが1ページ入っています。また、imageフォルダには日記に使う画像が入っています。これらを制作した電子ブックの中に03フォルダごとコピーして下さい。詳しくは説明しませんので、ご自身で考えて作業を行なって下さい。設定ファイルの編集も必要になります。3章の主タイトルは仮に「日記」としておきましょう。副タイトルは3章の1ページとして、「今日の日記」とします。もちろん自由に名前を付けて頂いて構いません。完成したらテストしてみましょう。本の最後にうまく日記のページが表示されたでしょうか。このページはエディタでボディタグ内に日記の文章を記入できます。ファイルをコピーして次々に足していけば、オリジナルの日記帳が出来上がります。練習に使用した余分なページを削除したり表紙を加える等すれば、AD-BOOK "WIND"の実用的な例としても活用頂けます。
次のステップへ
このチュートリアルでは基本的な電子ブックの作り方を体験頂きました。後は同じような作業でページを他の素材で置き換えたりページ数を増減したりして、ユーザー自身の電子ブックを作り上げていけば良いのです。
WINDは設定ファイルを編集して機能や動作を変更することができます。チュートリアル2ではWINDのその他の設定について説明すると共に、応用としてBGMの使い方を学びます。