Web開発に欠かせないFirefoxアドオン

Web開発のときだけ火狐使いっていう人よくいるよね。今回はそんなFirefoxで、日曜プログラミングでも現場でも使っている開発系アドオンをご紹介。ﾋﾟｬｲ。

Firebug

Firefoxと言ったらこれでしょ！っていう定番アドオン。例えば

• 「コンソール」タブで直接Javascript打ったり
• 「HTML」タブで要素を調べたり
• 「ネット」タブで表示のボトルネックとなっているファイルを見つけたり

などなど、便利すぎて反吐が出るぐらい機能盛りだくさん。

ついでに、FirebugにCookieを見る機能を追加するFirecookieもおすすめだったり。

ColorZilla

カーソル上の文字、背景、画像のRGB値とカラーコードが見れちゃう。文字色だったら上記のFirebugで十分調べられるけど、画像のRGBがわかるのは便利。
画像の背景色に合わせてCSSの背景色も合わせたりとか簡単に。

JSONView

最近はjQueryでJSON読み込んでよしなにすること多いけど、このアドオンを入れておけばブラウザ上でJSONが見られて便利っす。
ツリー階層を閉じたり開いたりもできちゃう。

Live HTTP Headers

HTTPヘッダならFirebugでも確認できますが、ヘッダだけの確認ならこちらのアドオンがおすすめ。リプレイ機能もすばらしい。

User Agent Switcher

User Agentを簡単に切り替えできるアドオン。最近は主にiPhone用ビューが読み込まれるかの確認などに使ってます。デザイン的な確認はやはりSafariじゃないとダメだけど。

Selenium IDE

忘れてたので追記。ブラウザでの結合テストが簡単に行えちゃうすんごいアドオン。画像では、「Googleトップページを開いて、"mnemoniq hatena"で検索して、結果から2番目のリンクをクリックしたら、"プロスチーマーに、俺はなる！"とか痛い宣言がある」っていうのをテストした結果。テストケースは簡単に作れるし便利でっせ。

やっぱりFirebugの機能がヤバすぎて、他のアドオンが微妙に見えちゃう。

ApacheでSymlink先にアクセスしたけど403が返ってくるときに確認したい3つの設定

例えば、DocumentRootが/var/www/htmlの状態で

$ mkdir ~/mySite
$ cd /var/www
$ rm -rf html
$ ln -s ~/mySite html

なんてしたのに、アクセスしてみたら

[Wed Aug 31 22:04:05 2011] [error] [client 192.168.1.1] Symbolic link not allowed or link target not accessible: /var/www/html

なんてエラーログが吐かれたとき。
以下3つのポイントを確認しましょう。

httpd.conf

/etc/httpd/conf/httpd.confといったApacheの設定ファイルを開き、

Options FollowSymlinks

のように、OptionsとしてFollowSymlinksが設定されているか確認しましょう。デフォルトではこのように設定されていると思いますが一応。

パーミッション

Apacheの実行ユーザの権限はありますか？

$ ls -ld ~
drwx------ 22 hoge hoge 4096 Aug 31 22:02 /home/hoge
$ chmod 707 ~
$ ls -ld ~
drwx---rwx 22 hoge hoge 4096 Aug 31 22:02 /home/hoge

などとして、実行ユーザに権限を与えましょう。

SELinux

SELinuxが悪さしている可能性もあります。

# vi /etc/selinux/config

で、

SELINUX=disbled

と書き換え、再起動しましょう。

facebook APIを使って自分のウォールへ投稿

ちょっとした思いつきでfacebook APIを使ってウォールへの投稿しようとしてみたら、つまずいたので備忘録。

ログイン用のURLは

<?php
$loginUrl = $facebook->getLoginUrl(
  array(
    'canvas' => 1,
    'fbconnect' => 0,
    'scope' => 'status_update,publish_stream'
  )
);
?>

こんな感じ。scopeだね。req_permsじゃないよ。で投稿するには

<?php
$data = array(
  'access_token' => $facebook->getAccessToken(),
  'message' => 'Hello world!',
);
$response = $facebook->api('/me/feed', 'post', $data);
?>

とかって。fbのAPI設計すばらしいね。たびたび仕様変更あるみたいだけど。あと開発者向けページに、Access Token取得したり、権限設定してAPIの挙動確認できるアプリ置いていたり素敵。

ぼくが考えた最強のキーボード、Realforce 87UB

キーボード買いました。TopreのRealforce 87UB 静音仕様（型番：SE170S）というやつで、逆輸入のため市場にもあまり出回っていないものです。RealforceはFPSを始めた頃（5年前）から憧れていたんですが、なかなかキーボードにお金をかけるのは気が引け、これまで購入していませんでした。しかし3月ごろにふと検索してみるとこの87UBがもうどこにも売っていない状態になっちゃったみたいで、そのレア感が購買欲に火が付きました。はてダで見つけたid:jeneshiccさんから情報を頂き、kitcutさんで注文しました。それから1ヶ月半、ようやく商品が入荷したということで手に入れることができました。jeneshiccさんありがとうございました。ちなみにkitcutさんも注文後も頻繁に入荷予定日をお知らせしてくれたり、お世話になりました。

で、実際に使ってみた

はい、これ最強のキーボードです！

• 性能は折り紙付きのRealforce
• USキーボード
• 黒い
• せいおん！（従来品と数千円の差でこのレベルなら大満足）
• テンキーレス
• DIPスイッチでCtrlとCapslockを交換可

箇条書きするとこれだけだけど、なかなかないんだよこんな良いキーボード。何よりこいつの価値は"Realforceであること"の一言に尽きるけど。今回初めてテンキーレスのキーボードを購入したわけだけど、そこまで使用頻度多くないのであれば、別売りの安いテンキー使った方がいいですね。あとDIPスイッチもgood。Aキーの横をCtrlにすると色々捗るよ。僕はCapslockも元のCtrlもCtrlとして使いたいのでレジストリで変更してるけど*1。

動画撮ってみた

vimでHello world書いたのを撮ってみました。打鍵が強いので底に当たる音が大きいですが、実際はもうちょい静か。動画でも少し聞こえる「スポスポ」音しかほとんどしません。

激しくおすすめ

コーディングもゲームもまだそんなにしていませんが、不満らしい不満も見あたらず良いキーボードだと思います。値段が高いけど。またすぐにどこも売り切れとなるんで、欲しい方は早めに！

*1:FPSだと元々のCtrlの位置の方が押しやすかったりする

Inspire T10 IN-T10とC270

CreativeのスピーカーInspire T10 IN-T10と、LogicoolのWebカメラC270を購入しました。スピーカーもWebカメラもどうせ使わないだろうと実家に置いてきたのですが、やっぱりないと困るってことで価格コムで安いのを見つけて購入しました。いつか良いのを買おう、ってね。

でもでも！安さの割に両方とも良い感じなんです。

IN-T10の方は低音が物足りなかったりはするものの、作業しながら聴くには十分で、場所もあまり取らないのが良さげ。

C270の方は、もうこれ激しくお勧め。Skypeでビデオチャットする方、ストリーミング配信者の方はとりあえずこれ買っとけ！と。AFがなかったり、首が横に回らなかったり機能面でもハイスペック機よりは見劣りするが、2,000円もしないで買えるレベルでは最高に綺麗。おまけに内蔵マイクも声をよく拾ってくれるし、ノイズも少ないなのです。

はい、ってことで復帰一発目は購入レポとなりました。今まではスピーカーもカメラも数年前に買った結構高いのを使って悦に入ってたんですけど、技術の向上ってすごいねって感じで。最近はローエンドモデルでも十分満足出来るレベルになっちゃったりしてました。数年前買おうかなと思ってやめたあなたも、今安いの（※かつ評価いいの）を買ってみては？

Creative ステレオスピーカー Inspire T10 IN-T10

LOGICOOL ウェブカム HD画質 120万画素 C270

東北地方太平洋沖地震

亡くなられた方々のご冥福をお祈り申し上げます。また被災者の方々に対しまして心よりお見舞い申し上げます。

一応報告としまして、僕は無事です。地震のあった日はちょうど東京の方へ旅行していまして、交通機関が麻痺していたせいでホテルへ行けなかったり、急遽電気もつかないところで一夜過ごすことになったりと影響を受けました。まだ緊張続く現状を鑑みまして、普段から更新の少ない当ブログですが、当面の間更新を控えたいと思います。hangakuさんに倣って、募金情報まとめサイトへのリンクを貼っておきます。

募金情報まとめ - 平成23年東北地方太平洋沖地震

僕も少額ですがはてなさんより募金させていただきました。被災地の一日も早い復興をお祈り申し上げます。

Ustream配信をメディアプレイヤーで見るためのブックマークレット

最近Ustream配信を見ることが多くなったのですが、いかんせんピアカスっ子の自分にとっては独立プレイヤーじゃないと動画見る気になれないんですよね。プレイヤーを最前面表示させて作業したいんで。調べてみたら、単にGom PlayerやMPCのようにFlash再生できるプレイヤー使えばいいだけだってね。

USTREAMを、GOM PLAYERで視聴する方法。｜三茶農園

で、swfファイルを開くためのURLをいちいち調べるのが面倒なのでブックマークレットを書いたよ。超ハードコード。

javascript:(function(){prompt("","http://www.ustream.tv/flash/live/"+document.getElementById('ChannelEmbedCode').childNodes[3].childNodes[1].getAttribute('value').match(/cid=(\d+)/)[1]);})();

http://www.ustream.tv/channel/* 上で使えば、

こんなダイアログが出るんで、コピペしてプレイヤーで開くだけ！はい！えっぐです！

[追記] FirefoxとGoogle chromeで動作確認済