Submit Search
Upload
12.09.08 明星和楽2012 KLabハンズオンセッション
•
Download as KEY, PDF
•
4 likes
•
1,763 views
Kei Nakazawa
Follow
Flash LiteのアニメーションをJS+CSSに書き換えてみるハンズオンです。変換技術の紹介もいくつかしています。
Read less
Read more
Report
Share
Report
Share
1 of 52
Download now
Recommended
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
(だいたい)新卒エンジニア向け技術交流会 vol.3 での発表内容です
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
SIROK技術勉強会 #1 「Reactってなんだ?」
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
DIST.2「Sass Again」発表資料
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
Data Engineering at VOYAGE GROUP #jawsdays
Data Engineering at VOYAGE GROUP #jawsdays
Kenta Suzuki
#jawsdays 2015での発表スライドです。 http://jawsdays2015.jaws-ug.jp/speaker/suzuki/
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
Recommended
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
(だいたい)新卒エンジニア向け技術交流会 vol.3 での発表内容です
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
SIROK技術勉強会 #1 「Reactってなんだ?」
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
Sass実践編+Compass入門
Sass実践編+Compass入門
Yoshiya OKI
DIST.2「Sass Again」発表資料
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
Data Engineering at VOYAGE GROUP #jawsdays
Data Engineering at VOYAGE GROUP #jawsdays
Kenta Suzuki
#jawsdays 2015での発表スライドです。 http://jawsdays2015.jaws-ug.jp/speaker/suzuki/
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
HTML5fun×AOITコラボイベント「現場で使えるライブラリとJavaScriptの基礎」の担当セッションで使用したスライド
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
Kazuhiro Kosaka
A Study about the differences between compiled byte codes depending on the text formats of SWF version 4 and how to draw them on JavaScript
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
2015年度 GX/MF エンジニア合同新人研修 3日目
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
YukiOniki
モダンJavaScriptフレームワークで技術的負債を作らないために
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
Flux の紹介です
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
Kousuke Ishikawa
「AWS Lambdaを中心に、サーバレスアーキテクチャを勉強する会 」の発表資料です。 https://connpass.com/event/60433/
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
http://connpass.com/event/6910/ で発表した資料です。 http://ofsilvers.hatenablog.com/entry/ten1club-1 でブログ書いてるよ。
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
※一部、ネット掲載のためテキスト・ページを省略していますのでご了承ください。
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
Kondo Hitoshi
第3のビール的なジャンルの圧縮難読化ツール作りに挑戦してみました
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
フロントエンド勉強会01資料
React.js + Flux
React.js + Flux
dsuke Takaoka
天下一クライアントサイドJS MV*フレームワーク武道会でのLT資料
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
WordBench神戸のレスポンシブ座談会でLTさせていただた資料です。 低コスト案件においてレスポンシブWebデザインに取り組むときの、考え方、取り組み方などについて、ひとつの考えをまとめてました。 内容的にはやや偏りがありますが、ディレクションの一つの方向性として、参考になればと思ってのお話です。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
jQueryを中心としてJavaScriptについて書いてます。
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Mori Shingo
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
Kasumi Morita
HTML5NAGOYA#14のテーマ「フロントエンド入門」でSVGについて発表した内容です。 スライドでは、SVGのいいところをご紹介しながら、使う前に気をつけたいところをご紹介しています。 SVGでつまずいてしまう人の役に立てたらいいなと思います。
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
2015.12.16 JS オジサン #6 二日目
13.11.02 inside playground(抄)
13.11.02 inside playground(抄)
Kei Nakazawa
キャバァーン! サツバツエアアイオー弐〇壱弐
キャバァーン! サツバツエアアイオー弐〇壱弐
Kei Nakazawa
http://atnd.org/events/28303
More Related Content
What's hot
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
HTML5fun×AOITコラボイベント「現場で使えるライブラリとJavaScriptの基礎」の担当セッションで使用したスライド
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
Kazuhiro Kosaka
A Study about the differences between compiled byte codes depending on the text formats of SWF version 4 and how to draw them on JavaScript
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
2013年6月8日に大阪で開催された「第7回HTML5など勉強会」で使ったプレゼン資料です。
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
2015年度 GX/MF エンジニア合同新人研修 3日目
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
YukiOniki
モダンJavaScriptフレームワークで技術的負債を作らないために
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
Flux の紹介です
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
Kousuke Ishikawa
「AWS Lambdaを中心に、サーバレスアーキテクチャを勉強する会 」の発表資料です。 https://connpass.com/event/60433/
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
http://connpass.com/event/6910/ で発表した資料です。 http://ofsilvers.hatenablog.com/entry/ten1club-1 でブログ書いてるよ。
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
※一部、ネット掲載のためテキスト・ページを省略していますのでご了承ください。
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
Kondo Hitoshi
第3のビール的なジャンルの圧縮難読化ツール作りに挑戦してみました
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
フロントエンド勉強会01資料
React.js + Flux
React.js + Flux
dsuke Takaoka
天下一クライアントサイドJS MV*フレームワーク武道会でのLT資料
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
WordBench神戸のレスポンシブ座談会でLTさせていただた資料です。 低コスト案件においてレスポンシブWebデザインに取り組むときの、考え方、取り組み方などについて、ひとつの考えをまとめてました。 内容的にはやや偏りがありますが、ディレクションの一つの方向性として、参考になればと思ってのお話です。
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
jQueryを中心としてJavaScriptについて書いてます。
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Mori Shingo
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
Kasumi Morita
HTML5NAGOYA#14のテーマ「フロントエンド入門」でSVGについて発表した内容です。 スライドでは、SVGのいいところをご紹介しながら、使う前に気をつけたいところをご紹介しています。 SVGでつまずいてしまう人の役に立てたらいいなと思います。
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
2015.12.16 JS オジサン #6 二日目
What's hot
(20)
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
SWFバージョン4においてのテキスト形式によるコンパイル結果の違い及びJavaScriptでのその描画方法に関する考察
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
JavaScript 研修
JavaScript 研修
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
LambdaでHello, World(2017/07/21 サーバレスアーキテクチャ勉強会)
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
React.js + Flux
React.js + Flux
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
使う前に知っておきたいSVGのこと
使う前に知っておきたいSVGのこと
React+fluxを導入した話
React+fluxを導入した話
Viewers also liked
13.11.02 inside playground(抄)
13.11.02 inside playground(抄)
Kei Nakazawa
キャバァーン! サツバツエアアイオー弐〇壱弐
キャバァーン! サツバツエアアイオー弐〇壱弐
Kei Nakazawa
http://atnd.org/events/28303
12.08.25 tab api hackathon
12.08.25 tab api hackathon
Kei Nakazawa
12.04.22 勉強会イントロ
12.04.22 勉強会イントロ
Kei Nakazawa
第1回Android開発者のための初めてのiPhoneアプリハンズオン勉強会 #andiphone イントロ資料
12.11.12 めいめいについて考えること
12.11.12 めいめいについて考えること
Kei Nakazawa
http://www.zusaar.com/event/438105 これ用
C#からSORACOMを管理できるようにした話(SoraCommonNet)
C#からSORACOMを管理できるようにした話(SoraCommonNet)
Kei Nakazawa
ソラコム Developers Conference #0での発表資料です
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
Kei Nakazawa
KLabのエンジニアがフリーダムに取り組んできたAndroid関連技術をゆるーく紹介します
15.05.17 ゆるふわRe:VIEW'erの近況
15.05.17 ゆるふわRe:VIEW'erの近況
Kei Nakazawa
Re:VIEW developers meeting #2でのLT資料です
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
Kei Nakazawa
13.08.10 7行110bytesで構文を拡張 出来るReVIEWの話
13.08.10 7行110bytesで構文を拡張 出来るReVIEWの話
Kei Nakazawa
2013/08/10の http://zusaar.com/event/977003 「ReVIEWによる書籍制作フローを勉強する会」で話した内容です。 出落ちすぎるので資料公開は後にしました(・ω<)
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
Kei Nakazawa
http://slideshare.net/KeiNakazawa/web-pnaclasmjs-web の続きです。
12.03.17 第1回NFC勉強会資料
12.03.17 第1回NFC勉強会資料
Kei Nakazawa
第1回NFC勉強会での発表資料です。 軽くNFCを取り巻く諸々の要素をまとめ、サービス展開時のセキュリティ面を考えてみました。
この3D全盛時代にもう一度考えたい2Dゲームのこと
この3D全盛時代にもう一度考えたい2Dゲームのこと
Kei Nakazawa
Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること
Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること
Kei Nakazawa
社内ミーティングでの発表用に作成した資料です
15.06.27 実録 ソフトウェア開発者が FPGAを独習した最初の3歩@RTLを語る会(9)
15.06.27 実録 ソフトウェア開発者が FPGAを独習した最初の3歩@RTLを語る会(9)
Kei Nakazawa
http://www.zusaar.com/event/14047005 RTLを語る会(9)でのLT資料です
13.11.12 Tech Hills #7 Playground - introduction
13.11.12 Tech Hills #7 Playground - introduction
Kei Nakazawa
http://atnd.org/events/44622 での講演内容(イントロ部分)です
Backand Presentation
Backand Presentation
Backand Cohen
Backand is the fastest and easiest way to build and run hosted AngularJS-based admins using any Amazon RDS cloud database.
13.11.02 playgroundthon環境構築
13.11.02 playgroundthon環境構築
Kei Nakazawa
KiCadで雑に基板を作る チュートリアル
KiCadで雑に基板を作る チュートリアル
裕士 常田
新しいバージョン(Ver6.x 予習版)はこちら https://speakerdeck.com/tokitahiroshi/kicaddeza-niji-ban-wozuo-rutiyutoriaru-ver6-dot-x-yu-xi-ban KiCadで適当な基板を作って基板製造業者に 発注するためのチュートリアルです。 短めのスライドにする予定でしたが、 一通り必要なモノ入れたら結構なボリュームになりました。
Viewers also liked
(19)
13.11.02 inside playground(抄)
13.11.02 inside playground(抄)
キャバァーン! サツバツエアアイオー弐〇壱弐
キャバァーン! サツバツエアアイオー弐〇壱弐
12.08.25 tab api hackathon
12.08.25 tab api hackathon
12.04.22 勉強会イントロ
12.04.22 勉強会イントロ
12.11.12 めいめいについて考えること
12.11.12 めいめいについて考えること
C#からSORACOMを管理できるようにした話(SoraCommonNet)
C#からSORACOMを管理できるようにした話(SoraCommonNet)
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
15.05.17 ゆるふわRe:VIEW'erの近況
15.05.17 ゆるふわRe:VIEW'erの近況
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
Android好きがWindows Phone開発を始めてみた / 12.04.23 Bar Windows Phone LT
13.08.10 7行110bytesで構文を拡張 出来るReVIEWの話
13.08.10 7行110bytesで構文を拡張 出来るReVIEWの話
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
UnrealEngineが5日間でasm.js化できたと聞いた俺たちは…
12.03.17 第1回NFC勉強会資料
12.03.17 第1回NFC勉強会資料
この3D全盛時代にもう一度考えたい2Dゲームのこと
この3D全盛時代にもう一度考えたい2Dゲームのこと
Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること
Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること
15.06.27 実録 ソフトウェア開発者が FPGAを独習した最初の3歩@RTLを語る会(9)
15.06.27 実録 ソフトウェア開発者が FPGAを独習した最初の3歩@RTLを語る会(9)
13.11.12 Tech Hills #7 Playground - introduction
13.11.12 Tech Hills #7 Playground - introduction
Backand Presentation
Backand Presentation
13.11.02 playgroundthon環境構築
13.11.02 playgroundthon環境構築
KiCadで雑に基板を作る チュートリアル
KiCadで雑に基板を作る チュートリアル
Similar to 12.09.08 明星和楽2012 KLabハンズオンセッション
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
「9th Knock!」 第9回Knock! Knock! 勉強会(2012年10月12日、B-nest静岡市産学交流センターにて) http://knock3.hamnaly.com/vol09/
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
本来JavaScriptにコンパイルなどのビルドは必須ではありませんが、 いまどきのJavaScriptアプリではビルドが重要です。 代謝の激しいフロントエンドを反映し、JSビルドの世界も盛り上がっています。 このチャートはビルドの現状を追うことでJSの現状をとらえることを目的にしています。
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
HTML5と関連する仕様について、その目的や中身について簡単に紹介しています。 2010年2月19日に開催されたDevelopers Summit 2010で講演したときのスライドです。
Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
https://www.facebook.com/events/274780085953298/
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
HTML5 Conrerence 2012
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
最近実務で実戦投入したフロント技術について、導入した際のメリット・デメリットを記しました。 ちなみにその実務というのは、会社のプロダクト「LIGBLOG(liginc.co.jp)」のリニューアルです。 第5回HTML5minutes登壇時の資料です。
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
「12th Knock!」 第12回Knock! Knock! 勉強会(2013年 2月 7日、B-nest静岡市産学交流センターにて) レスポンシブWebデザイン【発展編】は下記URLです http://www.slideshare.net/yabecchy/12th-knock-yaberwd2
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.js
Hiroaki Okubo
2014/05/24 (土) 13:00 - 17:00 グランフロントでフロントエンドエンジニアの為の勉強会を開催します! http://grand-front-end-osaka.doorkeeper.jp/events/11330 の発表資料です。
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
https://atnd.org/events/82659
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
Takashi Endo
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
「12th Knock!」 第12回Knock! Knock! 勉強会(2013年 2月 7日、B-nest静岡市産学交流センターにて) レスポンシブWebデザイン【基礎編】は下記URLです http://www.slideshare.net/yabecchy/12th-knock-yaberwd1
Synquery ja
Synquery ja
EastCloud
Sass less
Sass less
Net Kanayan
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
第2回ExtJSユーザー事例紹介
第2回ExtJSユーザー事例紹介
Akiyuki Nomura
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
Osamu Shimoda
2013/3/21に行われた 豆ナイトPresents「HTML5ナイト~その導入から活用まで~」 の発表資料です。
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
「14th Knock!」 第14回Knock! Knock! 勉強会(2013年 4月 19日、B-nest静岡市産学交流センターにて) http://knock3.hamnaly.com/vol14/
Similar to 12.09.08 明星和楽2012 KLabハンズオンセッション
(20)
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
HTML5 & The Web Platform
HTML5 & The Web Platform
Canvas勉強会
Canvas勉強会
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.js
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Synquery ja
Synquery ja
Sass less
Sass less
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
第2回ExtJSユーザー事例紹介
第2回ExtJSユーザー事例紹介
ゲームだけじゃないHTML5
ゲームだけじゃないHTML5
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
More from Kei Nakazawa
ScalaでASICやFPGA用の回路を設計するChisel
ScalaでASICやFPGA用の回路を設計するChisel
Kei Nakazawa
Scala関西Summit 2017の懇親会LT資料です
11.12.21 Lecturedroid 02
11.12.21 Lecturedroid 02
Kei Nakazawa
ニコ生用資料です
11.11.01 非公式懇親会LT(せきとばったー)
11.11.01 非公式懇親会LT(せきとばったー)
Kei Nakazawa
資料公開するの忘れてたけど @sekitoba さんがロングランを決めるのを見て公開。 基本的に内輪向けかつLT用資料なので、スライドだけ読んでもイミフかも
11.11.22 かなり役立つ競技プログラミング
11.11.22 かなり役立つ競技プログラミング
Kei Nakazawa
ACM-ICPCのエクスカーション @ KLabで喋った内容です。 ほんの一部、業務に深く関わる部分は省略していますが基本そのまんまです。
11.05.21 Google I/O報告会 in 東京 なかざわ資料
11.05.21 Google I/O報告会 in 東京 なかざわ資料
Kei Nakazawa
ABC2011W 翻訳プロジェクト@muo_jp
ABC2011W 翻訳プロジェクト@muo_jp
Kei Nakazawa
ABC2011 Winterで喋った翻訳プロジェクトのプレゼン資料です。
More from Kei Nakazawa
(6)
ScalaでASICやFPGA用の回路を設計するChisel
ScalaでASICやFPGA用の回路を設計するChisel
11.12.21 Lecturedroid 02
11.12.21 Lecturedroid 02
11.11.01 非公式懇親会LT(せきとばったー)
11.11.01 非公式懇親会LT(せきとばったー)
11.11.22 かなり役立つ競技プログラミング
11.11.22 かなり役立つ競技プログラミング
11.05.21 Google I/O報告会 in 東京 なかざわ資料
11.05.21 Google I/O報告会 in 東京 なかざわ資料
ABC2011W 翻訳プロジェクト@muo_jp
ABC2011W 翻訳プロジェクト@muo_jp
12.09.08 明星和楽2012 KLabハンズオンセッション
1.
KLab JS+CSS ワークショプ -
Flash LiteアニメをJS+CSSでスマフォ向けに - KLab株式会社 開発制作本部 / 中澤 慧(@muo_jp)
2.
自己紹介 なかざわ けい (中澤
慧 / twitter: @muo_jp) 所属: KLab株式会社 開発制作本部 Android好き Google公式ドキュメントの日本語訳とかやってました プログラミング言語はC#好き 興味範囲広め、結構プロトタイプ作ったりします 実は、専門は経営学です blog: http://muo.jp/
3.
セッションの流れ Flash Liteファイルをスマフォ対応する手段の紹介(15分) 変換にあたって考えること・やること・気をつけるこ と(15分) 休憩・質疑応答(5分) 実際に書いてみる(45分) まとめ(5分) 質疑応答(5分)
4.
大前提 フィーチャーフォン向けにFlash Liteで作られてきたものをリ ライトする 30/60fpsを目指さない 諸々の実装バグが解消してきたらこのあたりを目指せる
ようになる CPUをブン回してどうにかなる範囲(6/12fpsあたり)を目指す 元版を大幅に超えたリッチな表現を目指さない ベクター画像にこだわり過ぎない
5.
こんなのが出来ます(要時間) ターン制ロボット格闘ゲーム 構成要素 体力ゲージ 画像のクリップ域に対する半透明
マスク (赤みがかった処理) 導入部分のスライドイン、 スライドアウト ビリビリエフェクト 全画面エフェクト
6.
Flash Liteファイルを スマフォ対応する手段の紹介
7.
系統 JavaScriptで実装されたFlashLite(swf)エンジンで直接実行 したり、前処理した独自ファイルを自前のエンジンに 食わせて実行したりするもの => 変換実行系 JavaScript +
CSS/canvasへの手動変換
8.
自動変換系
9.
自動変換系 / ExGame Flash
Lite 1.1をターゲットに据えたもの(2.0非対応) 多くのフィーチャーフォン向け演出Flashは1.1であった ので、実際十分なケースが多い 元ブロードテイル社のプロダクト( http://dena.jp/press/ 2011/06/dena-21.php ) mobageに提供されているゲームで結構使われている 中の人による紹介スライド( http://www.slideshare.net/ sousk/exgame ) mobage以外での利用は認められていない
10.
自動変換系 / Shumway MozillaによるOSS 割と期待株 社内で試してみた人曰く「結構ちゃんと動くので多少 手を入れれば良さそう」
11.
自動変換系 / Google
Swiffy https://www.google.com/doubleclick/studio/swiffy/ 日本語(MS932)の取り扱いに難がある 変換部分自体は非公開であるため、問題があっても手 を入れるのが非常に面倒
12.
自動変換系 / FlashJS http://accelart.jp/products/flashjs.html 株式会社アクセラートジャパンのプロダクト 未評価
13.
自動変換系 / SWF
Decompiler(HTML5 Exporter) http://www.sothink.com/ swfファイル解析、素材抜き出しを行うツールのオマケ 機能 ごっそりと構造をJSONにダンプして、それを自前のプ レイヤーで再生する形 重すぎる上にシェイプが正しく描画されない箇所が多 く、完成度低い
14.
手動変換
15.
基本構造 画面表示の管理、ゲームロジック、アニメーション管 理は全てJavaScriptで行う 画面描画には主に2つの方法がある CSSを利用する /
canvasを利用する 描画要素管理 描画要素管理 タイミング管理 タイミング管理 データ処理 データ処理 ネットワーク 画面 ネットワーク 画面 通信 描画 通信 描画 JavaScript CSS JavaScript canvas
16.
canvas vs CSS CSS:
画面上に要素を配置し、キーフレーム指定等を行なってア ニメーションさせる canvas: 画面上にフリー描画エリアを作り、その上に任意の要素 を描画する(アニメーションは自前管理) IE系ではCSSアニメーションのGPUアクセラレーションが推奨 されている iOS5以降、canvasでの描画にGPUアクセラレーションが効くよ うになっている 幅広い端末で30/60fps出すのは厳しい。が、12fpsならなんとか
17.
CSSってこんなの出来るんでしょ?
出典: http://rei.idv.tw/sample/mio.html
18.
ソース見てみなよ CSS(抜粋) skew(-39deg,-39deg); -o-transform: skew(-39deg,-39deg);
- webkit-transform: skew(-39deg,-39deg); border-radius: 15px 0 0 / 15px 0 0; width: 220px; height: 500px; left: 34px; top: 404px; -webkit-animation-name: hb1; -ms- animation-name: hb1; -moz-animation-name: hb1; -o- animation-name: hb1; } div#hear_back div.hb2! { -ms-transform: rotate(-57deg); - moz-transform: rotate(-57deg); -o-transform: rotate(-57deg); -webkit-transform: rotate(-57deg); width: 200px; height: 65px; left: 50px; top: 392px; } div#hear_back div.hb3! { width: 35px; height: 120px; left: 137px; top: 245px; } div#hear_back div.hb4! { -ms-transform: rotate(50deg); - moz-transform: rotate(50deg); -o-transform: rotate(50deg); -webkit-transform: rotate(50deg); width: 14px; height: 50px; left: 143px; top: 280px; }
19.
CSSでのシェイプ描画の実際 作れるのは四角、円、楕円(枠指定によっては卵型のよう な非対称の楕円も) 任意の多角形とか無い じゃあどうやってるのか borderで頑張る(凸だけでなく透明背景で凹も表現可能)
before、afterで頑張る(同じ場所に最大3つのシェイプを 重ねてひとくくりにすることが出来る) ある種の芸。例: six-point-star ( http://css3shapes.com/ )
20.
CSSでのシェイプ描画例 このへんとか見ればより分かりやすい http://www.russellheimlich.com/blog/pure-css-shapes- triangles-delicious-logo-and-hearts/ (軽くChrome開発ツールでデモ) これは辛い
21.
これは辛い。
22.
Flashでよくあるシェイプ
23.
やめてください死んでしまいます
24.
ということで、こうする ベクターのシェイプは、適宜ラスタライズして扱う 特定のシェイプへのマスク処理は、mask-imageを使う Android 4.0以上(4.0, 4.1)の標準ブラウザで、mask-image とtransformを併用するとマスクが効かないというまさか のエンバグ(ChromeはOK) →マスク利用部分については、 自前でアニメーション制御 参考:
http://jsdo.it/mattari_panda/qePP
25.
目指すバランス コーディング量 => JS比率かなり高め、CSS比率かなり低め アニメーション定義 => なるべくCSSのクラスとして事前定義 (前述のAndroidでの問題があるため、今のところ マスクと組み合わせるなどの乱用は禁物) 実行時間 =>
JS比率低め、CSSベースのアニメーション比率高め (なるべくネイティブの高速なライブラリへ処理を 任せられるようにしてトータルの性能を上げる)
26.
手動変換の利点 出来合いの自動変換ツールでうまく変換出来ないもの でも動かせる 表現をリッチ化/簡略化出来る 独自の最適化を加えることが出来る ロジックを自由に記載出来る
27.
手動変換の欠点 既存のオーサリングツールを利用出来る余地が少ない プログラマがゴリゴリ書かなきゃいけない 何か変更を加える際にも、当然プログラマの手(少な くとも協力)が必要になる レガシーなものと付き合っていく上で必要なコスト とも言えるけど、結構しんどい
28.
補足: CSSアニメーションとcanvasア
ニメーションの今後 JS実行コストとアニメーション描画コスト、どちらが支配的か 従来は描画コスト>JSでのフレーム制御コスト 描画アクセラレーションが十分に効いてくるとJS制御部分がネックになる CSSアニメーションを利用すると、JSでの制御頻度をだいぶ減らせる FlashでActionScriptベースのアニメーションよりもプリセットアニメーショ ンのほうが高速なのと同じ 一定のところまではどちらを使っても良い 。限界性能はキーフレームア ニメーションの利用と最適化次第 描画にDOM操作が不要な分、canvasのほうが高速となる可能性は十分ある
29.
補足: 手動変換支援ツール /
Adobe Edge Animate http://labs.adobe.com/technologies/edge/ HTML5なアニメーションのオーサリングツール 最近Preview 7がリリースされた Flash(オーサリングツール)に近い完成度まで到達するこ とが出来れば、と期待高まる 時間があれば後ほどもう少し詳しく紹介
30.
変換にあたって 考えること・やること・気をつけること ターゲットユーザの読みを立てる どんなレイヤー構造になってるのか、というのをじっくり見て調べる 必要なエフェクトを洗い出す 元々シェイプとして作られているものを、どこまでCSSで描き何をPNGで書き だすのか、を決める HD版的なものを用意するかどうか検討する 画面タップへの対応をどのように処理するか考える 素材を一通り切り出す 素材のスプライトが可能か検討する JS+CSSでひたすらリライトする
31.
ターゲットユーザの読みを立てる Androidのバージョン、iOSのバージョン、どういった端 末で動作検証すれば効果的に多くのユーザをカバー出 来るか アクセスログの解析などをもとにする 今後の端末開発・発売動向と、想定ユーザの動向を一 定は予測しておく(外れても泣かない程度の依存度に) 当然、スマートフォン向けの表現を強化することで ユーザ動向が変わることも想像はしておく
32.
どんなレイヤー構造になってるの か、というのをじっくり見て調べる ここ大事。後で漏れに気づくと追加対応が大変な場合 もそこそこある。 後から変更される場合もあるだろうから、一定は仕方 ないんだけど それでもここに力入れとくのがいい
33.
必要なエフェクトを洗い出す(例) 前景へのベタ塗りエフェクト(アルファ付き) 要素の斜め方向へのスライドアウト 要素の横方向へのスライドイン 背景のアルファを変化させつつ拡大 複数の要素をまとめてアニメーション 指定画像の前に同画像をマスクとして指定色(アルファあり)ベタ塗り 事前定義のアニメーション要素をコピー生成し指定位置で再生 任意のテキストを表示(自動折り返し、余分省略等)
34.
元々シェイプとして作られているものを、どこま でCSSで描き何をPNGで書き出すのか、を決める 先に紹介したように、単純なシェイプ以外はCSSのみで 描くのには向かない 全体の容量と見栄えのバランスで、簡略化可能なもの は簡略化を ベクターにこだわり過ぎない ベクターデータを持つとしても、サーバ側で数パ ターン生成すれば良い場合が大半
ブラウザでの描画時ギリギリまでベクターで持つ必
35.
HD版的なものを用意するかどうか
検討する 高解像度版の素材を入手出来るか? 高解像度化することによる速度低下(ロード/描画)と、 見栄えとの兼ね合いで判断
36.
画面タップへの対応をどのように
処理するか考える フィーチャーフォン向けのものをスマフォ対応する場 合、↑↓キーやセンターキーを利用していた部分を画面 中段あたりに仮想キーとして用意するのが無難 スワイプとか使ってみたくなっても、安易な変更は使 いづらさを生む。パッと見で分かるUIを維持するのは 重要 描画エリアの一部に細かくタップエリアを張るより は、画面の大部分を押すとセンターキー動作と同様と するのが分かりやすいケースも
37.
素材を一通り切り出す どうしても手に入らないものは、目コピやトレースで 作り直す(大体はswfさえあればなんとかなるかと) 画像を8bit PNGなどに書き出してみてトータルサイズを 検討する 静的要素についてはアプリケーションキャッシュの利 用を検討する(フィーチャーフォン向けFlashLiteだと、通 常アニメーションロジックも含めて大半がキャッシュ 可能で、一部のメッセージや画像のみを実行時に差し 替えれば済むのでは)
38.
素材のスプライト(1枚の画像への
集約)が可能か検討する スプライト化することで、画像自体が8bitに収まらなくなる可能 性など、デメリットも考えつつ 元々画面全体が8bitしか使ってない、などであればそこそこスプ ライト効果あるはず 大半をアプリケーションキャッシュに乗せられるのであれば HTTPリクエスト頻度自体を低減出来る。この場合、JSからの指 定時に面倒が増えるデメリットが速度メリットを上回る可能性が 高いためスプライトしない ただし、ブラウザの最適化によってはスプライトされたものを利 用したほうがOpenGL描画時にテクスチャの差し替えが不要とな り、画面構築に必要なドローコール回数を減らせる可能性もある
39.
JS+CSSでひたすらリライトする ベンダープリフィックスを補完するユーティリティを用 意しておく ベンダーごとの先行実装は当然 -webkit,
-moz, -o, -ms これらを一気に指定出来るようなユーティリティを 持っておくと多少楽
40.
前半終了(5分休憩) ハンズオン用の素材をダウンロードしておいてください
http://bit.ly/RVxHve
41.
実際に作ってみる
42.
前に軽くアンケート プログラマな方
Illustratorを扱える方 デザイナな方 jQueryを扱える方 HTMLを書ける方 Coffee Script好きな方 CSSでレイアウト出来る方 PHPを書ける方 CSSでアニメーション出来 Javaを書ける方 る方 C#が好きな方 Photoshopを扱える方 Haskell好きな方
43.
JS+CSSで書き始めるまで FlashをMac上で再生する→QuickTime Playerで録画 avconv -i
input.mov ‘out_%04d.png’でフレームにバラす QuickTime Playerでコマ送り、早送り/スロー再生を繰り 返して演出の構造とレイヤ構造を掴み、リスト化する もしもソースが手に入らなければswftoolsに含まれる swfextractを使い内部リソース(PNG類)を抜き出しておく swfmillの出力をざっと眺めてステージ情報等を把握する
44.
今回フォーカスするポイント JavaScriptからCSSを制御し、いくつかの表現を実装 なので、それ以外の部分については事前に用意 ディレクトリ構成をざっくり説明
45.
ハンズオン...
46.
まとめ
47.
様々な技術を実際に試して良
し悪しを判断
48.
JS+CSSでゴリゴリと書いていくのは、自由 度大きいけれどやっぱり大変な部分も多い。 うまく作業担当を切り分けるのが肝心。
49.
他に、enchant.jsなどのJS+CSS用ゲームエンジンを 利用する方法も(アニメーションなどのユーティリティが一通 り っていて、ある程度広い端末での動作も確認されている)
50.
書きやすいシンタックスで高速な実行環境、 というのがメンテ上は望ましいので、実装言 語にJSXを利用するというのもアリかも
51.
その他 SVGの使い所 Android4.0、iOS5.x以上なら一定は使い物になるかも (私見)アニメーション(画面タップ含め)丸ごとSVGでやるよりは、
ベクター保持したいグラフィックのラスタライズに使われるか バイナリにパックされた複雑なシェイプをネイティブライブラリ にて指定サイズでラスタライズ(JSでやるより十分高速になりうる) 参考 http://blog.webcreativepark.net/android/ AndroidでCSS3やる際の問題が 丁寧にまとめてあって凄い
52.
長時間お付き合い頂き ありがとうございました
Editor's Notes
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Download now