どうもどうも。こんにちは。株式会社コミュニティコムの星野邦敏です。

「Frontrend（フロントレンド） Vol.2 powered by CyberAgent」が、2012年8月5日（日曜日）に、渋谷のサイバーエージェント本社のセミナールームであるということで、参加しました。
登壇者には、菊池さんや斉藤さんという面識のある人もいました。

Frontrend（フロントレンド） Vol.2 powered by CyberAgent : ATND

始まる前に撮影した会場です。始まったら満席でビックリ。１００人以上いたでしょうか。HTML5やCSS3といったフロントエンド側のイベントは、やはり最近はとても盛り上がっているんだなと思いました。

以下、とってだしレポートです。

———-

オープニング

定期的に開催して、良い人材を発掘＆育成するそうです。

「Frontrend（フロントレンド）とは、サイバーエージェントのインキュベーション室のフロントエンド情報を定期的に提供するセミナーです。HTML5/CSS3、JavaScriptの最新技術トレンドを惜しみなくお伝えしています。」とのことです。

なるほど、てっきりセミナーの名称は「フロントエンド」だと思ったのですが、「フロント」と「トレンド」を掛けているのかな？と思いました。

「クリエイティブアカデミー」という仕組みが、サイバーエージェントさんにはあって、講座を毎週土曜日全５回で行いつつ、優秀な人材を採用する、という流れがあるそうです。

なるほど、確かに、人材紹介会社を通したり、採用面接を繰り返すより、発掘育成することで、採用コストも下がる、ということなのかな？と思いました。

「インターネット業界で働くクリエイターのスキルアップを支援し、複数回の集中講座を無料にて提供することで、未来のインターネットサービスを創るTOPクリエイターを発掘育成するプログラムです。」とのことです。
　
　
クリエイティブ表現で利用できるCSS3と未来
菊池崇（WebDirectionsEast CEO）

Photoshopで作る文字のパターンオーバーレイの表現やアニメーション、アクションとの組み合わせたCSS3の実装をご紹介いたします。
CSS3は今まで重いとされあまり利用しない方向でしたが、今後のCSS3には大きな変化があります。それらの解説を含めご紹介いたします。

まずは、菊池崇さんのプレゼンです。
allWebクリエイター塾で、ご一緒させていただいています。

ASCII.jp：レスポンシブWebデザインとは｜ゼロから始めるレスポンシブWebデザイン入門などの記事も書いているとのことです。

CSS3だけで作られているWebサイトのデモ。

PhotoshopやFireworksを使わずに、CSS3でデザインをする時代が来るかもです。
今まで、PhotoshopやFireworksなどでモックを作って、その後にスライスなどをして、Webサイトにしている。
これからは、PhotoshopやFireworksなどで作る、という流れは無くなるのではないか。口で説明するより、動きを実際に見せる。
CSSが進化することで、紙の外に出てくるのではないか。
モック自体を、CSSで作る。
ブラウザ上でデザインをする。CSSがデザインツールとなる。
電子書籍やゲームも、HTML5やCSS3で作られていくのではないか。

Text-shadow

Text-shadow

Text-shadowで影を付ける。

Border-radius

Border-radiusで円を書くこともできます。

Transition

Transitionのデモ。アニメーションです。

Lift Interactive: Our portfolio of work from over 10 years in the web design industryというWebサイトで、実際の動きを見ることができます。

Transform2D

Transform2D
45度に傾けたりします。

Transform2D
拡大したりします。

Webサイトで実演。マウスオーバーで拡大します。

スターウォーズのオープニングの字幕を、CSS3で実現。

backface-visibility

backface-visibility

CSS3を使ったゲーム。
クリックすると割れる。

実際のコードの書き方。

Animation（アニメーション）

Animationの手順。

今回のデモの素材は、イルカだそうです。

アニメーションのCSS3。

丸にもできます。

こんな感じに！
写真だと分かりづらいですが、実際のイルカは動いていました。

CSS Filter

例えば、セピア色や虹色にできます。

本のように、ページをめくったりも、CSS3で行えます。

CSSは、モジュール化される傾向にあるということです。

各Webブラウザ。

FlashとCSS3の違い。
両方ともベクターデータというのが良い点。

結局、一番重要なのは、コンテンツです。
　
　
Canvas Animation と クリエイティブ
松井健（iPhoneアプリデベロッパー）

JavaScriptを利用したビジュアル表現できるCanvas。
Canvasはゲームやデザイン重視したサイトなどに利用されることが多くなってきています。
Canvasの事例や活用方法、実装方法をご紹介いたします。

「Canvas Animation と クリエイティブ」について。

iPhoneアプリをリリースされたり、Webスクールをやられている方とのことです。

Canvasを知っている人は、参加者の挙手によると、半分以上の参加者が知っていました。

Canvasを使ったことのある人は、参加者の２割くらいの人でした。

Canvasを例えるなら、プログラミング可能なimg要素とのことです。

Canvasの実際の書き方。

Canvasは、もともとは、Appleが作ったそうです。

Appleのウィジェット用に開発されたとのこと。

今は、Canvasは、W3Cのデファクトスタンダードとのことです。

Canvasは、多くのブラウザに対応しています。

IE6～IE8には対応していないです。

SVGとCanvasの違いについて。

SVGは、ベクターデータなので、画像を拡大しても表示が綺麗。（地図データなどに最適）

Canvasは、ピクセル編集が高速。（アニメーションやゲームに最適）

なぜ、Canvasが良いのか？
・iPhoneやAndroidを含む広範囲なサポートがある。
・CSSの多用は、iPhoneやAndroidには厳しい。

Canvasを使って何が出来るのか？

Canvasは、
１．シェイプの描画
２．アニメーション
３．ピクセル操作
４．色合成
などが出来ます。

シェイプの描画の例。
矩形。

円（弧）。

直線。

ベジェ曲線。

塗りの描画。

線と塗りのスタイル。

テキストの描画。

アニメーションも、もちろん出来ます。

Canvasの実際の書き方。

Canvasでアニメーションのソースコードを書く。

ソースコードの説明も詳細にしていただきました。

ドラッグ＆ドロップの度に、カラーの線を書くことのできる、サンプルデモを見せてもらいました。

サンプルデモで、円が落ちるデモも見せてもらいました。

Canvasは、色の合成もできます。

サンプルデモ。

Canvasで、出来る他のこととして、ゲームも作れます。

ゲームのデモ。

sigma.js
http://sigmajs.org/
sigma.jsは、HTMLのcanvas要素を使用して、グラフを描画するためのオープンソースの軽量JavaScriptライブラリです。

シンセサイザーのように、音楽が出るアプリも作れます。

絵が描けるツールも、Canvasで作れます。
http://mudcu.be/sketchpad/

実演。

短編アニメーションも作れて、他のユーザーとのコラボレーションできるツールも作れます。

Canvasの可能性。

CSS3では制限がある。

Canvasでは、リアルタイムやアニメーションも実現可能です。

この人のブログが参考になります。
CreativeJS | The very best of creative JavaScript and HTML5

Canvasでは、高速化が出来ます。

スマートフォンでも、高速化で実現できます。

CanvasパフォーマンスのTipsです。

これから学ぶ人は、
（１）JavaScriptの基本を学ぶ
（２）HTML5とCSS3をJSで制御する
（３）Canvasでさらなる表現力を得る
という流れが良いと思います。

　
　
CA人事部
アプリクリエイター採用Special講座 説明会

クリエイティブアカデミーのプログラムでは
若手クリエイターの技術力向上支援を掲げ、無料開講いたします
休日開講により、現在の仕事を続けながらの通学が可能です
より専門的な知識や高度な技術を学ぶことが可能なプログラムです
最終課題および面談に合格時にされた場合、弊社の選考ステップの一部をスキップできる特別選考パスを付与します。

このような講座の趣旨と、人事採用の説明がありました。

色々なお話がありましたが、個人的には、ビジネスコンテストだけでなく、モックを実際に作って動くものを見せることによるコンテストがあると知って、なるほど、と思いました。

「Webアプリをツクリだせる、クリエイティブ力と発展力」を学ぶ、とのことです。

サイバーエージェントのクリエイティブアカデミーのカリキュラムだそうです。フロントエンドの技術がギッシリ身に付きそうですね。

サイバーエージェント　クリエイティブアカデミー
～アプリクリエイター採用Special講座開催日程（HTML5/CSS3 JavaScript）～
2012年8月25日(土)～2012年9月22日(土)　全5回
8月25日(土) 「HTML/CSSの基本」
9月1日(土) 「JavaScriptの基本とインタラクションを実現するための知識」
9月8日(土) 「HTML5 API / Canvas Animation」
9月15日(土) 「正しいHTML5マークアップとブラウザ対応について学ぶ」
9月22日(祝土) 「アニメーションを中心にしたCSS3での表現力の幅を広げる」

クリエイティブアカデミー開催 ～アプリクリエイター採用Special講座（HTML5/CSS3 JavaScript）～| 株式会社サイバーエージェント

とのことです。

無料の講座を開きつつ、人材の発掘と育成をする、というのは、人材採用のコストも結果的に下がって、かつ、業界も盛り上がる、ということで、良いアイデアだなと思いました。
　
　
モバイルウェブ開発ベストプラクティス
斎藤祐也（サイバーエージェント）

モバイルウェブ開発が本格化するとともにモダンブラウザも台頭しはじめてきました。それと時を同じくしてBackbone.jsなどのJavaScript MVCライブラリやSaSSなどのCSSプリプロセッサなど様々な開発ツールやHTML5 Boilerplateなどベストプラクティスが多く公開され始めています。
今回はモダンフロントエンド開発に欠かす事ができないツールとベストプラクティスを紹介します。

斎藤さんのプレゼンです。

斎藤さんのブログ
CSS Radar | Mini Books For Front End Developers

知っているということと
知らないということには
大きな差がある。

オススメの本。

こちらもオススメ。

JavaScriptのMVC。
Backbone.jsについて。
http://backbonejs.org/
とはいえ、他のMVCの紹介もしています。
Ember.jsについて。
レポート：「第31回 HTML5とか勉強会 ～JavaScriptによるMVCフレームワーク」活動報告｜gihyo.jp … 技術評論社

菊池さんもお話されていた通り、モジュールという概念。

Require.jsは重いので、モバイル開発ではalmond.jsがオススメ。
http://requirejs.org/
https://github.com/jrburke/almond

CSSのフレームワークについて。
まずは、お馴染みの、Twitter Bootstrap。
http://twitter.github.com/bootstrap/

同じく、CSSのフレームワークとして、Foundation。
当初からレスポンシブWebデザインだった。
http://foundation.zurb.com/

Skeleton。
http://www.getskeleton.com/

SMACSS。
http://smacss.com/

CSSでの処理について。
LESS
http://lesscss.org/
Sass
http://sass-lang.com/
などの紹介。

CSSを書くためのツールの紹介。

CSSを書くためのツールの紹介。

CSSやJavaScriptについて。

例えば、現状では、こういう実装が良いのではないかという提案。

http://html5boilerplate.com/
日本語もあります。
http://jp.html5boilerplate.com/

　
　
懇親会

軽食として、ピザやビールやソフトドリンクを出していただきました。
無料での勉強会の上、懇親会も無料ということで良いですね！30分くらいの短い懇親会でしたが、日曜日の夕方ということもあって、そのくらいで良いのかもしれないですね。

勉強会参加者の半分くらいが懇親会にも参加しているように思いました。

———-

「Frontrend（フロントレンド） Vol.2 powered by CyberAgent」を聞いた直後のメモを公開していますので、撮った写真やスライドを見直して、事後的に記事を追加編集することもあるかもしれません。また、もし間違いなどありましたら、ご指摘いただけましたら、嬉しいです。

Twitterのハッシュタグは、#frontrend_caということで、ハッシュタグを追えば、他の方のつぶやきも見れて良いかもしれないです。

以上となります。

ありがとうございました！