Lucky bag::blog: 2005年03月アーカイブ

月別アーカイブ 2005年03月

前後の月

del.icio.us の inbox が復活

この記事が属するカテゴリー: del.icio.us

ずっと使えなかった del.icio.us の inbox ですが、今見たら復活してた。やっぱ、inbox が del.icio.us のキモだなー。

何となく一連のフォルクソノミーのブームってのも沈静化した感じ。日本でのシェアって、何処が一番なのかなぁ。そういや、del.icio.us から日本語のやつを抽出した umai なんてのも出てきているらしい。

2005-03-31T13:30:28+09:00 | コメント (0) | トラックバック (0) |

letter-spacing を使って背景画像置換

この記事が属するカテゴリー: CSS

CSS でテキストを画像に置換するテクニックとして、当サイトでは text-indent を使用していますが、「And all that Malarkey」で letter-spacing を使った方法「MIR image replacement」が紹介されていたのでメモ。

拙い英語力なんで、解釈間違っているかも知れませんが、例として以下の物を使い、「Movable Type 3.151-ja」の部分を画像にする場合として説明してみます。

<dl>
<dt>powered by</dt>
<dd title="Movable Type 3.151-ja">Movable Type 3.151-ja</dd>
</dl>

んでもって、実際にやってみた詳細とサンプル。 IE5 で見てもらえばわかるのですが、text-indent を使った方法だと、画像がうまく表示されません。一方、 letter-spacing を使った方は、IE5 でも問題なく画像表示されます。

And all that Malarkey で言われている、text-indent を使った場合にはいくつかのブラウザで水平スクロールバーが出てしまうってのは、いまいち分からなかったんですが、取りあえず IE5 にも対応させたいって場合は、「MIR image replacement」を使ってみても良いかもしれませんね。ちなみに、こういった「image replacement」って、日本では一般的にはどう言う呼称なんでしょう、背景画像置換？

2005-03-29T17:11:54+09:00 | コメント (7) | トラックバック (1) |

del.icio.us の settings

この記事が属するカテゴリー: del.icio.us

del.icio.us の settings を見ると、実験的な機能として「tag bundles」と「daily blog posting」の２つが加わっている。

「tag bundles」の方は、タグをグルーピング出来る機能。「create a new bundle」から新規バンドル名を入力し、それに属するタグをスペースで区切って入力して行けば、bookmarks のタグ一覧をバンドル名で纏めてくれる。んだけど、僕的には正直言ってあんま使う気がおきない。タグが無節操で無造作に並んでいる、混沌とした様が自分的にはしっくりくるし、タグをある法則に沿って丸めようとすると、「さて、どうしよう」って小一時間考えてしまうそう。いい加減な性格だってのが良く分かるなぁ。

「daily blog posting」の方は、使い方が全然分からん。設定するにしろ、何をどうすれば良いのかがサッパリ。

「daily blog posting」の設定方法がわかりました。詳細は「daily blog posting」の設定方法を参照。

ちなみに、new の方のブックマーク投稿者数の表示がまた変わってた。なんだか微妙。

del.icio.us_new.gif

2005-03-28T15:29:25+09:00 | コメント (0) | トラックバック (0) |

記憶と検索

この記事が属するカテゴリー: Misc

昨日の夜、HDD レコーダーに録ってあったディズニー番組を娘が見てて、人魚姫の主人公がコマーシャルかなんかに出てきた時に、その日「ダヴィンチコード」の特番がやってたからだと思うんだけど、「そう言えば、ダヴィンチコードにこの人魚の話もなんか出てこなかったっけ」なんてカミさんに言われて、あぁそう言えばそんな箇所があったような気がするなぁって思ったら、頭の中で検索バーに「人魚」ってタイプして検索する場面を想像をしてた。

一般的に紙媒体とデジタル文書を比べた時に、やっぱり可読性や一覧性なんての圧倒的に紙媒体が強い。読書しながら、パラパラっと前のページをめくって再確認したりなんて事は結構やる。この時点では、感覚的に目的の場所をパっと探せる。イメージが頭に残っている訳だ。でも、読了後かなり時間が経っている場合はどうだろう。先述のように、ピンポイントで記述箇所を探したいってな時は、やっぱデジタル文書の方に軍配が上がる。

既読の本は、頭の中に大まかな内容と印象に残っている場面がインデックスされているが、その本の視覚イメージ、ページの触感なんかの物理的は情報はどれくらいの期間、保持されるのかなぁって、娘の後頭部とその向こうに見えるディズニー番組を見ながら思ってみたり。

そういや、名刺を探すのも、名刺ホルダーをめくりながら視覚イメージに頼っているような気がする。クライアントとの対面で、携帯端末で情報をピピっと交換して、宜しくお願いしますなんて事は想像出来ない。やっぱ、紙は無くなんねぇなとか思っていると、アッという間に時代に取り残されるんだろうな。

2005-03-27T20:06:10+09:00 | コメント (0) | トラックバック (0) |

float の問題を overflow で解決

この記事が属するカテゴリー: CSS

float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。

CSS - Clearing floats

簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。

floatサンプル01

container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。

floatサンプル02

しかし、container に幅と overflow を指定すれば解決します。

#container {
        background-color: #ddffbb;
        width: 100%;
        overflow: auto;
}

floatサンプル03

細かい注意点や応用などは、結構はしょっているのでネタ元を見てください。

後付関連情報: hail2u.net - Weblog - CSSをはてなに移植してみた

2005-03-25T19:34:28+09:00 | コメント (7) | トラックバック (3) |

リンク先を視覚化するFirefoxの機能拡張

この記事が属するカテゴリー: Firefox

リンク先のファイルタイプなどをアイコンで視覚化表示してくれる Firefox の機能拡張「TargetAlert」。

何気なくリンクをクリックしたら、Acrobat が立ち上がって「ｶﾞｯ、PDF ファイルかよ」ってな事を防げたりするうっかりさん向けに、微妙に便利な感じ。該当するアイコンをリンクの後に表示。

逆に言えば、目的がメールアドレスなり PDF であれば、見つけやすくなる。対応しているファイルタイプは下記の通り。

PDF
メールアドレス
target="_blank"
RSS と Atom
XML
ワード
エクセル
パワーポイント
zip、tar、tgz、gz、bz2
XPI （Firefox の機能拡張）

2005-03-25T14:26:06+09:00 | コメント (0) | トラックバック (1) |

Firefox1.0.2日本語版リリース

この記事が属するカテゴリー: Firefox

海の向こうで Firefox1.0.2 がリリースされたって言う情報を見て、ふーんとか思いつつ何げに「オプション」→「詳細」→「ソフトウェアの更新」から「今すぐ確認」って押してみたら、Firefox1.0.2日本語版のアップデートが表示されてビビッた。

現時点、 Mozilla Japan ではまだ発表されていないようですが、取りあえずアップデートしときましたです。

2005-03-24T11:17:27+09:00 | コメント (1) | トラックバック (2) |

リニューアル時のデザイン案

この記事が属するカテゴリー: web&blog

リニューアル時のデザインをフォトショップで作ってみたって話の続き。んでもって、作ってみたはいいけど、なんか方向性が見えなくなっちゃったよ、ママン。

色づかいもそうだけど、なんか妙にちぐはぐでグダグダな出来具合。ダメだこりゃ。もう一回ゼロから練り直し。フガッ

2005-03-24T00:08:20+09:00 | コメント (0) | トラックバック (0) |

mixi 内の日記からリンクされた件について

この記事が属するカテゴリー: web&blog

限られたユーザーのみが閲覧出来る mixi などの SNS 内でコンテンツを公開する事に、僕自身は特に思う事はないのですが、そう言った閉鎖的な場からリンクをされてしまうと、リンクされた方としては mixi ユーザーでは無いので非常に歯痒かったりする。

僕の信条としては、リンクはご自由にと言うスタンスだし、リンクの報告も必要ありませんと公言している訳だけれども、それはあくまでオープンな WWW 上での話。トラックバックにしろ、リンクにしろ、対等な立場として色々な意見や議論が発生することに（それが批判的であろうが）意義があると思っている訳で、それが限られたユーザーしか目にする事が出来ない場で晒される（と言うか、それに気付いてしまうと）と、あまり気持ちの良いもんではない。

本人に悪気は無いのかも知れませんが、リンクという行為によって、第三者がリンク先を閲覧することが可能になり、それによってリンクされたサイト管理者が自サイトへリンクされている事を知ると言うことは容易に想像出来ます。どう言った意図でもって、リンクを張られて言及されているのかは分かりかねますが（もしかしたら、大した事ではないのかもしれない）、一方的にやられている感が嫌だなっつう事です。

限定ユーザーのみが参加出来る場でのリンク行為は、もうちょっとよく考えてから行ってもらいたいなと。こういった事って mixi 内では普通に行われているもんなんでしょうか。まさか、自分が「見たいけど見られない」と言う立場に立たされるとは思ってもいませんでした。

2005-03-23T12:40:05+09:00 | コメント (9) | トラックバック (2) |

迷走中

この記事が属するカテゴリー: web&blog

他人のことをとやかく言えるようなもんじゃないんですが、色々とサイトを巡回していると、とにかくフォントサイズをちっさく設定している所が多い。サイズ的には x-small とかだったりするのかしらん。勿論、そんな時はガシガシっと、フォントサイズを二段階ほど大きくする。むしろ、そんくらいが丁度良かったりする。いや、言い過ぎた。小さいフォントサイズの場合だと、反動でその位大きくしちゃうって事か。普段使っているノートパソコンが14.1インチSXGA+の液晶（1400×1050ドット）だったりするから余計にそう感じるのかも。

そりゃ、自サイトも本文 80% とかやっちゃってるし、イタイっちゃイタイ。僕自身それが丁度良いって思っていても、他人からすりゃオイオイ小っちぇよって感じるのだろう。まぁ確かにフォントサイズを小さくすると、何となくオサレっぽく見えるのかも知れませんが、これじゃいかんなぁって思った次第。んでもって、少しずつ変えて行こうかなと。

【参考】ポイント、ピクセル、パーセント、em の変換した際の近似値チャート: Approximate Conversion from Points to Pixels

と言うか、テンプレ自体ガッツリ変えたくて、今日少しだけラフ案をフォトショップで作ってみたけど、いまいち。んー、どうしよう。１カラムだけど、スクロールして行くと、下が２段もしくは３段組になっているってのは、これ１カラムって言わないのかな。

2005-03-22T18:42:01+09:00 | コメント (3) | トラックバック (0) |

8,000円のマウス

この記事が属するカテゴリー: Misc

いやー、買っちまったでゲスよ、ダンナ。アレですよ、アレ。「MX1000 Laser Cordless Mouse」でゲスよ。何つーか、さぶいテンションになるくらいの浮かれ模様。

適度な重さと、抜群の追随性。ポインター飛びなどのハズレ要素も無く、何つったって「Light Amplification by Stimulated Emmission of Radiation」略して LASER 。さすが8,000円ちかい値段 LASER 。会社で使うか、家で使うかマジで迷い中 LASER 。

2005-03-22T00:31:24+09:00 | コメント (2) | トラックバック (1) |

CSS で垂直センター配置

この記事が属するカテゴリー: CSS

table で、テキストをセル内の縦のセンターに配置する時は vertical-align: middle; で簡単にできるのですが、例えば、ナビゲーションで 3em の高さのメニューがあったとして、CSS で文字をボックス内の縦のセンターに配置しようして vertical-align: middle; を指定しても実現出来ません。vertical-align の適用対象は、行内レベル要素及び'table-cell'要素だからです。

#menu li {
        display: block;
        width: 8em;
        height: 3em;
        float:left;
        list-style-type: none;
        text-align: center;
        background-color: #eeeeee;
        border: 1px solid #ccc;
        vertical-align: middle;
}

失敗サンプル（vertical-align: middle;を指定）

センター配置させる方法を前にチョロッと紹介したかもしれませんが、ちゃんと説明。方法は、ボックスの高さと同じ数値を line-height に指定すればオーケー。サンプルのメニューの高さは 3em なので line-height:3em; と指定。

成功サンプル（line-height: 3em;を指定）

地味ですが、知っておくと意外に使える技だったりします。

2005-03-18T18:26:38+09:00 | コメント (0) | トラックバック (0) |

悲

この記事が属するカテゴリー: Misc

YUKI さんのご子息が亡くなられたそうです。僕は特に彼女のファンと言う訳でもないのですが、２歳半の娘を持つ親として、子供に先に逝かれてしまう悲しみは計り知れないものだと思います。彼女の手記を見て、心が痛みました。１歳１１ヶ月って言うと、ホントにかわいい盛りの時期です。将来を楽しみにしながら、成長していく子供の姿を愛おしく感じるそんな時に、突然別れてしまう、そんな悲しみを乗り越えるのはとても時間が掛かる事だと思います。彼女がこの壁を乗り越え、素晴らしい音楽を紡ぎ出せる事を願って、ご子息のご冥福をお祈りいたします。

YUKIからのお知らせ（ pdf ）

2005-03-18T12:45:39+09:00 | コメント (0) | トラックバック (1) |

MTとMySQL4.1の組み合わせで不具合

この記事が属するカテゴリー: Movable Type

このサイトの話ではないのですが、MovableType と MySQL4.1 の組み合わせで、２バイトが文字化けしてしまい、正直ここらへんの事は全然知識がないんで、マジで困っていました。でも、「iandeth.: Movable Type + MySQL 4.1 を組み合わせると日本語が文字化けする不具合／障害の解決方法」を見て何とか回避できました。ホント助かりました、感謝です。

実際に行った作業は、lib/MT/ObjectDriver/DBI 内にあるファイル mysql.pm の52と53行目の間に強調部分を一行挿入。

$driver->{dbh} = DBI->connect($dsn, $cfg->DBUser, $cfg->DBPassword,
    { RaiseError => 0, PrintError => 0 })
    or return $driver->error(MT->translate("Connection error: [_1]",
         $DBI::errstr));
$driver->{dbh}->do("SET NAMES utf8");
$driver;

問題のサイトは UTF-8 なんで、オラオラっと明示的に文字コードを UTF-8 と指定して完了です。

そもそもは、Berkeley DB から MySQL への移行作業にて、mt-db2sql.cgi を叩くと、カテゴリー付近の読み込みでエラーが出て進まなかったことに端を発しました。

Insertion test failed on SQL error Duplicate entry '1-' for key 2

ライセンスを購入してたんで、サポートの方に問い合わてみた所、下記の様な返答がありました。

ご返答いただきました内容から、お問合せのエラーは、MySQL 4.1 以降をお使いで、UTF-8 以外のエンコーディングを使用する際に起こる現象のようです。現在、詳細については確認中ですが、暫定の回避方法として、 Movable Type とデータベースのエンコードを UTF-8にてご利用いただくか、MySQL のバージョンを 3.23.xへと下げていただくことをご案内させていただいております。

MySQL4.1 からは、クライアントとサーバー両方で文字コードの設定を行わなければいけないと。phpMyAdmin で確認したら、「 MySQLの文字セット: UTF-8 Unicode (utf8)」。MT で使用しているデータベースを確認したら、「照会順序」欄が「ujis_japanese_ci」になってる。なんで、テーブルを全部削除して、phpMyAdmin で照会順序を「utf8_general_ci 」と設定し、再度移行してみたとろこ、無事に移行完了。ヒャッホウと浮かれたのも束の間、２バイトが全て文字化け。困っていたところ、上記サイトに出会い無事に解決したっつう事でした。

2005-03-17T19:46:58+09:00 | コメント (0) | トラックバック (2) |

構造と見栄え

この記事が属するカテゴリー: web&blog

構造と見栄えの分離って良く言われるけど、なんでもかんでも text-indent ＋背景画像などの置換テクニックを使えば良いって訳ではないなと思ってみたり。当該部分に img 要素で画像を使うのか、もしくは text-indent ＋背景画像で見せるのか。例えば、企業であれば企業ロゴがある訳で、ではサイトのトップに img 要素で画像をリンクするのが妥当なのかどうか考えてみる。

img 要素とは

そもそも仕様書では img 要素について下記の様に記述されています。

The IMG element embeds an image in the current document at the location of the element's definition. The IMG element has no content

img 要素に内容は無く、当該部分に画像を埋め込むための要素であると定義されています。

どう言った意味付けをするのか

企業ロゴってのは、言わばその会社を表すサインな訳です。果たしてその企業ロゴは、見栄えなのか否か。当該部分にどう言った意味付けでマークアップするかによって見解が変わるのだろう。

まず一つは、企業名を表すと言う意味でのマークアップ。テキストで企業名をマークアップし、テキスト置換テクニックで企業ロゴを背景に使えば、構造としては正しいのではと思う。この場合は、企業ロゴの画像は正に見栄えのためだと判断できる。

もう一つは、それが企業ロゴであることを示すと言う意味でのマークアップ。構造としてそれをテキストで記述するってのは、むしろ違くね？ってなる。画像を使う方が目的としては正しい訳だ。そう言った意味では、alt 属性に記述する代替テキストとして、何が相応しいのかが問題になってくる。alt 属性に企業名を記述したとすると、意味付けが変わってしまう。どちらかというと、「企業ロゴ」のような代替テキストが理に適っているように思う。

どう言った意識で実際にマークアップするのか、そこにどういった意味付けをしたいのかによって、テキスト置換テクニックを使うのか、img 要素を使うのかを選択すれば良いのだろう。構造内に於いて、テキストと画像は等価であって、目的に合わせた使い方であれあば何も問題ないって事ですね。

2005-03-17T12:07:57+09:00 | コメント (0) | トラックバック (0) |

FirefoxでGoogleSuggest

この記事が属するカテゴリー: Firefox

Firefox のサーチバーで GoogleSuggest を使えるようにする機能拡張。

Juan Carlos Navea - loconet

インストール方法

「install search plug-in」をクリックして、検索エンジンを追加
「install 0.1」をクリックして、機能拡張を追加
Firefox を再起動
サーチバーから GoogleSuggest を選択

候補を矢印キーで選択出来ないのは残念。今後のバージョンアップに期待ですね。

2005-03-16T13:11:44+09:00 | コメント (2) | トラックバック (1) |

auのW31S発表

この記事が属するカテゴリー: Misc

W31S が、やっと正式発表されました。今使っている A1301 がそろそろ25ヶ月経ちそうで、そろそろ換え時かなと目論んでいたんですが、この機種を kazu さんのエントリー「W31SAスルー確定、W31S待ち」で知ってからは、某巨大掲示板でチマチマと情報を集め、密かに期待していました。

サイズ約50 (W) ×107 (H) ×26 (D) mm
重量 (電池装着時) 約136g
連続通話時間約190分
連続待受時間約250時間
充電時間約120分
カラーリミックスオレンジ/アコースティックホワイト
画面サイズ/表示能力約2.4インチ/最大26万色相当
画面ドット数 (横) 240× (縦) 320ドット
カメラ有効画素数201万画素 CMOSカメラ
データフォルダ容量約18MB (または1000件)
BREW®データフォルダ容量約5MB
Eメール送信BOX容量約128KB (または 250件)
Eメール受信BOX容量約512KB (または 500件)
入力機能 POBox、Advanced Wnn
音源最大64和音
外部メモリメモリースティック Duo、メモリースティック PRO Duo 等

カラーバリエーションが２色しかないのがちょっと微妙ですが、まぁ許容範囲。ジョグが付いていないのはイタイ。しかし、W31S プロモーションキャラクターのYUKI が持ってるのを見ると、なんだかばかでかく見えるのは、気のせいでしょうか。取りあえず、実機を見てからだな。

2005-03-15T12:56:26+09:00 | コメント (0) | トラックバック (0) |

del.icio.usのinbox不具合の件

この記事が属するカテゴリー: del.icio.us

いつの間にやら、del.icio.us の inbox が機能していなかった件ですが、inbox を覗いてみたら、こんなメッセージが表示されていました。

The inbox is disabled until I can set up the new inbox server, hopefully this week.

どうやら、今週中には復旧するようですね。あと、del.icio.us の new の方ですが、登録者数の見せ方がまた元に戻りました。やっぱ、こっちの方が視覚的に分かりやすい。フゥーーー！！！（しつこい）

2005-03-14T18:36:45+09:00 | コメント (0) | トラックバック (0) |

Firefoxで複数ホームページ設定

この記事が属するカテゴリー: Firefox

Firefox1.0.1 日本語版もリリースされましたが、皆さんバージョンアップはお済みでしょうか。さて、私事ですが、Firefox ではホームページ（起動時のページ）を複数設定出来ると言うことを今日まで知りませんでした:-P。やり方は至って簡単で、UNIX でコマンドをパイプさせるみたいに複数のアドレスをパイプライン「 | 」で区切って記述すれば、いくらでもホームページを設定出来ます。

http://www.google.co.jp/firefox/?ja-JP&act=2|http://www.lucky-bag.com

上記設定では、Firefoxを起動すると、Mozilla Firefox スタートページと Lucky bag::blog がタブで開きます。

関係ないですが、レイザーラモン住谷が僕の中でブレイクしそうです、フゥーーー！！！

2005-03-14T13:52:12+09:00 | コメント (2) | トラックバック (0) |

Mac OS X 10.4は４月に発売？

この記事が属するカテゴリー: Mac

Think Secret によると、Mac OS X 10.4（Tiger）は、４月に発売されるらしい。関係者によると、４月１日に発表され、４月１５日までには店頭に置かれるのではないかと言う事らしい。具体的な発表の場所やメディアが招待されるのかは不明らしいのですが、衛星中継によって全世界に流されると。

The event, sources say, is currently scheduled for Friday, April 1 and will be delivered via satellite to numerous locations around the world. Unknown at this point is where the event will take place and whether the media or other outsiders will be invited to attend. Well placed sources say Tiger will likely be in stores by April 15.

自宅のキューブに入れたとして、どれくらいのパフォーマンスを発揮するのかが問題だなぁ。そもそも、まともに動くのかと小一時間（以下略）。

2005-03-12T10:12:38+09:00 | コメント (0) | トラックバック (0) |

Quasi-Spam Filter Pluginについて

この記事が属するカテゴリー: Movable Type

真琴さんの「Quasi-Spam Filter Plugin 使用者は自分の想定する状況に合わせた設定をすべし」を見て、Ogawa::Memoranda さんの Quasi-Spam Filter Plugin のフィルタリングについて、ちょっと試してみて分かった事。

「URLを自動的にリンクにする」としている

MT の設定で、コメントでのHTMLの利用を許可していなくても、「URLを自動的にリンクにする」としている場合、コメント内に直接 URI を記入すると、自動的にリンクになります。しかし、Quasi-Spam Filter Plugin のデフォルトにある <a をフィルタリングする設定をそのまま使用していると、コメント投稿の仕方によっては、スパムと判定されてしまうようです。

プレビューせずに投稿してみる

コメントに直接 URI を記入し、そのまま「投稿」ボタンを押して投稿してみると、問題なく投稿出来ます。これは Quasi-Spam Filter Plugin がコメント内容を判定した後に、コメント内の URI を自動的にリンクにするからです。

プレビューしてから投稿してみる

コメントに直接 URI を記入し、「確認」ボタンを押してコメントをプレビューしてから投稿してみると、スパムと判定されてしまいます。プレビューした時点で、URI の部分はリンクになり <a> タグが付与されてしまいます。この状態で投稿してしまうと、Quasi-Spam Filter Plugin の判定対象となり、スパムと判定されてしまいます。

結論

というか、URI の自動リンクを有効にしたいのであれば、 <a というフィルタリングルールを設定しなければ良いし、海外のスパム業者は大概 <a> タグを付けたコメントを投稿して来ますので、どうしても <a をフィルタリングしたいのであれば、「URLを自動的にリンクにする」の設定をしないか、どちらを選択するかっつう事ですね。

2005-03-11T14:06:36+09:00 | コメント (0) | トラックバック (0) |

phpMyAdminでオーバーヘッド解消

この記事が属するカテゴリー: web&blog

phpMyAdmin にログインして、データベースを見てみたら、いくつかのテーブルにオーバーヘッドが見られたんで、最適化してみた。

ロリポップのユーザー専用ページから、phpMyAdmin にログイン
データベースを選択した状態で、「オーバーヘッド検査」をクリック
メニューから「チェックしたものを：テーブルを最適化」を選択

オーバーヘッドが解消されて完了。さて、これでレスポンスが多少なりとも上がれば儲けもんなんですが、どうでしょうか。

2005-03-10T13:11:26+09:00 | コメント (0) | トラックバック (2) |

WEB用カラーピッカー

この記事が属するカテゴリー: web&blog

サイト作成時に、色を決める時とかに使わせて頂いているのが、4096 Color Wheel のカラーピッカー。

これは結構使い勝手が良いです。カラーホイール上をクリックすると、web-safe、web-smart、unsafe のカラー番号が表示されます。クリックするごとに web-safe カラーが左のボックスに最大７色保存されていき、古い物から上書きされていきます。更に、「 show full list 」「 hide full list 」の選択で、一番右側に web-safe、web-smart、unsafe 全ての履歴が表示。カラーホイールの右にある四角いボックスからは、濃淡を選択できます。

アクセスキーも設定してあり、色の回転や赤、緑、青、シアン、マゼンタ、イエローにジャンプなども可能。左下の説明にある通り、ページとカラーホイール画像を保存すれば、ローカルでの使用も可能なんでオススメです。

2005-03-09T12:52:50+09:00 | コメント (1) | トラックバック (1) |

DBD::mysqがインストール出来ない

この記事が属するカテゴリー: web&blog

今、あるサーバにDBD::mysqをインストールしようとしているのですが、make の所でエラーが出て困ってたりする。つか、全然わかんないよ、ウヮーン。

gcc -c -I/usr/lib/perl5/site_perl/5.6.1/i386-linux/auto/DBI/ -I/usr/local/include -fno-strict-aliasi
ng -I/usr/local/include -O2 -march=i386 -mcpu=i686   -DVERSION=\"2.9004\" -DXS_VERSION=\"2.9004\" -f
PIC -I/usr/lib/perl5/5.6.1/i386-linux/CORE  dbdimp.c
In file included from dbdimp.c:19:
dbdimp.h:21:49: mysql.h: No such file or directory
dbdimp.h:22:49: errmsg.h: No such file or directory
make: *** [dbdimp.o] Error 1

mysql.h と errmsg.h が存在していないって事かしらん。MySQL devel とかをインストールしなきゃダメなのか。ググっても全然わからん、参った。

結局、MySQL-devel-4.1.9-0.i386.rpm を MySQL Mirrors サイトから落として rpm -Uvh MySQL-devel-3.23.58-1.i386.rpm を su でインストール。でも、まだ make でこける。MySQL のヘッダーパスとライブラリパスの指定が必要っつう事で、下記のように指定（改行していますが、ホントは一行で）。

perl Makefile.PL --libs="-L/usr/local/mysql/lib/mysql -lmysqlclient -lz" 
--cflags=-I/usr/local/mysql/include/mysql

何とか、無事に完了しました。

2005-03-08T20:51:12+09:00 | コメント (0) | トラックバック (0) |

Macのキーボードショートカット集

この記事が属するカテゴリー: Mac

マックのレガシーOSからOS Xまでのキーボートショートカット集。マックは10年ほど使っていますが、すげぇ、こんなにあったのかよって感じ。コマンド＋コントロール＋オプション＋電源スイッチで「高速でシステム終了」ってのは激しく試してみたい。

マジカルマッキントッシュキーシーケンス

2005-03-07T18:32:17+09:00 | コメント (0) | トラックバック (0) |

CSSだけでドロップダウンメニュー

この記事が属するカテゴリー: CSS

ナビゲーションのドロップダウンメニューは、JavaScript を使って実現出来ますが、スクリプトをオフにしてブラウジングしている人も居たりするんで、それを CSS だけでやってみた。今、チョロッとやってみただけなんで、微妙な感じかもしれませんが。（しかも、全然クロスブラウザじゃないし…）

やり方としてはいくつかあると思うんですが、今回はサブメニューの表示・非表示をコントロールするために、疑似クラスの hover プロパティをリスト要素に使っています。なんで、hover プロパティをアンカー要素以外に適用出来ない IE なんかでは表示されないんで、あまり使えないかも:-P

リストを横に並べる

元となる (X)HTML のサンプルは、当然の事ながら、ナビゲーション部分をリスト要素でマークアップしてあります。また、全ての要素の margin と padding を 0 にしています。

サンプル（素の状態）

今回は、ナビゲーションを横に並べた状態のモノを作成するので、トップメニュー（ id="menu" ）のリスト要素を float で横に並べます。後述しますが、リンク要素をブロック化するので、 display: inline; は使いません。

#menu li {
        float:left;
        list-style-type: none;
        text-align: center;
        background-color: #fff;
}

このままでは、サブメニュー（ class="sub" ）も横に並んでしまうので、フロートを解除します。

#menu .sub li {
        clear: left;
}

忘れずに、ナビゲーション以降の要素（今回サンプルでは h3 ）にも clear: left;を。

サンプル（リストを横に並べる）

リンク要素をブロック化

メニューのクリック領域をボタンのようにするために、アンカー要素を display プロパティでブロック化します。

#menu li a {
        display: block;
        width: 8em;
        height: 2em;
        line-height: 2em;
        text-decoration: none;
        border: 1px solid #ccc;
}

ちょっと補足すると、line-height: 2em; とすることで、ブロック化したリンク要素の文字を縦の中央に配置する事ができます。vertical-align: middle; のような振る舞いが便利で、結構重宝してる方法です。更にマウスオーバー時の色の指定を hover で指定します。

サンプル（ブロック化した状態）

サブメニューの表示・非表示

まず、サブメニュー（ class="sub" ）のサブメニューを非表示にします。

.sub {
        display: none;
}

次に、トップメニュー（ id="menu" ）にマウスオーバーした時に、非表示にしてあるサブメニュー（ class="sub" ）をブロック化して表示させる指定をして完了です。

#menu li:hover .sub {
        display: block;
        position: absolute;
}

サンプル（完成　IE未対応）

ポイントは、position: absolute; とする事で、サブメニュー（ class="sub" ）をナビゲーション以降の見出しと本文の上に表示させる事でしょうか。これを指定しないと、サブメニュー表示時に下の見出しと本文がサブメニューの分だけ下にガクっと下がってしまいます。

2005-03-07T15:21:17+09:00 | コメント (2) | トラックバック (0) |

また一つ歳をとった件について

この記事が属するカテゴリー: Misc

結局、風邪っぴきのために会社を休んだ訳ですが、そんな日が誕生日だったりする、微妙に中途半端な不幸具合。なんとか体調も戻ってきたんで、まぁ良しとする。

しかし、この早生まれっつうのも若い頃は免許が取れるのも遅いわけで、あまり嬉しいものでは無かったんですが、年齢を重ねるたびに有り難みを感じたりして、なんだか往生際が悪い。この一年、人間として成長した感は皆無だったような気がしますが、こんなもんでしょうか。

関係ないですが、久しぶりにMステを見てちょっと気になったのは、つんくってプロデューサーとして如何なモノか。

2005-03-04T22:35:06+09:00 | コメント (0) | トラックバック (0) |

del.icio.usのinboxが変

この記事が属するカテゴリー: del.icio.us

ヤバイ、風邪ひいた。どんどん酷くなっていってる気がする。節々が痛いし、ボーッとするし、静止出来なくて前後にユラユラ揺れている。なんか、気付いたんだけど、del.icio.us の inbox に、subscribe してるのが全く入って来ない。なんだろ、ソース見るとおかしな事になってる。

</body>
</html>
－省略－
</html>

html 要素の終了タグが２つある。なんだ、これは。頭が働かない。del.icio.us を使っている理由は inbox があるからなのになぁ。もしかして、僕だけですか？

2005-03-03T14:32:43+09:00 | コメント (2) | トラックバック (0) |

トラックバックに思ふこと

この記事が属するカテゴリー: Misc

ここん所、ちょこちょこと「このサイトについて」に書き加えている。なんで、こんな事を明記しなきゃいけないのって思ったりもするけれど、ウェブ上に公開していると言う事は、顔が見えない全くの他人のサイトとハイパーリンクによって繋がっていく訳で、そんな中、当然人それぞれ解釈が違ってたりするのは、まぁ当然と言うか、要はなんかあった時は、「ちゃんと書いてあるっしょ」って一蹴出来るのが一番の理由（笑）。

リンクに対する考え方

僕なんかは、他のサイトにリンクして頂いても全く連絡して頂く必要は無いと思っているんですが、人によっては「何一言も無しに勝手にリンクしてんだ、ゴラァ！」って思う人もいる。例えば、あるサイトでスゲェ便利な情報を得たとして、自分のサイトでその記事を紹介したとすると、人によっては「何でトラックバックしねぇんだ」または「紹介させて頂きましたコメントしとけや」って思う人もいる。

トラックバックに対する考え方

こういう問題は、トラックバックで顕著になる。このトラックバックってのは非常に便利なのだけれども、使用方法と言うかマナーみたいなモノが確立しないまま昨今のブログブームの勢いに乗って乱発されてしまっている（お前もブームに乗ったんだろってツッコミはなしで）。今から正式な仕様を提唱したとしても、違う考えを持っている人からすれば「何でトラックバックの可能性を狭めてしまうのか」って思われるのだろう。

最近驚いたのが、あるサイトがトラックバック500コ打ったとか、今度は1,000コに挑戦するとかってのを目にした時。ある情報に関連するサイトをググって、トラックバック連発すれば情報収集のために便利。そのためにトラックバックを使って何が悪いのってことらしい。そこの管理人曰く、自分は一応全てのサイトに目を通した上で、トラックバックをしているとの事。そのサイトのコメント欄を見ると、その考えに賛同している人が結構いたりして、これまた驚き。ホント、考え方は人それぞれです。

僕のトラックバックに対する考え方

僕がエントリを作成する際にトラックバックをする・しないの判断は以下の通り。これは、あくまで僕の考えであって、これを強要するものではありません。

面白い記事、または役立つ記事の紹介: トラックバックはしない。この場合は、リンクするにとどめる。なぜなら、トラックバック元の閲覧者がトラックバック先（この場合は当サイト）を見に行っても、これは便利だぜって事しか載っていないので、得るモノがない。
ある記事に対する補足・反論・違う考察をする場合: トラックバックする。尚かつ、そのサイトへリンクもする。これにより相互リンクが発生し、トラックバック先・元の両方の閲覧者にとって有用なリンク集が出来上がる。トラックバック元の文章を解りやすく噛み砕いて説明する場合もこれに当てはまるかもしれない。
ある記事の文章を引用する場合: これは、上記二つの考え方によって分かれます。どちらにしろ、引用元を明示するようにし、 blockquote 要素の cite 属性によってURIを記述しています。

見て頂ければ分かる通り、僕は閲覧者にとって有用かどうかでトラックバックをするかしないか判断します。人によってはこの考え方に賛同出来ない人もいるでしょう。しつこいようですが、これはあくまで僕の考えであって、皆がそうすべきだと強要している訳ではありません。また、当然の事ながら、トラックバック情報を削除する権利が管理者にはあるので、不快であれば削除すれば良いでしょ？ってのは分かるのですが、余計な負荷と不毛なリソースの消費はどうなのよって思ったりもします。

2005-03-02T01:22:41+09:00 | コメント (2) | トラックバック (1) |

unicode-bidiでメアドを変換

この記事が属するカテゴリー: CSS

CSS の unicode-bidi プロパティを使ったアイデア。つか、良く思いついたなって感じ。

ネタ元: 「 Stu Nicholls | Cutting Edge CSS | Hiding email address 」

文字コードの Unicode では、日本語であれば左から右へ、アラビア語であれば右から左へと言う風に言語により文字方向の表記が決められています。 unicode-bidi プロパティを使えば、これを変える事が出来ます。ネタ元では、これをメールアドレスに適応して、ソース上は逆方向に記述し、CSSの unicode-bidi プロパティによって、見栄えを正しく見せています。ロボットからのメールアドレス収集を防げるかも知れませんね。

メールアドレス： moc.gab-ykcul@ofni

上記の(X)HTMLソースコードは下記のようになっています。

<address>
メールアドレス： <span  class="reverse">moc&#46;gab-ykcul&#64;ofni</span>
</address>

適用しているCSSは下記の通り。

.reverse {
        unicode-bidi:bidi-override; //文字方向の設定を無効
        direction: rtl; //文字方向を右から左に設定
}

本来の使い方ではないかも知れませんが、こういう発想が出来る人ってスゲェなって思っちゃいます。

2005-03-01T13:23:12+09:00 | コメント (0) | トラックバック (0) |