ガラケー

当日にいろいろ重なって盛大に遅刻してしまいました。 クリスマスも過ぎてしまいましたが、年内に登録したアドベントカレンダーは書いてしまいたいので書きます！ さて、CSS昔話アドベントカレンダー２１日めの記事です。 CSSの猛者がきっと色んな話をしてくれてると思うので、奇をてらって「一方その頃ガラケーは…」みたいな話をしようと思います。 ガラケーサイトを真面目に考えるキッカケについて まず、なぜガラケーの話をしようと思ったのかについて書いておきます。 インラインCSSやテーブルレイアウト主流から、CSSレイアウトに流れが変わり始めたあの頃、私は月に４～５日はコスプレイベントに出かけるような人間でした。 コスプレをしているので、イベントでは大量に写真を撮ります。その写真を個人サイトにアップしたりしていたんですね。 イベントに行くたびに写真が増えるので、写真の整理がこれまた大変。なので、ImageMagickで大量の写真を一括リサイズ＆簡単補正するツールとか作って整理してました。 個人サイトもCGI（当時はPerl）で簡単に掲載できるようなもの（FTPで指定のフォルダにアップ⇒サイトに並んで掲載）を作るなど、なんかスゲー色々作ってました。 その延長で、よく一緒にイベントに行く友人たちにも見やすいサイトにしようと、ガラケー対策を考え始めました。 今の若い子たちの「スマホはあるけどPCはない」という状態は、ガラケーが出てきた頃からあった現象で、友人たちはほぼガラケーだけでした。 「ガラケーでも見やすい写真サイトはどうすればできるのか？」 そうして、あくなきガラケーとの戦いが始まりました。 画像対策はPerl+ImageMagickで ガラケーでも見やすい写真サイトで頭を悩ませたのは、画像のサイズ。 当時は毎年ガラケーの新作機種が登場し、機種ごとに画面サイズが違いました。それでいて数kb〜100kbまでしか表示できないなど、これも携帯キャリアごとに違い、ガラケーサイトのヤバさに触れました。 悩んだ結果、当時から情報の少ないImageMagickと、少しかじったPerlを駆使し、キャリア＆機種別に表示可能なサイズに画像をリサイズする仕組みを作りました。 キャリア＆機種別のサイズ変換ライブラリを使えば上手くいきそうだったので、自分なりに作成し、新作携帯が出るたびに更新してました。 途中から更新してない＆使う機会はもうなさそうですが、せっかくだから公開しておきます。 ⇒サイズ変換ライブラリ（拡張子をplにして使ってください） ガラケー対策は見た目が一番大変だった 画像サイズはなんとかなりました。さあ次は見た目だ、というところでまぁこれまた大変なわけですよ。 昔はi-mode、J-SKY（現ソフトバンク）、ezwebで、それぞれ書き方が特殊でした。 そのため、１つのファイルで同じように表示させるのが難しく、キャリア別にページをつくるのが主流でした。 i-mode ⇒ i-mode HTML（CHTMLの変化版） J-SKY ⇒ CHTML ezweb ⇒ HDML i-modeとJ-SKYはCHTMLという携帯電話に特化した言語を使っていたので、使用するタグに気をつければ大丈夫でした。ezwebも独自の変換技術でHDMLで書かれていなくても表示をしてくれていました。 これでなんとかブラウザに表示させることは出来ました。 問題は「装飾」です。 i-modeが一番クセモノだった まず、当時のガラケー向けのサイトでは「style」が使えないのが一般的でした。 その後FOMAなどもう少し通信できる量が増え、各キャリアがXHTMLをベースとした言語に対応し始めた頃「style」が使えるようになりましたが、i-modeだけは「インラインCSSのみOK」という謎仕様だったのです。 ガラケー対策をしていた頃は、その過渡期でもあったので、本当に本当に大変でした。この頃に仕事でコレやってた人は、ヤバかったと思います。趣味でやってて思うくらいだし。 隙間はspacer.gifで作る styleが使えるようになったとはいえ、キャリアでこうも違うため、満足にCSSを書くことは出来ません。paddingやmarginを指定しても、i-modeでは上手く表示されないため、禁断の「spacer.gif」で対応していました。 cssファイルで指定しても、i-modeではインラインで書かなければならず、CSS外部ファイルの良い部分をまるっと清々しいくらいに潰してくれていました。 しかし、そんなクソ仕様キャリアでも、当時は一番のユーザー数を抱えていましたから、無視することは出来ず。泣きながら対策してました。 ちなみに、当時契約していたキャリアはJ-Phone（後のVodafone、Softbank）でした。 １つのファイルでガラケーもPCも大丈夫なページにするには ・ガラケー向けにインラインCSSやタグの属性で指定しておく ・隙間はspacer.gif ・styleタグはつかわない ・PC向けのstyleは「script」で読み込む 自分がガラケー対策を頑張っていた頃は、この方法で実現させていました。 ただ、現在のガラケーでは「script」タグも読むようになったそうなので、１つのファイルでガラケー／スマホ／PCで綺麗に表示させるのはもう難しいのかもしれません。 ガラケーからiPhoneに移行してからは、よほどのことがない限りガラケー対策はやっていません。 スマホ対策でレスポンシブなCSSを書きながら「ああ、なんていい時代になったんだ…」とマジで感慨深くなる時があります。 そんな時代があったんだよ、ホント。 ＊＊＊ 大遅刻をかましてしまいましたが、私のCSSにまつわる昔話はこのくらいで。どちらかというとガラケーの話になっちゃいましたが。 以上、CSS昔話 Advent Calndar 21日目でした。

ガラケーサイトとCSS、それに至るまでの話

Author

Operation