簡単なめんどうな
viewport や
端末判別の
ために sagen.js
グランフロントでフロントエンドエンジニアの為の勉強会を開催します!
2014/05/24 (土) 13:00 - 17:00
おおくぼ ひろあき
Interactive Designer
自己紹介
http://parachute.bz/
Flash / ActionScript	

HTML, CSS, JavaScript	

Sass, Compass	

Perl, PHP	

MySQL, PostgreSQL	

iOS / Objective-C	

Unity
自...
レスポンシブ	

ウェッブ	

デザイン
1ソースで

PC, スマホ, タブレットでも
いい感じに表示するって
話題沸騰中らしく
イケテルWebデザイナーは
あっちでも
こっちでも
使っている様子…
Media Queries
@media screen and (max-width: 1000px) {}
@media screen and (max-width: 760px) {}
@media screen and (device-aspect-ratio: 1...
現場で	

事件が起きてる様子
IE 8対象です。
あ、IE 7もです。

それと、IE 6もでした。

Android 2.2からですー^^
iOSは4からお願いします。
PCブラウザの
ウインドウ幅をグイグイ変更して
表示バグを見つける
優秀なテスター登場
事件です!
Media Queries	

!
使うの止めました
でも端末分岐は必要
device.js
http://matthewhudson.me/projects/device.js/
device.js
device.js
すごく優秀!

でも機能追加したくなった。
sagen.js
https://github.com/taikiken/sagen.js
sagen.js
OS version CSSクラス

orientation event 発行

viewport 書換

とか追加しました
sagen.js
pure JavaScript で開発
grunt でconcat, minify してる
altJS(Haxe, TypeScript)を使わなかったワケ



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



なれてない
!
!
出力されるJavaScript品質に自信が無かった
JavaScript
JetBrains製エディタ

IntelliJ IDEA + JSHint
JavaScript
http://www.jshint.com/
開発(スタイル)の参考にしたJavaScriptライブラリ



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



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



CreateJS three.js
JavaScript
http://www.createjs.com/#!/CreateJS
http://threejs.org/
ActionScript スキ!



JavaScript を
ActionScript みたく書きたい
JavaScript
Robert Penner's
Programming Macromedia Flash MX
Scriptの先生
http://www.amazon.co.jp/dp/0072223561/
sagen.js
CreateJS の Gruntfile.jsを参考に
grunt でconcat, minify
!
API Doc
YUIDoc をgruntで
http://yui.github.io/yuidoc/
Ant + Google Closure Compiler + YUIDoc
!
Ant: http://ant.apache.org/
Closure Compiler: https://developers.google.com/closu...
WebAudio API をゴニョゴニョ始めました。
最近
raimei.js
https://github.com/taikiken/raimei.js
@taikiken
https://github.com/taikiken
http://www.slideshare.net/taikiken
質問
お仕事の相談お待ちしています
Upcoming SlideShare
Loading in …5
×

めんどうな viewport や 端末判別の ために sagen.js

1,057 views

Published on

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

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,057
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

めんどうな viewport や 端末判別の ために sagen.js

  1. 1. 簡単なめんどうな viewport や 端末判別の ために sagen.js グランフロントでフロントエンドエンジニアの為の勉強会を開催します! 2014/05/24 (土) 13:00 - 17:00
  2. 2. おおくぼ ひろあき Interactive Designer 自己紹介 http://parachute.bz/
  3. 3. Flash / ActionScript HTML, CSS, JavaScript Sass, Compass Perl, PHP MySQL, PostgreSQL iOS / Objective-C Unity 自己紹介:今やってること
  4. 4. レスポンシブ ウェッブ デザイン
  5. 5. 1ソースで
 PC, スマホ, タブレットでも いい感じに表示するって 話題沸騰中らしく イケテルWebデザイナーは あっちでも こっちでも 使っている様子…
  6. 6. Media Queries
  7. 7. @media screen and (max-width: 1000px) {} @media screen and (max-width: 760px) {} @media screen and (device-aspect-ratio: 16/9) {} こんなの…
  8. 8. 現場で 事件が起きてる様子
  9. 9. IE 8対象です。 あ、IE 7もです。
 それと、IE 6もでした。
 Android 2.2からですー^^ iOSは4からお願いします。
  10. 10. PCブラウザの ウインドウ幅をグイグイ変更して 表示バグを見つける 優秀なテスター登場 事件です!
  11. 11. Media Queries ! 使うの止めました
  12. 12. でも端末分岐は必要
  13. 13. device.js http://matthewhudson.me/projects/device.js/
  14. 14. device.js
  15. 15. device.js すごく優秀!
 でも機能追加したくなった。
  16. 16. sagen.js https://github.com/taikiken/sagen.js
  17. 17. sagen.js OS version CSSクラス
 orientation event 発行
 viewport 書換
 とか追加しました
  18. 18. sagen.js pure JavaScript で開発 grunt でconcat, minify してる
  19. 19. altJS(Haxe, TypeScript)を使わなかったワケ
 
 JavaScript
  20. 20. altJS(Haxe, TypeScript)を使わなかったワケ
 
 なれてない ! ! 出力されるJavaScript品質に自信が無かった JavaScript
  21. 21. JetBrains製エディタ
 IntelliJ IDEA + JSHint JavaScript http://www.jshint.com/
  22. 22. 開発(スタイル)の参考にしたJavaScriptライブラリ
 
 CreateJS three.js JavaScript http://www.createjs.com/#!/CreateJS http://threejs.org/
  23. 23. どちらもActionScript界の巨匠が開発
 
 CreateJS three.js JavaScript http://www.createjs.com/#!/CreateJS http://threejs.org/
  24. 24. ActionScriptのように書いていた(ように見えた)
 
 CreateJS three.js JavaScript http://www.createjs.com/#!/CreateJS http://threejs.org/
  25. 25. ActionScript スキ!
 
 JavaScript を ActionScript みたく書きたい JavaScript
  26. 26. Robert Penner's Programming Macromedia Flash MX Scriptの先生 http://www.amazon.co.jp/dp/0072223561/
  27. 27. sagen.js CreateJS の Gruntfile.jsを参考に grunt でconcat, minify ! API Doc YUIDoc をgruntで http://yui.github.io/yuidoc/
  28. 28. Ant + Google Closure Compiler + YUIDoc ! Ant: http://ant.apache.org/ Closure Compiler: https://developers.google.com/closure/compiler/ 最近
  29. 29. WebAudio API をゴニョゴニョ始めました。 最近 raimei.js https://github.com/taikiken/raimei.js
  30. 30. @taikiken https://github.com/taikiken http://www.slideshare.net/taikiken
  31. 31. 質問
  32. 32. お仕事の相談お待ちしています

×