hamashun.com

したらば掲示板がリニューアルしました

無料で2ch系BBSが借りられるサービス、したらば掲示板がリニューアルしました。 デザインをWoopsdezことまめこ、コーディングをワタクシhamashunがやりました。

サービスの性質故か、全体的にユルい感じになってます。 特に404ページとか見ちゃだめだぞ。 絶対見るなよ！

nowaだけはガチ

ガチ。 ロゴにマウスオーバーで表示される文言は、プロレスに詳しいにぽたんさんにお願いしました。
なお、にぽたんさんの「たん」は敬称ではありません。 気をつけてくだしあ！

HTMLとCSSで仕事してたりしてなかったりする人たちのたまり場を作ってくれた件　その1

昨日の件ですが、とあるIRCチャンネルで一緒にいながら実は一度も喋った事のなかったユースケさんが、#markupper を作ってくれました！ ありがとうございます！

サーバはfreenode、チャンネルは#markupperです。 設定が分からない人は枯れた技術で社内を潤す　IRCを使おう！ - livedoor ディレクター Blogを参考にするといいですよ！

HTMLとCSSで仕事してたりしてなかったりする人たちのたまり場を作ってくれた件　その2

昨日の件にコメントして頂いたhilokiさんがコーダー、マークアップエンジニア向けSkypeオープンチャットを作ってくれました！ ありがとうございます！
これをきっかけに、もっと交流とか活発になったりするといいですね！

この中のどれか一つが

嘘かもしれない。
念の為に全部確かめてみるといいんじゃないかな！

livedoor Blogの第4世代テンプレートがhAtomに対応したりして、最近社内でにわかにmicroformatsが盛り上がっています。
そこで制作グループ（デザイナとマークアッパ）の定例ミーティングの時に、社内勉強会を行いました。
参加者は制作グループに留まらず、ディレクターやエンジニアの人達も聞きにきてくれました。

資料公開

という訳で資料を公開します。
勉強会は前後半に分かれていて、僕の担当はざっくりしたmicroformatsの説明でした。

できるだけ解りやすく伝えようと思ってこんな書き方にしてみたんですけど、逆に解りにくくなっていないか微妙に不安です。
社内勉強会では質問タイムも多めにとっていたので、結構伝わっていたんじゃないかなと思います。

PhotoShopのPSDファイルをXHTML＆CSSに一発変換できる「psd2css」:phpspot開発日誌でも紹介されていて結構なブクマもついていたサービス、PSD2CSS onlineがどんな感じなのか知りたかったので、実際に試してみました。

複雑なデザイン

複雑っていうのは、今回用意した物の中でっていう事です。 背景画像やテキスト装飾などを盛り込んでみました。
ソースコード1

これはひどい＞＜
全ての要素が画像として切り出されて、positionプロパティで配置されています。

色分けのみのデザイン

今度はかなりシンプルにして、色で塗り分けたカラムを並べただけにしてみました。
ソースコード2

これもひどい＞＜
こちらも変わらず、画像をpositionプロパティで並べたものになっています。

枠線のみのデザイン

枠線のみで構成されたPSDを用意しました。
ソースコード3

もうだめぽ＞＜

どういう仕組み？

どうやら、PSDデータのレイヤ情報を使ってソースコードと画像を出力しているようです。
レイヤごとに画像をスライスし、レイヤの重なり順でz-indexプロパティを指定し、レイヤのタイトルをCSSのコメントとして記述する、という感じでしょうか。

チュートリアルを見てみた

チュートリアルの映像を見てみたところ、映っているソースコードが僕の結果と同じようなので（画質的にうすぼんやりしか見えないのですが、多分同じパターンだと思います）、これはこういうサービスなようです。

今回の件から考える事

はてブコメントに「コーダーの仕事がなくなるんじゃないか」というような声がありましたが、今回は大丈夫なようです。
しかし、将来的に「PSDを読み込ませるだけで高いクオリティのソースコードを出力する無料アプリケーション」が登場しないとは言い切れません（むしろどんどん出てくると思いますし、それで良いと思います）。

では、コーダーやマークアップエンジニアと呼ばれている人達は、今後どうすればいいのでしょうか。
それに関してここ暫く考えている事があるんですけど、長くなるので別の記事にしたいと思います。

と、こんな終わり方だと無駄に不安を煽ってしまいそうですね。 すみません。
フォローしておくと、多分、そんなに悲観する事ではないと思っています。