2014/05/24 (土) 13:00 - 17:00 グランフロントでフロントエンドエンジニアの為の勉強会を開催します！ http://grand-front-end-osaka.doorkeeper.jp/events/11330 の発表資料です。

1. 簡単なめんどうな
viewport や
端末判別の
ために sagen.js
グランフロントでフロントエンドエンジニアの為の勉強会を開催します！
2014/05/24 (土) 13:00 - 17:00

2. おおくぼ ひろあき
Interactive Designer
自己紹介
http://parachute.bz/

3. Flash / ActionScript
HTML, CSS, JavaScript
Sass, Compass
Perl, PHP
MySQL, PostgreSQL
iOS / Objective-C
Unity
自己紹介：今やってること

4. レスポンシブ
ウェッブ
デザイン

5. 1ソースで
PC, スマホ, タブレットでも
いい感じに表示するって
話題沸騰中らしく
イケテルWebデザイナーは
あっちでも
こっちでも
使っている様子…

6. Media Queries

7. @media screen and (max-width: 1000px) {}
@media screen and (max-width: 760px) {}
@media screen and (device-aspect-ratio: 16/9) {}
こんなの…

8. 現場で
事件が起きてる様子

9. IE 8対象です。
あ、IE 7もです。
それと、IE 6もでした。
Android 2.2からですー^^
iOSは4からお願いします。

10. PCブラウザの
ウインドウ幅をグイグイ変更して
表示バグを見つける
優秀なテスター登場
事件です！

11. Media Queries
!
使うの止めました

12. でも端末分岐は必要

13. device.js
http://matthewhudson.me/projects/device.js/

14. device.js

15. device.js
すごく優秀！
でも機能追加したくなった。

16. sagen.js
https://github.com/taikiken/sagen.js

17. sagen.js
OS version CSSクラス
orientation event 発行
viewport 書換
とか追加しました

18. sagen.js
pure JavaScript で開発
grunt でconcat, minify してる

19. altJS(Haxe, TypeScript)を使わなかったワケ
JavaScript

20. altJS(Haxe, TypeScript)を使わなかったワケ
なれてない
!
!
出力されるJavaScript品質に自信が無かった
JavaScript

21. JetBrains製エディタ
IntelliJ IDEA + JSHint
JavaScript
http://www.jshint.com/

22. 開発(スタイル)の参考にしたJavaScriptライブラリ
CreateJS three.js
JavaScript
http://www.createjs.com/#!/CreateJS
http://threejs.org/

23. どちらもActionScript界の巨匠が開発
CreateJS three.js
JavaScript
http://www.createjs.com/#!/CreateJS
http://threejs.org/

24. ActionScriptのように書いていた（ように見えた）
CreateJS three.js
JavaScript
http://www.createjs.com/#!/CreateJS
http://threejs.org/

25. ActionScript スキ！
JavaScript を
ActionScript みたく書きたい
JavaScript

26. Robert Penner's
Programming Macromedia Flash MX
Scriptの先生
http://www.amazon.co.jp/dp/0072223561/

27. sagen.js
CreateJS の Gruntfile.jsを参考に
grunt でconcat, minify
!
API Doc
YUIDoc をgruntで
http://yui.github.io/yuidoc/

28. Ant + Google Closure Compiler + YUIDoc
!
Ant: http://ant.apache.org/
Closure Compiler: https://developers.google.com/closure/compiler/
最近

29. WebAudio API をゴニョゴニョ始めました。
最近
raimei.js
https://github.com/taikiken/raimei.js

30. @taikiken
https://github.com/taikiken
http://www.slideshare.net/taikiken

31. 質問

32. お仕事の相談お待ちしています