毎年近所の氷川神社に初詣に行っておみくじをひいているのですが、今年は末吉で、内容を見るとこれが中々良い感じでした。

さてさて、今年も何も買ってませんが(笑)、物欲大王が刺激されているものが2点。

• BOSE Companion2 II
• 32型液晶テレビ REGZA 32H7000

前者は年末にビックカメラへ行った時に試聴して一気に欲しくなりました。iTunesから聴く時にはもってこいな感じですがAmazonのレビューを見たら電源のオンオフが無いとあったのでちょい悩んでしまってます。値段は手頃なんですよね。

後者はそろそろテレビがやばくなってきたので買い替えのタイミングを見計らっている所ですが、300GBの録画が出来てこの値段、さらにデジタル、アナログチューナーが２発あるのが魅力。家電店でも11万代＋ポイント還元になってるので一気に欲しいモードにはなってます。

いや、テレビの買い替え時期って非常に難しいですね...と今年も物欲ネタでスタートの当ブログでした。

title = text [CS]
この属性は、当該要素に関する助言的情報を提供する。
文書全体に関する情報を提供し1文書に1度しか出現し得ないTITLE要素とは異なり、 title属性は幾つの要素に現れてもよい。 ある要素がtitle属性をサポートしているかどうかについては、当該要素の定義を参照されたい。

要するにW3Cの仕様では要素に大して補足的な説明が必要な時に使用する属性な訳です。

FirefoxやOpera、Safariはalt属性をツールチップで表示しないため、alt属性と合わせてimg要素なんかにtitle属性を併記する使い方は間違ってると言う事になりますね（そもそもあまり使われてないか...）。

例えば不動産の情報を提供している○○ハウジングがあったとします。画像で出来たロゴがh1要素でマークアップされています。またこの画像はa要素でマークアップされてます。この場合はどのようにマークアップすべきか？

私の考え方だと以下のマークアップがベストのような気がします。

<h1 title="不動産情報を提供している○○ハウジングのウェブサイト"><a href="index.html" title="○○ハウジングウェブサイトトップに移動します"><img src="logo.gif" alt="○○ハウジングロゴ画像" /></a></h1>

h1にtitle属性を入れたのは画像はあくまでもロゴであり、見出しとなるh1要素本来の意味が伝わらないと解釈したからです。a要素にはこのリンクが何を意味するかの補足説明をtitle属性で入れる必要があるでしょう。ちなみにこのマークアップでツールチップに表示されるのはa要素のtitle属性になります。

このようにコーダーが考えてしまうようなケースは作業の遅れにつながるのできちんとガイドラインに入れるべきではないでしょうか？

画像も使わせていただきました。

CSS Happy Life 『IE6で閲覧すると。』

まず一つはナビゲーションやバナーが表示されているサイドバー（div#secondary）をdisplay: noneで消しました。このサイドバーはdiv#secondaryで定義してあり、中にdiv.localNavが定義されています。その下にバナー群がpタグで定義されていますが、Firefoxのプリントプレビューではきちんとサイドバーが消えてくれるのですが、IE6では何故かバナー群が消えてくれません。なのでdiv#secondaryの子要素を消すためにユニバーサルセレクタを使いました。

div#secondary * { display: none; }

こいつでIE6でもサイドバーが非表示になってくれました。

次に問題になったのがdivごとに改ページされてしまったのです。メインコンテンツ部はdiv.sectionで各ブロックを定義してあり、簡易clearfixとしてoverflow: hiddenを記述していました。こいつが悪さをしていたのです。なのでoverflow: visibleで上書きしました。

div.section { overflow: visible; }

これで印刷用CSSで奇麗に印刷出来るようになりました

この所Gunsブームの勢いでドライブ名をSlash(メイン900GB)、Izzy（サブ100GB）にしてしまいました。

Princetonのディスクのパーティションを1つにするためにSlashにデータを移動し、フォーマットをかけディスク名をAxlにしました。さらにI-O DATAの160GBをDuffにしました。

あとはStevenを加えれば初期メンバーがそろう...

2エントリー連続でPhotoshop関連になります。今回は左のような見出し画像を書き出すリソースファイルを変数を使って管理します。

このような見出し画像を作成する場合、通常だと背景画像レイヤーを複数枚と見出し名テキストレイヤーを大量に作らなければなりません。私も今まではテキストレイヤーだらけになっていました。このような余分なレイヤーを作らないでリソースを管理出来る方法が変数を使ったリソース管理法になります。

簡単に変数を使った管理法の説明をすると、背景画像レイヤーを数種類用意し、日本語名の見出しと英語名の見出しはCSVファイルで管理すると言う方法になります。

それでは詳しく説明をしていきます。

わが制作チームのデザイナーLovwar君が中々ナイスなテクニックを開発してブログに掲載していました。あまりにもナイスで自分向けにカスタマイズして自分用アクションを作成してみました（パクリ）。

Lovwar君のアクションは選択範囲を指定してアクションを実行するタイプですが、私のは最初にアクションを実行して途中で中止を入れるタイプです。

ステップは左の通りでレイヤー名とスライス名を入力するために途中でダイアログを出します。まず最初にレイヤー名を入れるのですが、入れたあとにレイヤー名をコピーし、スライス名入力の時にペーストしてレイヤー名＝スライス名にします。

このアクションでスライス作成を繰り返します。最後（最初でも可能）ですがスライスフォルダを作ってまとめてしまいます。例えば左の図のような感じです。これでレイヤーを見ればどのスライスかが一目瞭然になります。

けれどもやはりLovwar君のエントリーにあるように、ボタンパーツなんかはスマートオブジェクト化してしまってから[レイヤー]→[レイヤーに基づく新規スライス]を実行した方が遥かに便利だとは思います。

スライス作成Photoshopアクションのダウンロード

季節はいつだったのか覚えていません。けれど青空が広がる清々しい日曜日でした。その頃は毎週日曜になると友達と市ヶ谷のお堀か赤坂の弁慶堀に出かけてました。弁慶堀はブルーギルやブラックバス、鯉などが釣れ、市ヶ谷のお堀はクチボソや鮒、鯉、たまにライギョなんかも釣れました。

その日は市ヶ谷に鮒釣りに来ていて練り餌を作る水を確保するために水門の所に降りて行きました。そうしたらなんだか大きな泡がボコボコと出てくるではありませんか！

でかい泡だなと思って見ていると！巨大な口が見えてきました。それは赤ちゃんの頭ほどある巨大な口！！巨大な鯉の口だったのです。

慌てて「コ・コイ！コイ！巨大なコイだ！！」と叫んで水門の所に友達を呼ぶと巨大な鯉は奥底へと帰って行きました。目撃したのは僕一人。

けれども確かに見たんですよ、あれは絶対あのお堀の主なんです。Wikipediaを見たらなんと最長寿命記録が220年との話もある見たいなので200年位生きた主なのでは？と今も私だけは信じてますw

前からいつか来ようと言っていて中々来れなかったの店（大して高くも無いけど）です。初ふぐ屋なので皆さん結構なテンションの高さで盛り上がりました。

しかし飲み物ラストオーダーになったところで「ひれ酒が無料で付くのですが...」。おいおい、最初に言ってくださいよ、そう言う事は。我々もういい感じに酔っぱらってる所にひれ酒飲んだら結構やばいっす。

2名以外はひれ酒をやめて生ビールで通しました。ああ、もったいなかった...

このアルバム賛否両論（どんなアルバムでもそうでしょうが）あるでしょうが僕的には十二分に満足行くアルバムでした。1.Chinese Democracy〜3.Betterぐらいまではガンズっぽさに？と思い聴いていたけれども4.Street of Dreamsから一気に引き込まれました。やっぱガンズだ...と。特にラスト4曲11.I.R.S〜14.Prositiuteの流れは最高です。12.MadagascarではCivil Warのイントロのナレーション「What we got here is failure to communicate...」が間奏部分に入っていてUse Your Illusion発売日にワクワクして聴いた当時の頃を思い出しました。

Appetite for Destructionは僕が10代の時に発売され、初めて聴いたときの衝撃は凄まじい物でした。リアルタイムでGuns N' Rosesのようなバンドに巡り会える時代にこの世に生まれたのは本当にラッキーだと思います。そしてこの時代にそんなバンドがニューアルバムを出した、それだけで満足なんです。

html>/**/body { overflow:-moz-scrollbars-vertical; }

ある日の事、ページを印刷しようとして印刷プレビューを表示しても1ページしか表示されません。これはhtml,bodyにあてるCSSの記述に問題があるのでは？とhtml,body廻りのCSSの記述をチェックしたらこの記述が犯人と分かりました。この記述を削除したら全ページ印刷プレビューが出ました。

どうやらこのプロパティ、記述すると横スクロールが出なくなったりする問題もあるみたいですね。なので素直にhtmlに100%とmargin-bottomを1px指定する方法に切り替えます。

html {
    height: 100%;
    margin-bottom: 1px;
}

2008.12.15追記
overflow:-moz-scrollbars-vertical;が問題なのではなく、html>/**/bodyの記述が問題だった見たいです。ハックを使わず単純にhtmlにすれば問題ないみたいです。

昨日久々にスピーカーから音を出してAppetite for Destructionを聴いていたけれど、このころのGunsの音はやっぱり凄いですね、今聴いてもSlashのギターなんか鳥肌もんです。

うちの子供もWelcom to the Jungleでノリノリで踊っていました。あ、そうそうNeil YoungのRockin' In The Free Worldを聴いてた時も何故かノリノリでした。趣味いいな...

例えばアップルのサイトではPrototype1.6.0.2とScript.aculo.us1.8.0、VAIOのサイトだったらjQuery1.2.2なんて感じで表示されます。

使い方は簡単でブックマークツールバーなどにブックマークレットを設置しておくだけ。

ちょっと見てみたらAmazonはjQuery、flickrはYUI、mixiはPrototype、Last.fmはPrototype+Script.aculo.us、キヤノンはjQuery、DELLはjQuery、SoftbunkはjQueryとなってました。結構jQuery率高いですね。

WTFramework bookmarklet

サムネイルを表示させるプラグインは小粋空間さんのVisibleCustomFieldImageを利用しました。すばらしいプラグインをありがとうございます。

設定したカスタムフィールドの名前は『EntryImage』。普通に使うと

<mt:IfNonEmpty tag="entryImage">
<$mt:EntryImage$>
</mt:IfNonEmpty>

で良いのですが、吐き出すコードにspanタグやらへんてこなclassが生成されてあまりいい感じがしなかったので以下のようにマークアップしました。

<mt:IfNonEmpty tag="entryImage">
<mt:entryImageAsset><a href="<$mt:AssetURL$>" class="thickbox"><img src="<$mt:AssetThumbnailURL width="200"$>" alt="<$mt:EntryTitle$>" title="<$mt:EntryTitle$>" class="photo" /></a></mt:entryImageAsset>
</mt:IfNonEmpty>

<$mt:AssetURL$>は元画像への絶対パスを表示するMTタグ。<$mt:AssetThumbnailURL$>はサムネイル画像の絶対パスを表示するMTタグ。widthモディファイアで幅を200pxに固定しました。altとtitleには<$mt:EntryTitle$>でエントリータイトルを入れました。

この記述方法だとaタグ、imgタグにも直接クラスをあてられるし吐き出すコードも奇麗でいい感じだと思います。

写真はディズニーランドの写真で特に意味は無いですw