fc2ブログ

top


総投稿数 本 
no_1375

電子書籍 epub:しおり機能(ここチェック、あるいはここまで ってやつ) ・・・ 【epub viewer を創ろ #16】

 2011-12-02
 電子書籍 epub viewer。しおり機能。
このあたりから、また面白いことになってきますねぇ。
どうやった実現するか・・・いやその前に
どのような機能にするか。

 ◆しおり機能
 こんな感じの機能かなぁ。

  □画面で読んでいるとき、
   ・ここに "しおり" って時に
   ・ワンクリックで "しおり" が付けられて・・・
  □次回
   ・同じ epub 開いたときに
    ・"しおり" があれば、それを示して
     ・クリックすれば そこに移動
     ・設定によっては、epub 開いたときに
      自動的に移動
  □"しおり" は複数付けられて・・・
   ・色が違ってつけられる、とか
   ※雑誌で気になったページの片隅を
    折っておいたりするもんなぁ。
    (個人的には、後でほとんど見ないけど)

 とりあえず、実装。
   電子書籍 epub viewer しおり機能(ここチェック、あるいはここまで ってやつ)
  ただし、今回は時間の関係で、
  ひとつの "しおり"だけれど。


  詳しくは、追記に  ▼

more

************************************************
◎ しおり機能(ここチェック、あるいはここまで ってやつ)
              :epub viewer を創ろ

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


まずは・・・

初期変数の再整備


 ※本日現在
var thisfilename = ""; //filename
var thistitle = ""; //title
var thisversion = ""; //epub version
var thisdirdata = ""; //contents dir
var thistopurl = ""; //cover
var thisindex_max = 0; //max index
var thisnowurl = ""; //nowurl
var maxlimitindex = 99999; //limit index
var zip = "";

var nowpage_this = 0; //nowpage_this
var thisshioriVars = "";
var thisshioriid ="";
var nowshioriid ="";
 しおりの情報保持に
 関わる部分を用意しておいて・・・

ページ表示廻りの関数を改変


// ページナビ
var nowpage_this = maxlimitindex; // 表紙
function pageNavi(intnum){
if(intnum == maxlimitindex){ //表紙
if(thistopurl!=''){ nowpage_this = maxlimitindex; viewGo_epub(thistopurl,'img','imgView',thistitle,maxlimitindex); }
}else{
if((nowpage_this == maxlimitindex)&&(intnum == 1)){ nowpage_this = 0;
}else{
nowpage_this = parseInt(nowpage_this) + parseInt(intnum);
}
if(nowpage_this < 0){ nowpage_this = 0;
}else{if(nowpage_this >= thisindex_max){ nowpage_this = (thisindex_max - 1); }}
pageView(nowpage_this);
}
}
// ページ表示(by index)
function pageView(tarindex){
var v = document.getElementById('epubindex_'+tarindex);
if(v){ $(v).click(); }
}
// ページ表示(by index)
function pageShioriView(){
if(nowshioriid>0){ pageView(nowshioriid); }
}
 まぁ、相当再掃除が必要だけれど。

epubファイルを読込・表示した際


 しおりの記録は、Cookie利用して、
// しおりボタン
var shiori ="";
thisshioriVars = "shiori_"+thisfilename;
thisshioriid = getCookie(thisshioriVars);
nowshioriid =thisshioriid;
if((nowshioriid !='')&&(nowshioriid > 0)){
temp_shioriid = "shiori_"+nowshioriid;
shiori +="<li id='go_shioribt'><a href=\"javascript:void();\" onclick=\"javascript:pageShioriView();return false;\" title=\"しおりページを表示\"><img src=\"/images/epubviewer/ic_shiori1.gif\" width=\"16\" height=\"16\" alt=\"しおりページを表示\" /></a></li> ";
}
shiori +="<li id='set_shioribt'><a href=\"javascript:void();\" onclick=\"javascript:setShiori(1,-1,1);return false;\" title=\"このページにしおりを付ける\"><img src=\"/images/epubviewer/ic_shiori0.gif\" width=\"16\" height=\"16\" alt=\"このページにしおりを付ける\" /></a></li>";
outhtml += "<div id='area_btshiori' class='float_left clearfix' style='padding-top:6px;padding-right:6px;'>";
outhtml += shiori;
outhtml += "</div>";
 とする。

各ページが表示された際


 現在のINDEX値(num) を判断して
thisshioriVars = "shiori_"+thisfilename;
thisshioriid = getCookie(thisshioriVars);
temp_shioriid = "shiori_"+thisshioriid;

・・・・・

// しおりOnOff
if(thisshioriid!=''){
if(thisshioriid == intindex){ setShiori(1,intindex,0);
$("#"+temp_shioriid).css('display','block');
}else{ $("#"+temp_shioriid).css('display','none'); }
}

・・・・・
 ※しおりが表示されるエリアは
<div id='epub__cconts' class='clearfix'></div>
 として用意し、cssで固定位置にしてある。
#epub__cconts {
width:100%;
height:30px;
padding:5px 20px 0 10px;
position:fixed;
top:32px;
width:60%;
}
#epub__cconts li{
list-style:none;
padding:10px;
}
#epub__cconts img{
cursor:pointer;
}
#area_btshiori li{
float:left;
list-style:none;
padding-right:2px;
}

 そして 肝心のしおりのセットオンオフだけれど、
 いづれ複数セットできることを考え、
 単純な display onoff 的なやり方ではなく、

jQuery でオブジェクト追加と削除


 これを利用させていただき、追加あるいは、削除する。
// しおり
function setShiori(intwork,intnum,opcookie){
var intDay = 365;
if(intwork == 1){ //set
if(intnum == -1){ intnum = nowpage_this; }

var exists0 = $.grep($("#area_btshiori li"), function(item){
var itemid = $(item).attr("id"); return (itemid == 'go_shioribt');
});
if (exists0.length == 0) { // 存在しない
// しおりGoボタン
var shioriimb0 ="<img src=\"/images/epubviewer/ic_shiori1.gif\" width=\"16\" height=\"16\" alt=\"しおりページを表示\" />";
var temp_id0 ='go_shioribt';
$("<li/>")
.attr({
id: temp_id0,
})
.addClass("float_left")
.append(shioriimb0)
.click(function(){
pageShioriView();
})
.prependTo("#area_btshiori");
}

var exists = $.grep($("#epub__cconts li"), function(item){
var itemid = $(item).attr("id"); return (itemid == 'shiori_'+intnum);
});
if (exists.length == 0) { // 存在しない
// しおりボタン
var shioriimb ="<img src=\"/images/epubviewer/shiori.png\" width=\"32\" height=\"32\" alt=\"しおり(クリックで解除)\" />";
var temp_id ='shiori_'+intnum;
$("<li/>")
.attr({
id: temp_id,
})
.addClass("float_left")
.append(shioriimb)
.click(function(){
setShiori(-1,intnum,1);
$(this).remove()
})
.prependTo("#epub__cconts");
}
nowshioriid = intnum;
if(opcookie == 1){ SetCookie(intDay, thisshioriVars, nowshioriid, 1, '', location.pathname); }
}else{
if(intwork == -1){ //del
$('#go_shioribt').remove();
thisshioriid = ""; nowshioriid = "";
if(opcookie == 1){ DelCookie(thisshioriVars); }

}else{ //view


}}
}
 しかし、ほんと jQueryは便利。
 はっきりいってこれなかったら、大変だよなぁ。
 個人的な癖で、jQuery と 通常のDOM操作が混じりこんでいるのは
 スタンス的にあまり気にしない・・・です。
 ともあれ、これで、
 (単独だけれど)「しおりの機能」は組み込んだ。

●epub文書を表示した際・・・


先回 しおりを設定していれば・・・
   電子書籍 epub viewer 先回 しおりを設定していれば・・・
 赤い "しおりアイコン(ボタン)" が表示され、
   電子書籍 epub viewer 赤い 'しおりアイコン(ボタン)' が表示され
 クリックすれば、
     ▼
   電子書籍 epub viewer 当該ページ(構造的には 当該ファイル)が表示
 当該ページ(構造的には 当該ファイル)が表示される。
 ※しおりが付いている


付いているしおりをクリックすれば・・・
   電子書籍 epub viewer 付いているしおりをクリックすれば・・・
     ▼
   電子書籍 epub viewer しおりははずれ、上部の 赤いボタンアイコンもなくなる
 しおりははずれ、上部の 赤いボタンアイコンもなくなる。


しおりを付けたい場合は・・・
   電子書籍 epub viewer 黒いボタンアイコンをクリックすると
 黒いボタンアイコンをクリックすると
     ▼
   電子書籍 epub viewer 現在見ているページにしおりが追加
 現在見ているページにしおりが追加され、その情報が
 クッキーに保存される。


 ひとまずOK。
 師走で忙しくなってきて、あまり時間がとれなくなってきた・・・
 他に始めたこともあるし。
commentsコメント
comment_post












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

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

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

 

リンク集

 

最近の記事

 

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

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