【ハウツー】
では実際にFireCrystalを使用してみよう。jQueryを使用し、簡単なJavaScriptを使ったWebページを作成する。
hello_firecrystal.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello, FireCrystal!</title>
<script src="./js/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
<!--
$(document).ready
(
function()
{
$("input[name='text']").keyup
(
function()
{
$("#typingText").text(this.value);
}
);
$("select[name='color']").change
(
function()
{
$("#typingText").css("color", this.value);
}
);
$("input[name='bgColor']").change
(
function()
{
$("body").css("background-color", this.value);
}
);
}
);
-->
</script>
</head>
<body style="color: #888888">
<h1>Hello, FireCrystal!</h1>
<p>
Text:
<input name="text" type="text" value="">
</p>
<p>
Color:
<select name="color">
<option value="#000000" selected>#000000</option>
<option value="#ff0000">#ff0000</option>
<option value="#00ff00">#00ff00</option>
<option value="#0000ff">#0000ff</option>
<option value="#ffffff">#ffffff</option>
</select>
</p>
<p>
Background-color:
<input name="bgColor" type="radio" id="bgWhite" value="#ffffff" checked>
<label for="bgWhite">: #ffffff</label>
,
<input name="bgColor" type="radio" id="bgBlack" value="#000000">
<label for="bgBlack">: #000000</label>
</p>
<p>
You typed: <span id="typingText"></span>
</p>
</body>
</html>
ユーザの操作にしたがって文字色や背景色が変わるサンプルだ。それぞれに設定したイベントは次のとおり。
hello_firecrystal.htmlをFirefoxで開くと、次のような画面が表示される。
このファイルをFireCrystalを使用してデバッグしてみよう。右下のアイコンをクリックして、記録開始だ。
操作結果は画面下部に時系列に表示される。カーソルをあてることで、「どのようなイベントが発生したか」「どのようなDOM操作がおこなわれたか」がバルーンで表示される。
また、右下の5つのアイコンをクリックすることで順にどのような操作がおこなわれたかを再生してくれる。
アルファ版という位置づけということもあり、動作の安定性に欠ける部分があるものの(筆者の環境では残念ながら真ん中の再生ボタン(?)をクリックしても動作しなかった)、なかなか有用なアドオンと言えるのではないだろうか。バグの再現手順があらかじめわかっている場合、そのとおりに操作をおこなうだけで裏側でどのような処理がおこなわれているかを一発で解析できるのはじつに頼もしい。これからの動向にぜひ注目したいところだ。
| Firefoxの起動ダイアログを撲滅するプロジェクト [2009/9/1] |
| Firefoxブックマーク同期、Weave 0.6登場 [2009/8/28] |
| 特選! 今日から使いたいWebデザイナ向けFirefoxアドオン [2009/8/27] |
| Firefox、加速度センサーをサポート [2009/8/25] |
| Firefoxを高速化する方法 [2009/8/24] |
| Firefox 2からアップグレードしない14の理由 [2009/8/24] |
| Webデザイナ向けFirefoxエクステンション19 [2009/8/19] |
| Firefox 3.6、高速起動とキビキビレスポンス [2009/8/10] |
| FirebugにHTML/CSSリファレンスをアドオン! - FireScope [2009/2/23] |
| Stephen Oney @ Carnegie Mellon |
| firecrystal - Project Hosting on Google Code |
| FireCrystal :: Add-ons for Firefox |
.NETでiPhoneアプリ開発を可能にするNovell「MonoTouch」
【コラム】実践! iPhoneアプリ開発 第17回 ロギングアプリの作り方 (3) - アノテーションビューをカスタマイズする
| 理研、脳・脊髄形成に必要な神経板湾曲の仕組みを解明 [20:16 5/25] |
| 京大、「慢性閉塞性肺疾患」患者の労作時呼吸困難は鍼治療が有効と実証 [20:08 5/25] |
| 120Hz SHVカメラ用イメージセンサーを使った撮像装置 - SHVフルスペック化へ [18:10 5/25] |
| 京大、視覚による物体認知は前頭前野からのトップダウン信号が重要と確認 [17:45 5/25] |
| 製品数の拡大だけでなくBCPの展開なども含めた総合力で事業の強化を図るTI [17:25 5/25] |
|
【連載】読む鉄道、観る鉄道 第9回 『サブウェイ・パニック』 - 1970年代のニューヨークと地下鉄の情景を描く [08:00 5/27] ライフ |
|
【連載】発音も聞けちゃう、知って得するidiom情報 第14回 call it a day [08:00 5/27] ライフ |
|
MINI、ロールスロイスにインスパイアされた最高級品質の特別仕様車を発売 [07:30 5/27] ライフ |
|
【連載】Japanglish、正しく言うならこうでしょう 第57回 gasoline stand(ガソリンスタンド) [07:00 5/27] キャリア |
|
【連載】これだけは要チェック! TOEIC(R)単語帳 第105回 今回のお題は…「regard A as B」 [07:00 5/27] キャリア |
4つの診断で、自分の適性を見つめなおそう!
働くこと・挑戦し続けることへの思いを綴ったインタビュー
あなたにピッタリのアドバイスを読むことができます。
転職に必要な情報が収集できます
企業からアプローチのメッセージが届きます。