CSSをJavaScriptから変更してみた 前編

■　WEBアプリなのにホストみたい

随分前の話ですが、ホストコンピュータで動作していたシステムを、WEBアプリで作り直すっていう案件がありました。

この案件に、私はほとんど関わらなかったのですが、ほぼ完成した状態で中身を見て見ると、作りが酷い。
例えば、画面サイズやフォントが固定、異様に細かいレイアウト指定、Enterキーやファンクションキーでの処理実行、右クリック禁止、ツールバー等は非表示、って感じで、とてもWEBとは思えない作りになっていました。

どうやら、ホスト時代の開発者がWEBっていうものを理解していなかったらしく、ホストの使用感を無理に引き継ごうとしたらしいですね。気付いた時には開発は佳境に入っていて、いまさらどうしようもない状態でした。

...なんで誰も止めなかったんだよ。

■　当然、問題になる

WEBアプリの利点って、クライアント側に特別なソフトが必要ないって事だと思うんですけど、こんな設計にした時点で利点が消えてしまいます。こんな設計を望むなら、WEBでなくC/Sで作った方がまだましです。

それでも、稼働した当初は大きな問題もなかったのですが、社内のパソコンのディスプレイサイズの主流が15インチから17インチに変わってくると、あちことから悲鳴が聞こえてきました。画面サイズやフォントを15インチの1024×768を前提に設計していたため、それ以上だと画面が小さくなって使いずらいのです。

そして、この時点での保守担当者は私。
．．．どうしろってんだよ。

■　秘策

本音を言えば、ビジネスロジックはそのままで、画面の部分を作り直してやりたいのですがコスト（時間も含む）の問題で実現は無理です。
しかし、放置することも出来ません。今後のディスプレイの主流が19インチとかになったりしたら、今度こそ使い物にならなくなってしまいます。

そこで考えたのが、ウィンドウサイズとスタイルシートを動的に切り替えてやる方法です。

幸い、htmlべた書きなんてことはなく、それなりにスタイルシートを使用していました。
であれば、ユーザーの画面サイズに合わせたスタイルシートを用意して、画面サイズに合わせて使用するスタイルシートを変更してやれば、そこそこ対応できる...ような気がします。

次回：CSSをJavaScriptから変更してみた　後編
投稿記事の一覧：目次

■　後書き

次回の記事では、JavaScriptを使用したスタイルシートの変更方法を書くのですが、実際の実装ではこの方式は使用しませんでした。スタイルシートの切替自体は行うのですが、サーブレットで書いた方が効率が良かったものでして．．．

せっかく勉強したのに勿体ないので、記事にしてみました。