Q&A
「webサービスのAPIをユーザに提供したい」と「ターミナルからコマンドを叩いてブラウザの表示を変更したい」の繋がりが見えてこないのですが、どういう状況なのでしょうか？
前提・実現したいこと
ブラウザ画面にSVG画像を表示させたあとに、ターミナルからコマンドを叩いてブラウザ画面のSVG画像内にある要素(circle, rect, etc...)の操作(移動、削除, etc...)を行いたいです。
というのも、webサービスのAPIをユーザに提供したいと考えています。
前提事項
- 使用ケース: 同ユーザが同PC上で、自分の操作を自動化するためにブラウザをターミナルから操作する
- アプリケーションの想定ユーザ: PCの操作、プログラミングに熟達しているエンジニア
- ブラウザ：chrome
- PC: Mac
- アプリケーションのフレームワーク: フロントエンド React, バックエンド Flask(Python)
検討したこと
いくつか検討しましたが、個人的には案3（selenium）がもっとも現実的なのかと考えています。 もし同じ意見でも他の意見でもコメントいただけますと幸いです。
- 案1: http通信によって、webサーバからブラウザにリクエストを送る. <- そもそもブラウザからwebサーバへという方向にしかリクエストは送れないため実現不可. ブラウザ内にサーバをたてて、http通信ができるようにする？
- 案2: webアプリではなくデスクトップアプリに変更して、サーバを起動できるようにする <- 案１同様、実現できるか不明. 既存サービス例としてはslackなどが該当するかも？
- 案3: seleniumによる操作. 環境構築の手間などを考えると、ユーザーに優しくないためもっと手軽な構成にしたい
- 案4: 外部サーバのfile downloadを定期的に実行しておき、外部サーバのfileに操作コマンドを記載していく <- dropboxというファイル共有サービスが画面を更新する方法か？（推測） PCの負荷が高くなってしまうかもしれない
補足
「webサービスのAPIをユーザに提供したい」と「ターミナルからコマンドを叩いてブラウザの表示を変更したい」の繋がりが見えてこないのですが、どういう状況なのでしょうか？
アプリケーションの例としては、ダッシュボード作成ツール(power bi, tableau)を想定していただけると近いです。(そのような描画アプリを4月から開発していて、一年くらいかけて作ってみるつもりです。) とくにこのようなアプリの使いにくさはスケールの難しさにあると思っています。 というのも、手作業での作業が必須であり1枚の成果物を作るためには１人の作業者を１日中張り付かせる必要があります。 同じような成果物を１０枚だとしてもプログラマの工数を10人日使わないといけないため、フロントエンドの開発状況はナンセンスな状況だと感じています。
そこで、その手作業を自動化するために作業をGUIベースではなくCUIベースで実行できたら良いのではないかと考えました。 しかし、調査するにともないブラウザを操作するのは一般的ではないと感じ、力添えをいただきたく質問いたしました。
ブラウザからサーバに送信してサーバ側で処理をして、それをブラウザに返せばよいのでは。
私個人のアプリ開発方針として、以下のように考えています。
"エンジニア、プログラマが使うソースコードのエディタや実行ツールは少ない方が良い"
---> よって、プログラムができる新しいインターフェースの提供を避けたい
---> よって、ターミナルやIDEからブラウザ（なんらか描画できるもの）へアクセスができるものが良い
ブラウザがChrome限定なら、普通にChromeエクステンションでいいような？
あー、ターミナルからコマンドを送るのが絶対条件なのですね。失礼しました。
「ブラウザに表示済みのページを外部から変更」というのは、第三者のページのDOMを操作する話かと思っていたのですが、どうやら違うのですね。
>第三者のページのDOMを操作する話
失礼しました。 その通りで、同PC上かつ同ユーザーという条件です。
回答4件
0
ベストアンサー
コンソールを使わないので少し条件から外れますが、「エンジニア、プログラマが使うソースコードのエディタや実行ツールは少ない方が良い」というポリシーからすると、むしろコンソールを使わずにコードエディタから直接実行できた方がいいだろうと思いましたので、以下をご提案します。
Microsoft Edge Tools for VS Code - Visual Studio Marketplace
Microsoft製ということでWindows PCは問題ないので、サンプルではmacOSのEdgeブラウザでご紹介します。
「Microsoft Edge Tools for VS Code」拡張機能で快適なWeb開発 | Free Style
できます。たぶん Chrome DevTools Protocol でやってるので。
Chrome を起動するときに --remote-debugging-port=9222 を付けて起動してください。そうするとサイドバー Microsoft Edge Tools の一覧に表示されます。Attach and open Microsoft Edge Tools ボタンを押せば接続完了です。
VS Codeの中でブラウザーを開いてCSS開発（ひとり DevTools Advent Calendar 2020 – 22日目） | Ginpen.com
投稿2021/07/10 07:01
総合スコア36074
といいますか、投稿してから気づきましたが、Chrome DevTools Protocol を使って開発すればいいんじゃないでしょうか。
https://chromedevtools.github.io/devtools-protocol/
ご回答ありがとうございます。 ベストアンサーといたしました。
フロントエンド開発のE2Eテストで使われることもあるのですね。
良さそうだなと思った点として、
・環境構築もpackageとして配布してしまえばpackage managerですぐインストールできる
・プログラミング言語間の壁が低い（packageはそれぞれ作る必要があるが）
・ターミナルからも操作できる
・webアプリの機能をそのまま利用できる
Chrome DevTools Protocolを使ったものを第一候補としたいと思います。
当方では全く使ったことがないので、役に立たなかったらすみません。
なんでもやってみる気持ちでいろいろチャレンジしようと思います。
ありがとうございますmm
0
単にコンソールプログラムからHTMLファイルを書き出して、ブラウザサイドは結果のHTMLを読み込んで適宜リロードする、ようなものではなにか足りないでしょうか？
投稿2021/07/10 06:11
編集2021/07/10 06:14総合スコア145183
回答ありがとうございます。
しいていうなら2点ほど気になりました。
・描画変更の連続性が途切れる（許容範囲）
→ 操作のbefore afterで、アニメーションを提供したいと考えている。 １例としては、<circle>が地点Aから地点Bへ移動するのを1秒間くらいかけて連続的に移動させたい。 （’操作ログもHTMLファイルに書き込んでしまえばいいのかもしれないですね。）
・実行と結果で時間差が生まれてるてしまう（許容範囲）
→ デバッグする際は、ソースコードの実行と出力結果の時間差が少ない方が理解が捗ると思っています。
0
ブラウザ画面にSVG画像を表示させたあとに、ターミナルからコマンドを叩いてブラウザ画面のSVG画像内にある要素(circle, rect, etc...)の操作(移動、削除, etc...)を行いたいです。
ユーザーが何らかの操作をしたのち、一括で処理できるものはCUIでしたい、ということでしょうか。
それであれば、単純にブラウザからサーバに送信してサーバ側で処理をして、それをブラウザに返せばよいのでは。
投稿2021/07/10 05:26
総合スコア69398
申し訳ございません。 記載漏れがあったようです。（質問の補足をupdateします）
私個人のアプリ開発方針として、以下のように考えています。
・"エンジニア、プログラマが使うインターフェースは少ない方が良い"
→ プログラムができる新しいインターフェースの提供を避けたい
→ ターミナルやIDEからブラウザ（なんらか描画できるもの）へアクセスができるものが良い
根本的な話ですが、Webサービスの開発を行ったことはありますか？基本的にサーバ側から直接ブラウザを操作するようなことは無く、サーバで用意した処理/データをブラウザ上でhtml/JavaScript/CSSを用いてやりとりします。
ターミナルでの処理をサーバ側プログラム（PHPとかJavaとかなんでも）から実行することも、その実行結果をサーバ側プログラムからブラウザに送ることもできます。（というかそれ以外にブラウザに直接データを送る方法はユーザー入力くらい）
ブラウザ（およびそれに類するアプリ）で何を入力/操作させたくて、それを元にどういう処理（重いとか軽いとかデータの種類とか）をさせたいのかを明確にされたほうが良いのでは。「ダッシュボード作成ツール」も例えばどこで使うどういうものかによっては、ただ表示する項目と設定のみ入力させればよい可能性もあるし、それがWeb上で使うものか特定の機器に読み込ませるものか、設定ファイルを介することが必要とか。「ターミナル」についても、例えばWeb得た結果を使ってインストールを走らせたい、とかならまた別のアプローチがひつようだし、まず具体的にしてみてください。
「プログラムができる新しいインターフェースの提供を避けたい」ってそもそもブラウザで操作させようという話なのでは。その時点でブラウザからのアクセスというインターフェースの提供が必要ですよね。それの話をしているのですが。
>「プログラムができる新しいインターフェースの提供を避けたい」ってそもそもブラウザで操作させようという話なのでは。
失礼しました。 以下のように修正します。
before: インターフェース
after: ソースコードのエディタや実行ツール
>根本的な話ですが、Webサービスの開発を行ったことはありますか？
yes
>基本的にサーバ側から直接ブラウザを操作するようなことは無く
ありがとうございます。参考になります。 案１は難しいということですね。
>まず具体的にしてみてください。
質問内容があまりよくないということですよね。 お時間取らせてしまい申し訳ございません。
> after: ソースコードのエディタや実行ツール
いや、それを使うという回答ではないのですが。
あなたの回答
tips
プレビュー
