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

情報通信工学実験第1：テーマ3
マイコンのプログラミング
秋田純一
akita@is.t.kanazawa-u.ac.jp
@akita11
(Rev.2019/12/18)
CC BY-SA

実験の目的
• マイコンのプログラミングを通して、コンピュー
タと実世界をつなぐ技術について学ぶ
– 実世界とをつなぐセンサ等の使い方を学ぶ
– 実世界とをつなぐセンサ等の電子回路の基本を
学ぶ
– マイコンとインターネットの連携について学ぶ
– アイディアを具体化する手法について学ぶ
2
モノのインターネット
IoT （Internet of Things）

実験の内容と注意
• 実験内容
– マイコン（M5stack）の使い方、Python入門
– センサの使い方、アクチュエータの使い方
– ブレッドボードの使い方
– センサ等の回路計算
– インターネットとの連携
– アイディアの具現化とプロトタイピング
• 実施上の注意
（※レポート作成に必要なので忘れずに）
– 作成したプログラムや回路は画面キャプチャ、写真、Save等
で、適宜保存しておく
– 途中のエラーとその対処、気づいたことは、適宜記録しておく
3
目安として
１週目
目安として
２週目
目安として
３週目

（準備）マイコンとコンピュータ
スマホPC
(Personal Computer)
マイコン
(Micro-controller)
演算性能
インターネット
接続
低価格
省サイズ
◎ ○～◎ △～○
○（WiFi経由） ◎ △～◎
△ ○ ◎
△ ○ ◎
4
実世界連携 △ ○ ◎
マイコンは、
演算性能は低めだが、
実世界（物理世界）との
連携が得意

（準備）使用するマイコン：M5stack
• 中国M5stack社の製品
– ESP32（WiFi/BluetoothLEつきマイコン）
（240MHz Dual Core, 600MIPS）
– センサ等の接続ができるコネクタ
– 小型液晶モニタ
– プッシュスイッチ（3個）
– 単体で「完成品」に近いプロトタイプを作成可能
– プログラミング環境：MicroPython / ブロック型言語
等
– 積み重ねて機能拡張が可能
5
例えばここで購入できる（金沢のマルツでも売っている）
https://www.switch-science.com/catalog/3647/

（準備）USBケーブルの抜き差し
• M5stack側は抜かない
• PC側を抜く
6

（準備）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)になっていることを確認
（古いバージョンの場合はから切り替える

1-1.お約束の”Hellow World”
• UI Flow (http://flow.m5stack.com/)をブラウザで開く
8
“Label”をドラッグ
“UI”内の”Label”に、Labelに
対する処理ブロックが現れる
“Show”ブロックを、“Setup”の下に「はめる」
（「はまる」と、グレーから色が変わる）
※”Setup”は、起動後に実行される処理を「はめる」場所
※不要なLabel等はドラッグ時に
現れる「ゴミ箱」へ入れれば消去
http://flow01.m5stack.com/

1-1.M5stackの電源のON/OFF
• PC等にUSB-Cケーブルで接続して給電
– 使用後はケーブルを抜けば電源OFF（ブチ切OK）
– 内蔵バッテリもある（この実験では普段は使わない）
9
主電源
（普段はOFFにしておく）
※ONにするとバッテリから給電＆充電
本体電源SW（赤）
・1回押し→リセット（※よく使う）
・2回押し→電源ON/OFF（バッテリ動作時）

1-1.プログラムの転送・実行
10
左下のApi keyをクリック
M5stackのディスプレイに表示される
”API Key”（8桁の英数字）を入力
※言語を選べるが、Englishがオススメ
M5stackがOnlineになる
“Run”ボタンで、M5stackに
プログラムを転送し、実行
”Save”でプログラムを保存できる
※「1a.m5f」のように、課題ごとに名前を
変えておくこと（レポートで必要）
※”Load”で読み込むこともできる
※画面キャプチャもあわせて
保存しておくと便利
初回のみ行う設定
本体ディスプレイの右上に
緑マークが出ればOK失敗が続くときは再接続
or 本体リセット

1-1.テキストの属性を変更する
11
置いたLabel（テキスト）をクリック
→Labelの属性（位置、フォント等）が変更できる
位置や色、フォント（文字サイズ）を変更して実行してみる
また、背景の色の変更や、適当な図形（矩形・円）なども描画してみる
※ここの”text”属性で、画面上に表示される文字列を設定できるが、
プログラムの”Setup”内で設定してもよい（結果は同じになる）
黒枠白字の内容は課題
として実施すること
（結果（写真等）・プログラ
ムも保存しておく）
※プログラムとその動作の対応が
怪しい場合がある（バグ）ので、
あまり深追いはしない・・・

1-2.本体ボタンの動作
12
いずれかのボタンを、いろいろな押し方で押して
Labelを変更するプログラムを実行してみる
ButtonAを押した時に実行される処理を書くブロック
※検出するボタンの種類・押し方などを選べる
ButtonA
ButtonB
ButtonC

1-2.本体ボタンの動作
13
Timer内の”Wait”で、指定時間だけ待機する
Waitで指定した時間待つ動作を確認する

1-3.Pythonでのプログラミング
14
このボタンで、Blocklyで記述したプログラムを
Python言語（MicroPython）に変換できる
※Python：組み込み分野やAI分野でよく使われる言語
画面の背景色の設定
Labelの配置と設定
buttonAが押された
ときの動作（関数）の定義
buttonAの操作と、そのときに
呼ばれる関数の割当
Labelのテキストの設定インデントで、グループを指定（C言語の {} と同様）
Blocklyプログラムと、Pythonプログラムとの対応を理解する
おまじない
（使うライブラリの宣言）
画面右下の”CodeLock“を”OFF”にしておく

• UI Flowで書いたPythonプログラムの保存方法
（右上メニュー”Save”はBlocklyの保存のみなので、
プログラムをテキストとして保存する）
– テキストファイルの編集ソフト
（Windowsの「メモ帳」など）を開く
– UI Flowで書いたPythonプログラムを全選択→コピー
– テキスト編集ソフト（メモ帳など）へ
ペースト（貼り付け）し、ファイル名をつけて保存
• このとき、改行がなくなって一行になってしまうが、再び
UI Flowにコピー＆ペーストで戻せば、正しく改行される
15
全選択して
コピー＆ペースト

1-3.Pythonの文法（のすごく要点）
• 基本的にC言語（C++）やJavaに近いので、
差分（違い）のみ気をつければよい
16
label0 = M5TextBox(...)
def buttonA_wasPressed():
label0.setText('button A Pressed')
wait(1)
pass
関数定義の最後は
コロン（「:」）
関数定義などの「グループ」の範囲は、
インデント（行の戦闘にTABキーまたは
複数のスペース）で示す
行末はセミコロン（「;」）
をつけない
文字列はシングル
クオート（「’」）で囲う
オブジェクト（ここではlabel0）に
付随する処理（「メソッド」）は
ドット（「.」）をつけて示す
オブジェクト（ここではlabel0という名
前）を作成する。オブジェクトは、値
や処理を伴う集合体の概念
特に意味はない
（空行の代わり）

• 動作仕様
– ラベルを1つおく
– 初期状態では、label0=“a”とする
– ボタンAを押したら、label0を1秒間だけ”A”に変更
し、その後”a”に戻す
– ボタンBを押したら、画面中央(160,120)に半径30
の円を描画し、1秒後に消す
17
直接、以下の動作をするPythonプログラムを記述し、実行させる
※記述の間違いがあると実行時にエラーが表示されるので、内容を確認してデバッグする
※UI Flowのディスプレイ上でLabelや図形を置いたり変更すると、プログラムも変わる
※必要に応じてPythonの文法をWebページや書籍で調べる（そして、少しずつ慣れる）

1-4.センサの使い方：Button
• M5stack純正の各種センサ等の「Unit」を接続
し、UI Flowの”Unit”から使用できる
18
Unitを追加
DualButtonを選択
（接続するPortをBとする）
DualButtonユニットが
追加された
実際にDualButtonユニットを、
指定した”PortB”に接続する
やや見にくいが、
スクロールバーでスクロール
コネクタの片面の両側にヤマが
あるので、ソケットにあわせる
この＋マークが現れない場合は、
画面外にはみだしているので
ブラウザの文字を小さくしてリロードする

19Blocklyプログラムと、Pythonプログラムとの対応を理解する
“Units”内に、追加したUnitに関する
ブロックが現れる
接続したButtonユニットの
赤ボタンを押した時に
label0を”Hello M5”とする
プログラム
対応するPythonのプログラム
“DualButton”ユニットの
オブジェクトを取得
（PortBに接続を指定）
取得したオブジェクトに
対して処理を記述
Pythonに変換

• 動作仕様
– ラベルを1つおく
– 初期状態では、label0=“”とする
– 赤ボタンを押したら、label0を1秒間だけ”Red”に
変更し、その後””に戻す
– 青ボタンを押したら、画面中央(160,120)に半径30
の円を描画し、1秒後に消す
20
1c.で作成したPythonプログラムとの関連・対応に注意
DualButtonユニットを、別のポート（例えばPortC）に接続し、
同様の動作をするプログラムを記述して動作させる

1-5.センサの使い方：Light（明るさ）
21
Lightを選択
（接続するPortをB or Dとする）
Lightユニットの値（明るさ）をディスプレイに表示する
プログラムをPythonで記述し動作させる
※Blocklyからの変換を用いてよいが、できるだけPythonでゼロから書いてみよう
Unitで設定したPortに接続する
Lightユニットは、センサ面の明るさに応じた
電圧が出力され、それを取得できる
センサ
面
※接続していないユニットは、UI Flowの左側画面から
削除しておく。Pythonでは冒頭のimportを削除する。

1-6.センサの使い方（ジョイスティック）
• ジョイスティックは、Unitにないので、
信号を直接読み取る
– Unitに「JoyStick」があるが、使うものとは別物
• PortD＝2本の信号線（IOピン34番と35番）
（IO=Input/Ouput, 入出力のこと）
• スティックの傾き（X軸・Y軸）に
応じて、それぞれの電圧が
変化する
22
PortDに接続する

• 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()を使うための宣言（追記する）

• 動作仕様
– ラベルを2つおく(label0, label1)
– ジョイスティックのX軸の値をlabel0に表示する
– ジョイスティックのY軸の値をlabel1に表示する
– 表示を0.1秒ごとに更新する
24

1-7.センサの使い方（ToF）
• “ToF”ユニット＝センサ面から対象物までの距
離を計測する
– ToF = Time of Flight
※光の往復時間から
距離を計測する
– Unitから”TOF”を追加
（PortAを選択）
– PortA（複数あるが
いずれでもOK）に
接続する
25
ToFセンサから取得した値（単位：mm）をディスプレイに
表示するプログラムを記述し、実行させる（※Blocklyを参考に）

1-8.センサの使い方（Color）
• “Color”ユニット＝対象物の色（RGB値）を計測
– Unitから”COLOR”を追加
（PortAを選択）
– PortA（複数あるが
いずれでもOK）に
接続する
26

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)

1-9.タッチセンサ
• 静電容量式タッチセンサ
• 触ると「ON」になる、スイッチのように扱える
• ButtonユニットのBlueボタンと同様に振る舞う
– 追加するUnitで指定したPortに接続する
28
タッチセンサに触れると画面表示が変わるプログラム（Python）を
記述し、動作させる
このタッチセンサは仕様上、
ButtonとはON/OFFが逆になる
・「タッチ」＝「ButtonがRelease」
・「タッチしない」＝「ButtonがPressed」

1-10.アクチュエータの使い方（サーボ）
• 指定した位置にアームを移動できる
サーボモータ
• Unitから追加し、指定したPortに接続
29
※アクチュエータ (actuator)
＝環境に作用を与えるもの
（センサ (sensor)の逆の機能）
※サーボが動くとリセットがかかる
場合があるが、とりあえず気にしない

1-10.アクチュエータの使い方（サーボ）
• サーボの角度は”write_angle()”で指定できる
30
from m5ui import *
import unit
servo0 = unit.get(unit.SERVO, unit.PORTC)
while True:
servo0.write_angle(30)
wait(1)
servo0.write_angle(60)
wait(1)
このプログラムを入力して実行し、動作を確認する。
またサーボの移動順序を自分で決め、それを実現する
プログラムを記述して実行する

1-11.アクチュエータの使い方（LEDテープ）
• コマンドで複数LEDのRGB値を個別に
指定できるLED（NeoPixel）
31
接続するPortと
LED数（この実験の
機材では10個）を指定
指定したPortに接続

1-11.アクチュエータの使い方（LEDテープ）
32
Blocklyのブロックとそれに対応するPythonプログラムを参考に、
自分でLED点灯の仕様を決め、それを実現するPythonプログラムを記述して実行する
indexで指定した番号のLEDの色を設定
indexで指定した範囲の
LEDの色をまとめて設定
indexで指定した範囲の
LEDの色をRGB値で設定
すべてのLEDの色をまとめて設定
すべてのLEDの色を変えずに明るさのみを設定
設定した各LEDの色を実際に表示する
※これを実行した時点で、実際のLEDの色が変わる

2-1.ブレッドボードの使い方
33
穴は、内部で矢印の方向に接続されている
部品や配線ケーブルを穴に差し込み、電子回路を作成できる

2-2.LEDの接続と回路
34
赤線の箇所が内部で接続
されていることに注意
配線ケーブルはどの色も機能は同じだが、
電源のマイナス（GND; Gと表記）側は
黒い配線ケーブルを使うのが通例
IOピン26番
電源のマイナス（GND; G）
長い方

2-2.LEDの接続と回路
35
IO26
GND
1kΩ
2b.でブレッドボード上に作成した回路の回路図
2b.で作成した回路が、上記の回路図となることを理解する
※同じ記号（GND）のところはつながっている

2-2.LED点滅（Lチカ）
36
from m5ui import *
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番のオブジェクトを生成（出力モード）

2-3.複数のLチカ
37
• 動作仕様
– 赤LEDを、抵抗を通してIO5に接続
– 緑LEDを、抵抗を通してIO26に接続
– 以下の順序でLEDを点滅させる
1. 赤のみ点灯（0.5秒間）
2. 緑のみ点灯（0.5秒間）
3. 赤と緑を点灯（0.5秒間）
4. いずれも消灯（0.5秒間）

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を参照

2-5.明るさセンサ（CdS）の接続と回路
39
IOピン36番
電源のプラス（3.3V）
（「3V3」と表記）
GND
電源のプラス（VDDなどと表記）側は
赤い配線ケーブルを使うのが通例
明るさセンサ（CdS）
※CdS（硫化カドミウム）は明るさに応じて
電気抵抗が変わる特性がある
CdSを抵抗としてこの回路の回路図を描き、CdSの抵抗が
100Ωの場合と10kΩの場合の、IOピン36の電圧を求める

2-5.明るさセンサ（CdS）の読み取り
40
from m5ui import *
while True:
wait(0.1)
IOピン36番の電圧を読み取り、
文字列に変換してlabel0に設定
このプログラムを実行させ、以下の3つの場合で値を読み取り、IOピン36の電圧を求める。
※電圧の計算は次項を参照
(a)手で覆って暗くした場合、(b)部屋の照明下、(c)スマホのライト等の照明を直接照射

2-6.明るさセンサ（CdS）の電圧の計算
• analogRead()の戻り値は、加える電圧[V]に
（ほぼ）比例
– 0V付近と3.3V付近は、やや線形性が崩れるが、
ほぼ無視できる
• 今回の回路では、
抵抗分圧から
関係が求められる
41
value = 310×Vin[V]
入力電圧Vin[V]
analogRead()の戻り値value
analogRead()の特性の実測値

2-7.温度センサの接続と回路
• アカンサスポータルから使用する温度センサ
「LM61」のデータシートをダウンロードする
• データシートから、動作に必要な
回路接続を読み取る
– この部品はTO-92パッケージ
– 部品の足と名称の対応に注意
（どちらから見た図かをよく考える）
42
製品情報：http://www.tij.co.jp/product/jp/LM61
※データシートの読み取りに便利な主な英単語
• power Supply＝電源（電源のプラス側）
• output＝出力
• ground＝接地（電源のマイナス(negative)側、「G」と表記
• bottom view＝底面図（部品を裏側（足側）から見た図）

2-7.温度センサの接続と回路
• 読み取った足と名称の対応に注意しながら、
電源、GND、出力(VOUT)をブレッドボードで
M5stackに接続
– くれぐれも対応関係に注意
（心配なら質問する）
– 電源は5Vを供給
– VOUTはIO３５へ
– 足は根元から曲げず、少し広げるだけでOK
43
接続する前に、配線をよくよく確認する。
万一、部品が熱くなる、異臭がするなど
異常があったら、すぐに配線ケーブルを
はずし、接続をよくチェックする

2-7.温度センサの読み取り
44
from m5ui import *
while True:
wait(0.1)
IOピン35番の電圧を読み取り、
文字列に変換してlabel0に設定
analogRead()で取得した値を、「温度[℃]」の値に変
換（演算）して表示することもできる
このプログラムをもとに、温度を[℃]単位で表示する

2-8.インターネット連携：IoTへ
• PCやスマホだけでなく、「いろいろなもの」が
インターネットにつながる世界
＝IoT (Internet of Things) → AIの出番
45
クラウド
IoT
大量のデータが集まる
＝AIで分析
※2-8, 2-9, 2-10の内容はEdelWorksの古川光氏の協力で作成されました

2-8.インターネット連携：リモートボタン
• スマホ（ブラウザ）からM5stackを操作してみる
46
“Remote”内に、スマホ連携の処理がある
ブラウザに「ボタン」を表示し、
それを押したらM5stackで処理を
行うプログラム
（ボタンっぽくないが押せる）
（ちょっと薄くて見にくいが）
「QRコード表示アイコン」で
QRコードを表示し、
それをスマホ等でスキャンして
ブラウザで制御ページを表示
このプログラムを実行し、スマホからM5stackを制御してみる

2-8.インターネット連携：リモートラベル
• 逆にM5stackからスマホ（ブラウザ）を制御
47
スマホ（ブラウザ）上にラベルを表示し、
そこに情報（この例では、ToFセンサで
取得した距離）を表示する例
このプログラムを参考に、M5stackで取得したセンサ情報をスマホに表示してみる
スマホ（ブラウザ）側で表示を
自動更新する間隔[ms]
（この例では３秒）
ToFセンサで取得した距離情報
変数(Variable)を作成し（この例では”distance”という変数）、
それに必要な値を代入して表示などに使用することもできる
変数の作成変数の更新（値の取得）

2-9.インターネット連携（Webスクレイピング）
• M5stackがWebサーバにアクセスし、データを
取得する
– PCがWebサーバにアクセスしてWebページを表
示するのと、原理は同じ
– ここでは、天気情報を取得してみる
48
HTTPリクエスト
HTTPレスポンス
Webサーバ
普通のPCでアクセスする場合

49
“Sign Up”からアカウントを作成
※16歳以上とライセンス同意をチェック）
※メルマガを登録するか聞かれるが
必要ならチェックしておく
※何に利用するかを回答（任意）
APIキーを
取得する
（メモしておく）
天気情報を取得する都市を検索（例：金沢）
都市名を選択
• Webページを取得し、その中の情報を抜き出
して利用する（スクレイピング）
– 例として、無料Webサービスから天気情報を取得
https://openweathermap.org/

• 取得した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つだけ）の要素

補足：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の組：入れ子構造）

項目“weather”の中のリストの
0番目（最初に現れるデータ）の
”main”の値を取得
52
天気情報を取得するURLを指定
（都市名とAPI Keyを指定する）
取得したJSON形式のデータを
パースして変数に保持
“GET”を選択（HTTPのmethod）
• 例として以下のプログラムで、指定したURLから
JSONデータ取得→そこからmain部分を切り出し
（パース）→それをlabel0（置いておく）で表示
このプログラムを参考に、M5stackで取得した天気や気温などの情報を表示してみる

2-10.インターネット連携（IFTTT：概要）
• M5stackから、IFTTTという機能を使える
Webサーバへデータを送信する
– IFTTTサーバが、受信したデータをGoogleスプレッ
ドシートに記録するように設定する
– そのスプレッドシートをPCから確認する
53
HTTPリクエスト
（データを送信）
HTTPレスポンス
Webサーバ（IFTTTサーバ）
記録されたデータの確認
Googleサーバ
Webページの表示
受信データをGoogle
スプレッドシートに記録

2-10.インターネット連携（IFTTT：準備１）
54
アカウントを作成
• Webサービスどうしを連携するサービスIFTTT
※IFTTT=IF This Then That：条件で行う動作を定義
• 例として、「M5stackからWebアクセスしてGoogleスプ
レッドシートに情報を記録する」という動作をさせてみる
https://ifttt.com/
アカウント（顔マーク）
をクリック
→”Create”を選択
使うサービスとして
“webhooks”を
検索して選択
動作を起こす条件を定義する（クリック）

2-10.インターネット連携（IFTTT：準備2）
55
このイベント（Webアクセスを受けたとき）
に適当な名前をつけておく
（このイベント名はあとで使う）
「Webアクセスを受けた
とき」を条件(trigger)に
設定する
条件「M5stackからWebアクセス」のイベントを設定する

56
接続の確認やアクセス許可
などを設定（OKで進む）
※Actionは”Add row to spreadsheet”を指定
行に書き込む
フォーマット
スプレッドシート名
スプレッドシート
のディレクトリパス
条件が起こった(trigger)ときに
行う動作を指定する
“Google sheets”を
検索して指定
とりあえずすべて
deaultのままでOK
条件と動作の
設定を完了
条件（M5stackからアクセス）が起こった時に行う動作（GoogleSpreadsheetへ記録）を指定する

57
APIキー（“use/”のあとの文字列）を記録しておく
M5stackからWebアクセスするためのAPI Keyを取得する
先ほど設定した
サービスを確認
“Webhooks”の
設定を確認する
“Settings”を開く

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!...というメッセージが出る）のを確認する

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
を追加するブロックを作成

3.アイディアの具体化
• ものをつくるのためには「仕様」が必要
– 「仕様」を決めてからものを作る？
– 作って、使ってみて、「仕様」を決める？
– 「完璧な完成品」を作ってから試す？
– 「とりあえず動く完成品」を作り、試して、
「アイディアが正しかったか」を検証し、
改良して作って・・・を繰り返す？
60
デザイン思考
(Design Thinking)
作る＝思考の道具
※詳しくは「デザイン思考」や「design thinking」で検索（多くの文献がある）
プロトタイプ
(Prototype)
※デザイン(design)は
「設計」という意味もある
（「絵を描く」だけがデザインではない）

3.アイディアの具現化（課題）
• 「あったら便利なもの、生活がよくなるもの」
を１つ考え、M5stackで試作する
– 実用レベルの完成度である必要はない
– あくまでも試作品・動作検証ができればよい
– 資料で扱っていない機能ブロックを使ってもOK
• 例：※これと全く同じものは✕、ヒントにするはOK
– 部屋に誰か入ってきたらスマホに通知
（ToFセンサ・Remoteを使えば作れそう）
– 視覚障害者向けの、対象物の色を音で表現する機器
（Colorセンサ・スピーカを使えば作れそう）
– 暗くなったら部屋の電灯をつける
（Lightセンサとサーボモータ（吊り紐を引く）でできそう）61

3.実装上の注意
• PortA～Eには、以下の通りIOピンが接続され
ている。
• 以下のIOピンは、PortA～Eコネクタと本体コネ
クタに接続されていて、同時に使えないので
注意
– PortA: IO21, IO22
– PortB: IO26, IO36
– PortC: IO17, IO16
– PortD: IO35, IO34
– PortE: IO13, IO5
62

レポートについて
• 【最後の課題以外】以下の内容を課題ごとに順に記載
– 課題の内容（指示された課題内容を自分の言葉で）
– 課題の結果（作成したプログラム、動作の観察など。写真や画面
キャプチャを用いてよい）
– 結果に対する考察（得られた知見など。途中で失敗やエラーがあ
ればその原因と対処についても記載）
• 【最後の課題】以下の内容を記載
– 作ったものの概要
– それを作ろうと思った理由
– 試作結果（実機の写真、プログラム（Blockly or MicroPython））
– 実際に使ってみての感想・改善点
• 提出方法
– PDF形式でアカンサスポータルの「テーマ3」のレポート提出箇所へ
– 表紙のみ、必要事項を掲載して印刷し、秋田居室（2B714） or 実験
室で手渡し
63

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to M5Stackを使ったIoTプログラミング (20)

More from Junichi Akita

More from Junichi Akita (20)

Recently uploaded

Recently uploaded (9)

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