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

月別アーカイブ 2005年06月

前後の月

追記のマークアップ

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

一度公開した記事に対して後から追記した事を明示するための ins 要素と、後から削除した事を明示するための del 要素がある。これらはちょっと特殊で、マークアップの仕方によってインライン要素になったりブロック要素になったりして、例えば p 要素の外側に記述すればブロック要素、内側に記述すればインライン要素になる。

んで、当サイトでは del （削除）と ins （挿入）のセットではなくて単純に追記だけの場合、ins 要素をブロック要素としてマークアップしていて、「追記」という文字と datetime 属性（修正時刻）の内容を CSS の before 疑似要素と content プロパティで生成している。（CSS コードは「contentプロパティの文字化け」を参照）

ブロック要素として追記した部分

これ思ったんだけど、「追記」という文字を生成しちゃってるのってあんまよろしくないのかなぁと。もちろん、 IE が before 疑似要素に対応していないってのもあるんだけど、それよりも全文配信している Atom を購読している閲覧者なんかが更新された Feed をアグリゲーターで表示しても、どこが追記されたんだか分かんねぇよなあ。

datetime 属性は今のまま content プロパティで生成させるとしても、「追記」という文字はちゃんと記述した方が良いかも知れないな。まぁ、実際に「追記」という文字をどうマークアップするのがベストなのか悩んでいたりするんだけど。Hn タグ？うーん、違うな。

2005-06-29T22:55:50+09:00 | コメント (4) | トラックバック (0) |

フルスクリーンカラーピッカー

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

以前に「WEB用カラーピッカー」を紹介したことがあったけど、今回はブラウザの画面全体がカラーピッカーになっているフルスクリーンカラーピッカーをご紹介。

画面上でマウスのポインタを移動させるとリアルタイムに画面の色が変化する。んでもって、任意の場所でクリックするとカラーコードがポップアップする。機能は至って単純で、JavaScript をオンにしていないと使えないんだけど、やっぱ色面積が広い方がイメージ掴めやすいなって思った。

2005-06-29T11:48:37+09:00 | コメント (0) | トラックバック (0) |

リンクに関する疑似クラスの記述順

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

CSS を記述するときに気をつけなければいけないのが、基本的に後から指定したものが上書きされるっつうことと、「CSSのspecificity」だったりするんだけど、リンクに関する疑似クラスなんかも記述順を間違えると指定通りに適用されなかったりする。

a:link
a:visited
a:hover
a:active

自分はこの順番の覚え方をどっかで見て、未だにそれが頭に残っていてまず間違えたことがない。その覚え方ってのは、上記疑似クラスの頭文字を使って文章にするって方法。

LoVe HA?

「愛だって、ハァ？」って感じ。なんか絶対に忘れないんだよなぁ。

2005-06-24T18:09:06+09:00 | コメント (8) | トラックバック (1) |

del.icio.us のブックマークを export

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

いつの間にか、del.icio.us の settings に export という項目が追加されている。

This export creates a page in a bookmark format understandable by most browsers.
You can save the generated page and import it into your browser.

del.icio.us のブックマークを HTML 形式で書き出しできるようになったみたい。設定項目は２点。

include my tags: タグを含む
include my extended descriptions: extended 欄の内容を含む

「export to html」ボタンを押下すると、export.html が表示されるんで、名前を付けて保存すれば良い。ブラウザにインポートすれば簡単に取り込むことができるし、バックアップ代わりにもなる。試しに、Firefox に取り込んでみた。ブックマークのプロパティから確認すると、タグやextended 欄の内容は「説明」欄に記述されている。

取り込んだブックマークの情報

2005-06-23T13:13:54+09:00 | コメント (0) | トラックバック (0) |

要素を常に画面の中央に配置

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

これまた使い道があるのか微妙なんだけど、要素を常に画面の垂直、水平の中央に固定して配置させてみる。(X)HTML は下記のものを使用。

<div id="container">
  <img src="q.jpg" alt="Q-car" width="120" height="160" />
</div>

適用する CSS は下記の通り。ポイントは、要素の幅と高さそれぞれの半分の値をネガティブマージンで指定すること。

#container {
        position:absolute;
        width:120px;
        height:160px;
        left: 50%;
        top: 50%;
        margin-left: -60px;
        margin-top: -80px;
}

んでもって、実際のサンプル。ウィンドウ幅を縮めたり広げたりしても、画像が常に中央に固定されているはず。

centering.html

あ、今確認したら Opera ではうまく行かないみたい。

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

Google Sitemaps のクローラー

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

どうでも良いことに気付いたんだけど、あれだね、例の Google Sitemaps の sitemap.xml を拾いに来るクローラーって通常の "Googlebot/2.1" とは別のヤツだったのね。

Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

当サイトを登録したのは 6 月 6 日なんだけど、ログを確認してみたら 6 月 5 日の 17:53:51 に上記クローラーがふらっと訪れていたみたい。当然その時には sitemap.xml は作ってなくて、なんか手持ち無沙汰だったのかママンに怒られるからか知らんけど去年の 10 月後半のエントリーを１個拾って帰って行ったみたい:-D

しかし、何で Mozilla なんだろ。

2005-06-20T16:44:39+09:00 | コメント (0) | トラックバック (0) |

Musical Baton が廻ってきた

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

うぁ、廻ってきちゃいましたですよ、Musical Baton が。

hxxk.jp - Chain weblog

最初に Kazu さんの「覚え書き@kazuhi.to: Musical Baton」で見て、へぇー面白い試みだなぁとか余裕ぶっこいて傍観していた訳ですが、まさか自分とこに来るとは思っていなかった。ありがたくも真琴さんからご指名頂いたんで、とりあえず書いてみます。

今コンピュータに入ってる音楽ファイルの容量

マックの G4 Cube に 963 曲入っててトータル 4.22 GB です。手持ちの CD の約 1/3 ほどしかエンコしてなかったりして、もう何かきっかけがないと全てをエンコすることはないかなぁとか思ってたり。

今聴いている曲

こういう時は、見栄を張って何かスゲェのを言ってみたかったりもしますが、正直にここを書いている瞬間に流れているものを。

Hidden Place (Vespertine ): by Bjork

最後に買ったCD

えっと、この間買ったばっかなのは、オエイシス（ネイティブな発音で）の新しいやつ。

Don't Believe the Truth: by Oasis

よく聞く、または特別な思い入れのある5曲

うー、これは非常に難しいな。ここは、最近はあんま聞いていないけど、若かりし頃のバンドやってた時にインスパイアされたものにしてみる。

Passion Of Lovers (Mask ): by Bauhaus
A Night Like This (The Head on the Door ): by The Cure
Blink (THE VISITORS FROM DEEPSPACE ): by Coaltar Of The Deepers
Hair do (WEAR OFF ): by Air
Smells Like Teen Spirit (Nevermind): by Nirvana

この頃に影響を受けたアーティストっつうと、アートオブノイズ、デッドカンダンス、コクトーツインズ、イザベル・アンテナ、ミランダセックスガーデン、マイブラって挙げてたらきりがない。

バトンを渡したい5人

つうかね、真琴さんが Musical Baton の泥臭いまとめで Musical Baton がどう経由して来たのか鬼のようにまとめてるんだけど、ただでさえ繋がりが浅い僕が廻そうかなって思った人が既に廻ってたりする罠。その中でかろうじてまだ廻っていない方を勝手に指名させていただきますので、気が向いたらトラックバックでも:-)

ばあどさん（鳥さんの独り言）
もそさん（今日の覚え書き）
スズキさん（.Si:blog）
nano さん（the meager）
ねこ吉さん（ねこ吉の日常）

しかし、真琴さんが挙げているアーティストとか見てたら、「あ、ROUAGE ってそう言えば何かのイベントで対バンした事あったなぁ」とか、黒夢のヴォーカルの人が僕の友達バンドの関係で横浜のライブハウス 7th アベニューに見に来ていて楽屋で見かけたなぁとか、自分が挙げた Coaltar Of The Deepers のナラサキさんが特撮でギターやってたりとか、何か共通するものが見つかったりして面白かった。

2005-06-15T10:16:05+09:00 | コメント (8) | トラックバック (3) |

del.icio.us で音楽ファイルのダウンロード

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

「del.icio.us タグがファイルタイプをサポート」した件でふと思ったんだけど、実は del.icio.us って音楽ファイルの違法コピーとかにも使われちゃうんじゃないのって思ったりした。どこかで del.icio.us: the new Napster? なんてコメントされているのも見かけたし、system tags を眺めていると、実際すでにそんな状態になってるような気がしないでもない。

del.icio.us / tag / system:filetype:mp3

例えば、サーバとか持ってる人が pubulic_html ディレクトリ下にガッツリと mp3 ファイルをぶっ込んで、del.icio.us でアーティスト名とかアルバム名とかでタグをつけてブックマークしちゃえば、http://del.icio.us/tag/system:filetype:mp3+アーティスト名とかで簡単に第三者がそれを見つけてダウンロードすることが出来ちゃうんだよなぁ。サイト上で公開しているわけではないから、なんかグレーな感じがしないでもない。しらばっくれて、第三者がブックマークしたから del.icio.us 上に公開されちゃっただけで、自分はあくまで自分が管理するためだけにサーバに保存しているんだって主張は通るのかな？

2005-06-14T15:38:02+09:00 | コメント (2) | トラックバック (0) |

del.icio.us タグがファイルタイプをサポート

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

どうやら、del.icio.us では、ブックマークしたもののファイルタイプによって、自動的にシステムタグに分類されるようになったらしい。

どういう事かっつうと、mp3 や MPEG なんかをブックマークすると、そのメディアタイプによって、system tags　に分類される。

system:media:audio タグに含まれるもの

*.mp3 は "system:filetype:mp3"
*.wav は "system:filetype:wav"

system:media:video タグに含まれるもの

*.mpg は "system:filetype:mpg"
*.mpeg は "system:filetype:mpeg"
*.avi は "system:filetype:avi"
*.wmv は "system:filetype:wmv"
*.mov は "system:filetype:mov"

system:media:image タグに含まれるもの

*.jpg は "system:filetype:jpg"
*.jpeg は "system:filetype:jpeg"
*.gif は "system:filetype:gif"
*.png は "system:filetype:png"

system:media:document タグに含まれるもの

*.pdf は "system:filetype:pdf"
*.doc は "system:filetype:doc"

音楽ファイルを探したければ、system:media:audio から探して、さらにその中からファイルタイプによって、絞り込んで探すことが出来るって感じか。

2005-06-13T20:17:43+09:00 | コメント (0) | トラックバック (1) |

MT3.17 と MySQL4.1

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

前に「MTとMySQL4.1の組み合わせで不具合」ってエントリーで、MT と MySQL4.1 の組み合わせで、２バイトが文字化けしてしまって、結局 lib/MT/ObjectDriver/DBI 内にあるファイル mysql.pm にて強引に文字コードを UTF-8 と指定して解決したってのがあったんだけど、今回 MT 3.17 にアップグレードしたら、管理画面が文字化けしやがって、ブルータスお前もか！って状態に陥った。（ちなみに、このサイトじゃなくて別のサイトの話ね。このサイトは問題なくアップグレード出来た）

今回、シックスアパートのアナウンスで、MySQL 4.1を正式にサポートいたします。ってなってたんで、何も考えずにドカッって上書きしたのがいけなかった。うへぇって感じで、MT3.17 の mysql.pm を開いて　52 行目以降の当該部分を見てみたら下記のようになってた。

         $DBI::errstr));
if ($cfg->SQLSetNames && (my $c = lc $cfg->PublishCharset)) {
  my %Charset = ('utf-8' => 'utf8', 'shift_jis' => 'sjis', 'euc-jp' => 'ujis');
  my $c = $Charset{$c} ? $Charset{$c}  : $c;
  $driver->{dbh}->do("SET NAMES " . $c);
}
$driver;

HTML は静的生成だったんで大丈夫なんだけど、再構築したら文字化けするのは目に見えてる。しょうがないんで、とりあえず前回と同じく下記のように変更したら無事解決。

         $DBI::errstr));
$driver->{dbh}->do("SET NAMES utf8");
$driver;

つーか、新規インストールであれば恐らく問題なかったんだろうけど、これで大丈夫なのか激しく不安:-(

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

IE でも擬似的に子供セレクタ

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

ある要素の直接の子要素に対してだけ CSS で指定をしたい場合、子供セレクタ div > p が便利。しかし、IE がこれに対応していなくて残念って感じだったんだけど、meyer 氏が IE でも擬似的に直接の子要素を指定できる方法を発見した模様。

Eric's Archived Thoughts: Universal Child Replacement

例えば、下記の (X)HTML があったとして、id="content" の子要素の段落だけ背景色を #ff8800 に変えたいって場合。

<div id="content">
<p>content の直接子供要素の段落。ここだけ背景色を変えたい。</p>
<div id="foo">
<p>この段落は色は変えたくない。</p>
<p>この段落は色は変えたくない。</p>
</div>
</div>

子供セレクタに対応しているブラウザであれば、下記の CSS で実現することが出来るけど、IE には反映されない。

#content > p {
        background: #ff8800;
}

そこで、IE でも擬似的に子要素への指定を実現するには、下記のように指定すればオッケーなのですよ。

#content p {
        background: #ff8800;
}
#content * p {
        background: transparent;
}

子孫セレクタで、変えたい色を指定し、その後に元の指定を上書きさせる。これで、擬似的に子供セレクタのような指定が出来るっつうカラクリ。

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

CSS で画像ポップアップ

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

JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。

popup.html

最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。

.photo a.popup:hover {
        background-color: #fff;
}

何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。

2005-06-09T19:52:10+09:00 | コメント (2) | トラックバック (16) |

見栄えと使い勝手の良いフォーム

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

サイトの見栄えを CSS でレイアウトしていても、意外とフォーム周りのスタイルは作り込みされていなかったりってのは結構ある、と言うかほとんどな気がしないでもない。んで、ちょっと前に And all that Malarkey で、いけてるスタイルのフォームを募集している記事もあったりして、そんな中でも紹介されていた「Snap Tax」が結構きてる。

Snap Tax

見た目も柔らかい感じだし、自分的には結構好きな色使い。入力欄へフォーカスするとその欄の内容に合わせて入力項目の説明が表示されるんだけど、見せ方が分かりやすくて良いな。説明タブから更に詳しい説明へのリンクもあったりして、かなり親切な感じ。

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

使いやすくなった del.icio.us

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

tags の表示方法

メンテナンス終了後の del.icio.us だけど、微妙に右のメニュー（tags）部分に手が加えられて使いやすくなっている。

まず、メニューを折りたためることが可能になった。それと、表示方法が cloud か list を選べるようになっている。cloud で表示するとスクロールしなくても全てのタグが表示できるんで、個人的にはこの表示方法が好きかも。あと、タグの並び順をアルファベット順か頻度順か bundle 順を選べることが可能。

タグ入力時に suggestions

後から気付いたんだけど、ブックマーク時のタグ入力の際に、文字を入力する度にタグの候補を提示するようになっている。

del.icio.us_tag02.png

これはかなり便利な機能。タグ入力の煩わしさがかなり軽減された。今んとこ気付いたのはこれくらい。あ、そうそう、new の方（http://del.icio.us/new/ユーザー名）が無くなったみたい。

2005-06-06T12:01:54+09:00 | コメント (0) | トラックバック (0) |

携帯番号からキャリアと地域を解析

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

へぇー、携帯番号からその携帯のキャリアと契約地域を割り出すことが出来るなんて知らなかった。ウェブ上で入力して調べるサービスもあるみたいだけど、やっぱローカルで使うソフトウェアの方が安心でしょーって事で、「おしえて！ケータイ君」を試してみた。

携帯番号を入力し解析ボタンを押せば、地図上で地域をハイライト表示してくれ、事業者（キャリア）を教えてくれる。

これで、見知らぬ番号の着信履歴を睨みながら誰だろうって訝しむことなく、まずは解析してみて少なくとも自分とは関係のない地域からであれば気持ちよくスルー出来る。もちろん地域っつっても、あくまで契約地域なんで実際には違うかもしれないけど。

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

MT のカンペと管理画面の可変レイアウト化

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

Movable Type のカンペ

この間「PHP や CSS のカンペ」を紹介したんだけど、今回はMovable Type のカンペを紹介。

Movable Type Cheat Sheet

PNG 版と PDF 版があり、どうやらドイツのサイトらしいんだけど、ちゃんと英語版も用意されている。全ての MT タグが用途別にソートされていて、属性や日付タグのフォーマットなんかも網羅されている。もちろん、ある程度 MT タグの使い方が分かっている人じゃないと意味がないものだけど。

MT の管理画面を可変レイアウトに

MT と言えば、管理画面を可変レイアウトにする CSS を配布しているサイトもある。

Alex | weblog: Movable Type Liquid Template

こちらは、スペインのサイト。中段あたりにある Podeis descargar el paquete aquí. (Descargado 74 veces.) ってとこから zip ファイルがダウンロード出来る。解凍した中身は下記の通り。

styles.css
topnav-bg.gif
topnav-logo.gif

1 を CGI が置いてあるディレクトリに存在する styles.css と入れ替え。2、3 をCGI が置いてあるディレクトリにある images ディレクトリ内にある物と入れ替えて完了。

オリジナルファイルをバックアップした上で適用してみた。細かい所で気に入らない部分もあるけど、大まかに見れば意外と良い出来かも。管理画面内の左のメニュー（新規エントリーとかテンプレートなどがあるメニュー）が位置固定になっているんで、スクロールしても常に同じ位置に存在してくれる。新規エントリ入力時には、ウィンドウを広げればテキストエリアも広がってくれる。さすがにゼロから作り上げるのは面倒くさいけど、これを元に自分なりにカスタマイズすれば、お手軽にオリジナル管理画面が出来上がる;-)

2005-06-01T18:46:01+09:00 | コメント (0) | トラックバック (1) |

Lucky bag::blog