💫

vscode拡張機能でGUIベースのアプリ配置ツールを作るための機能名

2024/08/07に公開

vscodeでアプリの配置を変更する拡張機能を作ろうと思ったときにAIに質問した内容をメモとして残します
(動作未確認を含む)

要件
・vscodeで動作する拡張機能
・web版のvscodeでも動作する(package.jsonの設定)
・HTMLベースのGUIを持つ
・.pycetra.mdの拡張子のファイルを開いたときにGUIが自動で開く
・GUIが開いたときに対象ファイル(xxx.pycetra.md)を読み込んでGUIへデータを送る
・GUI側の中にあるiframeからデータを受信したら変数に格納する
・applescriptでmacosで起動しているアプリとその座標を取得する
・アプリと座標情報を加工する
・applescriptでアプリと更新済の座標へ実際のアプリを更新する
・アプリは操作スペース(Spaces)を跨いで移動できる

ターミナルを開かずにコマンドを実行する

const { execSync, exec } = require('child_process');

HTMLベースのGUIを使用する

const panel = vscode.window.createWebviewPanel

HTMLベースのGUIへデータを送る

const panel = vscode.window.createWebviewPanel
panel.webview.postMessage

web版のvscodeでアプリが動くようにする設定

package.json

"browser": "./dist/extension.js",

テキストドキュメントが開かれたときに発生するイベント

vscode.workspace.onDidOpenTextDocument

apple scriptの結果をpythonへ渡す

const { exec } = require('child_process');

async function runAppleScript(scriptPath) {
    return new Promise((resolve, reject) => {
        exec(`osascript ${scriptPath}`, (error, stdout, stderr) => {
            if (error) {
                reject(`エラー: ${error.message}`);
            } else if (stderr) {
                reject(`標準エラー: ${stderr}`);
            } else {
                resolve(stdout.trim());
            }
        });
    });
}

async function runPythonScript(scriptPath, arg) {
    return new Promise((resolve, reject) => {
        exec(`python ${scriptPath} "${arg}"`, (error, stdout, stderr) => {
            if (error) {
                reject(`エラー: ${error.message}`);
            } else if (stderr) {
                reject(`標準エラー: ${stderr}`);
            } else {
                resolve(stdout.trim());
            }
        });
    });
}


const appleScriptResult = await runAppleScript('path/to/your/example.scpt');
console.log(`AppleScript Result: ${appleScriptResult}`);

const pythonResult = await runPythonScript('path/to/your/script.py', appleScriptResult);
console.log(`Python Script Result: ${pythonResult}`);

ファイルの内容を同期的に読み取る

fs.readFileSync

macで特定のアプリを移動する

例: Finder

osascript -e 'tell application "Finder" to set bounds of window 3 to {100, 100, 800, 600}'

macで起動中のアプリ名を取得する

osascript -e 'tell application "System Events" to get {name} of (every process whose background only is false)'


{name} のみでなく、{name, index}など複数の情報にするとアクセシビリティが必要になってしまうためNG

macで複数起動しているアプリのindexを取得する

例: Finder

osascript -e 'tell application "Finder" to get {index, name} of windows'

アプリは操作スペース(Spaces)を跨いで移動

この機能はosascriptには見つけられなかった
他のツールですが、yabaiを使うとアプリをスペースを跨いで移動させることができました。

brew install koekeishiya/formulae/yabai
brew services start yabai
brew install jq

// yabaiへアクセシビリティを許可しておく
yabai -m query --windows | jq -r '.[] | select(.app == "Finder") | .id' | xargs -I{} yabai -m window {} --space 3

キーワード

  • ウィンドウマネージャ: yabai, Amethyst, xmonad
  • ステージマネージャ: macOS Venturaの組み込みのウィンドウマネージャ
  • 画面分割ツール: ShiftIt, Spectacle, Magnet, BetterSnapTool
GitHubで編集を提案

Discussion