たてがき!進化版

    @@ -50,34 +50,35 @@ //本文を組版結果に置換 targetNode.parentNode.replaceChild(element,targetNode); + + // 進むボタン var NextButton = document.createElement('input'); NextButton.type = "button"; NextButton.value = "<進む"; NextButton.id = "next-button"; -// body要素にNextButtonエレメントを追加 -//document.getElementById("novel_attention").appendChild(NextButton); - -targetNode.parentNode.appendChild(NextButton); +// 戻るボタン +var PrevButton = document.createElement('input'); +PrevButton.type = "button"; +PrevButton.value = "戻る>"; +PrevButton.id = "prev-button"; +// ボタンを配置 +element.appendChild(NextButton); +element.appendChild(PrevButton); // 次ページボタンをクリック document.getElementById("next-button").onclick = function(){ paged_element.setNextPage(); + element.appendChild(NextButton); + element.appendChild(PrevButton); }; -// 戻るボタン -var PrevButton = document.createElement('input'); -PrevButton.type = "button"; -PrevButton.value = "戻る>"; -PrevButton.id = "prev-button"; - -// body要素にPrevButtonエレメントを追加 -document.getElementById("novel_attention").appendChild(PrevButton); - // 次ページボタンをクリック document.getElementById("prev-button").onclick = function(){ paged_element.setPrevPage(); + element.appendChild(NextButton); + element.appendChild(PrevButton); };
  • /*
     * @title たてがき!
     * @description 「小説家になろう」をiPhoneで縦書きにして読む
     * @include http://*
     * @license MIT License
     * @require http://nehan.googlecode.com/hg/nehan5.min.js
     * @require http://nehan.googlecode.com/hg/nehan5.css
     */
    
    
    //本文(divタグ)を取得
    var targetNode=document.getElementById("novel_honbun");
    
    //PagedElementの作成
    var paged_element = Nehan.createPagedElement();
    
    //スタイルの設定
    paged_element.setStyle("body", {
      "flow":"tb-rl", // 縦書きモード。横書きなら"lr-tb"にする。
      "width":320,
      "height":416,
      "font-size":16 // fontSize(camel case)とは書けない。
    });
    
    //ページ内容をセット
    //paged_element.setContent(targetNode.innerHTML);
    
    /*
    paged_element.setContent(targetNode.innerHTML, {
      onComplete : function(time){
         console.log("page_count = %d", paged_element.getPageCount());
         console.log("outline element = %o", paged_element.engine.createOutlineElement());
      }
    });
    */
    
    paged_element.setContent(targetNode.innerHTML, {
      onProgress : function(tree){
         console.log("%d page(%d percent) is done", tree.pageNo, tree.percent);
       },
      onComplete : function(time){
         console.log("finish! %f time", time);
      }
    });
    
    
    //組版結果のDOMを取得
    var element = paged_element.getElement();
    
    //本文を組版結果に置換
    targetNode.parentNode.replaceChild(element,targetNode);
    
    
    
    // 進むボタン
    var NextButton = document.createElement('input');
    NextButton.type = "button";
    NextButton.value = "<進む"; 
    NextButton.id = "next-button"; 
    
    // 戻るボタン
    var PrevButton = document.createElement('input');
    PrevButton.type = "button";
    PrevButton.value = "戻る>"; 
    PrevButton.id = "prev-button"; 
    
    // ボタンを配置
    element.appendChild(NextButton);
    element.appendChild(PrevButton);
    
    // 次ページボタンをクリック
    document.getElementById("next-button").onclick = function(){
      paged_element.setNextPage();
      element.appendChild(NextButton);
      element.appendChild(PrevButton);
    };
    
    
    // 次ページボタンをクリック
    document.getElementById("prev-button").onclick = function(){
      paged_element.setPrevPage();
      element.appendChild(NextButton);
      element.appendChild(PrevButton);
    };
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2017/08/05 12:34:59 - 2017-08-05
  2. 2015/02/22 23:40:33 - 2015-02-22
  3. 2015/02/22 23:30:02 - 2015-02-22
  4. 2015/02/22 23:29:19 - 2015-02-22
  5. 2015/02/22 23:28:03 - 2015-02-22
  6. 2015/02/22 23:27:33 - 2015-02-22
  7. 2015/02/22 23:26:28 - 2015-02-22
  8. 2015/02/22 23:25:47 - 2015-02-22
  9. 2015/02/22 23:25:05 - 2015-02-22
  10. 2015/02/22 23:24:27 - 2015-02-22
  11. 2015/02/22 23:23:34 - 2015-02-22
  12. 2015/02/22 23:20:27 - 2015-02-22
  13. 2015/02/22 23:13:20 - 2015-02-22
  14. 2015/02/22 23:12:07 - 2015-02-22
  15. 2015/02/22 22:59:16 - 2015-02-22
  16. 2015/02/22 22:42:53 - 2015-02-22
  17. 2015/02/22 22:32:07 - 2015-02-22
  18. 2015/02/22 22:30:30 - 2015-02-22
  19. 2015/02/22 22:25:51 - 2015-02-22