2010年5月26日

CSS Nite LP, Disk 9「Coder's Higher」に参加しました(3)

3回にわたってしまいました。セミナーの日から1ヶ月以上経ってしまいましたが...今更ながらのセミナーレポートエントリーの続きですf^^;

子供を親に預けての参加だったので、最後まで聴くのは難しく、どこで切り上げるかを決めかねていました。ただ、HTML5に関するセッションをぜひ聴きたかったのと、小山田さん+益子さんのお話が楽しみだったのとでセッション7までなんとか残ってしまいました。

結果として、聴いて本当に良かったと思います(羽田野さんのセッションは泣く泣く断念しましたが...)。

コーディングコンテストに応募するために初めてHTML5で制作しようとしたとき、参考にしたのは主に書籍でした。既にネット上に出ているHTML5で書かれたページのソースを見たりもしましたが、やはり一人でやっていると疑問のループに陥りがちでした。

テキストエディタにコツコツ書いて、Firefoxでプレビューして...とやり始め、途中からDreamweaverでxhtmlで作ってから直した方がいいのか?など思い直し、試行錯誤。方針を決めてから始めれば良かったのに、とりあえず息子が寝てる間にできることをやっちゃおうなんて思ったのが間違いだったのか、結局作業が行ったり来たりになってうまくはかどりませんでした。で、期限に間に合わず...(泣)。ただ、得た部分もたくさんありましたので、このコーディングコンテストに少しでも取り組めたのは無駄じゃなかったと思っています。

そんなこんなで、HTML5に対するもやもや感をそのまま持ち込んで、がっつり聴き始めました。ありがたいことにサンプルを使用して実際の制作に即した内容のセッションだったので、自分で悪戦苦闘していた時と同じ感覚で聴くことができてスッと頭に入ってきました。

わたし的ポイントをメモメモ。

<header>、<footer>はページ内にいくつあってもOK(グルーピングするためのもの、という考え方)。idつけてわける。
新聞記事に見立てて考えるとわかりやすい。(article→経済面、スポーツ面 section→見出し+本文 aside→4コマ漫画とか、広告とか。)

サンプルの「なぞの野菜市場」サイトを使ったお話は非常にわかりやすかったです。メニュー下のバナーは<aside>扱い、イントロの脇に配されたトマトの画像は飾りなので<div>か<p>...など、仕事で実際にありそうなものを例として説明していただけたので参考になりました(もちろんどうマークアップするかはケースバイケースであり、今回のものも一例ではありますが)。

これまで以上に、コーディングする際には記事の内容を把握し、適切なコードを考えなくてはならなくなったという感じです。ただ、きちんと洗練されたソースコードを書くことで、より情報をユーザーに伝わりやすく提供できるようになるということなので、しっかり勉強して身につけたいなと思いました。

HTML5について文字からではなく実際に耳で聞いて学ぶことができたので、もやもやがかなり晴れて会場を後にすることができました。本当は羽田野さんのセッションまで全部聴いて帰れたら一番よかったのですが...。それは頑張って自習しようと思います。

セミナーからだいぶ経ってからも、この日聴いたいろいろな話が、今後の自分のキャリアパスに重要な意味を持ってくるのを感じています。自分が次に何を考えるべきなのか、何を習得するべきなのか、何を目標とするべきなのか...。とりあえず考えているだけではなく、何か行動を起こさなくてはいけないと強く思うのでした。

最後に、セミナーでお話してくださったスピーカーのみなさんや運営サイドのみなさん、主催の鷹野さん(休憩中にお話しできて嬉しかったです!)に心から感謝したいです。これからも、web制作に関わる人間として頑張っていこうと思います。

2010年4月25日

CSS Nite LP, Disk 9「Coder's Higher」に参加しました(2)

前回のエントリーの続きです。

セッション3と4はJavaScript周りのお話。

徳田さんの"Coding with jQuery"では、実際に書いてみよう!ということでいくつかのjQueryを使って作ったUIの実例を示してくださいました。JavaScriptは以前は食わず嫌いだったのが、中村享介さんのWebクリエイティブのためのDOM Scripting (Web Designing Books)を読んでからだいぶ苦手な感覚はなくなりましたが、コードがわーっと出てくるとやはり目で追うのは大変で(汗)、しっかり復習することを心に誓ったのでした(笑)。「使いにくいなら置き換えてしまえばいい」の精神で、わたしも実際に何か作ってみたくなりました。

長谷川さんのセッションでは、失敗談を元にしたお話が聴けたので、実例として参考になりました。ちょっとした工夫で、ちょっとしたユーザーの「イラッ」を解消できたりするので、これぞコーディングする人のウデの見せ所です。ユーザーへの配慮を忘れずに制作に取り組むことを心がけていきたいと改めて思いました。

それにしても...。わたしは自分自身の「ユーザーとしての経験値」が低いと気づきました。普段からもっといろいろなサイトを訪問して、「制作者」の目で考えながら見ないといけないと痛感したのでした。

またまた休憩をはさみ、石本さんのセッション。サイトのパフォーマンスがGoogleランキングに影響するというお話から、「パフォーマンス向上のためにどうするか?」という内容でした。その有効な方法として挙げられていたCSSスプライト、以前何かのお仕事でやろうとしてなぜか上手くいかず、原因を詰めないままあきらめて普通に画像を切ってしまったことがありました。今回を機にまたやってみようと思います。

セッション6:CSS3 FOR TOMMOROWは今回のセミナーで一番わくわくした内容でした。確かに、まだ実務でばりばり使っていくことはできませんが、いろいろ試してこれからのサイト制作の可能性を見つけていきたいと感じました。特に、わたしはFlashを持っておらず仕事の幅がその分狭いので(苦笑)、CSS3を使って動きのあるページ制作ができたらこんなに嬉しい事はないのです! 先取りして学んでいきたいと強く思ったのでした。

どのセミナーもスライドで挿入される画像や小ネタが笑えて、全体的にとっても面白かったですが、一番のツボは「震える鳩」でした(笑)。

息子を母に預けていた関係で、最後まで聴くことはできず帰らなくてはいけなかったのですが、なんとか聴いて帰りたいと思ったのが7つめのセッション。このレビューはまた次に書きます。

2010年4月22日

CSS Nite LP, Disk 9「Coder's Higher」に参加しました(1)

CSS Nite LP, Disk 9「Coder's Higher」

4/17、CSS Nite LP, Disk 9「Coder's Higher」に参加してきました。

子供が生まれてから、どうしても夜に開催されるものや昼間でも長時間家を空けることになるセミナーは参加できずにいたのですが、1歳を過ぎた頃からわたしが居なくてもだいぶ大丈夫になってきたので、長丁場のセミナーに参加することにしました。

実は1月にも「CSS Nite LP, Disk 8」に参加しているのですが、こちらはちょっとわたしには難しいところがあって(苦笑)、レポートも上手く書ける気がせずに放置状態です...(恥)。細かいレポートは書けませんが、思うところはちょいちょいあったので、そのうち書けたら書きます。

さて、本題です。

まず、今回のセミナーの中心となるテーマは「Coder's Higher」のサブタイトルからもわかる通り、コーディングでした。webデザイナーと名乗ってはいるものの、コーディングのお仕事が圧倒的に多いので、わたしの本分といっていい分野を学ぶことができました。

まずは基調講演として「マークアップエンジニアのキャリアパス」ということで、「マークアップエンジニア」という呼称の生みの親である森田雄さんのお話がありました。森田さんのお話はいつもひきこまれて聴いてしまいます。一度だけ、銀座Apple Storeで開催されたCSS Niteで講演された際の懇親会で実際にお会いしたのですが、すごく気さくに話していただけたのが印象的だったのでした。

今回のお話は、20分ほどの短い時間でしたが、web周りの歴史を絡めて「コーディングする人」の立ち位置を時系列でまとめられていて、時折出る単語に懐かしさを覚えつつ(「とほほのWWW入門」とか...笑)興味深く聴ける内容でした。

ソースコードはブラウザでサイトを見るときに直接見えるものではないので、やはりどうしても制作現場でも、コーディングというのはビジュアルデザインと比べ軽んじられる傾向があったように思います。なので、コーディングも情報デザインの一翼を担う重要な行程だというのを認知してもらうためにも、「マークアップエンジニア」という呼び方が広がってきたことはとても良いことのように思います。

わたし自身がそう名乗ることはまだまだできそうにありませんが(森田さんがスライドで挙げていらした「マークアップエンジニアの職能」一覧の中で、わたしにできることはいくつあるのやら...f^^;)、これからのキャリアパスを考える上で自分がどの技能を磨いていくべきか考える良い機会になりました。

2つ目のセッションは実務に即したもので、高速コーディング術を大藤幹さんと大杉充さんのお二人で話してくださいました。まず、紹介されたのは「7つの習慣--成功には原則があった! 」という書籍。実はコレ、わたしの自宅の本棚に長いこと放置されているのです(苦笑)。

主人が誰かに薦められて買ったけれど、ハードカバーで重いので通勤中に読めない→読むのを断念、でも捨てるのも...という感じでとってありました。営業をやっている主人が薦められた本ということで、わたしにはあまり必要ないかと思っていたのですが...ぜひ読んでみたくなりました。本棚の奥から引っ張り出して来ようと思います。

セッションでは、「牧野工房」さんの仕事術というか、「なぜ長引くのか」から「より短い時間でコーディングするには」などのお話、仕事の手順や実際の流れもLIVEで見せていただいて、とても参考になりました。

「牧野工房」さんはコーディングに特化したサービスなので、膨大な量の仕事を数人で分けてさばくためのノウハウをしっかりもっているようですね。わたしはこれまでにそれほど大規模なものには参加したことがないので(そこそこ大きいのはやりましたが、2人だけでコーディングしたのでそれほど混乱も起きず...)、情報の管理術などは今後そういう機会があったら参考にしたいです。

いくつか、参考になったことを自分用に簡単にメモ。

  • シャドーコーディングするといい。
  • FIreworksのスライスで余白などのサイズを測るのが便利(色変えられる)
  • CSSは始めにclassなどを列挙しておくといい。どこから書くかルールを決めておく
  • CSS、urlは「ファイル」ウィンドウからドラッグ&ドロップで入れられる

長くなったので、続きはまた次のエントリーで書こうと思います。

ページ上へ