この記事は
マイクロマウス(2) Advent Calendar 2024の1日目です。
1枚目が全枠埋まってしまった点と、書いてくれる人の層が変わらないな〜と思ってゆるく作ったものですが、全然枠が空いているので、今からでも是非登録の方、よろしくおねがいします。
いきなり脱線
「強くならないと、読んでもらえるような良い記事が書けない」と思っている方へ。
「自分の力で調べて成長できる強い人だけが良い記事を書ける」という考え方は、少し甘いかもしれません。実際には、良い記事を書くためには他者との関わりやフィードバックが欠かせません。この点で、順序や前後関係が逆になることもあります。
私の意見をお伝えします。
記事を書いて発信すると、コメントや感想をもらえる機会が増えます。そのやり取りの中で、「この人とは技術の話ができそうだ」と認識され、他の技術的な話題でも声をかけてもらえるようになることがあります。このようにして、自分があまり興味を持っていなかった分野についても知識を深めることができ、結果的に知識の幅が広がります。この幅広い知識は、予想外の場面で役に立つことがあります。
例えば、大学のレポートで間違いを指摘されてリテイクを求められる経験だけでは、この重要性にはなかなか気づけないでしょう。しかし、技術者にとって最も大切なのは、技術を吸収できる環境に身を置くことです。その環境を作るために、「発信力」を身につけることは非常に重要なスキルだと私は考えます。
書き散らしは以上、それでは本題。
大学時代の卒業制作のツールが使えなくなっていた
シーズン後半に入り、勝負パラメータを決めようと思い、トップ帯とのタイム差をシミュレーションするため、迷路情報を作ろうとしたところ、文字化けやら何やらぶっ壊れている。(現在は復旧してくれたようですが文字化けなどが直ってない)ツールのリンク
このツールは、2015年卒業時、Miceでは「卒論」というのがありまして、ブログ記事の投稿や卒業製作が総会か部会で可決されたため作りました。(確か部則だった気がするので、消されてない限り現在も有効だったりします)
迷路情報を公開し、迷路探索アルゴリズムの作成、研究に役立ててもらいたい、という思いから当時の拙いWeb技術で作ったものになっています。
なぜ使えなくなっていたのか
jQueryを取得する際セキュリティエラーが弾かれてたようです。 現在は管理者に対応してもらいましたが、流石に10年前の技術ですから、限界がありますね。
今回作ったもの
Visual Studio Codeの拡張機能で*.maze
というテキストデータ形式から、迷路画像を出力しその画像内でクリックをすると迷路情報のテキストデータを更新してくれる というものです。(ファイルの編集のみで保存までは行いませんので、自分で保存してください。)
利用例
1. 拡張機能でmm_maze_viewer
を検索し、インストール。
2.chubu2024.maze
というファイルを用意(32x32版で用意)
14,6,6,6,4,6,6,6,6,6,6,6,6,6,6,5,12,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5, 12,6,6,6,2,6,6,6,6,6,6,6,6,6,7,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,12,6,6,6,6,6,6,6,6,6,6,4,6,5,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,12,4,6,6,6,6,6,6,4,7,11,13,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,9,8,6,7,12,6,6,5,9,13,12,2,3,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,9,10,6,6,3,12,6,3,10,2,3,12,5,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,9,12,5,13,14,2,6,5,12,6,4,3,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,9,9,10,1,13,12,4,1,9,12,2,5,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,9,9,14,2,1,10,3,11,8,3,12,3,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,9,8,5,12,0,4,7,12,2,5,10,5,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,9,9,9,9,9,10,5,10,4,3,12,3,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,10,3,10,3,10,6,0,5,10,5,10,5,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,12,6,6,6,6,5,9,10,5,10,5,9,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,9,10,6,6,6,5,9,10,6,2,5,10,1,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 9,10,6,6,6,6,3,10,6,6,5,10,6,3,9,9,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 10,6,6,6,6,6,6,6,6,6,2,6,6,6,2,3,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 12,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, 10,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3
3.迷路ファイルを開いた状態で、ctrl+shift+p
でMaze Preview
を実行。
テキストファイルの右側に以下の画像のようなプレビュー画面が出ればOKです。 あとは、画面をクリックすることでテキストデータが修正されていきます。
迷路をゼロから作りたい人は、拡張機能の紹介ページにテンプレートを用意しているので、そちらをご利用ください。(16x16版のリンク)
どうやって作ったのか?
ほぼ全てchatgptです。
vscodeの拡張機能自体初めて作るし、公開も初めてだったのですが、意外とスムーズに済ませられました。
以下、コード作成時にChatgptに指示した内容の要約です。(この要約もchatgptに書かせた後、少し修正)
指示内容の概要
1. VSCode拡張機能の開発
そもそもやりたいことが実現できそうかを確認
- SVGを用いた迷路エディタの作成: 4x4ぐらいのサイズでコンセプトを確認
- クリックイベントを利用した迷路データの編集機能: クリックとテキストデータの編集の流れを確認。
.maze
ファイルの読み込み・書き出し機能。: txtファイルから.maze
に変更。
2. SVGの動的生成と編集
SVG上に迷路を描画し、クリックと迷路データの編集ロジックの構築
- SVGの描画形式をマイクロマウス形式に変更。: 壁がある座標に四角を設置。見えないときは透明とするように工夫
- クリック位置の取得と座標補正(縮尺対応)。: クリックした対象の座標情報は取得する際、画面をズームしていると縮尺がずれるため、相対位置を考慮した取得方法に変更し取得。
- クリックしたセルを対角線で4分割し、クリック位置を分類(north, east, south, west)。: 壁ではなく、セル内をクリックしたときにも編集が可能なようにUX上ケア
3. READMEの作成と多言語対応
ここで公開方法を別途調べ公開用のコマンドを実行したところ失敗。READMEが体裁に沿ってないとのことで、chatgptに作らせた。
- VSCode拡張機能のREADMEを作成。: ここまでのchatgptに指示した内容をベースにいい感じにしろと指示。
- 英語と日本語を併記したREADMEの作成。: 日本人ユーザが多いことを期待し併記するため指示。(公開後、Facebookのマイクロマウスコミュニティにも投下)
4. コードに関する処理やロジックの改善
自分でも使う以上、最低限の使いやすさ、見やすさなどUI/UXをこだわる
- テキストデータ処理における改行の挿入。: 1行にまとめると見にくい+編集された実感がないので工夫。
- VSCodeの拡張機能に設定画面を追加。: パラメータで壁の東西南北がそれぞれ何ビット目かなど対応できるように、パラメータだけ取れるように修正(反映側は未対応)
- 設定画面の表示順序を制御。: 設定順をコントールできると手順書が書きやすいため指示。(うまく行かなかった)
こんな感じです。
作業時間はおそらく4時間も必要なかったです。初めてのvscodeの拡張期の開発だったので、慣れればもっと早かったはず。
作ったコード
githubでも公開してます。
最後に
明日の当番は・・・(ないですね。) 学生大会後の感想、課題などなど待ってます。