SlideShare a Scribd company logo
簡単なめんどうな
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.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/closure/compiler/
最近
WebAudio API をゴニョゴニョ始めました。
最近
raimei.js
https://github.com/taikiken/raimei.js
@taikiken
https://github.com/taikiken
http://www.slideshare.net/taikiken
質問
お仕事の相談お待ちしています

More Related Content

PDF
Flashクリエイターはどこへ行く?~未来への道しるべ 会場リアルタイムアンケート結果
PPTX
Asp.net core mvc の core な話
ODP
20130202 fe勉強会 canvas
PPT
iPlotzで手書き風ワイヤーフレーム
PDF
React.js + Flux
PDF
three.js はじめましょ
PDF
iOSデバイスの対応OSと画面サイズとかCPUとか発売時期とか
PPTX
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)
Flashクリエイターはどこへ行く?~未来への道しるべ 会場リアルタイムアンケート結果
Asp.net core mvc の core な話
20130202 fe勉強会 canvas
iPlotzで手書き風ワイヤーフレーム
React.js + Flux
three.js はじめましょ
iOSデバイスの対応OSと画面サイズとかCPUとか発売時期とか
Web Component Framework Urushiのご紹介(OSC2017 Tokyo/Spring)

Similar to めんどうな viewport や 端末判別の ために sagen.js (20)

PDF
レスポンシブWebデザイン【基礎編】
PDF
Smartphone ui:ux」 de na creative seminar vol.1 レポート
PDF
Canvas勉強会
PDF
ゲームだけじゃないHTML5
KEY
12.09.08 明星和楽2012 KLabハンズオンセッション
KEY
Android webブラウザのhtml5対応状況
PDF
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
PDF
html5とcss3実例紹介とデモ
PDF
Attractive HTML5
PDF
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
PPTX
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
PDF
CSS Nite LP26 CodeKitで始める次世代Web制作
PDF
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
PDF
One ASP.NET の今とこれから
PDF
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
PDF
今から始めよう!WordPressで作る女子ウケ★スマホサイト
PDF
HTML5でできるカメラアプリを実際に体験しよう
PPTX
レスポンシブWebデザインによる開発効率化
PDF
Visual Studio と Microsoft Azure で変わる開発スタイル
PDF
モバイルコンテンツ制作を効 率化するツールを使いこなせ
レスポンシブWebデザイン【基礎編】
Smartphone ui:ux」 de na creative seminar vol.1 レポート
Canvas勉強会
ゲームだけじゃないHTML5
12.09.08 明星和楽2012 KLabハンズオンセッション
Android webブラウザのhtml5対応状況
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
html5とcss3実例紹介とデモ
Attractive HTML5
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
One ASP.NET の今とこれから
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
今から始めよう!WordPressで作る女子ウケ★スマホサイト
HTML5でできるカメラアプリを実際に体験しよう
レスポンシブWebデザインによる開発効率化
Visual Studio と Microsoft Azure で変わる開発スタイル
モバイルコンテンツ制作を効 率化するツールを使いこなせ
Ad

More from Hiroaki Okubo (7)

PDF
CSS3 filterとtransformをtransition, animationでアニメーション
PDF
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
PDF
JavaScriptをまじめに考えました+
PDF
HTML5 Video Player
PDF
HTML5 Video Player #fsync
PDF
2011 07-hiyoko
PDF
Signalsで Event処理を簡単に
CSS3 filterとtransformをtransition, animationでアニメーション
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
JavaScriptをまじめに考えました+
HTML5 Video Player
HTML5 Video Player #fsync
2011 07-hiyoko
Signalsで Event処理を簡単に
Ad

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