Q&A
クレーンゲームとは、ゲームセンターにあるようなリアルのクレーンゲームのことなのでしょうか、それともScratch？などで作ったバーチャルなもののことなのでしょうか。
前提・実現したいこと
Webページからクレーンゲームを操作
発生している問題・エラーメッセージ
オンラインクレーンゲームを作っています。
オンラインでクレーンを操作をするゲームなのですが、重要な「遠隔操作」部分ができていません。
考えていること
Scratchでボタンのプログラムのみ作り、htmlにScratchを埋め込む方法
↑
Scratchで毎回クレーンと接続しなければならない。
補足情報（FW/ツールのバージョンなど）
locahost
追加情報
クレーンゲームは筐体です。
操作する環境は整っているか
一応
LEGO社の
Wedo 2.0とSPIKE PRIMEを買ってあります
ですがパソコンがwindows8なのでScratchとWedo2.0、SPIKE PRIMEを繋げる事ができません。
一応Scratchの技術は持っているのでパソコンがwindows10であれば作ることも可能です。
考えていることにも書いてあるように、Scratchをhtmlで埋め込めばいいと思っています。
ScratchとWedo2.0などを遠隔するためには、Scratch LINKを入れる必要があります。
ScratchLinkがwindows10限定なので、ScratchLinkがwindows8対応すれば作ることも可能かもしれません。
現在の遠隔ページ画像
最初はLAN内で遠隔をするつもりです。
ご回答よろしくお願いします
クレーンゲーム自体は家に筐体があります。
ではその筐体を、筐体に直接触れずに操作する環境は整っているのでしょうか？それがScratch？
一応
LEGO社の
Wedo 2.0とSPIKE PRIMEを買ってあります
ですがパソコンがwindows8なのでScratchとWedo2.0、SPIKE PRIMEを繋げる事ができません。
一応Scratchの技術は持っているのでパソコンがwindows10であれば作ることも可能です。
考えていることにも書いてあるように、Scratchをhtmlで埋め込めばいいと思っています。
ScratchとWedo2.0などを遠隔するためには、Scratch LINKを入れる必要があります。
ScratchLinkがwindows10限定なので、ScratchLinkがwindows8対応すれば作ることも可能かもしれません。
ではそうされたら良いのでは？
一般的に後から古いOSに対応するとは考えられないので、Windows10のPCを用意するのが近道だと思いますが。
タグがそれぞれ本件にどのように関係するのか記載いただけますか？
関係ないのであれば外してください
htmlはサイトに関係するため付けました
phpは操作に必要すると思い付けました
Webサイトは遠隔するページのため付けました
ゲーム開発はオンラインクレーンゲーム開発と関わるので付けました
Scratchは遠隔操作に使用つもりだったのですが、ScratchLinkが対応していないため、関連すると思い付けました。
html,phpは関係ないですね。
削除しました
Websocketとか使えば、できそうな気がしますけどね。
ただ、そうなるとJavaScriptとサーバーサイドは必要ですけど。
セキュリティ面は・・・、後々考えるんですよね？
セキュリティは後々考えます。
最初はLAN内でできるようにしたいですね
有益な回答を既にいくつもいただいていると思うのであまり意味の無いコメントですが、
> ScratchLinkがwindows10限定なので、ScratchLinkがwindows8対応すれば作ることも可能かもしれません。
ScratchLinkのシステムの動作最小要件をみると
https://www.microsoft.com/ja-jp/p/scratch-link/9n48xllczh0x?activetab=pivot:regionofsystemrequirementstab
「Windows 10 バージョン 16299.0」とあるので、Windows 10でも一定以上のバージョンを要求されます。ですので将来にわたってWindows 8に対応することはほぼ絶望的と思っていて良いです。(Windows 8と8.1のシェアは、それより前のWindows 7のものよりかなり狭いです）Windows 8をもし続けて使う限りは、ScratchLinkの利用を考える必要は無いでしょう。
尚、Windows 8はクライアント製品なので、業務用途で使う場合に不特定多数からの接続を許すサーバーとして動作させるのは、ライセンスについて気を付けた方が良いと思われます。
回答5件
0
Chrome等のブラウザ越しにレゴのクレーンゲームを操作したいという要望ですよね？
どう実現するのかを詰めていきましょうか
HTMLとはWordのようなドキュメントを作る目的で作られた文書フォーマットです。
目的が知見の共有なので、Wordと同レベルの事しか出来ません。
しかし、多種多様なニーズに応える為にHTMLは外付けで進化をしてきました。
CSS: HTMLの見栄えを整える為に作られたサポート用の言語
JavaScript: HTML文書がブラウザ上でロードされた後に、HTML文書を書き換えて画面の更新を促す目的のスクリプト言語
この内、遠隔操作に使う部分はJavaScriptになります。
JavaScriptには出来ることと、出来ない事があります。
もしJavaScriptがあなたのパソコンに入っている画像ファイル等を勝手に閲覧出来たらどうなるでしょう？
悪意の第三者の作ったWebサイトに足を踏み入れた途端に、
パソコン内の画像ファイル等をスキャンして持ち逃げが可能になってしまいます。
ファイル共有ソフトのWinny越しに感染するコンピュータウィルスが一時期大問題になりましたが
あれのやっている事はデスクトップ上にあるWordやExcel、画像ファイルを持ち逃げしてWinny越しで配っただけです。
これで自衛隊等の極秘情報や、恋人とエッチしている最中の画像がバンバン共有され、人生が終わった人が大量に出ました。
こういった事を防ぐ為に、JavaScriptはパソコン上の資産を自由に使えない強力な制限が存在します。
出来るのはHTTPリクエストをどっかに発射して結果を持ち帰ることだけです。
Scratchでボタンのプログラムのみ作り、htmlにScratchを埋め込む方法
なので、これは出来ませんという答えになります。
JavaScriptのキツすぎる成約により、ブラウザからScratchのライブラリにアクセスする事は不可能です。
当然レゴのWeDo 2.0を操作することも不可能です。
JavaScriptから自発的に出来る事は下記のことだけです。
クレーンゲームは
ボタンを押し続けて目的の場所までクレーンが移動したら手を離すことで、
クレーンの座標をコントロールするゲームですね。
なので私はボタンを押しっぱなしにしてますよ！してますよ！今離した！！
というリアルタイムでボタン押している状態を取り消すということが非常に大事になりますので、
Ajaxで実装する事は難しいと思います、まぁトグルボタン方式なら行けるか？
基本的にはWebSocketで実装した方が良いと思います。
これでどうやって作ればええんじゃ？となりますよね。
なのでイメージしやすいように別のものを紹介します。
コンピュータ将棋にUSIというプロトコルがあります。
コンピュータ将棋はやねうら王、Aperyといったプロの棋士達と台頭にさしあうプログラムが存在します。
この思考エンジンを「ゲーム」や「棋譜の検討ソフト」にどうやって接続すれば良いでしょうか？
その橋渡しをするのがUSIです。
コンピュータ将棋はUSIに対応しており、
様々なアプリケーションはUSI越しに話しかける仕組みを作成して
コンピュータ将棋の思考エンジンに問いかければ答えが帰ってくるような仕組みになっています。
これをWebSocketに組み合わせて考えましょう。
お手元にはWindows7のマシンがありますよね？
それにNode.jsやRubyといった言語を入れて、
WebSocketのアクセスを受け付けるWebサーバを構築しましょう。
更に裏でScratchのプロセスと紐付けしておき、
Node.jsやRubyからクレーンを操作出来るようにしておきます。
Scratchは都度起動ではなく、起動しっぱなしの方が良いと思います。
そして、ブラウザからのWebSocket文字列を受け取り、
逐次操作でScratchへの命令伝達に変更します。
まとめるとUSIみたいなのを作って変わりに命令出すWebサーバ作ればいけるんじゃない？ってことです
ちょっと調べてみたらNode.jsにWeDo 2.0を操作するようなプログラムがそもそも存在するので、
Scratchを経由せずとも操作出来るかもしれませんね。
投稿2020/03/09 07:56
編集2020/03/09 08:01
総合スコア21203
質問者さんがおっしゃっているように、Scratchを埋め込むこと自体は可能ですよ。
https://ja.scratch-wiki.info/wiki/%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF
ただ、これとScratch Linkを組み合わせたところで動かないとは思いますが。
(遠隔地に操作内容が送信されるわけではないと思うので)
分かりやすい説明ありがとうございます。
気になる点があります。
僕が持っているのはwindows8なのですが、PCをOBSERVERにするとPCに問題が出る、またChormeなど開けなくなるという事はありますか？
実際に遠隔操作でプレイするオンラインクレーンゲームを作るとしたら僕みたいな初心者だと作ることは出来ませんか？
Node.jsやWebSocketは専門用語を勉強してから触れるべきですか？
> Takumiboo さん
へー！これ凄いですね。
スマート家電持ってて出先から家の鍵や照明を操作出来るようにしていますので、
そこがハブになってくれるなら行けそうだなーという感じはしますね。
流石にそこまでは面倒みてくれさそうですが……
> 実際に遠隔操作でプレイするオンラインクレーンゲームを作るとしたら僕みたいな初心者だと作ることは出来ませんか？
自宅のネット環境次第です。
ルータにポートフォワーディングみたいな機能がありますので、
Windows8のマシン上で80/TCP(Webサーバのデフォルト値)を流すようにしておき、Node.jsやRuby等の言語で作った80/TCPで待ち受けるWebサーバを起動させて接続を待ち受ければ実現できます。
ただし、LAN内なら高速にクレーンゲームの映像情報なんかを受け取れますが、
WAN、全世界のインターネット回線を挟んだ時にとぎれとぎれにならないかとか問題は山積みです。
また実物は1個しかないから不特定多数に配るとみんなが同時に操作しようとして大変な事になるでしょうね。
なので順番待ちやユーザの認証機能等が必要になるでしょう。
> Node.jsやWebSocketは専門用語を勉強してから触れるべきですか？
世の中にはサンプルコードが腐るほどあるので、コピペで動かして見ることを勧めます。
体系的に学ぶならプログラミングスクールに入ったほうが良いかもしれません。
Scratchの技術を使えば遠隔も可能かもしれませんが
ScratchLinkがwindows8対応がないのでね...
Nod.jsなどを使うほうが早いのでしょうか
miyabi-sun様に質問です
ダウンロードをしたのですが、このファイルだけではWedo2.0は動かないのですか？
調べたんですがやり方が分かりません。
教えていただけますか？
何をダウンロードしたのですか…？
0
マシンやOSに関しては、他の回答者さんの回答や、コメントの通りかと。
下記に、Webページで実現するなら必要、と思われるものを列挙します。
（ただし、確実とはいえない）
- JavaScript
HTMLだけでは絶対にできません。動的に通信を行うなどをしていくなら、必ず必要になります。
- WebSocket
上記に付随して、おそらく必要になります。
Webサーバーを介して、双方向通信を可能にする技術です。
HTMLにAPIが備わっており、JavaScript側で使用が可能です。
詳しくは、
WebSocket - Wikipedia
をご参考ください。
- サーバーサイドテクノロジー
サーバーと、それを動かす、PHPやRuby、Pythonなどです。
WebSocketを使う上でも必須になります。
- LANであってもSSL通信にする
これは、Webサイト（ブラウザ）から様々な通信を行った上で、デバイスにアクセスしたりなどするときに、たとえローカルであっても、セキュアな通信でないと、セキュリティにひっかかるからです。
なので、ローカルでの開発においても、ローカルの場合はオレオレ証明書でいいので、SSL通信にする必要があります。
あとは、ScratchとWebサイトをつなげるには、WebSocket上で行う（つまりサーバーサイド側）ことが望ましいかと。
フロントエンド側（JvaScript）は基本的に、APIにて、情報取得と送信をさせるといいでしょう。
具体的なやり方は・・・
ご自分で頑張って調べながらやってください。
投稿2020/03/09 07:27
総合スコア9555
0
htmlで遠隔操作をするとしたらどの様な方法がありますか。
HTMLの正式名称はHyperText Markup Languageです。
マークアップ言語です。それ以上でもそれ以下でもないです。よって、HTMLだけで開発するというのは無理な話です。
ScratchLinkがwindows10限定なので、ScratchLinkがwindows8対応すれば作ることも可能かもしれません。
選択肢は二通り、
- アップデートするなり、パソコンを新規購入するなりでWindows10を用意する
- あきらめる
投稿2020/03/09 05:58
総合スコア10429
0
やれなくてもいい所から手をつけすぎです。
一番コアな部分の問題で、クリアすべきことを洗い出して解決しないと。
技術的な事は他の人が書いているのでそちらを参考にして下さい。
色々機材を揃えているので（わたしが勝手に）本気だと思ってます。
ブームが過ぎ去る前に作り上げる必要があると思います。
拙速なのは分かってますが、分かっている情報だけでやろうとすると…
コアな部分
- まずはPC操作で動くものを作る
本当にScratchとWedo2.0、SPIKE PRIMEの組み合わせで動きます？
SPIKE PRIMEでボタン(またはレバー)押せます？ラグあり過ぎでは？
→無理なら他の手段を検討(Wedo入出力ポート ×２を活用するか？電気的に制御しないとダメだと思う)
- 何らかの方法で、カメラ画面と上記の操作系をいっしょに出来るか
これはiFrameによるカメラ画像とScratchで行けそうなんですよね？
- 遠隔操作
セキュリティーの検討は必要だけど、VNCなど画面共有系なもので配信してもよいかと。
→誰でも入れちゃダメなので認証機能は必要
以下は参考になるかと。これに認証機能つければとりあえずはOK?
WebRTC P2P を使った画面共有サービスを作ってみた - hakobera's blog
スピード重視でWedo&画面共有で考えたけど…Wedoによる操作は無理な気がする。
I/Oが足らない…ボタン制御x2，Insert Coin用x1、景品排出検知x1、ゲーム終了検知x1
アソビでやるにしてもここまでは出来る必要があるかな。
コアな部分ができたら
ここまで出来たら課金、集金方法や景品どうやって入荷するのとか。（大変だと思います）
顧客管理も必要だし、ゲーム終了をどうやって検知するのとか。
操作者以外にも画面見せたいよねとなったら、2のAndroid使ったカメラ動画(別質問であったやつ)はNGかもしれない。
プロフ見てHTMLにこだわる理由がわかったけど、適材適所で。
投稿2020/03/09 07:39
編集2020/03/09 11:21
総合スコア2826
0
ご自身で答えを書かれているのに、あとは何をお望みなんでしょう…？
LEGO社の
Wedo 2.0とSPIKE PRIMEを買ってあります
ですがパソコンがwindows8なのでScratchとWedo2.0、SPIKE PRIMEを繋げる事ができません。
一応Scratchの技術は持っているのでパソコンがwindows10であれば作ることも可能です。
考えていることにも書いてあるように、Scratchをhtmlで埋め込めばいいと思っています。
ScratchとWedo2.0などを遠隔するためには、Scratch LINKを入れる必要があります。
ScratchLinkがwindows10限定なので、ScratchLinkがwindows8対応すれば作ることも可能かもしれません。
他のやり方、ということであればいくらでも考えられそうですけどね。
HTML+JavaScriptで操作画面を作り、Ajax(非同期通信)を行うことで、サーバ側に操作を転送、
そこはタグにつけられていたPHPでも何でもお好みの言語で筐体自体を操作。
でもそれより、映像が見えないとクレーンゲームって出来ないですよね…？
投稿2020/03/09 07:17
総合スコア2536
映像部分は完成していますよ
本文に追加しておきますね
過去の質問を拝見しましたが、映像が見えるって、もしかしてローカルに接続したWebカメラの映像を表示している感じですか？
だとしたらそれは訪問者には見えないので、そこもこれから環境構築が必要ですね。
あ、YouTube Liveを使うんですかね。それならとりあえず表示はできそうですね。
現在は
LAN内だと
http://192.168.11.14:8080/video
にアクセスすると見れるようになっているので、ポート開放をすればいいのかなと思っています。
Youtubeライブは最小遅延にしても8秒は遅延が発生します。
LAN内のリンクだと遅延が0.5~2秒とか
LAN内ですらそんなに遅延するならクレーンゲームにならない気がしますが。このまま進めて大丈夫です？
大丈夫ですよ
あなたの回答
tips
プレビュー
