HTML Slidy & Movable Type でプレゼン

このスライドは W3C HTML Slidy （JavaScript ライブラリ） と Movable Type を使用したウェブブラウザ上で動作するプレゼンテーションスライド作成のチュートリアルです。

このスライドは下記記事の補足資料です。
http://hyper-text.org/archives/2007/02/slidy.shtml （WWW WATCH）

画面サイズが小さいデバイスやウィンドウサイズを小さくしている方は、ページによってテキスト等がはみ出す場合がありますので、その際はフォントサイズを小さくして調整してください。IE の場合は、「S」 キーで文字を小さく、「B」 キーで文字を大きくできます。

HTML Slidy の概要

HTML Slidy は W3C で公開されているプレゼンテーションスライド作成用 JavaScript ライブラリです。JavaScript ファイルを 1つ読み込むだけで、ブラウザ上で動作するプレゼンテーションスライドを簡単に制作することができます。

W3C Slide show Tools
http://www.w3.org/Talks/Tools/

HTML Slidy Software Licens
http://www.w3.org/Consortium/Legal/copyright-documents
http://www.w3.org/Consortium/Legal/copyright-software

HTML Slidy で使用可能なキーボード操作

下記のキーボード操作が使用できます。（一部キー操作は IE のみ対応）

マウスクリック or スペースキー	次のスライドに進む
「←」 or 「Page Up」	前のスライドに戻る
「→」 or 「Page Down」	次のスライドに進む
「Home」 and 「End」	先頭（Home）又は最後（End）のスライドへ移動
「C」 or 「contents?」 をクリック	スライド一覧の表示
「F11」	フルスクリーン表示
「F」	フッタの表示と非表示の切り替え
「A」	全てのスライド表示の切り替え
「S」 and 「B」	フォントサイズの大（B） 小（S）

HTML Slidy with Movable Type の導入手順

導入は簡単です。まずは必要なファイル一式をダウンロードし、解凍してください。解凍すると下記のようなファイル構成になっています。

• slide.txt （Movable Type テンプレート）
• js/slidy.js
• css/slide.css

Movable Type のインデックス・テンプレートを新規作成し、slide.txt の内容をテンプレートソースとして適用します。出力ファイル名は任意で結構です。
また、「js」、「css」 各ディレクトリをそのままサーバにアップします。場所はデフォルトでスライドページと同階層を想定しています。

HTML Slidy with Movable Type の導入手順 2

slide.css をサーバにアップする前に、テキストエディタなどでファイルを開き、1行目の

@charset "utf-8";

を実際に使用する文字コードに合わせて修正した上で、文字コードをそれに合わせて再保存してください。デフォルトでは、「utf-8」 になっています。

また、MovableType のカテゴリー設定にて、「startpage」 という名前のカテゴリーを新規作成してください。これで準備は完了です。

エントリーの入力方法

準備が完了したら、後はエントリーを入力していくだけです。エントリー入力時は下記の注意点を守ってください。

1. まず最初にスライドのスタートページ（表紙）用のエントリーを作る。その際、エントリーのカテゴリーを 「startpage」 に設定する。
2. 「タイトル」 に入れたものが自動的にページタイトルに、「エントリーの内容」 に入れたものが本文になります。「追記」 も使用可能です。
3. エントリーの順番は、ページの順番に入れていくと自動的に正しく並びます。
4. スタートページ用エントリー以外のエントリー （2ページ目以降） はカテゴリー指定なしで投稿します。
5. エントリー内で h1、及び h2 要素は使用しないこと。

エントリーの入力方法 応用編

エントリー内で、ある親要素に対して、「class="incremental"」 と指定することで、その子要素の内容を順番に表示していくことが可能になります。キー操作はページを進める、戻す場合と同じです。例えば下記のように記述することで、各 li 要素の内容を順番に表示します。

<ul class="incremental">
 <li>First Content</li>
 <li>Second Content</li>
 <li>Third Content</li>
</ul>

エントリーの入力方法 応用編

親要素に対して、「class="outline"」 を指定すると、クリックしたときに子要素が開きます。さらに、「class="expand"」 を指定するとクリックで子要素が閉じます。

<ul class="outline">
 <li>Top Content 1 （outline）
  <ul><li>Sub Content 1</li></ul>
 </li>
 <li class="expand">Top Content 2 （expand）
  <ul><li>Sub Content 2</li></ul>
 </li>
</ul>

エントリーの入力方法 応用編 デモ

キー操作の度に順番に表示 （incremental）

• First Content
• Second Content

クリックで子要素を開閉 （outline | expand）

• Top Content 1 （outline） ← Click here
  • Sub Content 1
• Top Content 2 （expand） ← Click here
  • Sub Content 2

Movable Type の設定項目との連動

本テンプレートでは、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"」 の内容が、自動的にフッターのコピーライト表記に反映されます。

見た目のカスタマイズ方法

各スライドのタイトルや本文部分のデザインに関しては、slide.css を編集することで自由に変更可能です。しかし、フッターメニュー、及びページリスト （contents?） のデザインを変更する場合は、使用ブラウザが IE の場合と、それ以外のブラウザで変更する方法が異なります。

IE 以外のブラウザ向け
Firefox など IE 以外のブラウザに関しては、slide.css を修正することでフッターメニュー、及びページリストの見た目も変更することが可能です。

IE の場合
IE に関しては、フッターメニュー、及びページリスト のスタイルが slidy.js 内で指定されてしまっているため、slidy.js 自体を修正する必要があります。すべて解説するのは大変ですのでここでは省略しますが、JavaScript の知識がある方であれば、ソースを見て理解できると思います。

動作確認ブラウザと注意点

当サイトにて動作確認を行ったブラウザは下記の通りです。

• Windows XP + IE 6
• Windows XP + IE 7
• Windows XP + Firefox 2 （推奨）
• Windows XP + Opera 9
• Mac OS X + Firefox 2
• Mac OS X + Safari 2

使用するデバイスの画面サイズ、又はウィンドウサイズ等によって、テキストがはみ出して表示が崩れるなどの不具合が発生する可能性があります。この場合はテキストサイズを調整したり、テキスト内容を修正するなどして対処しましょう。