簡単なめんどうな 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: 16/9) {}

こんなの…

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

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

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

事件です！

Media Queries !

使うの止めました

でも端末分岐は必要

device.jshttp://matthewhudson.me/projects/device.js/

device.js

device.js

すごく優秀！

でも機能追加したくなった。

sagen.jshttps://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/#!/CreateJShttp://threejs.org/

どちらもActionScript界の巨匠が開発CreateJS three.js

JavaScript

http://www.createjs.com/#!/CreateJShttp://threejs.org/

ActionScriptのように書いていた（ように見えた）CreateJS three.js

JavaScript

http://www.createjs.com/#!/CreateJShttp://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/closure/compiler/

最近

WebAudio API をゴニョゴニョ始めました。

最近raimei.js

https://github.com/taikiken/raimei.js

@taikiken

https://github.com/taikiken

http://www.slideshare.net/taikiken

質問

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