iBooks が localStorage 経由でアクセスするインタラクティブなコンテンツを含む、iBooks で読むことができるサンプル epub ファイルを作成しようとしています。chrome と firefox (IE ではない) のブラウザー aok で localStorage の部分を動作させることができます。
ファイルの拡張子が *.xhtml の場合、localStorage javascript ビットは機能せず、*.html 拡張子のみであることに注意しました。
私は、html、opf、ncx を圧縮して、デジタル版で読むことができる epub を取得し、javascript に関連する epubcheck エラーのみをスローすることができます。
最初にこれを iBooks にインポートしようとしましたが、問題なく読むことができましたが、フォームはインタラクティブではありませんでした。次に、グーグルで検索して、iFrameに入れる必要があるという投稿を見つけました。その後、フォームにテキストを入力できましたが、ローカル ストレージ ビットが機能しませんでした。
関連する 2 つの html ファイルを次に示します。
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
</head>
<body onLoad="writeStoredData( 'storedName' );" >
<div epub:type="chapter">
<h1>An HTML5 Ebook Sample</h1>
<p> A simple html5 form that uses local storage to hold user input info</p>
<ul><li>Does a device retain the info when the user moves from page to page? </li>
<li>When the device is turned off and on?</li>
</ul>
<p>In this simple form, the body has an onLoad attribute that calls a function to load the "name" from local storage. When the user enters input from a form the value is updated. When the user closes the page and opens it again the value is still there.</p>
<br/>
<div class="formContainer">
<iframe class="content" src="form.html"></iframe>
</div>
<div id="storedName"></div>
<p>Go to <a href="ebook-sample-pg2.html">page 2</a>
</p>
</div>
<script>
function writeStoredData( id ){
var storedNameDiv = document.getElementById(id);
storedNameDiv.innerHTML = "<p>The stored name is: <span class='selected'>" + localStorage.getItem('somename') + "</span></p>";
}
</script>
</body>
</html>
および形式: (これには localStorage に書き込む関数があります)
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Epub3 Test Input Form</title>
</head><body>
<form>
Please enter your name: <input type="text" id="nameInput"/>
<input type="submit" value="enter" onClick="writeLocal();" onSubmit="window.location.reload()"/>
</form>
<script>
function writeLocal(){
var submittedName = document.getElementById('nameInput').value;
// calling it 'somename' to indicate user defined key
localStorage.setItem('somename', submittedName);
writeStoredData( 'storedName' );
}
function writeStoredData( id ){
var storedNameDiv = document.getElementById(id);
storedNameDiv.innerHTML = "<p>The stored name is: <span class='selected'>" + localStorage.getItem('somename') + "</span></p>";
}
</script>
</body></html>
content.opf ファイルのマニフェストは次のとおりです。
<manifest>
<item id="js" href="javascript/ebook-test.js" media-type="text/javascript"/>
<item href="form.html" id="form1" media-type="application/xhtml+xml" properties="scripted"/>
<item href="ebook-sample.html" id="page1" media-type="application/xhtml+xml" properties="scripted"/>
<item href="ebook-sample-pg2.html" id="page2" media-type="application/xhtml+xml" properties="scripted"/>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
<item id="toc" properties="nav" href="toc.xhtml" media-type="application/xhtml+xml"/>
</manifest>
JavaScript で書かれたビットはまったく表示されません。私の次のステップは、iBooks Author でファイルを作成しようとすることですが、epub でこれができることを望んでいました。私が行ったグーグル検索のほとんどが iBooks Author のチュートリアルをもたらしたので、iBooks がこのようなことを行うことができるはずであることを私は知っています。
また、javascriptでいろいろ試してみました。私が見たほとんどの例では、html ファイルの下部にあるタグにコードが含まれていましたが、別の *.js ファイルと head タグで試してみましたが、違いはありませんでした。
どんな助けでも大歓迎です。bp