Q&A
なぜNode.jsで行いたいのでしょうか？
node.jsで雀魂（Webサービス）の画面キャプチャ（または全画面キャプチャ）を保存する方法を探しています。
検索すると、ヘッドレスブラウザ等を利用したライブラリは色々と出てくるのですが、
やりたいこととしては、
今自分が操作している手元のWebページ（または全画面）の画面キャプチャを行う方法なので、
特定のURL（HTML）のキャプチャではありません。
なので、Puppeteer, webshot, Nightmare, html2canvas, grabzit, Gyazo等のライブラリでは対処できないかと思います。
良い方法をお持ちの方、ご教授願えればと思います。
最終的に抜き出した情報をHTMLで使いたいというのが一つ、使い慣れているというのが一つ、麻雀解析系のプログラムを以前Node.jsで組んでいて、将来的にはそれと組み合わせたいというのが一つです。
ただ難しければ他の言語も検討します。
回答1件
0
ベストアンサー
その要望だとNode.jsは的外れなので
今操作しているブラウザ(Chrome等)を自動化するソフト(RPA)を利用しましょう。
WindowsならPower Automate Desktopを使いましょう。
昔は有償のソフトでしたが無償になりました。
MS社の公式ソフトなのでウィルス的な心配もなく使えるかと思います。
参考記事: WindowsのRPAツール「Power Automate Desktop」でデスクトップ上での単純なタスクや業務を自動化しよう - CodeZin
macOSにも標準でAutomatorというRPAソフトが存在します
参考記事: Mac標準のAutomatorでRPAに入門してみる - Qiita
解説
今自分が操作している手元のWebページ（または全画面）の画面キャプチャを行う方法なので、
特定のURL（HTML）のキャプチャではありません。
Node.jsはブラウザとは全く別の存在です
全く別の存在のGoogle社がオープンソースとして提供しているV8というJavaScriptエンジンがありますが
それを自分のパソコン上にダウンロードして持ってきて、
それを強引に稼働させてJavaScriptファイルを読み込ませ、RubyやPythonのように読み込ませてしまおうといったアプローチのプログラミング言語及び実行環境です。
なのでNode.jsはブラウザとは全く違うんですよね。
Node.jsから今稼働しているChrome等を操るみたいな事は出来ません。
今動かしているのがWindowsだとしたら、
OSに問い合わせるAPIを使ってChromeプロセスを探したり操作権限をもらって
それに対してスクショを取るみたいな事になります。
そんな事ができるのかはぶっちゃけわからん……
だからNode.jsはNightmareのような不可視のブラウザを起動させ、
そのブラウザを操りながら必要な場所まで移動して、クリックしたり、スクショを取るようなアプローチを取る事になります。
まぁスクショするだけならこの辺から探してくればよくね？
無料画面キャプチャーソフト一覧 - フリーソフト100
もしくはChrome上に仕込む拡張機能使うとか
ウェブページ全体をスクリーンショット - FireShot
コメント部分への追加
最終目的はBOTのような雀魂の自動操作ではなく、
画面から麻雀情報を色々抜き出して、待ちや有効牌、上がったときの点数などの補助情報を表示するHTMLを作成することです。
なので、node.jsを裏で動かして、スクショの取得→情報抜き出し→整理をして、それをHTMLに注入して表示させる、みたいな流れを考えていました。
一撃で全部を一気通貫してやるのはハイパー凄腕ハッカーでなきゃ無理です。
そしてテストの観点から1つのコードで多くの事をやる事は避けましょう。
そのため、一度フェイズをわける必要があります。
- 画面をスクリーンショットとして画像ファイル化して保存
- 画像ファイルから情報を抜き出し、JSONやYAMLファイルとして保存する
- JSONやYAMLファイルをHTMLに変換する
まず、3の工程はNode.jsの得意分野であり実質雑魚でしょう。
HTMLやCSSを生のままガリガリ書くのは時間がかかってだるいので、
PugやSassにしておき、そこからトランスパイルで生成するとなお良いかもしれません。
1の工程は前述の通り、Node.jsでなくても可能。
Node.jsのfsモジュールにはwatchという機能が存在します。
これでディレクトリを見張っておきファイルが追加されたら、ファイル名が関数の引数に入った状態で関数実行できます。
これならばNode.js以外の手段でスクショを撮っても問題ありませんね。
残るは難関の2の工程
これには2つの技術がどうしても必要となります。
まず、平均和了率、振込率等の数値データを吸収する前に、
それがどこにあるのかを検知する必要があります。
なので画像から「平均和了率」みたいな文字列が記述してある座標を突き止め、その下や右辺りの座標を切り取って別の画像データを作る事になります。
この為に「テンプレートマッチング」を使います。
もし使っているChrome等のブラウザが常に同じ画面サイズであり、ずれる心配がなければ決め打ちで画像を切り取ってしまえば問題ないかと思います。
なのでテンプレートマッチングに関しては最悪逃げる事が可能です。
テンプレートマッチングでメジャーなのはOpenCVでしょうね。
これはC++のライブラリですが、インストールに成功さえすればopencv等のライブラリで操れるようになります。
速度は落ちますが、C++のソースコードをWASMの技術で無理やりJavaScriptに加工したOpenCV.jsなるものも存在します。
参考記事: OpenCV.jsをJavaScript/Node.jsで使ってみた
実は私もadbというAndroidを自動操縦できるデバッグツールで
OpenCV.jsを扱うライブラリを開発しています。
OpenCV.jsのコンパイルで死んだり、扱い方が分からなくて死ぬようなら、この辺見ながら依存元のopencv.jsファイルをローカルに落として使えば良いでしょう。
https://github.com/miyabisun/auto-play-opencv-node/blob/main/src/classes/Result.js#L13-L23
続く絶対に避けられない難関はOCRです。
これは探せば色々とありますが、思うようなものは私はまだ見つけられていません。
例えばTesseract.jsとか？でも精度がこれじゃあなぁ……
参考記事: Tesseract.jsを使ってみる - Qiita
実は先程紹介したWindows用の「Power Automate Desktop」は、
プロセスを乗っ取って操作する関係上、自動操縦をする必要があるので性能の良いテンプレートマッチングやOCR機能を搭載しているんですよね。
なのでそこを基点にテキストファイルを吐き出して、Node.jsのfs.watchで回収していくという連携作業は可能かもしれません。
ウマ娘アプリの自動操縦チート作ってる業者とか、
規約違反ではあるんですが、なんで簡単にやってのけるんだろう、すごいなぁ……
というわけでなんか思いついて良い感じに形になったら教えてください。
投稿2022/06/22 08:46
編集2022/06/22 11:56
総合スコア21158
ご回答ありがとうございます。
質問の時点で目的が不明瞭でした、申し訳ありません。
最終目的はBOTのような雀魂の自動操作ではなく、
画面から麻雀情報を色々抜き出して、待ちや有効牌、上がったときの点数などの補助情報を表示するHTMLを作成することです。
なので、node.jsを裏で動かして、スクショの取得→情報抜き出し→整理をして、それをHTMLに注入して表示させる、みたいな流れを考えていました。
> 今動かしているのがWindowsだとしたら、
> OSに問い合わせるAPIを使ってChromeプロセスを探したり操作権限をもらって
> それに対してスクショを取るみたいな事になります。
> そんな事ができるのかはぶっちゃけわからん……
やりたかったことは結構これに近いです。
Chromeのプロセスのアクセスまで出来なくても、
Printscreenを押してクリップボードの情報を持ってくる、
とかができればいいのですが、その辺の情報にたどり着けませんでした...
なるほど、それはめちゃくちゃ面白いですね。
この要件引き出して言語化に成功した時点で回答した甲斐がありました。
これはこれで長くなりそうなので追記していきますね
追記ありがとうございます！
> 1の工程は前述の通り、Node.jsでなくても可能。
> Node.jsのfsモジュールにはwatchという機能が存在します。
> これでディレクトリを見張っておきファイルが追加されたら、ファイル名が関数の引数に入った状態で関数実
> 行できます。
なるほど、たしかにこれならnode.js以外でスクショを撮って保存さえできれば、それをnode側から拾えますね。
> 続く絶対に避けられない難関はOCRです。
> これは探せば色々とありますが、思うようなものは私はまだ見つけられていません。
OCRも絶対に必要ですね。
持ってくる文字は数字がメインになると思うので、まだ精度的な制約はゆるいかなと思います。
もし牌の画像をOCRで読めたら画期的なんですけどね笑
> 実は先程紹介したWindows用の「Power Automate Desktop」は、
> プロセスを乗っ取って操作する関係上、自動操縦をする必要があるので性能の良いテンプレートマッチングや
> OCR機能を搭載しているんですよね。
> なのでそこを基点にテキストファイルを吐き出して、Node.jsのfs.watchで回収していくという連携作業は可能
> かもしれません。
Power Automate Desktopは初めて聞いたので、ちょっと調べてみます！
進捗に関しては
https://qiita.com/xenepic_takku/items/f25a97735a90546d1451
にまとめていこうと思いますので、もし成果物ができればまたこちらのコメントに追記させて頂きますね！
ご丁寧にありがとうございました！！
あなたの回答
tips
プレビュー
