2009 10月 07 | debeso

Archive for 10月 7th, 2009

FireMobileSimulatorをもっと便利に使う！

2009/10/07

そろそろブログでも書いてみようと思ったので書きます。
（※ちなみに前回更新はiPhone3GS発売前だったので3ヶ月ぶりくらい…）

私的・仕事共にモバイルサイト製作などをたまにマークアップしたりするのですが、
制作時に利用する環境で、FireMobileSimulatorを常時DoCoMoの設定にしておきたかったのでプロファイルを通常のプロファイルとは別けています。
多分そんな人は多いんじゃないかなと思ってます。

今回は、そんなプロファイルがある人向けにもっと便利にFirefoxを使う簡単な工夫をしてみます。

用意するものは、以下２ファイル。（後述のファイル利用で１ファイル！）

・XBLファイル（XML）（仮名称:3d-barcode.xml）

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="backbody">
    <implementation>
      <constructor>
        <![CDATA[
this.style.background ="url(http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl="+encodeURIComponent(location.href)+")  260px top fixed no-repeat";
        ]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

・モバイル用プロファイルのuserContent.css

html {
       -moz-binding:url([PATH]/3d-barcode.xml);
}

FirefoxにはXBLというバインディング言語が用意されているので、CSSからDOMにバインドして動的に便利に利用しちゃいます。
これを適応させると、こんな感じでブラウザ表示されます！

この画面通り閲覧しているページのURLを動的に取得して、GoogleChartAPIにリクエストしてbackgroundにイメージで出力してます。
便利っぽいですよね？まぁモバイルサイト制作をやってる人にしか便利じゃないんですけどね…
でも、userContent.cssはそういう私的な目的用に用意された機能なのでコレでいいんです！！

★もう一工夫★

userContent.cssでXMLのPATHを指定するのってスマートじゃないので、
読み込ませていたxmlのソースをbase64でエンコードして読み込ませるとXMLをファイルとして用意しなくていいので効率的です！

一応簡単に試せるように用意してみました。
便利なので試してみてください！

・userContent.css(base64)

今回は簡単な機能を作成しましたが、
XBL応用すればいろいろ出来そうですよね！！

【追記10/24】
こういうのはGreaseMonkeyで全然構いませんけどネwww
でも、言いたかったのはXBLバインドでJS使ってHackしましょという事なんです！

Posted in css, firefox, mobile, 公開してるもの | No Comments »