読者です 読者をやめる 読者になる 読者になる

モバイル向けCSSのインライン化ライブラリを公開しました

これはgumi Engineer's Diaryに書いたものを修正・転載したものです。


はじめに
今日のお題は悪名高きガラケーCSSのお話です。
キャリアごとに色々あって面倒くさいガラケーCSSも、これを読めばPCサイトのように簡単に扱えるようになります。


モバイルでもCSSを使おう!
最近のウェブサイトでは装飾と構造を分離するためにCSSを使用するのが一般的です。
しかし、docomoの古い携帯ではPCサイトと同じようにはCSSが使用出来ません。
そのため本来はCSSで表現すべきものをインラインのstyle要素としていたりすることが多いです。
ですが、perlPHPにはこういう状況を解決するために、styleタグで指定した外部CSSファイルを読み込んで、インラインのstyle要素に入れ込んでくれるライブラリが存在しています。
実に羨ましい限りですね!
なんでpythonにはないんでしょう><
とは言え、ないことを嘆いていても仕方ないのでHtmlCssIncludeというライブラリを自分で作ってみました。


HtmlCssIncludeの使用にあたって
http://pypi.python.org/pypi/HtmlCssInclude/
そんなわけでHtmlCssIncludeです。
ネーミングセンスが悪いのは勘弁してください。
htmlのパースにlxmlを使用しているので、lxmlのインストールが必要です。
また、python2.5以上でしか、動作確認をしていません。
ライセンスはPSFなので好きに使ってください。


使い方
使い方は、インポートして、初期化して、変換するだけです。
これだけで普通のウェブサイトがモバイル向けになります。

from  HtmlCssInclude import CssInclude

# 初期化
css_include = CssInclude(agent='docomo', is_vga=True)

input_html = file('test.html').read()

# 変換
converted_html = css_include.apply(input_html)

用意するhtmlは普通のウェブサイト向けのhtmlでOKです。
style要素のCSSでもlink要素のCSSでもインラインのstyleに変換します。
簡単ですね!


パラメータとおすすめフォントサイズ
初期化時のパラメータは以下になります。

  • agent

  docomoezwebsoftbankのどれかを指定すると、文字サイズを適切に変更します。

  • base_dir

  link要素CSSのベースとなるディレクトリ。

  True/False。Trueにすると画像サイズを自動的に2倍にしたりします。

フォントサイズは「10px」「16px」の2種類を使うのがおすすめです。
と言うのも、これらの場合に携帯に合わせて良いようにフォントサイズを変更するように作ってあるのです。
なので、フォントサイズが2通りで良い場合は「10px」「16px」を使うと、キャリアごとの見た目を考える必要がないので楽だと思います。


まとめ
HtmlCssIncludeを使えばpythonでも3キャリア対応のモバイルサイトが簡単に作成出来ます。
使ってみて、こんな機能もあったら便利!とか、ここが駄目!とかあったら教えてくれると嬉しいです。