2025年12月4日木曜日

VSCode で Remote tunnel する

VSCode で Remote tunnel する

概要

操作するファイルがリモートサーバにある場合に vscode.dev という中継サーバを介してローカルで起動している VSCode で編集することができます

環境

  • Ubuntu 24.04
    • code 1.106.3
  • Windows 11
    • VSCode 1.106.3

リモートサーバ側でトンネル作成

  • curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz
  • tar -xf vscode_cli.tar.gz

これで code というバイナリが入手できます
あとはホームディレクトリに起動して code を起動します

  • cd
  • ./code tunnel

Github Account か Microsoft Account を選択する必要があるので Github Account を選択します

起動すると例のごとくhttps://github.com/login/device にアクセスしてトークンを取得して ./code tunnel に入力してあげます

これでトンネル用の URL が発行されるのでこれをブラウザに入力してもいいのですがそれだと code-server と変わらないので VSCode からアクセスしてみます

VSCode の Remote - Tunnels 拡張をインストールする

  • 左メニューの拡張を選択
  • Remote tunnel を入力して検索
  • 「Remote - Tunnels」拡張をインストール
  • 左メニューに Remote - Tunnels 拡張のアイコンが追加されるので選択
  • さきほど ./code tunnel で起動したサーバが一覧にあるのでそれを選択
  • 初回はブラウザで OAuth の認証が発生するので ./code tunnel と同じ Github Account でログインします
  • 接続に成功すると VSCode が再起動しサーバ上のファイルが操作できるようになります

その他

  • ローカルモードに切り替える場合は切断する必要があるので左下の接続先サーバを選択し「Close Remote Connection」を選択します
  • ./code tunnel 時にはトークンのみですが VSCode 側でトンネルと VSCode を紐づける場合にはブラウザの OAuth が必要になるので VSCode が起動する環境にブラウザがありかつそのブラウザから該当の Github Account でログインできる必要があるので注意しましょう

最後に

普通はこんな使い方しないのでどうしてもローカルで開発できない場合などに使うんだと思います

もしくは Powershell などを使いたくない場合なども使うのかなと思います

参考サイト

2025年11月22日土曜日

Speckit 超入門

Speckit 超入門

概要

code-server + speckit を試してみました
一応アプリは作成してくれましたが生成されるファイルが微妙に違うのでまだサポートしていないのかもしれません

環境

  • Ubuntu 24.04
  • speckit (specify 0.0.22)
  • code-server v4.105.1

インストール

  • uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

初期化

  • specify init speckit_test
    • copilot を選択
    • sh を選択

code-server を開く

  • speckit_test を vscode で開く
  • モデルを Claude Sonnet 4.5 にする

以下 code-server の Github copilot chat のチャット欄で作業します

規則作成

  • /speckit.constitution コード品質、テスト標準、ユーザーエクスペリエンスの一貫性、パフォーマンス要件に焦点を当てた原則を作成します。

/home/devops/work/speckit_test/.github/prompts/speckit.constitution.prompt.md が作成された

仕様作成

  • /speckit.specify 家庭や業務用キッチンで使用できるシンプルで視認性の高いタイマーを、Web ブラウザー経由で提供します。1分、3分、5分を設定するためのボタンを配置します。ボタンを押すと、その時間からカウントダウンが開始されます。カウントダウン中は、残り時間を目立つように表示します。カウントダウン中に再度ボタンを押すと、タイマーがリセットされ、新たなカウントダウンが開始されます。

/home/devops/work/speckit_test/.github/prompts/speckit.specify.prompt.md が作成されました

実装計画作成

  • /speckit.plan HTML5、JavaScript(ES6)、CSS3 で作成してください

/home/devops/work/speckit_test/.github/prompts/speckit.plan.prompt.md が作成されました

作業タスクの作成

  • /speckit.tasks

/home/devops/work/speckit_test/.github/prompts/speckit.tasks.prompt.md が作成されました

実装

  • /speckit.implement

/home/devops/work/speckit_test/.github/prompts/speckit.implement.prompt.md が作成されました

また実際に作成されたコードは以下の通りです

ls -ltrR kitchen-timer/
kitchen-timer/:
total 24
drwxr-xr-x 3 devops docker 4096 Nov 21 13:23 assets
-rw-r--r-- 1 devops docker 1844 Nov 21 13:24 index.html
drwxr-xr-x 2 devops docker 4096 Nov 21 13:24 css
drwxr-xr-x 2 devops docker 4096 Nov 21 13:26 js
-rw-r--r-- 1 devops docker 7522 Nov 21 13:26 README.md

kitchen-timer/assets:
total 4
drwxr-xr-x 2 devops docker 4096 Nov 21 13:23 sounds

kitchen-timer/assets/sounds:
total 0

kitchen-timer/css:
total 8
-rw-r--r-- 1 devops docker 6334 Nov 21 13:24 styles.css

kitchen-timer/js:
total 16
-rw-r--r-- 1 devops docker 2975 Nov 21 13:25 timer.js
-rw-r--r-- 1 devops docker 3650 Nov 21 13:25 audio.js
-rw-r--r-- 1 devops docker 6150 Nov 21 13:26 app.js

動作確認

  • cd speckit_test/kitchen-timer
  • python -m http.server 8000
  • curl localhost:8000

最後に

code-server で speckit を動かしてみました
冒頭にも紹介しましたが挙動が微妙でまだ code-server ではサポートしていないのかもしれません

本当は git コマンドで branch も作成してくれるよういなのですがやってくれませんでした

またモデルが GPT-4.1 だと動きませんでした

続けて修正、エンハンスなどしたい場合は /speckit.specify から再度行います

参考サイト

2025年11月21日金曜日

GCP で CPU 監視する方法

GCP で CPU 監視する方法

概要

コンソールでの手順を紹介します

環境

  • GCP (2025/11/21 時点)

手順

  1. Compute Engine のページを開く
  2. 「VM インスタンス」を選択
  3. 監視したい VM を選択
  4. 「オブザーバビリティ」を選択
  5. 右上にある「推奨アラート」を選択
  6. VM Instance - High CPU Utilization (web) を選択 -> 作成
  7. 「通知チャンネルを使用」で通知したいチャネルを選択 -> 作成

確認

モニタリングにアラートポリシーがあることを確認しましょう

最後に

GCP の VM で CPU 監視する方法を紹介しました
コンソール作業なので UI が変わった場合は手順が変わるので注意してください

しきい値を変えたい場合はポリシーを直接変更すれば OK です

Slack の通知チャネルを作成する方法は以下の参考リンクを参照してください

参考サイト

2025年11月11日火曜日

Ubuntu に uv をインストールする方法

Ubuntu に uv をインストールする方法

概要

グローバルな環境にインストールする方法を紹介します
基本は mcp などに使う場合にこの方法でインストールします

環境

  • Ubuntu 24.04
  • uv 0.9.8

コマンド

curl -LsSf https://astral.sh/uv/install.sh | sh

ログ

downloading uv 0.9.8 x86_64-unknown-linux-gnu
no checksums to verify
installing to /home/devops/.local/bin
  uv
  uvx
everything's installed!

インストールされるパス

ホームディレクトリの .local/bin 配下なので注意してください
PATH が設定されていない場合は PATH に追加しましょう

アップグレードする方法

再度インストールするための curl を叩けば OK です

最後に

pip を使ってインストールする場合はパスや管理方法が変わるので注意しましょう

参考サイト

2025年11月6日木曜日

code-server では Python の拡張だけでは import などを自動でしてくれない

code-server では Python の拡張だけでは import などを自動でしてくれない

概要

VSCode では Pylance の languageServer が使えるのですが code-server では使えません
その影響でメソッドやモジュールの自動インポートはしてくれません

今回はそんな場合の対処方法を紹介します

環境

  • macOS 15.7.1
  • code-server 4.105.1

インストール

  • brew install code-server

起動

  • brew services run code-server

Python 拡張のインストール

  • 左メニュー拡張
  • 検索バーに「Python」
  • ms-python 製の Python 拡張をインストールします

BasedPyright のインストール

  • 左メニュー拡張
  • 検索バーに「basedpyright」
  • detachhead 製の BasedPyright 拡張をインストールします

設定

  • settings.json
{
    "workbench.colorTheme": "Default Dark Modern",
     "basedpyright.analysis.diagnosticMode": "openFilesOnly"
}

動作確認

これでメソッド名の保管時に自動で import してくれるようになります
また型チェックなどもしてくれますが純正の pyright とは違うので注意してください

もし pyright 基準にしたい場合は以下の設定を入れると多少は近くなります

{
    "basedpyright.analysis.typeCheckingMode": "standard"
}

最後に

VSCode では普通にできても code-server ではできないことが多くあるので注意しましょう

参考サイト

2025年11月4日火曜日

OpenSpec 超入門

OpenSpec 超入門

概要

OpenSpec は簡単に言えば Markdown (仕様書) を作成するだけでアプリが開発できてしまうツールです
今までは特にフォーマットもなくプロンプトに命令していましたがそれを定型化したツールになります
今回は簡単なブラウザのタイマーアプリを OpenSpec を使って作ってみました

環境

  • Ubuntu 24.04
  • node 22.21.0
  • openspec 0.13.0
  • code-server v4.104.3

インストール

  • npm install -g @fission-ai/openspec@latest

初期化

まずはプロジェクトを初期化します

  • openspec init

 ????   ?????   ??????  ??  ??   ?????  ?????   ??????   ?????
??  ??  ??  ??  ??      ??? ??  ??      ??  ??  ??      ??
??  ??  ?????   ?????   ?? ???   ????   ?????   ?????   ??
??  ??  ??      ??      ??  ??      ??  ??      ??      ??
 ????   ??      ??????  ??  ??  ?????   ??      ??????   ?????

Welcome to OpenSpec!

Step 1/3

Configure your OpenSpec tooling
Let's get your AI assistants connected so they understand OpenSpec.

Press Enter to continue.

次に使用するLLMを選択します

Step 2/3

Which natively supported AI tools do you use?
Use ↑/↓ to move ・ Space to toggle ・ Enter selects highlighted tool and reviews.

    Natively supported providers (? OpenSpec custom slash commands available)
? ○ Auggie (Augment CLI)
  ○ Claude Code
  ○ Cline
  ○ CodeBuddy Code (CLI)
  ○ Crush
  ○ Cursor
  ○ Factory Droid
  ○ OpenCode
  ○ Kilo Code
  ○ Windsurf
  ○ Codex
  ○ GitHub Copilot
  ○ Amazon Q Developer

    Other tools (use Universal AGENTS.md for Amp, VS Code, GitHub Copilot, …)
  ○ Universal AGENTS.md (always available)

Selected configuration:
  - No natively supported providers selected

今回は Github Copilot を使います

Step 3/3

Review selections
Press Enter to confirm or Backspace to adjust.

? GitHub Copilot

これで初期化が完了です

? GitHub Copilot
? OpenSpec structure created
? AI tools configured

? OpenSpec initialized successfully!

Tool summary:
? Root AGENTS.md stub created for other assistants
? Created: GitHub Copilot
? Skipped: Auggie, Claude Code, Cline, CodeBuddy Code, Crush, Cursor, Factory Droid, OpenCode, Kilo Code, Windsurf, Codex, and Amazon Q Developer

Use `openspec update` to refresh shared OpenSpec instructions in the future.

Next steps - Copy these prompts to GitHub Copilot:
────────────────────────────────────────────────────────────
1. Populate your project context:
   "Please read openspec/project.md and help me fill it out
    with details about my project, tech stack, and conventions"

2. Create your first change proposal:
   "I want to add [YOUR FEATURE HERE]. Please create an
    OpenSpec change proposal for this feature"

3. Learn the OpenSpec workflow:
   "Please explain the OpenSpec workflow from openspec/AGENTS.md
    and how I should work with you on this project"
────────────────────────────────────────────────────────────

project.md
の編集

ここにどんなアプリを作成したいか概要を記載ます とりあえず参考サイトにもあるブラウザで動かくタイマアプリを作成してみます Project Conventions の欄はとりあえず不要なので削除しています

  • vim openspec/project.md
# Project Context

## Purpose
家庭や業務用キッチンで使用できるシンプルで視認性の高いタイマーを、Web ブラウザー経由で提供します。

- 1分、3分、5分を設定するためのボタンを配置します。ボタンを押すと、その時間からカウントダウンが開始されます。
- カウントダウン中は、残り時間を目立つように表示します。
- カウントダウン中に再度ボタンを押すと、タイマーがリセットされ、新たなカウントダウンが開始されます。

## Tech Stack
- HTML5
- JavaScript(ES6)
- CSS3

提案書の作成

code-server の Github Copilot のチャット欄に /openspec-proposal コマンドを入力します

  • /openspec-proposal UIを作成する

すると必要な Markdown ファイルを changes 配下に作成してくれます

ls -lR openspec/changes/ui-timer/
openspec/changes/ui-timer/:
total 12
-rw-r--r-- 1 devops docker  374 Nov  4 13:57 proposal.md
drwxr-xr-x 3 devops docker 4096 Nov  4 13:57 specs
-rw-r--r-- 1 devops docker  341 Nov  4 13:57 tasks.md

openspec/changes/ui-timer/specs:
total 4
drwxr-xr-x 2 devops docker 4096 Nov  4 13:57 timer-ui

openspec/changes/ui-timer/specs/timer-ui:
total 4
-rw-r--r-- 1 devops docker 810 Nov  4 13:57 spec.md

作成されたファイルの中身を確認して仕様に間違いがないか確認しましょう 変更は Copilot Chat にお願いしてもいいですし手動で書き換えても OK です 問題なければ Keep してファイルを保存しましょう

検証する

チャット欄に「検証して」と入力すると勝手に openspec validate コマンドを実行してくれます 内部的には openspec validate ui-timer --strict を実行しています

生成された Markdown に不備があると以下のようにエラーが表示されます ちなみにエラーがよくわからなくても「修正してください」と命令し再度「検証してください」と命令すればそれだけで修正できます

code-server が openspec コマンドを実行できない場合は PATH を確認するか PATH に通っているけど実行できない場合は sudo systemctl restart code-server@USER で再起動しましょう

コードを生成する

あとは /openspec-apply を Copilot Chat に入力すればコードを生成してくれます 各種 html や js が作成されたのが確認できます 内容を確認し問題なければ Keep しましょう

動作確認

これもチャットに「動作確認して」と依頼すればブラウザでアプリを開いて動作確認してくれます

Web アプリがない場合は Python で簡易用のアプリも起動してくれます

アーカイブする

アプリの挙動が問題なければアーカイブします チャット欄に /openspec-archive を入力しましょう すると生成されたコードは archive 配下に移動します

以後アプリに修正を入れたい場合は再度提案を作成し修正するようにしましょう そうすることで changes/archive 配下に日付ごとにディレクトリが作成され提案ごとに履歴管理することができるようになります

最後に

OpenSpec に入門してみました 基本は Markdown を書くだけで開発していく感じです 今まではプロンプトに自分なりの質問やテンプレートを使って質問していたのが完全に形式化したのが OpenSpec かなと思います

新規系は簡単に導入できそうですが既存のアプリにこれを導入するとなるとかなり大変そうです

参考サイト

2025年11月3日月曜日

GCP の Ops エージェントを完全にアンインストールする方法

GCP の Ops エージェントを完全にアンインストールする方法

概要

コンソールから Ops エージェントをインストールするとなぜかアンインストールしても勝手に再インストールしてしまうので完全にアンインストールする方法を紹介します

環境

  • Ops エージェント 2.60.0
  • Ubuntu 22.04

まずは purge

  • sudo apt purge google-cloud-ops-agent

設定ファイルの削除

purge した場合は基本ないはずですが一応確認します

  • sudo ./add-google-cloud-ops-agent-repo.sh --remove-repo
  • sudo rm /etc/apt/sources.list.d/google-cloud-monitoring.list

/opt 配下にも何も無いことを確認します

VM のカスタムメタデータの削除

これがあるとエージェントが勝手に再インストールしている可能性があるので削除します
コンソールでも OK です

  • gcloud compute instances remove-metadata YOUR_INSTANCE_NAME --zone=YOUR_ZONE --keys=enable-osconfig

VM のラベルの削除

  • VM インスタンス -> 選択 -> 編集 -> ラベルを管理 -> goog-ops-agent-policy のラベルを削除

デフォルト

以下のエージェントだけになっていればデフォルトの状態です

dpkg -l | grep google
ii  google-compute-engine            20230808.00-0ubuntu1~22.04.1            all          Google Compute Engine guest environment.
ii  google-compute-engine-oslogin    20231004.00-0ubuntu1~22.04.3            amd64        Google Compute Engine OS Login
ii  google-guest-agent               20231004.02-0ubuntu1~22.04.5            amd64        Google Compute Engine Guest Agent
ii  google-osconfig-agent            20240524.03-0ubuntu2~22.04.1            amd64        Google OS Config Agent

動作確認

最終的にはコンソールでオブザーバビリティを確認したい際に「Opsエージェントをインストール」が表示されていれば完全に削除できています
インストール中の保留中やメトリクスが送信できないような文言の場合はまだタグやラベルが残っている可能性があります

最後に

GCP の小さめのインスタンスに Ops エージェントをインストールすると CPU とメモリを食い尽くして他のプロセスが全く動かなくなるので安易にインストールするのはやめておきましょう