章節構造の抽出器
章節構造の抽出器を作れ〜!
- 「章節構造の抽出器」をぐぐった。
ここがトップに出た。おう〜。
- HTML5: outline
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種類がある。
- <body> 要素は、HTML文書内で1つだけ存在
- <article> 要素は、単独で成り立つ記事を意味する
- <section> 要素は、<article> 要素を構成する記事の部分
- <h1>〜<h6> 要素と<header> 要素は、そのセクションの見出し
- <nav> 要素は、そのセクションのナビゲーション
- <footer> 要素は、そのセクションのフッター
- <address> 要素は、そのセクションの連絡先
- <aside> 要素は、親セクションのテーマとは無関係を意味する
- 見出し
- <header> 要素は<h1>と同位と見なす
- <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 =
- 自分ならしないもの
- 目的
- 変更に強いプログラムを書けるようになって欲しい
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>