jquery-presentationで発表中にフォントサイズを変える

S5やSlidyなど、プレゼンテーションスライドを(HTML/CSS/JSで記述して)Webブラウザ上で表示するソフトウェアが幾つかあるが、最近はGoogle Code Archive - Long-term storage for Google Code Project Hosting.を使っている。

プロジェクタ(外部ディスプレイ)でWebブラウザ上のプレゼンテーションスライドをフルスクリーン表示すると、アスペクト比の違いか、解像度の違いか、PCで表示した状態と異なる状態でスクリーン上に投影されることがある。よくある。

これらのソフトウェアは文字サイズが決め打ちか、windowサイズを読んで適当な文字サイズに設定しており、「文字が画面からはみ出ないように」などということは考慮されていない。従って、画面(スクリーン)に適した文字サイズというのは人が確認し設定する必要がある。ていうか、プロのプレゼンタなら事前に確認してスライドがちゃんと写るか確認するべきであり、本番でこんなことで困っているようでは素人。

兎に角、本番(発表)中にフォントサイズを変えられるようにした。[b]キィでフォントサイズを大きく(bigger)、[s]キィでフォントサイズを小さく(smaller)する。倍率は60%から120%の間で、5%刻みで変えられる。

//////////////////////////////////////////////////////////
// Change the font-size for jquery-presentation         //
//     : http://code.google.com/p/jquery-presentation/  //
//////////////////////////////////////////////////////////

var nowFontsize = 100;  // 100%
var minFontsize = 60;   // 60%
var maxFontsize = 120;  // 120%
var stepFontSize = 5;

$(document).ready(
    function(){
        $.keyDownObserver.observe(
            {
                key: 66,  // b
                fn: $.proxy(bigger, $.presentation.slideManager)
            }
        );
        $.keyDownObserver.observe(
            {
                key: 83,  // s
                fn: $.proxy(smaller, $.presentation.slideManager)
            }
        );
    }
);

function bigger(){
    if(nowFontsize < maxFontsize) {
        nowFontsize += stepFontSize;
        $("body").css("font-size", nowFontsize + "%");
    }
}

function smaller() {
    if(nowFontsize > minFontsize) {
        nowFontsize -= stepFontSize;
        $("body").css("font-size", nowFontsize + "%");
    }
}

jquery.presentation.jsの中身を見て、適当にそれっぽいところを抜き出して、それっぽく追加しただけ。

これを適当なjsファイル(changefontsize.js)に書いて、htmlファイル内でjquery.presentation.jsの後に読み込ませる。

<link rel="stylesheet" type="text/css" href="css/common.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/zoomooz.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.presentation.js"></script>
<script type="text/javascript" src="js/changefontsize.js"></script> <!-- here -->
<script type="text/javascript" src="js/jquery.zoomooz.js"></script>
<script type="text/javascript" src="js/sylvester.js"></script>

jquery-presentationに必須ではないが、画像や特定要素を恰好良く見せるためにZoomooz.jsもプレゼンテーションスライドの中で使っている。