先週の土曜日、CSSNite LP9へ行ってきました。
すごくすごく楽しみにしていたのに、前日夜にチビが熱を出し、かなりどきどきで迎えた土曜日でした。

この日のつぶやきは
twilog
とか
ちゃんと、ちゃちゃっと。
を見て頂くとして、印象に残った部分の感想をつらつらと。

キーノート：マークアップエンジニアのキャリアパス

マークアップエンジニアの名付け親である森田さんの基調講演。
こちらでスライドを確認できるようにしてくださっています。
荷物が片付かないうちに始まってしまって、最初の方は聞き逃したのですが
「マークアップエンジニアの職能」というお話がありました。
詳細はスライドを見て頂ければと思うのですが、これ見て、私はマークアップエンジニアを
名乗っていてもいいのかなぁと思ってしまいました。
これらを完璧にこなすことはできないかもしれない。
でも、できるようになりたいと思いました。いくつになっても日々勉強ですな。

XHTML&CSS超高速コーディング術 LIVE!

XHTML&CSS超高速コーディング術についてはこっちでもかいていますが、
実際にこの手法を見てみたかったので、1番楽しみにしていました！

印象的だったのは、クセのように記述されるIE対策と思われるCSS。
floatしたら、かならずdisplay: inline;　というような感じです。
本にも書かれていたとおり、手戻りを最小限にするために、工夫されているんだなぁと
思いました。

モジュールはまとめて1枚のpngに作ってしまうのも斬新と思いました。
モジュールをまとめたテンプレートページはよく作りますが、デザインを
まとめてしまうということはしたことがなかったので、驚きでした。

しかし、疑問。
psdのデータをレイヤー情報なしにpngにしてしまってスライスするとなると
透過したいとか、重なりがある部分とかそういうのはどうしているんだろう。
そういうのは別途作成しているのかな。

その辺お伺いしたかったんだけど、エレベーター前でご挨拶しただけで
懇親会ではお話できず残念。もし、これ読んだら教えてくださいw

Coding with jQuery

超イケメンの登場！
はい、目の保養させてもらいましたw

普段使っている47都道府県のセレクトメニューありますよね。
あれって、スクロールし過ぎちゃったり、九州とか下の方に表示される方には
面倒！って思われる方多いと思うのです。
アレをぱっと見開きで作っちゃたのがこれです。

jQueryが担う分野はクロスブラウザ対策。
ユーザーのことを考え、かつ制作者にも優しいとお話されていました。

こんなことやりたいんだけどどうすればいいんだろう？と困っていると
やさしく相談に乗ってくれる、ステキなお兄ちゃん。
まだまだな私ですけど、もっと勉強してjQueryってこんなにおもしろいんだよ！と
紹介できるようになりたいなぁ。

実例に学ぶ！コーディングから参加するUI設計

ハムさん登場！
私もおそろいのTシャツ着ていました。

実例を挙げての紹介。何がよかったって、普通なら隠しておきたい
失敗も紹介するという大物っぷり。
ををーこれすげー！と思っても、実際にはこんな理由でボツになりましたという話が、
実務的でいいなぁと思いました。

実装前に決めておくこと：動作、jsオフの時、対象ブラウザ、操作する部分をどこに記述するのか

こういうこと大事。
こういうことが決まらずに要望だけが一人歩き的な制作をしたことありますが
本当に大変でした。

技術はいろいろあるけれど、ちょっとした気遣い、優しさ。誰が使うのか考えて
実装を検討するというお話が、ハムさんの人柄を現していたような気がします。

Webパフォーマンス最適化のためのコーディング手法

またもイケメン登場。

通常、私はデザインをもらって、コーディングするだけですから
パフォーマンスを考えてどうのこうのなんていわれたことがありません。
制作方法もほとんど自己流です。

昔、光通信なんてなくて、ぴーひょろろーな時代には
大きな画像は読み込みに時間がかかるから、とにかく小さく小さくと
切り刻んだものでした。
その頃からくらべたら、最近は格段に速くなっています。
でもだからこそ、数秒の読み込みの遅さが気になるんだろうなと思います。

マシンの性能だけでなく、ブラウザによっても読み込み速度が違いますが
それをクリアするためにいろいろ工夫をしているというお話でした。

衝撃的だったのは「パフォーマンスを考え、コスト意識を説明して
デザインを変えるという案もある」いうこと。
私のような外注末端の状況でそれをやるのはほぼムリだけど、
デザイン絶対じゃないところに驚きを覚えました。

CSS3 for tomorrow [ver.LP9]

先月の銀座でも思ったのですが、もうおもしろいったらない。
デモを手元で見ることができるので、より理解が深まりました。
@Takazudoさんのスライド
@sigwygさんのスライド　

今回時間がなくて完成できなかったコーディングコンテストですが、
このスライドを見ていて、あの部分にこれを、あっちにはアレを
などと想像がふくらみました。

ここでも「でしゃばりすぎない」という言葉が出ました。
できるようになることはたくさん増えるし、簡素化されるけど
どこまでそれをやるのか、そしてそれをどの役割の人がやるのかなど
考えさせられました。

ノリとツッコミで進める HTML5 ライブコーディング

まさにノリ突っ込み感じでテンポよく進められていました。
実際、ソース表示の部分などもよく見えたし、分かりやすかったと思います。

実際にあり得そうなシチュエーションのxhtmlからHTML5への移行を
デモしてくださいました。

いっぱい書いてあるものをばっさり消していくのは、気持ちがよかったです。
事前にもっとよく資料を見ておけばもっと楽しめたと思いました。

今日から使えるHTML5 API

目をキラキラさせて、ものすごく楽しそうにお話をされている姿は、
まるで少年のようだと思いました。

私にはまだまだ難しいレベルのお話でしたが、HTML5の
可能性をたくさん教えて頂けました。
HTML5のAPIはJavascriptが必須だとのこと。
これからもこの業界にいるなら、もっともっとがんばらなくては。

懇親会

こんな機会に名刺を無くすという大バカもの。
家に帰ったら持って行くのを忘れただけでした。
ご心配頂いたみなさま、ごめんなさい。
絶対これだけは忘れちゃいけないと思っていたのに、おっちょこちょいの助です。

ちょいの助のくせに、オバチャンパワーで、図々しくもたくさんの方と
お話しさせていただき、名刺もたくさんちょうだいしました。
ありがとうございます。
自己紹介リストの2番のやる気満々のオバチャンです。

本当はもっと行動的に他の階にも行きたかったのですが、何せ名刺がないので
お伺いするのも恥ずかしく、ずっと3階にいました。
久しぶりにあえたお友達もいて、ほんとよかった。
もっともっと時間があったら、名刺も忘れなかったらよかったのに。

オバチャンというのは、あちらは自分のことなんか全く知らない有名人でも
こちらはなんだかよく知っているという気になってしまうのですね。
お酒も入って、テンション高く、そんな失敗をしてしまい、アレはすごかったと
@cremaちゃんをはじめ、周りの方々にひかれてしました。

@cremaちゃんもごめんなさい。

益子さん、ごめんなさい。この場で失礼をお詫びします。
初めて言葉を交わしたのに、挨拶もせず、カニがないだの、
あれこれ文句つけて申し訳ありませんでした。

帰り際に、鷹野さんにiPadさわらせて頂きました。
これまたちゃんとお話しするのは初めてだったのに、きちんと
ご挨拶もせずに申し訳ありませんでした。

iPad、すごく欲しくなりました！

mukiオフ

ここからはまた別の集まりなんですが、この日の出演者@5509 @h2ham を含めた
数人である勉強会のコミュがあって、おそれながらそこに入れて頂いています。
おそろいのTシャツもこのメンバーで作ったものです。

せっかくなので、懇親会終了直前に抜けて、お店を変えておしゃべりしてきました。
ホントに楽しくて、時間が足りませんでした。
みんなありがとー！！！

で、最終的に感じたこと

今のキャリアであと10才若くて、子どももいなければなーと思うこともあります。
でも私は私。今の自分を受け入れ、努力するしかありません。

たまにしかこういう集まりに行けなくて、行くとうれしくてテンションあがってしまいます。
図々しいオバチャンです。ご迷惑をかけることもあるかもしれません。
ごめんなさいです。

あきらめたらそこで終わり。忙しくたって、時間は自分で作るもの。
固まってきた頭なので時間はかかるけれど、前に進むことをおそれず、忘れずに
夢を追いかけていきたいなと思った1日でした。

カアサンズサイトをリニューアルしています。
年明けと共にリニュの予定だったのですが、年末年始のあれこれに
忙殺され、いまだ作業中です。^^;

そこで、三人のブログからRSSをひっぱってきてごちゃ混ぜで表示をさせよう
と言うことになったのですが、cgiは動かないし、なんだかうまくいかない。
Google先生にお世話になりつつ、
「Google AJAX Feed API」を使って外部RSSを読み込む。／ライブラリー: アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-"夢は口に出すことで実現する！"というアファメーション
デベロッパー ガイド - Google AJAX Feed API - Google Code
などのお世話になりつつ、作り上げたのがこれ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Feed API - Simple Example</title>
<link rel="stylesheet" href="/common/css/import.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAABimkmo9fcRhb5cQrcsz_hTymQXfiXPmn8PEK7bgMBFVCrLW9xSg_9d27Pz25GqK_dOeNd4De6_yEg"></script>
    <script type="text/javascript">
 
    google.load("feeds", "1");
 
    function initialize() {
      var feed = new google.feeds.Feed("http://rssmix.the-search.jp/13827.xml");
   feed.setNumEntries(10)  
   feed.load(function(result) {  
     if (!result.error) {  
       var container = document.getElementById("feed");  
       for (var i = 0; i < result.feed.entries.length; i++) {  
         var entry = result.feed.entries[i];  
         var div = document.createElement("li");
div.setAttribute("class","hoge");
         var a = document.createElement("a");  
         a.href = entry.link;  
         var list = entry.title;  
         a.appendChild(document.createTextNode(list));  
         div.appendChild(a);  
         container.appendChild(div);
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);
 
    </script>
  </head>
  <body>
    <ul id="feed"></div>
  </body>
</html>

サンプル

ちなみにRSSをミックスするのに使ったのは「The Search RSS Mix」です。

これだと、classをひとつしかつけられないとか（もっと条件文書けばいいんですけど）
ごちゃ混ぜにならないとか問題があったので、いろいろな方に相談しました。
そうしたらrewさんから
「Yahoo Pipesで繋げちゃうとか？」というご提案を。

Yahoo Pipesってなに？
から入った私。
さて、ちゃんとできたかどうかはまた次回。

久しぶりに積ん読ではなく読破しました。

この本が出ると知ったのはTwitterでした。
Amazonさんで本を買っても、ああやっぱりいらなかったなと思うことがあるので、
立ち読みしてからと思ってそう発言したら、中の人から「買えやwww」と
RTされてしまった本なのです。

発売日だったか翌日かに本屋で立ち読みしました。
技術的な面については、不要かなと思い買うのをやめようかと思いましたが、
前半の管理面については、立ち読みではなくじっくり読んでみたいと感じましたので
購入しました。

私は、個人事業主で在宅ですから、マークアップなどの作業を複数で
行うという作業はあまりありません。
ですから、この本に書かれているような綿密な管理は必要ないのかもしれませんが
役に立つことも多かったです。

一人でやっていると、自分ががんばればいいや的なことになりがちですし、
私ルールみたいなものができあがってしまうのですが、普段やっていることが
この本に書かれていることと同じこと、似ていることも多く、なんか安心しました。

ルールとして、マニュアルとして決めてしまうということは
最初は面倒かもしれませんが、あとあと楽になることが多いようです。

ひとつだけ言わせてもらうとすれば、書面だけでは
背景画像とロールオーバーの画像に違いなどが一瞬分かりにくいという点かな。
（ええ、私ちょっと目が悪いんですよ）
これは、サンプルデータを落としてみればスッキリ解決するんですけどね♪

一度、実際にデータをbmpにして、スライスするところから見てみたい。
東京でも実演してくれないかなぁ。

クライアントから「IEでCtrlと+、Ctrlと-で拡大縮小していくことでレイアウトが崩れるので対処を」と言われました。
zoom関連だなと思ったのですが、zoom:1の記述じゃ直らないみたい。
ググってみたら、mixiのトピにありました。おなじものは
IE7でbodyの背景が拡大/縮小されない！【IE7対策】
にありました。

でも私はこの方法ではうまくいかなかった。
なので、
IE7のズーム機能による問題の解決策
こちらの方法で、不本意ながら<div>を付け加えました。

ですが、ヘッダーのパーツを　position: absolute;　で配置していたので、
今度はそこが他の変化とあわない。ということで、positionを使わずに
配置する方法に変更しました。

とりあえず、これで解決の巻。