Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

M5Stackを使ったIoTプログラミング

554 vues

Publié le

金沢大学・電子情報通信学類「情報通信工学実験第1・マイコンのプログラミング」演習資料

Publié dans : Formation
  • Soyez le premier à commenter

M5Stackを使ったIoTプログラミング

  1. 1. 情報通信工学実験第1:テーマ3 マイコンのプログラミング 秋田純一 akita@is.t.kanazawa-u.ac.jp @akita11 (Rev.2019/12/18) CC BY-SA
  2. 2. 実験の目的 • マイコンのプログラミングを通して、コンピュー タと実世界をつなぐ技術について学ぶ – 実世界とをつなぐセンサ等の使い方を学ぶ – 実世界とをつなぐセンサ等の電子回路の基本を 学ぶ – マイコンとインターネットの連携について学ぶ – アイディアを具体化する手法について学ぶ 2 モノのインターネット IoT (Internet of Things)
  3. 3. 実験の内容と注意 • 実験内容 – マイコン(M5stack)の使い方、Python入門 – センサの使い方、アクチュエータの使い方 – ブレッドボードの使い方 – センサ等の回路計算 – インターネットとの連携 – アイディアの具現化とプロトタイピング • 実施上の注意 (※レポート作成に必要なので忘れずに) – 作成したプログラムや回路は画面キャプチャ、写真、Save等 で、適宜保存しておく – 途中のエラーとその対処、気づいたことは、適宜記録しておく 3 目安として 1週目 目安として 2週目 目安として 3週目
  4. 4. (準備)マイコンとコンピュータ スマホPC (Personal Computer) マイコン (Micro-controller) 演算性能 インターネット 接続 低価格 省サイズ ◎ ○~◎ △~○ ○(WiFi経由) ◎ △~◎ △ ○ ◎ △ ○ ◎ 4 実世界連携 △ ○ ◎ マイコンは、 演算性能は低めだが、 実世界(物理世界)との 連携が得意
  5. 5. (準備)使用するマイコン:M5stack • 中国M5stack社の製品 – ESP32(WiFi/BluetoothLEつきマイコン) (240MHz Dual Core, 600MIPS) – センサ等の接続ができるコネクタ – 小型液晶モニタ – プッシュスイッチ(3個) – 単体で「完成品」に近いプロトタイプを作成可能 – プログラミング環境:MicroPython / ブロック型言語 等 – 積み重ねて機能拡張が可能 5 例えばここで購入できる(金沢のマルツでも売っている) https://www.switch-science.com/catalog/3647/
  6. 6. (準備)USBケーブルの抜き差し • M5stack側は抜かない • PC側を抜く 6
  7. 7. (準備)M5stackのプログラミング 7 「Scratch」に似た ブロック型プログラミング Blockly MicroPythonで テキストコーディング Blockly→MicroPython への変換が可能 (※逆は✕) まずはBlocklyで、機器に慣れる&画面表示部分(User Interface; UI)の設計 →本格的にはMicroPythonでプログラミング UI Flow http://flow.m5stack.com/ http://flow01.m5stack.com/ (ブックマークしておくと便利) ※InternetExplorerだと不具合あり? 左上のバージョン番号が V1.4.x(-beta)になっていることを確認 (古いバージョンの場合は から切り替える
  8. 8. 1-1.お約束の”Hellow World” • UI Flow (http://flow.m5stack.com/)をブラウザで開く 8 “Label”をドラッグ “UI”内の”Label”に、Labelに 対する処理ブロックが現れる “Show”ブロックを、“Setup”の下に「はめる」 ( 「はまる」と、グレーから色が変わる) ※”Setup”は、起動後に実行される処理を「はめる」場所 ※不要なLabel等はドラッグ時に 現れる「ゴミ箱」へ入れれば消去 http://flow01.m5stack.com/
  9. 9. 1-1.M5stackの電源のON/OFF • PC等にUSB-Cケーブルで接続して給電 – 使用後はケーブルを抜けば電源OFF(ブチ切OK) – 内蔵バッテリもある(この実験では普段は使わない) 9 主電源 (普段はOFFにしておく) ※ONにするとバッテリから給電&充電 本体電源SW(赤) ・1回押し→リセット(※よく使う) ・2回押し→電源ON/OFF(バッテリ動作時)
  10. 10. 1-1.プログラムの転送・実行 10 左下のApi keyをクリック M5stackのディスプレイに表示される ”API Key”(8桁の英数字)を入力 ※言語を選べるが、Englishがオススメ M5stackがOnlineになる “Run”ボタンで、M5stackに プログラムを転送し、実行 ”Save”でプログラムを保存できる ※「1a.m5f」のように、課題ごとに名前を 変えておくこと(レポートで必要) ※”Load”で読み込むこともできる ※画面キャプチャもあわせて 保存しておくと便利 初回のみ行う設定 本体ディスプレイの右上に 緑マークが出ればOK失敗が続くときは再接続 or 本体リセット
  11. 11. 1-1.テキストの属性を変更する 11 置いたLabel(テキスト)をクリック →Labelの属性(位置、フォント等)が変更できる 位置や色、フォント(文字サイズ)を変更して実行してみる また、背景の色の変更や、適当な図形(矩形・円)なども描画してみる ※ここの”text”属性で、画面上に表示される文字列を設定できるが、 プログラムの”Setup”内で設定してもよい(結果は同じになる) 黒枠白字の内容は課題 として実施すること (結果(写真等)・プログラ ムも保存しておく) ※プログラムとその動作の対応が 怪しい場合がある(バグ)ので、 あまり深追いはしない・・・
  12. 12. 1-2.本体ボタンの動作 12 いずれかのボタンを、いろいろな押し方で押して Labelを変更するプログラムを実行してみる ButtonAを押した時に実行される処理を書くブロック ※検出するボタンの種類・押し方などを選べる ButtonA ButtonB ButtonC
  13. 13. 1-2.本体ボタンの動作 13 Timer内の”Wait”で、指定時間だけ待機する Waitで指定した時間待つ動作を確認する
  14. 14. 1-3.Pythonでのプログラミング 14 このボタンで、Blocklyで記述したプログラムを Python言語 (MicroPython)に変換できる ※Python:組み込み分野やAI分野でよく使われる言語 画面の背景色の設定 Labelの配置と設定 buttonAが押された ときの動作(関数)の定義 buttonAの操作と、そのときに 呼ばれる関数の割当 Labelのテキストの設定インデントで、グループを指定(C言語の {} と同様) Blocklyプログラムと、Pythonプログラムとの対応を理解する おまじない (使うライブラリの宣言) 画面右下の”CodeLock“を”OFF”にしておく
  15. 15. 1-3.Pythonでのプログラミング • UI Flowで書いたPythonプログラムの保存方法 (右上メニュー”Save”はBlocklyの保存のみなので、 プログラムをテキストとして保存する) – テキストファイルの編集ソフト (Windowsの「メモ帳」など)を開く – UI Flowで書いたPythonプログラムを全選択→コピー – テキスト編集ソフト(メモ帳など)へ ペースト(貼り付け)し、ファイル名をつけて保存 • このとき、改行がなくなって一行になってしまうが、再び UI Flowにコピー&ペーストで戻せば、正しく改行される 15 全選択して コピー&ペースト
  16. 16. 1-3.Pythonの文法(のすごく要点) • 基本的にC言語(C++)やJavaに近いので、 差分(違い)のみ気をつければよい 16 label0 = M5TextBox(...) def buttonA_wasPressed(): label0.setText('button A Pressed') wait(1) pass 関数定義の最後は コロン(「:」) 関数定義などの「グループ」の範囲は、 インデント(行の戦闘にTABキーまたは 複数のスペース)で示す 行末はセミコロン(「;」) をつけない 文字列はシングル クオート(「’」)で囲う オブジェクト(ここではlabel0)に 付随する処理(「メソッド」)は ドット(「.」)をつけて示す オブジェクト(ここではlabel0という名 前)を作成する。オブジェクトは、値 や処理を伴う集合体の概念 特に意味はない (空行の代わり)
  17. 17. 1-3.Pythonでのプログラミング • 動作仕様 – ラベルを1つおく – 初期状態では、label0=“a”とする – ボタンAを押したら、label0を1秒間だけ”A”に変更 し、その後”a”に戻す – ボタンBを押したら、画面中央(160,120)に半径30 の円を描画し、1秒後に消す 17 直接、以下の動作をするPythonプログラムを記述し、実行させる ※記述の間違いがあると実行時にエラーが表示されるので、内容を確認してデバッグする ※UI Flowのディスプレイ上でLabelや図形を置いたり変更すると、プログラムも変わる ※必要に応じてPythonの文法をWebページや書籍で調べる(そして、少しずつ慣れる)
  18. 18. 1-4.センサの使い方:Button • M5stack純正の各種センサ等の「Unit」を接続 し、UI Flowの”Unit”から使用できる 18 Unitを追加 DualButtonを選択 (接続するPortをBとする) DualButtonユニットが 追加された 実際にDualButtonユニットを、 指定した”PortB”に接続する やや見にくいが、 スクロールバーでスクロール コネクタの片面の両側にヤマが あるので、ソケットにあわせる この+マークが現れない場合は、 画面外にはみだしているので ブラウザの文字を小さくしてリロードする
  19. 19. 1-4.センサの使い方:Button 19Blocklyプログラムと、Pythonプログラムとの対応を理解する “Units”内に、追加したUnitに関する ブロックが現れる 接続したButtonユニットの 赤ボタンを押した時に label0を”Hello M5”とする プログラム 対応するPythonのプログラム “DualButton”ユニットの オブジェクトを取得 (PortBに接続を指定) 取得したオブジェクトに 対して処理を記述 Pythonに変換
  20. 20. 1-4.センサの使い方:Button • 動作仕様 – ラベルを1つおく – 初期状態では、label0=“”とする – 赤ボタンを押したら、label0を1秒間だけ”Red”に 変更し、その後””に戻す – 青ボタンを押したら、画面中央(160,120)に半径30 の円を描画し、1秒後に消す 20 直接、以下の動作をするPythonプログラムを記述し、実行させる 1c.で作成したPythonプログラムとの関連・対応に注意 DualButtonユニットを、別のポート(例えばPortC)に接続し、 同様の動作をするプログラムを記述して動作させる
  21. 21. 1-5.センサの使い方:Light(明るさ) 21 Lightを選択 (接続するPortをB or Dとする) Lightユニットの値(明るさ)をディスプレイに表示する プログラムをPythonで記述し動作させる ※Blocklyからの変換を用いてよいが、できるだけPythonでゼロから書いてみよう Unitで設定したPortに接続する Lightユニットは、センサ面の明るさに応じた 電圧が出力され、それを取得できる センサ 面 ※接続していないユニットは、UI Flowの左側画面から 削除しておく。Pythonでは冒頭のimportを削除する。
  22. 22. 1-6.センサの使い方(ジョイスティック) • ジョイスティックは、Unitにないので、 信号を直接読み取る – Unitに「JoyStick」があるが、使うものとは別物 • PortD=2本の信号線(IOピン34番と35番) (IO=Input/Ouput, 入出力のこと) • スティックの傾き(X軸・Y軸)に 応じて、それぞれの電圧が 変化する 22 PortDに接続する
  23. 23. 1-6.センサの使い方(ジョイスティック) • IOピンの電圧は、”analogRead()”で取得できる 23 from m5stack import * from m5ui import * from uiflow import * from easyIO import * setScreenColor(0x222222) label0 = M5TextBox(160, 120, "Text", lcd.FONT_Default,0xFFFFFF, rotate=0) while True: label0.setText(str(analogRead(34))) wait(0.1) このPythonプログラムを入力し、動作させる。 スティックを傾けたときに表示される値の変化を確認する IOピン34番の電圧を取得 取得した数値を文字列に変換し、テキストに設定 0.1秒待つ この動作を無限ループ analogRead()を使うための宣言(追記する)
  24. 24. 1-6.センサの使い方(ジョイスティック) • 動作仕様 – ラベルを2つおく(label0, label1) – ジョイスティックのX軸の値をlabel0に表示する – ジョイスティックのY軸の値をlabel1に表示する – 表示を0.1秒ごとに更新する 24 直接、以下の動作をするPythonプログラムを記述し、実行させる
  25. 25. 1-7.センサの使い方(ToF) • “ToF”ユニット=センサ面から対象物までの距 離を計測する – ToF = Time of Flight ※光の往復時間から 距離を計測する – Unitから”TOF”を追加 (PortAを選択) – PortA(複数あるが いずれでもOK)に 接続する 25 ToFセンサから取得した値(単位:mm)をディスプレイに 表示するプログラムを記述し、実行させる(※Blocklyを参考に)
  26. 26. 1-8.センサの使い方(Color) • “Color”ユニット=対象物の色(RGB値)を計測 – Unitから”COLOR”を追加 (PortAを選択) – PortA(複数あるが いずれでもOK)に 接続する 26
  27. 27. 1-8.センサの使い方(Color) • COLOR Unitの”get red”で赤の値が取得できる • ただし感度が高すぎるため、ほぼ255に飽和 • “get rawData”で、センサの値を直接取り出す – “get rawData”は配列で取得するので、 “Variables”内の変数を定義し、 “Lists”内の関数を使って、 個別に取得する 27 Colorセンサから取得した値(R, G, Bそれぞれ)をディスプレイに 表示するプログラムを記述し、実行させる(※Blocklyを参考に) センサの値を直接取得し、 変数”color”に代入(実体は配列) 配列の1番目の要素=明るさ 配列の2, 3, 4番目の要素=赤(R), 緑(G), 青(B)
  28. 28. 1-9.タッチセンサ • 静電容量式タッチセンサ • 触ると「ON」になる、スイッチのように扱える • ButtonユニットのBlueボタンと同様に振る舞う – 追加するUnitで指定したPortに接続する 28 タッチセンサに触れると画面表示が変わるプログラム(Python)を 記述し、動作させる このタッチセンサは仕様上、 ButtonとはON/OFFが逆になる ・「タッチ」=「ButtonがRelease」 ・「タッチしない」=「ButtonがPressed」
  29. 29. 1-10.アクチュエータの使い方(サーボ) • 指定した位置にアームを移動できる サーボモータ • Unitから追加し、指定したPortに接続 29 ※アクチュエータ (actuator) =環境に作用を与えるもの (センサ (sensor)の逆の機能) ※サーボが動くとリセットがかかる 場合があるが、 とりあえず気にしない
  30. 30. 1-10.アクチュエータの使い方(サーボ) • サーボの角度は”write_angle()”で指定できる 30 from m5stack import * from m5ui import * from uiflow import * import unit setScreenColor(0x222222) servo0 = unit.get(unit.SERVO, unit.PORTC) while True: servo0.write_angle(30) wait(1) servo0.write_angle(60) wait(1) このプログラムを入力して実行し、動作を確認する。 またサーボの移動順序を自分で決め、それを実現する プログラムを記述して実行する
  31. 31. 1-11.アクチュエータの使い方(LEDテープ) • コマンドで複数LEDのRGB値を個別に 指定できるLED(NeoPixel) 31 接続するPortと LED数(この実験の 機材では10個)を指定 指定したPortに接続
  32. 32. 1-11.アクチュエータの使い方(LEDテープ) 32 Blocklyのブロックとそれに対応するPythonプログラムを参考に、 自分でLED点灯の仕様を決め、それを実現するPythonプログラムを記述して実行する indexで指定した番号のLEDの色を設定 indexで指定した範囲の LEDの色をまとめて設定 indexで指定した範囲の LEDの色をRGB値で設定 すべてのLEDの色をまとめて設定 すべてのLEDの色を変えずに明るさのみを設定 設定した各LEDの色を実際に表示する ※これを実行した時点で、実際のLEDの色が変わる
  33. 33. 2-1.ブレッドボードの使い方 33 穴は、内部で矢印の方向に接続されている 部品や配線ケーブルを穴に差し込み、電子回路を作成できる
  34. 34. 2-2.LEDの接続と回路 34 赤線の箇所が内部で接続 されていることに注意 配線ケーブルはどの色も機能は同じだが、 電源のマイナス(GND; Gと表記)側は 黒い配線ケーブルを使うのが通例 IOピン26番 電源のマイナス(GND; G) 長い方
  35. 35. 2-2.LEDの接続と回路 35 IO26 GND 1kΩ 2b.でブレッドボード上に作成した回路の回路図 2b.で作成した回路が、上記の回路図となることを理解する ※同じ記号(GND)のところはつながっている
  36. 36. 2-2.LED点滅(Lチカ) 36 from m5stack import * from m5ui import * from uiflow import * setScreenColor(0x222222) pinLED = machine.Pin(26, mode=machine.Pin.OUT) while True: pinLED.value(1) wait(1) pinLED.value(0) wait(1) IOピン26番に”1”を出力=3.3Vが出力され、LEDが点灯 IOピン26番に”0”を出力=0Vが出力され、LEDが消灯 このプログラムを実行させ、LEDを点滅させる。 またwait()を変更してLEDの点滅周期を変える。 IOピン26番のオブジェクトを生成(出力モード)
  37. 37. 2-3.複数のLチカ 37 • 動作仕様 – 赤LEDを、抵抗を通してIO5に接続 – 緑LEDを、抵抗を通してIO26に接続 – 以下の順序でLEDを点滅させる 1. 赤のみ点灯(0.5秒間) 2. 緑のみ点灯(0.5秒間) 3. 赤と緑を点灯(0.5秒間) 4. いずれも消灯(0.5秒間) 直接、以下の動作をするPythonプログラムを記述し、実行させる
  38. 38. 2-4.LEDに流れる電流を求める 38 IO26 GND 1kΩ “1”のときは、電源電圧の3.3Vとなる →内部に3.3Vの電圧源(点線)があると考えればよい http://akizukidenshi.com/catalog/g/gI-00624/ OptoSupply社OSDR5113A VF VF : Forward Voltage(順方向電圧) →この電圧の電圧源と考えればよい LEDのデータシートをダウンロードし、VFを読み取り、 それをもとにLEDに流れる電流を求める ※データシートはアカンサスポータルの この資料と同じところからダウンロードする ※英文のデータシートだが、得るべき情報は 一部なので、慣れれば楽(になるはず) min(最小値)、typ(標準値)、max(最大値)が 載っている場合は、とりあえずtypを参照
  39. 39. 2-5.明るさセンサ(CdS)の接続と回路 39 IOピン36番 電源のプラス(3.3V) (「3V3」と表記) GND 電源のプラス(VDDなどと表記)側は 赤い配線ケーブルを使うのが通例 明るさセンサ(CdS) ※CdS(硫化カドミウム)は明るさに応じて 電気抵抗が変わる特性がある CdSを抵抗としてこの回路の回路図を描き、CdSの抵抗が 100Ωの場合と10kΩの場合の、IOピン36の電圧を求める
  40. 40. 2-5.明るさセンサ(CdS)の読み取り 40 from m5stack import * from m5ui import * from uiflow import * from easyIO import * setScreenColor(0x222222) label0 = M5TextBox(100, 100, "Text", lcd.FONT_Default,0xFFFFFF, rotate=0) while True: label0.setText(str(analogRead(36))) wait(0.1) IOピン36番の電圧を読み取り、 文字列に変換してlabel0に設定 このプログラムを実行させ、以下の3つの場合で値を読み取り、IOピン36の電圧を求める。 ※電圧の計算は次項を参照 (a)手で覆って暗くした場合、(b)部屋の照明下、(c)スマホのライト等の照明を直接照射
  41. 41. 2-6.明るさセンサ(CdS)の電圧の計算 • analogRead()の戻り値は、加える電圧[V]に (ほぼ)比例 – 0V付近と3.3V付近は、やや線形性が崩れるが、 ほぼ無視できる • 今回の回路では、 抵抗分圧から 関係が求められる 41 value = 310×Vin[V] 入力電圧Vin[V] analogRead()の戻り値value analogRead()の特性の実測値
  42. 42. 2-7.温度センサの接続と回路 • アカンサスポータルから使用する温度センサ 「LM61」のデータシートをダウンロードする • データシートから、動作に必要な 回路接続を読み取る – この部品はTO-92パッケージ – 部品の足と名称の対応に注意 (どちらから見た図かをよく考える) 42 製品情報:http://www.tij.co.jp/product/jp/LM61 ※データシートの読み取りに便利な主な英単語 • power Supply=電源(電源のプラス側) • output=出力 • ground=接地(電源のマイナス(negative)側、「G」と表記 • bottom view=底面図(部品を裏側(足側)から見た図)
  43. 43. 2-7.温度センサの接続と回路 • 読み取った足と名称の対応に注意しながら、 電源、GND、出力(VOUT)をブレッドボードで M5stackに接続 – くれぐれも対応関係に注意 (心配なら質問する) – 電源は5Vを供給 – VOUTはIO35へ – 足は根元から曲げず、少し広げるだけでOK 43 接続する前に、配線をよくよく確認する。 万一、部品が熱くなる、異臭がするなど 異常があったら、すぐに配線ケーブルを はずし、接続をよくチェックする
  44. 44. 2-7.温度センサの読み取り 44 from m5stack import * from m5ui import * from uiflow import * from easyIO import * setScreenColor(0x222222) label0 = M5TextBox(100, 100, "Text", lcd.FONT_Default,0xFFFFFF, rotate=0) while True: label0.setText(str(analogRead(35))) wait(0.1) IOピン35番の電圧を読み取り、 文字列に変換してlabel0に設定 analogRead()で取得した値を、「温度[℃]」の値に変 換(演算)して表示することもできる このプログラムをもとに、温度を[℃]単位で表示する
  45. 45. 2-8.インターネット連携:IoTへ • PCやスマホだけでなく、「いろいろなもの」が インターネットにつながる世界 =IoT (Internet of Things) → AIの出番 45 クラウド IoT 大量のデータが集まる =AIで分析 ※2-8, 2-9, 2-10の内容はEdelWorksの古川光氏の協力で作成されました
  46. 46. 2-8.インターネット連携:リモートボタン • スマホ(ブラウザ)からM5stackを操作してみる 46 “Remote”内に、スマホ連携の処理がある ブラウザに「ボタン」を表示し、 それを押したらM5stackで処理を 行うプログラム (ボタンっぽくないが押せる) (ちょっと薄くて見にくいが) 「QRコード表示アイコン」で QRコードを表示し、 それをスマホ等でスキャンして ブラウザで制御ページを表示 このプログラムを実行し、スマホからM5stackを制御してみる
  47. 47. 2-8.インターネット連携:リモートラベル • 逆にM5stackからスマホ(ブラウザ)を制御 47 スマホ(ブラウザ)上にラベルを表示し、 そこに情報(この例では、ToFセンサで 取得した距離)を表示する例 このプログラムを参考に、M5stackで取得したセンサ情報をスマホに表示してみる スマホ(ブラウザ)側で表示を 自動更新する間隔[ms] (この例では3秒) ToFセンサで取得した距離情報 変数(Variable)を作成し(この例では”distance”という変数)、 それに必要な値を代入して表示などに使用することもできる 変数の作成 変数の更新(値の取得)
  48. 48. 2-9.インターネット連携(Webスクレイピング) • M5stackがWebサーバにアクセスし、データを 取得する – PCがWebサーバにアクセスしてWebページを表 示するのと、原理は同じ – ここでは、天気情報を取得してみる 48 HTTPリクエスト HTTPレスポンス Webサーバ 普通のPCでアクセスする場合
  49. 49. 2-9.インターネット連携(Webスクレイピング) 49 “Sign Up”からアカウントを作成 ※16歳以上とライセンス同意をチェック) ※メルマガを登録するか聞かれるが 必要ならチェックしておく ※何に利用するかを回答(任意) APIキーを 取得する (メモしておく) 天気情報を取得する都市を検索(例:金沢) 都市名を選択 • Webページを取得し、その中の情報を抜き出 して利用する(スクレイピング) – 例として、無料Webサービスから天気情報を取得 https://openweathermap.org/
  50. 50. 2-9.インターネット連携(Webスクレイピング) • 取得したAPI Keyと都市名を使って、以下の URLで天気情報などを取得できる(JSON形式) 50 ※JSON(JavaScript Object Notation) Webからのデータの取得などでよく使われるデータ形式 見れば、なんとなく意味はわかるはず 詳しくは次項&→https://www.json.org/json-ja.html http://api.openweathermap.org/data/2.5/weather?q=[都市名]&appid=[APIキー] このURLへアクセスすると、 このようなデータが返送される (JSON形式) ※[都市名]のところは、kanazawa などが入る ※APIキーは、先ほど記録したAPI Key ここに現在の天気が 書いてある この部分({}で囲まれている)が、”weather”のリストの最初(1つだけ)の要素
  51. 51. 補足:JSON(JavaScript Object Notation) • AjaxやREST APIなどWebからのデータの取得などでよく使わ れるデータ形式 • データ構造は「名前」と「値」の集合(オブジェクト/構造体/ ハッシュテーブル/連想配列など) 51 ・「:」で名前(key)と値(value)を分ける 例:”coord”の値は、{}内のオブジェクト ・名前を指定して値を取得する ・以下の型を用いることができる -文字列 ("...") -数値 (123, 12.3, 1.23e4 など) -ヌル値 (null) -真偽値 (true, false) -オブジェクト ({ ... })→入れ子構造 -配列 ([...]) ※配列は0番, 1番・・・の要素を持ち [0], [1]・・・で指定する 名前(key) [ ]で囲まれた部分 =配列(list) (0番, 1番,…の 要素をもつ) ※この例では0番のみ { } で囲まれた オブジェクト(かたまり) 値(value) ※この例 {}で囲われたオブジェクト(2つのkey&valueの組:入れ子構造)
  52. 52. 2-9.インターネット連携(Webスクレイピング) 項目“weather”の中のリストの 0番目(最初に現れるデータ)の ”main”の値を取得 52 天気情報を取得するURLを指定 (都市名とAPI Keyを指定する) 取得したJSON形式のデータを パースして変数に保持 “GET”を選択(HTTPのmethod) • 例として以下のプログラムで、指定したURLから JSONデータ取得→そこからmain部分を切り出し (パース)→それをlabel0(置いておく)で表示 このプログラムを参考に、M5stackで取得した天気や気温などの情報を表示してみる
  53. 53. 2-10.インターネット連携(IFTTT:概要) • M5stackから、IFTTTという機能を使える Webサーバへデータを送信する – IFTTTサーバが、受信したデータをGoogleスプレッ ドシートに記録するように設定する – そのスプレッドシートをPCから確認する 53 HTTPリクエスト (データを送信) HTTPレスポンス Webサーバ(IFTTTサーバ) 記録されたデータの確認 Googleサーバ Webページの表示 受信データをGoogle スプレッドシートに記録
  54. 54. 2-10.インターネット連携(IFTTT:準備1) 54 アカウントを作成 • Webサービスどうしを連携するサービスIFTTT ※IFTTT=IF This Then That:条件で行う動作を定義 • 例として、「M5stackからWebアクセスしてGoogleスプ レッドシートに情報を記録する」という動作をさせてみる https://ifttt.com/ アカウント(顔マーク) をクリック →”Create”を選択 使うサービスとして “webhooks”を 検索して選択 動作を起こす条件を定義する(クリック)
  55. 55. 2-10.インターネット連携(IFTTT:準備2) 55 このイベント(Webアクセスを受けたとき) に適当な名前をつけておく (このイベント名はあとで使う) 「Webアクセスを受けた とき」を条件(trigger)に 設定する 条件「M5stackからWebアクセス」のイベントを設定する
  56. 56. 2-10.インターネット連携(IFTTT:準備3) 56 接続の確認やアクセス許可 などを設定(OKで進む) ※Actionは”Add row to spreadsheet”を指定 行に書き込む フォーマット スプレッドシート名 スプレッドシート のディレクトリパス 条件が起こった(trigger)ときに 行う動作を指定する “Google sheets”を 検索して指定 とりあえずすべて deaultのままでOK 条件と動作の 設定を完了 条件(M5stackからアクセス)が起こった時に行う動作(GoogleSpreadsheetへ記録)を指定する
  57. 57. 2-10.インターネット連携(IFTTT:準備4) 57 APIキー(“use/”のあとの文字列)を記録しておく M5stackからWebアクセスするためのAPI Keyを取得する 先ほど設定した サービスを確認 “Webhooks”の 設定を確認する “Settings”を開く
  58. 58. 2-10.インターネット連携(IFTTTアクセス) • 以下のURLで、Googleスプレッドシートに記録 されていく(はず)のを確認する 58 Google (https://www.google.com/)をWebブラウザで開き、ログイン後に Googleドライブを開くと、このGoogleスプレッドシートに記録されるはず http://maker.ifttt.com/trigger/[イベント名]/with/key/[APIキー] ※[イベント名]のところは「準備2」(p.47)で指定したイベント名 ※APIキーは、先ほど記録したAPI Key まずはPCやスマホのWebブラウザから、このURLを直接入力し、 記録が成功(Congratuaration!...というメッセージが出る)のを確認する
  59. 59. 2-10.インターネット連携(IFTTTアクセス) 59 さきほどのURL 引数の”message”の内容を、 Key=“value1”に格納 “POST”を選択(HTTPのmethod) 関数”post”を定義(引数=”message”) ※青い歯車マークで引数を追加する M5stackのボタンAを押したら、”message”=「A」として 関数postを呼ぶ=M5stackからWebアクセスがおこる このプログラムを参考に、M5stackからIFTTT経由でGoogleスプレッドシートに記録をしてみる この+マークで、keyにvalue を追加するブロックを作成
  60. 60. 3.アイディアの具体化 • ものをつくるのためには「仕様」が必要 – 「仕様」を決めてからものを作る? – 作って、使ってみて、「仕様」を決める? – 「完璧な完成品」を作ってから試す? – 「とりあえず動く完成品」を作り、試して、 「アイディアが正しかったか」を検証し、 改良して作って・・・を繰り返す? 60 デザイン思考 (Design Thinking) 作る=思考の道具 ※詳しくは「デザイン思考」や「design thinking」で検索(多くの文献がある) プロトタイプ (Prototype) ※デザイン(design)は 「設計」という意味もある (「絵を描く」だけがデザインではない)
  61. 61. 3.アイディアの具現化(課題) • 「あったら便利なもの、生活がよくなるもの」 を1つ考え、M5stackで試作する – 実用レベルの完成度である必要はない – あくまでも試作品・動作検証ができればよい – 資料で扱っていない機能ブロックを使ってもOK • 例:※これと全く同じものは✕、ヒントにするはOK – 部屋に誰か入ってきたらスマホに通知 (ToFセンサ・Remoteを使えば作れそう) – 視覚障害者向けの、対象物の色を音で表現する機器 (Colorセンサ・スピーカを使えば作れそう) – 暗くなったら部屋の電灯をつける (Lightセンサとサーボモータ(吊り紐を引く)でできそう)61
  62. 62. 3.実装上の注意 • PortA~Eには、以下の通りIOピンが接続され ている。 • 以下のIOピンは、PortA~Eコネクタと本体コネ クタに接続されていて、同時に使えないので 注意 – PortA: IO21, IO22 – PortB: IO26, IO36 – PortC: IO17, IO16 – PortD: IO35, IO34 – PortE: IO13, IO5 62
  63. 63. レポートについて • 【最後の課題以外】以下の内容を課題ごとに順に記載 – 課題の内容(指示された課題内容を自分の言葉で) – 課題の結果(作成したプログラム、動作の観察など。写真や画面 キャプチャを用いてよい) – 結果に対する考察(得られた知見など。途中で失敗やエラーがあ ればその原因と対処についても記載) • 【最後の課題】以下の内容を記載 – 作ったものの概要 – それを作ろうと思った理由 – 試作結果(実機の写真、プログラム(Blockly or MicroPython)) – 実際に使ってみての感想・改善点 • 提出方法 – PDF形式でアカンサスポータルの「テーマ3」のレポート提出箇所へ – 表紙のみ、必要事項を掲載して印刷し、秋田居室(2B714) or 実験 室で手渡し 63

×