Zenn
🎛️

ブラウザを PowerShell の UI にする - 1

2024/08/01に公開
PowerShell
tech

PowerShell の UI 問題

はい、今回も誰得な話題をシリーズでお届けしますよ。PowerShell スクリプトの UI を作る話です。

この記事の対象読者

誰得ではありますが、一応書いておきますね。

  • PowerShell でサクッと仕事を終わらせたい
  • ただし非技術系なよそ様も使うので UI が必要
  • クラウド上のサーバにアプリをデプロイするほどの処理内容ではない
  • ローカルのファイルにアクセスする必要がある

という場合にはもしかして役に立つかも？

UI 問題とは

ちょっとした内容の案件はさくっとスクリプトを書いて終わらせるわけですが、UI をどうするかというのはいつも悩ましいわけです。

自分や技術者が使うだけだったらコマンドラインで良いんです。パラメータが多かろうが長かろうがなんとでもなる。

ですが技術系ではない人に使ってもらう場合にはコマンドラインだとキツイわけです。ドキュメントもエラーチェックも増えてくるし、パラメータを打ち間違えて「言われたとおりにやったけど正しく動かない」とヘルプコールが来ることもあるでしょう。パラメータが全くないのであればまだしも、複数のパラメータを入れてもらう必要がある場合には CLI は選択肢になりません。

で、UI をどうするか、となるわけです。

PowerShell でも WPF 使ってがっつり作れないこともないですが、ビジネスロジックの部分がちょっとした内容でも処理時間がかかるような場合は UI が止まらないように UI 部分とビジネスロジック部分をマルチスレッドないしマルチプロセスで作る必要があるのでかなーりめんどくさい。ちょっとした内容のはずが、マルチスレッドの仕組みのミドルレイヤーを作ることになったりして本末転倒感がすごい。

PowerShell やめて C# なりで書けばいいんですが、ビジネスロジック部分が PowerShell でサクッとできるような内容だと諦めきれないわけです。今回の実際のお題は、書式が決まっているExcelのひな形ファイルをコピーして、ある特定のセルに指定の値を入れ、あれしてこれして、という内容でした。ほら、PowerShell で Excel.Application オブジェクトいじればすぐにできるでしょ？

ブラウザを UI にする

今回は（次回の予定はないですが）HTML書いてブラウザに UI 部分を任せてしまいます。非技術系の人も Web アプリは日常的につかっているわけで、それっぽくコントールを配置しておけば使うのに問題ないでしょう。なんなら使い方の説明も画面に入れれば良いし。UI と ビジネスロジックをマルチ化するという件もそもそも別プロセスで動くことになりますから無問題、と。

簡単に UI の見た目を変更できるというのもブラウザでやるメリットですね。HTML/CSS をちょっと変えるという程度であればできる人は少なくない、はず、たぶん。

通信は WebSocket で

ブラウザ側で動作する JavaScript のコードと PowerShell側のコードで通信する必要があるのですが、もうこれは WebSocket 一択で良いでしょう。どちらにも必要最低限の機能がライブラリとしてあるのでそのうえでよろしくやるだけです。

全体の動き

全体の利用シナリオ、動作としては、

  1. 利用者が BAT ファイルを起動
  2. BAT ファイルから pwsh を起動。環境固有のパラメータ設定はここでするのもあり。
  3. pwsh コードで HTML を作成し、ブラウザを起動
  4. そのまま pwsh 側は WebSocket 着信待ちに
  5. ブラウザ側は WebSocket に接続して利用者の操作待ちに
  6. 利用者が必要なパラメータを入力して OK をクリックしたら、入力データを pwsh 側に渡す
  7. pwsh 側で必要な処理を実施。結果を返す
  8. ブラウザ側で結果を表示して終わり

って流れです。

基本的なパーツはそろっているので、今回のデモ用コードをベースにあれこれやっても1時間程度で動き出せます。（ビジネスロジックと UI の詳細は除く---凝りだすと終わらないし）。

デモコード

こちらに上げておきました。例によってクラスでバリバリ実装しています。

https://github.com/npwshy/Pwsh-UI-Demo/tree/main

動作

pwsh .\UIdemo.ps1 としてスクリプトを起動します。HTML ファイルが生成され、ブラウザのタブでそれを表示します。こんな感じ。デザインが適当なのは仕様。

デモ用に２つ入力項目がありますが、これに入力すると実行ボタンが押せるようになるので、クリック。

灰色背景のステータス表示エリアは実行すると以下に変わり、

5秒して ただいま処理中... と変わり、そのさらに5秒後に 処理は正常に完了しました。終了ボタンを押してブラウザのタブを閉じてください と表示されます。

キャンセルボタンを押せばタブを閉じて終わります。

使ってみる

もし使ってみたいという奇特な人がいたとしたら、以下を変えると良いでしょう。

  • html\uidemo-body.html
    • UI 画面の HTML 部分
  • html\uidemo.css
    • UI 画面の CSS。誰かにかっこよくしてほしい
  • js\Var.js
    • 変数はまとめて定義しておきたい派なので、ここに入れています
  • js\Main.js
    • UI コンポーネントの動きなどを書いておくと良いでしょう。
  • js\UIDemoAPI.js
    • pwsh スクリプト側との API を実装しています。pwsh 側にやらせたいことをコマンドとして WebSocket 経由で送り、結果をもらいます。
  • UIDemo.ps1
    • pwshスクリプトのメイン部分。動作そのものとしては変更する必要もないはず
  • UIDemoWorker.psm1
    • js 側から送られてきたコマンドを処理するいわゆるビジネスロジックの部分。
    • 5秒待って途中経過メッセージを出し、もう5秒待って処理を終わってそのメッセージを出す、というデモ用になっています
  • appconfig.json
    • 設定ファイル
    • ここで HTML ファイルの合成に使う部品の指定をしています
    • js コードが増えたり名前を変えたりした場合も要変更

次から解説していきますよー。

Discussion