2026年7月7日火曜日
2026年1月11日日曜日
code-server と copilot chat プラグインを自動更新する方法
概要
code-server は apt 管理ではないので手動で更新する必要があります
更新するシェルスクリプトを作成しそれを cron などで回せば自動更新できるかなと思います
環境
- Ubuntu 24.04
- code-server 4.107.0
- copilot chat plugin 0.35.3
スクリプト
#!/bin/bash
echo "=== Code Server をインストール/更新中..."
curl -fsSL https://code-server.dev/install.sh | sh
echo "=== systemd デーモンを再読み込み中..."
sudo systemctl daemon-reload
echo "=== Code Server を再起動中..."
sudo systemctl restart code-server@$USER
echo "✓ Code Server の準備完了"
# https://github.com/microsoft/vscode-copilot-chat/tags から最新の安定版を自動取得
# 安定板のタグ形式は x.y.z（パッチバージョンが1-3桁、日付のような8桁以上は除外）
# 検証版（0.37.2026010802など）は自動的に除外される
# ただし code-server の最新版でも copilot chat プラグインの最新版がインストールできるわけではないので注意
echo "=== Copilot Chat最新安定版を取得中..."
VERSION=$(curl -s https://api.github.com/repos/microsoft/vscode-copilot-chat/tags \
| grep -oP '"name":\s*"\K[^"]+' \
| grep -E '^v?[0-9]+\.[0-9]+\.[0-9]{1,3}$' \
| head -1 \
| sed 's/^v//')
if [ -z "$VERSION" ]; then
echo "❌ エラー: バージョン取得に失敗しました"
exit 1
fi
echo "✓ 取得したバージョン: $VERSION"
echo "=== vsixファイルをダウンロード中..."
curl -o "copilot-chat-${VERSION}.vsix" --compressed "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/GitHub/vsextensions/copilot-chat/${VERSION}/vspackage"
echo "=== 拡張機能をインストール中..."
code-server --install-extension "copilot-chat-${VERSION}.vsix"
echo "=== クリーンアップ中..."
rm "copilot-chat-${VERSION}.vsix"
echo "✓ インストール完了！ (バージョン: $VERSION)"%
最後に
これを cron とかで回せばとりあえず最新版は常に手に入ります
2025年12月4日木曜日
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 超入門
概要
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月6日木曜日
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 は簡単に言えば 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年10月15日水曜日
code-server をアップグレードする方法
概要
拡張は自動で更新してくれるようなのですが本体は自動では更新してくれないようなので手動で行います
環境
- Ubuntu 24.04
- code-server 4.103.2 -> 4.104.3
アップデート
curl -fsSL https://code-server.dev/install.sh | sh
インストールスクリプトを再度実行するだけです
あとはプロセスを再起動しましょう
-
sudo systemctl daemon-reload
-
sudo systemctl restart code-server@$USER
ページをリロードして最新になっていることを確認します
設定をカスタムしている場合には
アップグレードすると設定ファイルも初期化されてしまうことがあるので変更されている場合は再度手動で変更しましょう
- vim /home/devops/.config/code-server/config.yaml
bind-addr: 0.0.0.0:8081
また service ファイルも初期化されていることがあるので証明書などを設定している場合は再度書き換えましょう
https://hawksnowlog.blogspot.com/2025/08/code-server-must-b-setup-https-configuration.html
~/.config/code-server/config.yaml に cert と cert-key の設定を記載すれば service ファイルが上書きされても毎回変更する必要はないかもです
最後に
自動化する方法はないだろうか
参考サイト
2025年9月24日水曜日
RooCode で git mcp を使ってコードレビューしてもらう方法
概要
code-server にインストールした RooCode を使って MCP サーバを設定します
今回は https://github.com/modelcontextprotocol/servers/tree/main/src/git を使いコードレビューする方法を紹介します
環境
- Ubuntu 24.04
- code-server 4.103.2
- RooCode 3.28.7
- uv 0.8.22
Python の設定
- pyenv global 3.12.11
uv のインストール
-
curl -LsSf https://astral.sh/uv/install.sh | sh
mcp サーバ追加
mcp-server-git で管理するパスを --repository オプションで指定します
code-server の場合 code-server で開いているプロジェクトに合わせるようにしましょう
- mcp_settings.json
{
"mcpServers": {
"git": {
"command": "uvx",
"args": [
"mcp-server-git",
"--repository",
"/home/devops/infra"
]
}
}
}
記載できたら mcp-server-git が起動していることを確認しましょう
うまく起動できていない場合は code-server のプロセスが uv コマンドを参照できていない可能性があるので PATH に通っているかなど確認しましょう
なお mcp_settings.json のフルパスは /home/username/.local/share/code-server/User/globalStorage/rooveterinaryinc.roo-cline/settings/mcp_settings.json にあります
動作確認
RooCode で新規にタスクを作成して mcp-server-git が使えることを確認しましょう
例えば「直近10件のコミットログを参照してざっくり内容を説明してください」と指定するとちゃんと mcp-server-git を使うための確認ダイアログが表示されることが確認できます
レビューのために使えそうなプロンプト
- xxxブランチの内容をレビューしてください
- xxxブランチを手元に持ってくる必要があるがPRなどの内容をレビューはこれでできます
- xxxリビジョンの説明をしてください
- ピンポイントでリビジョンを指定してレビューしたい場合はこちら
- 現在のdiffのレビューをしてください
- まだコミットする前にレビューしてもらう場合にはgit diffを使ってレビューすることもできます
最後に
mcp-server-git を使って RooCode でレビューする方法を紹介しました
レビューしてもらったあとに大抵は提案もしてくれるので提案の修正をお願いすればファイルをそのまま修正してくれます
gitのunstageファイルがうまく取得できないケースがあったのでunstageなファイルのレビューは少し工夫がいるのかもしれません
あとは Github や Gitlab を使っている場合はそれ専用の MCP サーバがあり手元にブランチを持ってこないでも PR の内容を直接レビューしてくれるのでもし専用の MCP サーバがある場合はそちらを使ったほうが簡単な場合があります
今回の方法はどんな git リポジトリにも使える汎用的な方法になります
2025年8月31日日曜日
code-server に Github copilot chat プラグインをインストールする方法
概要
code-server の最新版に Github 公式の copilot-chat のプラグインがインストールできたのでインストール方法を紹介します
ポイントは code-server 自体で一度 Github アカウントにログインする必要がある点です
環境
- Ubuntu 24.04
- code-server v4.103.2
- Github.copilot-chat 0.30.3
- 執筆時点の最新バージョン 0.32 系はインストールできないのでご注意ください
code-server で Github へのログイン
- Ctrl + p (コマンドパレットに移動)
> Publish to Github と入力- すると Github にアカウントするためのトークンが表示されるので https://github.com/login/device にアクセスし code-server が発行してくれたトークンを入力
- code-server に戻り左メニュー下のアカウントアイコンをクリックしログインできていること確認
Github.copilot-chat のインストール
code-server のマーケットプレイスでは公開されていないので vsix ファイルを直接ダウンロードしインストールします
-
VERSION="0.30.3"
-
curl -o "copilot-chat-${VERSION}.vsix" --compressed "https://marketplace.visualstudio.com/_apis/public/gallery/publishers/GitHub/vsextensions/copilot-chat/${VERSION}/vspackage"
-
code-server --install-extension "copilot-chat-${VERSION}.vsix"
リリースされているバージョンの一覧は Github のタグを見るのが簡単です
https://github.com/microsoft/vscode-copilot-chat/tags
注意事項
- 最新版はそのうちインストールできるようになると思います
- 最新版への更新はマーケットプレイスを経由していないため code-server からは行えないので手動で行う必要があります、方法はインストール時と同じです
- 古いバージョンはプラグイン自体にログインボタンがあるがその方法は廃止されログインできても使えないので注意 (0.27 など)
最後に
直接ファイルをダウンロードしてインストールする形式なので面倒ですが一応これで動作しました
非公式の copilot-chat プラグインもあるようなのですがアカウントが必要だったりプラグインからのログインがうまくできなかったりするので無理やりでも非公式の古いバージョンを使うほうがいいのかもしれません
参考サイト
2025年8月29日金曜日
code-server は https 化しないと拡張機能が使えない
概要
RooCode などほとんどの拡張機能のページは https 化されていることが前提です
今回は code-server を https 化する方法を紹介します
環境
- Ubuntu 24.04
- code-server v4.103.2
A レコードの登録
名前でアクセスできる必要があるので code-server が動作しているサーバの IP の A レコードを登録します
証明書の取得
何でも OK です
certbot などを使って取得します
取得した鍵と証明書は適当なパスに配置しておきましょう
code-server の設定変更
-
vim /usr/lib/systemd/system/code-server@.service
[Unit]
Description=code-server
After=network.target
[Service]
Type=exec
# ExecStart=/usr/bin/code-server
ExecStart=/usr/bin/code-server --cert /home/hawk/certs/my_code_server.crt --cert-key /home/hawk/certs/my_code_server.key
Restart=always
User=%i
[Install]
WantedBy=default.target
/home/hawk/certs/my_code_server.crt と /home/hawk/certs/my_code_server.key は先程取得した証明書と鍵へのパスになります
動作確認
-
sudo systemctl daemon-reload && sudo systemctl restart code-server@devops
これで https でアクセスできることを確認しましょう
最後に
証明書は自己証明書を使う方法がネットでよく紹介されていますが最近だと簡単に取得できます
ただドメインがそもそも必要なのでドメインがない場合には自己証明書を使う方法になるかなと思います
参考サイト
登録:
投稿 (Atom)