WEBページへの導入

bookreader.jsを導入したい部分のHTMLをDIVタグで囲み、そのIDを"bookreader"とします。HTMLヘッダーで、prototype, scriptaculous, bookreaderの各ライブラリを読み込みます。

HTMLヘッダでの指定

必要なライブラリを読み込みます。

<script type="text/javascript" src="library/prototype/prototype.js"></script>
<script type="text/javascript" src="library/scriptaculous/effects.js"></script>
<script type="text/javascript" src="library/cookiemanager/cookiemanager.js"></script>
<script type="text/javascript" src="library/bookreader/bookreader.js?theme=default"></script>

bookreader.js を読み込む際の設定(引数の指定)については、Settingsを参照ください。

表示要素の指定

bookreader.js で表示したい部分を、DIVタグで囲み、そのIDを"bookreader"とします。

<div id="bookreader">
<h1>ページのタイトル</h1>
<p>本文をここに書きます。</p>
</div>

対応するブラウザ環境

だいたいどのブラウザでもOKです。Safariの文字表示が圧倒的にキレイです。W indows版Safariでも動作するのでオススメ。下記は動作報告のある環境リストです。

Safari / Mac OS X, Windows Vista
Firefox / Mac OS X, Windows Vista, Windows XP
Internet Explorer 7 / Windows Vista, Windows XP
Internet Explorer 6 / Windows XP
Opera / Windows Vista
Camino / Mac OS X

依存するライブラリ

将来的には、外部ライブラリへの依存を除去する予定ですが、現バージョンでは次のライブラリを必要とします。

prototype.js
scriptaculous.js (※efectsのみ使用)
cookiemanager.js (※フォントサイズ変更機能を使う場合)

HTMLサンプル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="library/prototype/prototype.js"></script>
<script type="text/javascript" src="library/scriptaculous/effects.js"></script>
<script type="text/javascript" src="library/cookiemanager/cookiemanager.js"></script>
<script type="text/javascript" src="library/bookreader/bookreader.js?theme=default"></script>
<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="style/screen.css" media="screen" />
<title>bookreader.js</title>
</head>

<body>

<div id="header">
<div>あなたのサイト名、又はページのタイトル</div>
</div>

<div id="bookreader">
<h1>ページのタイトル</h1>
<p>本文をここに書きます。</p>
</div>

<div id="footer">
Powered by bookreader.js
</div>

</body>

</html>

► Sign in to add a comment