プレゼン用パネルイメージを表示する方法【bespoke.js】 DAD UNION

画像のスライド系みたいに、bespoke.jsを使ってプレゼンで紙芝居的に見せるためのパネルイメージを幾つかのテーマで表示させる方法をご紹介します。

Contents

プレゼン用パネルイメージを表示するCSSの記述例
プレゼン用パネルイメージを表示するHTMLの記述例
bespoke.jsを使ってプレゼンで紙芝居的に見せるためのパネルイメージを幾つかのテーマで表示させるJavaScriptの記述例
- demo.jsファイル内の記述
bespoke.js：プレゼン用のパネルとテーマを表示するデモページ
- ソース元：Bespoke.js

プレゼン用パネルイメージを表示するCSSの記述例

※必要に応じて変更して下さい。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:55px;
	line-height:1.4em;
	text-align:center;
	font-weight:normal;
}
section{
	font-size:60px;
	text-align:center;
	padding-top:25px;
	color:#FFF;
}
</style>

プレゼン用パネルイメージを表示するHTMLの記述例

※bodyタグにデフォルトテーマ（class=”coverflow”）を設定します。articleタグ内に切り替わりパネル（section）を複数用意します。

<body class="coverflow">

    <h1>キーボードの「←」「→」でパネルが左右に移動します。<br/>
    「↑」「↓」でテーマが変わります。</h1>

<article>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>
<section>13</section>
<section>14</section>
<section>15</section>
<section>16</section>
<section>17</section>
<section>18</section>
<section>19</section>
<section>20</section>
<section>21</section>
<section>22</section>
<section>23</section>
<section>24</section>
<section>25</section>
<section>26</section>
<section>27</section>
<section>28</section>
<section>29</section>
<section>30</section>
</article>

<script src="bespoke.js"></script>
<script src="demo.js"></script>
</body>

bespoke.jsを使ってプレゼンで紙芝居的に見せるためのパネルイメージを幾つかのテーマで表示させるJavaScriptの記述例

※bespoke.js、demo.jsファイルを読み込みます。demo.jsファイル内にパネルやテーマの切り替わり制御を記述してます。

<script src="bespoke.js"></script>
<script src="demo.js"></script>

demo.jsファイル内の記述

※キーボードの「←」「→」でパネルが左右に移動し、「↑」「↓」でテーマ（themes）が変わる様に設定してます。必要に応じて変更して下さい。

(function() {
	'use strict';

	var themes,
		selectedThemeIndex,
		instructionsTimeout,
		deck;

	function init() {
		deck = bespoke.from('article');
		initThemeSwitching();
	}

	init();

	function initThemeSwitching() {
		themes = [
			'coverflow',
			'classic',
			'cube',
			'carousel',
			'concave'
		];
		
		selectedThemeIndex = 0;

		initInstructions();
		initKeys();
		initSlideGestures();
		initThemeGestures();
		initButtons();

		selectTheme(0);
	}

	function initInstructions() {
		if (isTouch()) {
			document.getElementById('input-method').innerHTML = 'Swipe up and down';
		}

		instructionsTimeout = setTimeout(showInstructions, 5000);
	}

	function initKeys() {
		if (/Firefox/.test(navigator.userAgent)) {
			document.addEventListener('keydown', function(e) {
				if (e.which >= 37 && e.which <= 40) {
					e.preventDefault();
				}
			});
		}

		document.addEventListener('keydown', function(e) {
			var key = e.which;

			key === 37 && deck.prev();
			(key === 32 || key === 39) && deck.next();

			key === 38 && prevTheme();
			key === 40 && nextTheme();
		});
	}

	function initSlideGestures() {
		var main = document.getElementById('main'),
			startPosition,
			delta,

			singleTouch = function(fn, preventDefault) {
				return function(e) {
					if (preventDefault) {
						e.preventDefault();
					}
					e.touches.length === 1 && fn(e.touches[0].pageX);
				};
			},

			touchstart = singleTouch(function(position) {
				startPosition = position;
				delta = 0;
			}),

			touchmove = singleTouch(function(position) {
				delta = position - startPosition;
			}, true),

			touchend = function() {
				if (Math.abs(delta) < 50) {
					return;
				}

				delta > 0 ? deck.prev() : deck.next();
			};

		main.addEventListener('touchstart', touchstart);
		main.addEventListener('touchmove', touchmove);
		main.addEventListener('touchend', touchend);
	}

	function initThemeGestures() {
		var startPosition,
			delta,

			singleTouch = function(fn, preventDefault) {
				return function(e) {
					if (preventDefault) {
						e.preventDefault();
					}
					e.touches.length === 1 && fn(e.touches[0].pageY);
				};
			};

		document.addEventListener('touchstart', singleTouch(function(position) {
			startPosition = position;
			delta = 0;
		}));

		document.addEventListener('touchmove', singleTouch(function(position) {
			delta = position - startPosition;
		}, true));

		document.addEventListener('touchend', function() {
			if (Math.abs(delta) < 100) {
				return;
			}

			delta > 0 ? prevTheme() : nextTheme();
		});
	}

	function initButtons() {
		document.getElementById('up-arrow').addEventListener('click', prevTheme);
		document.getElementById('down-arrow').addEventListener('click', nextTheme);
	}

	function selectTheme(index) {
		var theme = themes[index];
		document.body.className = theme;
		document.getElementById('theme').innerHTML = theme[0].toUpperCase() + theme.slice(1);
		selectedThemeIndex = index;
	}

	function nextTheme() {
		offsetSelectedTheme(1);
		hideInstructions();
	}

	function prevTheme() {
		offsetSelectedTheme(-1);
		hideInstructions();
	}

	function offsetSelectedTheme(n) {
		selectTheme(modulo(selectedThemeIndex + n, themes.length));
	}

	function showInstructions() {
		document.querySelectorAll('header p')[0].className = 'visible';
	}

	function hideInstructions() {
		clearTimeout(instructionsTimeout);
		document.querySelectorAll('header p')[0].className = 'hidden';
	}

	function isTouch() {
		return !!('ontouchstart' in window) || navigator.msMaxTouchPoints;
	}

	function modulo(num, n) {
		return ((num % n) + n) % n;
	}

}());