WIZ-CODE.blogMENUWIZ-CODE.blogについてWIZ-CODE.blogJavaScriptやAjaxをテーマとしたブログです。2017/08/30ステートマシンについて詳しく知りたい方はステートマシンの仕組みのおさらいも参考にしてください。Async-FSMのソースコードをGitHubで公開しました。Library前回の記事JavaScriptでステートマシンを実装する(その1)にてFSM.jsというスクリプトを公開していましたが、その後コンポジット状態などのUMLの機能を盛り込もうと四苦八苦し、結局スクリプトの仕様を大きく変更することになりました。現バージョンは0.2ですが、前のバージョン(0.1)とほとんど別物になっています。0.6でそのまま動きます。0.6はUnderscore.jsに依存するようになりました。ダウンロード:FSM-0.6.1.js(その1)の記事を出してから月日がたってしまい、すみませんが(その2)で本来やる予定だったデモページの実装の解説はなかったことにさせてもらいます。JavaScriptでステートマシン的な機能を実装する試みは放棄していません。新たなバージョンを使用したデモを作成しており、こちらを紹介する予定です。0.2)では、コンポジット状態と直交状態、浅い履歴といった機能を追加しました。APIなどの詳細は後述するとして、ひとまず上記のデモページのスクリプトをざっと載せてみます。Error('このブラウザは音楽再生に対応していません。これらをon状態(の最初の領域)に登録。*/region.playmodeRegion.addTransition(transition.playmodeFirstTransition);region.playmodeRegion.addTransition(transition.repeatToNoRepeat);region.playmodeRegion.addTransition(transition.noRepeatToRepeat);player.start();}());おそらくステートマシン図を使わずにプレイヤーを作成するならば、こんなに長いコードは不要かと思われます。ここでFSM.jsを使う理由は、ステートマシン図という設計図を忠実にコードに落とし込む手段として使えるからです。FSM.jsは設計図からコードへの橋渡しとなるはずで、それによって設計図ベースのきっかりしたWebアプリケーションなりプラグインなりを作成できるようになります。現段階で足りないと思われるところは、ジャンクションや選択擬似状態などの一般的な機能が未実装な点です。現状ではステートマシンの状態や遷移を動的に変更、削除できません。後者について言えば、コードを書く段階で設計図となるステートマシン図は完成しているはずなので、後々から状態を変更したり削除したりするケースを想定する必要はないと考えています。それではFSM.jsバージョン0.2にて仕様がどう変更したかを見ていきたいと思います。FSM.jsにこれまであったクラスは、FSM、State、Transitionでしたが、これに加えてRegionクラスが追加されました。これはステートマシンのコンポジット状態と直交状態を実装するのにどうしても必要なクラスです。ステートマシン図を単純状態のみか、コンポジット状態に限る構成とするならば、領域という概念を意識せずに済むようにしています。直交状態を実装するときに限ってRegionクラスを明示的に記述します。FSM.jsには状態遷移を実行するために、trigger()メソッドがありました。バージョン0.2にも同メソッドがあり、使い方もほとんど同じです。FSMクラスのメソッドではなく、Transitionクラスのメソッドに変更しました。そのため引数が不要になっています。{transition.stopToPlay.trigger();}});前のバージョンでは開始擬似状態から最初に遷移する状態をsetInitialStateName()で指定していましたが、0.2から他の遷移と同様にTransitionクラスを作成、登録するようにしました。面倒になりますが、遷移前が開始擬似状態のときは状態名を指定する必要はなくnullを渡せばよいようにしました。'init');同様に終了状態へ遷移する前の状態をsetPreFinalStateName()で指定していましたが、0.2から他の遷移と同様にTransitionクラスを作成、登録するようにしました。こちらは遷移後の状態名を指定する必要はなくnullを渡せばよいようにしました。null);作成したTransitionインスタンスはその遷移前状態が含まれる上位状態または領域のaddTransition()メソッドで登録します。マシンの最上位の階層にあるTransitionはFSMのaddTransition()メソッドで、コンポジット状態内のサブ状態同士をつなぐTransitionはその親状態のaddTransition()メソッドを使います。直交状態の領域内のTransitionに関しては、そのRegionクラスのaddTransition()メソッドで登録します。player.addTransition(transition.firstTransition);......state.on.addTransition(transition.onFirstTransition);......region.playmodeRegion.addTransition(transition.playmodeFirstTransition);このようにStateとTransitionを登録するとき、前バージョンと異なり親の状態またはコンテナのメソッドで登録する必要があり、相対的な構成を意識する必要があるのが、やや面倒になった点です。その他、状態または領域の登録に順序が決まっていて、必ず上位から順に登録していかなくてはなりません。あるRegionを作成して、そこにサブ状態をいくつか登録してからそのRegionを上位の状態に登録するということはできません。{this.completion();}}});ひとまず今回はここまででひと区切りしたいと思います。次回以降もFSM.jsメインのエントリを書いていく予定です。FSM.jsはまだ動作確認しきれてないところがあるので、バグ修正や追加機能の報告も逐一していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。...Ajaxでウェブページにいたずら書き!ウェブ上に落書きができるページを作りました。APIの制限Amazonの商品検索機能の実装を考えていたところですが、大きな障害に直面。前回紹介した宇宙フライトシミュレーションに、いくつかの機能を追加しました。音楽プレイヤーカテゴリーJavaScript/AjaxPHPTipsゲームブラウザアーカイブ2018年7月2017年7月2016年12月2016年11月2016年10月2016年3月2016年1月2015年12月2015年11月2015年10月2015年9月2015年8月2014年7月2014年6月2014年4月2014年2月2014年1月2013年12月2013年10月2013年8月2013年6月2013年4月2013年3月2013年1月2012年11月2012年8月2012年6月2012年5月2012年4月2012年3月2011年12月2011年10月2011年9月2011年8月2011年7月2011年6月2011年5月2011年4月2011年3月2011年2月2011年1月2010年12月2010年11月2010年10月2010年9月2010年6月2010年5月2010年4月2010年2月2010年1月2009年12月2009年11月2009年10月JavaScriptでステートマシンを実装する(その2)JavaScriptやAjaxをテーマとしたブログです。