詰将棋をAIで解析！YOLOと将棋エンジンで挑戦したアプリ開発の裏側

# 概要

以前、YOLOと将棋エンジンを用いて詰み筋を探索するアプリケーション「[詰将棋敗北者Web](https://tsumeshogi-loser.web.app/)」を開発しました。

この記事では、その開発秘話として、取り組みを通じて得た知見や気づきを共有します。アプリ自体の詳細な解説は以下の記事にまとめているので、よろしければご覧ください。

https://qiita.com/tobita_yoshiki/items/fc26f3655adc3d501d66

# 詰将棋敗北者Webとは？

スマホアプリで詰将棋を解いていると、どうしても解けない局面に出くわすことがあります。特に解答がアプリに付いていないと、「なんで解けないんだ…」と、まるで敗北者になったような気持ちになることもあります😇

そんな悔しさを解消するために作ったのが「詰将棋敗北者Web」です。将棋アプリの画面をスクショしてアップロードするだけで、詰将棋の解答が確認できます。

![スクリーンショット 2024-12-11 1.44.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/fd257b65-6c44-dd97-9ef1-536bf015a6f5.png)

技術的には、YOLOという深層学習モデルを使って将棋のコマを検出し、その局面をやねうら王詰将棋エンジンに入力して詰み筋を探索しています。

![名称未設定ファイル.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/69604d88-d8ed-41e6-6c75-262b83f8845c.png)

# 得られた知見・気づき

## 機械学習のプロじゃなくても、動くものが作れた！

私は、業務で機械学習を触ったことがありませんが、
クラウド機械学習サービス[Ultralytics HUB](https://hub.ultralytics.com/)で画面をポチポチすることによって、(精度は一旦置いておいて)将棋のコマを検出する機械学習モデルを作成することに成功しました。

数年前に比べると、
このようなノーコードで機械学習ツールが増えてきている印象がありまして、
機械学習の素人でもモデルが作れてしまうという所感です。

### プロトタイプ制作

当アプリの制作過程では、まず、YOLOで自分が思うような物体検出が可能かどうかを調べるために[Roboflow](https://roboflow.com/)というクラウドサービスで学習モデルのプロトタイプを制作してみました。[^1]
[^1]: 料金の関係で、Roboflowで最後まで学習モデルを作成せずに、途中でUltralytics HUBに切り替えました。

このサービスのUI/UXがかなり良くて、なんと、データのラベリングやデータの前処理も含めて、ノーコードで学習モデルを開発することができます！

以下の画像のように、Web上で画像にラベルを貼って学習データを作ることもできますし、
前処理やデータ拡張(Data Augmentation)が可能です。

ラベルの付与:
![スクリーンショット 2024-12-14 19.20.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/46f09593-e97c-1412-4e41-5939ac5c89ff.png)

前処理(リサイズとグレースケールを指定):

![前処理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/f7935ebd-552c-9107-2239-f906d3d15ba7.png)

データ拡張(90度横に倒した画像とノイズの入った画像を生成):

![data_augmentation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422592/2b68b4e2-339c-b5b5-ca55-ebf503e0d2d3.png)

## 理解に時間がかかる

### 理解を重視するマインドセット

新しい技術や仕組みを触る際には、理解に時間がかかることを前提にしたマインドセットが重要だと強く感じました。特に、深層学習モデルの利用やクラウドサービスの組み合わせなど、自分にとって新しい分野に取り組むときには、最初に必要な学習コストを無視しないことが成功への鍵だと考えています。

たとえば、YOLOや将棋エンジンを実際に組み込む際、最初に公式ドキュメントやREADMEを読んだときは全体像を理解するのにやや苦戦しました。特にAPIの仕様やデータフォーマットの詳細について、以下のようなことに時間を費やしました:

* 【公式ドキュメントの理解と実装への適用】
公式ドキュメントは網羅的ですが、全体を読むだけでは実際に動くものを作るための具体的な道筋が見えないことがありました。そのため、まず小さな実験を繰り返しながら「動かして理解する」というアプローチを採用しました。

* 【関連技術の学び直し】
YOLOの基本的な物体検出の仕組みや、将棋の局面データの表現形式を理解するのに、時間をかけて基礎的なリソースを調べ直しました。具体的には、各種公式ドキュメントやブログ記事、Githubのサンプルコードを参考にして概念を分解して整理しました。

* 【予測不能なエラー対応】
特に新しい技術を使うときには、ドキュメントに書かれていないエラーや設定の問題に直面することがあります。
私の場合、YOLOの学習データをクラウドにアップロードする際にデータフォーマットの不一致で詰まることがありました。

### 理解を軽視すると「時間を溶かす」原因に

新しい技術に取り組む際、理解を軽視したアプローチが結果として時間を無駄にする原因になることがあります。その典型的な例が、問題が発生した際に原因を深く探らずに、片っ端から解決策を試す方法です。

これは私自身が、納期が迫っているときなどに、ついついやってしまうのですが、
当てずっぽうなアプローチなので時間を溶かすことが多いです。

当アプリの製作過程では、フロントエンド実装でこれを痛感しました。
今回初めてReactを触りましたが、[ref](https://ja.react.dev/learn/referencing-values-with-refs)について誤解をしており時間を溶かしたことがありました。

業務で新しいフレームワークを触る時は、本を1冊買ってまる読みしておくようにしていますが、
個人開発だと責任感がないので、Reactの公式ドキュメントに雑に目を通して、終わりにしてしまっていました。。
後学のためにも時間をかけてReactについて調べておくべきでした。

### 参考: マイクロソフト流「生産性爆上げ、6つの鉄則」

動画内では、マイクロソフトのエンジニアが理解にどのように時間を掛けているか解説されています。　特に、マイクロソフトのエンジニアであっても理解には時間がかかるという話が非常に参考になりました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/vNj6wgUjOLA?si=DLd1po9pp5TkFcMw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## 個人開発のモチベ

当アプリの開発では、「自分が使いたいサービスを作る」という動機が、開発を続ける上での大きな支えになりました。
「詰将棋敗北者Web」も、自分にとって便利なツールを作りたいという思いがあったため、途中で技術的に詰まる場面があっても手を止めずに進めることができました。

### 反省点: コードの保守性

フロントエンドでは、JavaScriptで一部の将棋のロジックを実装しました。

アドベントカレンダーの公開日に合わせるために、JavaScriptを書き殴ることによって、完成させましたが、結果として、デバッグやメンテナンスが大変になり、「汚いコードはモチベを下げる」 ことを痛感しました。

将棋ぐらいの複雑さがある場合は、保守性は必要でしたね。。

# おわりに

「詰将棋敗北者Web」の開発を通じて、技術的な課題に向き合いながらも、自分が使いたいと思えるサービスを形にする楽しさを感じました。また、未知の技術やエラーに直面した際に理解を深めて乗り越える経験は、エンジニアとして再認識しました。

最後までお読みいただき、ありがとうございました。