CyberAgent」に参加しました。CyberAgent」に参加しました。CyberAgent」に参加しました。2012.08.05ブログどうもどうも。株式会社コミュニティコムの星野邦敏です。CyberAgent」が、2012年8月5日(日曜日)に、渋谷のサイバーエージェント本社のセミナールームであるということで、参加しました。登壇者には、菊池さんや斉藤さんという面識のある人もいました。ATND始まる前に撮影した会場です。始まったら満席でビックリ。100人以上いたでしょうか。HTML5やCSS3といったフロントエンド側のイベントは、やはり最近はとても盛り上がっているんだなと思いました。以下、とってだしレポートです。———-オープニング定期的に開催して、良い人材を発掘&育成するそうです。「Frontrend(フロントレンド)とは、サイバーエージェントのインキュベーション室のフロントエンド情報を定期的に提供するセミナーです。HTML5/CSS3、JavaScriptの最新技術トレンドを惜しみなくお伝えしています。セミナーの名称は「フロントエンド」だと思ったのですが、「フロント」と「トレンド」を掛けているのかな?と思いました。「クリエイティブアカデミー」という仕組みが、サイバーエージェントさんにはあって、講座を毎週土曜日全5回で行いつつ、優秀な人材を採用する、という流れがあるそうです。確かに、人材紹介会社を通したり、採用面接を繰り返すより、発掘育成することで、採用コストも下がる、ということなのかな?と思いました。「インターネット業界で働くクリエイターのスキルアップを支援し、複数回の集中講座を無料にて提供することで、未来のインターネットサービスを創るTOPクリエイターを発掘育成するプログラムです。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-shadowText-shadowText-shadowで影を付ける。Border-radiusBorder-radiusで円を書くこともできます。TransitionTransitionのデモ。industryというWebサイトで、実際の動きを見ることができます。Transform2DTransform2D45度に傾けたりします。Transform2D拡大したりします。マウスオーバーで拡大します。スターウォーズのオープニングの字幕を、CSS3で実現。backface-visibilitybackface-visibilityCSS3を使ったゲーム。クリックすると割れる。実際のコードの書き方。Animation(アニメーション)Animationの手順。今回のデモの素材は、イルカだそうです。アニメーションのCSS3。こんな感じに!写真だと分かりづらいですが、実際のイルカは動いていました。Filter例えば、セピア色や虹色にできます。本のように、ページをめくったりも、CSS3で行えます。CSSは、モジュール化される傾向にあるということです。FlashとCSS3の違い。クリエイティブ松井健(iPhoneアプリデベロッパー)JavaScriptを利用したビジュアル表現できるCanvas。Canvasはゲームやデザイン重視したサイトなどに利用されることが多くなってきています。クリエイティブ」について。iPhoneアプリをリリースされたり、Webスクールをやられている方とのことです。Canvasを知っている人は、参加者の挙手によると、半分以上の参加者が知っていました。Canvasを使ったことのある人は、参加者の2割くらいの人でした。Canvasを例えるなら、プログラミング可能なimg要素とのことです。Canvasの実際の書き方。Canvasは、もともとは、Appleが作ったそうです。Appleのウィジェット用に開発されたとのこと。今は、Canvasは、W3Cのデファクトスタンダードとのことです。Canvasは、多くのブラウザに対応しています。IE6~IE8には対応していないです。SVGとCanvasの違いについて。SVGは、ベクターデータなので、画像を拡大しても表示が綺麗。(地図データなどに最適)Canvasは、ピクセル編集が高速。(アニメーションやゲームに最適)なぜ、Canvasが良いのか?・iPhoneやAndroidを含む広範囲なサポートがある。・CSSの多用は、iPhoneやAndroidには厳しい。Canvasを使って何が出来るのか?Canvasは、1.シェイプの描画2.アニメーション3.ピクセル操作4.色合成などが出来ます。