var search=new Array();search["001"]="デジタルブックコンバーター デビュー コンテンツカスタマイズマニュアル 091124 ";search["002"]=" はじめに ....................................................... 2 カスタマイズ可能なオブジェクト .......... 2 コンテンツファイルの構成 ...................... 3 ファイルレイアウト ............................................3 2種類のCSSファイル ........................................4 リファレンス HTMLヘッダ .....................................................4 タイトル ............................................................4 背景 ..................................................................4 メインツール ......................................................5 サブツール .........................................................5 ドロップシャドウ ...............................................6 紙のめくれ .........................................................7 ノド ..................................................................7 ナビゲーションマップ .........................................7 ブックパネル ......................................................8 イメージ（サムネイル） .......................................9 目次 ..................................................................9 検索 ..................................................................9 ブックマーク ....................................................10 メディアファイル .............................................11 ハイパーリンク ................................................11 ヘルプ .............................................................12 ケーススタディ タイトルを設定する ..........................................13 背景を変更する ................................................14 ボタンを変更し、不要な機能を隠す ....................15 外部コントロール 自動ページめくり機能を実装する .......................16 コントロール定数／変数／関数一覧 ....................18 文中のアイコンについて 注意点等 有効な情報／ヒント等 参照情報等 目次 本書の内容を許可なく転載することを禁じます。Copyright(c) 2009 portarte,inc. All rights reserved. ";search["003"]=" コンテンツカスタマイズマニュアル - 2 - はじめに DeBiewコンテンツは、コンテンツフォルダ内のカスケーディングスタイルシート（以下CSS）や画像等の各種構成ファイルを編 集することによって、様々なデザインカスタマイズを実現することが可能です。また、JavaScriptを利用して外部からコンテン ツをコントロールすることも可能です。 本マニュアルでは、それらの具体的な手法について解説いたします。 本内容は、HTML／CSS／JavaScriptについての一般的な理解を前提にまとめられています。HTML／CSS／ JavaScript等の基本的な解説に関しては他の資料や参考書等をご参照ください。 カスタマイズ可能なオブジェクト DeBiewコンテンツでは以下の要素をデザインカスタマイズすることが可能です。 ①タイトル ②背景 ③ボタン ④ドロップシャドウ ⑤紙のめくれ ⑥ノド ⑦ナビゲーションマップ ⑧イメージ （サムネイル）／目次／検索／ブックマーク ⑨ハイパーリンク ⑩ヘルプ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ コンテンツカスタマイズマニュアル - 3 - コンテンツファイルの構成 ファイルレイアウト 「contents」フォルダ コンテンツの内容がJPEGファイルに分割されて格納されています。内容を変更するとコンテンツが 正常に動作しなくなりますので、編集することはできません。 「help.html」ファイル ヘルプボタンをクリックした際に表示される画面の内容が記述されています。ヘルプ表示をカスタマ イズする場合に編集します。 「image」フォルダ コンテンツのボタン等の部品に利用される画像ファイルが格納されています。必要に応じてそれぞれ のファイルを編集します。 「index.html」ファイル コンテンツのデフォルトファイルです。HTMLタイトルやヘッダ等を変更する場合に編集します。 「lib」フォルダ コンテンツの各種設定情報が記述されたライブラリファイルが格納されています。必要に応じてそれ ぞれのファイルを編集します。 「config.css」ファイル CSSのカスタム定義が記述されたファイルです。CSSを変更する場合に編集します。 「debiew_lib.js」ファイル システムが利用するプログラムファイルです。編集することはできません。 「default.css」ファイル CSSのデフォルト定義が記述されたファイルです。CSSを変更する場合に編集します。 「edit_lib.js」ファイル システムが利用するプログラムファイルです。編集することはできません。 「help_lib.js」ファイル システムが利用するプログラムファイルです。編集することはできません。 「hyperlink_lib.js」ファイル ハイパーリンクの定義が記述されたファイルです。ハイパーリンクを変更する場合に編集します。 「index_lib.js」ファイル 目次の定義が記述されたファイルです。目次を変更する場合に編集します。 「media_lib.js」ファイル メディアファイルの定義が記述されたファイルです。メディアファイルを変更する場合に編集します。 「parameter_lib.js」ファイル システムが利用する設定ファイルです。編集することはできません。 「search_lib.js」ファイル 検索に使用されるテキストが記述されたファイルです。検索テキストを変更する場合に編集します。 「media」フォルダ コンテンツに含まれるメディアファイルが格納されています。必要に応じてそれぞれのファイルを編集します。 「pdf」フォルダ コンテンツに埋め込まれたPDFファイルが格納されています。必要に応じてそれぞれのファイルを編集します。 「title.html」ファイル DebIewコンテンツのタイトル部分の内容が記述されたファイルです。タイトル部分を変更する場合に編集します。 DeBiewコンテンツのテキストエンコーディングはUTF-8に統一されているため、各ファイルを編集する場合は、すべ てUTF-8で記述する必要があります。 ";search["004"]=" コンテンツカスタマイズマニュアル - 4 - 2種類のCSSファイル DeBiewコンテンツには「default.css」と「config.css」の2種類のCSSが存在しています。基本的にどちらのファイルにスタイ ルを定義しても有効に適用されますが、同じ名称のスタイルを両方に定義した場合、「config.css」の内容が優先されます。 変更内容が明確になるよう、変更したい要素のみ「config.css」に追記していくといった形でカスタマイズ作業を進めるのがよい でしょう。 リファレンス HTMLヘッダ 要 素 CSS 関連ファイル備 考 HTMLタイトル等なし index.html コンテンツのHTMLヘッダ（TITLEやMETAタグ等）を変更する場合は「index.html」のHTMLヘッダ部分を編集し ます。 タイトル 要 素 CSS 関連ファイル備 考 タイトル #title title.html CSSの#titleでheightのみ指定します。 タイトル部分はインラインフレームとなっています。高さをCSSで指定し、内容は「title.html」を表示しています。高 さに0を指定するとタイトルは非表示になります。 背景 要 素 CSS 関連ファイル備 考 背景 #frame なし コンテンツカスタマイズマニュアル - 5 - メインツール 要 素 CSS 関連ファイル備 考 ツール全体 #tool なしツール全体のwidthとheightを指定しま す。leftとtopは自動的に決定されます。 左端 #tool_leftedge tool_leftedge.png leftとtopはツール内の相対座標です。 右端 #tool_rightedge tool_rightedge.png leftとtopはツール内の相対座標です。 ズームインボタン #tool_zoomin tool_zoomin.png leftとtopはツール内の相対座標です。 ズームアウトボタン #tool_zoomout tool_zoomout.png leftとtopはツール内の相対座標です。 フィットボタン #tool_fit tool_fit.png leftとtopはツール内の相対座標です。 左端ページボタン #tool_leftendspread tool_leftendspread. png leftとtopはツール内の相対座標です。 左ページボタン #tool_leftspread tool_leftspread.png leftとtopはツール内の相対座標です。 右ページボタン #tool_rightspread tool_rightspread.png leftとtopはツール内の相対座標です。 右端ページボタン #tool_rightendspread tool_rightendspread. png leftとtopはツール内の相対座標です。 ツール全体の幅 ツール全体と 各ボタンの高さ 各ボタンの幅 通常状態 ハイライト状態 CSSでツール全体の枠サイズを指定した上で、その中の各ボタンのサイズと座標を指定します。各ボタンの位置はツー ルの左肩を基準とした相対座標を指定します。ツール自体の位置はシステム側で自動的に決定されます。 ボタンのwidthとheightを0に指定するとそのボタンは非表示になり、機能しなくなります。 画像ファイルは通常状態とハイライト状態を縦に並べた1ファイルとして保存します。なお、ファイル名は変更できま せん。 サブツール 要 素 CSS 関連ファイル備 考 ツール全体 #subtool なしツール全体のwidthとheightを指定しま す。leftとtopは自動的に決定されます。 左端 #subtool_leftedge subtool_leftedge.png leftとtopはツール内の相対座標です。 右端 #subtool_rightedge subtool_rightedge. png leftとtopはツール内の相対座標です。 PDF表示ボタン #subtool_getpdf subtool_getpdf.png leftとtopはツール内の相対座標です。 ヘルプボタン #subtool_help subtool_help.png leftとtopはツール内の相対座標です。 クローズボタン #subtool_close subtool_close.png leftとtopはツール内の相対座標です。 サブツールの編集方法はメインツールと同様です。 ";search["005"]=" コンテンツカスタマイズマニュアル - 6 - ドロップシャドウ 要 素 CSS 関連ファイル備 考 ① .skin skin_corner_topleft. png CSSの.skinでパーツ画像のwidthと heightを指定します。 ② .skin skin_cornerside_ topleft.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ③ .skin skin_bar_top.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ④ .skin skin_center_top.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑤ .skin skin_cornerside_ topright.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑥ .skin skin_corner_topright. png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑦ .skin skin_cornerside_ righttop.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑧ .skin skin_bar_right.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑨ .skin skin_center_right.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑩ .skin skin_cornerside_ rightbottom.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑪ .skin skin_corner_ bottomright.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑫ .skin skin_cornerside_ bottomright.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑬ .skin skin_bar_bottom.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑭ .skin skin_center_bottom. png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑮ .skin skin_cornerside_ bottomleft.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑯ .skin skin_corner_ bottomleft.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑰ .skin skin_cornerside_ leftbottom.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑱ .skin skin_bar_left.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑲ .skin skin_center_left.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ⑳ .skin skin_cornerside_ lefttop.png CSSの.skinでパーツ画像のwidthと heightを指定します。 ① ⑪ ⑫ ⑬ ⑭ ⑮ ⑯⑰ ⑱ ⑲ ⑳② ③ ④ ⑤⑥⑦ ⑧ ⑨ ⑩ ③ ⑧ ⑬ ⑱ ドロップシャドウはCSSのサイズ定義とそのサイズに対応した合計20個のパーツ画像ファイルで構成されます。width とheight（パーツ画像のサイズ）の値は同一にしてください。なお、パーツ画像ファイル名は変更できません。③⑧⑬ ⑱のパーツ画像はページサイズに応じて自動的にサイズ調整されます。 コンテンツカスタマイズマニュアル - 7 - 紙のめくれ 要 素 CSS 関連ファイル備 考 左 .curl curl_left.png CSSの.curl で画像のwidthとheightを 指定します。 右 .curl curl_right.png CSSの.curl で画像のwidthとheightを 指定します。 紙のめくれはCSSのサイズ定義とそのサイズに対応した2個の画像ファイルで構成されます。widthとheight（画像の サイズ）の値は同一にしてください。なお、画像ファイル名は変更できません。 widthとheightを0に指定すると非表示になり、機能しなくなります。 ノド 要 素 CSS 関連ファイル備 考 ノド .gutter gutter.png CSSの.gutterで画像のwidthとheight を指定します。 ノドはCSSのサイズ定義とそのサイズに対応した画像ファイルで構成されます。widthとheight（画像のサイズ）の値 は同一にしてください。なお、画像ファイル名は変更できません。画像はページサイズに応じて自動的にサイズ調整され ます。 ノドは見開きの場合のみ表示されます。また、widthとheightを0に指定すると非表示になります。 ナビゲーションマップ 要 素 CSS 関連ファイル備 考 背景 #map なしサイズと位置は自動的に決定されます。 スコープ #scope なしサイズと位置は自動的に決定されます。 ";search["006"]=" コンテンツカスタマイズマニュアル - 8 - ブックパネル 要 素 CSS 関連ファイル備 考 ブックボタン #book book.png CSSの#bookで画像のwidthとheight を指定します。 幅 #book_panel なし CSSの#book_panel でwidthのみ指定 します。 背景 #book_frame なしサイズと位置は自動的に決定されます。 切替ボタン（イメージ） #book_image book_image.png CSSの#book_imageでwidthとheight を指定します。 切替ボタン（目次） #book_index book_index.png CSSの#book_indexでwidthとheight を指定します。 切替ボタン（検索） #book_search book_search.png CSSの#book_searchでwidthと heightを指定します。 切替ボタン（ブックマー ク） #book_bookmark book_bookmark.png CSSの#book_bookmarkでwidthと heightを指定します。 クローズボタン #book_close book_close.png CSSの#book_closeでwidthとheight を指定します。 ボタン類はツールボタンと同様に編集してください。ボタンのwidthとheightを0に指定するとそのボタンは非表示に なり、機能しなくなります。画像ファイルは通常状態とハイライト状態を縦に並べた1ファイルとして保存します。なお、 ファイル名は変更できません。 コンテンツカスタマイズマニュアル - 9 - イメージ（サムネイル） 要 素 CSS 関連ファイル備 考 サムネイル（通常時） .thumbnail_default なし サムネイル（ハイライ ト時） .thumbnail_highlight なし 目次 要 素 CSS 関連ファイル備 考 チャプタ（通常時） .chapter_default なし チャプタ（ハイライト 時） .chapter_highlight なし アンカー（通常時） .anchor_default なし アンカー（ハイライト 時） .anchor_highlight なし 内容なし index_lib.js index_lib.jsの配列indexを編集します。 目次の内容はJavaScriptファイル「index_lib.js」内の配列「index[]」に定義されています。編集する場合は以下の書式 に従ってください。 index[配列番号]=目次種類^目次文字列^表示内容 配列番号 0から始まる整数を指定します。 目次種類 chapterもしくはanchorのいずれかを指定します。 目次文字列目次行に表示される文字列を指定します。 表示内容（chapter） 表示する画面番号を1から始まる整数で指定します。 表示内容（anchor） 以下の通りパラメータをカンマで区切って指定します。 画面番号, 表示倍率, 水平座標, 垂直座標 画面番号は1から始まる整数で指定します。 表示倍率は2（400px）、4（800px）、8（1600px）、16（3200px）のいずれかを指定します。 座標は画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。指定された座 標位置を画面の中心に表示します。 検索 要 素 CSS 関連ファイル備 考 キーワードフィールド #search_field なし 検索ボタン #search_go search_go.png CSSの#search_goでwidthとheight を指定します。 クリアボタン #search_clear search_clear.png CSSの#search_clearでwidthと heightを指定します。 検索結果ヘッダ .search_header なし 検索結果（通常時） .search_default なし 検索結果（ハイライト 時） .search_highlight なし 検索結果（キーワード 強調表示） .search_strong なし 内容なし search_lib.js search_lib.jsの配列searchを編集しま す。 ボタン類はツールボタンと同様に編集してください。ボタンのwidthとheightを0に指定するとそのボタンは非表示に なり、機能しなくなります。画像ファイルは通常状態とハイライト状態を縦に並べた1ファイルとして保存します。なお、 ファイル名は変更できません。 検索テキストの内容はJavaScriptファイル「search_lib.js」内の配列「search[]」に定義されています。編集する場合は 以下の書式に従ってください。 search[画面番号]=検索テキスト 画面番号画面番号を3桁の文字列で指定します。 検索テキスト画面に含まれるすべての文字列を格納します。改行やスペースを含めることはできません。 ";search["007"]=" コンテンツカスタマイズマニュアル - 10 - ブックマーク 要 素 CSS 関連ファイル備 考 追加ボタン #bookmark_add bookmark_add.png CSSの#bookmark_addでwidthと heightを指定します。 全て削除ボタン #bookmark_deleteall bookmark_deleteall. png CSSの#bookmark_deleteall でwidth とheightを指定します。 ブックマークヘッダ .bookmark_header なし タイトル変更ボタン .bookmark_edit bookmark_edit.png CSSの.bookmark_editでwidthと heightを指定します。 削除ボタン .bookmark_delete bookmark_delete.png CSSの.bookmark_deleteでwidthと heightを指定します。 タイトルテキスト .bookmark_text なし ブックマーク（通常時） .bookmark_default なし ブックマーク（ハイラ イト時） .bookmark_highlight なし ボタン類はツールボタンと同様に編集してください。ボタンのwidthとheightを0に指定するとそのボタンは非表示に なり、機能しなくなります。画像ファイルは通常状態とハイライト状態を縦に並べた1ファイルとして保存します。なお、 ファイル名は変更できません。 コンテンツカスタマイズマニュアル - 11 - メディアファイル 要 素 CSS 関連ファイル備 考 内容なし media_lib.js media_lib.jsの配列mediaを編集します。 メディアファイルの内容はJavaScriptファイル「media_lib.js」内の配列「media[]」に定義されています。編集する場 合は以下の書式に従ってください。 メディアファイルの種類によっては、いくつかのパラメータは機能しない場合があります。 media[画面番号][画面内配列番号]=メディア種類^URL^ファイル名^水平座標^垂直座標^幅^高さ^ 自動再生^ループ^コントロール^背景カラー 画面番号画面番号を3桁の文字列で指定します。 画面内配列番号同一ページ内で0から始まる整数を指定します。 メディア種類 embed（映像や音声ファイルの場合）もしくはimg（画像ファイルの場合）のいずれかを指定 します。 URL メディアファイルのURLを指定します。 ファイル名メディアファイルのファイル名を指定します。URLに外部ファイルを指定した場合は空欄にし ます。 水平座標画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。 垂直座標画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。 幅画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。 高さ画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。 自動再生自動再生を行う場合は1を、行わない場合は0を指定します。 ループループ再生を行う場合は1を、行わない場合は0を指定します。 コントロールコントロール表示を行う場合は1を、行わない場合は0を指定します。 背景カラー背景カラーを#000000の形式で指定します。 ハイパーリンク 要 素 CSS 関連ファイル備 考 ハイパーリンク（通常 時） #hyperlink_default なし ハイパーリンク（ハイ ライト時） #hyperlink_highlight なし 内容なし hyperlink_lib.js hyperlink_lib.jsの配列hyperlinkを編集 します。 ハイパーリンクの内容はJavaScriptファイル「hyperlink_lib.js」内の配列「hyperlink[]」に定義されています。編集す る場合は以下の書式に従ってください。 hyperlink[画面番号][画面内配列番号]=タイトル^URL^ターゲット^水平座標^垂直座標^幅^高さ 画面番号画面番号を3桁の文字列で指定します。 画面内配列番号同一ページ内で0から始まる整数を指定します。 タイトルタイトルを指定します。 URL リンク先のURLを指定します。 ターゲットターゲットを指定します。 水平座標画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。 垂直座標画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。 幅画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。 高さ画面を1000×1000の正方形に見立て、0〜1000の整数で指定します。 ";search["008"]="コンテンツカスタマイズマニュアル - 12 - ヘルプ 要 素 CSS 関連ファイル備 考 エリアサイズ #help_panel なし CSSの#help_panel でwidthとheight を指定します。 背景 #help_frame なしサイズと位置は自動的に決定されます。 クローズボタン #help_close help_close.png CSSの#help_closeでwidthとheight を指定します。 タイトル .help_title なし テキスト .help_text なし 内容なし help.html help.html を編集します。 ヘルプはインラインフレームとなっています。内容は「help.html」を表示しています。 コンテンツカスタマイズマニュアル - 13 - ケーススタディ タイトルを設定する デフォルトのテンプレートを利用して最低限の変更のみでタイトルをカスタマイズしてみましょう。 このケーススタディで使用するデータは、サンプルコンテンツ「sample1」に含まれています。 まず最初に、ブラウザウィンドウのタイトルバーやタブバーに表示される名称を設定します。「index.html」のヘッダ内のタイト ル部分を次のように変更します。 ↓ デジタルブックコンバーター：DeBiew 「index.html」をブラウザで表示して結果を確認します。設定した名称がタイトルバーやタブバーに表示されているはずです。 次にコンテンツのタイトルをカスタマイズします。 タイトルはデフォルトでは非表示となっています。まずはタイトル表示の高さを設定するために、「config.css」に以下のスタイ ルを書き加えます。 #title{height:32px;} 「index.html」をブラウザで表示して結果を確認します。以下のようなタイトルが表示されているはずです。 次に「title.html」を確認します。タイトル部分はインラインフレームになっており、その内容は「title.html」に記述されています。 の内容は以下の通りです。
title
要素の中に要素が1つ定義されています。
要素にはバックグラウンドの設定がなされており、要素とし てタイトルロゴ画像が指定されています。 今回は「title.html」自体は編集せずに、画像を差し替えるだけでタイトルの変更を実現してみましょう。 「image」ディレクトリの以下2つのファイルを差し替えます。 「title.png」（タイトルロゴ画像） → 「title_back.png」（タイトルバックグラウンド画像） → 「index.html」をブラウザで表示して結果を確認します。 今回の例では画像の差し替えのみのカスタマイズでしたが、「title.html」の内容を編集することで、より自由なデザインを実現す ることが可能です。 タイトル部分にハイパーリンクやメールリンクを設定する等、アイディア次第でコンテンツに様々な可能性を付加することができ るのではないでしょうか。 ";search["009"]=" コンテンツカスタマイズマニュアル - 14 - 背景を変更する 背景はデフォルトではグレーの塗りつぶしになっています。簡単なカスタマイズで背景画像を設定してみましょう。 このケーススタディで使用するデータは、サンプルコンテンツ「sample2」に含まれています。 はじめに、新たに背景画像ファイルを準備し、「image」ディレクトリに配置します。 「back.png」（背景画像） 次に「config.css」に以下のスタイルを書き加えます。 #frame{background-image:url(../image/back.jpg);} 「index.html」をブラウザで表示して結果を確認します。 背景に画像を設定するだけでずいぶんとコンテンツの雰囲気が変わることがお分かりいただけると思います。さらに細部をカスタ マイズしてゆくことによって、よりビジュアルリッチなコンテンツイメージを演出してみてはいかがでしょうか。 コンテンツカスタマイズマニュアル - 15 - ボタンを変更し、不要な機能を隠す ボタンのデザインをカスタマイズするとともに、不要な機能を省くためにいくつかのボタンを隠してみましょう。 このケーススタディで使用するデータは、サンプルコンテンツ「sample3」に含まれています。 今回は、次のようにボタンのデザインを変更します。また、左右端ページへジャンプする機能とPDFを表示／ダウンロードする 機能を隠します。PDFファイルは必要ありませんので、あらかじめコンテンツフォルダから取り除いておくとよいでしょう。 変更前のボタンの構成 変更後のボタンの構成 変更するボタンの画像ファイルを準備します。画像ファイルは通常状態とハイライト状態を縦に並べた1ファイルとして保存し ます。なお、ファイル名は変更しないでください。 次に、「config.css」に以下のスタイルを書き加えます。不要な機能の部分は位置／サイズともに0を指定します。 #tool{left:0px;top:0px;width:320px;height:32px;} #tool_leftedge{left:0px;top:0px;width:0px;height:0px;} ←不要機能部分 #tool_rightedge{left:0px;top:0px;width:0px;height:0px;} ←不要機能部分 #tool_zoomin{left:0px;top:0px;width:64px;height:32px;} #tool_zoomout{left:64px;top:0px;width:64px;height:32px;} #tool_fit{left:128px;top:0px;width:64px;height:32px;} #tool_leftendspread{left:0px;top:0px;width:0px;height:0px;} ←不要機能部分 #tool_leftspread{left:192px;top:0px;width:64px;height:32px;} #tool_rightspread{left:256px;top:0px;width:64px;height:32px;} #tool_rightendspread{left:0px;top:0px;width:0px;height:0px;} ←不要機能部分 #subtool{left:0px;top:0px;width:128px;height:32px;} #subtool_leftedge{left:0px;top:0px;width:0px;height:0px;} ←不要機能部分 #subtool_rightedge{left:0px;top:0px;width:0px;height:0px;} ←不要機能部分 #subtool_getpdf{left:0px;top:0px;width:0px;height:0px;} ←不要機能部分 #subtool_help{left:0px;top:0px;width:64px;height:32px;} #subtool_close{left:64px;top:0px;width:64px;height:32px;} 「index.html」をブラウザで表示して結果を確認します。 コンテンツの操作性や印象において、ツールボタンの果たす役割は重要です。コンテンツの内容や閲覧者の便宜性などを考慮して、 より使いやすいインターフェースをデザインしてみてください。 ";search["010"]=" コンテンツカスタマイズマニュアル - 16 - 外部コントロール 外部からJavaScriptを使用して、DeBiewコンテンツに対して様々なコントロールを行うことが可能です。 自動ページめくり機能を実装する DeBiewコンテンツにあらかじめ備わっている外部コントロール機能を利用して自動ページめくりの機能を実装してみましょう。 このケーススタディで使用するデータは、サンプルコンテンツ「sample4」に含まれています。 今回は、タイトルを構成する「title.html」にコンテンツをコントロールするJavaScriptを書き加え、自動ページめくりを実現し ます。 動作の概要は、 「ボタンをクリック」→「自動めくりがスタート」→「再度ボタンをクリック」→「自動めくりがストップ」 といった単純な形です。ページの末尾に達した場合は自動的に先頭に戻るように動作させます。 また、ひとつのボタンにスタートとストップの両方の機能を持たせるため、動作中の状況が一目瞭然となるように、自動ページめ くりを実行している最中はボタン自体をアニメーションさせたいと思います。 タイトルはデフォルトでは非表示となっています。まずはタイトル表示の高さを設定するために、「config.css」に以下のスタイ ルを書き加えます。 #title{height:32px;} 次に、ボタン用の静止画像とアニメーション画像の2つのファイルを準備し、「image」ディレクトリに配置します。今回はタイ トルロゴの画像をそのままボタンとして利用してみましょう。 「title.png」（静止画像） 「title.gif」（アニメーション画像） 次に「title.html」を編集します。 まずはコントロールプログラム本体をHTMLのヘッダ部分に記述します。 スイッチとして機能するswitch_turnover()とページをめくる動作を行うauto_turnover()という2つの関数を使用します。ペー ジをめくる間隔はturnover_intervalという環境変数でを定義します。 これらのプログラムの中で、DeBiewコンテンツが持っている以下のコントロール定数／変数／関数を使用しています。 定数「spread_count」 コンテンツの総画面数を示す定数です。 変数「current_spread」 コンテンツの現在表示されている画面番号を返す変数です。 関数「show_spread(画面番号)」 指定したページを表示する関数です。 タイトルはインラインフレーム内に表示されているため、「title.html」内のプログラムから関数等を参照する際にそれぞ れparentをつけて呼び出しています。 さらに、HTMLのボディのタイトルロゴ画像の記述を以下のように変更します。 title ↓ title プログラムから参照するためにid属性を定義しています。また、ボタンであることをわかりやすくするためマウスオーバー時に カーソルをポインタ表示にします。そしてクリックされた時にswitch_turnover()関数を実行するようにしています。 「index.html」をブラウザで表示して結果を確認します。 動作のおさらいです。 ボタンが押された時、timer_idが空白の場合（ページめくりが動作していない場合）はauto_turnover()を実行し、ボタンをアニ メーション画像に差替えます。auto_turnover()は変数turnover_intervalの値に則って定期的に実行されます。 ボタンが押された時、timer_idが空白でない場合（ページめくりが動作している場合）はタイマーとtimer_idをクリアし、ボタ ンを静止画像に戻します。 auto_turnover()が呼び出された時、変数current_spreadと定数spread_countを比較し、現在の表示画面が最終画面であるかど うかを判断し、変数iの値を決定します。そして変数iを引数としてshow_spread()を実行、最後に次回のタイマーを設定してい ます。 以上のように、外部からコンテンツをコントロールすることができるのもDeBiewコンテンツの大きな特徴の一つです。外部コ ントロール機能を利用するとコンテンツカスタマイズの幅が飛躍的に拡がることを実感していただけたのではないでしょうか。 ここで触れられていないコントロール定数／変数／関数については次ページ以降の一覧表を参照してください。 ";search["011"]=" コンテンツカスタマイズマニュアル - 18 - コントロール定数／変数／関数一覧 コントロール定数 名 称解 説 page_count 総ページ数を整数で返します。 spread_count 総画面数を整数で返します。 min_block 最小倍率です。2/4/8/16のいずれかの整数を返します。 max_block 最大倍率です。2/4/8/16のいずれかの整数を返します。 bind 綴じ方向です。左綴じは0、右綴じは1を整数で返します。 facing 見開き属性です。見開きでない場合は0、見開きの場合は1を整数で返します。 start_page 開始ページです。左ページ開始の場合は0、右ページ開始の場合は1を整数で返します。 pdf_embed PDF埋め込み属性です。ソースファイルのまま埋め込まれている場合は0、分割して埋め込ま れている場合は1、埋め込まれていない場合は2を整数で返します。 コントロール定数はコンテンツの基本属性であり、同一コンテンツ内では常に一定の値を保持しています。状況によって 変化することはありません。 コントロール変数 名 称解 説 current_spread 現在表示している画面番号を整数で返します。 current_scale 現在の表示倍率です。2/4/8/16のいずれかの整数を返します。 コントロール変数はコンテンツの現在の状況を示す値です。コンテンツの表示状況によって値は変動します。 コントロール関数 書 式（引数） 解 説 change_scale(相対倍率) 倍率を変更します。縮小（ズームアウト）する場合は-1、拡大（ズームイン）す る場合は1を整数で引数として渡します。 fit_scale() ウィンドウサイズに合わせて倍率を自動的に変更します。 left_spread() ひとつ左の画面を表示します。このコマンドはページめくりアニメーションをと もないます。 right_spread() ひとつ右の画面を表示します。このコマンドはページめくりアニメーションをと もないます。 leftend_spread() 左端の画面を表示します。このコマンドはページめくりアニメーションをともな います。 rightend_spread() 右端の画面を表示します。このコマンドはページめくりアニメーションをともな います。 show_spread(画面番号) 指定した画面を表示します。このコマンドはページめくりアニメーションをとも ないます。画面番号を整数で引数として渡します。 show_anchor(画面番号, 表示倍率, 水平座標, 垂直座標) 指定した画面の指定した位置を指定した倍率で表示します。このコマンドはフェー ドアニメーションをともないます。画面番号、表示倍率（2/4/8/16）、水平座標（0 〜1000）、垂直座標（0〜1000）をそれぞれ整数で引数として渡します。 show_book() ブックパネルを表示します。 hide_book() ブックパネルを隠します。 load_book(ブック種類) ブックパネルの内容を読み込みます。表示内容として、イメージは0、目次は1、 検索は2、しおりは3を整数で引数として渡します。 get_pdf() 埋め込まれたPDFを別ウィンドウに表示します。 show_help() ヘルプを表示します。 hide_help() ヘルプを隠します。 window_close() ウィンドウを閉じます。 コントロール関数はコンテンツへ何らかの動作命令を与えるコマンドです。引数を含む関数には必ず範囲内の値を渡す必 要があります。引数に誤りがあると正常に動作しない場合があります。 ";