top


総投稿数 本 
no_

スポンサーサイト

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

電子書籍 epub:基本的な画面遷移が完成。こうなるととても充実した感じ ・・・ 【epub viewer を創ろ #6】

 2011-11-24
 電子書籍 epub viewer。朝から気になって、ひと仕事前に
基本的な画面遷移までたどり着く。
こうなると、充実感が出てきますね。

表紙カバーを表示。
   電子書籍 epub viewer 表紙カバーを表示
     ▲
     ▼
   電子書籍 epub viewer 目次切替1
   電子書籍 epub viewer 目次切替2


  詳しくは、追記に  ▼

more

************************************************
◎ 基本的な画面遷移完了
              :epub viewer を創ろ

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


まずは、目次のhref要素の処理


 目次である、
 ・epub2.0 の toc.ncx
 ・epub3.0 の toc.xhtml
 の中で、href そのままでは、このブラウザアプリでは
 当然、サーバー上の当該ファイル探しに行き、見れるはずがない。

 ■次のように置換する


<a title="本書の発行にあたり" onclick="javascript:viewGo_epub('Text/editor_in_chief_110421.xhtml','txt','bookContents');return false;" href="javascript:void();">本書の発行にあたり</a>

 ■処理関数は・・・
// 対応するページ/ファイル表示
function viewGo_epub(url,strtype,toareaid){
var tourl = thisdirdata+'/'+url;
if(strtype == 'txt'){//指定されたページを表示
var objdata = zip.files[tourl].inflate();
$('#imgView').css('display','none');
document.getElementById(toareaid).innerHTML = Utf8.decode(objdata);
$('#'+toareaid).fadeIn('fast');
}else{
if(strtype == 'img'){
if(zip.files[tourl].fileSize){
if(zip.files[tourl].fileSize < 100 * 1000){

var imgfiles = String(url).split('.');
var content_type = getContentTypeByFilename(imgfiles[1]);
var objdata = zip.files[tourl].inflate();
$('#'+toareaid).html('');
var ele = document.createElement('img');
ele.src = "data:"+content_type+";base64," + base64.encode(objdata);
ele.style.width = "400px";
document.getElementById('imgView').appendChild(ele);
$('#bookContents').css('display','none');
$('#'+toareaid).fadeIn('fast');
}
}
}}
}
 こんな感じで用意しておく。
 ちなみに、ソース中にある
 if(zip.files[tourl].fileSize < 100 * 1000){
 一時的な処理。
 ※実は、ファイルサイズ大きいと、zip.files[tourl].inflate();
  が too large でうまく動かない。
  ここの 実質許容サイズは、いづれ細かく
  調べなければならないぞ。(>自分)

今回の作業はすんなり。
次の課題は、表示されたXMLソース内の
 ・css ファイルや
 ・画像 ファイルの処理だな。


commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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