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();
};
このエントリーのトラックバックURL: http://as-is.net/mt/mt-tb.cgi/472
パソコンの前で座りっぱなしの職業についてから、字がでかいのは人に優しいと感じるようになりました。
2.0近くあった視力も、たった１年足らずで0.9に落ちてしまい、こういうソリューションはデフォルトでつかわなければ、と痛感しています。どこかしらで使わせていただきます（スタイルシートでもっとぐちゃぐちゃfont-sizeを指定組ですが）。ありがとうございます。
それは随分悪くなったものですねっていうか！
まだ仮性近視段階ではないかと思うのですぐに眼科に行って診てもらった方がいいですよ！
はじめまして。
同じく最近視力が気になってるんですが仮性近視なんてあるんですね。
フォントも大きいほうが好きです。
仮性近視なら目薬とかで改善します。休息をとるだけでも戻ります。
一番良くないのは、仮性近視段階の人がメガネやコンタクトを装着して、ディスプレイなど近くにあるものを凝視することです。真性の近視になっちゃいますよ。
小川さん、こんにちは。
私のブログでcookiemanager.jsの保存期限変更方法についてアドバイスを頂き、ありがとうございます。
早速修正をしてみたのですが、何度再作成してもcookieに日数が反映されません（デフォルトの365日間になってしまいます）。
CookieManagerの配布元や、他の方の紹介記事も確認したので、タイプミスではないと思うのですが…
不勉強で恐縮ですが、もしもお分かりでしたら、助言をいただけないでしょうか？
宜しくお願いします（-人-）
ちょっと調べてみました。cookiemanager.jsのバージョンに依存するのかな。今のバージョンだと、
this.cookieManager = new CookieManager();
の後で
this.cookieManager.cookieShelfLife = 90;
と書くと、90日間有効なクッキーが保存されるようになりました。
>this.cookieManager.cookieShelfLife = 90;
重ね重ねありがとうございます！意図した通りになりました。
実は、cookieShelfLifeの指定をしてからInternetExplorerでアクセスすると強制切断されるようになったことに気づきまして（汗）
何かまずいことをしたのかと慌てていたのですが、上記のように変更したらそれも直りました。
Javascriptは便利ですが、仕様の変更に左右される要素が大きいのですね。
とても勉強になりました。
はじめまして
こちらで質問しても良いのかわかりませんが
場違いであればすいません
こちらの文字サイズ変更スクリプトを試させていただいているのですが
インターネットエクスプローラーではうまくいくのですが
FireFoxで表示するとCSSでWIDTHで指定された範囲より
文字がはみでて表示されてしまいます。
この原因はわかりますでしょうか
原因は想像できますが、CSSの問題は自分で解決してくださいね。
ありがとうございます
お返事遅くなり申し訳ございません
最初からCSSを組み直しましたら
はみ出しがなくなりました。
あとこのスクリプトを自社のページに使おうと思っているのですが
商用サイトに使っても大丈夫ですか？
何の問題もありません。
どうもありがとうござます～
はじめまして
MacIEで表示されないのですが、表示させるにはハックするしかないですか？
prototype.jsをMac IEやWindows IE5で動かすことがそもそも難しいんじゃないかなと思います。
ありがとうございました！
はじめまして。
ずっと探していた機能だったので、fontchangerを発見したときには小躍りしました。
早速自サイトへ導入させて頂いたのですが、テーブル内の「td」と「th」内のテキストには反映されない状況です。色々と模索し、試してみましたが上手くいきませんでした。
td、th内にも対応させる、何か良い方法はありませんでしょうか？
すみません、自己解決しました。
テーブルにCSSでフォントサイズ100％の設定をしたところ、上手くいきました。
コメント欄を汚してしまい、大変失礼しました。
はじめまして
id-smallなどCSSが各々にふれていいのですが、
押した文字のみを色を変える方法がわかりません。
文字拡大のどれをクリックしたのかを判別しやすくするにはどうすればいいでしょうか？
CSSが特有のものに識別できたらできそうですが～
はじめまして MT4はまったくの素人です。文字を小さく、大きくできるようにをずっと探していまして、やっと小川さんのところにたどりつき、記事にあるように、やってみたのですが、フォントチェンジャーをブログディレクトリに保存して、次のコードをヘッダのところに写して、スタイルシートもフォントを100％にして、コードの位置なども、何度も変えてみたのですが、表示されません。どこに原因があるのかさっぱりで、ちんぷんかんぷんな状態です。スタイルシートに上記記事以外になにか追加するなどが必要なのでしょうか。
うまく組み込める方法を一度見ていただいて教えていただけないでしょうか。宜しくお願いします。又佐
MT 4.1のデフォルトテンプレートで試してみましたが、「ヘッダー」モジュールの適当なところに以下のように書くだけで動きました。
<script type="text/javascript" src="http://as-is.net/blog/js/prototype.js"></script>
<script type="text/javascript" src="http://as-is.net/blog/js/cookiemanager.js"></script>
<script type="text/javascript" charset="utf-8" src="http://as-is.net/blog/js/fontchanger.js"></script>
<script type="text/javascript">FontChanger.start('fontChanger');</script>
再度、やってみました。らなんとか動きました。どうも文字コードがそれぞれ違っていたのかもしれません。クリックするとタイトルすべて全部動いてしまうようです。スタイルシートの問題のようだとは思うのですが、いろいろやっているところです。ひとまずありがとうございました。