第27回目となる本勉強会は，3月13日にニフティさんに会場をお借りして開催しました。

今回のテーマは「リッチクライアントをデザインする」⁠。HTML5を用いたインタラクティブなウェブサイトのデザイン方法や，実際に行った経験のお話などを講演していただきました。

本稿では，今回のイベントについてレポートします。

HTML5インタラクティブデザイン - デザイナとデベロッパによる生対談

最初は，C.A.Mobileの白石俊平さんと，同じくC.A.Mobileの稲田真帆さんによる，実際にウェブサイトを開発したときの話を対談形式で講演していただきました。

そのウェブサイトは，マイクロソフトから依頼されたデブサミ2012に展示するものでした。依頼された内容は，Internet Explorer 10で追加されるHTML5のAPIを利用したサイトを構築するというものだったそうです。最終的には以下の3つのウェブサイトを構築されたと話します。

WebSocketを利用したサイト

http://ds-websocket.qw.to/

IndexedDBを利用したサイト

http://ds-indexeddb.qw.to/

File APIを利用したサイト

http://ds-fileapi.qw.to/

依頼内容がAPIを利用したサイトということなので，サイトデザインは何のAPIをどう利用するかというところから始まったそうです。そのため，最初のミーティングでは，デザイナの方がAPIで何ができるのか知らず，エンジニアだけで盛り上がっていたという状態が起こってしまったと言います。また他のところでも，エンジニアとデザイナの考え方の違いで相違が起きていたそうです。稲田さんは「デザインするとき，エンジニアは裏から考える，デザイナは表から考える」と述べていました。

まとめとして，お互いの領域について最初にしっかり話しておくべきだったと締めていました。他にも開発時のエピソードや，今思えばこうすればよかったというような事柄は講演動画をご覧ください。講演資料はこちらになります。

less for Web Designer

次に，サイバーエージェントの斉藤裕也さんにCSS拡張メタ言語であるLESSについて講演いただきました。

LESSとは，CSSに変数やミックスイン等の機能を追加した言語です。利用するウェブページにless.jsをインポートすればLESS形式のまま利用することもできますが，CSS形式に変換するアプリがあるので，それを通してから利用することもできるそうです。

LESSは「Blueprint」や「960.gs」のようなCSSフレームワークとは異なり，CSS単体での拡張となります。また，同じような拡張メタ言語として，「⁠SCSS（Sass）⁠」というのがありますが，このSCSSというのはRubyを利用してCSS形式に変換する必要があります。一方LESSは，node.js製なのでJavaScriptが動く環境ならば変換せずとも利用することが可能という違いがあります。

他の違いとして，SCSSの方が高機能なのですが，LESSの方がCSSに近い記法が用いられているため，覚えやすいとのことです。

以下の図は講演資料内で上がっていたLESS記法の例です。

LESSの簡単な説明の後，LESSを利用したBoilerplaitやBootstrapと呼ばれるCSSライブラリについても説明いただきました。BootstrapやBoilerplaitとは，自分でよく使うCSSなどをまとめたものだそうです。これらは公開されているものもあり，有名なところでTwitter社が提供しているBootstrapや，320 and upのBoilerplaitなどがあります。また，講演者の斉藤さん自身が公開しているBoilerplaitもあり，コラボレーター募集中だそうです。リンクはこちらです。

他にも，LESSについての説明や，Boilerplaitの他の例，プロトタイピングへの利用についてなど多くの内容がありますので，講演資料や講演動画をご覧ください。