ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」(続き)
    このエントリをはてなブックマークに登録

2008/7/10 木曜日 matsui Posted in SoftBank, 記事紹介・リンク 4 Comments »

昨日から、ドコモで外部CSSやスタイルタグが利用できるようになるPHPライブラリ、「toInlineCSSDoCoMo」に夢中です。

読み手がかたよってしまうことを承知の上で、続編の記事を書かせていただきます。

私の作成したサイトはSmartyを使ったものが多いため、フィルタを作成しようかなと考えていたら、既に同じようなコードを書いていた方がいました。
当ブログにいつもコメントを戴いているmaru_ccさんのブログです。

→ PHPライブラリ「toInlineCSSDoCoMo」をEthnaに組み込んでみた [hatena.ne.jp]

 

ここでは、Ethnaに「toInlineCSSDoCoMo」を組み込む方法が紹介されています。
Ethna使いの方は要チェックですね。

ひとまず私はSmartyフィルタだけ拝借し、一部を修正して利用させていただくことにしました。

 

しかし実際に動かしてみたところ、幾つか問題が出てきました。
どれも「toInlineCSSDoCoMo」の問題というよりは、PEARの「HTML_CSS」の問題のようです。

 

1. Warningエラーが出る

サイト内のHTMLの書き方が汚く、HTMLをパースする際にエラーになってしまうようです。
こちらは少しずつ書き直していくしかないですね。

ただ、「<a id=”anchor” name=”anchor”></a>」のような書き方でも何故かエラーになってしまうため、困っていたりします。

通常のCSSと同じようにエラーを出したくない方は、「@」でエラー抑止をすると良いと思います。
またCSSファイルが読み取れなかった場合でも、Exceptionに飛んでいってしまうため、注意が必要です。

 

2. 文字化けしてしまう

HTMLヘッダ内の文字コード指定のmetaタグより前にtitleタグがあった場合には、文字化けしてしまうようです。
調べてみると、metaタグを先に書くのが正しいようですね。
今まで特に問題がなかったので気づきませんでした。

 

3. non-objectエラーで止まってしまうことがある

styleタグで内部CSSを指定した場合に、152行目の「$parent->removeChild($node);」でエラーとなってしまうことがあります。
同じstyleタグの書き方でもエラーが出る場合と、出ない場合があるので詳細は調査中です。(styleタグ自体を削除すると直ります)
ひとまず152行目に、「if ($parent) {」を追加し回避しています。

 

4. Smarty->fetchでコンテンツを取得してる場合、outputfilterでは対応できないかも

私のサイトでは、よく使う表示ブロックは、Smartyのテンプレート関数を作成し、独自タグを設定しています。

例えば、最新ニュースを表示したいときには、タグ「{displayNews num=”5″}」で表示するようにしています。
(こうすると、あちこちでニュースを表示できて便利なためです)

内部ではsmarty->fetchメソッドでニュースを取得しているのですが、fetchに対してもoutpufilterが効いてしまいます。
fetchされるテンプレートは当然ヘッダ情報などを持っていませんので、outputfilterとtoInlineCSSDoCoMoとの相性は、あまり良くありません。

ということで、「ob_start([コールバック関数])」を利用し、出力直前の情報に対して、処理を行うことにしました。

コールバック関数のサンプルは次の通りです。

<?php
// obフィルタの設定
ob_start('ob_filter_cssdocomo');

function ob_filter_cssdocomo($out)
{
  require_once 'toInlineCSSDoCoMo.php';
  $basedir = dirname($_SERVER['SCRIPT_FILENAME']) . '/';
  try {
    $buf = toInlineCSSDoCoMo::getInstance()->setBaseDir($basedir)->apply($out);
  } catch (Exception $e) {
    // エラー処理へ
  }
  return $buf;
}
?>

今のところ、これで一通りうまくいっています。
もう少し試行錯誤が必要ですが、快適なHTML製作に向けて、1歩前進です。

 

関連:



Ext_JS+PHPを使ったケータイシミュレータ「mobile-simulator」
    このエントリをはてなブックマークに登録

2008/7/4 金曜日 matsui Posted in 記事紹介・リンク No Comments »

ウノウラボさんのブログ内に、「Ext_JS + PHP」を使ったサーバサイドで動くケータイシミュレータ「mobile-simulator-1.0」が公開されています。

→ ウノウラボ Ext JSをUIに使って携帯サイトのシミュレータを作ってみた [unoh.net]

 

この種のエミュレータでは、「ssb – server side browser[coderepos.org] が有名ですが、ruby環境に慣れてない人はセットアップが大変だったりするので、今回のようにPHPで出来ていた方が、いろんなサーバで動かすことができますし、個人的には嬉しかったりします。

ブログの説明を見るとセットアップ作業が大変なように感じますが、実際にやってみたところ意外とあっさりと動きました。

 

詳しくは、mobile-simulator自体にわかりやすいReadMeファイルが付いていますので、そちらを見るのが良いと思うのですが、下記のように表にまとめてみました。

ソフト名
ダウンロード先
設置ディレクトリ
mobile-simulator-1.0本体 紹介記事内の中段 Web公開領域に設置
Ext JS 2.1 SDK こちら [本体のディレクトリ]/ext/ext-all.js
spyc 0.3 こちら [本体のディレクトリ]/lib/
spyc/spyc.php
MobilePictogramConverter こちら [本体のディレクトリ]/lib/
MobilePictogramConverter/
MobilePictogramConverter.php
[本体のディレクトリ]/img
QRcode Perl CGI & PHP scripts ver. 0.50 こちら
※要ソース書き換え
[本体のディレクトリ]/lib/
qr_img/data
[本体のディレクトリ]/qr_img.php
PEAR HTTP_Client # pear install –alldeps HTTP_Client
もしくはこちら
コマンドからインストール *
PEAR Text_Highlighter # pear install –alldeps Text_Highlighter-beta
もしくはこちら
コマンドからインストール *

* インストールする権限がない場合は、関連するパッケージをダウンロードし、適切な場所に設置することで動作させることも可能です。

 


動作中の画面

ヘッダ情報が見れたり、書き換えられたりするのは便利です。
こういったエミュレータの選択肢が増えるのは嬉しいですね。

 

関連:



モバイルSEO対策ポータルサイト「モバイルSEOリッチ」
    このエントリをはてなブックマークに登録

2008/7/1 火曜日 matsui Posted in 記事紹介・リンク No Comments »

本日はネットをふらついていて、たまたま見つけたサイトをご紹介します。

モバイルSEO対策のためのポータルサイト「モバイルSEOリッチ」というサイトが先日オープンしたようです。

→ モバイルSEO対策ポータルサイト モバイルSEOリッチ [mobile-seo.corich.net]

 

基本的には、複数のモバイルSEOの業者を比較したり、見積もりの一括依頼ができたりするサイトのようです。

ただし、「ケータイサイト診断機能」、「上位サイト調査」、「相談室」、などのコンテンツが用意されており、SEO業者に特に興味の無い方でも、有用なサイトだと思います。

「ケータイサイト診断機能」は、PC向けサイトではよくあるのですが、モバイル向けは珍しいのではないでしょうか。

また「上位サイト調査機能」は、DoCoMo・au・SoftBankそれぞれの検索結果を、サイトイメージ付きで表示することができ便利です。

相談室は、SEOに関する質問とその回答が載っています。
現在はまだ数が少なく、基本的な情報ばかりですが、今後の内容の充実に期待ですね。

 

関連:



RubyKaigi2008で使われたスライド「ガラパゴスに線路を敷こう」
    このエントリをはてなブックマークに登録

2008/6/27 金曜日 matsui Posted in 記事紹介・リンク No Comments »

RubyKaigi2008での発表に使われた、
「ガラパゴスに線路を敷こう 携帯電話用Railsプラグイン Jpmobile」
というスライド資料が公開されています。

→ dara日記 [RubyKaigi2008][jpmobile]RubyKaigi2008にて発表しました [hatena.ne.jp]

 

Jpmobileは、Ruby On Railsによる携帯電話向けサイトの構築を支援するプラグインとのことです。

私はあまり本格的にRubyを使ったことがないのですが、色々と便利な機能が実装されているようですので、勉強がてら見てみようと思います。

スライド資料の方は、日本語と英語が併記されているため、日本語がわからない方でも安心です。
96ページとかなりのボリュームがあるため見ごたえがありますね。

Railsでのケータイサイト構築をお考えの方は、要チェックではないでしょうか。

 

関連:



.NETでのモバイルサイトを作り方をまとめた連載記事「.NETでモバイル・サイト開発を始めよう」
    このエントリをはてなブックマークに登録

2008/6/25 水曜日 matsui Posted in 記事紹介・リンク 1 Comment »

昨日に引き続き.NETネタです。

@ITに.NETでのモバイルサイトを作り方をまとめた連載、「.NETでモバイル・サイト開発を始めよう」という記事がありました。

→ @IT テクノロジー Insider.NET .NETでモバイル・サイト開発を始めよう [www.atmarkit.co.jp]

 

内容は以下の4回+特別編の5部構成になっています。

.NETは使ったことがないのでよくわからないのですが、デバイス・フィルタ機能など、結構便利そうな感じです。

特別編の部分は、UIなどあまり言語に関わらないベーシックな内容が書かれていますので、他の開発言語を利用されている方にも役に立つと思います。

.NETを使ったモバイル開発の記事はあまり見たことがありません。
これだけまとまった情報は、なかなか珍しいのではないでしょうか。

 

関連: