トリアエズぶろぐ
フリーランスでやってる77世代のWEBプログラマが福岡からのんびりとお送りいたします。
スポンサーサイト


一定期間更新がないため広告を表示しています

<< iPhone で動画の音だけを聞く方法 | main | DELL R300のメモリを増設。しかし、、、 >>
[携帯] 外部CSS⇒インラインCSSに変換するPHPを1KByte以内で書く!


モバイルサイト制作のプチ仕事がありまして、CSSなんか使ってふふーんと作ってて、
ドコモのi-modeではCSSはインラインCSSが原則なのでめんどうだなぁ、なんて思ってたんです。
そんなときにいいもの発見。

DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました

さっそく試してみるかー、と思ったらPHP5.1以上対応。
使ってるレンサバはPHP4。。。

むきーっとついカッとなってさくーっっと簡単バージョン作ってみました。

HTML+外部CSSを普通に設置して、、、ちょちょいとおまじないしたら、、、

inlineCssMobile

インラインCSSになって表示できた!

おまじないは、以下の2つのファイルをHTMLと同じフォルダに置くだけ。かんたーん。

.htaccess

RewriteEngine on
RewriteRule ^$ inlineCssMobile.php?page=index.html
RewriteRule ^(.+¥.html)$ inlineCssMobile.php?page=$1
と、ちょっと長いけど
inlineCssMobile.php
<?php
 $html   = file_get_contents(dirname(__FILE__) . '/' . basename($_GET['page']));
 preg_match_all('|<link[^>]+href="([^"]+¥.css)"|', $html, $m, PREG_PATTERN_ORDER);
 $CSS = NULL;
 foreach($m[1] as $v){
  $cssFn = realpath(dirname(__FILE__) . '/' . $v);
  if (is_file($cssFn)){
   $CSS .= "¥n".file_get_contents($cssFn);
  }
 }
 $CSS = preg_replace("|¥n@[^¥n]+|", "", $CSS);
 $CSS = str_replace(array("¥r", "¥n", "¥t"), "", $CSS);
 $CSS = str_replace('}', "}¥n", $CSS);
 preg_match_all("|(¥.[a-zA-Z¥d¥-_]+)¥s*¥{([^¥}]+)¥}|", $CSS, $m, PREG_SET_ORDER);
 $search  = array();
 $replace = array();
 foreach($m as $v){
  if ($v[1][0]=='.'){
   $search[]  = 'class="'.substr($v[1], 1, 255).'"';
   $replace[] = 'style="'.$v[2].'"';
  } else {
   $search[]  = "<{$v[1]} ";
   $replace[] = "<{$v[1]} style=¥"{$v[2]}¥" ";
  }
 }
 $html = preg_replace('|<link[^>]+href="([^"]+¥.css)"[^>]+>|', "", $html);
 header("Content-Type: text/html; charset=Shift_JIS");
 print str_replace($search, $replace, $html);
 exit;
これだけ!

超簡易的なので、穴は色々あると思うけど、、、

・外部CSSだけ。HTMLのheadに書いてあるCSSはインライン化しません
・@importは論外w
・htaccess+PHPが動かないサーバはごめんなさい

条件が合えば既存のHTML+CSSに一切触らないので超絶便利です。
ドコモ用だけでなく、3キャリアのケータイサイトで使ってもいいと思います。
auとか、外部CSSにすると若干レスポンス悪くなりますしね。

もちろんソースコードは商用問わず自由に改変して使っていただいてOKです。
余計なスペースや改行を取っ払ってHTMLをスリムにしたり、キャッシュ処理とか入れてもいいですね。


えんじょい!




スポンサーサイト


はじめまして。
古い携帯のために直にcssを書いてたのですが、どうにかできないかと思い検索してました。
このとおりで成功して喜んだのもつかの間、phpインクルードにするため入れていた
AddHandler x-httpd-php4311 .php .html
が効かなくなりました。
どちらを優先させるか悩むところです。
SOS | 2012/03/31 13:56
COMMENT









Trackback URL
http://akihiro.jugem.jp/trackback/249
TRACKBACK