外部サーバー公開機能設定リファレンス

※本ドキュメントは、外部サーバー公開機能にて、「リソースファイルをダウンロード(開発者向)」にチェックを入れたお客様のみが対象となります。

※リソースファイルを直接編集した場合、管理画面のデータとの整合性が取れないため、管理画面と実際のブックでの表示や機能に差異が発生します。

※なお、リソースファイルの改変は動作保証外・サポート対象外となります。
タグの自由入力機能やダウンロード機能を利用したソースコードのカスタマイズにより発生した損害について当社は一切の責任を負いません。
変更内容によってはブックが動作しなくなる可能性もございますので、慎重なご操作をお願いいたします。

改訂履歴

2018.04.09　公開（初版）
2021.10.06　更新

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

./	（ebook5展開ディレクトリ）
	contents/	（画像やCSS等を配置）
		image/	book/	（書籍ページ画像格納）
	js/	ebookData.js		（書籍データ定義）
		jquery.ba-hashchange.min.js		（JSライブラリ）
		jquery.cookie.js		（JSライブラリ）
		jquery-2.2.4.min.js		（JSライブラリ）
	origin/	（ダウンロード用PDFや画像を格納）
	resources/	asp/		（各種構成ファイル格納）
		v5/ ※ver.5のみ		（各種構成ファイル格納）
		v4.0/ ※ver.4.5のみ		（各種構成ファイル格納）
	custom/	（オリジナルのロゴ画像を格納）
	index.html			（起動用HTML）
	license.txt			（ライセンス表記）
	readme.txt			（注意事項表記）

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

ディレクトリ	グレー背景
ファイル	太字

2.　ebook5データ定義「ebookData.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’	拡大サイズ画像の幅、高さを定義（必須）
‘use_pageSideToolbar’	※システムで使用する値のため、変更不可
‘pageTopDirectionIsLeft’	ページ方向（左めくり、右めくり）の定義
‘maxScaleX1’	ウィンドウサイズ拡大時の画像倍率の定義
‘pageHintEnable’	利用方法(ヒント)表示の有無を定義
‘use_Download’	ダウンロード機能の利用(する/しない)を定義
‘downloadList’	ダウンロード用ファイルへのパスを定義
‘PageChangeCallBack’	ページ変更めくり時のカスタム関数動作を定義。アクセス解析に使用。
‘PageZoomCallBack’	ページ拡大時のカスタム関数動作を定義。アクセス解析に使用。
‘LinkClickCallBack’	リンククリック時のカスタム関数を定義。アクセス解析に使用。
‘ZoomNarrowRectCallBack’	ヒートマップ解析に使用
‘ZoomWideRectCallBack’	ヒートマップ解析に使用
‘PageDragInfoCallback’	ヒートマップ解析に使用
‘pageDummyImagePath’	奇数ページの場合に最終ページに自動挿入されるダミーページ
‘initLoadingThumbSkipEnable’	※システムで使用する値のため、変更不可
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,
	'img_cmn_base_path':'/resources/v4.0/contents/image/cmn/',
	'PageChangeCallBack': function(pageNo) {
		loggingPageAccess(pageNo);
	},
	'PageZoomCallBack': function(pageNo) {
		loggingZoomAccess(pageNo);
	},
	'LinkClickCallBack': function(pageNo,linkSeq) {
		loggingLinkAccess(pageNo,linkSeq);
	},
	'ZoomNarrowRectCallBack': function(pg,rect){
		loggingViewRectAccess('narrow',pg,false,rect);
	},
	'ZoomWideRectCallBack': function(pg1,pg2,rect){
		loggingViewRectAccess('wide',pg1,pg2,rect);
	},
	'PageDragInfoCallback': function(pg1,pg2,pagepos,pagepos2,diftm,mode){
		/* mode = wide or narrow; */
		loggingPageDragPointAccess(mode=='wide'?'wide':'narrow',pg1,pg2,pagepos,diftm);
	},
	'pageDummyImagePath': './resources/v4.0/contents/image/cmn/pagedummy.gif',
	'initLoadingThumbSkipEnable' : 1,
	'downloadList':{
		'all':'https://asp.ebook5.net/download.php?mode=all&m=1&id=1'
		,1: 'https://asp.ebook5.net/download.php?mode=single&m=1&id=1&p=1'
		,2: 'https://asp.ebook5.net/download.php?mode=single&m=1id=1&p=2'
	},
	'use_Download': true,
	'pageHintEnable': true,
	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で右めくり。
‘maxScaleX1’	ブール値	false	pageImgSizeで指定した通常用画像のサイズ(px)よりブラウザウィンドウが大きい場合でも、画像を拡大しない。
‘pageHintEnable’	ブール値	false	利用方法(ヒント)の表示を定義 trueで表示、falseで非表示。

3.　URLオプション

詳しくはこちらをご覧ください。

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

よくある質問

外部サーバー公開機能設定リファレンス

目次

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

2.　ebook5データ定義「ebookData.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オプション

よくある質問

外部サーバー公開機能設定リファレンス

目次

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

2. ebook5データ定義「ebookData.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オプション

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

2.　ebook5データ定義「ebookData.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オプション