プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用している方をセミナーなどで頻繁に見かけるようになりました。
このブラウザ上で動作するスライドは、(X)HTML + CSS + JavaScript で実現できます。スライド制作用 JavaScript ライブラリとしては、W3C で公開されている 「HTML Slidy」 が使いやすく有名ですが、個人的にもこの 「HTML Slidy」 を利用したスライドをどこかで使ってみようと思っていたところでしたので、いい機会ということで、テンプレートを作って公開してみることにしました。
HTML Slidy は W3C で公開されているプレゼンテーションスライド制作用 JavaScript ライブラリで、JavaScript ファイルを 1つ読み込むだけで、ブラウザ上で動作するプレゼンテーションスライドを簡単に制作することができます。
マウスクリックやキーボード操作で、ページの進む戻るを始めとした操作が簡単にできるようになっているので、プレゼンテーションツールとしての使い勝手もほぼ文句なしです。
ついでに今回は、Movable Type と組み合わせて、ページ追加や修正作業を簡単にミスなく行えるようにしてみました。MT のセットアップさえ済んでいれば、すぐにプレゼンを作って公開できます。
デモも兼ねて、今回のテンプレートの使用方法を解説したスライドを下記に置いておきますので、合わせて参考にしてください。背景画像を設定している以外は、ほぼテンプレートそのままです。
- HTML Slidy & Movable Type でプレゼン （解説 兼 デモ）
上の解説スライドの方が詳しく書いてありますが、ここではその中から基本となる部分のみ順を追って解説してみます。
とりあえず必要なファイル一式は下記にまとめておきましたので、まずはダウンロードしてみてください。
今回は、W3Cの 「HTML Slidy」 をベースにカスタマイズを加えています。よって、W3C で公開されているものとは多少異なりますので、ご注意ください。
ダウンロードしたファイルを解凍すると下記のようなファイル構成になっています。
- slide.txt （Movable Type テンプレート）
- js/slidy.js
- css/slide.css
次に Movable Type のインデックス・テンプレートを新規作成し、slide.txt の内容をテンプレートソースとして適用します。出力ファイル名は任意で結構です。また、「js」、「css」 各ディレクトリをそのままサーバにアップします。場所はデフォルトでスライドページと同階層を想定しています。
もし、スライドで使用する文字コードが utf-8 以外の場合は、slide.css をサーバにアップする前に、テキストエディタなどでファイルを開き、1行目の
@charset "utf-8";
を実際に使用する文字コードに合わせて修正した上で、文字コードをそれに合わせて再保存してください。
また、MovableType のカテゴリー設定にて、「startpage」 という名前のカテゴリーを新規作成してください。これで準備は完了です。
準備が完了したら、後はエントリーを入力していくだけです。エントリー入力時は下記の注意点を守ってください。
- まず最初にスライドのスタートページ（表紙）用のエントリーを作る。その際、エントリーのカテゴリーを 「startpage」 に設定する。
- 「タイトル」 に入れたものが自動的にページタイトルに、「エントリーの内容」 に入れたものが本文になります。「追記」 も使用可能です。
- エントリーの順番は、ページの順番に入れていくと自動的に正しく並びます。
- スタートページ用エントリー以外のエントリー （2ページ目以降） はカテゴリー指定なしで投稿します。
- エントリー内で h1、及び h2 要素は使用しないこと。
応用機能として、エントリー内である親要素に対して、「class="incremental"」 と指定することで、ページを進めるのと同じ動作でその子要素の内容を順番に表示していくことが可能になります。
例えば下記のように記述することで、各 li 要素の内容を順番に表示します。
<ul class="incremental"> <li>First Content</li> <li>Second Content</li> <li>Third Content</li> </ul>
また、今回のテンプレートでは、Movable Type にて設定されているいくつかの項目が自動的に head 要素内の meta 要素に挿入されるように制作してあります。
<meta name="author" content="[MTEntryAuthorUsername]" /> <meta name="copyright" content="Copyright © [yyyy] [MTEntryAuthorUsername]" /> <link rev="made" href="mailto:[MTEntryAuthorEmail]" />
- MTEntryAuthorUsername → プロフィール設定内の 「表示名」
- MTEntryAuthorEmail → プロフィール設定内の 「メールアドレス」
「meta name="copyright"」 の内容は、自動的にフッターのコピーライト表記に反映されます。（HTML Slidy の仕様です）
見た目のカスタマイズ方法などは、補足資料 （デモスライド） を見てください。まずは色々試してみて、自分好みのスライドに仕上げてみたらいいと思いますよ。
