シンプルなHTMLプレゼンテーションを作成
する為のフレームワークのご紹介です。最近
は変わった動きのするプレゼンツールをよく
見かけますが、シンプルなタイプはあまり
見かけませんので選択肢の一つとして。
スマフォのスワイプ操作にも対応しています。
パワポとかKeynote使いたくないから作ったらしいです。iPadやiPhoneのスワイプ操作にも対応しています。
slides
PCでは矢印キーで、タッチデバイスはスワイプで操作出来ます。JavaScriptにDojoが使われています。
以下動作サンプルです。
iPhoneはQRコードでGOです。
実機でテストしました。タッチデバイスで閲覧すると、PCでは「矢印で動かします」みたいなナビゲーションもタッチデバイス用に切り替えられます。
コード
Dojoは殆ど触ったことが無いのであまり触れないでおきます。
<script type="text/javascript"> (function(global) { global.require = { baseUrl: "js", paths: { "slides": "../slides", "css": "../css", "wire": "./wire", "domReady": "curl/domReady" } }; global.wire = { plugins: [{ module: 'wire/dom' }], slideContainer: { $ref: 'dom!slide-container' }, slidePath: 'slides/slides.html' }; })(window);</script><script type="text/javascript" src="js/curl.js"></script><script type="text/javascript"> require(['wire!slides-spec']);</script> |
必要なファイルを読み込んで上記設定を行います。で、パスを指定する。 → slidePath: ‘slides/slides.html’。これが実際に表示されるスライドのフォルダになります。
<div id="slide-container"><!--http://example.com/slide/slides.htmlが読み込まれる--></div> |
index.htmlには上記のように空のボックス要素がマークアップされています。この中に、../slidesが読み込まれます。なので、スライドの内容はslide/slides.htmlを編集する形となります。
ただ、スマフォには対応してるけどIEは8以下では動きませんのでコンテンツのターゲットは絞られます。HTMLのプレゼンツールのニーズも限られてるでしょうし、問題は無い気もしますけど、気になるなら手を加えないとですね。ご興味が有りましたら以下でぜひご覧下さい。
