Kindle paperwhite 使いこなそうと思ったが、Javascriptからは微妙だぞこれ！

Kindle paperwhite

反応が悪いが click イベントで画面の両端を触れたことを認知するっことはできた。
しかしページ内でのリンクが機能しない！
eindow.moveTo は、効かない。今の所スクロールする手立てがない。
唯一方法としては、クリックイベントをハックして、そのキーが押されたらそれに対応する部分だけを表示して切り替える方法しか思いつかない。

  • -

ふと思いついたこと。

    • ページ内リンクで指定された要素を基準に、その兄（親）方向の要素を非表示にする。
    • 基準となる要素から子（弟）要素をたどりその要素（ブロック型）の高さを取得する。
    • ページの高さから減算しページに収まる範囲まで表示し、それ以降は非表示にする。

さぁ誰か考えてっくれ！

    • display:none の状態だと、clientHeight は取得できない。
    • 一度 none にしたとして、全てを block で戻すわけにはいかない。記憶しておかなければならない。
    • inline 型と block型の見極めはどうするか？

とにかくスクリプトが遅い。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>Kindle</title>

<style>
body {
  margin: 0 30px;
  font-size: 300%;
  width: 700px;
}
div {
  height:500px;
  border:4px black doubel;
  display: none;
}
</style>

<body>
<table border="1">
<tr>
  <td>A <td>B <td>C <td>D
  <td><a href="#A">A</a>
  <td><a href="#B">B</a>
  <td><a href="#C">C</a>
  <td><a href="#D">D</a>
<tr>
  <td colspan="8">f
</table>

<div id="A">
<h1>A</h1>

</div>


<div id="B">
<h1>B</h1>

</div>
<div id="C">
<h1>C</h1>

</div>
<div id="D">
<h1>D</h1>

</div>
<script>
var t=document.querySelector('table');

function handler (event) {
  var e = event.target, tx,mess='';

  var x = event.pageX;
  var L_area = 100;
  var R_area = 1072 - L_area;
  var lr = x < L_area ? -1: R_area < x ? 1 : 0;//みぎか左かの判定結果

  if ('TD' === e.nodeName) {
    tx = e.textContent.trim();
  
    var div = document.querySelectorAll ('div');
    for (var d, i= 0; d = div[i]; i++) {
      d.style.display = (d.id==tx) ? 'block': 'none';
      if (d.id==tx) {
        mess = d.clientHeight;
      }
    }
    t.rows[1].cells[0].textContent = tx + mess;
  }
  if ('A' === e.nodeName) {
    tx = e.textContent.trim();
    t.rows[1].cells[0].textContent = tx;
    var div = document.querySelectorAll ('div');
    for (var d, i= 0; d = div[i]; i++) {
      d.style.display = (d.id==tx) ? 'block': 'none';
      if (d.id==tx) {
        mess = d.clientHeight;
      }
    }
    t.rows[1].cells[0].textContent = tx + mess;
  }

}
document.addEventListener ('click', handler, false);
</script>
</body>
</html>

書きかけ中、Kindle では試していなけれどページ内リンクは動くかも？

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>Kindle</title>

<style>
body {
  margin: 0 30px;
  font-size: 230%;
  width: 700px;
  line-height:300%;
}
div {
  border:4px black doubel;
//  display: none;
}

</style>

<body>

<div id="A">
<h1>A</h1>
<ol>
  <li>1abc
  <li>2abc
  <li>3abc
  <li>4<a href="#B">B</a>
  <li>5abc
  <li>6abc
  <li>7abc
  <li>8abc
  <li>9abc
  <li>10abc
  <li>11abc
  <li>12abc
  <li>13abc
  <li>14abc
</ol>
</div>

<div id="B">
<h1>B</h1>
<ol>
  <li>BBBBBBBBBB<span id="Z">ZZZZZZZZZ</span>
  <li><a href="#C">C</a>
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
  <li>BBBBBBBBBB
</ol>
</div>
<div id="C">
<h1>C</h1>
<table border="1" class="fix">
<tr>
  <td><a href="#A">A</a>
  <td><a href="#B">B</a>
  <td><a href="#C">C</a>
  <td><a href="#D">D</a>
<tr>
  <td colspan="8">f
</table>

</div>
<div id="D">
<h1>D</h1>
<a href="#A">A</a>
</div>
<script>

(function () {
  var SCROLL_AREA_WIDTH = 100;
  var buffer_e = [ ], buffer_d = [ ];


  function getNext (e) {
    var n;
    if (n = e.firstElementChild ) return n;
    do {
      if (n = e.nextElementSibling) return n;
    } while (e = e.parentNode);
    return null;
  }



  function getPrev2 (e) {
    var n, m;
    if (n = e.previousElementSibling) {
      while (m = n.lastElementChild)
        n = m;
      return n;
    }
    return e.parentNode;
  }

  
  function getPrev (e) {//兄要素の子は探らないで親へ
    return e.previousElementSibling || e.parentNode;
  }

  

  //前方の要素を非表示にする
  function hidePrev (e) {
    var p = e.parentNode;

    while (e = getPrev (e)) {
      if ('HTML' === e.nodeName) break;
      if (p == e) {
        e.style.display = 'block';
        p = p.parentNode;
        continue;
      }

      var v = getComputedStyle (e, '').display;
      buffer_e.push (e);
      buffer_d.push (v);
      e.style.display = 'none';
    }
  }


  function getPrevIsNotInline (e) {
    do {
      var v = getComputedStyle (e, '').display;
      if ('inline' !== v)
        break;
      e = e.parentNode;//親がブロック要素まで inline では？
    } while (e = getPrev (e));
    return e;
  }



  function hideNext (e) {
    while (e = getNext (e)) {
      if ('HTML' === e.nodeName) break;
      if ('SCRIPT' === e.nodeName) continue;
      
      var v = getComputedStyle (e, '').display;
      buffer_e.push (e);
      buffer_d.push (v);
      e.style.display = 'none';
    }
  }
  
  //__________________________________________________
  
  function Scroller () {
    this.root   = document;
    this.height = document.documentElement.clientHeight;
    this.first  = getNext(document.body);//表示されている最初の要素
    this.last   = null;//表示されている最後の要素
    
    document.addEventListener ('click', this, false);
    this.disp (this.first);
  }
  
  
  function scrollUp () {
    this.disp ();
  }
  
  
  function scrollDown () {
    this.disp (this.last);
  }
  
  
  function getHeight (e) {
    e.style.visibility = 'hidden';
    e.style.display = 'block';
    var h = e.getBoundingClientRect ().top;
    e.style.display = 'none';
    e.style.visibility = 'visible';
    return h;
  }
  
  
  function disp (e) {
    if ('undefined' === typeof e)
      return;
    
    var height = this.height, h;
    hidePrev (e);
    this.first = e;

    do {
      if ('SCRIPT' === e.nodeName) continue;
      if (getHeight (e) < height) {
        e.style.display = 'block';
      }
    
      else {
        this.last = e;
        console.log(e);
        hideNext (e);
        break;
      }
    } while (e = getNext (e));
    
  }

  
  
  //イベント処理
  function handleEvent (event) {
    var target = event.target;
    var doc = target.ownerDocument;
    var xp = event.pageX, LR = 0;
    var sw = this.root.documentElement.clientWidth - SCROLL_AREA_WIDTH;
    var href;
    
    //クリック処理
    if ('click' === event.type) {
      //ページ内リンク処理
      if ('A' === target.nodeName) {
        if (href = target.getAttribute('href')) {
          if (0 === href.indexOf ('#')) {
            this.disp (doc.querySelector (href));
            event.preventDefault ();
          }
        }
      }
      //画面の左右クリックでスクロール処理
      else {
        if (xp < SCROLL_AREA_WIDTH) this.scrollUp ();
        if (xp > sw) this.scrollDown ();
      }
    }
  }

  //__

  Scroller.prototype.disp      = disp;
  Scroller.prototype.scrollUp    = scrollUp;
  Scroller.prototype.scrollDown  = scrollDown;
  Scroller.prototype.handleEvent = handleEvent;
  
  //__
  
  this.Scroller = Scroller;

}) ();

//s. disp ();

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
  false
);

var isKindle = /^Mozilla.+Linux.+AppleWebKit.+KHTML.+Safari.+/;
if (isKindle.test(window.navigator.userAgent));
  new Scroller ();

</script>
</body>
</html>