2010-02-01 [長年日記]
_ Sinatra 0.9.4 + Rack 1.1.0 を試した。こりゃ楽ちんだ。
以前、生の CGI を生の Rack で rackup してみたけど、Sinatra についてはうまく CGI で動かすことができずにいた。でも上のバージョンでは何の苦もなく動いてしまった。いつの間に？
しかも FastCGI も Sinatra Book にあるように面倒なことしなくても Hanlder を切り替えるだけで動いてしまった。なんだこれ！ 楽すぎる！
いよいよ Sinatra でなんか書きたいわけだけど、時間が…っ!!!
2010-02-08 [長年日記]
_ 改めて作り手としてFirefox周りの道具を整理してみる
今回の記事は自分のためでもあるけどこれから始める人向けの意味もある。もちろん漏れもあるし、単純に自分が知らないものもあるので、これどうよ？ってのがあったら教えてくれると嬉しいデス。
※ 以下のリストには Fx 3.6 じゃないと動かないものがあるかと思えば 3.6 では動かないものもあるので、もう少し静観した方がいいかも。
機械的に正しさをチェック
エラーコンソール
JavaScript と CSS のエラーをチェックできる。Firefox 標準添付。これがあるだけでもずいぶん違う。メニューの [ ツール ] → [ エラーコンソール ] で表示できる。
「エラー」と「警告」のタブだけ見ていればたいていの問題には対応できる。開きっぱなしにしていると IE 用の記述を含むサイトで警告だらけになって「お互いに大変だね」と思える。
Firebug
制作途中では HTML の「調査」に使うことが多いが、これも「コンソール」でエラーの様子を確認できるし、表示するエラーの種類を選択できる。（例えば CSS は無視して JavaScript のエラーだけを表示することができる。）
その他、リアルタイムにいろいろなものを確認できる。もちろん JavaScript の開発時には手放せない。
Web Developer
Firebug が現れるまでは Web 開発者必携と言われたものだが、今はあまりそこまで言われない。しかし Firebug にはできないことも多く、入っていないと困る。今も開発が続いているのはとても有り難い。
具体的には
- キャッシュを off に
- JavaScript を off に
- 任意のレベルの CSS や画像を off に
- form の情報を表示する
- 非推奨要素のハイライト
- table, ブロックレベル要素をハイライト
- 問題のある画像を探す
- 特定のウィンドウサイズへ変更
といったことに利用できる。
Html Validator for Firefox and Mozilla
tidy という HTML の文法チェックと修正を行えるツールを内蔵しているもの*1で、公開していない HTML のチェックを offline で行える。
Firefox extension の形で提供される HTML validator は
- onlinde でないと使えない
- 結局 online の validator サービスを利用しているから
- 公開されている URL を持ってないと使えない
- validator がアクセスしてこれないから
という制約のあるものがほとんどなので、これはとても重宝する。個人的にはいつもコマンドラインで tidy を利用しているが、同じことがブラウザから利用できて問題の箇所も確認しやすい。動的に生成された HTML に対してのチェックは明らかに tidy オリジナルよりこちらの方が楽。euc-jp のページでも shift_jis, utf-8 のページでも問題なく動作する。
※ このツールは Firefox 標準の View Source を上書きしてしまう。これをインストールしていると従来の形のソースを表示するウィンドウは使えない。
チェックツールの利用に際して
原則的には完璧を目指す。つまりエラーも警告もない状態。これは
- エラーや警告が大量にあると本当に直すべき致命的な問題の特定が難しくなるから
- せっかくチェックを自動化して目視の負担を減らしている意味がない
- 単純にエラーがないと気持ちいいし、ゼロになると達成感があるから
ただし、IE 対応などのためにどうしても正しくない記述にせざるを得ない場合もある。それは仕方ない。
以前はよく Another HTML-lint で 100点を目指すことに意味なんかないよという指摘が散見されたが、それは
- Another HTML-lint の宗教的なチェックを有効にしている
- ブラウザがお粗末
といったことが主な理由であって、本来エラーはあってはならない。というかエラーを含んだままでは「変更」のときに泣く。エラーのある状態でたまたま再現された見た目を頼りにしていると、ある日突然同じ見た目を再現できなくなる。未だにこのレベルの Web 制作／開発会社が後を絶たない。*2
目視支援
Popup ALT Attributes :: Add-ons for Firefox
alt 属性をバージョン 8 までの IE のようにツールチップ表示させる。
この挙動は本来 Web 的には正しいものではなく、IE 9 からは他のブラウザと同じように、alt に書かれたものは「画像が表示できないときにだけ表示される」ように変更される予定。
Top - FireMobileSimulator.org
ケータイの画面で概ねどのように見えるか確認する。基本的には画面のだいたいの大きさと絵文字の確認ができる程度と考えておくべき。特に古めのケータイは HTML の解釈の仕方やレンダリングにクセの強いものがあって、それはさすがに再現できない。
Firefox だけで特別なシミュレータがなくてもある程度作業できる、と割り切って使うと幸せになれる。（特に Mac には他にフリーのシミュレータはない。）
Dafizilla ViewSourceWith :: Add-ons for Firefox
HTML ソースを Firefox 標準のウィンドウではなく指定のエディタで開くことができる。
個人的には textarea 内の長文の編集に利用している。Thunderbird にも利用できるのでメールを書く際にも重宝する。
※ 以前は It'a All Text ! ( Firefox ) と External Editor ( Thunderbird ) を利用していたが、いずれも Fx 3, Tb 3 の移行のタイミングで芳しくない挙動をしまくったので常用から外れてしまった。
View Source Chart :: Add-ons for Firefox
HTML のソース上の文法ハイライトではなく構造の図示を行ってくれる。作っている最中のサイトではなく初めて見るサイトの HTML の構造を確認するのにたぶん便利。Web Developer でもある程度同じことができるけどこっちの方が見やすい。
個人的には使ってないけど、デザイン、HTMLコーディングの初学者に向いている印象。
HeadingsMap :: Add-ons for Firefox
HTML の見出しの構造だけをサイドバーに抜き出す。構造の確認と長文の閲覧に便利。
※ 以前は DocumentMap を使っていたが、更新が止まったっぽいので乗り換えた。
その他
ColorZilla :: Add-ons for Firefox
ブラウザウィンドウ内の各所の色を確認できる。そのまま色見の調整もできるので、すでに出来上がってるサイトを参考にしやすい。
YSlow :: Add-ons for Firefox
CSS はページの先頭で、JavaScript はページの末尾で読み込むようにすると速くなる、など表示速度を項目別にチェックしてくれる。Firebug の [ 接続 ] タブの方が詳細に確認できるが、YSlow はどのようにすれば速くなるのかを手ほどきしてくれる。
※ Google Pagespeed も入れてあるし試してみたけど、なぜか YSlow を使っている。なんでかは忘れちゃった。Pagespeed は名前がよくないよね。ノウハウの検索が不可能に近い。
作業支援
Pearl Crescent Page Saver
長いページのスクリーンショットをそのまま撮れる。Windows 用ならもっと高機能なものがあるけど、これで十分な気がする。
QuickNote :: Add-ons for Firefox
以前と違ってデスクトップ付箋アプリはほとんど使わなくなったが、それでもさっと開いて何かを書き留めておけるのは便利。無限に増やせるわけではないのもメモの散乱を防いでくれる適度な制約として活きる。
Dafizilla Table2Clipboard :: Add-ons for Firefox
IE + Office で可能な table の構造ごとコピーを可能にする add-on
Greasemonkey :: Add-ons for Firefox
迷ったけど。Greasemonkey というか実際には bookmarklet でもいいんだけど、ちょこっとしたツールを作って活用すると細かい省力化がはかれるのでやはり入れておくことにした。
自分で作って使っているのは以下のような感じ。ただし再利用できる形で公開はしてない。しようしようと思いつつ放置になっていたり、あまりに環境依存で公開できなかったりしている。
- basename( script_name ) 相当をページ最下部に表示
- ウィンドウを小さくしてケータイ向けの作業をしていたりするとアドレスバーが全然見えなくなってたりする。そんなときこれがあると便利。
- title と location.href を各種フォーマットで吐き出してくれるもの（対応フォーマットは PukiWiki, Hiki, Markdown, FSWiki, Hatena, TracWiki, Plain HTML）
- svn の DAV URL と Trac の Browser の URL を toggle させるもの
- Trac で確認していって、toggle させてすぐ checkout、みたいに使う。
開発向け
Live HTTP Headers :: Add-ons for Firefox
目視だけなら実は Web Developer, Firebug でも HTTP header の確認は可能なのだが、LiveHTTPHeaders は
- リアルタイムのモニタリングに適している
- 任意のフィルタを適用できる
- ログをファイルに保存できる
といったメリットがある。個人的にはよく Mechanize の処理を記述する際にそのひな形、比較対象として使っている。
Firecookie :: Add-ons for Firefox
Firebug 上で cookie を自由に操作できる。
Selenium web application testing system
Web アプリケーションの「操作」を自動テストするフレームワーク。Firefox では SeleniumIDE を使えば簡単に「操作」の記録、テストをくり返せる。テストの保存もできるので共有も可能。
XPather :: Add-ons for Firefox
要素の XPath を確認できるし、任意の XPath でどのような要素を抽出できるか確認できる。Firebug だけでも $x() である程度可能だけど、なんか XPather の方が好きで使っている。
Home - mozrepl - GitHub
Firefox に telnet で接続してコマンドラインで操作可能にする。Firebug でもかなりのことができるが、これは Firefox 全体を操作できるし、検索など独自の機能もある。
2010-02-09 [長年日記]
_ GDのグレースケールPNGバグを踏んだ
GD 使ってたんですよ。ぺちぱーですから。そしたら画像を縮小してるつもりなのに、なんか
縦は縮小されてるけど横は切り取られてる
じゃないですか。えーなにこれーと思ったけど、どうもグレースケール画像の扱いに問題があるっぽい。簡単に試してみたところ
| グレースケールPNG | × |
| グレースケールJPEG | ○ |
だったんだけど、これって有名なバグなんですかね。GD は全然詳しくないので*1今まで知らなかったけど、バージョンにもよるのかなぁ。バグだ！って記事は見たことないのでたまたまかもしれないし、PHP の開発の様子やソースの確認はしてないのでデマかもしれないけど、念のためメモ。
まぁ、グレースケールの画像を Web で使うことなんてそんなにないとは思いますけど。
今回はなんか試しに作った画像がたまたまグレースケールだっただけで、特別グレースケールの画像を扱いたいという要求があったわけじゃないのでそのままスルーしてしまいました。運用で回避、または
仕様です。
*1 というか画像ライブラリは全部詳しくない
2010-02-15 [長年日記]
_ Excelで作った表のHTMLに特化したcleaner書いた
と言っても Ruby + Hpricot でわずか 30行という手抜きですが。
インストール
(gem sources -a http://gemcutter.org/) gem install xls_html_cleaner
依存で Hpricot を要求します。
何がしたかったか
他の人の作った Excel のちょっとした大きさの表を HTML にしたかったのですが、
- Excel で作った HTML があまりにすごかったのでそのままでは使えなかった
- 手元の Dreamweaver 8 には HTM のクリーンアップ、Word HTML のクリーンアップという機能があったが役に立たなかった
- みんな大好き htmltidy に修正してもらおうと思ったけど役に立たなかった
- Hpricot で table 構造以外全部捨てればいんじゃね？
という流れ。
機能
- table 関連のタグ以外は全部カット
- 内容は残るので、table 以外を多く含む HTML に対してこのツールを適用すると意味が分からなくなる
- あらゆる属性も片っ端からカット
- width の指定とかどうせ CSS でやり直すので
使い方
標準入力から読んだ HTML をそのまま標準出力に吐くだけです。オプションとか一切なし。
frame を使った複数シートの HTML は一つずつ与えないと処理できません。簡単なテストしかしてないので、セルのプロパティが複雑なときにどうなるのかよく分からないです。まぁいったん Excel 上で標準の書式にするとか工夫すればいいんだし、そんなに気張る必要もないかなーとか考えてます。
似たような、あるいはもっと高機能なツールがとっくにあると思うんだけど、なんかもう探すの面倒になっちゃって。自分の見つけられる範囲に置いとくことにしました。作りっぱなしにしちゃうと必要になったときにまた見つからないんだよね、こういうの。
余談Hpricot::swapの話
Hpricot なり Nokogiri なりで HTML の書き換えができるんだけど、つかんでおかないとハマるポイントがあるなと思った話。
例によって Twitter のログから。
2009.10.28:15:56:12 >wtnabe< きた。swap だった。Hpricot::Elem#swap, Nokogiri::XML::Node#swap 2009.10.28:17:25:10 >wtnabe< 今日の不覚は Hpricot や Nokogiri にある replace を絶対視して swap を見落としていたこと。
2009.12.09:19:39:30 >wtnabe< Hpricot の場合、要素や属性をいじるメソッ ドは当然破壊的であるということで map を使わずに each でぐりぐり処理す ることと、Hpricot::Elem#attributes は to_hash すべしってことを覚えてお くと幸せ。
2010-02-16 [長年日記]
_ この期に及んでEmacs + sql-XXXが便利
DBMS のフロントエンドって何使ってますか？ phpMyAdmin ? いやいや、やっぱりね、ターミナルから離れたくないんですよ。
自分の場合は普段 PostgreSQL なので psql を使っているのですが、いつも日本語に関してはなんとなくごまかしながら作業していました。よくやるのは
screen の :encoding を DBMS の encoding に合わせる
という方法で、これで日本語の表示に関しては問題ないのですが、Terminal.app を使っていると日本語を含む文字列を shell 上で扱う際に若干問題があったりします。*1今まではこの環境で直接日本語を検索しないようにしていたのですが、今回ちょっとした日本語検索の作業を行うことになって、困ったことになりました。
- Terminal.app + psql では編集してくり返し作業を行う際に日本語が乱れる
- pgAdmin III では日本語をまともに入力できない
以前は DBMS の作業のためだけに eclipse を入れていたりしました。くやしいですが CSV ダウンロードなどの機能を持った GUI のツールが便利なのは認めます。でもやっぱセットアップが面倒で、可搬性が高くないし高負荷で地球に優しくないなぁとも思うわけで。
そこで思い出したのが Emacs の sql-postgres. え、eclipse 使うのと違わない？ まぁまぁ。
21世紀ですよ。Emacs くらい許してください。
まぁ要するに Emacs の中から psql を呼ぶんですが、こうなると screen の :encoding で合わせる技は却って面倒になります。screen の encoding と emacs の terminal-encoding が合わなくなる可能性が出てきます。えぇ、データが euc-jp とか化石な環境の場合は、ですが。
少し悩みましたが、マニュアルを読んでいたらあっけなく解決*2。
\encoding utf-8; だけでよかった*3
なんだそういうことか。よーしもう一度整理しよう。
- Emacs + sql-XXX*4 でコマンドラインツールを呼び出して DBMS サーバに接続する
- \encoding 使っているクライアントのエンコーディング;
- shell 上の生 psql*5 と違って Emacs 上なので日本語の編集も問題なし
- Emacs なので M-/ でいろいろ補完できる。これが素の psql より断然便利。
- 履歴を戻るときは shell-mode と同じで M-p
という、予想外に強力な環境ができあがった。なんだー、みんなそりゃ Emacs から出ないで作業するわけだよー。
これで一安心。
_ masa [Live HTTP Headerの3.6対応が放置されているのが困ったところですね]