Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

デブコミュ#20150312

CYBIRDエンジニアの社内LTイベントにお呼ばれした時に発表した内容です。
RaspberryPiに接続したセンサーの情報をWebSocket経由でPushすることで、JavaScriptから簡単に使ってみようという試みです。

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

デブコミュ#20150312

  1. 1. 2015/03/12 CYBIRD デブコミュ
  2. 2. こんば んは!
  3. 3. 社外から飛び入り参加の 「今井」です
  4. 4. っていうか、お前だれよ?
  5. 5. 今井 大介 IMAI, Daisuke 1972/07/17生まれ42歳 BEENOS株式会社 執行役員(技術担当) ・グループ内のIT基盤、セキュリティ基盤の管理 ・新規事業立ち上げ ・エンジニアリング&デザイン ・EC/決済
  6. 6. 1997∼ 【新卒】株式会社ベネッセコーポレーション 2000∼ 【起業】ギガフロップス株式会社 携帯向けのポータルサイトの立ち上げ、副社長兼CTO 2003∼ 【バイアウト】株式会社サイバード 事業並びに会社の売却→技術部マネージャ 2005∼ 【Uターン】石見ケーブルビジョン株式会社 CATV事業の立ち上げでインターネット側の担当 2010∼ 株式会社ネットプライスドットコム →BEENOS株式会社(社名変更:現職)
  7. 7. 簡単に言うと、 OBのエンジニアです。
  8. 8. 【得意な領域】 インフラ>サーバーサイド> Webフロントエンド>NativeApp 言語はPHPが一番長い 【好きな技術】 AWS(OpsWorks、S3)
  9. 9. BEENOS株式会社
  10. 10. 1999年「ネットプライス」として創業。 モバイルネット通販の第一人者として成長。 2004年マザーズ上場。 2007年より持株会社、グループ経営体制に。 2014年社名を「BEENOS株式会社」に。 クロスボーダー(越境)ECを強みとした企業グループ。海外 から日本の商品を買いたい人に向け、また国内で海外の商品を 買いたい人に向けたサービスなどを展開。 また、USでは30を超えるスタートアップに投資、アジアで はECマーケットプレイスや決済を手がけるスタートアップへ の投資・育成にも取り組んでいる。
  11. 11. 無茶ばかりしています。
  12. 12. 「新規事業を始めたい、 できれば1ヶ月以内に」
  13. 13. 「エンジニアいないけど」
  14. 14. 「大規模アクセスが想定される 通販サイトたちあげたい、 一ヶ月で」
  15. 15. 「エンジニアいないけど」
  16. 16. なのでエンジニアとデザイナの ハンズオンチーム作ってました
  17. 17. 最近の興味
  18. 18. 「ロボット」や「IoT」で 一緒に遊ぶ人が増得ると楽しい
  19. 19. 「IoT気になるよね」 じゃ、ハードウェアで 遊んでみればいいじゃない。 BEENOS Inc. 執行役員(技術担当) 今井大介
  20. 20. ハードウェアの印象
  21. 21. 電気回路とかよくわからないし アセンブラとか割り込みとか? 特殊な開発環境と言語? 感電したりするんじゃないの? ハードウェアが趣味とかモテなくね?
  22. 22. 「とにかく敷居高い」
  23. 23. そんなことない。
  24. 24. 例えばArduino
  25. 25. 無料の専用IDE(Win/Mac/Linux) C言語ライクな専用言語 簡易にハードを扱うライブラリ 回路わからなくてもコードで何とか 「とにかく敷居は下がった」
  26. 26. それでも感じる超えられない壁
  27. 27. ならば、ハードウェア部分は 隠匿してしまえばいい
  28. 28. お手本にするもの
  29. 29. 【LeapMotionとは】 空中の手のジェスチャーでパソコンを操作でき るUSBデバイス。マイノリティ・リポートか! みたいな感じで。C++やJavaScriptなどか ら制御可能。
  30. 30. leap.jsって 結構面白い仕組み
  31. 31. C++で動かす場合の仕組み
  32. 32. JavaScriptを使う場合
  33. 33. なんと、WebSocket Server
  34. 34. デバイス制御コードはシンプルなプログラムにして、 WebSocket経由でJavaScriptからアクセスさせれば、 普段から書き慣れているJavaScriptで 色々なアプリケーション作れるじゃないか!
  35. 35. 【使う機材】 ・RaspberryPi A+(約3,500円) ・3軸加速度+ジャイロセンサー(約500円)
  36. 36. 【RaspberryPi】 DebianベースのLinux。/bin/shで も、pythonでもrubyでも好きな言語 でハードウェア制御コードが書ける。も ちろん、LAMP環境なども作れる。
  37. 37. それなら書けるよね?
  38. 38. 【pythonでデバイス制御】 ・pythonからRPiのピンを利用 ・センサーとはI2Cというシリアル通信 電源2本と信号線2本の4本だけのシンプル な接続で利用可能。最近デバイスがどんどん 増えている。 ・ごくごく単純な数値変換だけは実施
  39. 39. 【WebSocket Server】 ・python+Tornadoで簡単に実装 ・cross originのアクセスの許容 ・thread切って、デバイスから数値取得 ・数値データをJSONでpush
  40. 40. { "gyro": { "x": -605, "y": 16, "z": -114 }, "accelerometer": { "x": -840, "y": -20, "z": 15736 }, "rotation": { "x": -0.07271770519639839, "y": 3.055590994479732 } } 投げられるJSON
  41. 41. 【JavaScript側の実装】 ・最近のブラウザならWebSocket対応 ・Serverに接続していれば、pushされれば ws.onmessageイベントハンドラが呼び出 される。 ・JSONデータをパースしてあげればいい
  42. 42. (DEMO)
  43. 43. <html> <head> <title></title> <script language="javascript"> var ws = new WebSocket("ws://192.168.13.101:8080/ws"); ws.onopen = function() { ws.send("Hello"); }; ws.onmessage = function (evt) { try { var obj = JSON.parse(evt.data); document.getElementById('gyro_x').innerHTML = obj["gyro"]["x"]; document.getElementById('gyro_y').innerHTML = obj["gyro"]["y"]; document.getElementById('gyro_z').innerHTML = obj["gyro"]["z"]; document.getElementById('accel_x').innerHTML = obj["accelerometer"]["x"]; document.getElementById('accel_y').innerHTML = obj["accelerometer"]["y"]; document.getElementById('accel_z').innerHTML = obj["accelerometer"]["z"]; document.getElementById('rotate_x').innerHTML = obj["rotation"]["x"]; document.getElementById('rotate_y').innerHTML = obj["rotation"]["y"]; } catch(e) { } }; </script> </head> <body> <div id="sensor_data"> gyro_x:<div id="gyro_x"></div><br /> gyro_y:<div id="gyro_y"></div><br /> gyro_z:<div id="gyro_z"></div><br /> accel_x:<div id="accel_x"></div><br /> accel_y:<div id="accel_y"></div><br /> accel_z:<div id="accel_z"></div><br /> rotate_x:<div id="rotate_x"></div><br /> rotate_y:<div id="rotate_y"></div><br /> </body> </html> 超シンプル
  44. 44. (DEMO2)
  45. 45. 数値として扱えるなら、 いろんなことができる。
  46. 46. 自分の得意分野に持ち込め
  47. 47. ネットと連携するデバイス
  48. 48. ウェアラブルデバイス
  49. 49. 色んなものが作れる。 もっともっとhackしよう。
  50. 50. 本日のコード https://github.com/hine/ sensor_server
  51. 51. ご清聴 ありがとうございました。

×