Lucky bag::blog: web&blog アーカイブ

カテゴリー別アーカイブ web&blog

lucky-bag.com ドメイン内ページの被リンク数トップ 10

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

そんな感じのネタををどこかがやってるのを見た気がするのでウチのも調べてみた。Google ウェブマスターツールで外部リンクのテーブルを落として、ソートしてみた現時点での結果は以下の通り。

トップページ

被リンク数 : 5814
背景画像に使える透過 GIF

被リンク数 : 1757
IE7 を含むモダンブラウザ向けの CSS ハックまとめ

被リンク数 : 1726
ピュア CSS なプレゼン用スライドショー

被リンク数 : 1440
CSS3 の target 疑似クラスで脚注を動的に表示する

被リンク数 : 1297
CSS デザインギャラリー

被リンク数 : 1116
line-height の値には単位なしが良いとされる理由

被リンク数 : 1051
個人的に気に入ってるユーザースタイルシート

被リンク数 : 1017
使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite

被リンク数 : 1013
CSS を作成する際のお約束

被リンク数 : 936

リンク元のドメインは圧倒的に hatena.ne.jp が多いのだけれども、はてなブックマーク - www.lucky-bag.com の人気エントリーの上位 10 件とは同じ結果にはなっていないのね。多分、ブックマークしたものをダイアリーの方に表示している場合なんかは、そっちも拾われてカウントされているみたいだから、新しめの記事でなおかつブクマ数の多さってのがポイントなのかも。ちなみに、ドメイン内すべての総被リンク数は 34922 。ホントかよ。

2007-02-24T16:35:51+09:00 | コメント (0) | トラックバック (0) |

ブラウザ上でワイヤーフレームが作れるFrametastic

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

ワイヤーフレームっつうと、デザインの前にページ内の構成要素を明確にするもので、作成に使うツールはイラレやフォトショップ、エクセルやパワーポイントなど、人によって違うのかもしれない。そんなワイヤーフレームをブラウザ上で簡単に作れるウルトラライトウェイトな Frametastic なんてのを見つけた。ちなみに、今のところは Firefox のみでしか使えないみたい。

In-Browser Wireframe Prototyping with Frametastic

What I’ve really longed for is an ultra-lightweight, simple tool for producing wireframes right inside the browser. No flash, no java, darn it - no server even - just a pure HTML / CSS / Javascript solution.

ローカルにダウンロードして index.html をブラウザで開き、おもむろにドラッグしてボックスを作成、クリックでタイトルを入力、キーボードの R キーを押してサイズを入力ってな感じ。ボックスに色を付けたい場合は下部右の Swatches からドラッグ & ドロップするか、もしくは対応する数字キーを押下。Swatches をダブルクリックして好みの色を Hex 値で指定することもできる。

ただ、まだまだ発展途上なんで、色々と歯がゆいところもある。マウスでボックスのリサイズができないことや、セーブやロードは出来るけどリロードやウィンドウを閉じてしまうと全て消えてしまうこと、UI 的に不親切な部分がある、などなど。まぁ、ここら辺は機能追加していく予定らしい。とりあえずは、パッと作成したい時には重宝するかも。今後に期待。

2006-09-30T17:14:37+09:00 | コメント (6) | トラックバック (1) |

グリッドレイアウトのための背景画像

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

ウェブページをグリッドレイアウトするのであれば、あらかじめ CSS で背景画像にルーラーみたいな画像を指定しておけば制作時に便利じゃね？ってアイデア。

つうことで、自分が使いやすいと思う方眼画像をちゃちゃっと作ってみた。

gif画像（ご自由にどうぞ）: grid.gif (GIF 画像, 200x200 px)
実際に適用してみたサンプル: グリッドレイアウトのための背景画像のサンプル

ルーラーの最小単位は 5px で、それより若干濃い線が 10px 、さらに濃い線が 50px、んでもって薄いグレーの背景が 100px 単位って具合。カチッとしたレイアウトをしたいんであれば、確かにこのアイデアは良いかもね。

2006-07-19T17:05:31+09:00 | コメント (3) | トラックバック (3) |

CSS Reboot に見るウェブデザインのトレンド

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

以前にも取り上げた事があったけど、CSS Reboot ってのは、ウェブサイトのリデザインを期日を決めて一斉に行なうイベント。多分もう 3 回目くらいだと思うんだけど、5 月 1 日に 2006 Spring が行なわれたばっか。CSS Reboot のサイトでは、リデザインしたウェブサイトが紹介されてて、誰でも気に入ったサイトに投票できるようになっている。ちなみに、CSS Reboot のその場でクリックするだけで評価できる vote 機能は、シンプルで良いな。送信した後に、Total score も表示されるし。

んで、Christian Montoya が今回の Reboot でのデザインのトレンドについて書いていたんだけど、大雑把に書き出してみると下記のような感じ。

1024px の幅
Silk Icons の使用
暗い背景に明るい色のテキスト
大きめのフッタ

1024px の幅

どうやら、確実に幅 1024px のサイトが増えているっぽい。ALA が幅1024px を採用したことは記憶に新しいけど、その流れってのは海の向こうでは意外と大きくなってきてるのかも。確かに高解像度な環境ってのは増えて来てはいるんだろうけど、むしろフレキシブルなレイアウトを考えた方が良いと思うんだけど。

Silk Icons の使用

Silk Icons は、700 以上のアイコンがほぼフリーで使えるって事で有名だけど、やはりこの Silk Icons が使用されている率ってのは高いらしい。確かにこういったアイコンでちょっとしたアクセントになるしね。

暗い背景に明るい色のテキスト

暗めの背景色に明るい色をテキストに使うってのは流行っているかも。黒背景に原色使ったりとか。僕も某テンプレ用にそれっぽいデザインの CSS 書いてたんだけど、ちょっと諸事情で作業が止まっちゃてるなぁ。つか、light on dark なんつって、それ系を集めたギャラリーサイトなんかもあんのね。

大きめのフッタ

大きめのフッタってのは、コピーライトとかそんながチョロっとある所謂普通のフッタの事ではなくて、むしろサイドバーに置くような情報を下カラムにまとめたようなもののこと。元ネタの Christian Montoya のサイトもそう。どうやら、This is Powazek が最初にやり始めたサイトのひとつらしいんだけど、これはちょっとそのうち取り入れたい事のひとつかも知れない。1 カラムでボトムにエクストラ情報をまとめてって感じで一回くらい作ってみたいなぁ。

Christian Montoya も言ってるけど、これらをただ模倣してもしょうがない。でも、こういったことを知ることで、何かしらのインスピレーションを受けて、自分の中で昇華できれば良いよなぁ。

2006-05-06T01:53:40+09:00 | コメント (3) | トラックバック (4) |

リサイズしてドロップシャドーをつける Photoshop 用アクション

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

以前、一括して変換する必要があった時に作った Photoshop 用のアクションを公開してみる。なんか、別に大したことしてなくて、Photoshop いじってる人だったら誰でも簡単に作成できちゃうようなもんだけど。

action.zip

開いている画像をリサイズして 4px のドロップシャドーをつけるだけ。アクションは 3 種類あって、それぞれ影を含んだ状態で横幅 100px、200px、300px で縦なりゆきの 3 パターンのサイズにリサイズするようになっている。

100px のサンプル
200px のサンプル
300px のサンプル

ダウンロードして解凍した shadow.atn を、Photoshop のアクションパレットから「アクション読み込み」で取り込むと、3 種類のアクションがセットとして表示される。適用したい画像を開いた状態で、希望のサイズを選択してアクション再生でズギャンと作成。後は、お好みの画像フォーマットで web 用保存するなりなんなりと。あと、サイズとか影の調子とかで気に入らないとこは、アクションを編集して変更すれば良いかと。

一応、対応しているPhotoshop のバージョンは、カンバスサイズを相対でサイズ変更可能になった Photoshop 7 以降だと思う。多分。特に色んなバージョンで試してないから分かんないけど。

2006-05-02T12:52:49+09:00 | コメント (0) | トラックバック (0) |

Validator は完璧じゃない

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

(X)HTML や CSS やフィードなどが、仕様に準拠しているかチェックしてくれる Validator がいくつかある。こういったチェックツールってのはケアレスミスなんかを発見するのにスンゲェ便利なわけだけど、盲目的にチェック結果を信じてしまうのはよろしくない。

例えば、一個前のコメントで書いたけど、CSS Validator にもバグがある。単位なしの整数値を line-height の値に指定するとエラーを吐く。line-height: 1.0; などと小数点付きの実数値で指定するとエラーを回避できるんだけど、小数点なしの整数値でも Valid 。仕様書を見ても、小数点なしの整数値は不正だなんて書いちゃいない。

Firefox の拡張「Html Validator for Firefox and Mozilla」でも、ins 要素にブロック要素を内包させてるとNotice: inserting implicit <...> なんて警告されちゃう。ins 要素は完全にインライン要素なのかって勘違いしちゃったりする人がいるかも知れない。（関係ないけど、木達さんがやりたいって言ってたこの拡張の日本語訳を密かに期待してたりする。）

ミスを発見するために使っているのに、上記のようなエラーに振り回されて間違った知識を得てしまうのは本末転倒だよね。もし Validator でエラーが出て自信がなければ、まず仕様書で確認してみることが一番安全なんじゃないかと。

Validator いろいろ

ついでにいくつか Vlidator をまとめてみる。ちうか、これ意外にもまだまだあるんだろうけど、こうして見てみるといろいろあるね。

2006-04-19T15:54:54+09:00 | コメント (4) | トラックバック (1) |

Ajax を利用したアクセス解析ツール mapsurface

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

非常にライトウェイトなアクセス解析ツール mapsurface 。ベータテストの申し込みしをしてから約 10 日ほど、忘れていた頃にアカウントが貰えたんでちょっと使ってみた。

mapsurface | web page activity widget

mapsurface is a web page activity widget that helps you quickly see how people find, navigate and value the pages of your web site.

Google Analytics 等のサードパーティ製アクセス解析サービスは管理画面にログインしないと解析結果が確認できないわけだど、mapsurface の場合は今閲覧しているページ上でそのページの解析結果を即座に、しかも誰でも見ることができる。とりあえずテストページを作ってみたんで、百聞は一見にしかず。

mapsurface テストページ

Alt + x（マックの場合はoption + x）Opera の場合は shift + ctrl + x のショートカットで画面にウィジェットが表示され、簡単なアクティビティを確認できるようになっている。

mapsurface ウィジェット

ウィジェット内の map をクリックすれば、ページ内のリンクに対するクリック率が分かるようになってて、色が濃いほどクリック率が高いなど数値だけでなく視覚的にも分かりやすいインターフェース。当然クリック率を表示しているラベルは自由に動かせるようになっている。全てのリファラーや週単位でのアクセスグラフなどは more > をクリックで確認。

リンクのクリック率

昔からあるアクセスカウンタの今風（なんちゃら 2.0 とは言わない ! ;-P）な感じかも。サイト管理人だけじゃなくて閲覧している誰もが見られる事で、初めての訪問者にもどのページが人気のあるページなのかが分かったりとか、または、ページのリファラーを辿ったりができるってのが良いよね。正式にサービス開始し始めて、安定しているようだったら導入してみようかなとか思ってみた。

2006-03-07T00:46:45+09:00 | コメント (2) | トラックバック (1) |

Thunderbird に入れている機能拡張

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

World Wide Walker: Thunderbird に必ず入れる3 つの拡張

普段使用しているレッツノートでは、メールクライアントに Thunderbird を使用している。んで、1.5 にバージョンアップしてから、View Headers Toggle Button が使えなくなっちゃってたんだけど、代わりに　yoosee さんが入れている headers Toggle が使えそうだなぁ。Thunderbird にはそれほど機能拡張は入れていないんだけど、それでも絶対に入れておきたい拡張ってのはある。今現在、入れている拡張は以下の通り。

MinimizeToTray: Thunderbird を最小化した際に、アイコン化してタスクトレイに格納してくれる。基本的に Thunderbird は起動しっぱなしなんで、これによってタスクバーが圧迫されることがなくなって便利。
Signature Editor: アカウントの設定画面から署名の編集ができるようになる。どうして標準でこの機能がないのか不思議なくらい。他にも、日付フォーマット変更なんかもできる。
Contacts Sidebar: 2 もしくは 3 ペイン表示の場合、アドレス帳をサイドバーに常に表示してくれる。いちいち、アドレス帳を開かなくても、サイドバーから宛先探してメールを作成できる。

以前は、これらに加えて View Headers Toggle Button を入れていたんだけど、これから headers Toggle を入れてみる予定。

2006-01-20T15:16:54+09:00 | コメント (0) | トラックバック (3) |

World Wide Web 上で一番最初のウェブサーバ

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

Tim Berners-Lee 氏が使用した、WWW 上で一番最初のウェブサーバ。

へぇー、NeXT だったんだ。This machine is a server. DO NOT POWER IT DOWN!! ってメモがイカス！

Image:First Web Server.jpg - Wikipedia, the free encyclopedia

2006-01-13T21:14:33+09:00 | コメント (0) | トラックバック (1) |

ウェブデザイン業界の最新動向に注目な @media 2006

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

昨年に引き続き、ロンドンで @media が開催される。各国の著名なデザイナーやクリエイターが集まり、最先端の技術やトレンドなんかについて議論が繰り広げられるカンファレンス。

@media 2006

@media, Europe's foremost professional web design conference, brings together some of the world's most highly respected web experts to talk about the latest major happenings, best-practice thinking, and cutting-edge techniques in the world of web design.

@media 2005 のウェブサイトは固定幅だったけど、今回は可変になってるのね。原色を使った色づかいなんかは今流行りな感じだけど、シンプル具合は個人的には好み。

昨年の 2005 で印象に残っていることと言えば、「Zoom layout」あたり。自分も密かに Zoom layout 用の CSS を書いてみたりしたんだけど、やっぱ Stopdesign とこみたいに Site Preferences なページを用意した方が良さそうとか思ったら、面倒になって途中放棄したこともあったりして :-P。

さて、今回の 2006 のスピーカーもそうそうたる面子が揃ってるっすよ、すげぇな。個人的に気になるのは Andy Budd の Bug Hunting や Jon Hicks の Good Design vs. Great Design、 Dave Shea の CSS3: Fact or Fiction? あたり。いや、つうか全部気になるけどな！

2006-01-06T19:29:02+09:00 | コメント (0) | トラックバック (0) |

2005 年の印象に残っているアーティクル

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

今年もあと少しで終わりってことで、今年自分の中で印象に残っている海外のアーティクルやサイトをメモっておく。来年の今頃見返してみたら、ちょっと面白いかもしれないとかそんな感じで。まぁ、ほら素晴らしいまとめは他にあるしね ;-)。とりあえず、何も深く考えずにパッと頭に浮かんだもの 5 つ。

Introduction - In search of the One True Layout

CSS フレームワークだなんて言われていたりもしていたけど、CSS でも複雑なマルチカラムのレイアウトが作成可能だって事を証明したアーティクルだった。マルチカラムなレイアウトを作成したい場合は、一度目を通しておいた方が良いかも。素晴らしいの一言。

Content with Style: Playing Nice with the Other CSS Kids

CSS コードをインデントさせるアイデアってのを最初に見たのがこのアーティクル。Maintainable CSS として、他にも CVS を使ったバージョン管理など自分的に新しい発見があった。維持・管理しやすい CSS を作成したい時に参考にできる物がある。

24 ways

webdev な人たちが日替わりで投稿していた。どういう企画で立ち上がったのか知らないんだけど、タイミング良く 12 月 1 日の day 1 から追う事ができた。Ajax あり Microformats あり CSS ありと広範囲に渡って投稿されていった。投稿者の中で知っている名前は 5 人くらいしかいなかったけど、多分、全員それなりに知られている人たちなのかな、分からんけど。まだ、未見であれば一度目を通しておくことをお薦めする。ちなみに、24ways なだけに 24 日の day 24 で終わったっぽい。

456 Berea Street | Articles and news on web standards, accessibility, and usability

特にこのアーティクルがって訳ではないけど、自分がキャッチアップしきれていないものをここで目にすることができた。注目されている事や話題になっている事なんかをコンスタントに取り上げてくれるんで、今後もチェックし続けて行きたいサイトのひとつ。

Internet Explorer 5 for Mac

マック IE のサポートと配布終了のアナウンス。今となってはアレなマック IE だけど、このブラウザは間違いなくモダンブラウザの先駆けであったわけで、いざこういう状況になってしまうとなんか寂しい気がする。まぁとりあえずお疲れさまでしたと。

以上の 5 つ。もちろん、他にも素晴らしいものや、印象深いものがあったのは間違いないけど、拙サイトで取り上げていなくて、悩まずに挙げられたのがこれら。さて、来年はどんな年になってどんな興味深いアーティクルに出会えるか、楽しみだ :-)

2005-12-29T00:02:43+09:00 | コメント (0) | トラックバック (0) |

Ajax なスタートページ Protopage

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

ブラウザを起動したときに表示されるスタートページ（ホームページ）に Portopage を設定し、一週間ほどお試し使用してみた。

Protopage = personalized news + sticky notes + bookmarks, all on one page.

作成した自分用の Protopage 上では、todo やメモを書き込む sticky notes や、良く使うサイトのブックマークを登録する link panel、RSS フィードを登録する news feed なんかをページ上に自由に配置できる。常に表示しておく必要のないものは、右上にあるドックに収納しておくことも可能。

使ってみて個人的に気に入った点ってのは、ページの公開・非公開が設定可能ってとこ。Protopage は virtual pages と言って、仮想のページを複数作ることができ、鍵マークをクリックすることで各ページごとに公開・非公開を設定できるようになっている。

他人に自分の Protopage の URI (e.g. http://www.protopage.com/lucky-bag) を教えても、プライベートな情報が見られることもない。画像のアップロードも出来るようになれば（現状でも出来るが近いうちアップロード作業が簡略化されるらしい）さらに使い方が広がるかも。

逆にちょっと不満な点は、せっかくカレンダーがついているのに日付と連動した機能がないってことかなぁ。日付に紐づけてその日がきたら sticky notes が表示されるリマインダ機能みたいなんがあればスゲェ良いのにとか思った。

2005-12-20T18:47:16+09:00 | コメント (0) | トラックバック (1) |

iTunes のライブラリからオーディオ署名を作成

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

iTunes のミュージックライブラリを利用して、再生回数や割り当てたレイトなどの情報からその人の好みの曲を抽出してオーディオ署名を作成してくれる iTunes Signature Maker ってのがあるんだけど、試しに作成してみたら超イントロクイズドレミファドン！なミキシングぶりに軽くのけぞった。

iTunes Signature Maker (iTSM) analyzes your music collection and creates a short audio signature to represent who you are and what you listen to.

実際にオーディオ署名を作成する前にいくつかの設定が出来るんだけど、とりあえずデフォルトのままでやってみた。

作成が完了すると WAV ファイルが出来上がる。そんでもって出来上がったのがこんな感じ。playtagger を仕込んでるんで、再生ボタンで聴けるようになってます。

e-luck.mp3

なんか、最後の方にマックの音量を調整したときの"ピコッ"って音が入ってて、そう言えばオーディオ署名作成中に消音を解除したような気がして、もう一回聞き直したらやっぱあの"ピコッ"って音で激しく萎えた。とりあえず、含まれている曲が一曲でも分かった人はネ申認定で。

2005-12-10T11:28:36+09:00 | コメント (2) | トラックバック (0) |

はてなブックマークに概要が反映されなくなった

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

ちょっと前に、遅まきながら MT のバージョンを 3.171 から 3.2-ja-2 にアップグレードした。したら、はてなブックマークにブックマークされた際に、記述している記事の概要（excerpt）が反映されなくなった。ちなみに、この <$MTEntryExcerpt$> を反映してくれない件に関しては真琴さん（hxxk.jp）が色々と調べていたんだけど、今んとこ一旦打ち切りという状態になっている。

Hatena Bookmark/0.1 のアクセス

真琴さんの記事でも触れられているけど、はてなブックマークに記事がブックマークされると、Hatena Bookmark/0.1 っつう UA がアクセスしてくる。んで、ログを調べてみると、MT アップグレード前と後とで Hatena Bookmark/0.1 の挙動に違いが見られた。

はてなブックマーク - Lucky bag::blog: del.icio.us の playtagger で mp3 ファイルに再生ボタン

2005/11/23,19:02:47,"/archives/2005/11/playtagger.html","Hatena Bookmark/0.1"
2005/11/23,19:03:06,"/archives/2005/11/playtagger.html","Hatena Bookmark/0.1"
2005/11/23,19:03:06,"/archives/2005/11/playtagger.html","Hatena Bookmark/0.1"
2005/11/23,19:05:07,"/archives/2005/11/playtagger.html","Hatena Bookmark/0.1"
2005/11/23,19:05:10,"/index.rdf",                       "Hatena Bookmark/0.1"
2005/11/23,19:05:22,"/archives/2005/11/playtagger.html","Feed::Find/0.06"

はてなブックマーク - Lucky bag::blog: プロパティから CSS 仕様書へのリンク集を作ってみた

2005/11/26,18:55:54,"/archives/2005/11/property-list-links.html","Hatena Bookmark/0.1"
2005/11/26,18:56:10,"/archives/2005/11/property-list-links.html","Hatena Bookmark/0.1"
2005/11/26,18:56:10,"/archives/2005/11/property-list-links.html","Hatena Bookmark/0.1"
2005/11/26,18:59:44,"/archives/2005/11/property-list-links.html","Hatena Bookmark/0.1"
2005/11/26,18:59:44,"/atom.xml",                                 "Hatena Bookmark/0.1"
2005/11/26,18:59:47,"/archives/2005/11/property-list-links.html","Feed::Find/0.06"

index.rdf から atom.xml に変わってる。いや、これが分かった所で何も思いつかないんだけど :-P 。MT 側の実装の問題なのかなぁ。

2005-12-01T00:04:30+09:00 | コメント (0) | トラックバック (2) |

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) |

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) |

ソーシャルブラウザ「Flock」ファーストインプレッション

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

ソーシャルブラウザ「Flock」のデベロッパープレビュー版がリリースされたんで、早速入れてみた。

ちょっと使ってみた感想

del.icio.us との連携がイイ！！。一番最初に同期する時は結構モッサリするけど、一回同期しちゃえば後は大丈夫。2 バイトの文字化けも無く、del.icio.us と共有できる。何か、これだけでも使う価値あんじゃね？って感じかも。del.icio.us ユーザはぜひ試してみるのをお薦めする。

また、Blog Editor で WordPress、Movable Type、Typepad 等と連携してブログの記事を書くこともできる。サイトの URI を入れれば、自動的に mt-xmlrpc.cgi を検知してくれるんで、Username と password を入力すれば大丈夫。Editor の機能的にはまだまだかも知れないけど、可能性を感じさせてくれる。

まだまだちょっとしか使ってないんで、これから色々と弄ってみる予定。何か、こういうのってワクワクするね。

2005-10-21T20:23:58+09:00 | コメント (0) | トラックバック (5) |

IE7 と CSS ハックと条件付コメント

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

IE に適用させないための各種 CSS ハックは、IE7 で修正される事になりそう。

IEBlog : Call to action: The demise of CSS hacks and broken pages

修正しておいた方が良い一般的なハック

IEBlog では下記のハックを使用しているウェブページは修正しといた方が良いよってな事を呼びかけている。

Child Hack ( body > #foo )
StarHtmlHack ( * html #foo )
The Owen Hack ( head:first-child+body #foo )
head + body Selector ( head + body #foo )

こういったハックを使わずに、IE 独自実装の Conditional Comments を使うことを推奨しているんだけれど、head 内に記述するのはあまりスマートじゃない気がして個人的には好きじゃなかったりする。

<!--[if IE]>
<style>
        メソッド
</style>
<![endif]-->

参考: 条件付コメント(Conditional Comments)実験ページ

なんだかんだ言いながら、IE7 用のハックが発見されるような気がするけど、結局は IE7 が CSS を正しく解釈してくれれば何の問題も無いんじゃないのって思ったりして。

スタンドアローン版 IE の問題

今まで知らなかったんだけど、テスト用に一つの PC に複数バージョンの IE を共存させるためのスタンドアローン版の IE を入れている場合、バージョンごとの Conditional Comments は機能しないみたい。「Taming Your Multiple IE Standalones」で解決方法が示されている。

2005-10-14T11:29:28+09:00 | コメント (2) | トラックバック (0) |

Bloglines にホットキー

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

Google Reader の影響なのか分からないけど、Bloglinse にいつの間にかホットキーが実装されてた。

You can now navigate through Bloglines with hotkeys! You will find this legend at the bottom of each feed display page.

j - next article
k - previous article
s - next sub
f - next folder
A - read all
r - refresh left pane

f キーでフォルダー移動、j キーで記事タイトルにポンポンと飛んで行けるんで、溜まった記事を流し読みする時とかは便利かも。

2005-10-13T10:46:32+09:00 | コメント (0) | トラックバック (0) |

<Mac> - Google 検索

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

<Mac> - Google 検索

良く分かんないんだけど、マックに関連した事を google で検索する場合には、そっちよりな情報がリストアップされる可能性が高いのだろうか。確かに、"OS" って検索するとマックに関する情報に絞られているような…。でも、何かロゴが良い感じ。

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

ロリポップの生ログ

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

借りてるナウでヤングなサーバ（ロリポップ）では、生ログ落とせるんで ApacheLogViewer でログ解析をしているんだけれども、PNG 画像へのアクセスを記録してくんないってことが気になってた。例えばサムネール画像から本画像にアクセスされているのかがログを見てもサパーリ分からん :-(

ロリポップに問い合わせてみた

とりあえず対応してくんないか問い合わせてみたんだけど、何かテンプレな回答しか得られなかった。

申し訳ございませんが、現在のところ新たに導入、変更予定はございません。尚、ご要望が多い場合や弊社の環境の変化により導入することはございます。

うぇー、要望多くないの？つうか、PNG フォーマットを使う人が少ないのか？

2005-10-05T18:45:49+09:00 | コメント (2) | トラックバック (0) |

フォトショップのチュートリアルサイト

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

フォトショップ持ってるんだけど、イケてるっぽいウェブ用素材の作り方が分からないとか、フィルターを使った加工方法が分からないって人は何下に多いのかもしれない。かと言って、教則本は値段もそれなりにするし、必要としないチュートリアルも載ってるんで、なんだかなぁって思っている人は Tutorial Select.com を一回覗いてみると良いかもしれない。

無料のチュートリアル

このサイトではフォトショップだけでなく PHP や Flash などのチュートリアルを様々な人たちが投稿してくれているんだけど、一番多いのはフォトショップ関連。もちろん海外サイトなんで解説は英語なんだけど、画像付きで解説しているんで英語分かんなくてもなんとかなっちゃう。多分。恐らく。もしかしたら。

とりあえず、上部メニューから「Top viewed tutorials」へ行くと、閲覧されている数が多い順にソートしてあったりするんで、ここら辺をつらつらと眺めてみて、ウェブ用素材に関わらず自分的に役に立ちそうなチュートリアルを探すってものありかも。例えば、ボタン風なバナーの作り方なんてのは、「Cool button」なんかが参考になりそう。

2005-10-04T23:16:47+09:00 | コメント (1) | トラックバック (2) |

iTunes ミュージックビデオをダウンロードする方法

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

iTunes ミュージックストア上のミュージックビデオをローカルに落とす方法ってのを試してみた。

How-To: Download music videos from iTunes

ミュージックストアの左メニューに『ミュージックビデオ』メニューがあるんだけど、日本のミュージックストアにはまだまだビデオが揃ってない。一方、米国の方とかだと今日現在で 596 本あったりするんで、そっちで試してみた。

ミュージックストアの左メニューから『Music Videos』を選択する。
登録されているビデオがサムネールで表示されるんで、落としたいビデオを選択する。
small もしくは Large 上で右クリック -> "iTunes ミュージックストア URL をコピー"
「.:UNEASYsilence:. - iTunes Music Videos」へアクセスし、URL をペーストして "submit"
表示されたリンクを右クリックからローカルに保存してウマー

実際に The Chemical Brothers のビデオを落としてみたところ、Small のファイルサイズは 5.56MB、 Large で 43.2MB くらいだった。

2005-09-27T13:44:29+09:00 | コメント (0) | トラックバック (2) |

次世代ブラウザーと del.icio.us と Greasemonkey スクリプト

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

なんか、ソーシャルウェブブラウザとか言って、「フロック」ってのが期待を集めているらしいですよ。

期待を集める次世代ブラウザー『フロック』

ほぇー、そうなんだぁとか思いながら「フロック」のウェブサイトへ行ってみたら、あれ、なんか見たことある…、デジャブ？とか思ったら、すわっ del.icio.us にブックマークしてた！しかも、良く分かんないけど、ソーシャルウェブブラウザとかコメントつけてそのまま、アホか。一ヶ月後にこういう形で気づくってのもある意味スゲェな。いかにブックマークすることで安心しちゃってるかっつう良い見本ですよ。こんなん沢山ありそうだし。

del.icio.us ユーザーには便利そうな Greasemonkey スクリプト

そんな感じで良くあるのが、del.icio.us でブックマークしようとしたら、すでにブックマーク済みだったってパターン。んで、閲覧中のページが既に del.icio.us にブックマーク済みであれば半透明のウィンドウで投稿日や Tag を通知してくれる Greasemonkey スクリプト「Familiar Taste - A del.icio.us Greasemonkey Script」が便利そうとか思たんだけど、なんか動作しない。うーん、良く分からん。

2005-09-17T01:14:20+09:00 | コメント (0) | トラックバック (0) |

検索サイトが CSS ファイルをインデックス

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

YST が外部ファイルの CSS をインデックスしているって話があって、戦々恐々としている SEO 業者がいるとかいないとか。

Yahoo! ページ検索（YST）がCSSファイルをインデックス

今後は display:none 等の指定がある場合、隠しテキストスパムと誤認される可能性もあるので注意が必要かと思います。

んでもって、Google の方でもいくつか CSS ファイルがインデックスされてるみたい。

http://www.google.co.jp/search?hl=ja&c2coff=1&q=css+filetype%3Acss

実際に中身を見てスパムと判断されるのかは微妙だけど、display:none; だけでなく、text-indent: -9999px; 等の方法もあるわけだし、そうなるとマイナス値を入れていて尚かつそれが表示領域外まで飛ばしているって判断なんか出来るのかなぁ。もう、イタチごっこだな。いや、でもキーワードを文書内に 3% から 5% の割合で違和感なく散りばめていく writing って結構大変なんだろうな。安易に display: none; に逃げている SEO 業者が淘汰されていくのは正直しょうがない。

2005-09-01T14:58:31+09:00 | コメント (2) | トラックバック (2) |

ID の名前によって IE は印刷時にスクリプトエラー

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

どうやら、IE の新しいバグが見つかった模様。

Eric's Archived Thoughts: When Printing Kills

事の発端は、A List Apart のアーティクル「Facts and Opinions About PDF Accessibility」を印刷しようとすると、“Object doesn’t support this property or method” というスクリプトエラーが表示される不具合があると。んで、調べてみたところ、(X)HTML コード内のID 名に Tags と付与していた部分が引っかかっていたらしい。な、なんだってー！っつうことで、試してみた。

deth_by_id_testpage.html

IE 6 で印刷しようとしたら、下記のエラーメッセージが表示された。

なんのスクリプトも使ってないのにスクリプトエラーですってよ。もしかしたら、マイクロソフトの DHTML で予約語として扱われているんじゃないのって意見もあるようだけど、久々にのけぞったバグだった。

今気付いたんだけど、input 要素の name 属性に tags と付与して name="tags" としてもエラーになるな。del.icio.us 内のタグ検索フォームが付いているページだと印刷出来ない。

2005-08-30T12:11:23+09:00 | コメント (2) | トラックバック (0) |

A List Apart が採用した幅 1024px のレイアウト

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

ウェブデザイナー御用達の A List Apart がリデザインされ、1024px の固定幅というレイアウトを採用したことについて注目されている。（いや、僕はウェブデザイナーでもなんでもないけどね）

デザインを担当した Jason Santa Maria へのインタビュー: A List (taken) Apart | And all that Malarkey
Jon Hicks からの問題提起: Is 1024 OK? : journal : // hicksdesign

Jon Hicks は、「果たして低い解像度のディスプレイを切り捨てて良いのだろうか」ってことを問いかけているわけだど、それに対する Jason Santa Maria のコメントは、もちろん彼自身は未だに 90% 近くのクライアントに対して 800×600 のデザインをしているけど、今回の ALA は新しいことをするための格好の機会だったと。それに ALA の閲覧者はウェブに関わるデザイナーやコーダー達だし、彼らの 90% が 800×600 しか支持しないのであれば、ALA はここまで大きくなっていなかっただろうと言っている。

ALA が最初にリデザインした際に、Jason Santa Maria が可変レイアウトから固定レイアウトに変えた経緯があって、彼自身は可変レイアウトがウェブレイアウトにおける最終形態だとは思っていないらしい。実際、どちらが優れているってのは容易に判断できることではないと僕自身は思っている。それはそれとして、640×480 への対応がされなくなったのと同様に、将来的には 800×600 も切り捨てられる時代がくるのは避けられないのだろう。

んで、// hicksdesign のコメント欄が結構面白くて色々な意見がやり取りされいる。その中で、そう言えばそうだなって思ったのが、マックユーザーはフルスクリーンにしない、なぜなら OS の方がそれを簡単に行える仕組みを用意していないからって意見。うーん、確かにフルスクリーンにしないなぁ。元々マカーで後からウィンドウズを使い始めた人間なんで、ウィンの方でもあんまり最大化していなかったりする。逆にウィンからマックにスイッチした人達は最大化が簡単にできないから、もどかしいんだろうなって思うんだけど、実際どうなんだろか？

2005-08-27T13:10:49+09:00 | コメント (2) | トラックバック (1) |

Google Talk の裏技

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

何下に毎日のように使っている Google Talk だけど、色々な裏技みたいなもんがあるみたいで意外と面白い。

Google Talk Secrets! | InitialDawn™

例えば、文字をアステリスク (*) で囲むとボールドになったり、アンダースコア (_) で囲むとイタリックになったりするらしい。どうやら、Texitism の記法が使えるっぽいんで、他にもあるかも。あと、ウィンドウ内で Ctrl キーとホイールスクロールで文字の大きさを変えることも出来る。

文字を拡大

また、上記サイトでは ResHacker などを使ってリソースを hack する方法や、レジストリを弄って設定を変える方法、ゲームが出来るイースターエッグなど、色々な技が紹介されてるんで暫くは飽きなそう。

2005-08-26T18:49:52+09:00 | コメント (0) | トラックバック (4) |

Google Talk 入れてみた

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

以前から噂されていた Google の IM が Google Talk としてリリースされた。とりあえずソッコーで落として入れてみたんだけど、そういや Gmail のアカウント持ってる知人が片手で数えるしかいなく、しかもこれに興味を示す人間がいないんじゃないのかってことに気付いた :-(

とりあえず、気を取り直して色々と弄ってみたんだけど、インターフェースまわりは結構良い感じ。Friends Lists に登録している友人を捜す場合は、search Box から入力するんだけど、これがインクリメンタルサーチになっていて、文字を入力するごとに候補が絞り込まれていく。メモリ使用量を確認したみたら Windows Messenger より若干メモリ食うみたい。

つうことで、どなかた話しかけてみませんか ;-) そんな希有な方がいたら下記アカウントを遠慮無く追加してみてくださいです。（めっちゃ本名だけど…）

eiji.fukushima@gmail.com

Gmail のアカウント持って無いんだけど興味があるって方は招待するんでコメントにでも。

今さっき、けんすうさん（したらば元社長日記）と Google Talk でやりとりしてて分かったんだけど、入力欄の幅の関係で自動改行を挟んで入力すると、ローマ字入力がおかしくなる。とりあえず、出来るだけ入力欄の幅を広げておいた方が良さそう。

2005-08-24T14:23:34+09:00 | コメント (6) | トラックバック (3) |

便利なオンラインツール ColorBlender

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

ウェブサイトやその他デジタルなデザインをする際の色を決めるのに ColorBlender は便利なツールかも知れない。

ベースカラーを決める

基本的にはベースカラーを決めてあげれば自動的に他 5 色を計算してくれる。ベースカラーを決めるには RGB （レッド／グリーン／ブルー）また HSV （色味／彩度／明暗）の2 種類の方法をラジオボタンから選択し、スライダーを動かせば良い。スライダーの横にある Variations から近似色を選択することも出来る。また、Editing mode のラジオボタンから Direct Edit を選択することで、ベースカラー以外の色をスライダーを使って変更することも可能。

作成したブレンドを保存する

ColorBlender の良い点は、作成したブレンドに名前を付けて保存できること。もちろん、作成したブレンドを複数保存することも可能。ちなみに、これはクッキーを有効にしていないといけない。また、ローカルに保存したい場合には、3 種類の方法がある。

フォトショップのカラーテーブル（カラーパレットから読み込み）
eps ファイル（イラストレーターやインデザインのスウォッチから読み込み）
メールで送信（作成したブレンドへのアドレス）

他にも作成したベースカラーに近い PANTONE カラーを探してくれたりと、これがフリーで使えるってのは太っ腹。作成した 6 色を、背景色、リンクの色、テキストの�