SlideShare a Scribd company logo
スマホにおけるWebGL入門	
菅家 洋太	
  
CyberAgent,	
  Inc.
自己紹介	
•  サイバーエージェントグループの	
  
株式会社ジークレストにWebデザイナーとして就職	
  
デザインやマークアップ、Flashアニメーションに従事	
  
	
  
デザインよりコードワーク(ac7on	
  script)に目覚め始める	
  
	
  
•  その後Flashエンジニアに転身	
  
@games(タウンゲーム)のFlash開発などに携わる	
  
	
  
•  2011年9月より、アメーバ事業本部に転籍	
  
フロントエンド ディベロッパーとして	
  
js、アニメーションを中心に携わる	
  
自己紹介	
•  2年前の社内アプリコンテストにおいて、	
  
WebGLを使用したホームラン競争ゲームを作成	
  
	
  
ハチャメヂャーリーグ              1pixelブログにてThree.jsを用いた	
  
hCp://hachamajor.com/             WebGL開発を紹介	
  
アジェンダ	
•  WebGLとは	
  
•  普及状況	
  
•  セキュリティー問題	
  
•  スマホWebGL対応状況	
  
•  スマホにおけるWebGLの活用方法	
  
•  まとめ
WebGLとは	
•  WebGLは、ウェブブラウザで3次元コンピュータグラフィックスを表示させ
るための標準仕様。	
  
	
•  OpenGL	
  2.0もしくはOpenGL	
  ES	
  2.0をサポートするプラットフォーム上で、	
  
特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた
三次元グラフィックスを表示可能にする。	
  
	
•  技術的には、JavaScriptとネイティブのOpenGL	
  ES	
  2.0の	
  
バインディングである。	
  
	
  
•  WebGLは非営利団体のKhronos	
  Groupで管理されている。	
  
	
•  WebGL1.0は2011年2月に策定	
  
•  WebGLはhtml5のcanvas要素を使う
普及状況	
•  PC主要ブラウザ(※Internet	
  Explorerは11から)	
•  Android4.x〜	
  
(※Androidの詳細は後述)	
•  iPhoneは未対応	
※一部ブラウザは、標準でサポートはしておらず、	
  
  設定を変えることで使えるようになる。	
Androidでは昨年から一気に普及し始める。	
  
が、iPhoneはどうなのさ….
WebGLのセキュリティー問題	
•  クロスドメイン攻撃(cross-­‐domain	
  aCacks)	
  
•  サービス拒否(denial	
  of	
  service;	
  DoS)	
  
•  任意のコードの実行(arbitrary	
  code	
  execu7on)	
	
なんのこっちゃ	
•  GPUってそもそも高速化を目的として作られており、	
  
セキュリティーに考慮されていなかった。	
•  ハードウェアにユーザーが任意にアクセス出来てしまうので、	
  
OSが止まったりぶっ壊れる危険性あり!	
•  このスクリプトはどのぐらいの負荷なのかなんて、	
  
実行してみないとわからない!
WebGLのセキュリティー問題	
つまり	
 ※特別なブラウザのプラグインなしで、	
  
  ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。	
→逆にこれが大きな問題に!	
今はクロスドメインやDoS問題は解決済みではありますが、	
  
	
  
Appleがこんな何されるかわからない技術を、	
  
現状のiPhoneに許可するとは到底思えません。	
  
	
  
※しかしiAd内ではOK
スマホ(Android)WebGL対応状況	
Android	
  プラットフォーム稼働状況	
  
•  4.0系が14.3%	
   ※ChromeやFireFoxなど一部端末でWebGL化	
  
•  4.1〜4.4が66.7% ※WebGL標準ブラウザ含めてほぼ対応	
  
	
Android	
  Developers	
  : Dashboads	
  より 	
  
hCp://developer.android.com/about/dashboards/index.html	
4.1.x	
  
4.2.x	
  	
  	
  	
  	
  	
   	
  
4.3	
2.3.x	
  	
  	
  	
  	
  	
  
	
  	
  	
  17.8%	
4.0.3	
  	
  	
  	
  	
  	
  
4.0.4	
  
	
  	
  	
  
スマホ(Android)WebGL対応状況	
2013年の日本のスマホシェア状況	
  
•  Apple	
  46%	
  
•  Android	
  50%弱	
  
IDC	
  Japan	
  株式会社 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 図4 より 	
  
hCp://www.idcjapan.co.jp/Press/Current/20140305Apr.html
スマホ(Android)WebGL対応状況	
現状だと約40%のスマホユーザーが
WebGLコンテンツを見れる状況	
しかし、iPhoneが対応されない限り、	
  
今後増えるにしても	
  
50%までしか伸びないかも
 
	
  
ではWebGLは	
  
スマホじゃあきらめモード??
スマホにおけるWebGLの活用方法	
1. 2DでWebGLを使う	
2. ネイティブ3Dゲームの	
  
  体験版やLPなどに使用する
スマホにおけるWebGLの活用方法	
•  弱点を補い合う使い方	
  
	
  
元々2Dアニメーションに強かったiPhone(dom	
  &	
  canvas)	
  
domアニメーションに強いAndroid4.x系	
  
canvasアニメーションに弱いAndroid4.x系	
  
スマホにおけるWebGLの活用方法	
•  弱点を補い合う使い方	
  
	
  
現状様々なライブラリが、環境に応じて	
  
WebGLモードにしたり、context2dモードにしたりと、	
  
自動でフォールバックする	
  
ライブラリが増えてきています。	
  
	
  
スマホにおけるWebGLの活用方法	
1. 2DでWebGLを使う	
  
  自動でフォールバックしてくれるライブラリの紹介	
•  Pixi.js	
  
•  tofu.js	
  (弊社ライブラリ)	
  +	
  Pixi.js	
  	
  
※tofuはcanvasとhtmlをスイッチ	
  
•  CreateJS	
  (次期バージョン)	
  
etc…	
→ tofu.jsを使用したレンダラ比較	
  
hCp://ameblo.jp/ca-­‐1pixel/entry-­‐11624820713.html	
ではWebGLとcanvasとdomでどのぐらい違うのか
スマホにおけるWebGLの活用方法	
1. 2DでWebGLを使う	
  
  CreateJSでWebGL	
•  次期バージョンではあるが、	
  
CreateJS(Easeljs)でWebGL対応の開発バージョン
が公開された。	
•  自動的に環境に応じてフォールバックしてくれる	
  
ようになる。
スマホにおけるWebGLの活用方法	
1. 2DでWebGLを使う	
  
  CreateJSでWebGL	
•  WebGLが圧倒的に高いスコアを出している。	
CreateJS公式BLOGより	
  
hCp://blog.createjs.com/webgl-­‐support-­‐easeljs/
スマホにおけるWebGLの活用方法	
Toolkit	
  for	
  CreateJSでも使えるの!?
スマホにおけるWebGLの活用方法	
Toolkit	
  for	
  CreateJSとは	
Flash	
  cs6以降のextensionとして配布されているツールであり、	
  
flashで作成したタイムラインアニメーションを	
  
html5形式で書き出してくれるツールである。	
→ 弊社コンテンツの多くで採用している開発ツール
スマホにおけるWebGLの活用方法	
hCp://frontrend.github.io/events/05/	
詳しいToolkit	
  for	
  CreateJSの開発方法は、	
  
Frontrend	
  vol.5でも紹介してあります。	
  
 ※2013年5月の講演内容ですので、多少古い情報もあります。
スマホにおけるWebGLの活用方法	
Toolkit	
  for	
  CreateJSでも使えるの!?
スマホにおけるWebGLの活用方法	
•  SpriteStageとSpriteContainerクラス	
  
SpriteStageクラスは、WebGLのステージを扱います。このクラスは、おなじみのEaselJSの
Stageクラスを継承します。新たなメソッドがいくつか備わり、そして大事なことは
SpriteStage.addChild()メソッドで加えられる子が	
  
WebGLで描きやすい表示オブジェクトにかぎられることです。それらは、	
  
BitmapとSpriteにBitmapText、およびSpriteContainerです。	
※野中文雄さん html5テクニカルノート EaselJS次期バージョンでWebGLを使う より抜粋	
  
  hCp://www.fumiononaka.com/Business/html5/FN1401003.html	
MovieClip未対応!!
スマホにおけるWebGLの活用方法	
1. 2DでWebGLを使う	
  
  CreateJSでWebGL	
•  Toolkit	
  for	
  CreateJSで書き出される、タイムライン上
のインスタンスはMovieClipとして書き出しているも
のがほとんど。	
•  なので、残念ながら現状では、EaseleJSを次期バー
ジョンに差し替えればすぐにWebGLで動く、	
  
というわけではありません!!
スマホにおけるWebGLの活用方法	
1. 2DでWebGLを使う	
  
  CreateJSでWebGL	
•  TwoStage.htmlという、サンプルが	
  
Github紹介されています。	
  
hCps://github.com/CreateJS/EaselJS/blob/master/examples/WebGL/TwoStages.html	
•  	
  canvasを2つ重ねて、	
  
context2dレンダラとWebGLレンダラ分けて使用する	
  
というやり方です。
•  css	
  
•  Html	
  
	
  
	
  
•  script	
<div	
  class="canvasHolder">	
  
  <canvas	
  id="webGLCanvas"	
  width="958"	
  height="398"></canvas>	
  
  <canvas	
  id="c2dCanvas"	
  width="958"	
  height="160"></canvas>	
  
</div>	
webGLStage	
  =	
  new	
  createjs.SpriteStage("webGLCanvas");	
  
c2dStage	
  =	
  new	
  createjs.Stage("c2dCanvas");	
  
createjs.Ticker.setFPS(50);	
  
createjs.Ticker.addEventListener("7ck",	
  c2dStage	
  );	
  
createjs.Ticker.addEventListener("7ck",	
  webGLStage);	
.canvasHolder	
  {	
  
	
  	
  	
  posi7on:	
  rela7ve;	
  
}	
  
#webGLCanvas	
  ,	
  #c2dCanvas	
  {	
  
	
  	
  	
  posi7on:	
  absolute;	
  	
  
	
  	
  	
  lep:	
  0;	
  
	
  	
  	
  top:	
  0;	
  
}
スマホにおけるWebGLの活用方法	
1. 2DでWebGLを使う	
  
  CreateJSでWebGL	
•  これにより、基本アニメーションは	
  
Flashで作成(context2d依存)	
  
しつつ、	
  
	
  
処理負荷の高いパーティクル等を	
  
SpriteStage(WebGL依存)に分ける	
  
	
  
といったことをします。
•  パーティクルのスクリプトを用意	
var	
  spriteSheet	
  =	
  new	
  createjs.SpriteSheet({	
  
	
  	
  	
  images:	
  ['images/kira.png'],	
  	
  frames:	
  {width:52,	
  height:52},	
  anima7ons:	
  {	
  out:	
  0,	
  over:	
  1,	
  down:	
  2	
  }	
  
});	
  
var	
  _par7cleList	
  =	
  [];	
  
for	
  (var	
  i	
  =	
  0;	
  i	
  <	
  1000;	
  i++)	
  {	
  
	
  	
  	
  	
  var	
  _par7cle	
  =	
  new	
  createjs.Sprite(spriteSheet,	
  "up");	
  
	
  	
  	
  	
  var	
  _x	
  =	
  160	
  +	
  ((Math.random()	
  *	
  20)|0)	
  -­‐	
  10;	
  
	
  	
  	
  	
  var	
  _y	
  =	
  200	
  +	
  ((Math.random()	
  *	
  20)|0)	
  -­‐	
  10;	
  
	
  	
  	
  	
  	
  
	
  	
  	
  	
  _par7cle.vecX	
  =	
  _x	
  -­‐	
  160;	
  
	
  	
  	
  	
  _par7cle.kira.vecY	
  =	
  _y	
  -­‐	
  200	
  -­‐	
  10;	
  
	
  
	
  	
  	
  	
  webGLStage.addChild(_par7cle).set({x:_x,	
  y:_y});	
  
	
  	
  	
  	
  _par7cleList.push(_par7cle);	
  
};	
  
webGLStage.addEventListener('7ck',	
  func7on(){	
  
	
  	
  	
  	
  for	
  (var	
  i	
  =	
  0;	
  i	
  <	
  _par7cleList.length;	
  i++)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  var	
  _sp	
  =	
  _par7cleList[i];	
  
	
  	
  	
  	
  	
  	
  	
  	
  _sp.rota7on+=5;	
  
	
  	
  	
  	
  	
  	
  	
  	
  _sp.x	
  +=	
  _sp.vecX;	
  
	
  	
  	
  	
  	
  	
  	
  	
  _sp.vecX	
  *=	
  0.9;	
  
	
  	
  	
  	
  	
  	
  	
  	
  _sp.y	
  +=	
  _sp.vecY;	
  
	
  	
  	
  	
  	
  	
  	
  	
  _sp.vecY	
  +=	
  1;	
  
	
  	
  	
  	
  };	
  
})	
  
作っては見たけど	
  
正直めんどくさいです。	
  
	
  
WebGLStageにaddChildするものはscriptで用意せにゃならんし
いくつか書き出されたソースの	
  
修正もあったりです。
Grunt.jsなどを使用して	
  
自動でソースを書き換えるような	
  
モジュールを作れないかな
それか、	
  
Toolkit	
  for	
  CreateJSの	
  
バージョンアップを期待!
2. ネイティブ3Dゲームの	
  
  体験版やLPなどに使用する	
スマホにおけるWebGLの活用方法	
•  ゲームエンジンなどのミドルウエアを利用した開発	
  
※Unity5	
  からhtml5書き出しが出来るようになる	
  
	
  
•  Three.jsやAway3D.jsなど、WebGLに特化したライブ
ラリによる開発	
  
	
  
2. ネイティブ3Dゲームの	
  
  体験版やLPなどに使用する	
スマホにおけるWebGLの活用方法	
•  ゲームエンジンなどのミドルウエアを利用した開発	
  
※Unity5	
  からhtml5書き出しが出来るようになる	
  
	
  
•  Three.jsやAway3D.jsなど、WebGLに特化したライブ
ラリによる開発	
  
スマホにおけるWebGLの活用方法	
•  UnityやCocos2d-­‐x、Unreal-­‐Engineなど	
  
ミドルウェアのWebGL対応化が進んでいる。	
  
	
  
これらを使わない手はないです。	
•  Three.jsやAway3D.jsなどのライブラリは	
  
コーディング実装して行くには	
  
開発運用コストがでかいです。	
  
 ※バージョンアップで動かなくなるケースも
スマホにおけるWebGLの活用方法	
  
まとめ	
•  スマホにおけるWebGLの対応状況は40%	
  
※Androidでは70〜80%	
•  iPhoneはしばらく対応難しそうな予感	
•  2Dコンテンツでは、フォールバックしてくれる	
  
ライブラリを活用	
•  3Dネイティブアプリの体験版やLPでの活用が
増えてくるかも
 
	
  
ご清聴ありがとうございました。

More Related Content

What's hot

What's hot (20)

デキるプログラマだけが知っているコードレビュー7つの秘訣
デキるプログラマだけが知っているコードレビュー7つの秘訣デキるプログラマだけが知っているコードレビュー7つの秘訣
デキるプログラマだけが知っているコードレビュー7つの秘訣
 
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
 
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
サービスブループリントによるシステム設計手法の紹介 - XP祭り2022
 
テストコードの DRY と DAMP
テストコードの DRY と DAMPテストコードの DRY と DAMP
テストコードの DRY と DAMP
 
ちょっと使えるようになる信頼度成長曲線(移行済)
ちょっと使えるようになる信頼度成長曲線(移行済)ちょっと使えるようになる信頼度成長曲線(移行済)
ちょっと使えるようになる信頼度成長曲線(移行済)
 
事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のり事業成長にコミットするエンジニア組織への道のり
事業成長にコミットするエンジニア組織への道のり
 
CircleCI vs. CodePipeline
CircleCI vs. CodePipelineCircleCI vs. CodePipeline
CircleCI vs. CodePipeline
 
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
 
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
 
JJUG CCC リクルートの Java に対する取り組み
JJUG CCC リクルートの Java に対する取り組みJJUG CCC リクルートの Java に対する取り組み
JJUG CCC リクルートの Java に対する取り組み
 
LayerXのQAチームで目指したい動き方 (社内資料)
LayerXのQAチームで目指したい動き方 (社内資料)LayerXのQAチームで目指したい動き方 (社内資料)
LayerXのQAチームで目指したい動き方 (社内資料)
 
Helidon 概要
Helidon 概要Helidon 概要
Helidon 概要
 
アジャイル開発を支えるアーキテクチャ設計とは
アジャイル開発を支えるアーキテクチャ設計とはアジャイル開発を支えるアーキテクチャ設計とは
アジャイル開発を支えるアーキテクチャ設計とは
 
Example of exiting legacy system
Example of exiting legacy systemExample of exiting legacy system
Example of exiting legacy system
 
ユーザーストーリー・マッピング
ユーザーストーリー・マッピングユーザーストーリー・マッピング
ユーザーストーリー・マッピング
 
カネとAgile #RSGT2018
カネとAgile #RSGT2018カネとAgile #RSGT2018
カネとAgile #RSGT2018
 
GxPユニットテスト研修
GxPユニットテスト研修GxPユニットテスト研修
GxPユニットテスト研修
 
コードレビューを文化にするまでの取り組み.pdf
コードレビューを文化にするまでの取り組み.pdfコードレビューを文化にするまでの取り組み.pdf
コードレビューを文化にするまでの取り組み.pdf
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
 
ユースケースからテスト駆動開発へ
ユースケースからテスト駆動開発へユースケースからテスト駆動開発へ
ユースケースからテスト駆動開発へ
 

Viewers also liked

海外向けスマホアプリプロモーションサービスについて
海外向けスマホアプリプロモーションサービスについて海外向けスマホアプリプロモーションサービスについて
海外向けスマホアプリプロモーションサービスについて
TakashiOkaniwa
 
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
Fujio Kojima
 
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座12015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
Hokuto Tateyama
 
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況 Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
Masakazu Muraoka
 

Viewers also liked (20)

WebGLことはじめ
WebGLことはじめWebGLことはじめ
WebGLことはじめ
 
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチングシェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチング
 
子どもがOculusダメな理由を調べてみた
子どもがOculusダメな理由を調べてみた子どもがOculusダメな理由を調べてみた
子どもがOculusダメな理由を調べてみた
 
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
 
パノラマ動画VR再生のあれこれ
パノラマ動画VR再生のあれこれパノラマ動画VR再生のあれこれ
パノラマ動画VR再生のあれこれ
 
海外向けスマホアプリプロモーションサービスについて
海外向けスマホアプリプロモーションサービスについて海外向けスマホアプリプロモーションサービスについて
海外向けスマホアプリプロモーションサービスについて
 
クロスプロモーション(無料のプロモーション)でスマホアプリの広告収益最大化
クロスプロモーション(無料のプロモーション)でスマホアプリの広告収益最大化クロスプロモーション(無料のプロモーション)でスマホアプリの広告収益最大化
クロスプロモーション(無料のプロモーション)でスマホアプリの広告収益最大化
 
チョコ溶かす奴
チョコ溶かす奴チョコ溶かす奴
チョコ溶かす奴
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分
 
ブラウザのハードウェア対応の未来を探る
ブラウザのハードウェア対応の未来を探るブラウザのハードウェア対応の未来を探る
ブラウザのハードウェア対応の未来を探る
 
Androidアプリケーション開発入門
Androidアプリケーション開発入門Androidアプリケーション開発入門
Androidアプリケーション開発入門
 
Grimoire.js Community announcement June 20 2016
Grimoire.js Community announcement June 20 2016Grimoire.js Community announcement June 20 2016
Grimoire.js Community announcement June 20 2016
 
20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi
 
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
 
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPIWindows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
 
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
 
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014
 
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座12015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1
 
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況 Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況
 
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeiOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPractice
 

Similar to スマホにおけるWebGL入門

2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
Takashi Endo
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
Taku AMANO
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
Tak Inamori
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
 
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub  (#kyotojs)JavaScript on GitHub  (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
 

Similar to スマホにおけるWebGL入門 (20)

2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
 
HTML5-20100626
HTML5-20100626HTML5-20100626
HTML5-20100626
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
 
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training SlideLabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
 
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
 
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
[使い倒し]GitHubのIssueとTFS/VSOのWorkItem連動に挑む(2015/08/26)
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
Jqm20120804 publish
Jqm20120804 publishJqm20120804 publish
Jqm20120804 publish
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
 
Wordpress on gae se
Wordpress on gae se Wordpress on gae se
Wordpress on gae se
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
 
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub  (#kyotojs)JavaScript on GitHub  (#kyotojs)
JavaScript on GitHub (#kyotojs)
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイドXPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
 
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
 
HTML5 & The Web Platform
HTML5 & The Web PlatformHTML5 & The Web Platform
HTML5 & The Web Platform
 

Recently uploaded

2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
 

Recently uploaded (11)

2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
 
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
 
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 

スマホにおけるWebGL入門