29．AD-BOOK再び

■AD-BOOK再び

長期間に渡ってWEB技術から離れていましたが、当サイトの「SITE-2」でマイクロコンピューター用ソフトの学習と制作を進めて来たことで、WEBソフトについても見直すきっかけを得ました。改めて最新技術であるHTML5とそれを取り巻くCSSやJavascriptについて理解を深めることとし、その手始めとしてAD-BOOKのHTML5対応に着手しました。当初は最終版のAD-BOOK「ROOTS」をバージョンアップするつもりでしたが、従来のシステムでは色々と課題があることが分かり、よりシンプルな「ROOTSフリー版」をベースにして新たなAD-BOOKを開発することに方針を転換しました。

開発に当たって一番重要な要素はHTML5への完全対応です。従来のテーブルを元にしたデザインを捨てて、HTML5で勧告されているようにDIVタグで全体を構築し、CSSでレイアウト等の詳細を決定する形に改めます。タグも廃止されたものは使用を避け、かつて特定のブラウザが勝手に採用していた独自機能も使わないようにします。Javascriptにおいても若干変遷があるため、部分的には改訂しなければなりません。全体として相当な大変更になるため、これまでとは異なるAD-BOOKシリーズの新版を目指しました。後述しますが、これまでに無い機能も新たに搭載します。

新開発の電子ブックはAD-BOOK WINDと名付けました（以下、WINDと略称）。ただ読むだけの電子書籍では無く、新たな風を呼び込む電子書籍プラットフォームとの思いを込めました。より実用性を重視するため、実現できる最大章数とページ数も見直しています。これまでは最大9999章、各章の最大ページ数を9999ページとしていましたが、WINDでは最大99章、各章の最大ページ数を999ページとしています。以前の数値は元々理論的なもので、実際に実現するとなると各所で不備が出てくることが予想されました。そもそも、これほど大規模な電子書籍など現実味がありません。そのため、想定される上限として制限をかけたと言うのが本音です。百科事典でも作らない限りは、十分過ぎる上限であると考えています。

WINDではAD-BOOKシリーズの最大の特長であるHTMLと画像の両方のページを扱えます。ROOTSライセンス版のような自動判別機能は搭載しないため、どちらか一方は例外的に読み込むように設定ファイルに記述します。画像をHTMLに内包するようにすれば、全てのページをHTML化できるので、例外ページが多い場合はそのようにした方が合理的だと思われます。HTMLが使えると言うことは、様々なアクションやインターラクティブな要素をページに盛り込むことができます。アイデア次第でとても面白い電子ブックが実現できることでしょう。

以前のAD-BOOKシリーズでは全体をフレーム構造にして、コントローラーやページ（コンテンツ）等をそれぞれのフレームに書き出して実現していました。しかし、HTML5ではフレームタグが廃止され、原則として使用を禁止しています。ブラウザ自体は互換性維持のため今でもサポートしていますが、将来的にはサポートを外される可能性もあり、長い目で見れば使わない方が安全です。そこで、タグとCSSでフレームのような骨格を作り、ページ表示は代替手段としてインラインフレームを使います。よくホームページの中に地図や他のサイトのページを表示する例を見かけますが、これらはインラインフレームを使っています。同じような方法でWINDでもページ表示と切り替えを実現するわけです。ただ、インラインフレームではセキュリティ上の理由で色々な制限がかけられています。そのため、これまでのAD-BOOKシリーズで実現していたページとコントローラーとの連携等はできなくなりました。回避方法はあるようですが、今の所は実装は困難です。

技術的な話になりますが、この連携ができないことで大きな問題に直面しました。ナビ機能は正にコントローラーフレームとページフレームとの間で情報をやりとりするため、別の方法を考えなくてはならなくなったのです。元々新たなウインドウを開いて電子ブックを表示する方法は変更を余儀なくされていたので、タブでの表示に改めるついでにブックレイアウトを変更し、ページエリアの左にナビの中の目次だけを取り出して表示するように改めました。他の操作機能はコントローラーに含むことで対応します。全体として大きな表示エリアが必要になることから、フルハイビジョン相当の1920ピクセル幅のワイド画面での使用を前提としています。今やこの画面サイズはPCでは当たり前になっているので、さほど問題にはならないでしょう。この変更によって目次が常に参照できるようになり、目次の項目をクリックするだけで目的のページに移動できるため、従来よりも格段に使いやすいものになります。

従来、サウンド機能は特別なタグをページに書き出して実現していましたが、HTML5ではもちろん従来のタグは使えません。なぜならブラウザによって個々に独自に実装していたからです。しかし、幸いなことにHTML5では標準機能として新たなタグが追加され、Javascriptで細かなコントロールも可能になりました。従来よりも簡単かつ実用的に操作できるため、もちろんBGMを鳴らすために利用することにします。ただし、効果音等はページと連携する必要があって今は使えません（正確にはページ内で音を鳴らせても、コントローラーでのON/OFF制御はできない）。将来的にはこの問題も解決したいものです。

WINDの特長的機能として、章のサブタイトルを自由にページと関連付けられるようになります。従来は各章に１つしかサブタイトルを付けられず、実質的に章タイトルの予備のようにしか扱えませんでした。WINDでは各章で99個までのサブタイトルを登録できます（設定ファイルにあらかじめ用意してあるのは20個まで）。冊子では章の中に複数の項目があるのが普通で、これを忠実に再現できるわけです。画面左の目次には項目まで表示されるため、クリック１つで直接項目移動が可能です。実際にこの機能を体験すれば、その便利さを実感できると思います。

実を言うと、WINDはプロトタイプが既に完成しています。現在、このSITE-1のWIND版を準備中で、いずれ近い将来公開できると思います。下図はCOSMOLIGHTが販売中の電子書籍「未来技術STORY」を、テストサンプルとしてWIND上で再現したものです。目次が画面左に表示されているため、たいへんスムーズにブック内を見て回れます。原稿自体がページ順に並んでいたため、30分程度の作業でこのようにWIND版が完成しました。一定のルールでページデータをフォルダにまとめて、目次や動作指示のための設定ファイルをエディタで編集するだけなので、特別な知識など無くても簡単に電子書籍化できるわけです。なお、WINDなら電子書籍だけでなく、ホームページそのものも電子書籍化して閲覧することができます。姉妹サイト「MuseGate」では、従来のサイトと並行する形でWIND版も稼動しています。

＜追記（2022.4.10）＞
SITE-1のWIND版を公開しました。ホームページ・トップよりご体験下さい。