SlideShare a Scribd company logo
1 of 37
Download to read offline
スマホにおける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

Lx styleのご紹介201009
Lx styleのご紹介201009Lx styleのご紹介201009
Lx styleのご紹介201009Tadashi Sugita
 
自動運転サービスの認証認可
自動運転サービスの認証認可自動運転サービスの認証認可
自動運転サービスの認証認可Kotaro Hoshi
 
Well-Architectedな組織を
実現するためのチャレンジ - なぜ、CA W-Aを作ろうと思ったのか - #jawsdays 2019
Well-Architectedな組織を
実現するためのチャレンジ - なぜ、CA W-Aを作ろうと思ったのか - #jawsdays 2019Well-Architectedな組織を
実現するためのチャレンジ - なぜ、CA W-Aを作ろうと思ったのか - #jawsdays 2019
Well-Architectedな組織を
実現するためのチャレンジ - なぜ、CA W-Aを作ろうと思ったのか - #jawsdays 2019Shota Tsuge
 
"Kong Summit, Japan 2022" パートナーセッション:Kong on AWS で実現するスケーラブルな API 基盤の構築
"Kong Summit, Japan 2022" パートナーセッション:Kong on AWS で実現するスケーラブルな API 基盤の構築"Kong Summit, Japan 2022" パートナーセッション:Kong on AWS で実現するスケーラブルな API 基盤の構築
"Kong Summit, Japan 2022" パートナーセッション:Kong on AWS で実現するスケーラブルな API 基盤の構築Junji Nishihara
 
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみたAmazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみたmganeko
 
機械学習プラットフォーム5つの課題とAmazon SageMakerの4つの利点
機械学習プラットフォーム5つの課題とAmazon SageMakerの4つの利点機械学習プラットフォーム5つの課題とAmazon SageMakerの4つの利点
機械学習プラットフォーム5つの課題とAmazon SageMakerの4つの利点西岡 賢一郎
 
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころPython におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころJunya Hayashi
 
SQLインジェクション再考
SQLインジェクション再考SQLインジェクション再考
SQLインジェクション再考Hiroshi Tokumaru
 
スタディサプリを支えるデータ分析基盤 ~設計の勘所と利活用事例~
スタディサプリを支えるデータ分析基盤 ~設計の勘所と利活用事例~スタディサプリを支えるデータ分析基盤 ~設計の勘所と利活用事例~
スタディサプリを支えるデータ分析基盤 ~設計の勘所と利活用事例~Tetsuo Yamabe
 
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Teruchika Yamada
 
WebGL Performance Tuning Tips
WebGL Performance Tuning TipsWebGL Performance Tuning Tips
WebGL Performance Tuning TipsYukio Andoh
 
NuxtでChrome拡張作ってみた
NuxtでChrome拡張作ってみたNuxtでChrome拡張作ってみた
NuxtでChrome拡張作ってみたkyoheichida
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことAmazon Web Services Japan
 
設計品質とアーキテクチャ
設計品質とアーキテクチャ設計品質とアーキテクチャ
設計品質とアーキテクチャToru Koido
 
DevOpsに求められる様々な技術とその連携の学習方法
DevOpsに求められる様々な技術とその連携の学習方法DevOpsに求められる様々な技術とその連携の学習方法
DevOpsに求められる様々な技術とその連携の学習方法CASAREAL, Inc.
 
(2017.6.9) Neo4jの可視化ライブラリまとめ
(2017.6.9) Neo4jの可視化ライブラリまとめ(2017.6.9) Neo4jの可視化ライブラリまとめ
(2017.6.9) Neo4jの可視化ライブラリまとめMitsutoshi Kiuchi
 
ウェブセキュリティのありがちな誤解を解説する
ウェブセキュリティのありがちな誤解を解説するウェブセキュリティのありがちな誤解を解説する
ウェブセキュリティのありがちな誤解を解説するHiroshi Tokumaru
 
ソーシャルアプリにおけるRedisの活用事例とトラブル事例
ソーシャルアプリにおけるRedisの活用事例とトラブル事例ソーシャルアプリにおけるRedisの活用事例とトラブル事例
ソーシャルアプリにおけるRedisの活用事例とトラブル事例leverages_event
 
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAオーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAOre Product
 

What's hot (20)

Lx styleのご紹介201009
Lx styleのご紹介201009Lx styleのご紹介201009
Lx styleのご紹介201009
 
自動運転サービスの認証認可
自動運転サービスの認証認可自動運転サービスの認証認可
自動運転サービスの認証認可
 
Well-Architectedな組織を
実現するためのチャレンジ - なぜ、CA W-Aを作ろうと思ったのか - #jawsdays 2019
Well-Architectedな組織を
実現するためのチャレンジ - なぜ、CA W-Aを作ろうと思ったのか - #jawsdays 2019Well-Architectedな組織を
実現するためのチャレンジ - なぜ、CA W-Aを作ろうと思ったのか - #jawsdays 2019
Well-Architectedな組織を
実現するためのチャレンジ - なぜ、CA W-Aを作ろうと思ったのか - #jawsdays 2019
 
"Kong Summit, Japan 2022" パートナーセッション:Kong on AWS で実現するスケーラブルな API 基盤の構築
"Kong Summit, Japan 2022" パートナーセッション:Kong on AWS で実現するスケーラブルな API 基盤の構築"Kong Summit, Japan 2022" パートナーセッション:Kong on AWS で実現するスケーラブルな API 基盤の構築
"Kong Summit, Japan 2022" パートナーセッション:Kong on AWS で実現するスケーラブルな API 基盤の構築
 
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみたAmazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
 
機械学習プラットフォーム5つの課題とAmazon SageMakerの4つの利点
機械学習プラットフォーム5つの課題とAmazon SageMakerの4つの利点機械学習プラットフォーム5つの課題とAmazon SageMakerの4つの利点
機械学習プラットフォーム5つの課題とAmazon SageMakerの4つの利点
 
Python におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころPython におけるドメイン駆動設計(戦術面)の勘どころ
Python におけるドメイン駆動設計(戦術面)の勘どころ
 
SQLインジェクション再考
SQLインジェクション再考SQLインジェクション再考
SQLインジェクション再考
 
スタディサプリを支えるデータ分析基盤 ~設計の勘所と利活用事例~
スタディサプリを支えるデータ分析基盤 ~設計の勘所と利活用事例~スタディサプリを支えるデータ分析基盤 ~設計の勘所と利活用事例~
スタディサプリを支えるデータ分析基盤 ~設計の勘所と利活用事例~
 
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
Power BI をアプリに埋め込みたい? ならば Power BI Embedded だ!
 
WebGL Performance Tuning Tips
WebGL Performance Tuning TipsWebGL Performance Tuning Tips
WebGL Performance Tuning Tips
 
NuxtでChrome拡張作ってみた
NuxtでChrome拡張作ってみたNuxtでChrome拡張作ってみた
NuxtでChrome拡張作ってみた
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
 
設計品質とアーキテクチャ
設計品質とアーキテクチャ設計品質とアーキテクチャ
設計品質とアーキテクチャ
 
自宅k8s/vSphere入門
自宅k8s/vSphere入門自宅k8s/vSphere入門
自宅k8s/vSphere入門
 
DevOpsに求められる様々な技術とその連携の学習方法
DevOpsに求められる様々な技術とその連携の学習方法DevOpsに求められる様々な技術とその連携の学習方法
DevOpsに求められる様々な技術とその連携の学習方法
 
(2017.6.9) Neo4jの可視化ライブラリまとめ
(2017.6.9) Neo4jの可視化ライブラリまとめ(2017.6.9) Neo4jの可視化ライブラリまとめ
(2017.6.9) Neo4jの可視化ライブラリまとめ
 
ウェブセキュリティのありがちな誤解を解説する
ウェブセキュリティのありがちな誤解を解説するウェブセキュリティのありがちな誤解を解説する
ウェブセキュリティのありがちな誤解を解説する
 
ソーシャルアプリにおけるRedisの活用事例とトラブル事例
ソーシャルアプリにおけるRedisの活用事例とトラブル事例ソーシャルアプリにおけるRedisの活用事例とトラブル事例
ソーシャルアプリにおけるRedisの活用事例とトラブル事例
 
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiAオーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
 

Viewers also liked

WebGLことはじめ
WebGLことはじめWebGLことはじめ
WebGLことはじめKazuya Hiruma
 
シェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチングシェーダだけで世界を創る!three.jsによるレイマーチング
シェーダだけで世界を創る!three.jsによるレイマーチングSho Hosoda
 
子どもがOculusダメな理由を調べてみた
子どもがOculusダメな理由を調べてみた子どもがOculusダメな理由を調べてみた
子どもがOculusダメな理由を調べてみたHiromichi Yamada
 
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)
Rubyで連結リスト使うためのgemを作った(tsukuba.rb版)Sho Hosoda
 
パノラマ動画VR再生のあれこれ
パノラマ動画VR再生のあれこれパノラマ動画VR再生のあれこれ
パノラマ動画VR再生のあれこれMakotoItoh
 
海外向けスマホアプリプロモーションサービスについて
海外向けスマホアプリプロモーションサービスについて海外向けスマホアプリプロモーションサービスについて
海外向けスマホアプリプロモーションサービスについてTakashiOkaniwa
 
クロスプロモーション(無料のプロモーション)でスマホアプリの広告収益最大化
クロスプロモーション(無料のプロモーション)でスマホアプリの広告収益最大化クロスプロモーション(無料のプロモーション)でスマホアプリの広告収益最大化
クロスプロモーション(無料のプロモーション)でスマホアプリの広告収益最大化TakashiOkaniwa
 
チョコ溶かす奴
チョコ溶かす奴チョコ溶かす奴
チョコ溶かす奴翔 石井
 
Three.jsで3D気分
Three.jsで3D気分 Three.jsで3D気分
Three.jsで3D気分 Toshio Ehara
 
ブラウザのハードウェア対応の未来を探る
ブラウザのハードウェア対応の未来を探るブラウザのハードウェア対応の未来を探る
ブラウザのハードウェア対応の未来を探るndruger
 
Androidアプリケーション開発入門
Androidアプリケーション開発入門Androidアプリケーション開発入門
Androidアプリケーション開発入門OESF Education
 
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-deviceapiNoritada Shimizu
 
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~Xamarin ~ iOS/Android/Windows アプリをC# で作ろう~
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~Fujio Kojima
 
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPIWindows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPIOsamu Monoe
 
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)ssuserd60633
 
ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014ウェブ標準デバイス系 API 総集編 2014
ウェブ標準デバイス系 API 総集編 2014Futomi Hatano
 
2015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座12015年度研究室プレ卒研用Android講座1
2015年度研究室プレ卒研用Android講座1Hokuto Tateyama
 
Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況 Android webブラウザのhtml5対応状況
Android webブラウザのhtml5対応状況 Masakazu Muraoka
 
iOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeiOSやAndroidアプリ開発のGoodPractice
iOSやAndroidアプリ開発のGoodPracticeKen Morishita
 

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-20100626Taku AMANO
 
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門HTML5の前のJavaScript入門
HTML5の前のJavaScript入門Hiroki Toyokawa
 
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training SlideLabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training SlideYusuke Tochigi
 
もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装もっと良くなるHTMLアプリケーション設計と実装
もっと良くなるHTMLアプリケーション設計と実装Mitsue-Links
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化Takashi Okamoto
 
[使い倒し]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)Masanori Ishigami
 
~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~~初心者がこれから Web アプリの開発をするために~
~初心者がこれから Web アプリの開発をするために~Oda Shinsuke
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキングTakashi Okamoto
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324Tak Inamori
 
Wordpress on gae se
Wordpress on gae se Wordpress on gae se
Wordpress on gae se Hayato Ito
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
【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)y_uuki
 
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発Yuta Matsumura
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
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プラクティスガイドTetsuji Hayashi
 
2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化2021/03/19 パブリッククラウドを活かす運用プロセス自動化
2021/03/19 パブリッククラウドを活かす運用プロセス自動化Issei Hiraoka
 
HTML5 & The Web Platform
HTML5 & The Web PlatformHTML5 & The Web Platform
HTML5 & The Web PlatformMasataka Yakura
 

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 アプリの開発をするために~
 
Jqm20120804 publish
Jqm20120804 publishJqm20120804 publish
Jqm20120804 publish
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
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

「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 

Recently uploaded (11)

「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 

スマホにおけるWebGL入門