SlideShare ist ein Scribd-Unternehmen logo
1 von 9
東の方からきました

 2012/4/29 LT@鹿駆動開発
       @hakobera
誰?

• 本多 一行 / Kazuyuki Honda
• twitter: @hakobera
• 仕事は Java
 • Playframework アツい
鹿駆動に参加したきっかけ



•
能楽堂でLTできる
と聞いて
鹿駆動に参加したきっかけ

•能楽堂

 •能(楽)堂

 •のうどう

 •Node !?
と言うことで
今日は Node.js の話
JavaScript の限界突破

• WebRTC
 • Camera! Audio!
• WebSocket
 • Push!Realtime! Reactive!
WebRTC で顔認識
WebRTCで取得した画像から ccv.js で顔認識 (抜粋)
// GetUserMedia で Web カメラから動画を取得
navigator.webkitGetUserMedia("video", success, fail);


function success(stream) {
  var url = webkitURL.createObjectURL(stream);
  srcStream.src = url;
  setInterval(draw, 500);
}


function draw() {
 workContext.drawImage(srcStream, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 destContext.drawImage(srcStream, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);


    // Canvas に描画されたピクセルデータから ccv.js で顔認識
    var comp = ccv.detect_objects({"canvas":ccv.grayscale(workCanvas),
     "cascade":cascade,
     "interval":5,
     "min_neighbors":1 });


    // 認識された顔の位置に鹿の画像を合成
    for (var i = 0, length = comp.length; i < length; i++) {
      destContext.drawImage(personaImage, comp[i].x - 50, comp[i].y - 70, comp[i].width + 120, comp[i].height + 120);
    }


    // Socket.IO で共有
    socket.emit('face', destCanvas.toDataURL("image/jpeg"));
}


                                                                                         たったこれだけ
JavaScript も
ここまできた

Weitere ähnliche Inhalte

Andere mochten auch

Neo4j の「データ操作プログラミング」から 「ビジュアライズ」まで
Neo4j の「データ操作プログラミング」から 「ビジュアライズ」までNeo4j の「データ操作プログラミング」から 「ビジュアライズ」まで
Neo4j の「データ操作プログラミング」から 「ビジュアライズ」までKeiichiro Seida
 
グラフデータベース「Neo4j」の 導入の導入
グラフデータベース「Neo4j」の 導入の導入グラフデータベース「Neo4j」の 導入の導入
グラフデータベース「Neo4j」の 導入の導入Hisao Soyama
 
[Golang] Go言語でサービス作ってる話
[Golang] Go言語でサービス作ってる話[Golang] Go言語でサービス作ってる話
[Golang] Go言語でサービス作ってる話株式会社YEBIS.XYZ
 
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜Takahiro Inoue
 
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Yasutaka Kawamoto
 
FINAL FANTASY Record Keeperを支えたGolang
FINAL FANTASY Record Keeperを支えたGolangFINAL FANTASY Record Keeperを支えたGolang
FINAL FANTASY Record Keeperを支えたGolangYoshiki Shibukawa
 

Andere mochten auch (7)

Neo4j の「データ操作プログラミング」から 「ビジュアライズ」まで
Neo4j の「データ操作プログラミング」から 「ビジュアライズ」までNeo4j の「データ操作プログラミング」から 「ビジュアライズ」まで
Neo4j の「データ操作プログラミング」から 「ビジュアライズ」まで
 
グラフデータベース「Neo4j」の 導入の導入
グラフデータベース「Neo4j」の 導入の導入グラフデータベース「Neo4j」の 導入の導入
グラフデータベース「Neo4j」の 導入の導入
 
[Golang] Go言語でサービス作ってる話
[Golang] Go言語でサービス作ってる話[Golang] Go言語でサービス作ってる話
[Golang] Go言語でサービス作ってる話
 
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
 
Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方Go言語によるwebアプリの作り方
Go言語によるwebアプリの作り方
 
GoでMinecraftっぽいの作る
GoでMinecraftっぽいの作るGoでMinecraftっぽいの作る
GoでMinecraftっぽいの作る
 
FINAL FANTASY Record Keeperを支えたGolang
FINAL FANTASY Record Keeperを支えたGolangFINAL FANTASY Record Keeperを支えたGolang
FINAL FANTASY Record Keeperを支えたGolang
 

Ähnlich wie 東の方からきました@鹿駆動勉強会

JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカJavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカYuuichi Akagawa
 
Web socketドロンくん その後-
Web socketドロンくん その後-Web socketドロンくん その後-
Web socketドロンくん その後-Yuuichi Akagawa
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Daisuke Imai
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Toshiro Shimizu
 
CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現AdvancedTechNight
 
Azure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionAzure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionYoshitaka Seo
 
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
 
from old HTML to modern HTML
from old HTML to modern HTMLfrom old HTML to modern HTML
from old HTML to modern HTMLxyzplus_net
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用Yatabe Terumasa
 
Web Audio APIでシンセサイザーの作成
Web Audio APIでシンセサイザーの作成Web Audio APIでシンセサイザーの作成
Web Audio APIでシンセサイザーの作成aike
 
Core Animation 使って見た
Core Animation 使って見たCore Animation 使って見た
Core Animation 使って見たOCHI Shuji
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejsTakayoshi Tanaka
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium MobileNaoya Ito
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 

Ähnlich wie 東の方からきました@鹿駆動勉強会 (20)

JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカJavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
 
Web socketドロンくん その後-
Web socketドロンくん その後-Web socketドロンくん その後-
Web socketドロンくん その後-
 
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
 
CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現CSSだけで実現するグラフィック表現
CSSだけで実現するグラフィック表現
 
Arctic.js
Arctic.jsArctic.js
Arctic.js
 
Azure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionAzure IoT Edge で Custom Vision
Azure IoT Edge で Custom Vision
 
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)
 
from old HTML to modern HTML
from old HTML to modern HTMLfrom old HTML to modern HTML
from old HTML to modern HTML
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 
Web Audio APIでシンセサイザーの作成
Web Audio APIでシンセサイザーの作成Web Audio APIでシンセサイザーの作成
Web Audio APIでシンセサイザーの作成
 
HTML5 on ASP.NET
HTML5 on ASP.NETHTML5 on ASP.NET
HTML5 on ASP.NET
 
Core Animation 使って見た
Core Animation 使って見たCore Animation 使って見た
Core Animation 使って見た
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 

Mehr von Kazuyuki Honda

5分でできる ebfly
5分でできる ebfly5分でできる ebfly
5分でできる ebflyKazuyuki Honda
 
10分で作る Node.js Auto Scale 環境 with CloudFormation
10分で作る Node.js Auto Scale 環境 with CloudFormation10分で作る Node.js Auto Scale 環境 with CloudFormation
10分で作る Node.js Auto Scale 環境 with CloudFormationKazuyuki Honda
 
Run Multi Version of Node.js on Heroku
Run Multi Version of Node.js on HerokuRun Multi Version of Node.js on Heroku
Run Multi Version of Node.js on HerokuKazuyuki Honda
 
Noder が Titanium Mobile で 作ってみた
Noder が Titanium Mobile で 作ってみた Noder が Titanium Mobile で 作ってみた
Noder が Titanium Mobile で 作ってみた Kazuyuki Honda
 
enchant.js source reading
enchant.js source readingenchant.js source reading
enchant.js source readingKazuyuki Honda
 

Mehr von Kazuyuki Honda (6)

5分でできる ebfly
5分でできる ebfly5分でできる ebfly
5分でできる ebfly
 
10分で作る Node.js Auto Scale 環境 with CloudFormation
10分で作る Node.js Auto Scale 環境 with CloudFormation10分で作る Node.js Auto Scale 環境 with CloudFormation
10分で作る Node.js Auto Scale 環境 with CloudFormation
 
Run Multi Version of Node.js on Heroku
Run Multi Version of Node.js on HerokuRun Multi Version of Node.js on Heroku
Run Multi Version of Node.js on Heroku
 
Noder が Titanium Mobile で 作ってみた
Noder が Titanium Mobile で 作ってみた Noder が Titanium Mobile で 作ってみた
Noder が Titanium Mobile で 作ってみた
 
enchant.js source reading
enchant.js source readingenchant.js source reading
enchant.js source reading
 
Kinect de-theremin
Kinect de-thereminKinect de-theremin
Kinect de-theremin
 

Kürzlich hochgeladen

IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 

Kürzlich hochgeladen (8)

IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 

東の方からきました@鹿駆動勉強会

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n