回答編集履歴
1
コメントに対応する回答を追記
test
CHANGED
|
@@ -40,3 +40,64 @@
|
|
|
40
40
|
|
|
41
41
|
もしくはChrome上に仕込む拡張機能使うとか
|
|
42
42
|
[ウェブページ全体をスクリーンショット - FireShot](https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja)
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
コメント部分への追加
|
|
47
|
+
|
|
48
|
+
> 最終目的はBOTのような雀魂の自動操作ではなく、
|
|
49
|
+
> 画面から麻雀情報を色々抜き出して、待ちや有効牌、上がったときの点数などの補助情報を表示するHTMLを作成することです。
|
|
50
|
+
> なので、node.jsを裏で動かして、スクショの取得→情報抜き出し→整理をして、それをHTMLに注入して表示させる、みたいな流れを考えていました。
|
|
51
|
+
|
|
52
|
+
一撃で全部を一気通貫してやるのはハイパー凄腕ハッカーでなきゃ無理です。
|
|
53
|
+
そしてテストの観点から1つのコードで多くの事をやる事は避けましょう。
|
|
54
|
+
そのため、一度フェイズをわける必要があります。
|
|
55
|
+
|
|
56
|
+
1. 画面をスクリーンショットとして画像ファイル化して保存
|
|
57
|
+
2. 画像ファイルから情報を抜き出し、JSONやYAMLファイルとして保存する
|
|
58
|
+
3. JSONやYAMLファイルをHTMLに変換する
|
|
59
|
+
|
|
60
|
+
まず、3の工程はNode.jsの得意分野であり実質雑魚でしょう。
|
|
61
|
+
HTMLやCSSを生のままガリガリ書くのは時間がかかってだるいので、
|
|
62
|
+
[Pug](https://pugjs.org/api/getting-started.html)や[Sass](https://sass-lang.com/)にしておき、そこからトランスパイルで生成するとなお良いかもしれません。
|
|
63
|
+
|
|
64
|
+
1の工程は前述の通り、Node.jsでなくても可能。
|
|
65
|
+
Node.jsのfsモジュールには[watch](https://nodejs.org/api/fs.html#fswatchfilename-options-listener)という機能が存在します。
|
|
66
|
+
これでディレクトリを見張っておきファイルが追加されたら、ファイル名が関数の引数に入った状態で関数実行できます。
|
|
67
|
+
これならばNode.js以外の手段でスクショを撮っても問題ありませんね。
|
|
68
|
+
|
|
69
|
+
残るは難関の2の工程
|
|
70
|
+
これには2つの技術がどうしても必要となります。
|
|
71
|
+
|
|
72
|
+
- [テンプレートマッチング](https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%81%E3%83%B3%E3%82%B0)
|
|
73
|
+
- [高額文字認識(OCR)](https://ja.wikipedia.org/wiki/%E5%85%89%E5%AD%A6%E6%96%87%E5%AD%97%E8%AA%8D%E8%AD%98)
|
|
74
|
+
|
|
75
|
+
まず、平均和了率、振込率等の数値データを吸収する前に、
|
|
76
|
+
それがどこにあるのかを検知する必要があります。
|
|
77
|
+
なので画像から「平均和了率」みたいな文字列が記述してある座標を突き止め、その下や右辺りの座標を切り取って別の画像データを作る事になります。
|
|
78
|
+
この為に「テンプレートマッチング」を使います。
|
|
79
|
+
もし使っているChrome等のブラウザが常に同じ画面サイズであり、ずれる心配がなければ決め打ちで画像を切り取ってしまえば問題ないかと思います。
|
|
80
|
+
なのでテンプレートマッチングに関しては最悪逃げる事が可能です。
|
|
81
|
+
|
|
82
|
+
テンプレートマッチングでメジャーなのは[OpenCV](http://opencv.jp/opencv-2svn/cpp/imgproc_object_detection.html)でしょうね。
|
|
83
|
+
これはC++のライブラリですが、インストールに成功さえすれば[opencv](https://www.npmjs.com/package/opencv)等のライブラリで操れるようになります。
|
|
84
|
+
速度は落ちますが、C++のソースコードをWASMの技術で無理やりJavaScriptに加工したOpenCV.jsなるものも存在します。
|
|
85
|
+
参考記事: [OpenCV.jsをJavaScript/Node.jsで使ってみた](https://dev.classmethod.jp/articles/using-opencvjs-with-javascript-and-nodejs/)
|
|
86
|
+
|
|
87
|
+
実は私も[adb](https://developer.android.com/studio/command-line/adb?hl=ja)というAndroidを自動操縦できるデバッグツールで
|
|
88
|
+
OpenCV.jsを扱うライブラリを開発しています。
|
|
89
|
+
OpenCV.jsのコンパイルで死んだり、扱い方が分からなくて死ぬようなら、この辺見ながら依存元のopencv.jsファイルをローカルに落として使えば良いでしょう。
|
|
90
|
+
[https://github.com/miyabisun/auto-play-opencv-node/blob/main/src/classes/Result.js#L13-L23](https://github.com/miyabisun/auto-play-opencv-node/blob/main/src/classes/Result.js#L13-L23)
|
|
91
|
+
|
|
92
|
+
続く絶対に避けられない難関はOCRです。
|
|
93
|
+
これは探せば色々とありますが、思うようなものは私はまだ見つけられていません。
|
|
94
|
+
例えばTesseract.jsとか？でも精度がこれじゃあなぁ……
|
|
95
|
+
参考記事: [Tesseract.jsを使ってみる - Qiita](https://qiita.com/yamayamasan/items/1dd911b817c8bb51fc43)
|
|
96
|
+
|
|
97
|
+
実は先程紹介したWindows用の「Power Automate Desktop」は、
|
|
98
|
+
プロセスを乗っ取って操作する関係上、自動操縦をする必要があるので性能の良いテンプレートマッチングやOCR機能を搭載しているんですよね。
|
|
99
|
+
なのでそこを基点にテキストファイルを吐き出して、Node.jsのfs.watchで回収していくという連携作業は可能かもしれません。
|
|
100
|
+
|
|
101
|
+
ウマ娘アプリの自動操縦チート作ってる業者とか、
|
|
102
|
+
規約違反ではあるんですが、なんで簡単にやってのけるんだろう、すごいなぁ……
|
|
103
|
+
というわけでなんか思いついて良い感じに形になったら教えてください。
|