HTML5, css3, javascript(jQuery)を使ってのプレゼンツール

#動機と目的
この手の高機能なツールはいっぱいある。しかし、欲しい機能が揃ったものが見つからず、高機能のために改造も難しかったので自分で作ろうと思った。
そこで、勉強がてら自分で作ろうと思った。
###やりたいこと
ページごとの管理が楽なようにページに対応したHTMLファイルを読み込む。
ブラウザの大きさに対してデザインが可変でフルスクリーンに対応する。
シンプルな実装で改造しやすい。
###もう少し具体的に
1.初期化でページ情報を読み取り、レイアウトを表示、1ページ目を表示
2.ユーザーイベントによってページの移動等
###実際の実装
jQueryを使ってAjaxでページ情報、各ページのhtmlファイルを読み取る。
#####メインHTML
```html:index.html
<!DOCTYPE html>
<html id="html">
  <head>
<!-- スライドのレイアウト用 -->
    <link rel="stylesheet" type="text/css" href="style/main.css">
<!-- jQuery(適当に取ってくればOK) -->
    <script src="/js/jquery.js"></script>
<!-- コントロール用javascript -->
    <script src="js/presen.js"></script>
  </head>
  <body>
    <div id="slide">
    <div>
  </body>
</html>
```
```css:style/main.css
html {
    background-color: gray;
}
body {
    margin: 0px auto;
    padding:0px;
    background-color:white;
    position:relative;
}
body>#slide {
    position:absolute;
    width: 100%;
    height: 100%;
}
```
背景はわかりやすく全体を灰色にしてスライド部分(body)は白色にする。body要素のpaddingとmarginを0にすることによりwindow全体に張り付くようになる。**このbody要素はアスペクト比4:3を保ったままresizeされうようにjavascriptで制御する**。
実際のslideの配置その子要素である`div id="slide"`でありその要素は100%で親要素であるbodyに貼り付ける。内容は別HTMLにしてjQueryで読み込む。
#####リサイズ用javascript
```js:js/presen.js
function layout()
{
    var docEl  = document.documentElement;
    var width  = docEl.clientWidth;
    var height = docEl.clientHeight;
    var aspect = 4.0 / 3.0;
    if(width > height * aspect)
        width = height * aspect;
    else
        height = width / aspect;
    var css = {
        width: width + "px",
        height: height + "px",
        "font-size": height/20.0 + "px"
    };
    $(document.body).css(css);
}
```
この関数をload時イベントとwindowのresizeのイベントに登録することでwindowサイズに合わせてbodyもアスペクト比4:3を保ってリサイズされる。
#### ページング
```js:js/presen.js
$(function(){
    $.getJSON("js/example.json", function(json){
        pages=[];
        $.each(json, function(){
            pages.push(this.toString());
        });
//layoutの設定
        layout();
        window.addEventListener("resize", layout);
    });
});

function load_page(){ $('#slide').load(pages[index]); }

function next_page(){
    if( index==pages.length-1 ){ alert("次ページがありません"); }
    else{
        index++;
        load_page();
    }
}

function prev_page(){
    if( index==0 ){ alert("前ページがありません"); }
    else{
        index--;
        load_page();
    }
}
```
ページ情報はexample.jsonで管理する、このは関数はただjsonをよみこんでpagesに渡しているだけである。jsonファイルもただのlistで例えば`[ "title.html", "page.html, ... ]"`である。
ページングは`load_page(){ $('#slide').load(pages[index]); }`でしている。loadはjQueryの関数で引数を子要素として読み込む、cssやjavascriptも読み込めるし適用もされるようである、さらに新たに読み込むと昔のものは**捨てられる**。なので読み込んだ子要素は消されるので別のページでは同じidが使える、cssは全破棄されている...はず。(firefoxの開発ツールでは読み込んだcss要素は消えていました)
#### フルスクリーン化
```js
function fullscreen()
{
    var target=document.getElementById("html");
    console.log(document);
    if( slide.requestFullscreen            ) target.requestFullscreen();
    else if( slide.webkitRequestFullScreen ) target.webkitRequestFullScreen();
    else if( slide.mozRequestFullScreen    ) target.mozRequestFullScreen();
    else if (slide.msRequestFullScreen     ) target.msRequestFullScreen();
    else{
        alert("フルスクリーンモードには対応していません。");
    }
}
```                                                                  
最近プラウザもフルスクリーン化対応を進めているのでそれでフルスクリーン化する。
フルスクリーン化するとその子要素も全部引っ張られて(css、javascriptともに)最大化されるのでbodyの親要素のhtmlをフルスクリーン化することで対応した。
###ページサンプル(タイトルページ)
```html:title.html
<h1 id="title">Title</h1>
<h2 id="author">Author</h2>
<h3 id="date"></h3>

<script>
  var date = new Date();
  var elem=document.getElementById("date");
  var year=date.getFullYear();
  var month=date.getMonth()+1;
  var day=date.getDate();
  elem.innerHTML=year+"/"+month+"/"+day;
</script>
```
タイトルページ、日付はテストのためjavascriptに任せてみた。私の環境では上手く行った。
##まとめ
自分用プレゼンのテンプレートを作ってみた。
1.body要素のcssファイルの定義が全部の子要素に及ぶ。
2.新たなcssファイルもきちんと**(親要素を考えた上で)**適応される。
3.`id=#slide`の子要素は新たなページを読み込むと破棄される(昔のid等は気にする必要がない)。
メインレイアウト、各ページレイアウトが分離して使える。若干メイン部分でidや変数名を使っているが気にならないぐらいだと思う。
最後にユーザー制御を加えたjavascriptコードを
##### 制御用javascript
```js:js/presen.js
$(function(){
    ...(略)
    document.addEventListener("keydown", function(e){
        console.log(e);
        if( e.key==="ArrowRight" || e.keyCode==39 ){
            next_page();
        }
        else if( e.key==="ArrowLeft" || e.keyCode==37 ){
            prev_page();
        }
        else if( e.key==="f" || e.keyCode==70 ){
            index=0;
            fullscreen();
        }
        else if( e.key==="u" || e.keyCode==85 ){
            fullscreen();
        }
    });
});
...(略)
```
ただEventLisnterに追加しているだけなのでプレゼン環境によって書き換えてほしい。
HTML,javascript等はほとんど書いたことがないので間違いやもっと良い実装などがあれば教えてほしい。
#####参考にしたHPなど
[HTMLによるプレゼン作成のすすめ](http://webos-goodies.jp/archives/presentation_using_html.html)---レイアウト法などはほぼ丸パクリです。
[jQueryリファレンス:load](http://www.jquerystudy.info/reference/ajax/load.html)---ただ読みこむだけでなくていろいろ出来そう。