宅配便の配達状況 Firefox アドオンを作った

宅配便の配達状況 Firefox アドオン
Firefox の右クリックメニューに「宅配便の配達状況ページ」へジャンプするメニューを追加するアドオンです。

foxkeh.jpg

Firefox 開発者のお祭り、Firefox Developer's Conference に申し込んだけど、よく考えたら僕は Firefox Developer じゃなかった。ということで、以前から作ってみたかった、Firefox アドオンを作ってみました。

実際には、アドオン開発者でなくてももちろん参加できますし、実際に参加者の約半分はアドオン開発者でない方でしたが、アドオンを開発したことによって、自己紹介を兼ねてアドオンの宣伝もできたし、アドバイスも頂けたので成功でした。

使い方は、下図の通りで、
1. 伝票番号 (お問い合わせ番号, 送り状番号) を選択し、右クリック。
2. コンテキストメニューの「宅配便の配達状況」から運送会社を選択。
3. すると、新規のタブに各運送会社の配達状況のページを表示します。

How to use

ついでに、iGoogle ガジェットのコメント欄で要望のあった 運送会社の 「日本トラック」 を追加しました。実物の伝票を入手するのが今までで一番困難でした。

しばらく使ってみて、不具合などなければ、addons.mozilla.org (通称: AMO) へ登録しようと思っています。
何か不具合などあればコメント欄やメールなどで教えてください。

ちなみに今後、用途として Firefox よりふさわしい、Thunderbird のアドオンとして移植する予定です。
Firefox アドオンより実装や導入が容易な JetPack でもいいかな、と思っています。


<追記 2010/01/13>

Add-ons for Mozilla に登録し、公開されました。

・Firefox 版: https://addons.mozilla.org/ja/firefox/addon/47398
・Thuderbird 版: https://addons.mozilla.org/ja/thunderbird/addon/47398
早速1つ星が2つ、しかもネガティブコメントがついていてがっかりですが、最新バージョンのアドオンでは正常に動作しますし、送信される情報については詳細のところで説明しています。

<参考>

Mozilla Re-Mix: 国際貨物のトラッキングを簡単に実行できるFirefoxアドオン「Track Package」
アメリカの運送会社はこのアドオン既に公開されています。

JavaScript で逆行列と行列式の値を求める

JavaScript で逆行列と行列式の値を求める
逆行列と行列式の値を求める C のソースをブラウザ上から実行できるよう、JavaScript で書きなおしたもの。

以前、行列式の値の求め方、逆行列の作り方の C 言語プログラム | BlueSky Lab. というプログラムを公開したのですが、最近になって再び話題になったので、今度はコンパイラ不要で Web ブラウザ上から実行できるよう、JavaScript で書き直しました。

工学部や理学部の 1 年生がこの時期に必ず習うものですね。

逆行列も行列式の値も、画像処理やパターン認識などでよく利用されるものなので、JavaScript より C で公開したほうが価値があるのですが、デモのときにはやはり JavaScript のほうが勝ります。

JavaScript をブラウザから試せるコンソールを作った

JS Web Console - JavaScript をブラウザ上で実行
「実行」を押すと、式を評価した結果が出力されます。echo() で値を出力することもできます。

正月だし帰省中でマルチモニタじゃないので軽いネタで。
一人前の JSer になるなら、自作プレゼンツールだけでなく自作コンソールも必要でしょ、ということで、今度は kou1okada 氏や dankogai 氏にインスパイヤされて自作コンソール作ってみた。

使い方がわかりやすいように、四則演算と正規表現置換、モンテカルロ法で円周率を計算するプログラムをサンプルとして入れておいた。

「就活のしかた」を箇条書きで書いた理由

CSSslide - CSS と JavaScript で動くウェブプレゼンツール
Web ブラウザで動くプレゼンツール。実装が単純な反面、CSS を変更するだけで簡単にレイアウトを変更できます。

就活のしかた (プレゼン版)

このように、 Web ブラウザ上で動くプレゼンツールを作りたかったから。プレゼン = PowerPoint という誤った解釈を否定しておくために、プレゼンツールを自作した。

Google マップ風の吹き出しを作る JavaScript ライブラリを作った

Balloon.js - Google マップ風の吹き出しでダイアログ表示 JavaScript ライブラリ
Google マップや Google カレンダー風の吹き出し型 (バルーン) ダイアログを表示する JavaScript ライブラリ

ポップアップなんていまどきダサいよね、ということで Google マップや Google カレンダーでよく見かける吹き出し型のダイアログを簡単に作成できる JavaScript を作った。

タブブラウザ全盛の時代なのに、大したことのない情報を表示するのにポップアップウインドウを使うのはすごくナンセンス。
「Balloon.js」を使えばリンク部分にちょっと細工するだけで簡単にバルーンを表示できる!

一つのオブジェクトにしているので、導入も楽ちん。
それから、CSS Sprite を使って画像を 1 枚の GIF にまとめて軽量化 & 高速化してみた。

IE 8.0 Beta1 でもテストしたけど、CSS のバグ (?) で × ボタンが動作しないみたい。おそらくこちらのせいではないので、「IE 8 では 動作しません」 とか不利益になることはわざわざ書かない。

詳しい使用方法は下記、リンクを参照。
Balloon.js - Google マップ風の吹き出しでダイアログ表示 JavaScript ライブラリ

JSON の文法チェックを行う方法

JSON (JavaScript Object Notation) のシンタックスチェック (syntax check? validation? validator?)を行う方法。

JSON は所詮 JavaScript のオブジェクトにすぎないので、JavaScript としてチェックすればよい。
手軽な方法としては、Firebug のコンソールのコマンドラインから実行し、エラーがあった場合、コンソールにエラー箇所が出力される。

例えば、
以下のような JSON のシンタックスチェックを行う場合、

{
  "name": "thira",
  "age": "21",
  "live": "ube",
  "affiliation": "Yamaguchi University"
}

このようにオブジェクトにすればよい

var user={
  "name": "thira",
  "age": "21",
  "live": "ube",
  "affiliation": "Yamaguchi University"
}

firebug
Firebug のコンソールのコマンドラインから実行するところ

Firebug が使えない場合は、add workbench のブックマークレットを使用すると便利。エラーは Firefox のエラーコンソールで見る。

あと数時間で博多へ行きます。

追記 (2008.05.25)
この方法だと、Firefox は以下の両方とも通しちゃう。

正 { "name": "thira" }
誤 { name: "thira" }

この場合はチェックできないみたい。
はてブで教えてもらいました。id:kgbu さんありがとうございます。

参考
今日の「僕は馬鹿でした」 - kgbu?

JavaScriptでスマートにダイアログを表示するライブラリを作りました

smartdialog.js
「Yahoo!画像検索」や「Lightbox」のように、画面全体にレイヤーを重ねてダイアログを表示するJavaScriptのライブラリです。
他のライブラリと比較して、任意の色を背景色に選ぶことができ、CSSファイルや透過画像が不要だという長所があります。

必要だったから作ったので、ついでに公開。
JavaScriptのライブラリを作ったのも、JavaScriptでオブジェクト指向プログラミングを実践したのも初めてなので、バグが残っているかも。glayer.jsを一部参考にさせていただきました。

Yahoo!画像検索では、LightBox風UIを実装してから使い勝手がよくなった。
Flickrに登録されている画像が優先されて表示されるっぽいけど、日本語版も登場する予兆かな。しかし、FlickrでCCライセンスで公開している画像を「(C) All right reserved.」と著作権表示するのはまずい気がするんだが。

Lights-Out Game

ライツアウト - Wikipedia
ライツアウトは、5×5の形に並んだライトをある法則にしたがってすべて消灯させる(lights out)ことを目的としたパズル。

こんなのがあるらしいので、JavaScriptを書いてみました。
Lights-out Game

問題1
問題2

暇つぶしにどうぞ。