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

月別アーカイブ 2005年11月

前後の月

del.icio.us を使いやすくする Firefox の機能拡張

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

ソーシャルブックマーク del.icio.us のトップページをログアウトした状態で見てみると、なんかいい感じに洗練されてきてる。そんで、何下に help ページを覗いたら、Firefox extension ってのが追加されていた。

インストールすることで、del.icio.us を使う上で便利な機能が付加される。ツールバーには自分の del.icio.us ページへのボタンと、今見ているページを del.icio.us にポストするボタンが追加される。んで、メニューには del.icio.us の各種メニューが追加。

あと、右クリックのメニューにも「Tag This Page...」が追加される。これが、リンクを右クリックした際には「Tag This Link...」に変わる。つか、これが良いかも。Bloglines とかでフィード見てて、気になったものがあったらそのまま右クリックからポスト出来るわけだ。del.icio.us 使いには必須の機能拡張かもしれない。

2005-11-29T11:34:05+09:00 | コメント (5) | トラックバック (5) |

プロパティから CSS 仕様書へのリンク集を作ってみた

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

CSS プロパティの仕様が確認できる OS X の Dashboard 用ウィジェット「SeeSS」が便利そう。例えば、ある CSS のプロパティについて、仕様書ではどう定義されてるんだっけってな場合に、仕様書の目次から辿ってっつうのがちょっと面倒だったりする。そこで、各プロパティ名から W3C の CSS 仕様書の当該部分へのリンク集を作ってみた。まぁ、「Appendix F. Full property table」のシンプル版って感じ。

一応、邦訳版へ勝手にリンクした物も作ってみたんだけど、不都合があった場合には削除するかもしんない。あと、リンク切れや漏れがあるかもしれないんで、なんか見つけたらコメントでご報告いただけたらありがたいっす。

2005-11-26T15:43:52+09:00 | コメント (3) | トラックバック (2) |

del.icio.us の playtagger で mp3 ファイルに再生ボタン

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

ソーシャルブックマーク del.icio.us では、 mp3 ファイルへのリンクの場合には再生ボタンが表示されて、ブラウザ上でそのまま再生が可能になってたりするんだけど、どうやらそのスクリプトを自サイトでも取り込めるようになったっぽい。

下記を <head> 内に記述することで、mp3 ファイルへのリンクに再生ボタンが付加されるようになる。

<script type="text/javascript" src="http://del.icio.us/js/playtagger"></script>

つか、<head> 内って事は、読み込むまでページが表示されないし、del.icio.us のサーバが落ちたら道連れっぽいね。素直にスクリプトまるっと落として自サーバに置いておいた方が良さそう。

しかし、ポッドキャスティングとかやっているサイトでこれあったら、別アプリ立ち上げなくてもその場で聴けるから良さそうとか思うんだけど、どうっすか？

2005-11-23T17:50:09+09:00 | コメント (4) | トラックバック (2) |

カーボンヒーターを買う時のポイント

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

昨年の今頃は、ハロゲンヒーターが暖房器具売り場を席巻していた訳だけど、今年はそれに代わってカーボンヒーターが目玉商品らしい。ハロゲンヒーターなんてほとんど見ない。んで、今日そのカーボンヒーターを買ったった。

ハロゲンヒーター

このカーボンヒーターっつうのは、熱伝導率の高いカーボンを利用してるだけあって、約 2 秒ほどであっと言う間に暖かくなる。カーボンヒーターを買う時に気をつけなければいけないのは、使用されているカーボンが国内製か中国製かってこと。注意してよく見てみると色が全然違う。中国製カーボンはホント真っ黒で、国内製カーボンは濃いグレーってのが分かるはず。分かりづらいけど、この写真は国内製のカーボン。

国内製のカーボン

同じカーボンでも実は暖かさが全然違うらしい。例えば、ほとんどのヒーターには 450W と 900W の 2 モードがあったりするんだけど、中国製カーボンの 900W の暖かさは日本製カーボンの 450W 相当しかない。使用する電気代は、450W で 1 時間約 10 円、900W で 1 時間約 20 円くらいになるんで、こりゃ庶民にとってはでかいっす。つうことで、カーボンヒーターを買う時は、使われているカーボンが国内製である事を確認してから買った方が良い。って Y 電気の店員さんが言っていたですよ。

2005-11-20T19:42:48+09:00 | コメント (7) | トラックバック (5) |

web2.0 なソーシャルレコメンダーサービス「Riffs」

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

Riffs: Your Social Recommender - Ratings, Rants, Raves, and Reviews

あらゆる物をレコメンドして tag をつけてレビューして rate して共有できる、web2.0 なソーシャルレコメンダーサービス「Riffs」ってのが登場したみたいで、ちょこっと見てみたけど結構面白そう。Firefox のロゴやアイコンをデザインした Jon Hicks が関わっているんだけど、彼らしいデザインになってるなぁ。

レコメンドされたものは、Riffrs と呼ばれるユーザがレビューや評価をする。レコメンドされている物の詳細情報は誰でも edit できたり、簡単なチャット機能なんかもついてたりする。もちろん RSS が用意されていて、注目しているものは最新の情報を受け取ることも出来るみたい。自分の感覚に近い Riffrs をお気に入りとして、その Riffrs が今なにをレビューしているのかチェックできたりとまさにソーシャルっすよ。まだ、Alpha なんで今後のブラッシュアップが期待できそう。

2005-11-19T14:02:10+09:00 | コメント (0) | トラックバック (2) |

CSS で counter を使って自動連番を振る際の注意点

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

content プロパティを使って、CSS2.1 の counter による自動連番の挿入っつうマニアック気味なちょっとした実験で気付いたことがあったのでメモ。どうやら、ブラウザによっては、counter のリセットを明示しなくても良いものや、リセットしないと連番にならないものがあるっぽい。

サンプルを作成して実験

下記のような定義リストを用意して、これの dt 要素（記事タイトル部分）の頭に上から連番で番号を振っていきたいと思ったとする。

<dl>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
<dt>記事タイトル</dt>
<dd>記事の概要</dd>
</dl>

とりあえず、::before 疑似要素使って content プロパティで counter を生成すりゃ良いのかなって思ったんで、下記のような CSS を適用して counter に対応しているブラウザで確認してみた。

dt::before {
  content: counter(article) ". ";
  counter-increment: article;
}

example01

ブラウザでの確認

現時点で counter に対応しているブラウザは Opera と Firefox 1.5 あたりだと思うんで、そこら辺で検証。今ちょっと Firefox 1.5 RC 外しちゃってるんで代わりとして Flock を使用した。

Opera 8.5 での表示
Flock 0.5pre （Firefox 1.5 と同じ Gecko 1.8b5 ベース）での表示

counter をリセットをする

Gecko 系の方はうまく連番になってくんない。どうやら、counter のリセットを明示してあげないとダメらしい。

dl {
  counter-reset: article;
}

example02

このように指定する事で、Flock でも無事に連番なってくれた。と言うか、実はこれが正しい挙動で Opera がリセットしなくても連番になるのが正しくないのかもしれない。うーん、ちょっとここらへんは詳しくないんだけど、とりあえず counter をリセットしとくのが無難っつう事か。

2005-11-19T02:16:18+09:00 | コメント (4) | トラックバック (0) |

Google Sitemaps に機能追加

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

「Google Sitemaps」に新機能追加 - クロール状況の詳細が把握可能に :: SEM R

Google Analytics のサービス開始で、もしかしたら Google Sitemaps に機能追加されているかもって思って昨日確認してみたりしたんだけど、一日違いで機能追加されてたみたい。日本語への対応と、新しい機能として上位の検索クエリや、クローラーがどのようにクロールしているかのページ分析等を確認できるようになった。

自サイトの統計情報を確認するためには、確認作業が必要となっている。Google Sitemaps にログインしたら、「統計情報を表示」をクリックして確認タブへ移動。そこに表示されている手順に従って「確認ファイル」をテキストエディタで作成しサーバへアップ後、確認ボタンを押下することで確認作業が完了となる。

2005-11-17T13:12:49+09:00 | コメント (0) | トラックバック (1) |

Google ウェブディレクトリと Open Directory Project

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

ふと気付いたんだけど、Google ウェブディレクトリって Open Directory Project の情報を元にしているんだけど、実は微妙に違ってたりするのね。

例えば、同じディレクトリの「World > Japanese > コンピュータ > インターネット > ウェブ上の情報 > ウェブログ > ツール」ってので見てみると、Google の方が Open Directory のより登録サイト数が少ない。Open Directory の方には拙サイトや (o) さん（ Ogawa::Memoranda ）とことか載ってるんだけど、Google の方には反映されていない。んー Google の方でも選別してんのか、それとも反映されるまでのタイムラグがあるのか。お、真琴さん（ hxxk.jp ）とこは両方に載ってるなぁ。つうか、拙サイトってなんも配布していないんで、それはそれで肩身せまいけど :-P

2005-11-15T20:57:14+09:00 | コメント (0) | トラックバック (1) |

del.icio.us の help ページと Tag rolls

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

ソーシャルブックマークの del.icio.us が、またまた微妙に変わってたりする。ページ上部が Breadcrumb shortcuts というナビゲーションになってて、ここに直接 tag を入力する事が可能になった。これによって、tag 一覧から探してクリックしなくても、目的の tag を入力してダイレクトにアクセスできる。

help ページ

んでもって、今回一番変わったのが、help ページが作られたこと。今までは about ページってのがあったんだけど、それを一新して help ページとして充実した形に変化した。API の説明から del.icio.us の使い方まで、かなり細かく説明がされている。

Tag rolls

そんな help ページで見つけた、面白そうなもんが Blog Integration 欄にある Tag rolls ってやつ。自分の tag 一覧を自サイトに表示するためのスクリプトを生成することが可能になっている。

size でリスティングする tag の参照値をスライダーで設定。スライダーを大きくすれば全ての tag 、スライダーを小さくすれば tag の数が絞り込まれていく。んで、最大・最小 tag のフォントのカラーや大きさ、ソート等の設定をしたら生成されたスクリプトを当該ページにペーストすれば完了。さあ、自己満足の世界へ一直線ですよ ;-)

2005-11-13T22:02:32+09:00 | コメント (4) | トラックバック (1) |

CSS だけでフォトギャラリー

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

CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。

gallery.html

(X)HTML は下記のように、画像を順不同のリストで並べている。

<ul id="gallery">
  <li><a href="#empty-anchor"><img src="01.png" /></a></li>
  <li><a href="#empty-anchor"><img src="02.png" /></a></li>
  <li><a href="#empty-anchor"><img src="03.png" /></a></li>
  <li><a href="#empty-anchor"><img src="04.png"" /></a></li>
  <li><a href="#empty-anchor"><img src="05.png" /></a></li>
  <li><a href="#empty-anchor"><img src="06.png" /></a></li>
  <li><a href="#empty-anchor"><img src="07.png" /></a></li>
  <li><a href="#empty-anchor"><img src="08.png" /></a></li>
  <li><a href="#empty-anchor"><img src="09.png" /></a></li>
  <li><a href="#empty-anchor"><img src="10.png" /></a></li>
</ul>

ポイントとしては、z-index を使ってレイヤーの階層を明示してあげないと、サムネールと拡大画像とかがぐちゃぐちゃになっちゃってヒドスな状態になる。ちなみに、:active や :focus の疑似クラスを使って拡大画像を固定させるんだけど、Opera とか Safari あたりはクリックを離すと active と focus の状態を維持してくんないので拡大画像が固定されない :-(

2005-11-05T17:04:31+09:00 | コメント (2) | トラックバック (2) |

del.icio.us でプライベートブックマーク

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

ソーシャルブックマークの利点ってのは、tag を付けて他人と共有してとかっつう今流行りなアレ的な点と、ネットに繋がりさえすれば端末に依存しないでブックマークを管理できるっつう点があるのは周知の通り。

んがしかし、パブリックにしたくないブックマークなんてのもあるわけで、おいおいこんなんブクマしてんよとか思われたくない del.icio.us ユーザーは、for:username タグを使えば、自分以外には見ることが出来ないブックマークが可能だったりする。その際、いちいち "for: ユーザー名" の　tag を付けなければいけないのが面倒だったりするんだけれど、Private del.icio.us bookmarklet で自分専用のブックマークレットを作成し、当該ページでそのブックマークレットを起動すれば一瞬にしてプライベートにブックマークできる。あら便利！

ブックマークは、for ディレクトリで確認することができる。惜しむらくは、for ディレクトリ内ではブックマークの削除ができないってことくらいか。

del.icio.us_for.png

ちなみに、このブックマークレットでブックマークすると "private.bookmarks" という tag が自動的に付けられるんだけど、この tag 一覧をみると他にどういったページがプライベートにブックマークされてんのか分かったりする。まぁ、どうってことはないけど。

2005-11-04T15:20:50+09:00 | コメント (0) | トラックバック (0) |

CSS の可読性を高めるためのアイデア

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

CSS の可読性を高めるためのアイデアってのは人それぞれ色々とあるんだろうけど、最近つらつらとその辺のアーティクルを見て廻った中で特に取り入れてみようかなと思わされたのが、入れ子の状態をブロック単位でインデントして分かりやすくしておくって方法かなぁ。例えば、下記のような感じ。

/*----ラッパー----*/
#wrapper {
}
    /*----ヘッダー----*/
    #head {
    }
        /*----ナビゲーション----*/
        #nav {
        }
        #nav ul {
        }
        /*----ナビゲーション END----*/
    /*----ヘッダー END----*/
/*----ラッパー END----*/

(X)HTML だけじゃなく、CSS の方でも入れ子の状態を視覚的に分かりやすくするためにインデントさせるってのは意外と思いつかなかった。そうか、ブロック単位だけじゃなくて、ブロック内での階層をインデントしてってのもありか。

/*----ナビゲーション----*/
#nav {
}
    #nav ul {
    }
        #nav ul li {
        }
            #nav ul li a,
            #nav ul li a:visited {
            }
            #nav ul li a:hover {
            }
/*----ナビゲーション END----*/

お、カスケードされた状態が分かりやすいかも。

2005-11-01T11:13:33+09:00 | コメント (0) | トラックバック (3) |