Lチカとステートマシン

（LEDをチカチカと表示させる）Lチカをコーディングをする際にフローチャートで設計するのがわかりやすい（とっつきやすい）と思いますが、ちょっと複雑なことをしようとすると、ソースコードがスパゲッティになってしまいます。そもそも「ソースコードがスパゲッティになる」原因は、フローチャートのような設計図がスパゲッティになってしまうからです（ループのネストと複雑な条件分岐）。

Lチカ自体は、フローチャートで表し、再利用できるように関数化しておくと良いと思いますが、全体的な振る舞いに対しては、ステートマシンという考え方を取り入れ、状態遷移図や状態遷移表を使って設計すると、より複雑な機能でもソースコードがスパゲッティになることを防げます。

ステートマシン
ステートマシンについては、次のキーワードで他の文献や資料を参照してください。

ステートマシン
状態遷移図
状態遷移表
UML State Machine Diagram
有限オートマトン

状態遷移図や状態遷移表の設計を元に、状態変数や分岐処理を駆使したコーディングも可能ですが、一般的にはステートマシンと呼ばれるようなライブラリーを使用します。今回は、micro:bit向けのブロック型ステートマシンとして、Mstate拡張機能を使います。

Mstate拡張機能
Mstate拡張機能はユーザー定義の拡張機能です。拡張機能の追加画面で、URLを入力して、追加できます。

+拡張機能
→ 拡張機能 (検索または、プロジェクトのURLを入力・・・)
→ https://github.com/jp-rad/pxt-mstate

Lチカの基本

LEDをチカチカと点滅するために、まずは、「Lチカのフローチャート」に従って、コーディングしました。
blinkNextの値に従って、LED画面の明るさを交互に切り替えています(関数blinkLED)。

ブロック

JavaScript

function blinkLED () {
    if (0 == blinkNext) {
        blinkNext = 1
        led.setBrightness(100)
    } else {
        blinkNext = 0
        led.setBrightness(255)
    }
}
let blinkNext = 0
blinkNext = 1
basic.showIcon(IconNames.Heart)
loops.everyInterval(500, function () {
    blinkLED()
})

Mstate拡張機能を使ったLチカ

１つの状態のみで構成されるステートマシンをMstate拡張機能を使って次のようにコーディングできます。
尚、Mstate拡張機能のDoアクティビティでの振る舞いに注意してください。その状態へ状態遷移すると、Entryアクションを実行後、次の状態遷移が行われるまで、Doアクティビティを指定間隔毎に繰り返し実行します。

ブロック

JavaScript

function blinkLED () {
    if (0 == blinkNext) {
        blinkNext = 1
        led.setBrightness(100)
    } else {
        blinkNext = 0
        led.setBrightness(255)
    }
}
let blinkNext = 0
mstate.declareEntry("State1", function (prev) {
    blinkNext = 1
    basic.showIcon(IconNames.Heart)
})
mstate.declareDo("State1", 500, function () {
    blinkLED()
})
mstate.start("State1")

状態遷移図

状態遷移図を使って次のように設計できます。

mstate.declareEntry("State1", ...)が、図中State1のentry/ LED表示に対応し、
mstate.declareDo("State1", 500, ...)が、図中State1のdo/ LED点滅 (500ms)(500ms毎の繰り返し)に対応しています。
また、mstate.start("State1")が、図中State1(デフォルトステート)からの開始を意味します。

Mstateブロックの書き方

最初だけブロック内にすべてのブロックを配置しましたが、状態名称定義ブロック(defineStateName())内に配置することをお勧めします。状態別にEntryアクション宣言ブロック、Doアクティビティ宣言ブロック、Exitアクション宣言ブロック、トランジション宣言ブロックをまとめておくことが可能です。また、STATE変数を参照すれば、状態名称の入力ミスを減らすこともできます。

例えば、次の状態遷移図を設計し、Aボタンでステートマシンを開始し、BボタンでFinal("*")へ遷移するようにコーディングしてみます。

状態遷移図

ブロック

JavaScript

let blinkNext = 0
function blinkLED () {
    if (0 == blinkNext) {
        blinkNext = 1
        led.setBrightness(100)
    } else {
        blinkNext = 0
        led.setBrightness(255)
    }
}
mstate.defineStateName("State1", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        blinkNext = 1
        basic.showIcon(IconNames.Heart)
    })
    mstate.declareDo(STATE, 500, function () {
        blinkLED()
    })
    mstate.declareExit(STATE, function (next) {
        basic.showIcon(IconNames.SmallHeart)
    })
    mstate.declareTransition(STATE, "*", "Trigger1")
})
input.onButtonPressed(Button.A, function () {
    mstate.start("State1")
})
input.onButtonPressed(Button.B, function () {
    mstate.fire("Trigger1")
})

点滅スピードの切り替え

次に点滅スピードを切り替えられるようにしてみます。Doアクティビティの繰り返し間隔は指定可能ですが、実行中に動的に変更することはできません(ハードコーディング)。そこで、遅い点滅の状態(500ms)と速い点滅の状態(200ms)とをそれぞれ宣言し、トリガー("A")で交互に状態遷移するようにします。

それを次の状態遷移図のように設計しました。

状態遷移図

この設計でも期待する動作をしますが、状態遷移する度にLED表示が繰り返し呼び出されるのが気になります。
そこで、LED表示だけを行う状態（"On"）を追加し、次のように再設計しました。

(再設計) 状態遷移図

ブロック

JavaScript

function blinkLED () {
    if (0 == blinkNext) {
        blinkNext = 1
        led.setBrightness(100)
    } else {
        blinkNext = 0
        led.setBrightness(255)
    }
}
mstate.defineStateName("On", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        blinkNext = 0
        basic.showIcon(IconNames.Heart)
    })
    mstate.declareTransition(STATE, "Slow", "")
})
mstate.defineStateName("Slow", function (STATE) {
    mstate.declareDo(STATE, 500, function () {
        blinkLED()
    })
    mstate.declareTransition(STATE, "Fast", "A")
})
mstate.defineStateName("Fast", function (STATE) {
    mstate.declareDo(STATE, 200, function () {
        blinkLED()
    })
    mstate.declareTransition(STATE, "Slow", "A")
})
input.onButtonPressed(Button.A, function () {
    mstate.fire("A")
})
let blinkNext = 0
mstate.start("On")

ちょっと複雑なLチカ

もうちょっと複雑なLチカを考えてみました。

micro:bitの電源を入れると、LEDは消灯状態となる（何も表示しない）
ボタンAを押すと、LEDが点灯する
ボタンAを押すたびに、点灯、遅い点滅、速い点滅の順にLED表示が切り替わる
ボタンBを押すと、LEDは消灯状態となる（何も表示しない）
ボタンA+Bを押すと、自動モードとなり、一定間隔でボタンAが押されているような動作をする
ただし、消灯状態では、自動モードにならない
ボタンBを押すと自動モードは解除され、通常モードに戻る（同時にLEDは消灯状態となる）

状態とトリガー

ステートマシンを使ったプログラミングを行うため、まずは、状態とトリガーを洗い出します。
ただし、この例では、LEDの表示状態とモード状態とが同時に現れるので、ステートマシンを２つに分けて考えます。

ステートマシン1-LED表示状態

状態(1)	説明
(初期状態)	micro:bitが起動していない(電源オフ)
Off	LEDは消灯状態で何も表示されていない
On	LEDは点灯状態である(ハートアイコンを表示)
Slow	LEDは遅い点滅を繰り返す(500ms間隔)
Fast	LEDは速い点滅を繰り返す(200ms間隔)

トリガー

トリガー(1)	説明
(電源オン)	電源が入れられた
A	ボタンAが押された
B	ボタンBが押された

ステートマシン2-モード

状態(2)	説明
通常モード	ボタンで表示を操作できる
自動モード	一定間隔で点灯・点滅が切り替わる

トリガー

トリガー(2)	説明
A+B	ボタンA+Bが押された

トリガーAから考える

まずは、トリガーAによる状態遷移から考えてみました。

状態遷移図

Offへ(●-->Off)
電源オンで、初期状態（●印）から状態Offへ遷移します。この状態Offに遷移した時(entry)、LEDを消灯にしています。
Onへ(Off-->On)
ボタンAが押された際に、トリガーAを発生させることにより、状態がOffからOnへと遷移します。Onに遷移した時(entry)、「点滅状態初期化」で、点滅の明るさを暗くした状態から始めるように、ここで初期化します。その後、LEDを点灯にしています。
Slowへ(On-->Slow)
さらにボタンAが押された際に、トリガーAを発生させることにより、状態がOnからSlowへと遷移します。LEDを点滅させるために、その明るさを暗くしたり明るくしたりします。状態Onで「点滅状態初期化」がされているため、暗い状態から始まります。
実際には、doで500ms毎に明るさを切り替える処理（LED点滅の呼び出し）を繰り返します（トリガーAが発生するまで）。
Fastへ(Slow-->Fast)
またさらに、トリガーAを発生させることにより、状態がSlowからFastへと遷移しますが、Fastでは、entryがありません。これは、明るさの状態（変数の値）をSlowから引き継ぐ為です。そして、doでは、200ms毎に明るさを切り替える処理を繰り返します。
再びOnへ(Fast-->On)
繰り返し、トリガーAを発生させることにより、状態がFastからOnへと再び遷移しますが、遷移する前に、Fastのexitが実行されます。タイミングによっては、LEDが暗くなっている場合があるために、最大の明るさに戻しています。

尚、状態遷移図を状態遷移表に書き換えることもできます。

状態遷移表

状態	アクション	(電源オン)	A
●		Offへ	-
Off	entry/ - LED消灯	-	Onへ
On	entry/ - 点滅状態初期化 - LED点灯	-	Slowへ
Slow	do/ - LED点滅（500ms）	-	Fastへ
Fast	do/ - LED点滅（200ms） exit/ - 明るさ最大化	-	Onへ

状態遷移表のままに、コーディング（宣言）します（ブロックは省略）。

JavaScript

function blinkLED () {
    if (0 == blinkNext) {
        blinkNext = 1
        led.setBrightness(100)
    } else {
        blinkNext = 0
        led.setBrightness(255)
    }
}
mstate.defineStateName("Off", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        basic.clearScreen()
    })
    mstate.declareTransition(STATE, "On", "A")
})
mstate.defineStateName("On", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        blinkNext = 0
        basic.showIcon(IconNames.Heart)
    })
    mstate.declareTransition(STATE, "Slow", "A")
})
mstate.defineStateName("Slow", function (STATE) {
    mstate.declareDo(STATE, 500, function () {
        blinkLED()
    })
    mstate.declareTransition(STATE, "Fast", "A")
})
mstate.defineStateName("Fast", function (STATE) {
    mstate.declareDo(STATE, 200, function () {
        blinkLED()
    })
    mstate.declareExit(STATE, function (next) {
        led.setBrightness(255)
    })
    mstate.declareTransition(STATE, "On", "A")
})
input.onButtonPressed(Button.A, function () {
    mstate.fire("A")
})
let blinkNext = 0
mstate.start("Off")

トリガーBを追加する

次にトリガーBによる状態遷移を追加して考えます。
状態On、または、状態Slow、または、状態Fastから状態Offへと状態遷移するようにします。

状態遷移図

状態遷移表

状態	アクション	(電源オン)	A	B
●		Offへ	-	-
Off	entry/ - LED消灯	-	Onへ	-
On	entry/ - 点滅状態初期化 - LED点灯	-	Slowへ	Offへ
Slow	do/ - LED点滅（500ms）	-	Fastへ	Offへ
Fast	do/ - LED点滅（200ms） exit/ - 明るさ最大化	-	Onへ	Offへ

JavaScript

function blinkLED () {
    if (0 == blinkNext) {
        blinkNext = 1
        led.setBrightness(100)
    } else {
        blinkNext = 0
        led.setBrightness(255)
    }
}
mstate.defineStateName("Off", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        basic.clearScreen()
    })
    mstate.declareTransition(STATE, "On", "A")
})
mstate.defineStateName("On", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        blinkNext = 0
        basic.showIcon(IconNames.Heart)
    })
    mstate.declareTransition(STATE, "Slow", "A")
    mstate.declareTransition(STATE, "Off", "B")
})
mstate.defineStateName("Slow", function (STATE) {
    mstate.declareDo(STATE, 500, function () {
        blinkLED()
    })
    mstate.declareTransition(STATE, "Fast", "A")
    mstate.declareTransition(STATE, "Off", "B")
})
mstate.defineStateName("Fast", function (STATE) {
    mstate.declareDo(STATE, 200, function () {
        blinkLED()
    })
    mstate.declareExit(STATE, function (next) {
        led.setBrightness(255)
    })
    mstate.declareTransition(STATE, "On", "A")
    mstate.declareTransition(STATE, "Off", "B")
})
input.onButtonPressed(Button.A, function () {
    mstate.fire("A")
})
input.onButtonPressed(Button.B, function () {
    mstate.fire("B")
})
let blinkNext = 0
mstate.start("Off")

【不具合】LED点灯が暗くなることがある

トリガーBを追加したことにより、「LED点灯が暗くなることがある」という不具合が発生します。
状態Slowでは、LEDの明るさが暗い場合があります。もし暗いままで、状態Offへ状態遷移し、その後、状態Onに状態遷移しても、LEDの明るさは暗いままです。
状態Fastの場合は、Exitアクションで明るさを最大化していますので、この不具合の原因にはなりません。

したがって、「明るさ最大化」を状態OnのEntryアクションへ移動することにしました。

状態遷移図

状態遷移表

状態	アクション	(電源オン)	A	B
●		Offへ	-	-
Off	entry/ - LED消灯	-	Onへ	-
On	entry/ - 点滅状態初期化 - 明るさ最大化 - LED点灯	-	Slowへ	Offへ
Slow	do/ - LED点滅（500ms）	-	Fastへ	Offへ
Fast	do/ - LED点滅（200ms）	-	Onへ	Offへ

JavaScript

function blinkLED () {
    if (0 == blinkNext) {
        blinkNext = 1
        led.setBrightness(100)
    } else {
        blinkNext = 0
        led.setBrightness(255)
    }
}
mstate.defineStateName("Off", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        basic.clearScreen()
    })
    mstate.declareTransition(STATE, "On", "A")
})
mstate.defineStateName("On", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        led.setBrightness(255)
        blinkNext = 0
        basic.showIcon(IconNames.Heart)
    })
    mstate.declareTransition(STATE, "Slow", "A")
    mstate.declareTransition(STATE, "Off", "B")
})
mstate.defineStateName("Slow", function (STATE) {
    mstate.declareDo(STATE, 500, function () {
        blinkLED()
    })
    mstate.declareTransition(STATE, "Fast", "A")
    mstate.declareTransition(STATE, "Off", "B")
})
mstate.defineStateName("Fast", function (STATE) {
    mstate.declareDo(STATE, 200, function () {
        blinkLED()
    })
    mstate.declareTransition(STATE, "On", "A")
    mstate.declareTransition(STATE, "Off", "B")
})
input.onButtonPressed(Button.A, function () {
    mstate.fire("A")
})
input.onButtonPressed(Button.B, function () {
    mstate.fire("B")
})
let blinkNext = 0
mstate.start("Off")

自動モードへの対応

最後に、自動モードへの対応を行います。ただし、現状のMstate拡張機能では、ステートマシンを１つしか宣言できない為、通常モード・自動モードのステートマシンを追加できません。

Mstate拡張機能のM
micro:bitのMのようにも思えますが、"MODOKI"のMです。Mstate拡張機能では、完全なステートマシンが実装されているわけではありません。

そこで、mode変数で状態を管理し、自動モードの機能を実現しました。

JavaScriptのソースコードだけを示しておきます。

JavaScript

mstate.defineStateName("On", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        led.setBrightness(255)
        blinkNext = 0
        basic.showIcon(IconNames.Heart)
    })
    mstate.declareTransition(STATE, "Slow", "A")
    mstate.declareTransition(STATE, "Slow", "A+B")
    mstate.declareTransition(STATE, "Off", "B")
})
function blinkLED () {
    if (0 == blinkNext) {
        blinkNext = 1
        led.setBrightness(100)
    } else {
        blinkNext = 0
        led.setBrightness(255)
    }
}
input.onButtonPressed(Button.A, function () {
    mstate.fire("A")
})
input.onButtonPressed(Button.AB, function () {
    mode = 1
})
input.onButtonPressed(Button.B, function () {
    mstate.fire("B")
})
mstate.defineStateName("Slow", function (STATE) {
    mstate.declareDo(STATE, 500, function () {
        blinkLED()
    })
    mstate.declareTransition(STATE, "Fast", "A")
    mstate.declareTransition(STATE, "Fast", "A+B")
    mstate.declareTransition(STATE, "Off", "B")
})
mstate.defineStateName("Fast", function (STATE) {
    mstate.declareDo(STATE, 200, function () {
        blinkLED()
    })
    mstate.declareTransition(STATE, "On", "A")
    mstate.declareTransition(STATE, "On", "A+B")
    mstate.declareTransition(STATE, "Off", "B")
})
mstate.defineStateName("Off", function (STATE) {
    mstate.declareEntry(STATE, function (prev) {
        basic.clearScreen()
    })
    mstate.declareExit(STATE, function (next) {
        mode = 0
    })
    mstate.declareTransition(STATE, "On", "A")
})
let mode = 0
let blinkNext = 0
mstate.start("Off")
loops.everyInterval(3000, function () {
    if (1 == mode) {
        mstate.fire("A+B")
    }
})

おわりに

Lチカを題材にMstate拡張機能を使いました
状態遷移図や状態遷移表が設計できれば、Mstate拡張機能で宣言するだけでコーディングできます
ステートマシン（という考え方）を使ってmicro:bitのLチカを機能改善しました
機能改善の中で、新たな不具合が発生することがありますが、簡単に解決できました

最終成果物（Lチカ-ステートマシン）