【買切タイプ】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. 配布ディレクトリ・ファイル構成
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. 配布ディレクトリ・ファイル構成

./ (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=ページ番号(1~) pageクエリを設定することで、最初から目的のページ表示することが出来ます。


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

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