iPadやiPhoneなどのスワイプ操作にも対応の、シンプルなHTML製プレゼンテーションを作成する為のフレームワーク・slides

シンプルなHTMLプレゼンテーションを作成
する為のフレームワークのご紹介です。最近
は変わった動きのするプレゼンツールをよく
見かけますが、シンプルなタイプはあまり
見かけませんので選択肢の一つとして。
スマフォのスワイプ操作にも対応しています。

パワポとかKeynote使いたくないから作ったらしいです。iPadやiPhoneのスワイプ操作にも対応しています。

slides

PCでは矢印キーで、タッチデバイスはスワイプで操作出来ます。JavaScriptにDojoが使われています。

以下動作サンプルです。

Sample

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のプレゼンツールのニーズも限られてるでしょうし、問題は無い気もしますけど、気になるなら手を加えないとですね。ご興味が有りましたら以下でぜひご覧下さい。

briancavalier / slides