Your SlideShare is downloading. ×
めんどうな viewport や 端末判別の ために sagen.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

487
views

Published on

2014/05/24 (土) 13:00 - 17:00 …

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
487
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. お仕事の相談お待ちしています