firefoxについての記事

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にバインドして動的に便利に利用しちゃいます。
これを適応させると、こんな感じでブラウザ表示されます！

Screenshot-debeso

この画面通り閲覧しているページの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 »

2008年に僕がお世話になったFirefoxのアドオンこのエントリをはてなブックマークに登録

2009/01/02

皆さん、あけましておめでとうございます!!

debeso.comの2009年最初のポストは、僕が去年に活用させていただいたFirefoxアドオンたちの紹介です。

続きを読む »

Posted in firefox | No Comments »

Ubuntuでも携帯電話の絵文字を見れるようにするこのエントリをはてなブックマークに登録

2008/11/29

仕事でもかなり需要が高くなってきた携帯電話関連のサイトですが、Ubuntuで開発などをする場合たくさん不便な事があります…

そのひとつが「絵文字」です。

最近はFirefoxのAdd-onsで、「FireMobileSimulator」が出ているので、ケータイサイトを見るだけだったら不便は何もありません。（ドコモ、Au、ソフトバンクの絵文字を画像で表示することができます）

…ですが、絵文字を編集するなどの作業があるとなると、外字を設定したりしないと不便なので、どこまで需要があるのかわかりませんがメモしておきます。

$ wget http://www.nttdocomo.co.jp/binary/archive/service/imode/make/content/pictograph/tool/download/iemoji_ver130.zip
$ unzip iemoji*.zip
$ wine Setup.exe
$ cp ~/.wine/drive_c/Program*Files/imode/iemoji_j/docomo.tte ~/.fonts/docomo.ttc
$ rm iemoji*.zip &amp;&amp; rm Setup.exe

iモード対応絵文字を使えるようにするには、ドコモの「i絵文字」というソフトからフォントを取り出します。

ソフトインストール後にフォントが展開されるので、それをリネームして、ユーザーのフォントフォルダに入れ込めばOKです。フォントフォルダは、なければあらかじめ作っておいてください。

また、上記ではwineを使用していますので、別途wineを用意しておいてください。

Posted in firefox, mobile, ubuntu | No Comments »