top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1361

電子書籍 epub:TOCファイル 2.0バージョンepubファイルを考慮してこれをどうハンドリングするか ・・・ 【epub viewer を創ろ #4】

 2011-11-22
 電子書籍 epub viewer。創るのは面白いですねぇ。
みなさんも是非。
さて、本日もう一投稿。
今、単純に表示している「TOCファイル(ナビゲーション用のファイル)」

下記で示しているのは、epub2ファイルなのです。
   電子書籍 epub viewer epub2 ファイル形式がNCX で、独特なXML構造なんですね。


epub3であれば、
   電子書籍 epub viewer epub3 ファイル形式がHTML5 なので、扱いやすいですね。
とはいえ、リンクなどは変換しないといけないけれど・・・


  このあたり、追記に  ▼

more

************************************************
◎ TOCファイルのハンドリングをやってみる
              :epub viewer を創ろ

************************************************


TOCファイル(ナビゲーション用のファイル)


 EPUB日本語基準研究グループ
 「EPUB3日本語ベーシック基準」に、
   EPUB3ではNCXは廃止
とあるように、今後はすべて HTML5形式で扱えるのだろうけど、
今はまだ過渡期。epub2ファイルも多いだろうし・・・。
・epub2:toc.ncx と、
・epub3:toc.xhtml を比べてみると


【 epub2 ファイル 】
   epub2:toc.ncx


【 epub3 ファイル 】
   epub3:toc.xhtml

 こんな感じ。

 とにかくこの TOCファイル(ナビゲーション用のファイル) は、
あくまでも目次コンテンツとして利用するわけだから、作者の レイアウト意思を尊重することより、このViewer で自由にハンドリングできるように、配列リスト化するのがいいのだろな。


TOCファイル ハンドリング手順


【 1:epub2.0 の toc.ncx 構造 】
 ※次のような tag アトリビュート構造になっているようだ。

  • <head>

    • <meta name="dtb:uid">
      ※ユニークID(content.opf の dc:identifier と同じ)。

    • <meta name="dtb:depth>
      ※navMap における深さを示す。1~。
       これで色々な入れ子構造を操作しているのだろう。

    • <meta name="dtb:totalPageCount>
      デフォルトで 0。

    • <meta name="dtb:maxPageNumber>
      デフォルトで 0。



  • <docTitle>

    • <text>
      ※名前通り、タイトル。



  • <navMap>
    ※コンテンツの配置テーブルで、この子要素に
     複数の navPoint 要素を配置して
     これを目次とする、ということのようだ。

    • <navPoint id="navPoint-1" playOrder="1">
      ※playOrder はその名前通り整列順。1~。

      • <navLabel>

        • <text>
          ※目次アイテム(表示文字列)。



      • <content src="Text/item.xhtml">
        ※これが実際のファイルだ。






【 2:読み込んだXMLデータを hidden作業用のdiv に格納 】


 ※バイナリで読み込み、zip.js で解凍展開したデータを
  display:none の div に一時格納。
var d = document.getElementById("epubxml");
d.innerHTML = xmldata;

【 3:Utf8.decode で返す関数を用意しておき 】


// meta データの内容を返す(Utf8.decode)
function metadataRt(sobj,strtag){
var metadatas = sobj.getElementsByTagName(strtag);
if(metadatas[0]){
var tempdata = replaceAll(metadatas[0].innerHTML, "&nbsp;", " ")
return Utf8.decode(tempdata);
}else{ return ''; }
}

 ※ちなみに、ソースに &nbsp; があると
  文字化けしてしまうので、置換処理。
 ※replaceAll は、JavaScript 文字列の置き換え - replace/replaceAll
  こちらで教えていただいた。ありがとうございます。

【 4:まず タイトルを取得 】


var fileList = [];
var tarobj = d.getElementsByTagName("docTitle")[0];
fileList.push(metadataRt(tarobj,'text'));

【 5:続けて 各ページタイトルを取得 】


var navPoints = d.getElementsByTagName("navMap")[0].getElementsByTagName("navPoint");
for(var i=0; i<navPoints.length; i++) {
var tarobj = navPoints[i].getElementsByTagName("navLabel");
fileList.push(metadataRt(tarobj[0],'text'));
}

【 6:さらに ソースファイル名を取得 】


var navPoints = d.getElementsByTagName("navMap")[0].getElementsByTagName("navPoint");
for(var i=0; i<navPoints.length; i++) {
var tarobj = navPoints[i].getElementsByTagName("content");
if(tarobj[0].getAttribute("src")){
fileList.push(Utf8.decode(tarobj[0].getAttribute("src")));
}
}

【 7:取得したデータで書き出し用ソースを用意・表示 】

$('#bookIndex').html('');
var outhtml = "<dl>";
outhtml += "<dt>";
outhtml += tocfxmltitle[0];
outhtml += "</dt>";
outhtml += "<dd>";
outhtml += "<ul>";
for(var i=0; i<tocfxml.length; i++) {
if(
(tocfxml[i]!='')&&(tocfxmlsrc[i]!='')
){
outhtml += "<li><a href=\""+tocfxmlsrc[i]+"\" title=\""+tocfxml[i]+"\">";
outhtml += tocfxml[i];
outhtml += "</a></li>";
}
}
outhtml += "</ul>";
outhtml += "</dd>";
outhtml += "</dl>";
$('#bookIndex').html(outhtml); $('#bookIndex').fadeIn('fast');

 ※jQuery好きなので、随所で使ってます。
  これで一応、2.0でも表示上は、
   epub2:toc.ncx
  となる。

でも、これではリンククリックしてもサイトにそのファイルがあるわけじゃないからダメなんだな。
ま、今日はここまで。仕事に復帰だ。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1361-64b6906e
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。