top


総投稿数 本 
no_

スポンサーサイト

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

電子書籍 epub:XMLコンテンツ内に含まれるcssソースを反映させる ・・・ 【epub viewer を創ろ #7】

 2011-11-25
 電子書籍 epub viewer。なんか凄く楽しいぞ。
本業終えて、さっそく続きを・・・
今回は、各XMLコンテンツ(html5)に含まれる
cssソースが反映されるように処理。

今までは
   電子書籍 epub viewer 目次切替1
 だったのが、cssソースが反映され、
     ▼
   電子書籍 epub viewer cssソースが反映
 でも、ほかのところにまで、cssの影響が及んでしまうので
 そこは、最後のお化粧で、固定しないとな。


  詳しくは、追記に  ▼

more

************************************************
◎ XMLコンテンツ内に含まれるcssソースを反映
              :epub viewer を創ろ

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


最初は・・・


 今までと同じやり方。
 ・XMLコンテンツを解凍後(zip.files
 ・Utf8.decode して
 ・作業用div に流し込み
 ・getElementsByTagName で、link要素検出
 ・最終的に書き出すエリアに
 ・両側に <style type="text/css"> ~ </style>
  つけて直接書き出し
 ・元のソースからは
  ・link要素すべて削除する ( *1 )
 ・・・なんて、やってたのだけど・・・

 ■一度、「作業用div に流し込んだ段階で」
  javascriptアラート!(リンク先が見つからない)
  ※すでに実際のソースからは削除されているとはいえ ( *1 )
   これは気分悪い。


で、

変数内に流し込み、その中で処理することに


 非常に原始的な方法。
 モノホンのプログラマでない私は、エレガントなソース記述が苦手で
 かなり「力技」。それでも、いづれこれに「エラートラップ」を
 書き重ねてゆけば、ほぼ使えるだろう・・・
 非常に楽天的だけども。

実際


 ■変数に、解凍>utf8デコードしたものを流し込み
var objdata = zip.files[tourl].inflate();
var tempbody = Utf8.decode(objdata);
var cssList = [];

 ■力技で stylesheet要素抜き出し
var tempflg = 1;
while (tempflg == 1){
var temp_pos1 = tempbody.indexOf("<link",0);
var tempcut = tempbody.substring(temp_pos1);
var temp_pos2 = tempcut.indexOf(">",0);
tempcut = tempcut.substring(0,(temp_pos2 + 1));
if(tempcut != ''){
if(tempcut.indexOf("stylesheet",0) >= 0){
var temp_pos21 = tempcut.indexOf("href",0);
var tempcut21 = tempcut.substring((temp_pos21+4));
var temp_pos22 = tempcut21.indexOf(" ",0);
tempcut21 = tempcut21.substring(0,(temp_pos22 + 1));
var tempcss = replaceAll(tempcut21, "\"", "");
tempcss = replaceAll(tempcss, "\'", "");
tempcss = replaceAll(tempcss, "=", "");
tempcss = replaceAll(tempcss, "../", "");
tempcss = replaceAll(tempcss, " ", "");
cssList.push(tempcss);
}
tempbody = replaceAll(tempbody, tempcut, "");
}
if(tempbody.indexOf("<link",0) >= 0){
}else{ tempflg = 0; }
}
 ここ、エレガントなコード、誰か教えてくれないかなぁ・・・
 ■直接書き込む cssソースを得て、
var cssdata = "";
if(cssList.length > 0){
for(var i=0; i<cssList.length; i++) {
var cssurl = cssList[i];
cssurl = thisdirdata+'/'+cssurl;
if(cssdata != ''){ cssdata += "\n"; }
cssdata += Utf8.decode(zip.files[cssurl].inflate());
}
}

 ■合体させて、表示エリアに書き込み・表示
// 書き出しhtml
var outhtml = "";
if(cssdata != ''){
outhtml = "<style type=\"text/css\">\n";
outhtml += cssdata;
outhtml += "</style>\n";
}
outhtml += tempbody;

$('#imgView').css('display','none');
document.getElementById(toareaid).innerHTML = outhtml;
$('#'+toareaid).fadeIn('fast');

 次は、コンテンツ内の画像の処理だな。
   電子書籍 epub viewer コンテンツ内の画像の処理だな
commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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

 

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