Go my way

Links for 2008-08-07 [del.icio.us]

2008-08-08T00:00:00+09:00

CSS Variables で値を一元管理
CSS で変数を扱う仕様。MT でも同じことができる。

Links for 2008-08-05 [del.icio.us]

2008-08-06T00:00:00+09:00

WordPress でちょこっと SEO
記事固有のページ概要を入れる方法。

Links for 2008-08-01 [del.icio.us]

2008-08-02T00:00:00+09:00

Remember The Milk 検索を極める
RTM で使える検索キーワード。

Links for 2008-07-31 [del.icio.us]

2008-08-01T00:00:00+09:00

Firefox 拡張機能開発チュートリアル

Links for 2008-07-03 [del.icio.us]

2008-07-04T00:00:00+09:00

ただの SD カードスロットで SDHC カードを使えるかもしれない方法

Links for 2008-06-27 [del.icio.us]

2008-06-28T00:00:00+09:00

Firefox 3 の「スマートブックマーク」を使いこなそう！
スマートブックマークで使えるパラメータ。

Links for 2008-06-25 [del.icio.us]

2008-06-26T00:00:00+09:00

places.sqlite の最適化で Firefox 3 は速くなる…か？

realog casting Vol.14

2008-06-22T21:44:39+09:00

realog casting Vol.14 をお届けします。今回対談をお願いしたのは、ホンマニアのほんまちゃんです。

前半は、自分が強く影響を受けた「ホンマニア」についてお聞きしています。後半は、話題をガラリと変えて CMS の話をしています。

realog casting Vol.14 (MP3 形式)

ホンマニアをまだ見たことがないという人は、ぜひチェックしてみてください。あたまのナカミというカテゴリーがおすすめです。

iTunes などに登録する場合は、以下の RSS を登録してください。

Podcast用 RSS 2.0

realog casting Vol.13

2008-05-26T22:07:11+09:00

realog casting Vol.13 をお届けします。今回対談をお願いしたのは、miniturbo.org のかずやさんです。

今回は「Web 業界一年目はどうでしたか？」というテーマで話しました。かずやさんとは Vol.01 でも対談していますので、そちらもあわせて聞いてみるといいかもしれません。

realog casting Vol.13 (MP3 形式)

対談で取り上げた CMS やソフトです。

iTunes などに登録する場合は、以下の RSS を登録してください。

Podcast用 RSS 2.0

realog casting Vol.12

2008-04-27T19:58:39+09:00

realog casting Vol.12 をお届けします。今回対談をお願いしたのは、versionfive.jp の後藤さんです。

今回はブラウザのことを中心に対談しました。今年に入ってからブラウザに関するニュースが増えています。制作サイドの方は、ぜひチェックしてみてください。

realog casting Vol.12 (MP3 形式)

また今回からアルバムアートができました。このアルバムアートは後藤さんに作っていただきました。ありがとうございました :-)

iTunes などに登録する場合は、以下の RSS を登録してください。

Podcast用 RSS 2.0

realog casting Vol.11

2008-03-15T14:32:04+09:00

realog casting Vol.11 をお届けします。今回対談をお願いしたのは、フリーの Web ディレクターとしてご活躍されている緑川さんです。

今回は Web ディレクターのことを中心にお聞きしました。今までの対談では制作サイドの話が多かったので、いつもとちょっと雰囲気が違います。ぜひ、そのあたりもお楽しみください。

realog casting Vol.11 (MP3形式)

対談で取り上げた本は、次のとおりです。

iTunesなどに登録する場合は、以下の RSS をご利用ください。

Podcast用 RSS 2.0

realog casting Vol.10

2008-02-19T22:04:04+09:00

realog casting Vol.10 をお届けします。今回対談をお願いしたのは、Inflame Casting の長谷川恭久さんと、まめことねこぜのドタバタ会議のまめこさんです。

全員が Podcaster ということで、対談のテーマはもちろん Podcast についてです。機材やソフトのハウツー、動機やモチベーションなど、これから Podcast を始めたいと思っている人におすすめの内容です。

今回は 3 分割して配信しているので、恭久さんとまめこさんの音声もぜひお聞きください (自分が担当しているのは真ん中のパートです)。

realog casting Vol.10 (MP3 形式)

iTunes などに登録する場合は、以下の RSS を登録してください。

Podcast用 RSS 2.0

realog casting Vol.09

2008-01-27T22:06:29+09:00

realog casting Vol.09 をお届けします。今回対談をお願いしたのは、crema design の crema (クレマ) さんです。

今回は Movable Type のことを中心に対談しました。crema さんは「アルファブロガー・アワード 2007」の制作を手がけるなど、Movable Type に精通している方です。詳しくは Six Apart のインタビュー記事をご覧ください。

realog casting Vol.09 (MP3 形式)

また crema さんは、MT4LP5 の連動書籍『Movable Type プロフェッショナル・スタイル』の執筆にも参加されています。こちらの本も発売が待ち遠しいですね。

対談で取り上げた本やサイトは、次のとおりです。

iTunes などに登録する場合は、以下の RSS を登録してください。

Podcast用 RSS 2.0

独自拡張 CSS と先行実装 CSS

2008-01-07T12:07:40+09:00

各ブラウザが実装している独自拡張 CSS は「使わない」のが原則とされていますが、個人的にはもっと活用すべきだと考えています。今回はその理由をまとめてみます。

性質の異なる 2 種類の独自拡張 CSS

独自拡張 CSS といっても性質の異なる 2 種類があります。1 つ目は、IE の filter プロパティのように完全に仕様を無視したもの。これはまさしく「独自拡張」と言えるでしょう。

2 つ目は、草案段階の CSS を先行実装しているもの。たとえば、Gecko ブラウザが実装している -moz-opacity などがこれに当たります (opacity プロパティは CSS 3 で実装される予定)。ここでは「先行実装 CSS」と呼ぶことにします。

CSS の仕様を確認してみる

CSS 2 の仕様書を確認してみます。

「未知の特性をもつ宣言を無視しなければならない」とあるように、UA は未知のプロパティを無視することが仕様で定められているのです。仕様に正しく従う UA であれば問題はないのです。

使ってもよいサイト

問題がないからといって、どんなサイトでも積極的に使うべきではありません。サイトの性質をよく考える必要があるでしょう。

先行実装 CSS が適用されない場合でも問題なく閲覧できる
問題が起きたとき、すぐに対処できる
ユーザー層がある程度限られている

自治体のサイトなど公共性の高いサイトでは使うべきではありません。不特定多数のユーザーが利用する上、利用するユーザー層も多種多様です。問題が起きたときに不利益を被る可能性も考えられます。

また、先行実装 CSS は Validation で invalid になります。そのあたりも考える必要があります。

まとめ

サイトの性質をよく考え、前方互換性を意識した先行実装 CSS であれば問題はない、というのが自分の答えです。というわけで今後、具体的な使い方を紹介していきたいと思います。

参考サイト

realog casting Vol.08

2007-12-25T10:03:55+09:00

realog casting Vol.08 をお届けします。今回対談をお願いしたのは、blog.grayash.com の suniti さんと pruto.jp のカツオさんです。初の試みとして 3 人で対談してみました。いつもとはちょっと違う雰囲気をお楽しみください。

今回は、2007 年の出来事を振り返ってみました。

realog casting Vol.08 (MP3形式)

対談の終わりで、各人が来年の抱負を述べていますので、そのあたりにも注目です :-)

iTunesなどに登録する場合は、以下のRSSを登録してください。

Podcast用 RSS 2.0

検索結果ページのマークアップ

2007-12-11T18:59:13+09:00

ちょっと気になったので、検索結果ページのマークアップを調べてみました。

結果

調べた結果は次のとおり (どれも日本語版、2007年12月11日の検索結果より)。

検索エンジン	要素
Google	h2
Yahoo!	ol + li
Live Search	ul + li
Technorati	ol + li

どの方法がベストなのか？

結果を大別すると、見出しにするか、リストにするかで分かれています。さらにリストの中でも、順不同リスト (ul) か序列リスト (ol) で分かれています。

「キーワードに関連する結果を、関連が深い順にリストアップする」という検索結果の性質を考えてみると、最も理にかなっているのは ol でしょうか。ただ、音声ブラウザの見出しジャンプ機能のことを考えると、Google のマークアップにもうなずけます。

各社の考え方や注力すべき点が違うので、どれが正しいのか一概には言えませんが、マークアップエンジニアの方は一度考えてみるといいかもしれませんね。

ちなみに、自分がマークアップするんだったら dl + dt + dd を使いますね。

realog casting Vol.07

2007-12-03T09:50:35+09:00

realog casting Vol.07 をお届けします。今回対談をお願いしたのは、株式会社スイッチの代表取締役鷹野雅弘（たかのまさひろ）さんです。

今回は、CSS Nite のことを中心にお聞きしました。デジパが公開しているインタビュー記事も読んでみるといいかもしれません。

realog casting Vol.07 (MP3形式)

この Podcast で初めて発表されるイベント情報もあるので、ぜひチェックしてみてください！

対談で取り上げたサイトやイベントは、次のとおりです。

iTunesなどに登録する場合は、以下のRSSを登録してください。

Podcast用 RSS 2.0

画像置換とoutlineプロパティ

2007-11-28T10:56:42+09:00

今さらですが、画像置換と outline プロパティについてまとめてみました (画像置換うんぬんはさておき…)。

ご存知のとおり、Firefox 1.5 から outline プロパティがサポートされました。そのため、画像置換したアンカー要素に予想外のアウトラインが出てしまいます。

こんなとき、outline: 0; を指定してやればうまくいきます。

a {
    display: block;
    width: 500px;
    height: 50px;
    background: #fff url(hoge.gif);
    text-decoration: none;
    text-indent: -7777px;
    outline: 0;
}

ただこの方法だと、フォーカスした際にアウトラインが表示されません。今どこをフォーカスしているのかわからないのは、アクセシビリティ的に問題です。

overflow プロパティで解決

先ほどの outline: 0; を overflow: hidden; に変えるとすべてがうまくいきます。

a {
    display: block;
    width: 500px;
    height: 50px;
    background: #fff url(hoge.gif);
    text-decoration: none;
    text-indent: -7777px;
    /* outline: 0; */
    overflow: hidden;
}

これでアンカー要素だけにアウトラインが表示されました (主要なモダンブラウザでちゃんと表示されるのを確認しました)。

Mac IE 5 は要注意

Mac IE 5 には「overflow プロパティに visible 以外の値が指定された要素が表示されない」というバグが存在します。今さら Mac IE 5 に対応する必要もないかと思いますが、念のため対策法を載せておきます。

バックスラッシュハックを使って、Mac IE 5 だけに overflow: visible; を読み込ませます。このままだとフォーカスしてもアウトラインが表示されないので、ダイナミック擬似クラスも同時に指定します。

a {
    display: block;
    width: 500px;
    height: 50px;
    background: #fff url(hoge.gif);
    text-decoration: none;
    text-indent: -7777px;
    overflow: hidden;
}

/* for Mac IE 5 \*//*/
a {
    overflow: visible;
}
a:focus,
a:active {
    outline: 1px solid #333;
}
/**/

最後に

この方法は自分で考えたわけではなく、会社の先輩に教えてもらいました。ありがとうございます！

Web Developerを自動的に隠す

2007-11-07T12:24:15+09:00

えむもじらさんのブログで、超クールなユーザースタイルが紹介されていました。

ブックマークツールバーを自動的に隠す

常に表示していると邪魔だけど、非表示にすると不便なブックマークツールバー。これでスッキリしました！

ついでに、Web Developerのツールバーにも同じスタイルを指定してみました。

#PersonalToolbar,
#webdeveloper-toolbar {
    display: none;
}
#navigator-toolbox:hover > #PersonalToolbar,
#navigator-toolbox:hover > #webdeveloper-toolbar {
    display: -moz-box;
}

DOM Inspectorを使ってid名を調べれば、どんなツールバーでもこのスタイルが使えそうです。

realog casting Vol.06

2007-10-29T11:59:08+09:00

ずいぶんと間が空いてしまいましたが、realog casting Vol.06 をお届けします。今回対談をお願いしたのは、有限会社アズ・シーツーの代表取締役社長堀内敬子（ほりうちたかこ）さんです。

堀内さんのことは CSS Nite in Osaka 2007 春の陣で知り、それ以来注目していました。メールで対談をお願いしたところ、快く引き受けてくれました（ありがとうございました）。

今回は、法人化したきっかけやその経緯を中心にお聞きしました。リアルな話が聞けて、とてもいい刺激になりました。

realog casting Vol.06 (MP3形式)

堀内さんは話し方がとてもうまく、自分のほうがリードされてしまいました…。しゃべりのスキルがまだまだ未熟だと痛感しました (汗)

今回から新たな試みとして、頭のナレーション部分で BGM を流してみました。なんだかグッと引き締まりますね（自己満足）。音源は、FTK CREATIVE SYSTEM のループ音源をお借りしました。クオリティが高い音源が揃っています。

iTunesなどに登録する場合は、以下のRSSを登録してください。

Podcast用 RSS 2.0

感想や意見をお待ちしております:-)メールは、rea.527[at]gmail.comまでどうぞー。

iPhoneを使ってみました

2007-10-15T16:29:07+09:00

約2ヶ月ぶりのエントリーになってしまいました。一度リズムを崩してしまうと、感覚を取り戻すのが大変ですね。

さて、先日iPhoneを実際に使ったので、率直な感想を書いてみます。

タッチスクリーン

タッチスクリーンのインターフェースは、直感的でわかりやすいです。最初こそ戸惑うものの、数分使えば誰もが習得できる点はすばらしいのひと言に尽きます。

ただし、文字入力に関しては慣れが必要です。キーとの間隔が狭く、慣れるまではしょっちゅうタイプミスをしてしまいます。爪を伸ばしている方は、かなり苦労するでしょう。個人的には、ハードのキーボードの方が好みです。

Safari

携帯のフルブラウザとは比べ物にならないくらい美しいです。レンダリングも普通のSafariと遜色なく、拡大・縮小やスクロールももたつきません。ためしに自分のサイトを表示してみましたが、まったく問題ありません。

タブ機能も搭載しているのですが、新しいタブで開くなどの動作が選べないのが難点です(target属性に任せられる)。Flashをサポートしていない点もマイナスポイント。今後、ソフトウェア・アップデートで改善されるのを期待します。

Maps

タッチスクリーンの恩恵を一番感じるアプリかもしれません。指の動きにあわせてスムーズに拡大・縮小し、ドラッグで自由に移動できる点は、本物の地図以上の使いやすさです。

それでも買わない理由

実際にiPhoneを使ってみて、かなり物欲を刺激されました。でも、日本で発売されたとしても、自分はおそらく買いません。日本の携帯では当たり前に搭載されている機能が、iPhoneにはないからです。

GPS
おサイフケータイ(FeliCa)
ワンセグ
外部メモリ
etc...

日常生活に欠かせないものだからこそ、より機能を重視してしまいます。iPhoneを買ったとしても今の携帯を手放すことはできず、それならばiPod touchでいいのではと思います。

追記

参考までに、iPhoneのUAはこんな感じです。

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)
AppleWebKit/420+ (KHTML, like Gecko)
Version/3.0 Mobile/1A543a Safari/419.3

realog casting Vol.05

2007-07-01T22:06:47+09:00

ポッドキャスト第5回目です。今回は、r-Studioのrさんに対談をお願いしました。

r-Studioでは、ScreenGrab!やGoogle Reader Notifierの日本語版を提供されています。みなさんもご存知ではないでしょうか。今回は日本語化のきっかけ、オススメの拡張機能、これからのFirefoxについてトークしました。

realog casting Vol.05 (MP3形式)

※最初のほうで「約1週間ぶり」と言っていますが、音声を編集した時点では1週間ぶりでした。忙しくてなかなか公開できませんでした;-)

対談で取り上げた拡張機能は、次のとおりです。

iTunesなどに登録する場合は、以下のRSSを登録してください。

Podcast用 RSS 2.0

感想や意見をお待ちしております:-) メールは、rea.527[at]gmail.comまでどうぞー。