Find Job ! のリニューアルをがんばった話 - インドさんの甘口ポエムブログ

2015年12月2日にFind Job ! のデザインリニューアルをしました。そのことについて書こうと思います。

8年ぶり◯度目

Find Job ! は1997年のサービス開始しました。最後にデザインリニューアルをしたのは2007年でした。今までにリニューアルされた回数は数知れず・・・。webarchiveを見ると、昔懐かしい「ホームページ」がでてきますね。

変更点

変更前(webarchiveのリンク) web.archive.org

画像でのデザインを極力やめ、HTML+CSSでデザインでがんばった

以前は「アクア風ボタン」と言われるような3D風のボタン画像がグロナビ部分のタブや各ボタンに使われていました。当時流行っていたのですが今は廃れてしまいました。なぜ画像でボタン等のデザインをやってたか？　というと、当時のブラウザ(特にIE)ではborder-radiusなんかが対応してなかったからです。
2015年の現在ではそこらへんはなんとかなってきたので、CSSでボタンのデザインを行えるようにしました。ボタンの画像とかをデザイナーに依頼しなくても簡単にマークアップでボタンがつくれるようになったから楽になりました。それに伴って推奨環境もIE7.0からIE11.0以上みたいな感じにガツンとあげました。

あともう色々と裏側的なところとかがんばった

HTML5にした

ただ歴史的経緯からFind Job!のソースコードは全体的にEUC-JPで書かれているためUTF-8にすることはできず。

http://www.marguerite.jp/Nihongo/WWW/RefHTML5/Appendix/WhyUTF8.html UTF-8 を使用するのが望ましい理由。

↑こういう記事で書かれてるとおりEUC-JPが非推奨ということで色々とHTML4.0１のままでいくのかとか、UTF-8で吐き出せるようにガッツリと裏側のソースコードを改修しちゃうか迷ったけど、結局HTML5 + EUC-JPでいくことにしました。とりあえず今のところ問題らしい問題が起きてないようです。

jQuery2系にした。昔のjsとかを修正するのをかがんばった

以前のコードは jQuery1.5.2（！？）が使われていたのでこのタイミングでjQuery2.1.4にしました。「jQueryじゃなくてフロントエンドのフレームワーク使えばええやん」っていうのもあったんですが、そこまで動きがあるサイトでもないのでjQueryでチョコチョコかいてます。
JSはほぼ新規に書き直したんですが、一部昔のやつを使わざるを得ない部分があったのでそこはがんばりました。
attrとか$.browser.msieとかがあってそれは新しいバージョンでは挙動が違ったりつかえなくなったりしたので、前者はpropにしたりとか後者は$.browser.msie == 6とかの条件分岐とかぐらいでしか使われてなかったのでそこはもういらないのでガンガンけしてゆきました。

まとめ

大変でしたけど、頑張りました。

明日はcfikenさんです。よろしくおねがいします。