💻

【NanoKVM Capture】 NanoKVMの操作画面を録画・キャプチャするChrome拡張機能を作りました

2025/01/15に公開

https://chromewebstore.google.com/detail/nanokvm-capture/hhhflijfhlnddhneehnhojkpbjengbfh?authuser=0&hl=ja

↑ NanoKVMの操作画面を動画や画像として保存できる拡張機能を作成しました。

https://github.com/koedame/webextension-nanokvm-capture

↑ ソースコードはこちら

拡張機能を作った背景

NanoKVMは、ブラウザ上でサーバーのコンソール画面を遠隔操作できるオープンソースのIPKVMです。価格の手頃さ、セットアップの簡単さ、シンプルなWebインターフェースで世界中で注目を集め、愛用者が続々と増えています。

https://zenn.dev/flfymoss/articles/2024-12-22-play-with-nanokvm
↑ まだNanoKVMを知らないという方はこちらの記事がとても参考になります。

リモート操作に必要な機能はだいたい揃っていますが、コンソール画面のスクリーンショットや録画機能は標準では搭載されていません。作業中の画面を記録したいシーンは意外と多く、それをもっと簡単にできたら便利だと考えて拡張機能を作ることにしました。
NanoKVM自体はOSSなので本家への機能実装を検討していますが、まずは実現が早い拡張機能を作ることで体験の課題を先に洗い出しておくことが目的の1つです。

この拡張機能でできること

作業記録を簡単に残せる

  • コンソール画面の範囲を自動で認識してキャプチャ
  • ワンクリックで録画の開始/停止
  • 画像・動画は日時付きで自動保存
録画ボタンを押すとすぐに録画を開始 録画を終了すると録画データをすぐに保存

トラブルシューティングをサポート

  • エラー画面をすぐにキャプチャ
  • 問題発生時の状況を動画で記録
  • 情報共有がスムーズに

ドキュメント作成の手間を削減

  • 手順書用のスクリーンショットを効率的に撮影
  • 操作手順の説明動画を手軽に作成
  • 作業記録としても活用可能

実装のポイント

  • メモリ使用を抑えた軽量設計
  • クライアントサイドでの高速な保存処理
  • 直感的に使えるシンプルなUI

画面のキャプチャや録画という小さな機能ですが、これがあるとないとでは作業効率がかなり変わります。特にトラブル対応時は、状況を正確に記録・共有できることで解決までの時間短縮につながります。

シンプルな機能に絞ることで、必要な時にすぐ使える拡張機能を目指しました。日々の運用・保守作業の中で、ちょっとした効率化のお手伝いができれば幸いです。

使い方

  1. Chrome拡張機能をインストール
  2. NanoKVMのコンソール画面を開く
  3. 拡張機能のアイコンをクリック
  4. 表示されるメニューからスクリーンショットまたは録画ボタンをクリック
  5. スクリーンショットの場合は即座に画像がダウンロードされ、録画の場合は停止すると動画がダウンロードされます。

*この拡張機能はNanoKVMの非公式拡張機能です。NanoKVMの開発元とは無関係に個人で開発しています。

肥溜め

Discussion