Upgrade to Pro — share decks privately, control downloads, hide ads and more …

kintone devCamp 2018-朝MESH!コーヒー片手に センサー×kintoneを使いこなそう!

kintone devCamp 2018-朝MESH!コーヒー片手に センサー×kintoneを使いこなそう!

kintone papers

August 02, 2018
Tweet

More Decks by kintone papers

Other Decks in Technology

Transcript

  1. 目次 事前準備 4 ハンズオンの概要 5 完成イメージ 5 温度・湿度をkintoneに記録しよう 5 MESHボタンで来場者の人数を集計しよう

    6 MESH SDKでkintoneカスタムタグを用意する 7 MESH SDKの設定 7 MESHアプリでカスタムタグの読み込み 13 温度・湿度をkintoneに記録しよう 18 完成イメージ 18 kintoneアプリの作成 19 アプリテンプレートの読み込み 19 アプリの新規作成 20 APIトークンを生成する 22 MESH SDKでの設定 24 MESH アプリでのレシピ作成 28 MESHの動作ログを確認する 35 動作確認 36 試してみる 36 kintoneの絞り込みとグラフ機能を使ってみる 38 絞り込み 38 グラフ 38 MESHボタンで来場者の人数を集計しよう 40 完成イメージ 40 kintoneアプリの作成 41 アプリテンプレートの読み込み 41 アプリの新規作成 42 APIトークンを生成する 44 MESH SDKでの設定 46 MESH アプリでのレシピ作成 50 MESHの動作ログを確認する 56 動作確認 58 試してみる 58 kintoneの絞り込みとグラフ機能を使ってみる 59 絞り込み 59 グラフ 59 「kintone」タグの中身 61 2
  2. 事前準備 - 外部のWiFi に接続可能なPC - MESHアプリを動作させる端末 MESHアプリを動作させるためには以下のいずれかの端末が必要です。 - iOS 9.0以降、Bluetooth

    4.0 (Bluetooth Low Energy)を搭載 - Android 5.0以降、Bluetooth 4.0 (Bluetooth Low Energy)を搭載 - Windows 10 Creators Update(1703)以降 Bluetooth 4.0 (内蔵Bluetoothのみ) ※64bit版のみ ※Sモードは除く - kintone 開発者環境 - 無償で利用できる開発者向けの環境です。 - お申込みにはcybozu developer networkのメンバー登録が必要です。 - お申込みから発行に30分程度かかります。 - ハンズオン開始までにお申込み・発行が済んでいない方は、 こちら​ からkintoneのお試し環境(30日間有効)をお申込みください。 - MESH SDKの利用登録 - 無償で利用できるMESHの開発者向けの環境です。 - MESHアカウントの登録が必要です。 - http://meshprj.com/sdk - - ハンズオンで利用するファイルを下記URLからダウンロードしてください - http://bit.ly/devCamp2018_paper 以下は主催側で用意します - MESH タグ 4
  3. ハンズオンの概要 本日は、2種類のタグを使ったハンズオンを行います。 • 紫色のタグ:温度・湿度タグ • 緑色のタグ:ボタンタグ 1. 講師の解説に合わせて、温度・湿度タグで設定・動作確認 →皆様で一緒に進めていきます。 2.

    ボタンタグの設定・動作確認 →基本的には1と同じやり方になりますので、各自で進めてみてください。 質問や困ったことがあったら、その場で手をあげてください。 周りのスタッフがサポートいたします! 後半は講師もサポートに回りますので、不明点はお気軽にご質問ください。 5
  4. MESH アプリでのレシピ作成 次にMESHアプリの方でボタンタグをつないで進めていきます。まず、MESHタグの電源を オンにします。手元にMESHタグを用意してください。MESHタグの各部名称は以下の通り です。 MESHタグの「アイコン」部分を2秒押し続けると電源のオン/オフができます。また、一度 押すと電源状態の確認、2連続で押すとBluetooth接続状態の確認ができます。 電源の入れ方は以下のページでも動画で紹介しているので、わからない場合は参照してくだ さい。 https://support.meshprj.com/hc/ja/articles/212602937

    (参考)各ステータスと操作の関係は以下の通りです。 MESHタグの状態 電源オン 電源オフ バッテリー切れ 操 作 2秒長押し 電源オン→電源オフ 電源オフ→電源オン — シングルクリック バッテリー残量確認 — — ダブルクリック 無線接続状態確認 — — 10秒長押し リセット・再起動 リセット・再起動 — 次にMESHタグをペアリングします。タグリストの一番上にある「+追加」をタップしま す。 51
  5. 動作確認 試してみる MESHのボタンタグを使って、実際に試してみましょう! 1. ボタンを1回押す kintone に人数カウント ”1” としてレコードが登録されます。 ※kintoneの画面を更新して確認してください。

    2. ボタンを長押しする kintone に人数カウント ”-1” としてレコードが登録されます。 間違えてカウントしてしまった時には、このように長押しでカウント数を 調整できるようにしました! 59
  6. これらの4つのメソッドに加えて以下の5つの仕組みがあります。 コネクター制御 タグの機能の入力コネクターや出力コネクターを複数使う場合に、コネクター制御 によって処理を振り分けルことができます。 入力コネクターが複数ある場合、どのコネクターから入力されたのかを区別して処 理を変えることができます。どの入力コネクターがメッセージを受け取ったのか は、「Receive」メソッド内で参照可能な定数 「index」 に格納されています。サン プルコードは以下の通りです。

    [Receive] 1 2 3 if ( index == 0 ) { //1番目のコネクタから入力 log( "message from #0" ); } タグの機能実行完了後、デフォルトでは全ての出力コネクターからメッセージが出 力されますが、出力するコネクタを選択することもできます。設定は、「Result」 メソッド内で戻り値に「indexes」としてコネクターID配列を指定します。サンプル コードは以下の通りです。 68
  7. [Result] 1 2 3 4 return { indexes : [0,

    1], //1番目, 2番目のコネクタから出力 resultType : "continue" } 処理制御 各メソッドの戻り値で、次のメソッドを呼ぶかどうかを制御することができます。 例えば次のメソッドを実行する場合には、resultTypeにcontinueを指定します。 [Receive / Execute / Result] 1 return {resultType : “continue”} resultTypeの値には以下の3つのパターンがあります。 resultType 処理制御 continue 次のメソッドを呼びます。 resultTypeが明示的に指定されなかった場合には、デフォルト値と してcontinueが指定されたとみなされます。 stop 次のメソッドを呼ばずに処理を停止します。 処理が止まってしまうので、あまり利用することはないかもしれま せん。 pause 次のメソッドを呼ばずに待機します。 Web APIなどの非同期処理の応答を待つなど、特定の条件が満たさ れることを待つ場合に利用します。 定数・変数 タグの機能内のメソッドから共通にアクセスできる定数・変数が用意されています。定数・ 変数には下記の種類があります。 69
  8. 定 数 properties タグの機能の設定パラメータです。ユーザが設定した値をソース コードから参照することができます。 index 入力コネクターが複数ある場合、何番目のコネクターで受け取っ たかを示す値です。これは、Receiveメソッドでのみアクセス可 能です。 変

    数 runtimeValues 同一機能内のメソッド間で共有できる変数です。主に機能の状態 変数としての利用を想定しています。 変数の初期化はInitializeメソッド内で行います。 messageValue s タグ間でデータをやり取りするための変数です。タグの出力コネ クターから他のタグの入力コネクターに送られるメッセージの データを参照・更新できます。 それぞれ参照する方法は以下のようになります。 定数:propertiesを参照する方法 [Initialize / Receive / Execute / Result] 1 var count = properties.myProp; 定数:indexを参照する方法 [Receive] 1 2 3 if ( index == 0 ) { //1番目のコネクタから入力 log( "message from #0" ); } 変数:runtimeValuesを参照する方法 runtimeValuesの初期化は”Initialize”メソッド内で行います。以下のように戻り値に runtimeValuesオブジェクトとして指定します。 [Initialize] 1 2 3 return { runtimeValues : { count : 0 } //"count"という変数を定義して初期化する } runtimeValuesへのアクセスは、各メソッド内でruntimeValuesオブジェクトを参照・更新し て行います。ただし、更新を行った場合は、メソッドの戻り値として、runtimeValuesオブ ジェクトを必ず指定してください。忘れると、更新が反映されません。 [Execute] 70
  9. 1 2 3 4 5 6 7 8 9 10

    11 12 13 runtimeValues.count++; if ( runtimeValues.count == properties.Limit ) { runtimeValues.count = 0; return { resultType : "continue", //処理を継続 runtimeValues : runtimeValues //runtimeValuesとして返す }; } else { return { resultType : "pause", //処理を停止 runtimeValues : runtimeValues //runtimeValuesとして返す } } 変数:messageValuesを参照する方法 messageValuesへのアクセスは、各メソッド内でmessageValuesオブジェクトを参照・更 新して行います。ただし、更新を行った場合は、メソッドの戻り値として、 messageValuesオブジェクトを必ず指定してください。指定を忘れると、更新が反映され ません。 メッセージ送信側のソースコード例 [Receive / Execute / Result] 1 2 3 4 5 6 7 var msgVal = {}; msgVal.date = new Date(); //メッセージに情報(e.g. 実行日時)を追加 return { messageValues : msgVal, //messageValuesとして返す resultType : "continue" } メッセージ受信側のソースコード例 1 var date = messageValues.date; 71
  10. タスクスケジューラー タスクスケジューラを設定するとタグの機能をタイマー実行させることができます。 Initializeメソッドの戻り値にtaskConfigオブジェクトを指定することで設定できます。10秒 間隔でタグの機能を実行する場合は、以下のようなコードになります。 [Initialize] 1 2 3 4 5

    6 7 return { resultType : "pause", taskConfig : { mode : "interval", seconds : 10 } } taskConfigの設定パターンは以下の種類があります。 設定パターン 例 一定間隔で実行 taskConfig : { //10秒ごとに実行 mode : "interval", seconds : 10 } 毎日、指定した時間に実 行 taskConfig : { //毎日12時29分に実行 mode : "every_day", hours : 12, minutes : 29 } 72
  11. 指定した日時に実行 taskConfig : { //2015年7月31日 17時27分00秒に実 行 mode : "date",

    year : 2015, month : 7, day : 31, hours : 17, minutes : 27, seconds : 00 } ライブラリ SDKではカスタムタグ開発で共通利用可能な関数があります。以下の2つの関数が用意され ています。 Ajax 非同期HTTP通信を可能にします。Ajaxは非同期通信のため、応答を待ちたい場 合はメソッドの戻り値に resultType: “pause”を指定してください。 ロ グ 出 力 開発時のデバッグ用途として、メソッド内で実行ログを出力することができま す。出力したログはMESHアプリのログダイアログで確認できます。 以下のように記述することでログが出力できます。 log("出力したい文字列"); Ajaxで利用可能なパラメータは以下の通りです。jQueryのajaxメソッドに準拠しています。 パラメータ 説明 url アクセスしたいURL data URLに送信したいデータオブジェクト type HTTP通信の種類 {GET / POST} contentType サーバにデータを送信する際に用いるcontent-typeヘッダの値 dataType サーバから返されるデータの型 {xml / html / script / json / jsonp / text} timeout タイムアウト時間(ミリ秒) 73
  12. beforeSend リクエスト送信前にコールバックされるイベントハンドラ success 通信が成功した場合にコールバックされるイベントハンドラ error 通信が失敗した場合にコールバックされるイベントハンドラ 困ったときは、MESH公式サイトの情報や、Qiitaなどの開発者コミュニティでも様々なカス タムタグの作品例が紹介されています。それらの情報をうまく活用しながら開発を進めてい きましょう。身の回りにMESHのSDKを活用している人やJavaScriptに詳しい人がいたら聞 いてみたりしても良いですね。

    関連情報 MESH MESH SDKリファレンス https://meshprj.com/sdk/doc/ja/ MESHサポートページ https://support.meshprj.com/hc/ja 参考リンク Qiitaコミュニティ https://qiita.com/search?q=MESH+SDK kintone 技術情報(cybozu developer network) https://developer.cybozu.io/ MESHを使ってドアの開閉をkintoneに通知しよう https://developer.cybozu.io/hc/ja/articles/213430966 MESHボタンで来場者の人数を集計しよう https://developer.cybozu.io/hc/ja/articles/115005313923 【MESHを使って】小一時間でkintone呼び出しボタンが出来ちゃった。 https://kintone-blog.cybozu.co.jp/tips/000281.html 74