プログラミング
カシオ F-91W をステートチャートで実装
Casio F-91W using Statecharts (github.com)
要約
この記事では、象徴的なカシオ F-91W デジタルウォッチのインタラクティブなモデルをステートチャートを用いて作成したプロジェクトを紹介しています。オリジナルのデジタルウォッチの例は希少であるため、広く普及している F-91W を採用し、XState ライブラリを使用してロジックを実装しています。このデモは、ステートチャートの動作を視覚的に理解するための教育的ツールとして機能します。
全文翻訳
カシオ F-91W をステートチャートで実装
オンラインデモはこちら: casio-f91w.pages.dev
ステートチャートを使用したカシオ F-91W ウォッチのインタラクティブなモデル。
はじめに
ステートチャートは、1987年にデイビッド・ハレルによって導入されたステートマシンの拡張機能です。論文の中で、ハレルはデジタル腕時計を例として使用しました。ステートチャートを実際に動作させることができるインタラクティブなデモがあれば素晴らしいと思っていました。残念ながら、その特定の腕時計(シチズン クオーツ マルチアラーム III)は現在では希少品です。しかし、象徴的なカシオ F-91W があります。この時計は、論文発表のわずか2年後に登場したにもかかわらず、広く人気があり、現在も製造・販売されています。Alexis Philip は、グラフィカル要素をデジタル化したオンラインバージョンを作成しました。このデモは Alexis の作業に基づいており、XState ライブラリを使用してロジックを置き換えることでステートチャートの使用を実証し、Stately ビジュアライザーを使用して教育目的でステートと遷移を並べて表示します。時計の公式マニュアルも確認できます。
違いと制限事項
日付と時刻の設定は、JavaScript の組み込み Date オブジェクトで表現されているため、若干異なります。したがって、曜日設定はデモでは使用されていません。アラームまたは日時設定で A ボタンを押し続けることで時間をインクリメントする機能は実装されていません。毎日のアラーム時刻は設定できますが、実際のアラームのトリガーは実装されていません。
リソース
シチズンウォッチのステートチャート - 元のシチズンウォッチの類似ステートチャート実装
ステートチャート論文 - デイビッド・ハレルの1987年のオリジナル論文
カシオ F-91W マニュアル - 時計の公式マニュアル
実装
ファイル構造:
demo/script - 元の実装、レンダリング用のコードのみを使用
src/casio - ステートチャートベースの実装が含まれています
machine.js - XState マシンの定義
machine.cljs - マシンアクションの実装
xstate_service.cljs - ClojureScript で XState を使用するためのヘルパー
statecharts_service.cljs - clj-statecharts を使用した XState マシン定義のラッパー
app.cljs - マシンを実行するメインアプリ
開発
開発プロセスを開始するには bb dev を実行します(Babashka が必要です)。
アプリを開く: http://localhost:8888/
ブラウザでテストを実行する: http://localhost:8888/test