画像のスライド系みたいに、bespoke.jsを使ってプレゼンで紙芝居的に見せるためのパネルイメージを幾つかのテーマで表示させる方法をご紹介します。
Contents
ディスプレイ広告
プレゼン用パネルイメージを表示するCSSの記述例
※必要に応じて変更して下さい。
<style>
body{
font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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;
}
}());
bespoke.js:プレゼン用のパネルとテーマを表示するデモページ
bespoke.js:プレゼン用のパネルとテーマを表示するデモ
ソース元:Bespoke.js
ソース元:Bespoke.js
見え方的には良いかもしれませんが、パワーポイントで作って見せた方が簡単で確実な気がします。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。