「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。


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

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

Frontrend(フロントレンド) Vol.2 powered by CyberAgent : ATND

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

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

———-

オープニング

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

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

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

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

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

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Text-shadow

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Text-shadow

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Text-shadowで影を付ける。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Border-radius

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Transition

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Transform2D

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Transform2D
拡大したりします。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

backface-visibility

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

backface-visibility

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

実際のコードの書き方。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Animation(アニメーション)

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Animationの手順。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

アニメーションのCSS3。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

丸にもできます。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

CSS Filter

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

各Webブラウザ。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Canvasの実際の書き方。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

SVGとCanvasの違いについて。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Canvasは、
1.シェイプの描画
2.アニメーション
3.ピクセル操作
4.色合成
などが出来ます。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

円(弧)。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

直線。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

ベジェ曲線。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

塗りの描画。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

線と塗りのスタイル。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

テキストの描画。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Canvasの実際の書き方。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

サンプルデモ。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

ゲームのデモ。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

実演。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

Canvasの可能性。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

CSS3では制限がある。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

これから学ぶ人は、
(1)JavaScriptの基本を学ぶ
(2)HTML5とCSS3をJSで制御する
(3)Canvasでさらなる表現力を得る
という流れが良いと思います。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。
 
 
CA人事部
アプリクリエイター採用Special講座 説明会

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

サイバーエージェント クリエイティブアカデミー
~アプリクリエイター採用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などベストプラクティスが多く公開され始めています。
今回はモダンフロントエンド開発に欠かす事ができないツールとベストプラクティスを紹介します。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

オススメの本。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

こちらもオススメ。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

SMACSS。
http://smacss.com/

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

CSSやJavaScriptについて。

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。
 
 
懇親会

「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。

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

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

———-

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

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

以上となります。

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


"「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。" に3件のコメント

  1. パソコンの電源が無くなっちゃったので、取り急ぎ、報告レポートを公開します。後で更新します! RT 「Frontrend(フロントレンド) Vol.2 powered by CyberAgent」に参加しました。 http://t.co/gp26fU5b #frontrend_ca

  2. 参加した勉強会のレポートを書きました。間違いがありましたら、指摘いただけましたら嬉しいです。 RT「Frontrend(フロントレンド) Vol.2 Powered By CyberAgent」に参加しました。 http://t.co/gp26fU5b #frontrend_ca

  3. 参加した勉強会のレポートを書きました。間違いがありましたら、指摘いただけましたら嬉しいです。 RT「Frontrend(フロントレンド) Vol.2 Powered By CyberAgent」に参加しました。 http://t.co/gp26fU5b #frontrend_ca

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA