モバイル向けCSSのインライン化ライブラリを公開しました
はじめに
こんにちは。gumiの畠です。
今日のお題は悪名高きガラケーのCSSのお話です。
キャリアごとに色々あって面倒くさいガラケーのCSSも、これを読めばPCサイトのように簡単に扱えるようになります。
モバイルでもCSSを使おう! 最近のウェブサイトでは装飾と構造を分離するためにCSSを使用するのが一般的です。 しかし、docomoの古い携帯ではPCサイトと同じようにはCSSが使用出来ません。 そのため弊社でも本来はCSSで表現すべきものをインラインのstyle要素としていました。 ですが、perlやPHPにはこういう状況を解決するために、styleタグで指定した外部CSSファイルを読み込んで、インラインのstyle要素に入れ込んでくれるライブラリが存在しています。 実に羨ましい限りですね! なんでpythonにはないんでしょう>< とは言え、ないことを嘆いていても仕方ないのでHtmlCssIncludeというライブラリを自分で作ってみました。
HtmlCssIncludeの使用にあたって http://pypi.python.org/pypi/HtmlCssInclude/ そんなわけでHtmlCssIncludeです。 ネーミングセンスが悪いのは勘弁してください。 htmlのパースにlxmlを使用しているので、lxmlのインストールが必要です。 また、python2.5以上でしか、動作確認をしていません。 ライセンスはPSFなので好きに使ってください。 あ、それとHtmlCssInclude自体はgumiのアプリ︵スターフロンティアとか︶でも使用していますが、業務時間中に仕事として作成したものではありません。 管理も個人で行っています。 なので、何かあった場合もgumiではなく畠までお願いします。
使い方 使い方は、インポートして、初期化して、変換するだけです。 これだけで普通のウェブサイトがモバイル向けになります。
パラメータとおすすめフォントサイズ 初期化時のパラメータは以下になります。 ●agent docomo、ezweb、softbankのどれかを指定すると、文字サイズを適切に変更します。 ●base_dir link要素CSSのベースとなるディレクトリ。 ●is_vga True/False。Trueにすると画像サイズを自動的に2倍にしたりします。 フォントサイズは﹁10px﹂﹁16px﹂の2種類を使うのがおすすめです。 と言うのも、これらの場合に携帯に合わせて良いようにフォントサイズを変更するように作ってあるのです。 なので、フォントサイズが2通りで良い場合は﹁10px﹂﹁16px﹂を使うと、キャリアごとの見た目を考える必要がないので楽だと思います。
まとめ HtmlCssIncludeを使えばpythonでも3キャリア対応のモバイルサイトが簡単に作成出来ます。 使ってみて、こんな機能もあったら便利!とか、ここが駄目!とかあったら教えてくれると嬉しいです。
モバイルでもCSSを使おう! 最近のウェブサイトでは装飾と構造を分離するためにCSSを使用するのが一般的です。 しかし、docomoの古い携帯ではPCサイトと同じようにはCSSが使用出来ません。 そのため弊社でも本来はCSSで表現すべきものをインラインのstyle要素としていました。 ですが、perlやPHPにはこういう状況を解決するために、styleタグで指定した外部CSSファイルを読み込んで、インラインのstyle要素に入れ込んでくれるライブラリが存在しています。 実に羨ましい限りですね! なんでpythonにはないんでしょう>< とは言え、ないことを嘆いていても仕方ないのでHtmlCssIncludeというライブラリを自分で作ってみました。
HtmlCssIncludeの使用にあたって http://pypi.python.org/pypi/HtmlCssInclude/ そんなわけでHtmlCssIncludeです。 ネーミングセンスが悪いのは勘弁してください。 htmlのパースにlxmlを使用しているので、lxmlのインストールが必要です。 また、python2.5以上でしか、動作確認をしていません。 ライセンスはPSFなので好きに使ってください。 あ、それとHtmlCssInclude自体はgumiのアプリ︵スターフロンティアとか︶でも使用していますが、業務時間中に仕事として作成したものではありません。 管理も個人で行っています。 なので、何かあった場合もgumiではなく畠までお願いします。
使い方 使い方は、インポートして、初期化して、変換するだけです。 これだけで普通のウェブサイトがモバイル向けになります。
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 docomo、ezweb、softbankのどれかを指定すると、文字サイズを適切に変更します。 ●base_dir link要素CSSのベースとなるディレクトリ。 ●is_vga True/False。Trueにすると画像サイズを自動的に2倍にしたりします。 フォントサイズは﹁10px﹂﹁16px﹂の2種類を使うのがおすすめです。 と言うのも、これらの場合に携帯に合わせて良いようにフォントサイズを変更するように作ってあるのです。 なので、フォントサイズが2通りで良い場合は﹁10px﹂﹁16px﹂を使うと、キャリアごとの見た目を考える必要がないので楽だと思います。
まとめ HtmlCssIncludeを使えばpythonでも3キャリア対応のモバイルサイトが簡単に作成出来ます。 使ってみて、こんな機能もあったら便利!とか、ここが駄目!とかあったら教えてくれると嬉しいです。