人気ブログランキング | 話題のタグを見る

携帯用サイトを作成する

動物愛護法改正パブコメ作成支援ページ」を携帯対応にするのに、色々調べたことの備忘録。

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の結構画面広めの機種。
携帯用サイトを作成する_f0064866_873243.png


こっちはAUのS004だったかな?
携帯用サイトを作成する_f0064866_1010216.png


で、表示してみて、一部の入力フィールドが画面幅をはみ出ていることが判明(^^;)。

まあ、これで全機種で見えるかどうか分かりませんが、もとのPCサイトはUTF-8なので、それよりは多分ましだろう、ということで。。。

ちなみに、コレに辿り着く前に、Rubyベースのエミュレータをインストールしようとして四苦八苦したのだけれど、今後役に立ちそうな記事ひとつだけ備忘録として残しておきます。

rvm: 複数のRubyを共存させる最新のやり方

Rubyって弄ったことなかったけど、こんなに簡単に開発環境のバージョンを入れ替えられるのは、かなり使いやすかろう、と思った。ライブラリ群が「gem」だったり、ネーミングもお洒落だよね。
でも、うちの職場はpythonなんだけどね〜。

というわけで、動物愛護法改正パブリックコメント、12/7〆切分の携帯用作成フォームは以下のアドレスです。実験動物、学校動物、産業動物の待遇をよくするために、あなたも意見を!

http://ethel.sakura.ne.jp/aigo/m/

QRコードはこちら
携帯用サイトを作成する_f0064866_1061316.gif



by lily_lila | 2011-12-03 10:10 | wordpress,web

渡米生活日々の備忘録。


by lily_lila