prototype.jsを用いたフォントサイズ変更スクリプト

Movable Typeを触っている時間がとれないのですが、新年に入ってからちょっとばかしテンプレートとスタイルシートを変更して、ほぼ一カラム、ほぼfont-size: 100%で表示されるようにしました。要はレイアウトとか考えるのを最小限に留めようと思ったわけです。不得手なデザインをこれ以上考える必要がないという私個人の精神衛生上の利点に加え、読者の目にも優しくなりました。

結論: でかフォントは人を健康にします。

それだけだとなんなので、prototype.js (Prototype JavaScript Framework: Class-style OO, Ajax, and more)を使ってフォントサイズ変更スクリプト(クッキー保存機能付き)を実現してみました。これまでprototype.jsを全然使ったことがなかったのでその練習も兼ねて。

まず、prototype.jsとcookiemanager.jsをダウンロードして適当なディレクトリに置きます。prototype.jsは上記リンクから、cookiemanager.jsはCookie Manager | Javascript Code | All Things Webbyから、それぞれダウンロードできます。

次に下記の内容をfontchanger.jsとか適当なファイル名で保存します。

// FontChanger
// Copyright (c) 2007 Hirotaka Ogawa
// REQUIRES: prototype.js, cookiemanager.js
FontChanger = Class.create();
FontChanger.prototype = {
  id: null,
  cookieManager: null,
  cookieName: 'body.style.fontSize',
  initialize: function(id) {
    this.id = id || 'fontChanger';
    this.cookieManager = new CookieManager();
    var fontSize = this.cookieManager.getCookie(this.cookieName);
    if (fontSize) document.body.style.fontSize = fontSize;
  },
  setCookieShelfLife: function(days) {
    this.cookieManager.cookieShelfLife = days;
  },
  change: function(fontSize) {
    document.body.style.fontSize = fontSize;
    this.cookieManager.setCookie(this.cookieName, fontSize);
  },
  reset: function() {
    document.body.style.fontSize = '';
    this.cookieManager.clearCookie(this.cookieName);
  },
  show: function() {
    var id = this.id;
    document.writeln([
'<div id="' + id + '">',
'文字の大きさ: ',
'<span style="cursor: pointer; font-size: 80% ;" id="' + id + '-small" >小</span>',
'<span style="cursor: pointer; font-size: 100%;" id="' + id + '-medium">中</span>',
'<span style="cursor: pointer; font-size: 120%;" id="' + id + '-large" >大</span>',
'</div>'
    ].join("\n"));
    Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this));
    Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this));
    Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this));
  },
  onClickSmall:  function(e) { this.change('80%' ); },
  onClickMedium: function(e) { this.change('100%'); },
  onClickLarge:  function(e) { this.change('120%'); }
};
// Bootstrap
FontChanger.start = function(id) {
  var fontChanger = new FontChanger(id);
  fontChanger.show();
};

でもって使うときは、

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="cookiemanager.js"></script>
<script type="text/javascript" charset="utf-8" src="fontchanger.js"></script>
<script type="text/javascript">FontChanger.start('fontChanger');</script>

とHTMLファイルに記述してやれば、このページの右上のようなフォントサイズ変更機能が追加されます。ちなみにFontChanger.startに渡している引数は生成される表示部分の要素IDを意味します。

FontChanger.start('id');

と呼び出すと、

<div id="id">
文字の大きさ: 
<span style="cursor: pointer; font-size: 80% ;" id="id-small" >小</span>
<span style="cursor: pointer; font-size: 100%;" id="id-medium">中</span>
<span style="cursor: pointer; font-size: 120%;" id="id-large" >大</span>
</div>

が生成されます。つまり、スタイルの改変はスタイルシートで行えます。

以下、注意点。

• document.body.style.fontSizeを変更しているだけです。スタイルシートでもっとぐちゃぐちゃfont-sizeを指定している場合には、それなりの変更が必要になります。
• 言うまでもなく、Artistic License/GPLv2。改変・再配布はご自由に。
• fontchanger.jsの読み込み時にcharset="utf-8"オプションを指定してありますが、これは私がこのファイルをutf-8で保存しているからです。他のcharsetで保存した場合には他の適切なcharsetを指定する必要があります。

…問題はこの演習だけでは私がprototype.jsに習熟するには不十分だということ。

2007-01-23追記:
setCookieShelfLifeというメソッドを追加しておきました。FontChanger.startに以下のように追加しておくと、90日間有効なクッキーが保存されます。何もしないと365日間有効なクッキーが保存されるようになっています。

FontChanger.start = function(id) {
  var fontChanger = new FontChanger(id);
  fontChanger.setCookieShelfLife(90);
  fontChanger.show();
};