Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Konashi のデータを Bluemix で可視化しよう!

37 views

Published on

※ Docs.com 終了に伴い移行。2016/07/06 の投稿です。
----
「BMXUG IoTアプリ開発体験会 - IBM BluemixとKonashiを使ってIoTアプリを開発してみよう! - 」(https://bmxug.doorkeeper.jp/events/46878) で使用したハンズオン資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Konashi のデータを Bluemix で可視化しよう!

  1. 1. Konashi のデータを Bluemix で可視化しよ う! Konashi x Bluemix ではじめる IoT 体験 株式会社オークファ ン
  2. 2. Prologue - はじめに 自己紹介、ハンズオンの流れのご説明
  3. 3. 目次 • 自己紹介 • Bluemix とは? • Konashi とは? • IoT とは? • ハンズオン • (自由に遊んでみよう!) • まとめ
  4. 4. 自己紹介 大平かづみ SIer からクラウドにあこがれて転職、い くつかの会社を経て、株式会社オーク ファンに在籍。 プログラマの視点で、Bluemix, Azure, AWS などクラウド全般を日々楽しんでい ます。 Qiita: dz Facebook: dzeyelid Twitter: @dz_
  5. 5. Bluemix とは? Bluemix の概要、IoT に関わるサービスのご紹介
  6. 6. Bluemix とは? • IBM が提供する PaaS • メインは Java, Node.js • オープンソースの言語も対応 • Ruby, php, python など • IBM が提供する様々なサービ スと連携できることが特徴
  7. 7. Bluemix の IoT 関連のサービス • Internet of Things Platform を 中心に、次々と新しいサービ スが追加されている サービス名 用途 Internet of Things Platform デバイス管理とブ ローカー IoT Real-Time Insights IoT Platform と連携し リアルタイム表示と アラート 今回使うIoTサービス
  8. 8. Konashi とは? Konashi と Uzuki のご紹介
  9. 9. Konashi とは? • ユカイ工学が提供する Bluetooth 開発ボード • http://konashi.ux-xu.com/ • JavaScript か Objective-C で Konashi を使ったプログラミ ングができる
  10. 10. Uzuki とは? • Konashi に接続できるセン サーシールド サービス名 型番(製造元) 加速度センサ ADXL345 (Analog Devices) 温湿度センサ Si7013 (Silicon Laboratories) 近接照度UV指数セン サ Si1145 (Silicon Laboratories) 外部I2Cデバイス接続 用Groveコネクタ 4pin Groveコネクタ 搭載されているセンサ・コ ネクタ
  11. 11. IoT とは? IoT の概要、 Bluemix と Konashi + Uzuki の位置づけ
  12. 12. IoT とは? • Internet of Things の略 • 特徴 • 使えるセンサ、デバイスは多数 • ネットワークの手段は多数 • たくさんの小さなデータが、大 量に送られてくる • サーバーには大量に送られてく るデータが送られてくるので、 並列に処理するための機構が必 要
  13. 13. ハンズオン いざ!手を動かして、身体で体験!ヾ(≧▽≦)ノ
  14. 14. 大まかな流れ • Konashi のプロジェクトをフォークする • 設定用 js ファイルを作成する • Bluemix Internet of Things Platform の準備をする • Bluemix Internet of Things Platform にデバイスを登録する • Bluemix Internet of Things Platform のAPIキーを発行する • 設定用 js ファイルをアップロードする • Konashi x Uzuki でセンサーデータを取得する • Bluemix Real-Insights で可視化する
  15. 15. Konashi のプロジェクトを フォークする jsdo.it のプロジェクトについて
  16. 16. jsdo.it でフォーク元のプロジェクトを開 く • ブラウザで以下のURLを開き ます。 • http://jsdo.it/dzeyelid/bmxug- 20160706
  17. 17. プロジェクトをフォークする • 左下の「Fork」をクリックし ます。 • ログインまたは新規登録を聞 かれるので、適宜ログインし てください。
  18. 18. フォークしたプロジェクトを確認する • フォークすると、左図のよう な画面が表示され、正常に フォークで来ていることを確 認してください。
  19. 19. 設定用 js ファイルを作成する 接続用のトークンや認証キーを保持する設定ファイルを作成する
  20. 20. settings.js を作成する • ローカルマシンで、左図の構 成で、「settings.js」を作成 します。(コピー用の文字列 を次ページに掲載していま す。)
  21. 21. settings.js のコピー&ペースト用コード bluemix = { konashijs: { device_type: 'Konashi.js', device_id: 'mykonashijs', token: '<token>', }, thermo: { device_type: 'Si7013', device_id: 'mythermo', token: '<token>', }, hygrometer: { device_type: 'Si7013', device_id: 'myhygrometer', token: '<token>', }, iotp: { organization_id: '<organaization-id>', auth_key: '<authentication-key>', auth_token: '<authentication-token>', } };
  22. 22. IBM Bluemix Internet of Things Platform の 準備をする
  23. 23. Bluemix コンソールを開く • 新しいコンソールを開きます。 • https://new- console.ng.bluemix.net/ • まだ「スペース」がない方は、 作成するよう促されます。 • 任意の「スペース名」を入力し、 「リージョン」には「米国」を 選んで、スペースを作成してく ださい。 • 「モノのインターネット」を 開きます。
  24. 24. サービスを追加する • 右上の「+」をクリックし、 カタログのサービス選択画面 を開きます。
  25. 25. Internet of Things Platform を選択する • カタログの中から、「Internet of Things Platform」を選択し ます。
  26. 26. Internet of Things Platform を確認する • 機能概要や、価格プランを確 認して下さい。
  27. 27. Internet of Things Platform を作成する • 今回は、無料プランを利用し ます。 • アカウントをお持ちの方は、 ログインしてから同画面下部 の「作成」をクリックしてく ださい。 • アカウントをお持ちでない方 は、「登録して作成」をク リックして、アカウントを作 成し、Internet of Things Platform の作成を完了してく ださい。
  28. 28. Internet of Things Platform が作成できま した • Internet of Things Platform サービスの作成が完了し、こ の画面が表示されることを、 確認してください。 ※以降、Internet of Things Platform は、IoT Platform を記載します。
  29. 29. IBM Bluemix Internet of Things Platform に デバイスを登録する
  30. 30. IoT Platform のダッシュボードを開く • 「ダッシュボードを起動」を クリックします。
  31. 31. IoT Platform のダッシュボード画面を確 認する • 作成した IoT Platform の「組 織ID」が右上に記載されてい るので、確認してください。 • 「組織ID」を「settings.js」 に記述します。
  32. 32. デバイス画面を開く • 左のアイコン群の、上から2 つめの「デバイス」のアイコ ンをクリックします。
  33. 33. IoT Platform におけるデバイス管理につ いて
  34. 34. デバイスを追加する • デバイスの画面で、「デバイ スの追加」をクリックすしま す
  35. 35. デバイス・タイプを追加する • まだデバイス・タイプがない ので、作成します。 • 「デバイス・タイプの作成」 をクリックします。
  36. 36. ゲートウェイ・タイプを作成する • 今回は、Uzuki(センサー) のデータをiOSアプリの 「Konashi.js」を経由して アップロードするので、 「ゲートウェイ・タイプ」を 作成しましょう。 • 「ゲートウェイ・タイプの作 成」をクリックします。
  37. 37. ゲートウェイ・タイプの一般情報を入力 する • 「名前」に、任意のゲート ウェイ・タイプの名前を設定 します。 • 「説明」はなくても構いませ ん。 • 記入を終えたら、「次へ」を クリックします。
  38. 38. ゲートウェイ・タイプのテンプレートの 定義を入力する • 画面のように様々な情報を、 ゲートウェイ・タイプに設定 できます。 • 今回は特に何も設定しなくて 構いません。 • 「次へ」をクリックします。
  39. 39. ゲートウェイ・タイプのテンプレートの 定義を完了する • ゲートウェイ・タイプのテン プレートの定義を完了するた め、「次へ」をクリックしま す。
  40. 40. ゲートウェイ・タイプのメタデータを設 定する • 必要に応じて、ゲートウェ イ・タイプのメタデータを設 定します。 • 今回は特に何も設定しなくて 構いません。 • ゲートウェイ・タイプの作成 を完了させるため、「作成」 をクリックします。
  41. 41. ゲートウェイ・タイプが作成されたこと を確認する • デバイスの追加画面で、作成 したゲートウェイ・タイプが プルダウンの選択肢に追加さ れたことを確認して下さい。
  42. 42. ゲートウェイを追加する • 作成したゲートウェイ・タイ プを選択し、「次へ」をク リックします。
  43. 43. ゲートウェイのデバイスIDを入力する • デバイスIDに 「mykonashijs」と入力し、 「次へ」をクリックします。
  44. 44. ゲートウェイのメタデータを入力する (任意) • メタデータの設定は特に何も 入力せず、「次へ」をクリッ クします。
  45. 45. ゲートウェイのセキュリティについて確 認する • セキュリティの画面では、 トークンの生成方法を選択で きます。 • 自動生成認証トークン • 自己提供の認証トークン • 今回は、何もせず、「次へ」 をクリックします。(自動生 成認証トークンが作成されま す。)
  46. 46. 追加するゲートウェイの入力を確認する • 入力した値を確認します。 • 入力値に問題なければ、「次 へ」をクリックします。
  47. 47. ゲートウェイの認証トークンを控える • ゲートウェイが作成された旨 が表示されます。 • 表示された「認証トークン」 を「settings.js」の konashijs の token に記入してください。
  48. 48. ゲートウェイが追加されたことを確認す る • 前画面で上方左にある「×」 (閉じるボタン)をクリック すると、左図が表示されます。 • ゲートウェイが登録されたこ とを確認してください。
  49. 49. 同様に、デバイス・タイプ「Si7013」を 作成する • Uzuki の温湿度センサである 「Si7013」の「デバイス・タ イプ」を作成します。 • ゲートウェイ・タイプと同様 に、左記の表の内容で「デバ イス・タイプ」を作成しま しょう。 設定項目 設定値 タイプ デバイス・タイプ 名前 Si7013 説明 温湿度センサ 製造元 Silicon Laboratories
  50. 50. デバイス・タイプが追加されたことを確 認する • 「デバイスの作成」で、作成 した「Si7013」のデバイス・ タイプが選択肢に表示される ことを確認してください。
  51. 51. 同様に、温度センサーのデバイスを登録 する デバイス 設定項目 設定値 温度計 device_type Si7013 (thermo) device_id mythermo token 生成されたトークン • Si7013 の温度センサーをデバ イスとして登録します。 • 「認証トークン」を 「settings.js」に記入するこ とを忘れずに!
  52. 52. 同様に、湿度センサーのデバイスを登録 する デバイス 設定項目 設定値 湿度計 device_type Si7013 (hygrometer ) device_id myhygrometer token 生成されたトークン • Si7013 の湿度センサーをデバ イスとして登録します。 • 「認証トークン」を 「settings.js」に記入するこ とを忘れずに!
  53. 53. 作成したゲートウェイ、デバイスを確認 する • デバイス画面で、左図のよう にゲートウェイとデバイスが 作成されていることを確認し てください。 • 1つのゲートウェイ • 2つのデバイス
  54. 54. IBM Bluemix Internet of Things Platform の APIキーを発行する
  55. 55. アクセスの画面を開く • 左のアイコン群の、上から3 つめの「アクセス」のアイコ ンをクリックします。
  56. 56. APIキー画面を開く • 「APIキー」画面を開きます。
  57. 57. APIキーを作成する • 「APIキーの生成」をクリッ クします。
  58. 58. APIキーと認証トークンを控える • 「APIキー」と「認証トーク ン」を「setteings.js」に転記 します。 • この文字列はもう表示されない ので、必ず控えてください。 設定項目 設定値 auth_key 上記の API キー auth_token 上記の 認証トークン
  59. 59. APIキーの作成を完了する • APIキーと認証トークンを控 えたら、「終了」をクリック します。
  60. 60. 設定用 js ファイルをアップ ロードする jsdo.it のプロジェクトに設定ファイルをアップロードする
  61. 61. jsdo.it の「Files」を開く • jsdo.it の画面に戻り、 「Files」タブをクリックしま す。
  62. 62. jsdo.it に settings.js をアップロードする • 作成した「settings.js」を、 ドラッグ&ドロップ(または ファイル選択)でアップロー ドします。
  63. 63. アップロードしたファイルのURLを取得 する • アップロードが完了すると、 左図のようにURLが表示され るので、コピーしてください。
  64. 64. jsdo.it の「HTML」URLを更新する • 「HTML」タブをクリックし ます。 • 「Load settings.js」とコメン トに書かれた script の src に、 前ページでコピーした URL を貼り付けます。 • 保存します。
  65. 65. 保存後、エラーがないことを確認する • 保存すると、実行画面がリ ロードされ、エラーの有無が 表示されます。 • エラーがないことを確認して ください。
  66. 66. Konashi x Uzuki でセンサー データを取得する いよいよ、iOSアプリ「Konashi.js」 で動作確認!
  67. 67. iOSアプリ「Konashi.js」をインストール する • 「Konashi.js」というiOSアプ リをインストールします。 • https://itunes.apple.com/jp/app/ konashi.js-javascript- html/id652940096?mt=8
  68. 68. Konashi x Uzuki デバイスの確認 • Konashi, Uzuki, コイン電池が お手元にあることを確認して ください。 Uzuki (センサーシー ルド) Konashi (BT搭載開発ボー ド) コイン電池 (CR2032)
  69. 69. Konashi に Uzuki を接続する 上図のように、Konashi と Uzuki を接続してください。
  70. 70. 電池を入れる • 電池を差し込みます。 • 極性を間違えないよう、+(プ ラス)の向きを合わせてくださ い。
  71. 71. Konashi に電源が入ったことを確認する • 電池を差し込むと、左図のよ うになります。 • LEDが光っていることを確認 してください。
  72. 72. iOSアプリ「Konashi.js」を起動する • iOSアプリ「Konashi.js」を起 動します。
  73. 73. Konashi.js で自分のプロジェクトを探す • 起動直後の画面は、 「konashi」タグが付いてい るプロジェクトの一覧です。 • 元のプロジェクトに 「konashi」のタグが付いて いるので、フォークしたプロ ジェクトもここに表示されま す。 • ご自身のプロジェクトを見つ け、タップしてください。
  74. 74. 実行する • 再生マークをタップして、実 行します。
  75. 75. Konashi に接続する • しばらくすると、近くにある Bluetooth 機器を検知します。 • 自身の Konashi をタップして ください。 • 型番はここに記載されてます。
  76. 76. Konashi からのデータを待つ • Status: OK と表示されれば接 続成功です。 • Konashi からデータを取得す るまで、少し待ちます。
  77. 77. iOSアプリ上でエラーがないことを確認 する • しばらくすると温度と湿度の データを取得しだします。 • 温度と湿度が2秒おきに変化 していることを確認してくだ さい。
  78. 78. IoT Platform のデバイスを開く • Konashi.js アプリでデータを 送信している状態のまま、 IoT Platform の「デバイス」 のいずれかをクリックします。
  79. 79. IoT Platform でデータの受信を確認する それぞれのデバイスでイベントを受信していることを確認し てください。
  80. 80. Bluemix Real-Insights で可視 化する 測ったデータをリアルタイムに可視化する
  81. 81. Bluemix コンソールで「モノのインター ネット」を開く • Bluemix のコンソールに戻り、 「モノのインターネット」の 画面を開きます。
  82. 82. サービスを追加する • もうひとつサービスを追加す るので、「+」をクリックし ます。
  83. 83. IoT Real-Time Insights を選択する • 「IoT Real-Time Insights」を クリックします。
  84. 84. IoT Real-Time Insights の概要を確認する • IoT Real-Time Insights につい て確認します。
  85. 85. IoT Real-Time Insights の価格プランを確 認する • 価格プランを確認します。 • 「Lite」にチェックがついて いる状態で、「作成」をク リックします。
  86. 86. IoT Real-Time Insights が作成されたこと を確認する • 左図の画面が表示され、IoT Real-Time Insights が作成さ れたことを確認してください。
  87. 87. Data Source の追加を始める • 「Add a data source」をク リックします。
  88. 88. Information を確認する • 初回アクセス時は左図の Information が表示されます。 • IoT Real-Time Insights の1イン スタンスにつき、1つのデータ ソースをサポート • 複数のデータソースを利用する 場合は、自動的にインスタンス が分けられる • 「OK」をクリックして先へ 進みます。
  89. 89. データソースを追加する • 「Add new data source」をク リックします。
  90. 90. データソースに必要な情報を確認する • Data Source を追加するには、 IoT Platform のAPIキーが必要 なことがわかります。
  91. 91. IoT Platform のAPIキーを発行する • IoT Platform の「アクセス」> 「APIキー」の画面を開きま す。 • 「APIキーの生成」をクリッ クします。 • 生成された「APIキー」と 「認証トークン」を、IoT Real-Time Insights の データ ソース作成画面にそれぞれ入 力します。(次ページ参照)
  92. 92. データソースに API キーを指定する • データソース追加画面で、 「Name」「Organization ID」「API Key」 「Authentication Token」を入 力します。 • Organization ID は「組織ID」 • 入力したら、チェックアイコ ンをクリックし、完了します。
  93. 93. データソースが作成されたことを確認す る • 左図のように、データソース が作成されたことを確認して ください。
  94. 94. デバイス画面を開く • 次に、「Devices」を開きま す。
  95. 95. デバイス画面の内容を確認する • IoT Platform で登録したデバ イスが表示されていることを 確認します。 • スキーマを設定するため、 「Manage Schemas」をク リックします。
  96. 96. スキーマを追加する • 「Add new message schema」をクリックします。
  97. 97. スキーマにデータソースをリンクする • 「Link data source」をクリッ クします。
  98. 98. スキーマにデータソースをリンクする • 「Data source」の入力欄をク リックします。
  99. 99. スキーマにデータソースをリンクする • 先ほど追加したデータソース を選択します。
  100. 100. スキーマにデータソースをリンクする • 「Type」で「Si7013」を選択 します。
  101. 101. スキーマにデータソースをリンクする • 「OK」をクリックします。
  102. 102. スキーマにデータポイントを追加する • 「Add data points」をクリッ クします。
  103. 103. スキーマにデータポイントを追加する • 「Add from connected device」をクリックします。
  104. 104. スキーマにデータポイントを追加する • アクティブ(イベントを受信 中)のデータポイントが表示 されます。 • それぞれにチェックをして、 「OK」をクリックします。 • Data Point が表示されない場 合は、IoT Platform 上のデバ イスがイベントを受信してい る状況である必要があるため、 Konashi.js アプリでセンサ データの送信を実行し、しば らく待ってみて下さい。
  105. 105. スキーマにデータポイントを追加する • 「Name」に任意の名前を入 力します。 • 記号は含められません。 • 「OK」をクリックします。
  106. 106. スキーマが作成されたことを確認する • 左図のように、スキーマが作 成されたことを確認してくだ さい。
  107. 107. ダッシュボードを開く • 次に、ダッシュボードを開き ます。
  108. 108. ダッシュボードで Information を確認す る • ダッシュボードを開いた初回 は、アラートが設定されてい ないと通知が表示されます。 • 特に問題はないので、 「OK」をクリックして次に 進みます。
  109. 109. ダッシュボードの一覧画面を表示する • 「Browse Dashboards」をク リックします。
  110. 110. 新しいダッシュボードを作成する • 「Add new dashboard」をク リックします。
  111. 111. 新しいダッシュボードを作成する • 「Dashboard name」に任意 の名前を入力します。 • チェックマークをクリックし て、ダッシュボード作成を完 了します。
  112. 112. 作成したダッシュボードを開く • 作成したダッシュボードをク リックし、開きます。
  113. 113. ダッシュボードにコンポーネントを追加 する • 「Add new component」をク リックします。
  114. 114. ダッシュボードにコンポーネントを追加 する • まず、「Device」のコンポー ネントを追加します。
  115. 115. ダッシュボードにコンポーネントを追加 する • 温度計の「mythermo」を選 択します。
  116. 116. ダッシュボードにコンポーネントを追加 する • コンポーネントの表示を設定 するため、「Visualization」 をクリックします。
  117. 117. ダッシュボードにコンポーネントを追加 する • 「temperature」の数字をク リックします。
  118. 118. ダッシュボードにコンポーネントを追加 する • チェックマークをクリックし、 コンポーネントの追加を完了 します。
  119. 119. ダッシュボードにグラフのコンポーネン トを追加する • グラフのコンポーネントも追 加してみましょう。 • 「Add new component」をク リックします。
  120. 120. ダッシュボードにグラフのコンポーネン トを追加する • 「Select a component…」を クリックします。
  121. 121. ダッシュボードにコンポーネントを追加 する • グラフを表示するため、 「Chart」をクリックします。
  122. 122. ダッシュボードにコンポーネントを追加 する • グラフの千の設定をするため、 「Add line to chart」をクリッ クします。
  123. 123. ダッシュボードにコンポーネントを追加 する • データ元を選択するため、 「Select a device…」をク リックします。
  124. 124. ダッシュボードにコンポーネントを追加 する • 今回は温度のデバイスである 「mythermo」をクリックし ます。
  125. 125. ダッシュボードにコンポーネントを追加 する • グラフとして表示するパラ メーターを選択するため、 「Select a parameter…」を クリックします。
  126. 126. ダッシュボードにコンポーネントを追加 する • 温度の「temperature」を選択 します。
  127. 127. ダッシュボードにコンポーネントを追加 する • 左図のように、チェックマー クをクリックしてコンポーネ ントの追加を完了します。
  128. 128. ダッシュボードのコンポーネントの表示 を確認する • Real-Time Insights はリアル タイムの情報を表示すること ができます。 • センサーを手で覆うなどして、 変化が表示されることを確認 してみてください。
  129. 129. [応用] 湿度のデータも表示してみよう! • 左図を参考に、湿度のデータ もリアルタイム表示してみま しょう!
  130. 130. Epilogue - おわりに
  131. 131. 後始末(1) • Bluemix IoT Platform, IoT Real-Time Insights ともに無料プラン を選択しているので、特に課金はありません。 • Konashi と Uzuki は取り外し、電池も取り外してください。お 持ち帰りはできません。
  132. 132. 後始末(2) • jsdo.it のプロジェクトは「パ ブリック」になっており、 APIキーなどを第三者が見ら れるような状態にあります。 気になる方は、一時的に「プ ライベート」にするなど、ご 対応くださいませ。
  133. 133. まとめ • Internet of Things は、デバイスからデータの管理まで、幅広く 考えなくてはならないが、デバイスやサービスを賢く選択して トータルソリューションを導き出すことは、可能である! • プロトタイプでは、センサーなどが標準搭載されたデバイスも有用。 • プロトタイプから製品として昇華させる場合は、耐久性やセキュリ ティも観点に。 • データの受け口は、大手クラウドベンダーから IoT/M2M 専用のプラッ トフォームまで様々な選択肢がある。
  134. 134. ありがとうございました!

×