章節構造の抽出器

章節構造の抽出器を作れ〜!

  • 「章節構造の抽出器」をぐぐった。

ここがトップに出た。おう〜。

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#outlines
抽出器のアルゴリズムここにあるじゃん!


しか〜〜〜〜し、英語がわからん!
google の翻訳は意味分からんし、
yahoo の翻訳は、「function (root, enter, exit) {」を
「機能してください。かきまわして、入って、出てください」だ!
ちょっとエロいぞ!いいのか?こんなんで。


現在、にらめっこ中・・・・
http://www.html5.jp/tag/elements/headings-and-sections.html
http://web.g.hatena.ne.jp/vantguarde/20090420/1240157659
http://d.hatena.ne.jp/amachang/20090914/1252897184
http://d.hatena.ne.jp/amachang/20090915/1252999677

  • セクション要素

セクションをマークアップするための要素には、<body>、<section>、<nav>、<article>、<aside>、<h1>〜<h6>、<header>、<footer>、<address> の14種類がある。

  1. <body> 要素は、HTML文書内で1つだけ存在
  2. <article> 要素は、単独で成り立つ記事を意味する
  3. <section> 要素は、<article> 要素を構成する記事の部分
  4. <h1>〜<h6> 要素と<header> 要素は、そのセクションの見出し
  5. <nav> 要素は、そのセクションのナビゲーション
  6. <footer> 要素は、そのセクションのフッター
  7. <address> 要素は、そのセクションの連絡先
  8. <aside> 要素は、親セクションのテーマとは無関係を意味する
  • 見出し
  1. <header> 要素は<h1>と同位と見なす
  2. <header> 要素内の最初の見出し要素が<header>要素のテキスト
  • こんな風にするとして
var outline = HTML5Outliner.extract(document);
var elt = outline.createTableOfContents('ol', 'li');
  • 脳内の手順をこれから記述

少ないヒント(?)から妄想してみる
これはHTML5用で、document(.body) を走査して、概要を outline に、流し込む。
extract は、「引き抜く」
outline のデータ構造をどうするか?
outline オブジェクトに createTableOfContents がくっついてるのか!
(これは、prototypeで処理か)
createTableOfContents は、生み出せ!表を!ねたの!
表なのに 'ol'。<table>要素で作るのではなさそう。
でも 'ol' ならば、 'li' はセット。つまりこれは、'dl' & 'dt' & 'dd' も考えている?
単純に'ul' & 'li' との切り替えか。他はあるのか?
そもそも、'ol'と'ul'の2つだけなら、'li' は、いらないだろう

'div' & 'p' でも作れるなぁ。


もう一つ問題! elt は、何を意味するか?
createDocumentFragment() に、append したやつを返す。
すると、document.body の最初のノードにの前に、インサートとかするためか?


はて?ドキュメントの構造が巨大な場合、警告がでて止まりそうな気がする
タイマー使う? もしくは、組み合わせでやったような処理か?

function (root, enter, exit) {
  var node = root;
  start: while (node) {
    enter(node);
    if (node.firstChild) {
      node = node.firstChild;
      continue start;
    }
    while (node) {
      exit(node);
      if (node.nextSibling) {
        node = node.nextSibling;
        continue start;
      }
      if (node == root)
        node = null;
      else
        node = node.parentNode;
    }
  }
}

親から子、その子の子へとどんどんさがし、無ければ兄弟、なければその親、というふうにして enter(node); で登録すればよいのだろう?でもこれだと世代が伝わらない。

日本語ならオプションで「編、章、節、款、目、条、項、号」つけるか?

<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
    <h3>Sweet</h3>
    <p>Red apples are sweeter than green ones.</p>
  </section>
</section>

<section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
</section>
</body>

<ol>
  <li>Apples
    <ol>
      <li>Taste
        <ol>
          <li>Sweet
        </ol>
      <li>Color
    </ol>
</ol>  



zeff さんのコードを弄(いじ)る
http://oshiete.goo.ne.jp/qa/5996267.html

まずは、弄られやすいようにコードをここに勝手にインデントしてこぴぺ。
昨日書いたネタに「<さん」のつっこみがあります。まずはそこからです。

  • 省略できるもの
    • 0px の px
    • もし HTML5 なら、type="text/javascript"
    • new Image( [画像の幅, 画像の高さ] ); //←使ったこと無いけど
    • new Array → [ ];
    • クリックする画像を<a>でくくれば、cursor:pointer;
    • setAttribute( 'src' → Img[i].src =
  • 自分ならしないもの
    • navigator.userAgent.indexOf("MSIE") これは偽れる
    • グローバル変数の使い方
    • showDoorImg() は、スクリプト無効のときが
    • preLoad ()に、alt,width,height
    • preLoad ()に、配列(画像リスト)を渡し、fortuneImg を返す
    • img.setAttribute( 'onclick', 'showResult(this)');は、<さんが・・
    • window.onload これも最近つかわなくなったね
    • 最初から dl のなかに、扉の絵があてもいいのじゃないか?
    • display:none にしたところに画像を置いとく
  • 目的
    • 変更に強いプログラムを書けるようになって欲しい
wondow.onload = init;

なんてすると、そういうのが複数あったときに、

window.onload = function(){ init(); init2(); init3(); }

などとできない人がある。

wondow.onload = init;
wondow.onload = init2;

としても、最初は動かない。

document.body.innerHTML = '〜

のように書き換えたときでも、動くようなコード。

    • 応用の利きやすいようなプログラム書けるようになって欲しい >自分にも
    • 複数でも動くようなプログラムを書けるようになって欲しい >自分にも

グローバル変数を使っていては、同じような動作をするプログラムを書こうとすると

var Len1, Len2, Len3 ..

みたいになってしまう。関数も同じ数だけ。


>自信のあるとき以外は回答しないよう気をつけます。
そうじゃない!発言は自由だ!「失敗から沢山学ぼう!」だっ。そうなると俺は、もう発言できいことになる!

<!DOCTYPE html>
<head>
<title>TEST</title>


<style type="text/css">
<!--
body,dl,dd{ margin: 0px;padding: 0px; }
dl#x img{cursor:pointer;}
-->
</style>

<script type="text/javascript"><!--

var ImgList = new Array(
  ["image01.jpg","画像01"],
  ["image02.jpg","画像02"],
  ["image03.jpg","画像03"],
  ["image04.jpg","画像04"],
  ["image05.jpg","画像05"]
);
var Len = ImgList.length;
var w = 300,h = 225;
var fortuneImg = new Array( Len );


/* 画像先読み */
function preLoad ( ) {
  for( var i = 0; i < Len; i++ ){
  fortuneImg[i] = new Image( );
  fortuneImg[i].setAttribute( 'src', ImgList[i][0] );
  fortuneImg[i].setAttribute( 'alt', ImgList[i][1] );
  fortuneImg[i].setAttribute( 'width', w );
  fortuneImg[i].setAttribute( 'height', h );
  }
}


function showDoorImg(){
  var dl = document.getElementById("x");
  var dd = document.createElement('DD');
  var img = document.createElement('IMG');

  img.setAttribute('src',"image00.jpg");
  img.setAttribute('alt',"扉画像");
  img.setAttribute('width',w);
  img.setAttribute('height',h);

  if( navigator.userAgent.indexOf("MSIE") != -1 ) {
    img.setAttribute( 'onclick', new Function( 'showResult(this)' ) );
  } else {
    img.setAttribute( 'onclick', 'showResult(this)');
  }
  dd.appendChild( img );
  dl.appendChild( dd );
}


function showResult( t ) {
  var r = Math.floor( Math.random() * Len );
  t.src = fortuneImg[r].src;
  t.alt = fortuneImg[r].alt;
}


window.onload = function ( ) {
  preLoad();
  showDoorImg();
}

//-->
</script>
</head>

<body>
  <dl id="x">
    <dt>画像をクリックすると占い結果が出ます。</dt>
  </dl>
</body>

</html>

<!DOCTYPE html>
<title>TEST</title>

<style type="text/css">

dl, dd { margin: 0; padding: 0 }

</style>

<script>
document.write('<style type="text/css">#ImgList{display:none}</style>');
</script>

<body>
  <dl>
    <dt>画像をクリックすると占い結果が出ます。</dt>
    <dd>
      <img src="image00.jpg" alt="占いで切り替わる絵" width="300" height="250" id="hoge">
    </dd>
  </dl>

  <div id="ImgList">
    <img src="image00.jpg" alt="画像0">
    <img src="image01.jpg" alt="画像1">
    <img src="image02.jpg" alt="画像2">
    <img src="image03.jpg" alt="画像3">
    <img src="image04.jpg" alt="画像4">
  </div>

<script type="text/javascript"><!--
//@cc_on

var ImgList = document.getElementById( 'ImgList' ).getElementsByTagName( 'img' );

var onClickHandler = function (e/*Event*/) {
  var n = e./*@if(1) srcElement @else@*/ target /*@end@*/;
  var r = ImgList[ Math.random() * ImgList.length |0];

  n.src = r.src;
  n.alt = r.alt;
};

document.getElementById( 'hoge' )./*@if(1)
  attachEvent( 'on' + @else@*/
  addEventListener( /*@end@*/
    'click', onClickHandler, false );

// ページが替わっても、イベントを取り外さず、しかも単独なら
//-->
</script>