携帯用サイトを作成する
2011年 12月 03日
1)ページを携帯用に軽量化する。
参考にしたのは、こちら。
「携帯サイトの作り方 作成方法の基礎 - all about」
要約すると、
- 1ページの容量は100KB以内(画像含む)
- XHTML Mobile Profile 1.0で作る(実際のコードはxhtmlだと思って書けばいい
- コードはSHIFT-JIS以外はダメ(ヘボい…)
- 外部cssはダメ、インラインで書く
- 文字修飾は、div style="~かspan style="~かのどっちか
というくらいかな。
とりあえず、なんか期待通りの動作をしてくれなさそうなcss設定は全部外してみました。
それから、携帯では、メール画面に行くのが結構面倒くさいので、PC用サイトでは絶対使わないmailtoタグを使うことに。
ただし、mailtoの後に、メアドを直書きすると、あっという間にスパムボットに捕まってスパムの標的にされるので、エンティティ化でとりあえずのボットよけをしました。
「htmlエンティティ化」
ただし、基本的にメアドをweb上に晒すのは「いつかはスパムにつかまる」行為なので、やるなら捨てメアド等短期間しか使わないもので試すことを強くお勧めします。
2)PC上で携帯サイトを確認
さて、こうして軽量化したはいいけど、私は現在国外にいるので、携帯での実際の見え方を確認することができません。
第一、携帯といったって、キャリアも3つもあるし、それ全部で確認するのは大変!
まあ、そのための有料ソフトもあるけど、そんなもの導入する暇もお金もないし、と思っていたら、なんとFireFoxのアドオンでできてしまうことが判明。
「FireMobileSimulator」
暫くFireFoxは重くて遠ざかっていたのだけれど、早速最新版をインストールしてみたところ、うまく表示してくれました!
(ついでに最新版のFireFoxは以前よりずっと早くなっていた)
たとえば、これはdocomoの結構画面広めの機種。
こっちはAUのS004だったかな?
で、表示してみて、一部の入力フィールドが画面幅をはみ出ていることが判明(^^;)。
まあ、これで全機種で見えるかどうか分かりませんが、もとのPCサイトはUTF-8なので、それよりは多分ましだろう、ということで。。。
ちなみに、コレに辿り着く前に、Rubyベースのエミュレータをインストールしようとして四苦八苦したのだけれど、今後役に立ちそうな記事ひとつだけ備忘録として残しておきます。
「rvm: 複数のRubyを共存させる最新のやり方」
Rubyって弄ったことなかったけど、こんなに簡単に開発環境のバージョンを入れ替えられるのは、かなり使いやすかろう、と思った。ライブラリ群が「gem」だったり、ネーミングもお洒落だよね。
でも、うちの職場はpythonなんだけどね〜。
というわけで、動物愛護法改正パブリックコメント、12/7〆切分の携帯用作成フォームは以下のアドレスです。実験動物、学校動物、産業動物の待遇をよくするために、あなたも意見を!
http://ethel.sakura.ne.jp/aigo/m/
QRコードはこちら