はじめに
PowerPointやGoogle Slidesでスライドを作っていて、「次へ」ボタンで1枚ずつページがめくれていく単調さにもどかしさを感じたことはないでしょうか。かつてPreziというツールが、スライドを「めくる」のではなく無限のキャンバス上を「ズームしながら移動する」演出で話題になりました。
impress.jsは、そのPreziのコンセプトにインスパイアされ、CSS3のtransformとtransitionだけで同じような演出をブラウザ上に再現したプレゼンテーションフレームワークです。2011年にBartek Szopka氏がCSS3の実験として作り始めたプロジェクトで、ビルドツールもフレームワーク依存もなく、HTMLにdata-xやdata-scaleといった属性を書くだけでスライドを組み立てられます。
とはいえ、読むより触った方が早いと思います。「ページ送り」ではなく「空間を移動する」感覚がどんなものか、先に体験してみたい方はこちらからどうぞ。
impress.jsとは
impress.jsは、CSS3のtransform・transition・perspectiveといったプロパティを使い、HTML要素を3D空間上の座標に配置してブラウザで動くプレゼンテーションを作るJavaScriptライブラリです。各スライドは「step」と呼ばれ、data-xやdata-rotateといったHTML属性で位置・回転・拡大率を指定するだけで、スライド間の移動がそのままカメラワークのような演出になります。
主な特徴
- 無限キャンバス型の演出 - ページ送りではなく、x・y・z座標とスケール・回転を指定した3D空間上をカメラが移動していくような演出になります
- ビルド不要でCDNから直接使える -
impress.jsは1ファイルの素朴なグローバルスクリプトで、<script>タグ1本とimpress().init()の呼び出しだけで動作します - HTML属性ベースの宣言的な記法 -
data-x、data-y、data-z、data-rotate、data-scaleなど、JavaScriptをほとんど書かずにレイアウトを組み立てられます - プラグイン機構 -
data-autoplayによる自動再生や、タッチ操作、スピーカーノート表示(impressConsole)など、公式リポジトリに多数のプラグインが同梱されています - 非対応ブラウザへのフォールバック - CSS3のtransformに対応していないブラウザでは
bodyにimpress-not-supportedクラスが付き、通常のドキュメントとして読める状態にフォールバックします
インストール
impress.jsはGitHubからのクローンやCDN経由での利用が主な使い方です。npmにもimpress.jsパッケージが公開されていますが、最新版は1.1.0(2020年公開)止まりで、GitHub上で開発が進んでいるv2系はnpmには反映されていません。最新機能を使いたい場合はCDN経由での読み込みがおすすめです。
npm install impress.js
ビルド環境を使わず、CDN経由でそのまま読み込むこともできます。
<script src="https://cdn.jsdelivr.net/npm/impress.js@1.1.0/js/impress.js"></script>
impress.jsのサンプルを動かす
impress.jsの基本は、#impress要素の中に.stepクラスの要素を並べ、それぞれにdata-x・data-y・data-scaleで座標と拡大率を指定し、最後にimpress().init()を呼び出すだけです。以下のサンプルでは3枚のstepを配置し、ボタンからimpress().next()・impress().prev()を呼んで移動しています。要点をまとめると次のようになります。
<div id="impress">
<div class="step" data-x="0" data-y="0">
<h1>Step 1</h1>
</div>
<div class="step" data-x="1200" data-y="0">
<h1>Step 2</h1>
</div>
<div class="step" data-x="1200" data-y="900" data-scale="2">
<h1>Step 3</h1>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/impress.js@1.1.0/js/impress.js"></script>
<script>
var api = impress().init();
api.next(); // 次のstepへ
api.prev(); // 前のstepへ
</script>
実際に動かせるものが下です。矢印キーでも操作できますが、下部のボタンからもnext()・prev()を呼べるようにしています。
「次へ」を押すと、単に画面が切り替わるのではなく、カメラが空間を移動しているようなアニメーションになるのが分かると思います。3枚目のdata-scale="2"をdata-scale="5"のように大きくすると、ズームインの勢いがより強くなります。またimpress:stepenterイベントを使うと、今どのstepにいるかをJavaScript側で検知できるので、進捗表示や外部連携にも応用できます。
基本的な使い方
最小構成であれば、HTMLとJavaScriptあわせて10行程度で動きます。
<div id="impress">
<div class="step" data-x="0" data-y="0"><h1>Step 1</h1></div>
<div class="step" data-x="1000" data-y="0"><h1>Step 2</h1></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/impress.js@1.1.0/js/impress.js"></script>
<script>
impress().init();
</script>
impress()はデフォルトでidimpressの要素を対象にAPIオブジェクトを返す関数で、.init()を呼んで初めてスライドが有効化されます。.stepクラスが付いていない要素は無視されるので、ナビゲーションUIなどを#impressの外に置いても影響しません。CSS3のtransformに対応していないブラウザでは自動的にimpress-not-supportedクラスが付与されるので、フォールバック用のスタイルをあらかじめ用意しておくと親切です。
実践的なユースケース
data-scaleでPreziのようなズーム演出を作る
Preziの代名詞ともいえるのが、スライドを切り替えるのではなく「巨大なキャンバスにズームインしていく」演出です。impress.jsではdata-scaleの値を大きく取ることで、次のstepが画面いっぱいに拡大されながら現れる効果を作れます。詳細ページを大きく見せたいときや、タイトルから本文へ視線を誘導したいときに有効です。
<div class="step" data-x="0" data-y="0" data-scale="1">
<h1>全体像</h1>
</div>
<div class="step" data-x="100" data-y="100" data-scale="8">
<h2>ここに注目</h2>
<p>スケールを大きくして深くズームします</p>
</div>
2枚目のdata-scale="10"を3くらいに下げると、ズームインの勢いがだいぶ穏やかになるのが分かります。逆にもっと大きくすると、まさに顕微鏡を覗き込むような急激なズームになります。全体→詳細→全体、という構成はPrezi的なプレゼンの王道パターンです。
data-rotate-x / data-rotate-yで3D空間の奥行きを演出する
impress.jsはdata-rotate（Z軸回転）だけでなく、data-rotate-x・data-rotate-yで立体的な回転も指定できます。スライドをカードのように傾けたり、奥行き方向(data-z)に配置したりすることで、平面的なページ送りとは違う空間的な演出が可能になります。
<div class="step" data-x="0" data-y="0" data-z="0">
<h1>正面</h1>
</div>
<div class="step" data-x="500" data-y="0" data-z="-1000"
data-rotate-x="30" data-rotate-y="-20">
<h1>傾いたカード</h1>
</div>
2枚目のdata-rotate-xとdata-rotate-yの値を0に戻すと、傾きのない普通の平面移動に戻ることが確認できます。data-zはカメラからの奥行き距離なので、値をマイナス方向に大きくするほど「奥から手前に迫ってくる」ような演出になります。
data-autoplayで自動再生するキオスク表示を作る
展示会のブースやデジタルサイネージのように、人が操作しなくても自動でスライドが進んでほしい場面があります。impress.jsにはdata-autoplay属性があり、#impress要素に付ければ全stepが指定秒数で自動的に切り替わり、個々の.stepにdata-autoplay="0"を付ければそのスライドだけ自動進行を止められます。
<div id="impress" data-autoplay="3">
<div class="step" data-x="0" data-y="0"><h1>1枚目</h1></div>
<div class="step" data-x="1000" data-y="0"><h1>2枚目</h1></div>
<div class="step" data-x="2000" data-y="0" data-autoplay="0">
<h1>3枚目(ここで停止)</h1>
</div>
</div>
「今すぐ次へ」ボタンを押すと、自動再生のタイマーを待たずに手動で進めることもできます。3枚目にdata-autoplay="0"が付いているため、そこに到達すると自動進行が止まる点も確認してみてください。個別のstepごとに秒数を変える(data-autoplay="10"など)ことも可能なので、説明が長いスライドだけ表示時間を延ばす、といった調整もできます。
まとめ
impress.jsは、CSS3のtransformとtransitionだけでPreziのようなズーム・回転演出を実現する、素朴でありながら表現力の高いプレゼンテーションフレームワークです。data-x・data-scale・data-rotate-xといったHTML属性を組み合わせるだけでスライドを組み立てられる手軽さと、impress:stepenterイベントやdata-autoplayによるプラグイン的な拡張性を兼ね備えています。
決まりきったページ送りのスライドに飽きたときや、展示ブースで自動再生するキオスク画面を作りたいときなど、「動きそのものが伝わるプレゼン」を作りたい場面でぜひ試してみてください。