【買切タイプ】ebook5 設定リファレンス（ver3）

V3改訂履歴

2018.04.09　’pageHintEnable’の説明を追加
2015.04.01　V3.1リリースに伴う主プログラム名（ebook5-3.1.min.js,ebook5-3.min.css）等の変更追加
2015.04.01　PDF版の提供を廃止、www.ebook5.net/comに移設
2013.08.02　’downloadList’定義サンプルの記載間違い。連想配列に訂正

※ver.4の設定リファレンスは<こちら>

1.　配布ディレクトリ・ファイル構成

./	（ebook5展開ディレクトリ）
	ebook5js/	（ebook5プログラムファイル格納）
		ebook5-3.1.min.js		（ebook5 主プログラム）
	contents/	（画像やCSS等を配置）
		image/	（画像を配置）
			cmn/		（ebook5画面構成用画像格納）
			book/		（書籍ページ画像格納、サンプル）
		css/	（CSSを配置）
			ebook5-3.min.css		（ebook5画面構成用CSS）※1
	ebook5data/
		ebook_data.js			（書籍データ定義、サンプル）
	js.tools/ （またはjstools）	（ebook5が利用している外部プログラムファイルを格納）※1
		jquery-1.8.3.min.js			（JQuery1.8.3 JavaScript Library）
	index.html				（HTML、サンプル用）
	license.txt				（ライセンス表記）

※1）ファイル自体は改変厳禁ではありませんが、内容を変更すると動作しなくなる可能性があります。
※2）ファイル名・ディレクトリ名は改変厳禁ではありませんが、名前を変更すると動作しなくなる可能性があります。
・補足

ディレクトリ	グレー背景
ファイル	太字
改変厳禁	赤字

※赤字の箇所はソース改変できません。（ライセンスで禁止しております。）

2.　ebook5データ定義「ebook_data.js」について

※本書はJavaScriptを理解している方を前提にしております。

2-1.　ebook_data構造体内各変数の説明

ebook5から参照している変数は唯一“ebook_data”です。 pagetitleなどは見易さや編集を考慮して変数別に定義しています。

2-2.　ebook_data内の項目（パラメータ）概要

項目	概要
‘pageTitleText’	ページ別の名称を定義（必須）
‘pageTextContents’	検索用の文章（テキスト）を定義（必須）
‘pageLinkContents’	ページ上に矩形リンク等を定義（必須）
‘pageImgPathList’	通常サイズのページ画像パス定義（必須）
‘pageImgPathList_thumb’	小サイズのページ画像パス定義（必須）
‘pageImgPathList_large’	拡大サイズのページ画像パス定義（必須）
‘pageImgSize’	通常サイズ画像の幅、高さを定義（必須）
‘pageImgSize_thumb’	小サイズ画像の幅、高さを定義（必須）
‘pageImgSize_large’	拡大サイズ画像の幅、高さを定義（必須）
‘pageTopDirectionIsLeft’	ページ方向（左めくり、右めくり）の定義
‘maxScaleX1’	ウィンドウサイズ拡大時の画像倍率の定義
‘pageShadow’	ページに影を付けるかどうかを定義
‘pageHintEnable’	利用方法(ヒント)表示の有無を定義
‘use_Download’	ダウンロード機能の利用(する/しない)を定義
‘downloadList’	ダウンロード用ファイルへのパスを定義
‘PageChangeCallBack’	ページ変更~~めくり~~時のカスタム関数動作を定義
‘PageZoomCallBack’	ページ拡大時のカスタム関数動作を定義
‘LinkClickCallBack’	リンククリック時のカスタム関数を定義
d:0	ダミー

ebook_dataの定義例

var ebook_data = {
	'pageTitleText': pagetitle,
	'pageTextContents': pageTextContents,
	'pageLinkContents': pageLinkContents,
	'pageImgPathList': pageImgPathList,
	'pageImgPathList_thumb': pageImgPathList_thumb,
	'pageImgPathList_large': pageImgPathList_large,
	'pageImgSize': pageImgSize,
	'pageImgSize_thumb': pageImgSize_thumb,
	'pageImgSize_large': pageImgSize_large,
	'pageTopDirectionIsLeft': true,
	'maxScaleX1': true,
	'pageShadow': false,
	'pageHintEnable': true,
	'use_Download': true,
	'downloadList': download_list,
	'PageChangeCallBack': function(pageNum) {
		alert(pageNum);
	},
	'PageChangeCallBack': function(pageNum) {
		alert(pageNum);
	},
	'LinkClickCallBack': function(pageNo, linkSeq) {
		alert(pageNo);
		alert(linkSeq);
	},
	d:0
};

2-3.　ebook_data内の各項目（パラメータ）の説明

2-3-1.　’pageTitleText’項目

概要：ページ別の名称を定義説明：配列にてページ数分を定義します。主画面の左下や一覧画面にタイトルが表示されます。

‘pageTitleText’項目サンプル

var pagetitle =[
	"ebook5 サンプル表紙",
	"印刷物をそのままWebに",
	"プラグイン不要",
	"Webサイト+ebook5=リッチなアプリケーション？ 1",
	"Webサイト+ebook5=リッチなアプリケーション？ 2",
	"ユーザーインターフェース",
	"機能一覧表",
	"ebook5 サンプル裏表紙"
];
var ebook_data = {
	'pageTitleText': pagetitle,
	…
};

2-3-2.　’pageTextContents’項目

概要：検索用の文章（テキスト）を定義説明：配列にてページ数分を定義します。検索機能の結果に反映させたい場合に設定します。

‘pageTextContents’項目サンプル

var pageTextContents = [
	pagetitle[0] + "from HTML5 & JavaScript ebook5はブラウザで動作するHTML5の電子書籍アプリケーションです。",
	pagetitle[1] + "印刷物をそのままWebにビジュアル訴求と操作感を実現",
	pagetitle[2] + "タブレット端末でもそのまま動きます",
	pagetitle[3] + "全ての端末に公平なWebアプリケーションがWebサイトの可能性を広げます",
	pagetitle[4] + "全ての端末に公平なWebアプリケーションがWebサイトの可能性を広げます",
	pagetitle[5] + "左ページエリア 右ページエリア タイトル表示エリア ページを印刷 検索",
	pagetitle[6] + "めくる ページ検索 しおり 自動めくり キーワード検索 拡大/縮小",
	pagetitle[7] + "株式会社ルーラー 北海道札幌市中央区南1条西20丁目1 アウルビル4F"
];
var ebook_data = {
	'pageTextContents': pageTextContents,
	…
};

※この例はページ名称（pagetitle[数字]）も検索対象に含めています

2-3-3.　’pageLinkContents’項目

概要：ページ上に矩形リンク等を定義 ‘pageTextContents’定義書式

項目	型	書式	説明
‘pageLinkContents’	連想配列	{1:PageLink1,2:PageLink2,…PageLinkN}	添え字はページ番号ページ毎のリンクを定義
PageLink	配列	[Link1,Link2,…LinkN]	1ページに複数のリンクを定義可能
Link	連想配列	{Option:Value}	Option添え字のValue書式別表参照

Link連想配列の項目：書式

Option項目	型	Value書式	説明
‘rect’	連想配列必須項目	{ ‘top’: 数字,’left’: 数字, ‘width’: 数字, ‘height’: 数字 }	リンク範囲（矩形）の定義 top,leftで左上の位置、width,heightで幅と高さを、ページに対する0～100（％）で定義する。※ページをめくるための矩形は両端20%です。この範囲を指定するとめくれなくなります。例）ページ下半分の矩形の場合 ’rect’:{ ‘top’: 50, ‘left’: 0, ‘width’: 100, ‘height’: 50 }
‘url’	文字列必須項目	‘ URL ‘	クリック時にリンクするURLを定義。JavaScriptの実行も可能。
‘title’	文字列	‘ 文字列 ‘	マウスオーバー時に表示するテキストを定義。<div />タグのtitleアトリビュートとして出力される
‘target’	文字列	‘ 文字列 ‘	’ _blank’で別ウィンドウ、’_self’で自身のウィンドウ等リンク先を開くウィンドウを定義。<a/>のtagetアトリビュートに準拠
‘class’	文字列	‘CSS class’	矩形の表示をCSSクラス名で指定する。CSSクラスは別途CSSに記述が必要
‘hoverclass’	文字列	‘CSS class’	マウスオーバー時の矩形表示をCSSクラス名で指定する。CSSクラスは別途CSSに記述が必要
‘type’	文字列	‘ youtube‘	YouTube動画を埋め込む場合に指定
‘poster’	文字列	‘ 画像へのパス‘	リンク矩形にYouTube動画のイメージ画像を表示する
‘viewsize’	文字列	{ ‘width’: 数字, ‘height’: 数字 }	YouTube再生レイヤーのムービーのサイズ。スマフォなどで画面よりも大きい場合、縦横比維持で画面サイズに縮小する
‘youtube_id’	文字列	‘ 文字列 ‘	YouTubeムービーのID
‘CSS’	文字列	‘CSS class’	矩形の<a/>タグにCSSを追加する。

‘pageLinkContents’項目サンプル

var pageLinkContents = [
	1: /* page No.(1~) */
	[	/* any link can be defined */
		{
			'rect': { 'top': 28, 'left': 10, 'width': 27, 'height': 7 },
			'title': 'ebook5 Official Web',
			'url': 'https://www.ebook5.net/',
			'target': '_blank'
			'class': '_click',
			'hoverclass': '_clickhover'
		}
	],
	8:
	[
		{
			'rect': { 'top': 34, 'left': 35, 'width': 29, 'height': 14 },
			'title': 'ebook5 Official Web',
			'url': 'https://www.ebook5.net/',
			'target': '_blank'
		},
		{
			'rect': { 'top': 83, 'left': 8, 'width': 52, 'height': 10 },
			'title': 'Luler Inc. Official Web',
			'url': 'http://www.luler.jp/',
			'target': '_blank'
		},
		{
			'type': 'youtube',
			'rect': { 'top': 35, 'left': 20, 'width': 20, 'height': 5 },
			'title': 'YouTube Movie',
			'youtube_id': 'Kh_PG6tZDNk',
			'viewsize': { 'width': 640, 'height': 400 },
			'poster': 'contents/image/ebook5_movie_poster.png',
			'css': { 'opacity': 1 },
			'class': '_click',
			'hoverclass': '_clickhover'
		}
	]
};
var ebook_data = {
	'pageLinkContents': pageLinkContents,
	…
};

2-3-4.　 ‘pageImgPathList’、 ‘pageImgPathList_thumb’、 ‘pageImgPathList_large’項目

概要：通常用、サムネイル用、拡大用、それぞれのサイズのページ画像パスを定義説明：配列にてページ数分を定義します。必ずページ数分の定義が必要です。

サンプル

var pageImgPathList = [
	"contents/image/book/00.png",
	"contents/image/book/01.jpg",
	"contents/image/book/02.jpg",
	"contents/image/book/03.jpg",
	"contents/image/book/04.jpg",
	"contents/image/book/05.png",
	"contents/image/book/06.png",
	"contents/image/book/07.png"
];
var pageImgPathList_large = [
	"contents/image/book/large/00.png",
	"contents/image/book/large/01.jpg",
	"contents/image/book/large/02.jpg",
	"contents/image/book/large/03.jpg",
	"contents/image/book/large/04.jpg",
	"contents/image/book/large/05.png",
	"contents/image/book/large/06.png",
	"contents/image/book/large/07.png"
];
var pageImgPathList_thumb = [
	"contents/image/book/thumb/00.png",
	"contents/image/book/thumb/01.jpg",
	"contents/image/book/thumb/02.jpg",
	"contents/image/book/thumb/03.jpg",
	"contents/image/book/thumb/04.jpg",
	"contents/image/book/thumb/05.png",
	"contents/image/book/thumb/06.png",
	"contents/image/book/thumb/07.png"
];
var ebook_data = {
	'pageImgPathList': pageImgPathList,
	'pageImgPathList_thumb': pageImgPathList_thumb,
	'pageImgPathList_large': pageImgPathList_large,
	…
};

2-3-5.　’pageImgSize’、’pageImgSize_thumb’、’pageImgSize_large’項目

概要：通常用、サムネイル用、拡大用それぞれのサイズのページ画像幅、高さを定義説明： width：幅、height：高さを連想配列で定義

サンプル

var pageImgSize = { width: 500, height: 600 };
var pageImgSize_thumb = { width: 150, height: 180 }; 
var pageImgSize_large = { width: 1500, height: 1800 };
var ebook_data = {
	'pageImgSize': pageImgSize,
	'pageImgSize_thumb': pageImgSize_thumb,
	'pageImgSize_large': pageImgSize_large,
	…
};

2-3-6.　’downloadList’項目

概要：ダウンロードデータのパスを定義説明：ebook5を作成した元データ(PDF、またはJPG/PNG/GIF)をダウンロード可能にする場合、ダウンロード用データへのパスを記述します。ダウンロード機能を有効にするには、’use_Download’を「true」で定義する必要があります。

‘downloadList’サンプル

var download_list = {
	'all':'origin/all.pdf',
	'1': 'origin/page_0001.pdf',
	'2': 'origin/page_0002.pdf',
	'3': 'origin/page_0003.pdf',
	…
};
//  'all': 「全てのページ」ダウンロードで利用するファイルパス
//  '数字':各ページのファイルパス(番号は1から)
var ebook_data = {
	'use_Download': true,
	'downloadList': download_list,
	…
};

2-3-7.　’PageChangeCallBack’項目

概要：ページが切り替わった際に実行する、任意のJavaScriptの定義説明：関数は1つの引数を持ち、引数にはページ番号が代入されます。

‘PageChangeCallBack’サンプル

var ebook_data = {
	'PageChangeCallBack': function(pageNum) {
		alert(pageNum); // 表示されたページ番号をポップアップ表示。
	},
	…
};

2-3-8.　’PageZoomCallBack’項目

概要：「Zoom」ボタンが押下された際に実行する、任意のJavaScriptの定義説明：関数は1つの引数を持ち、引数にはページ番号が代入されます。

‘pageZoomCallBack’サンプル

var ebook_data = {
	' PageZoomCallBack': function(pageNum) {
	      alert(pageNum); // ズームされたページ番号をポップアップ表示。
},
	…
};

2-3-9.　’LinkClickCallBack’項目

概要：矩形リンクが押下された際に実行する、任意のJavaScriptの定義説明：関数は2つの引数を持ち、引数にはページ番号とリンク番号(連番)が代入されます。

‘pageZoomCallBack’サンプル

var ebook_data = {
	' LinkClickCallBack': function(pageNum, linkSeq) {
	      alert(pageNum); // クリックされた矩形リンクのあるページ番号をポップアップ表示。
	      alert(linSeq); // ページのリンク番号(1から連番)をポップアップ表示。
	},
	…
};

2-3-10. その他項目

項目	型	無指定時	説明
‘pageTopDirectionIsLeft’	ブール値	true	ページ方向（左めくり、右めくり）の定義 trueで左めくり、falseで右めくり。
‘autoPlayInterval’	数値	5	自動再生時間（秒）の定義
‘useAutoPlay’	ブール値	false	ツールバー内、自動再生ボタンの表示 trueで表示、falseで非表示。
‘maxScaleX1’	ブール値	false	pageImgSizeで指定した通常用画像のサイズ(px)よりブラウザウィンドウが大きい場合でも、画像を拡大しない。(「true」の場合は、ウィンドウサイズにフィットする)
‘pageShadow’	ブール値	true	ページに影を付けることで、実際の本のように立体的に見せるかどうか。 (「true」の場合、影によって少々画像の色が変化します)
‘pageHintEnable’	ブール値	false	利用方法(ヒント)の表示を定義 trueで表示、falseで非表示。

3.　URLオプション

3-1.　初期表示ページ指定オプション

index.html?page=99 99=ページ番号（１～） pageクエリを設定することで、最初から目的のページ表示することが出来ます。

公式Webサイト：www.ebook5.net
FAQ：www.ebook5.net/com/
開発・運営：株式会社ルーラー www.luler.jp

買切タイプ新規販売終了のお知らせ
2018年3月31日をもちまして、ebook5買切タイプ（有償ライセンス）及び作成ツール無料ベータ版内追加オプション「作成枠追加オプション」の新規販売を終了いたしました。
詳しくはこちらをご覧ください。

よくある質問

【買切タイプ】ebook5 設定リファレンス（ver3）

目次

1.　配布ディレクトリ・ファイル構成

2.　ebook5データ定義「ebook_data.js」について

2-1.　ebook_data構造体内各変数の説明

2-2.　ebook_data内の項目（パラメータ）概要

2-3.　ebook_data内の各項目（パラメータ）の説明

2-3-1.　’pageTitleText’項目

2-3-2.　’pageTextContents’項目

2-3-3.　’pageLinkContents’項目

2-3-4.　 ‘pageImgPathList’、 ‘pageImgPathList_thumb’、 ‘pageImgPathList_large’項目

2-3-5.　’pageImgSize’、’pageImgSize_thumb’、’pageImgSize_large’項目

2-3-6.　’downloadList’項目

2-3-7.　’PageChangeCallBack’項目

2-3-8.　’PageZoomCallBack’項目

2-3-9.　’LinkClickCallBack’項目

2-3-10. その他項目

3.　URLオプション

3-1.　初期表示ページ指定オプション

よくある質問

【買切タイプ】ebook5 設定リファレンス（ver3）

目次

1. 配布ディレクトリ・ファイル構成

2. ebook5データ定義「ebook_data.js」について

2-1. ebook_data構造体内各変数の説明

2-2. ebook_data内の項目（パラメータ）概要

2-3. ebook_data内の各項目（パラメータ）の説明

2-3-1. ’pageTitleText’項目

2-3-2. ’pageTextContents’項目

2-3-3. ’pageLinkContents’項目

2-3-4. ‘pageImgPathList’、 ‘pageImgPathList_thumb’、 ‘pageImgPathList_large’項目

2-3-5. ’pageImgSize’、’pageImgSize_thumb’、’pageImgSize_large’項目

2-3-6. ’downloadList’項目

2-3-7. ’PageChangeCallBack’項目

2-3-8. ’PageZoomCallBack’項目

2-3-9. ’LinkClickCallBack’項目

2-3-10. その他項目

3. URLオプション

3-1. 初期表示ページ指定オプション

1.　配布ディレクトリ・ファイル構成

2.　ebook5データ定義「ebook_data.js」について

2-1.　ebook_data構造体内各変数の説明

2-2.　ebook_data内の項目（パラメータ）概要

2-3.　ebook_data内の各項目（パラメータ）の説明

2-3-1.　’pageTitleText’項目

2-3-2.　’pageTextContents’項目

2-3-3.　’pageLinkContents’項目

2-3-4.　 ‘pageImgPathList’、 ‘pageImgPathList_thumb’、 ‘pageImgPathList_large’項目

2-3-5.　’pageImgSize’、’pageImgSize_thumb’、’pageImgSize_large’項目

2-3-6.　’downloadList’項目

2-3-7.　’PageChangeCallBack’項目

2-3-8.　’PageZoomCallBack’項目

2-3-9.　’LinkClickCallBack’項目

3.　URLオプション

3-1.　初期表示ページ指定オプション