質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Scratch

Scratchは、MITメディアラボが開発した子ども向けプログラミング言語。コードを記述することなくブロックを組み合わせてプログラミングを行うビジュアルプログラミング言語です。Scratch2.0からは、Web上でのプログラミングも可能になっています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Q&A

5回答

4027閲覧

htmlで遠隔操作をするとしたらどの様な方法がありますか。

退会済みユーザー

退会済みユーザー

総合スコア0

Scratch

Scratchは、MITメディアラボが開発した子ども向けプログラミング言語。コードを記述することなくブロックを組み合わせてプログラミングを行うビジュアルプログラミング言語です。Scratch2.0からは、Web上でのプログラミングも可能になっています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

0グッド

2クリップ

投稿2020/03/09 05:23

編集2022/01/12 10:55

前提・実現したいこと

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内で遠隔をするつもりです。
ご回答よろしくお願いします

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Takumiboo

2020/03/09 05:26

クレーンゲームとは、ゲームセンターにあるようなリアルのクレーンゲームのことなのでしょうか、それともScratch?などで作ったバーチャルなもののことなのでしょうか。
退会済みユーザー

退会済みユーザー

2020/03/09 05:27

クレーンゲーム自体は家に筐体があります。
Takumiboo

2020/03/09 05:30

ではその筐体を、筐体に直接触れずに操作する環境は整っているのでしょうか?それがScratch?
退会済みユーザー

退会済みユーザー

2020/03/09 05:37

一応 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対応すれば作ることも可能かもしれません。
Takumiboo

2020/03/09 05:43

ではそうされたら良いのでは? 一般的に後から古いOSに対応するとは考えられないので、Windows10のPCを用意するのが近道だと思いますが。
m.ts10806

2020/03/09 05:46

タグがそれぞれ本件にどのように関係するのか記載いただけますか? 関係ないのであれば外してください
退会済みユーザー

退会済みユーザー

2020/03/09 05:51

htmlはサイトに関係するため付けました phpは操作に必要すると思い付けました Webサイトは遠隔するページのため付けました ゲーム開発はオンラインクレーンゲーム開発と関わるので付けました Scratchは遠隔操作に使用つもりだったのですが、ScratchLinkが対応していないため、関連すると思い付けました。 html,phpは関係ないですね。 削除しました
miyabi_takatsuk

2020/03/09 07:10

Websocketとか使えば、できそうな気がしますけどね。 ただ、そうなるとJavaScriptとサーバーサイドは必要ですけど。 セキュリティ面は・・・、後々考えるんですよね?
退会済みユーザー

退会済みユーザー

2020/03/09 07:11

セキュリティは後々考えます。 最初はLAN内でできるようにしたいですね
dodox86

2020/03/09 09:14 編集

有益な回答を既にいくつもいただいていると思うのであまり意味の無いコメントですが、 > 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はクライアント製品なので、業務用途で使う場合に不特定多数からの接続を許すサーバーとして動作させるのは、ライセンスについて気を付けた方が良いと思われます。
guest

回答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: 1度限りの通信を飛ばす仕組み
  • WebSocket: 双方向接続で繋ぎっぱなしにしてメッセージを送信し合うという仕組み

クレーンゲームは
ボタンを押し続けて目的の場所までクレーンが移動したら手を離すことで、
クレーンの座標をコントロールするゲームですね。

なので私はボタンを押しっぱなしにしてますよ!してますよ!今離した!!
というリアルタイムでボタン押している状態を取り消すということが非常に大事になりますので、
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
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/03/09 08:33

分かりやすい説明ありがとうございます。 気になる点があります。 僕が持っているのはwindows8なのですが、PCをOBSERVERにするとPCに問題が出る、またChormeなど開けなくなるという事はありますか? 実際に遠隔操作でプレイするオンラインクレーンゲームを作るとしたら僕みたいな初心者だと作ることは出来ませんか? Node.jsやWebSocketは専門用語を勉強してから触れるべきですか?
miyabi-sun

2020/03/09 08:50

> Takumiboo さん へー!これ凄いですね。 スマート家電持ってて出先から家の鍵や照明を操作出来るようにしていますので、 そこがハブになってくれるなら行けそうだなーという感じはしますね。 流石にそこまでは面倒みてくれさそうですが…… > 実際に遠隔操作でプレイするオンラインクレーンゲームを作るとしたら僕みたいな初心者だと作ることは出来ませんか? 自宅のネット環境次第です。 ルータにポートフォワーディングみたいな機能がありますので、 Windows8のマシン上で80/TCP(Webサーバのデフォルト値)を流すようにしておき、Node.jsやRuby等の言語で作った80/TCPで待ち受けるWebサーバを起動させて接続を待ち受ければ実現できます。 ただし、LAN内なら高速にクレーンゲームの映像情報なんかを受け取れますが、 WAN、全世界のインターネット回線を挟んだ時にとぎれとぎれにならないかとか問題は山積みです。 また実物は1個しかないから不特定多数に配るとみんなが同時に操作しようとして大変な事になるでしょうね。 なので順番待ちやユーザの認証機能等が必要になるでしょう。 > Node.jsやWebSocketは専門用語を勉強してから触れるべきですか? 世の中にはサンプルコードが腐るほどあるので、コピペで動かして見ることを勧めます。 体系的に学ぶならプログラミングスクールに入ったほうが良いかもしれません。
退会済みユーザー

退会済みユーザー

2020/03/09 13:40

Scratchの技術を使えば遠隔も可能かもしれませんが ScratchLinkがwindows8対応がないのでね... Nod.jsなどを使うほうが早いのでしょうか
退会済みユーザー

退会済みユーザー

2020/03/30 13:13

miyabi-sun様に質問です ダウンロードをしたのですが、このファイルだけではWedo2.0は動かないのですか? 調べたんですがやり方が分かりません。 教えていただけますか?
Takumiboo

2020/03/31 02:00

何をダウンロードしたのですか…?
guest

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

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

htmlで遠隔操作をするとしたらどの様な方法がありますか。

HTMLの正式名称はHyperText Markup Languageです。
マークアップ言語です。それ以上でもそれ以下でもないです。よって、HTMLだけで開発するというのは無理な話です。


ScratchLinkがwindows10限定なので、ScratchLinkがwindows8対応すれば作ることも可能かもしれません。

選択肢は二通り、

  • アップデートするなり、パソコンを新規購入するなりでWindows10を用意する
  • あきらめる

投稿2020/03/09 05:58

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/03/09 06:29

やはりそうですよね... htmlじゃなくても何か方法はありますか?
kyoya0819

2020/03/09 06:40

Pythonか何かで遠隔クレーンゲームを作った人は知っています。
退会済みユーザー

退会済みユーザー

2020/03/09 07:08

方法はさすがにわからないですよね..
kyoya0819

2020/03/09 07:18

作ったの自分じゃないので、、
guest

0

やれなくてもいい所から手をつけすぎです。
一番コアな部分の問題で、クリアすべきことを洗い出して解決しないと。
技術的な事は他の人が書いているのでそちらを参考にして下さい。

色々機材を揃えているので(わたしが勝手に)本気だと思ってます。
ブームが過ぎ去る前に作り上げる必要があると思います。
拙速なのは分かってますが、分かっている情報だけでやろうとすると…

コアな部分

  1. まずはPC操作で動くものを作る

本当にScratchとWedo2.0、SPIKE PRIMEの組み合わせで動きます?
SPIKE PRIMEでボタン(またはレバー)押せます?ラグあり過ぎでは?
→無理なら他の手段を検討(Wedo入出力ポート ×2を活用するか?電気的に制御しないとダメだと思う)

  1. 何らかの方法で、カメラ画面と上記の操作系をいっしょに出来るか

これはiFrameによるカメラ画像とScratchで行けそうなんですよね?

  1. 遠隔操作

セキュリティーの検討は必要だけど、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
oikashinoa

総合スコア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

Takumiboo

総合スコア2534

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/03/09 07:19

映像部分は完成していますよ 本文に追加しておきますね
Takumiboo

2020/03/09 13:00

過去の質問を拝見しましたが、映像が見えるって、もしかしてローカルに接続したWebカメラの映像を表示している感じですか? だとしたらそれは訪問者には見えないので、そこもこれから環境構築が必要ですね。
Takumiboo

2020/03/09 13:01

あ、YouTube Liveを使うんですかね。それならとりあえず表示はできそうですね。
退会済みユーザー

退会済みユーザー

2020/03/09 13:36

現在は LAN内だと http://192.168.11.14:8080/video にアクセスすると見れるようになっているので、ポート開放をすればいいのかなと思っています。 Youtubeライブは最小遅延にしても8秒は遅延が発生します。 LAN内のリンクだと遅延が0.5~2秒とか
oikashinoa

2020/03/09 15:47

LAN内ですらそんなに遅延するならクレーンゲームにならない気がしますが。このまま進めて大丈夫です?
退会済みユーザー

退会済みユーザー

2020/03/10 01:01

大丈夫ですよ
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問