SlideShare a Scribd company logo
Arctic.js
About me
• 近澤良(chikathreesix) @ DeNA
• フロントエンドエンジニア
• JavaScript, Flash, HTML/CSS,
  Objective-C等

• 蒙古タンメン中本
Arctic.jsとは
スマートフォンブラウザ向け
 ゲームフレームワーク
Arctic.jsとは

• スマートフォンの
• ブラウザで動く
• ゲームを開発する為の
• フレームワーク
活用例
available on
  GitHub
 with MIT License
About Arctic.js


• HTML5のCanvas要素を利用
• 環境差異を吸収
• AS3との互換性
なぜCanvasか
HTML5
• DOM
 • style.left、style.topをいじる方法
• CSS3
 • CSSでアニメーションを記述
• Canvas
 • Canvasに描画しまくる
DOM


• 再描画のコストが高すぎる
• スマホではパフォーマンス出ない
CSS3


• 簡単でハイパフォーマンス
• アニメーションの経過点とれない
Canvas


• 自由度高い
• APIがローレベル
• CSS3よりはパフォーマンス悪い
Canvasを利用


• スマートフォン向けにハイパフォーマン
 スかつ複雑なものを実装するには
 Canvasを用いるのが良い
環境差異の吸収
環境における差異


• OSによる差異
• デバイスの性能による差異
OSによる差異
•   iPhone
OSによる差異
•   Android2.1
Android2.1

• Canvasに重大なバグあり
• 座標やサイズがscreen.width/320倍され
 る

• 変換マトリックス系がおかしい
デバイスの性能による差異


• setIntervalは信用できない
• デバイスによって実行速度が全く異な
 る
フレームベース

• setInterval/setTimeout内でプロパ
 ティを目標値に向かって足していく

• 環境によってアニメーションの速度が
 変わってしまう
タイムベース
• setInterval / setTimeout内で経過時
 間を取得して、適切な値を設定する

• 描画が間引かれる
• 体感的な速度はどの環境でも保たれる
• Arctic.jsではこちらを採用
Design
OOP

• 全ての機能はオブジェクトを生成して
 使う

• クラスベースの開発スタイル
Class作成
var Person = arc.Class.create({
  _name:null,
 
  initialize: function(name) {
    this.setName(name);
  },
 
  setName: function(name){
    this._name = name;
  },
 
  getName: function() {
    return this._name;
  }
});
Class継承
var Friend = arc.Class.create(Person, {
  _nickname:null,
 
  initialize:function(name) {
    this.setName(name);
  },
 
  setName: function($super, name, nickname){
    $super(name);
    this._nickname = nickname;
  },
 
  getNickName:function(){
    return this._nickname;
  }
});
Getting started
HTMLを用意
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, maximum-scale=1, user-scalable=no;"/>
<title>Game</title>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="js/arctic.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>
ゲームクラス作成

var GameMain = arc.Class.create(arc.Game, {
  //Gameパラメーターをセットする処理等の初期化処理
  initialize:function(params){
    console.log(params.hp); 
  },
  //ランループから毎フレーム実行される
  update:function(){
 
  }
});
ゲームクラス利用
window.addEventListener('DOMContentLoaded', function(e){
  var system = new arc.System(320, 416, 'canvas');
  system.setGameClass(GameMain, {hp:100, mp:100});
 
  system.addEventListener(arc.Event.PROGRESS, function(e){
      console.log(e.loaded + ", " + e.total);
  });
 
  system.addEventListener(arc.Event.COMPLETE, function(){
      console.log('loaded');
  });

  system.load(['a.png', 'b.png']);
}, false);
Features
Event
EventDispatcher
• ほぼ全てのクラスがこれを継承してい
 る

• addEventListenerを用いて非同期処理
• dispatchEventを用いてカスタムイベント
 発火
EventDispatcher
•   例


    var disp = new arc.display.DisplayObject();
    disp.addEventListener('HOGE', function(e){
        console.log('hogehoge');
    });
    disp.dispatchEvent('HOGE');
    disp.removeEventListener('HOGE');
    disp.dispatchEvent('HOGE');
Display Object
arc.display
•   DisplayObject

•   Sprite

•   Shape

•   SheetMovieClip

•   DisplayObjectContainer

•   MovieClip

•   JSONMovieClip

•   TextField
DisplayObject

• 全ての表示要素がこれを継承している
• setX, setScaleY, getAlpha等のgetter/setter
  メソッドを保持
Sprite

• 画像を一つ格納することができる
• DisplayObjectのサブクラス
• arc.display.Imageオブジェクトを取得して
 利用
Sprite
•   例


var obj = new arc.display.Sprite(system.getImage('sample.png'));

obj.setAlign(arc.display.Align.CENTER);
obj.setX(100);
obj.setY(100);
obj.setAlpha(0.5);
Shape
•   自由に描画ができる


•   塗りを行うbeginFill, endFill,


•   線の描画を行うbeginStroke, endStroke


•   線をつなぐlineTo, moveTo


•   図形の描画を行う drawCircle, drawRect
Shape
•   例


var shape = new arc.display.Shape();
shape.beginStroke(10, 0x00ffff);
shape.beginFill(0xff0000);
shape.drawCircle(200,200, 100);
shape.endFill();
shape.endStroke();
Shape


• DEMO
SheetMovieClip
•   コマが連続した画像をアニメーションさせる




var mc = new arc.display.SheetMovieClip(
   this._system.getImage('sample.png'), 174, 12);
this.addChild(mc);
mc.play(true);
SheetMovieClip


• DEMO
DisplayObjectContainer
•   DisplayObjectの子供を持つことができる表示オブ
    ジェクト


•   addChild, removeChild, contains, setMask


var container = new arc.display.DisplayObjectContaner();
var obj = new arc.display.Sprite(system.getImage('sample.png'));

container.addChild(obj);
MovieClip
•   DisplayObjectContainerを継承


•   FlashのMovieClipを再現


var mc = new arc.display.MovieClip(12, true);
mc.addChild(ball0, {
" 1 : {x:0, y:0, transition:arc.anim.Transition.SINE_OUT},
" 5 : {x:250, y:100}
});
mc.addChild(ball1, {
" 1 : {scaleX:0.5, scaleY:0.5, transition:arc.anim.Transition.SINE_OUT},
" 10 : {scaleX:3, scaleY:3}
});
MovieClip


• DEMO
JSONMovieClip

• MovieClipを継承
• 定義されたJSONに従ってアニメーショ
 ンを行う
JSONMovieClip
    •   JSON
{
"   "fps":24,
"   "frame":40,
"   "main":3,
"   "lib":[
"   "     {"id":1, "type":"data", "data":"sample.png", "pos":[0,0,34,34]},
"   "     {"id":2, "type":"mc", "loop":"true", "timelines":[
"   "     "     {"target":1, "align":"CENTER", "keyframes":{
"   "     "     "    "1" : {"x":17, "y":17, "transition":"SINE_IN"},
"   "     "     "    "10": {"y":117, "transition":"SINE_OUT"},
"   "     "     "    "19": {"y":17}
"   "     "     }}
"   "     ]},
"   "     {"id":3, "type":"mc", "loop":"true", "timelines":[
"   "     "     {"target":2, "align":"LEFT", "keyframes":{
"   "     "     "    "1" : {"x":-34, "transition":"LINEAR"},
"   "     "     "    "40": {"x":320}
"   "     "     }}
"   "     ]}
"   ]
}
JSONMovieClip
•   JS


var ajax = new arc.Ajax();
var self = this;
ajax.addEventListener(arc.Event.COMPLETE, function(){
" var mc = new arc.display.JSONMovieClip(ajax.getResponseJSON());
" self.addChild(mc);
});
ajax.load('sample.json');
JSONMovieClip


• DEMO
TextField
•   テキスト表示を行う


•   Alignの設定、文字色、フォントの設定



var numTxt = new arc.display.TextField();
numTxt.setX(10);
numTxt.setY(100);
numTxt.setAlign(arc.display.Align.CENTER);
numTxt.setFont("Helvetica", 20, true);
numTxt.setColor(0xff0000);
Animation
arc.anim.Animation
•   Tweenerライク

var target = new arc.display.Sprite(system.getImage('ball0.png'));
var anim = new arc.anim.Animation(target,
" {x:0, y:0},
" {x:200, y:100, time:1000, transition:arc.anim.Transition.SINE_OUT},
" {x:100, y:300, time:1000, transition:arc.anim.Transition.SINE_OUT});

anim.addEventListener(arc.Event.COMPLETE, function(e){
" console.log('animation finished');
});
anim.play();
arc.anim.Animation


• DEMO
Touch Event
Touch Event
• TOUCH_START
 • タッチ開始
• TOUCH_MOVE
 • タッチが動いた
• TOUCH_END
 • タッチ終了
Touch Event
var sprite = new arc.display.Sprite(system.getImage('ball.png')),

sprite.addEventListener(arc.Event.TOUCH_START, function(event){
    console.log(‘touchStart x : ‘ + event.x + ‘ y : ‘ + event..y);
});

sprite.addEventListener(arc.Event.TOUCH_MOVE, function(event){
    console.log(‘touchMove x : ‘ + event.x + ‘ y : ‘ + event..y);
});

sprite.addEventListener(arc.Event.TOUCH_END, function(event){
    console.log(‘touchEnd x : ‘ + event.x + ‘ y : ‘ + event..y);
});
イベント伝播


• 表示の階層構造がある場合親でもタッ
 チイベントを受け取ることができる
others
Timer
 •   経過時間を取得したい時に使う


 •   Dateは重いのでメインループから時間経過を取得



var timer = new arc.Timer();
timer.start();
console.log(timer.getElapsed());
CountTimer
•   setIntervalやsetTimeoutの代わりに使う


•   ゲームの進行速度に合わせて実行


var countTimer = new arc.CountTimer(3000, 1);
countTimer.addEventListener(arc.Event.TIMER_COMPLETE, function(){
    console.log(‘count’);
});
countTimer.start();
ImageManager
•   画像の読み込みを管理する


•   複数の画像を読み込みたい時に利用


var imageManager = new arc.ImageManager();
imageManager.addEventListener(arc.Event.COMPLETE, function(){
    console.log(‘loaded images’);
});
imageManager.load([‘a.png’, ‘b.png’]);
System
•   最初にインスタンス化するシステムクラス

•   いくつか便利なメソッドを用意している




system.setFullScreen();   //フルスクリーンで表示
system.getFps();   //実測FPSを取得
Rivals
enchant.js

• DOMベース
• ゲーム制作における機能が豊富(サウ
 ンド再生、マップ等)

• Canvas版に期待
EaselJS

• Canvasベース
• APIはかなりAS3.0に似せてある
• クラスベースで開発しない
• Adobeがサポート
DEMO
Canvasの未来は明るい
ご清聴ありがとうご
  ざいました

More Related Content

What's hot

openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習BopenFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
Atsushi Tadokoro
 
Flashup 12 Basic Training of Away3D
Flashup 12 Basic Training of Away3DFlashup 12 Basic Training of Away3D
Flashup 12 Basic Training of Away3D
Katsushi Suzuki
 
NEORT ミートアップ #1 LT クリエイティブコーディングの行方
NEORT ミートアップ #1 LT クリエイティブコーディングの行方NEORT ミートアップ #1 LT クリエイティブコーディングの行方
NEORT ミートアップ #1 LT クリエイティブコーディングの行方
Masaru Mizuochi
 
Flashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3DFlashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3D
Katsushi Suzuki
 
2012 03-03-titanium plusquicktigame2d
2012 03-03-titanium plusquicktigame2d2012 03-03-titanium plusquicktigame2d
2012 03-03-titanium plusquicktigame2d
Hiroshi Oyamada
 
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3
yaju88
 
画像を縮小するお話
画像を縮小するお話画像を縮小するお話
画像を縮小するお話
technocat
 
シェーダープログラムを無限に生成するガチャつくってみた PCD2019
シェーダープログラムを無限に生成するガチャつくってみた PCD2019シェーダープログラムを無限に生成するガチャつくってみた PCD2019
シェーダープログラムを無限に生成するガチャつくってみた PCD2019
Masaru Mizuochi
 
Processing workshop v3.0
Processing workshop v3.0Processing workshop v3.0
Processing workshop v3.0
Wataru Kani
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分
Toshio Ehara
 
CG2013 12
CG2013 12CG2013 12
CG2013 12
shiozawa_h
 
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
 Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_ Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity Technologies Japan K.K.
 
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
Ryuma Tsukano
 
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
Takashi Yoshinaga
 
OpenCVとRGB-Dセンサで作ろう壁面タッチパネル
OpenCVとRGB-Dセンサで作ろう壁面タッチパネルOpenCVとRGB-Dセンサで作ろう壁面タッチパネル
OpenCVとRGB-Dセンサで作ろう壁面タッチパネル
Takashi Yoshinaga
 
Sencha study
Sencha studySencha study
Sencha study
Shinsuke Sugita
 
板ポリだけで めちゃカッコいい グラフィックスを出す!
板ポリだけで めちゃカッコいい グラフィックスを出す!板ポリだけで めちゃカッコいい グラフィックスを出す!
板ポリだけで めちゃカッコいい グラフィックスを出す!
notargs
 
Flashup14 Away3d basic material setting
Flashup14 Away3d basic material settingFlashup14 Away3d basic material setting
Flashup14 Away3d basic material setting
Katsushi Suzuki
 
Objective-C が好きになる Tips & Hack
Objective-C が好きになる Tips & HackObjective-C が好きになる Tips & Hack
Objective-C が好きになる Tips & Hack
Taketo Sano
 
Vue.js でタイマーを作る
Vue.js でタイマーを作るVue.js でタイマーを作る
Vue.js でタイマーを作る
mizdra
 

What's hot (20)

openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習BopenFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 たくさんの図形を動かす 静的配列と動的配列 - 芸大グラフィックスプログラミング演習B
 
Flashup 12 Basic Training of Away3D
Flashup 12 Basic Training of Away3DFlashup 12 Basic Training of Away3D
Flashup 12 Basic Training of Away3D
 
NEORT ミートアップ #1 LT クリエイティブコーディングの行方
NEORT ミートアップ #1 LT クリエイティブコーディングの行方NEORT ミートアップ #1 LT クリエイティブコーディングの行方
NEORT ミートアップ #1 LT クリエイティブコーディングの行方
 
Flashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3DFlashup13 Basic Training of Flare3D
Flashup13 Basic Training of Flare3D
 
2012 03-03-titanium plusquicktigame2d
2012 03-03-titanium plusquicktigame2d2012 03-03-titanium plusquicktigame2d
2012 03-03-titanium plusquicktigame2d
 
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3
 
画像を縮小するお話
画像を縮小するお話画像を縮小するお話
画像を縮小するお話
 
シェーダープログラムを無限に生成するガチャつくってみた PCD2019
シェーダープログラムを無限に生成するガチャつくってみた PCD2019シェーダープログラムを無限に生成するガチャつくってみた PCD2019
シェーダープログラムを無限に生成するガチャつくってみた PCD2019
 
Processing workshop v3.0
Processing workshop v3.0Processing workshop v3.0
Processing workshop v3.0
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分
 
CG2013 12
CG2013 12CG2013 12
CG2013 12
 
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
 Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_ Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
Unity道場京都スペシャル トゥーンシェーディングとノンフォトリアリスティック風絵づくり入門_
 
Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)Backbone model collection (jscafe 8)
Backbone model collection (jscafe 8)
 
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
 
OpenCVとRGB-Dセンサで作ろう壁面タッチパネル
OpenCVとRGB-Dセンサで作ろう壁面タッチパネルOpenCVとRGB-Dセンサで作ろう壁面タッチパネル
OpenCVとRGB-Dセンサで作ろう壁面タッチパネル
 
Sencha study
Sencha studySencha study
Sencha study
 
板ポリだけで めちゃカッコいい グラフィックスを出す!
板ポリだけで めちゃカッコいい グラフィックスを出す!板ポリだけで めちゃカッコいい グラフィックスを出す!
板ポリだけで めちゃカッコいい グラフィックスを出す!
 
Flashup14 Away3d basic material setting
Flashup14 Away3d basic material settingFlashup14 Away3d basic material setting
Flashup14 Away3d basic material setting
 
Objective-C が好きになる Tips & Hack
Objective-C が好きになる Tips & HackObjective-C が好きになる Tips & Hack
Objective-C が好きになる Tips & Hack
 
Vue.js でタイマーを作る
Vue.js でタイマーを作るVue.js でタイマーを作る
Vue.js でタイマーを作る
 

Viewers also liked

Progetto la spongada2
Progetto la spongada2Progetto la spongada2
Progetto la spongada2
Salvetti Bakery
 
Week 3
Week 3Week 3
Week 3
calvarycoop
 
Impakt krant - duurzaam inkopen
Impakt krant - duurzaam inkopenImpakt krant - duurzaam inkopen
Impakt krant - duurzaam inkopen
A_v_d_Bosch
 
Ancient history week 7
Ancient history  week 7Ancient history  week 7
Ancient history week 7
calvarycoop
 
Ancient history week 2a
Ancient history  week 2aAncient history  week 2a
Ancient history week 2a
calvarycoop
 
Ancient history week 1
Ancient history  week 1Ancient history  week 1
Ancient history week 1
calvarycoop
 
Asia history part 3
Asia history  part 3Asia history  part 3
Asia history part 3
calvarycoop
 

Viewers also liked (7)

Progetto la spongada2
Progetto la spongada2Progetto la spongada2
Progetto la spongada2
 
Week 3
Week 3Week 3
Week 3
 
Impakt krant - duurzaam inkopen
Impakt krant - duurzaam inkopenImpakt krant - duurzaam inkopen
Impakt krant - duurzaam inkopen
 
Ancient history week 7
Ancient history  week 7Ancient history  week 7
Ancient history week 7
 
Ancient history week 2a
Ancient history  week 2aAncient history  week 2a
Ancient history week 2a
 
Ancient history week 1
Ancient history  week 1Ancient history  week 1
Ancient history week 1
 
Asia history part 3
Asia history  part 3Asia history  part 3
Asia history part 3
 

Similar to Arctic.js

Creators'night#12今井
Creators'night#12今井Creators'night#12今井
Creators'night#12今井
Daisuke Imai
 
Ember.js Tokyo event 2014/09/22 (Japanese)
Ember.js Tokyo event  2014/09/22 (Japanese)Ember.js Tokyo event  2014/09/22 (Japanese)
Ember.js Tokyo event 2014/09/22 (Japanese)
Yuki Shimada
 
Creators'night#14今井
Creators'night#14今井Creators'night#14今井
Creators'night#14今井
Daisuke Imai
 
これからのJavaScriptの話
これからのJavaScriptの話これからのJavaScriptの話
これからのJavaScriptの話
Shogo Sensui
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
Daisuke Imai
 
JavaFX 2.0 への誘い
JavaFX 2.0 への誘いJavaFX 2.0 への誘い
JavaFX 2.0 への誘い
Yuichi Sakuraba
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
Koji Ishimoto
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
 
Azure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionAzure IoT Edge で Custom Vision
Azure IoT Edge で Custom Vision
Yoshitaka Seo
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 
iOSプログラマへ。HTML5 Canvasがおもしろい!
iOSプログラマへ。HTML5 Canvasがおもしろい!iOSプログラマへ。HTML5 Canvasがおもしろい!
iOSプログラマへ。HTML5 Canvasがおもしろい!
cocopon
 
enchant.js勉強会
enchant.js勉強会enchant.js勉強会
enchant.js勉強会
Hiroaki Murayama
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Atsushi Tadokoro
 
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
Masami Yabushita
 
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
Atsushi Tadokoro
 
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
Kazunari Hara
 

Similar to Arctic.js (20)

Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
Creators'night#12今井
Creators'night#12今井Creators'night#12今井
Creators'night#12今井
 
Ember.js Tokyo event 2014/09/22 (Japanese)
Ember.js Tokyo event  2014/09/22 (Japanese)Ember.js Tokyo event  2014/09/22 (Japanese)
Ember.js Tokyo event 2014/09/22 (Japanese)
 
Creators'night#14今井
Creators'night#14今井Creators'night#14今井
Creators'night#14今井
 
これからのJavaScriptの話
これからのJavaScriptの話これからのJavaScriptの話
これからのJavaScriptの話
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
 
JavaFX 2.0 への誘い
JavaFX 2.0 への誘いJavaFX 2.0 への誘い
JavaFX 2.0 への誘い
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
 
Ajax 応用
Ajax 応用Ajax 応用
Ajax 応用
 
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
 
Azure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionAzure IoT Edge で Custom Vision
Azure IoT Edge で Custom Vision
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 
iOSプログラマへ。HTML5 Canvasがおもしろい!
iOSプログラマへ。HTML5 Canvasがおもしろい!iOSプログラマへ。HTML5 Canvasがおもしろい!
iOSプログラマへ。HTML5 Canvasがおもしろい!
 
enchant.js勉強会
enchant.js勉強会enchant.js勉強会
enchant.js勉強会
 
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGLMedia Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL
 
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
バッテリー監視のためにバックグラウンドタスクについて調べたらなくなってたから泣く泣くタイマーApiを使ってみた話
 
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
 
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
 

Arctic.js

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n