livedoor Blogには、ユーザが作ったテンプレートデザインを公開できる機能があるんですが、それを利用しました。
みんなのデザイン / The Falling Box (β)で見る事ができます。
デザインは難しいですなあ。
]]>
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。
2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。
ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。
少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。
なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。
IEの独自拡張の、filterプロパティを使う必要があります。
CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlphaImageLoaderフィルタを使用しています。
多くのライブラリでは、背景画像の繰り返しと位置指定ができません。
この問題はかなり深刻な悩みの種でしたが、IE PNG Fix 2.0の登場でひとまず解決したと言えそうです。
Post Production ? A Better IE 5.5 and 6 PNG Fixという記事に掲載されているライブラリでも繰り返しと位置指定ができるとの事ですが、試したところうまく動かせませんでした。
サンプルが無く、全文が英語なので僕の使い方が間違っていたのだと思いますが、導入はIE PNG Fix 2.0の方が簡単だと思います。
filterプロパティのAlphaImageLoaderフィルタを使っているので、見慣れない構文が登場します。
詳細はとみのホームページ内のAlphaImageLoaderに詳しく載っています。
div {
background: url(alpha.png);
}
* html div {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=http://example.com/img/ie.png);
}
* html div a {
position: relative;
}一つめの規則集合はIE6以外のブラウザに対するものです。
二つめの規則集合はIE6用のものです。 ここではスターハックを使って振り分けましたが、方法はなんでもよいです。
backgroundプロパティをnoneとしているのは、filterプロパティで表示される画像はbackgroundプロパティで表示された画像とは違う物だからです。
三つめの規則集合もIE6用のものです。 ここでのスターハックは必須ではありません。 また、この宣言自体も必須ではありません。
この宣言が必要になるのは、指定した要素の子要素にa要素やonclick属性、onmouse属性などが含まれる場合です。もちろんセレクタの a は当該要素に合わせたものになります。
実装の際には数行のコードを加えるだけなので、手軽に使えます。 反面、適用したい画像の枚数が増えると比例して規則集合が増えてしまいます。
また、パスの指定にクセがあったり背景画像のようには扱えないなど、backgroundプロパティの感覚で記述すると思い通りにならない事があります。
この方法は、CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする | ヨモツネットで紹介されたものです。
behaviorプロパティ自体については、古い記事ですがTime Off for Good Behavior: Internet Explorer 5における DHTML Behaviorで概要を掴めます。
div {
background: url(alpha.png);
}
* html div {
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}
* html div a {
position: relative;
}メリット・デメリットと合わせて元記事で詳しく解説されているので、そちらをご参照ください。
メリットは元記事で紹介されていますが、相対パスで記述できる事によりHTMLのディレクトリ構成に影響されないので、背景画像で使う際には特に便利だと思います。
ただ、IE6とそれ以外のブラウザで同じ画像を使う事になるので、繰り返し表示ができない為に大きめの画像を用意する場合には、Firefoxなどにもその画像が読み込まれてしまう事になります。
色々あるようなのですが、今回は試す範囲に含めませんでした。
IE PNG Fix v2.0は2008年9月現在で開発中のライブラリです。 Ver,UPに伴い記事と異なる部分が出る可能性があります。
<style type="text/css">* html div.sample { behavior: url(iepngfix.htc); }</style>
<!--[if lte IE 6]><script type="text/javascript" src="iepngfix_tilebg.js"></script><![endif]-->
style要素を使っているのは解説用コードだからで、CSSファイルに記述する事ができます。
また、条件付コメントを使ってIE6にのみJSファイルを読ませていますが、他の方法でも問題ありません。
独自拡張のbehaviorプロパティを使って、htcファイルを読み込んでいます。
iepngfix_tilebg.jsも合わせて読み込む事によって、background-positionプロパティやbackground-repeatプロパティと同様の効果を得られます。
注意点として、background-positionプロパティとbackground-repeatプロパティの効果を得たい場合には、iepngfix_tilebg.jsを読み込ませて、当該要素に任意のclass属性かid属性を付ける必要があります。 大事な事なので二度言いますが、この属性値には任意の値が付けられます。
もし位置指定や繰り返し表示を必要としないなら、iepngfix_tilebg.jsを読み込ませる必要はありません（Ver,1がそれにあたります）。
個人的に現在最もアツイ方法。 これまで不可能とされていた背景画像の位置指定と繰り返し表示ができます。
しかも、何がしかのclass属性かid属性が必要とは言え、機能の為の値を強制され無い事がHTML的にとてもCoolです。
また、a要素などへの指定が必要ない点も便利です。
Ver,1.xはIE PNG Fix - TwinHelixから、Ver,2.x(のテストバージョン)はBeta Testing Area - TwinHelixからダウンロードできます。
Ver,2が正式版になったら、現在のVer,1と同じ場所に移動すると思われます。
iepngfix.htc内のライセンスについて書かれている部分は以下のようになっています。
This is licensed under the GNU LGPL, version 2.1 or later.
英語2のhamashunが超頑張って翻訳すると、多分、「このライブラリは GNU LGPL バージョン2.1（以降） の元に配布されています」みたいな感じ、だと思います。 たぶん！
（意味的に誤解を与えてしまう訳だったら、ツッコミいただけるとありがたいです）
div {
background: url(alpha.png);
}
* html div {
background: url(ie.gif);
}
スターハックを使ってIE6にはGIF画像を読み込ませています。
IE6にはPNG画像を使わない、というMOSe的な発想です。 参考：MOSeのススメ - Go my way
IE6では若干見栄えが落ちますが、スクリプトによって重くなる心配がありません。
テンプレートのデザインが一新されました。 と言うか、カラム構成から変わりました。 ほぼ作り直しです。
これは社内・社外ともに好評で、今回のリニューアルの目玉と言えるんじゃないかなと思います。
画像にPNGのアルファを多用しているので、見た目的になかなか新鮮な感じになりました。
余談ですが、このためにIE6にアルファを効かせる方法を色々と調べたので、今度まとめようと思います。
登録できる情報もかなり追加されました。 リニューアル前はかなりシンプルで、プロフィール単体として見ると若干、魅力に欠けていました。
でもこのリニューアルで、iddyみたいに色々なフィードを登録する事ができるようになりました。
メール認証をするとメッセージやフレンド登録があった時に知らせてくれるので、まだ認証をしていない人はやっておくといいですよ！
また、ログインしておくとヘッダ右側のリンクからお気に入り／フレンド登録ができるので、よろしければhamashunのプロフィールから登録お願いします！
livedoor プロフィールの登録自体がまだな方は、トップページからどうぞ！
]]>
会場はミツエーリンクスさんが貸してくれました！ 太っ腹！
なにげにミツエーに行くのはこれで3回目なんですが、マジックミラーの向こう側が毎回気になってしまいます。 向こう側には何があるのだろうか。
今回は技術的な事とは少し離れていて、プレゼンに関する物です。 なぜプレゼンの勉強なのかと言うと、最近、面白くないプレゼンが多いのだそう。
どういった物が面白くないプレゼンなのかと言うと、例えばスライドを読み上げるだけのプレゼン。 まあこれは資料だけ配布すればいいじゃんと思ってしまいますね。
それから、ハンズアウト（配布資料）を使う事でスライドを手抜きしているプレゼンも面白くないとの事。
いろいろなイベントでおもしろいプレゼンを見たい！
「おもしろいプレゼン」の定義は人それぞれだと思うのですが、ヤスヒサさんは「スライドを読むだけじゃなく、伝わるプレゼン」をおもしろいと定義しているような気がしました。
ここで、海外のスライドを例に、「一見コードが多そうなテーマなのにコードが少ないスライド」の紹介がありました。
この3つは、コードが登場しそうなテーマであるにも関わらず、しかしコードはあまり登場しません。
日本ではガリガリの技術ネタが好まれる事が多いが、アメリカでは技術（テクニック）以外のネタが取り上げられる事がよくある、との事。
答えはNO.
まあ、そりゃあそうですね。 伝えたい事にあわせた構成が良いのだと思います。
ここから、実際に参加者が考えて手を動かすコーナーです。
まずはプレゼンに関する悩み、疑問、不安などを付箋紙に書き込んで、それを壁に適当に貼り付けていきます。
次にその付箋紙を、プランニング、スライド作成、スピーチ、その他、の4つにカテゴリ分けします。
これで何が起きるかと言うと、みんながどんな事を悩んでいるのかが見える化できるのです。 今回はスピーチのカテゴリが最も付箋紙の枚数が多く、「やっぱりみんな喋るのが苦手なんだなあ」という印象でした。
エクササイズ1はここまでなのですが、エクササイズ2ではこの付箋紙の内容を、グループワークで解決していく事になります。
ここでちょっと一息入れて、海外のおもしろいプレゼン動画を見せてもらいました。
YouTube - ガイ・カワサキ講演日本語テロップ付き Guy Kawasaki
なんか有名な人らしいですね。 僕も前にどこかのブログでこの人に関する記事を読みました。
彼のプレゼンはかなり毒舌で、「○○なヤツはバカだ！」みたいな言い方が頻繁に出てくるんだそうです。
プレゼンの内容に「スライドは10枚でいい」「時間は20分でいい」などといった話が出てきますが、これはどこまで本気なのか、この動画だけだと計りきれませんでした。
もちろん、実際はプレゼンの内容によるでしょうし。
この人はスライドがとても特徴的で、テキストは殆ど登場せず、写真を大きく映し出して、あとはトークで攻めるタイプ。
いわゆる高橋メソッドにも言えると思うんですけど、喋りの練習が必要になると思います。
YouTube - Myths About the Developing World (1of3) (Hans Rosling @ TED)
（2:40くらいから）
英語が全くと言っていい程わからない僕でも、中盤からのプレゼンはなんとなく、雰囲気はわかりました。 年代に合わせてグラフが動いていく辺りです。
こちらも、喋りが上手い必要がありそうです。
ここからはグループワークで、先ほど貼り出した付箋紙に書いてある問題の解決法を考えました。 付箋紙をスケッチブックに貼って、解決法を書き込んでいき、それぞれ発表するというスタイルでした。 その内容の一部が以下です。
発表は、グループごとに前に出て行いました。 ここでの発表も一つのプレゼンだったと思います。
ネタに走る人や（いや、本人的にはマジメだったのかもしれませんが）、スケッチブックの書き方に個性が現れたのが印象的でした。
ワークショップおもしろい！ というのが素直な感想です。
セミナー形式のイベントでは、どんなに興味のあるテーマでも集中力が切れてしまう瞬間があるんですが、ワークショップではそれが殆どありませんでした。
「人間は立ち上がるだけでも気分転換になる」と言いますが、座りっぱなしではなく立ち上がって付箋紙を貼ったり、グループを作って作業した事が、いい感じに集中力の持続に繋がったのではないかなと思いました。
内容も、色んな人の「プレゼン感」を知る事ができて、とてもタメになりました。 実は、近い内に大勢の前で喋る機会がありそうなので、早速そこで生かしたいと思います。
]]>
livedoor Blogには、ユーザが作ったテンプレートデザインを公開できる機能があるんですが、それを利用しました。
みんなのデザイン / The Falling Box (β)で見る事ができます。
デザインは難しいですなあ。
]]>
マイコミさんから単著出しました！ 本を出す事は小さい頃からの夢だったので、ねんがんの、という感じです！
タイトルから伺えますが、この本は初心者向けの本です。 はじめてWebサイトを作る人や、以前に挑戦したけど挫折してしまった人に向けて書きました。
あとは学校でのテキストや、新卒で入社したばっかりの人にもオススメできます。
本書の作りは、まず手を動かしてモノを作る → その後に内容の解説 という流れが基本になっています。 「技術とかよくわかんないけど、とりあえず作りたい！」という人は解説セクションを飛ばす事もできるわけです。
「自分が書いたコードが、なぜその結果になるの？」と思った人は、じっくり腰を据えて解説を読む事ができます。
これは僕が提案した試みなんですが、「本当はもう少しつっこんだ解説をしたいんだけど、専門的すぎて難しかったりDNBKされたりしそう…」という場面では、答えが導きだされそうな検索ワードを掲載してあります。
これは二つの効果を狙っていて、一つは上記のような専門的な内容を避けながらも、興味のある読者には疑問の解決を手助けするというもの。
もう一つは、そもそも「ググる」という行動を起こさない（思いつかない）読者に、「ググり癖」を付けるというものです。
このブログを読んでくれている人達は、何か解らない事があったらまずググると思います。 技術者としてはそれが当然なので忘れがちですが、技術者以外の人達はそれを思いつかない事も多いと思います。
少なくとも、自分が初心者の頃は「解説書を読んでいて解らない事があったらググる」というフローは思いつきませんでした。
この本の裏キーワードは、「しれっと」です。
本書の通りにコードを書いていれば、しれっと正しいコードになります。 しれっとFirefoxをオススメしていたり、しれっとバリデータを便利ツールとして紹介しています。
段々と「しれっと」がゲシュタルト崩壊してきた気もしますが、本書を読んだ初心者さんが、意識せず正しいコードを書いてくれたりFirefoxやバリデータを使ってくれたらいいな、と思っています。 あ。 あとしれっとlivedoor Blogを紹介しています。
早くも書評を書いてくれたり、紹介してくれています！ ありがとうございます！
このリストは発見次第追加するので、もし漏れなどあったらコメントやトラバやメールやTwitterなどで知らせてもらえると嬉しいです。
担当編集の伊佐さん、何かとお世話になりまくってしまった角竹さん、今回のお話を頂くきっかけを作ってくださったたにぐちまことさん、素材で使わせて貰ったまめこ&suniti家のミー、息抜きに付き合ってくれたライブドアモンハン部の部員達、そして執筆中でウンウン唸ってる時にご飯を作ってくれた両親に感謝します。
]]>
ミツエーリンクスで行われた『マイクロフォーマット』出版記念セミナーに行ってきました。 今度出版されるマイクロフォーマット本の著者であるJohn Allsopp氏を迎えてのセミナーです。
内容は、第一部が木達さんによるマイクロフォーマットの概要的な話、第二部が木達さんとJohn Allsopp氏の対談でした。
会場は西新宿にあるミツエーリンクスの社内セミナールームでした。
会社の後ろの席の人と「多分いるんじゃね」と言ってたんですけど、思ったとおりネコゼさんとかforestkの人とかがいました。
第一部の内容は、個人的には大体理解している事だったので、よい復習になりました。 いくつか気になったポイントをピックアップします。
VoteLinksはシンプルなマイクロフォーマットの一つで、ぼーとりんくす と発音します。
リンク先に対して賛成か反対か、はたまた意見を保留するかを示す事ができるマイクロフォーマットです。
これをlivedoorクリップやはてブなんかが採用したら面白いんじゃないかなと思いました。 何かの議論の時に賛成派の意見だけを取り出したりとか、その人のコメントのネガティブ率とポジティブ率とかも簡単に出せそうです。
参考リンク：vote-links-ja - Microformats
Firefox3では、機能としての対応は見送られたもののAPIレベルでは実装されているとの事。 つまり、拡張機能とかで今後面白いものがどんどん出てくるかもしれない。
現在開発中のIE8では、hAtomに「よく似た」WebSliceという機能があるとの事。 あーあーまた独自規格かよーと思わなくもないです。
John Allsopp氏的には、「一般の人にまで普及するならそれはそれであり」というような考えのよう。 まあそう言われると、一見遠回りなようで（将来的に規格を統一する事を考えても）結局は早いのかもしれないですね。
John Allsopp氏が楽観視ともとれるような考え方をしていた事を少し不思議に思ったので、両者のコードを見比べてみました。
hatom-examples - Microformatsより引用<body> <div id="wrap"> <div class="hfeed" id="content"> ... <div class="hentry entry" id="post-60"> <h3 class="entry-title"> <a href="http://www.microformats.org/blog/..." rel="bookmark" title="...">Wiki Attack</a> </h3> <div class="entry-content"> <p>We had a bit of trouble with ...</p> <p>We’ve restored the wiki and ...</p> <p>If anyone is working to combat said spammers ...</p> </div> 以下省略
IE8 Beta 1でWebSliceを使う方法 - builder by ZDNet Japanより引用<div class="hslice" id="webslice"> <p class="entry-title"> MSN.com Slideshow </p> <div class="entry-content"> Latest content ... </div> </div>
必要な記述で異なるのはルート要素のみで、タイトルと内容には両者共通のclass名を使用するようです。 つまり、両立は容易です。 それなら尚更hAtom使えよと。
このままIE8がリリースされた場合には、hAtomに対応する場合にひと手間加えてWebSliceにも対応する、というやり方になりそうです。 ああ面倒くさい。
しかし、個人的にはWebSliceのためのid属性には納得いかないです。 「2箇所以上指定されるとめんどくね？」→「じゃあidも指定させちゃおうぜ」とかそんな理由だったりして。
なお、hAtomはドラフト段階ですしWebSliceもIE8がベータの段階なので、今後何か動きがあるかもしれません。
マイクロフォーマットとアクセシビリティの話になると必ずと言っていい程に取り上げられるのが、abbrデザインパターンです。 これは、本来は略語を示すためのabbr要素を使って、日時を意味づけるというマイクロフォーマットです。
つまり、abbr要素は略語のはずなのに、その内容には日時が記述される事になります。
これで困るのが、音声リーダを使用しているユーザです。 音声リーダが略語として読み上げると、ユーザが混乱してしまう恐れがあるという問題。
文脈に注意すれば上手い事ごまかす事はできるかもしれませんが…まあそういう問題じゃないですよね。 span要素を使っておけば余計なトラブルは起きなかったのではないかなとも思います。
第二部は、「非常に早口、かつ難しい言い回しをする」John Allsopp氏と、木達さんの対談です。 木達さんは通訳も兼ねているので、かなり忙しそうでした。
補足：開発者は「ブラウザがネイティブ対応してないし、マイクロフォーマットの対応はもう少し見送ろう」と思い、ブラウザベンタは「まだあんまり使われていないからネイティブ対応の必要はないな」と思うジレンマについて。
参考リンク：ヤフー、「SearchMonkey」を一般公開 - 開発者のためのオープンサーチプラットフォーム :: SEM R
個人的にはこれ、興味を惹かれました。
Leveraging the Data Webを眺めた感じだと、オレオレマイクロフォーマットではなくて既存の規格でOKみたいな？
補足：これらの問題が解決できれば、もっと広まりやすいのでは？ という意図。
マイクロフォーマットはメタデータである。 コンテンツとはレイヤが違う。 これは言葉の違いを乗り越えられる可能性を持っている。
ここで「いわゆるSNSなどでの友人関係をXFNで表すなら、どの値が適してると思いますか？」という感じの質問をしたんですが、これが解りづらい言い方をしてしまったせいでJohn氏にうまく伝わりませんでした。 あまつさえ貴重な質疑応答の時間を消費してしまい…申し訳ないです＞＜
というか、今Twitterを見たらrel="contact"がついてた！ それでいいんじゃないのか！？ うわああああああバカ！ バカ！ バカ俺！＞＜ 他の参加者の皆様、木達さん、ほんとすみません＞＜
A:それは心配していない。 それはそれでOKだ。
A:実際に動くところを見せると、便利さが解って貰えるのでは（木達さんの意見）。
]]>ブラウザの差異を最小限だけリセットするCSSって浅漬けCSSって感じじゃない？
昨日、@reaさんがTwitterにポストした一言がきっかけです。
最近、ぬか味噌 CSS を使わなくなった。デメリットの方が多い気がする。
それに対する@hamashun（僕）の反応がこんな感じです。
@rea 実はぬかみそ的な CSS は使った事がなかったりします。 必要な要素への margin と padding のリセットと、あとは border 消したり、とかは大抵毎回使いますけどもー。 浅漬け CSS 。
ちなみにここでのborderを消す、というのはimg要素にリンクをした時に表示されるborderについてです。 フォームのborderとかは消していないです。
Twitterのログだけだと説明不足だったのでここで追記。
@reaさんから頂いた更なる反応。
@hamashun 自分も最近はそんな感じです。浅漬け CSS いいですね！
@reaさんのポストが解りやすいです。
@hamashun ぬか味噌はデフォルトスタイルをできる限り統一しよう、っていう考えですよね。
「ぬか味噌」というネーミングは、上ノ郷谷さんのエントリ、スタイルシートを分けて管理する方法をまとめるが恐らく初出です。
上ノ郷谷さんのサイト、2xup.orgのぬか味噌CSSを見てみると、実際にどのような指定をしているのかが分かります。
言うなれば「オレオレデフォルトスタイル」って感じですね。
（もし誤解されると困るので念の為に書いておくと、この「オレオレ」にネガティブな意図はありません）
必要な要素へのmarginとpaddingのリセット程度を記述した、シンプルなCSSファイルやソースコードを浅漬けCSSと呼びます。
サイトによって記述する内容が変わる事もあります。
優劣はありません。 慣れやサイトの種類によって使い分けるといいと思います。
div,span,h1 ...(必要な要素が並ぶ)... p {
margin: 0;
padding: 0;
}
a img {
border: none;
}Twitterで言及くださった皆様（非公開にしている人は表示されません）
]]>PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」:phpspot開発日誌でも紹介されていて結構なブクマもついていたサービス、PSD2CSS onlineがどんな感じなのか知りたかったので、実際に試してみました。
複雑っていうのは、今回用意した物の中でっていう事です。 背景画像やテキスト装飾などを盛り込んでみました。
ソースコード1
これはひどい＞＜
全ての要素が画像として切り出されて、positionプロパティで配置されています。
今度はかなりシンプルにして、色で塗り分けたカラムを並べただけにしてみました。
ソースコード2
これもひどい＞＜
こちらも変わらず、画像をpositionプロパティで並べたものになっています。
枠線のみで構成されたPSDを用意しました。
ソースコード3
もうだめぽ＞＜
どうやら、PSDデータのレイヤ情報を使ってソースコードと画像を出力しているようです。
レイヤごとに画像をスライスし、レイヤの重なり順でz-indexプロパティを指定し、レイヤのタイトルをCSSのコメントとして記述する、という感じでしょうか。
チュートリアルの映像を見てみたところ、映っているソースコードが僕の結果と同じようなので（画質的にうすぼんやりしか見えないのですが、多分同じパターンだと思います）、これはこういうサービスなようです。
はてブコメントに「コーダーの仕事がなくなるんじゃないか」というような声がありましたが、今回は大丈夫なようです。
しかし、将来的に「PSDを読み込ませるだけで高いクオリティのソースコードを出力する無料アプリケーション」が登場しないとは言い切れません（むしろどんどん出てくると思いますし、それで良いと思います）。
では、コーダーやマークアップエンジニアと呼ばれている人達は、今後どうすればいいのでしょうか。
それに関してここ暫く考えている事があるんですけど、長くなるので別の記事にしたいと思います。
と、こんな終わり方だと無駄に不安を煽ってしまいそうですね。 すみません。
フォローしておくと、多分、そんなに悲観する事ではないと思っています。
livedoor Blogの第4世代テンプレートがhAtomに対応したりして、最近社内でにわかにmicroformatsが盛り上がっています。
そこで制作グループ（デザイナとマークアッパ）の定例ミーティングの時に、社内勉強会を行いました。
参加者は制作グループに留まらず、ディレクターやエンジニアの人達も聞きにきてくれました。
という訳で資料を公開します。
勉強会は前後半に分かれていて、僕の担当はざっくりしたmicroformatsの説明でした。
できるだけ解りやすく伝えようと思ってこんな書き方にしてみたんですけど、逆に解りにくくなっていないか微妙に不安です。
社内勉強会では質問タイムも多めにとっていたので、結構伝わっていたんじゃないかなと思います。
無料で2ch系BBSが借りられるサービス、したらば掲示板がリニューアルしました。 デザインをWoopsdezことまめこ、コーディングをワタクシhamashunがやりました。
サービスの性質故か、全体的にユルい感じになってます。 特に404ページとか見ちゃだめだぞ。 絶対見るなよ！
ガチ。
ロゴにマウスオーバーで表示される文言は、プロレスに詳しいにぽたんさんにお願いしました。
なお、にぽたんさんの「たん」は敬称ではありません。 気をつけてくだしあ！
昨日の件ですが、とあるIRCチャンネルで一緒にいながら実は一度も喋った事のなかったユースケさんが、#markupper を作ってくれました！ ありがとうございます！
サーバはfreenode、チャンネルは#markupperです。 設定が分からない人は枯れた技術で社内を潤す IRCを使おう！ - livedoor ディレクター Blogを参考にするといいですよ！
昨日の件にコメントして頂いたhilokiさんがコーダー、マークアップエンジニア向けSkypeオープンチャットを作ってくれました！ ありがとうございます！
これをきっかけに、もっと交流とか活発になったりするといいですね！
嘘かもしれない。
念の為に全部確かめてみるといいんじゃないかな！
IRCのチャンネルってみんなどうやって探してるんだろう。 クチコミ？
あったら是非入りたいです。 コメントとかブクマコメントとかTwitterとかで教えて貰えると嬉しいです。 なかったら勝手に作ろうと思います。
この前のCSS Niteの打ち上げで「知りませんかー」って聞いてみたんですけど、そもそもIRC自体、利用している人が少ないようでした。 やっぱりWeb制作側よりシステム開発側の文化なのかな。
IRCは便利だし色々と楽しいので、使った事ない人は使ってみるといいと思います！
「IRCってなんぞ？」という人は枯れた技術で社内を潤す IRCを使おう！ - livedoor ディレクター Blogを読むといいと思います。
]]>CSS Nite in Ginza, Vol.23に行ってきました。 今回のゲストはあの大藤幹さん。 大藤さんの名著CSSプロフェッショナル・スタイルは、コーディングの勉強を始めたばっかりの頃に買って物凄く役に立った本だった事もあって、かなり期待していました。
19時開演なので18時30分に到着したんですが、既に座席は満員でした。 さすがに凄い人気です。
大藤さんは雑誌Web Designingに『CSS Analysis』という連載をしていて、その内容は世界のWebサイトを取りあげて色んなテクニックを紹介するという物。
今回のテーマはそれの特別版みたいな感じで、『CSS Analysis Live!』でした。
なお、内容はあくまで解析したサイトの結果であり、それが正しいとか、或いは大藤さんの意見である、という訳では必ずしもないようでした。
CSSネタは成熟した感があるのでは。 ブラウザごとの特徴や対策や組み方のTipsなど、大抵の情報は出揃ってしまった。
（hamashun注：以前書いたんですけど、僕も同じような事を感じていました）
CSSハックを全く使っていないサイトを取り上げてから、1年経っている。 しかしハックを使わないサイトは使っているサイトにあらゆる点で勝っている訳ではなく、例えばブラウザによる若干の差異などのデメリットが存在する。
画像置換の問題が顕著（後述）。
連載当初は英語圏が100%だったが、最近ではドイツ、ブラジル、ルーマニア、チェコ、フランス、イタリアなど多岐に渡っている。
ちなみに取り上げる際は言語は考慮していなく、単にソースコードを見て決めているとの事。
昔は英語圏がNo,1だったが、最近はそうでもなくなってきている。 ドイツは追いつき追い越している印象。 そういえば思い返すと、2003年のW3Cサイトのリニューアルコンテストで優勝したのはドイツの人だった。
日本も結構イケてる。
画像置換そのものが悪という風潮で、使われない時期があった。 しかし、最近は普通に使われている。
その手法も、以前は古いブラウザに対応する為にtext-indent: -9999px;などとしていたが、最近は古いブラウザは無視したコードが増えている。 これらは若い製作者に多い傾向な模様。
英語圏では切り捨て傾向にある。 ドイツやオーストリアでは、IE5.0、IE5.5なども対応している事が多い。
（hamashun注：まあ、この辺はその国ごとのビジネス的、リテラシ的な事情にもよりそうですし、一概に優劣は決められないのではと思います）
一時期、非常に細かく分けているサイトがあったが、最近はかなりシンプルな分け方が多い。 例として紹介された分け方で印象に残ったのは、いわゆるLiteboxなどのライブラリ用CSSを別ファイルに分けている事だった（弊社だと開発しちゃう事もあるので同じファイルに記述する事も）。
また、ブラウザの振り分けにはコンディショナルコメントを使っているサイトが多い（hamashun注：スターハックが減った理由も恐らくここにあるのでは）。
最近は見かけない（！）。 連載で取り上げたサイトでは、英語圏以外では1年前くらいからゼロ件。 ただしこれは、一括してリセットしていないという意味で、marginとpaddingだけはリセットしたり、必要な箇所だけでリセットしているサイトはあるとの事。
でも、本当に全くリセットしていないサイトもあって、そのサイトはブラウザによって若干の表示差異はあるとの事。
（hamashun注：個人的にはこれには結構驚きました。 現状でmarginとpaddingのリセットをしないメリットはあるんでしょうか。
なお、この記事の最初にも書きましたが、この講演はあくまで事例を紹介する物であり、それが必ずしも優れているという訳ではないので注意してください）
ヘッダー部分を大きくとって、そこに大きな画像を配置するサイトが増えた。 これによって文字サイズを極端に変更してもサイトのイメージが損なわれない。
3000pxとかの大きな画像を使ったサイトも増えてきた。
（hamashun注：nowaのヘッダ画像も、リキッドレイアウトに対応するために大きな物が多いです。 2000pxとか。 max-widthプロパティと合わせて大きなヘッダ画像を使う方法がわかりやすいのでは）
2回取り上げた。 国はイギリスとアメリカ。 最近は余り見かけない。
これは_blankによる別窓問題と似た問題を引き起こす可能性があって、便利だと思う人もいれば迷惑に思う人もいるかもしれない。
追加修正などのたびに足せば足すほど、または（ファイルを）分ければ分けるほど問題が増えるのではないか。 例えば、
これらによって問題が発生する可能性がある。
ドイツのコーディングはシンプルでキレイらしい。 余計な事はせず、見通しのいいCSS.
キレイなソースなどと聞くと「それが何の得になるの？」と言う人がいるが、そういう人はコーディング自体が目的になってしまっている。
コーディングとはあくまで目的を達成するための手段であり、短くキレイに書いておけば、その後の作業もラクになる。
（hamashun注：ここがちょっとピンとこない人もいるかもしれませんが、つまりコーディングが目的になっているというのはその場のコーディングを終わらせる事が目的になっていて、運用を考えていない状態なのではと思います。
自分の書いたコードを半年ぶりに編集する事を考えたら、キレイなコードの方がいいですよね）
連載でとりあげた最近のサイトは、結構バラバラ。 でも読みづらくはない。 プロパティは降順よりは数が読みやすさに影響するようだ。
また、重要なプロパティを上の方に持ってくるサイトもあった。
ファイル分割の件について、森田さんご本人から言及を頂きました。
securecat's exblog : Re: CSS Nite in Ginza, Vol.23のまとめ
情報に翻弄されない事が大事。
久しぶりにガチなCSSネタを聞けて楽しかったです。 業務に使えそうな部分もありました。
お会いするまではなんとなくもっと固い感じの方なのかと思っていたんですが、全然そんな事はなくて打ち上げでも気さくで優しい方でした。
（敷地的な意味で）
お察しの通り釣りエントリですｻｰｾﾝ＞＜
まめこに誘われたのでホイホイ着いて行ったら、はてなオフィスを見学させて頂ける事になりました。 その節はありがとうございました。
写真の掲載許可を頂いたので、写真を中心にお送りします。
ちなみに僕は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を薦めてくるか…！
先日公開になった、livedoor プロフィールのコーディングやりました。 新規コンテンツの担当はnowa以来なので久しぶりです。
プロフィールサービスとは言ってもiddyやアバウトミーとは少し毛色が違って、livedoor Blogのいちプラグインだったプロフィールを、パワーアップしてコンテンツにした物となっています。
ブログはSNSに比べて書き手同士の交流が生まれにくいように思います。 技術者だとトラバもバリバリ使うんでしょうけど、ライトユーザーでそこまでやっている人はそんなに見ません。
livedoor プロフィールにはTwitterのFollowのようなシステムがあるので、コミュニケーションのきっかけになるかな、なんて。
Blog側にも「アシスタント」という新しい機能が付きました。 これは面白かった記事にちょっとした拍手を送るような、いわゆるWeb○手とかは○な○ター的な機能です。
ただ、アシスタントにはネタをしこめる可能性があって、それをlivedoor Blog担当の弊社sasakillが記事にしています。
時間的なアレとか広告が吐くURLがナニとか、コーディング的にいくつか修正したい点は残っているので、今後もちょこちょこ改善します。
余談ですが、リリース後にも継続して手を入れていけるのが自社コンテンツの良さのひとつだなあ、と最近思っています。