HTML をプレゼン形式に表示する jQuery プラグインを作ってみた

先日「jQuery の紹介」と題して、職場（情報システム部門）向けのプレゼン資料を作成する機会がありました。うちの職場では「新技術紹介」という名目で、隔週でプレゼンを行うという決まりがありやむなく作ったものです。（資料の内容自体は、大量にブクマした記事から jQuery の紹介文の部分だけをコピペして作った手抜き資料ですが･･･）

はじめはパワーポインタで作ってた資料ですが、jQuery の紹介で jQuery のプレゼンツール使わないのもどうかなと思いプラグインを探しはじめましたが、例のごとくなかなか IE6 にもやさしいやつを見つけられずに･･･（会社の標準ブラウザは未だに IE6 なんです）

そんな訳で、結局自前で作ることになった jQuery ベースのプレゼンツールを紹介致します。

機能概要

html モードとプレゼンモード

html モード（普通の html ページの表示）とプレゼンモードの 2 つの表示形式があります。Ctrl + ↑もしくは F11 キーで html モードからプレゼンモードに切り替えることができます。F11 で切り替えた場合は Safari 以外は全画面モードになります。プレゼンモードから html モードに戻す場合は、Ctrl + ↓ もしくは再度 F11 キーを押します。任意の要素に定義済みクラスを割り振ることで、どちらか一方のモードでのみ特定の文章（要素）を表示するといった事ができます。

html モード

プレゼンモード

Demo

プレゼンモードでのページ切替

プレゼンモードでのページ切り替えは、進む（→）、戻る（←）、次ページ（↓）、前ページ（↑）で操作可能です。進む（→）と戻る（←）の操作が基本になりますが、要素単位の順次表示のエフェクト（任意の要素に定義済みクラスを割り振ることで可能）を省略してページ切り替えをしたい場合は次ページ（↓）と前ページ（↑）を使用します。

サムネイルモード

プレゼンモードで Ctrl + ↑を押すとサムネイルモードになります。最初は 4 分割の大きいサイズで表示されますが、Ctrl + ↑を押す毎に、9 → 16 → 25 と細かく分割されていきます。分割数を元に戻していきたい場合は、Ctrl + ↓を押します。サムネイルの任意のページをクリックするとそのページに移動します。ページ選択をせずサムネイルモードを抜けたい場合は、ESC キーを押すか4 分割サイズの状態で Ctrl + ↓を押します。

アジェンダページの自動生成

h2 要素の内容をアジェンダと判断し、h2 要素が定義されてるページの直前にアジェンダページが挿入されます。

使い方

プラグインファイルの読み込み

expresen-template.css 、expresen.css 、 jquery.js 、 jquery.expresen.js を読み込みます。（expresen-template.cssは行間等の CSS リセットを行ってるだけなので必須ではありません。）

<link rel="stylesheet" type="text/css" href="expresen-template.css"/>
<link rel="stylesheet" type="text/css" href="expresen.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.expresen.js"></script>

プレゼンページのマークアップ

h1 要素がプレゼンタイトル、h2 要素がアジェンダと見なされます。プレゼンモードにおけるページの区切りは、chap クラスをもつ div 要素で区切ります。html モードで表示したくない要素には hide-page クラス、プレゼンモードで表示したくない要素には hide-presen クラスを割り当てます。また、ページ表示時には表示を隠しておき、→進むキーを押すごとに表示を行いたい要素に対しては pause クラスを割り当てます。

<div class="chap">
	<h1>jQuery The Write Less, Do More, JavaScript Library</h1>
	<p class="pause">軽量・高速 JavaScript ライブラリ、 jQuery の紹介</p>
	<dl>
		<dt>Date</dt>
		<dd>2010-08-02</dd>
		<dt>Author</dt>
		<dd>Cyokodog</dd>
	</dl>
	<p class="hide-page">戻る[←]　進む[→]　前ページ[↑]　次ページ[↓]　サムネイル [Ctrl]+[↑]</p>
	<p class="hide-presen">F11 : Full Screen Presen  Ctrl + ↑ : Normal Screen Presen</p>
</div>
<div class="chap">
	<h2>jQuery とは</h2>
	<ul>
		<li class="pause">軽量且つ高速 な JS ライブラリ(1.5KB)</li>
		<li class="pause">JS ライブラリの実質的なデファクトスタンダード</li>
		<li class="pause">MIT & GPL デュアルライセンス</li>
		<li class="pause">2006年、Mozilla 社の John Resig 氏により開発・公開</li>
	</ul>
</div>

フォントサイズの調整

ページのコンテンツ量によって、フォントサイズを調整したい場合は、下記定義済みクラスを div 要素等に割り当てることでサイズ調整ができます。これらのクラスはプレゼンモード時にのみ適用されます。
xxx-large、xx-large、x-large、large、mdedium、small、x-small、.xx-small、xxx-small

プラグインの実行

プラグインをページに対し適用します。

jQuery(function($){
	$.ex.presen();
});

Ctrl + ↑もしくは F11 キーでプレゼンモードに切り替えることができるようになります。

パラメータ

各種パラメータを下記のとおり json 形式で指定することができます。

$.ex.presen({
    presenMode : true
});

下記パラメータがあります。

presenMode: 初期値 : false
true にするとプラグイン適用のタイミングでプレゼンモードになります。
agendaRender: 初期値 : true
false にするとアジェンダページの生成を抑止できます。
thumbnailSize: 初期値 : 2
サムネイルモード時のサムネイル数の初期値を指定できます。
2 の場合は 2 * 2 = 4、3 の場合は 3 * 3 = 9、4 の場合は 4 * 4 = 16 となります。
baseSize: 初期値 : 30
フォントのベースサイズが指定できます。1 画面に文字を垂直に並べた際に入りきる文字数を指定します。数値を小さくするとフォントサイズが大きくなります。
width: 初期値 : 38em
画面の幅を指定できます。

API

プラグインを実行すると API オブジェクトが返されます。

var api = $.ex.presen();
api.presen();

以下メソッドがあります。

getChapture(): 現在表示してるチャプター要素（div.chap）を返します
getPageNo(): 現在表示してるページ番号を返します
presen(): プレゼンモードにします
exitPresen(): プレゼンモードを終了し html モードにします。
thumbnail(): サムネイルモードにします
exitThumbnail(): サムネイルモードを終了し、プレゼンモードにします

ダウンロード

こちらからどうぞ