html5 スライド

html5 スライドだけど、 一切 Google API など使わずに、純粋に html5 + JavaScript でかけることがわかった。 Webに置く必要もない。ローカルファイルとして動く。 外部の API やよけいな JS や CSS を読み込む必要なし。

ただ全部コードを読んで、 JavaScript のコードが body 要素の最後に書かれていたので、見落としていたのでした。

        var currentSlideNo = 1;
        var slides = document.getElementsByClassName('slide');

        (function() {
          document.addEventListener('keydown', handleBodyKeyDown, false);
   
          var els = slides;
          for (var i = 0, el; el = els[i]; i++) {
            addClass(el, 'slide');
          }
          updateSlideClasses(); 
        })();

この辺が初期化しているところで、まず、handleBodyKeyDown という関数でキーボード入力を処理しますよ、 ということと、 addClass でスライド一枚一枚の class を生成しているよね。 ここでややこしいのは Slide というクラスを作っているわけではなくて、 ここでいうクラスというのは css の class のことだってことだわな。

        var handleBodyKeyDown = function(event) {
          switch (event.keyCode) {
            case 37: // left arrow
              prevSlide();
              break;
            case 39: // right arrow
              nextSlide();
              break;
          }
        };

これが、キー入力処理の本体で、prevSlide、nextSlide でスライド遷移。

        var nextSlide = function() {
          if (currentSlideNo < slides.length) {
            currentSlideNo++;
          }
          updateSlideClasses();
        };
        
        var prevSlide = function() {
          if (currentSlideNo > 1) {
            currentSlideNo--;
          }
          updateSlideClasses();
        };

これが、prevSlide と nextSlide の本体で、単に currentSlideNo をインクリメントしたりしてるだけだわな。 で、 updateSlideClasses で実際に表示させていると。

        var changeSlideElClass = function(slideNo, className) {
          var el = getSlideEl(slideNo);

          if (el) {
            removeClass(el, 'past current future');
            addClass(el, className);
          }
        };

        var updateSlideClasses = function() {
          window.location.hash = "slide" + currentSlideNo;
          changeSlideElClass(currentSlideNo - 1, 'past');
          changeSlideElClass(currentSlideNo, 'current');
          changeSlideElClass(currentSlideNo + 1, 'future');            
        };

class を動的に変更することによって、current を中央に配置し、 past を左端に、future を右端に表示。 なるほど。言われてみればそうかと。

あとは css の方で

        -webkit-transition: -webkit-transform 1s ease-in-out; 

とかってやるとなめらかにスライド移動したりとか、

        -webkit-transition: margin 0.25s ease-in-out; 

スライドをぴっちりウィンドウに合わせたりしてるんだと思う。 簡略版 おいときますので後はソースを見てみて。 mozilla 固有の css は全部削って、webkit のだけ残したんだが、 firefox3.6 でも -webkit-transition の部分以外はなんとかできてるのがけなげだな。 chrome だとばっちり動く。

いやまあ、これからは、html5の練習も兼ねて、プレゼン資料は html5でがりがり書くかなあと。 学生にも書かせるかなと。