| |
就職・転職とは関係ない余談ですが、ウェブ技術にご興味の方向けに、本サイトで採用した技法について、ご説明いたします。
当ウェブサイトの設計では、新技術「端末画面に合わせたウィンドウ横幅整機能」を開発しました。
従来、ウェブサイトの設計上のひとつの問題として、ウィンドウに文字等を表示する横幅が大きいと、モバイルなどの小さい画面の端末では、ウィンドウの横スクロールが必要になってしまい面倒だったことがありました。
反対に、横幅が小さいと、せっかく大きな画面の端末でも、左右に空白部分が残っているのに、１行の文字数が少ないため、今度はウィンドウの縦スクロールを頻繁にしないといけないという面倒さが生じていました。
別の解決法として、ウィンドウの横幅一杯に文字を表示するように文書を作る方式があります。
しかし、ウィンドウ幅を変えると改行位置がズルズル変わるのが気になる人もいます。
また、文書作成者のイメージと実際の配置がだいぶずれるという欠点もありました。
2007年現在、当サイトにアクセスする人は、ほとんどが横1,024ピクセルの画面であることが、統計から分かっています。
（ピクセルとはスクリーン上の光る点の個数のことです）
さらに大きな、1,280や1,440や1,920などスクリーンの人も、より少数ですが閲覧しています。
一方、１〜２パーセントの人は、横800ピクセルの、Ｂ４ノートパソコンなどからアクセスしています。640ピクセルや、240ピクセルの人も少数います（携帯電話類でしょう）。
そこで当サイトでは、こうして解決しました：
横1,024ピクセル未満のスクリーンに表示されるときは、横幅が800ピクセルよりやや小さく収まるようにします。具体的には、内部で文章を収めているテーブル（表）や大きな画像の横幅を、小さい値にセットします。
また、1,024ピクセル以上のスクリーンの場合は、横幅が1,024ピクセルよりやや小さく収まる程度の大きな値に、それらをセットします。
ですから、利用者は特に意識せずに、スクロールがあまり要らない表示状態を得ることができます。
この機能を試すボタンを作って右上に置きました。強制的に変更させることができますので、お試しください。
横が広いアイコン  をクリックすると、ウィンドウの中の表示の幅が1,024ピクセル以上の端末用のサイズに広がります。
一方、横が狭いアイコン  をクリックすると、ウィンドウの中の表示の幅が1,024ピクセル未満の端末用のサイズに狭まります。
技術的には、これをJavascript言語のHTML中および外部のプログラムで実現しました。
本ウェブサイトのどのページがサーバからブラウザに読まれても、その瞬間自動的に動作します。
閲覧している方のスクリーン装置の大きさをWindowsから教えてもらって、ウィンドウ内の情報表示幅（スタイル値）を上記のような値に、代入文でセットしています。
これはささやかな工夫に過ぎませんが、この機能を（開発者は）他のどんなサイトでも見たことがありません。まだ世界でも珍しいのではないでしょうか。
携帯電話向けにも幅をもっと最適化したら、便利になりそうだと思います。
なお、最近 Yahoo! などのサイトで、ウィンドウ表示の右上に [小] [中] [大] というアイコンをもつところが増えてきました。
この機能は文字サイズの変更であって、本サイトのアイコンの機能とは違います。
文字サイズはそんなことをしなくてもよく、本来要らない機能だという気もします。
なぜなら、スタイルでフォントサイズの絶対値を指定するような迷惑なサイトの作り方さえしなければ，閲覧者は、ブラウザの文字の大きさの設定機能を使って、文字の大きさを好みに応じて変えられるのですから。
もうひとつ──こちらは残念ながら珍しい機能ではないのですが──プリントするときに各ページ左上にあるサイドメニューを、ないことにする、という機能を開発しました。
（Wikipediaサイトでも同様の技術が使われています。）
この目的は、サイドメニューの分、プリント中の左側の領域が占められてしまうと、残りの文章領域が縦長になってページ数が多くなるので、サイドメニューをプリントから追い出すことです。
プリントしたあとサイドメニューを紙の上でクリックする人はまさかいませんので、不必要なものです。
技術的には、プリントするときだけ使うスタイルファイルというのを作成し、そこではサイドメニューを収めるテーブルを非表示と定義します。
そして、各ページで使うスタイルファイルを定義するときに、
<link href="/css/tsc_print_style.css" rel="stylesheet" media="print">
というようにmedia属性を'print'に指定しておくのです。
なお、写真がページの境で切れたり縮んだりする障害が、Internet Explorer 7.0やFirefox 2.0で確認されていますが、これは本技法のせいではなくブラウザの障害のせいと思われますのでご了承ください。
協力：園部研究室
|
|
