livedoor プロフィールのコーディングやったよ！
先日公開になった、livedoor プロフィールのコーディングやりました。 新規コンテンツの担当はnowa以来なので久しぶりです。
プロフィールサービスとは言ってもiddyやアバウトミーとは少し毛色が違って、livedoor Blogのいちプラグインだったプロフィールを、パワーアップしてコンテンツにした物となっています。
ブログはSNSに比べて書き手同士の交流が生まれにくいように思います。 技術者だとトラバもバリバリ使うんでしょうけど、ライトユーザーでそこまでやっている人はそんなに見ません。
livedoor プロフィールにはTwitterのFollowのようなシステムがあるので、コミュニケーションのきっかけになるかな、なんて。
Blog側にも「アシスタント」という新しい機能が付きました。 これは面白かった記事にちょっとした拍手を送るような、いわゆるWeb○手とかは○な○ター的な機能です。
ただ、アシスタントにはネタをしこめる可能性があって、それをlivedoor Blog担当の弊社sasakillが記事にしています。
時間的なアレとか広告が吐くURLがナニとか、コーディング的にいくつか修正したい点は残っているので、今後もちょこちょこ改善します。
余談ですが、リリース後にも継続して手を入れていけるのが自社コンテンツの良さのひとつだなあ、と最近思っています。
hamashunのlivedoor プロフィール
hamashunさんのプロフィール : livedoor プロフィール
ブラウジング用Firefoxに入れてるアドオンまとめ (2008年3月現在)
僕はFirefoxをメインブラウザにしているんですが（ふぉくすけ人形欲しい！）、会社のPCではブラウジング用、製作用、ニコ動用の3つのプロファイルを使い分けています。
その中でブラウジング用が最近重くなってきたのでプロファイルを作り直したんですが、いい機会だったのでアドオンを整理してみました。 その結果残ったのが以下です。
LDRを使いこなすのに必須とも言えるアドオン。 livedoor Readerパーフェクトガイド - livedoor ディレクター Blogにおすすめの設定が載っています。
任意のタブをファビコンサイズにしてくれます。ブクマやタスク管理など常時開いているタブに使うと便利です。
画像をドラッグで保存できます。
会社のPCという事でこれを入れてます。 チェックボックスのオンオフでリファラを切れます。
インスコしたらツールバーの設定で。
右クリックでページタイトルとURLを一度にコピーできます。 ブログ記事を書く時に便利です。
JSをオンオフにするためだけのアドオン。
リンク先がPDFや新規ウィンドだった場合、カーソルにアイコンが付いてで知らせてくれます。
自分のブログを見てニヤニヤする用。
ブクマ数を見るためだけでなく、ブクマコメントを見る時にも使ってます。
テキストの（リンクになっていない）URLを選択→右クリックで開く事ができます。
説明不要のアドオン。 でも重くなるのが怖いのであんまり使ってません。
これを使っていない人は人生の持ち時間の数%かを捨てているに等しい。 かもしれない。
にぽたんさんのGM。 TwitterのAPI抜けがあまりにひどいので、最近はnowaがメインになりつつあります。
ちなみに、にぽたんさんの「たん」は敬称ではないので気をつけてください。
LDRのキーバインドを変更します。
多分これからも使い続けます。
簡単に言うとGreasemonkeyのCSS版。 登録しているスタイルは全部hamashun謹製です。
細かい部分を自分好みにしたスタイル。 アイコンのhoverスタイルがお気に入り。
一列づつ色を変えて、番号を振ってみた。 それなりに好評らしい。
クリップ用みたいに、一列づつ色を変えて見やすくしています。
殺伐としたはてブに救世主が！ 何故かこれが一番人気。
おわりに
今のところ結構快適です。 ブラウジング用なのでFirebugとか製作系の物は入れてません。
それにしてもふぉくすけ人形はかわいいですね。 まずは弟と両親にFirefoxを薦めてくるか…！
CSS Nite in Ginza, Vol.23のまとめ
追記
CSS Nite in Ginza, Vol.23に行ってきました。 今回のゲストはあの大藤幹さん。 大藤さんの名著CSSプロフェッショナル・スタイルは、コーディングの勉強を始めたばっかりの頃に買って物凄く役に立った本だった事もあって、かなり期待していました。
開演前
19時開演なので18時30分に到着したんですが、既に座席は満員でした。 さすがに凄い人気です。
テーマ
大藤さんは雑誌Web Designingに『CSS Analysis』という連載をしていて、その内容は世界のWebサイトを取りあげて色んなテクニックを紹介するという物。
今回のテーマはそれの特別版みたいな感じで、『CSS Analysis Live!』でした。
なお、内容はあくまで解析したサイトの結果であり、それが正しいとか、或いは大藤さんの意見である、という訳では必ずしもないようでした。
アジェンダ
- この1年間の流れ
- トピックと事例
- これからのCSS
この1年間の流れ
新しいネタが減ってきた
CSSネタは成熟した感があるのでは。 ブラウザごとの特徴や対策や組み方のTipsなど、大抵の情報は出揃ってしまった。
（hamashun注：以前書いたんですけど、僕も同じような事を感じていました）
ハックを使わないサイトが登場した
CSSハックを全く使っていないサイトを取り上げてから、1年経っている。 しかしハックを使わないサイトは使っているサイトにあらゆる点で勝っている訳ではなく、例えばブラウザによる若干の差異などのデメリットが存在する。
世代交代で繰り返す歴史
画像置換の問題が顕著（後述）。
英語圏以外の国のサイトが増えた
連載当初は英語圏が100%だったが、最近ではドイツ、ブラジル、ルーマニア、チェコ、フランス、イタリアなど多岐に渡っている。
ちなみに取り上げる際は言語は考慮していなく、単にソースコードを見て決めているとの事。
言語圏の違いで制作スタイルの差が出てきた
昔は英語圏がNo,1だったが、最近はそうでもなくなってきている。 ドイツは追いつき追い越している印象。 そういえば思い返すと、2003年のW3Cサイトのリニューアルコンテストで優勝したのはドイツの人だった。
日本も結構イケてる。
トピックと実例
CSSハックの現状
- * html といういわゆるスターハックを殆ど見かけなくなった。
- clearfixも以前より減っている
- CSSハックを一切使わないサイトも登場した
世代交代による画像置換問題
画像置換そのものが悪という風潮で、使われない時期があった。 しかし、最近は普通に使われている。
その手法も、以前は古いブラウザに対応する為にtext-indent: -9999px;などとしていたが、最近は古いブラウザは無視したコードが増えている。 これらは若い製作者に多い傾向な模様。
古いブラウザの対応
英語圏では切り捨て傾向にある。 ドイツやオーストリアでは、IE5.0、IE5.5なども対応している事が多い。
（hamashun注：まあ、この辺はその国ごとのビジネス的、リテラシ的な事情にもよりそうですし、一概に優劣は決められないのではと思います）
CSSファイルの分割について
一時期、非常に細かく分けているサイトがあったが、最近はかなりシンプルな分け方が多い。 例として紹介された分け方で印象に残ったのは、いわゆるLiteboxなどのライブラリ用CSSを別ファイルに分けている事だった（弊社だと開発しちゃう事もあるので同じファイルに記述する事も）。
また、ブラウザの振り分けにはコンディショナルコメントを使っているサイトが多い（hamashun注：スターハックが減った理由も恐らくここにあるのでは）。
リセットCSS
最近は見かけない（！）。 連載で取り上げたサイトでは、英語圏以外では1年前くらいからゼロ件。 ただしこれは、一括してリセットしていないという意味で、marginとpaddingだけはリセットしたり、必要な箇所だけでリセットしているサイトはあるとの事。
でも、本当に全くリセットしていないサイトもあって、そのサイトはブラウザによって若干の表示差異はあるとの事。
（hamashun注：個人的にはこれには結構驚きました。 現状でmarginとpaddingのリセットをしないメリットはあるんでしょうか。
なお、この記事の最初にも書きましたが、この講演はあくまで事例を紹介する物であり、それが必ずしも優れているという訳ではないので注意してください）
ページの上部が大きな画像になっているサイト
ヘッダー部分を大きくとって、そこに大きな画像を配置するサイトが増えた。 これによって文字サイズを極端に変更してもサイトのイメージが損なわれない。
超大きい画像を使ったサイト
3000pxとかの大きな画像を使ったサイトも増えてきた。
（hamashun注：nowaのヘッダ画像も、リキッドレイアウトに対応するために大きな物が多いです。 2000pxとか。 max-widthプロパティと合わせて大きなヘッダ画像を使う方法がわかりやすいのでは）
エラスティックレイアウトの登場
2回取り上げた。 国はイギリスとアメリカ。 最近は余り見かけない。
これは_blankによる別窓問題と似た問題を引き起こす可能性があって、便利だと思う人もいれば迷惑に思う人もいるかもしれない。
これからのCSS
足すコーディングから引くコーディングへ
追加修正などのたびに足せば足すほど、または（ファイルを）分ければ分けるほど問題が増えるのではないか。 例えば、
- 何か問題が起きたらハックを使う
- 何でもかんでもデフォルトスタイルリセット
- CSSファイル自体も分けまくる
これらによって問題が発生する可能性がある。
ドイツ式シンプルコーディング
ドイツのコーディングはシンプルでキレイらしい。 余計な事はせず、見通しのいいCSS.
キレイなソースなどと聞くと「それが何の得になるの？」と言う人がいるが、そういう人はコーディング自体が目的になってしまっている。
コーディングとはあくまで目的を達成するための手段であり、短くキレイに書いておけば、その後の作業もラクになる。
（hamashun注：ここがちょっとピンとこない人もいるかもしれませんが、つまりコーディングが目的になっているというのはその場のコーディングを終わらせる事が目的になっていて、運用を考えていない状態なのではと思います。
自分の書いたコードを半年ぶりに編集する事を考えたら、キレイなコードの方がいいですよね）
プロパティの降順
連載でとりあげた最近のサイトは、結構バラバラ。 でも読みづらくはない。 プロパティは降順よりは数が読みやすさに影響するようだ。
また、重要なプロパティを上の方に持ってくるサイトもあった。
質問コーナー
- Q:ドイツはCSSがキレイだというけど、HTMLはどうなんですか？
- A:HTMLもキレイ。 というか、この連載はHTMLがキレイである事がまず前提。 そこから更にCSSを見ている。
基準のひとつとなるエピソードは、css Zen Gardenを取り上げようと思ったが、HTMLがアレだったのでやめたというもの。
- Q:コンディショナルコメントの是非
- A:最近増えている理由は不明。 使っている人が多くなってきたから他の人も使う、という循環かも？
ただし、Microsoftの中の人的には「使わないで」と言っていた。
- Q:CSSファイルを分割しないWebサイトの規模は？
- A:個人Blogが多い。
余談ながら森田雄さんは「分割するとセッションが増えるからそういう手法を紹介しないでほしい」と言っていたそう（読み込みのロスが増えるという事）。
益子さんはガンガン使う派らしい。
ファイル分割の件について、森田さんご本人から言及を頂きました。
securecat's exblog : Re: CSS Nite in Ginza, Vol.23のまとめ
最後に
情報に翻弄されない事が大事。
- 今回の講演に影響を受けて手法を変えても、他の情報でまた変えたくなるかもしれない
- 自分の仕事がラクになるようにしよう
- 労力とメリットをよく考える
- 定番手法はそれだけ多くの人のノウハウが詰まっている
- 最後は自分で考えるべし。 自分の道を行け
感想
久しぶりにガチなCSSネタを聞けて楽しかったです。 業務に使えそうな部分もありました。
お会いするまではなんとなくもっと固い感じの方なのかと思っていたんですが、全然そんな事はなくて打ち上げでも気さくで優しい方でした。
HTMLとかCSSで仕事してる人達のIRCチャンネルってあるのかな
IRCのチャンネルってみんなどうやって探してるんだろう。 クチコミ？
あったら是非入りたいです。 コメントとかブクマコメントとかTwitterとかで教えて貰えると嬉しいです。 なかったら勝手に作ろうと思います。
この前のCSS Niteの打ち上げで「知りませんかー」って聞いてみたんですけど、そもそもIRC自体、利用している人が少ないようでした。 やっぱりWeb制作側よりシステム開発側の文化なのかな。
IRCは便利だし色々と楽しいので、使った事ない人は使ってみるといいと思います！
「IRCってなんぞ？」という人は枯れた技術で社内を潤す IRCを使おう！ - livedoor ディレクター Blogを読むといいと思います。
