最愛の愛猫をVScodeに貼り付ける拡張プラグインを作ってみた
こんにちはハナミズキです。いつの日だったか、なにげなくX(旧Twitter)のタイムラインを眺めていたら、「vscode-pets」と言うとても可愛らしいVSCode拡張プラグインがあることを知りました。今回はこのvscode-petsをリスペクトし、最愛の我が猫様を開発中に眺めることができるようなそんなVSCode拡張プラグインを作ってみたので紹介します。
こんなの作ってみたよ
ひとまず完成した見た目です。
① 設定項目です。
最愛の猫画像が含まれているフォルダパスを指定するimagePathと猫画像をランダムで表示する際の更新間隔（秒）intervalSecondsが設定できる仕様となっています。
②最愛の猫画像の出力先（サイドバー:エクスプローラー）です。
③最愛の猫画像の出力先（エディタ）です。
たったコレだけです！少し改善したい部分もありますが、ひとまずは特定の画像フォルダに格納されている画像が一定時間置きにランダムで移り変わるだけの拡張プラグインです。
開発環境ツールの整備・目の癒しは大事ですよね！！！！
はじめに
はじめに、開発のきっかけについて軽く書きます。
冒頭で話題にしましたが、この世には「vscode-pets」と言うVSCode拡張プラグインが存在しています。
このプラグインは、VSCodeでの開発生産性には直接貢献しませんが、画面の端で癒しを提供する素晴らしいものです。
正直、このアイデア面白いなぁ。どうやって作っているんだろう。と、気になりました。以前「RunCat」を知った時と同じくらいアイデアに尊敬しました。
その後、vscode-petsという拡張プラグインについて仕組みを軽い気持ちで調べたらソースコードが公開されているじゃないですか。
軽い気持ちでvscode-petsのソースコードを読んでみましたが、どのファイルから手をつければいいのか、まったくわかりませんでした！
そもそも、VSCode拡張プラグインの開発に関する知識がない状態で読んだので、これは仕方ないことかもしれません。それでも、VSCode拡張プラグインをどう作るのか好奇心をそそられたので今回のテーマにしました。
さて、気を取り直して、、
まず初めにVSCode拡張プラグインの知識を深めるため、公式が出しているチュートリアル( https://code.visualstudio.com/api/get-started/your-first-extension )を実施しました。その後、vscode-petsのソースコードを再度眺めたら仕組みが少しずつ理解できるようになりました。
vscode-petsは、vscode.Webviewを使って実装しているんですね。
vscode.Webviewに関しては、詳細がこちらのページに掲載されています。サンプルコード付きで非常に役立つページです。
https://code.visualstudio.com/api/extension-guides/webview
vscode.Webviewのサンプルを読んだ結果、vscode-petsほど複雑でなくても、愛猫をVSCode上に表示する拡張プラグインを簡単に作れることがわかりました。そこで、実際に作成してみました！
この記事では、その拡張プラグインをどうやって作ったのか紹介していきます。
VSCode拡張プラグインの作り方とは
基本の理解
最初は公式チュートリアルを実施して、VSCode拡張プラグインの作り方の流れを理解してください。
>> https://code.visualstudio.com/api/get-started/your-first-extension
公式チュートリアルに従う事で必要な環境を構築できます。例えばNode.jsとGit が事前にインストールされている事、プロジェクトを自動生成できるコマンド実行のために必要なYeomanとVS Code Extension Generatorのインストールについて指示されます。
プロジェクトの作成
「yo code」コマンドを実行してVSCode拡張プラグインのプロジェクトを作成します。後から簡単に調整できそうなのはスキップして、今回は最初に必要そうなものを自動生成できるように、質問に対して答えていきました。
以下のコマンドは今回プロジェクトを作成した時の内容です。
$ yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? (Use arrow keys)
❯ New Extension (TypeScript)
? What's the name of your extension? vscode-image-import
? What's the identifier of your extension? vscode-image-import
? What's the description of your extension?
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? npm軽く解説します。
? What type of extension do you want to create? (Use arrow keys)
どんな種類の拡張機能を作りたいか尋ねられています。今回はシンプルなものに後からつけたそうと考えたので「New Extension (TypeScript)」を選びました。
? What's the name of your extension?
拡張機能の名前付けについて尋ねられています。画像を取り込む拡張プラグインなので、なんとなく「vscode-image-import」としました。
※自動生成されたpackage.jsonの"displayName"の値になります。
? What's the identifier of your extension?
拡張機能の識別子について尋ねられています。そのまま Enterを押すと、拡張機能の名前と同じく「vscode-image-import」となります。
※コレは生成されるフォルダ名の元になります。また、自動生成されたpackage.jsonの"name"の値になります。
? What's the description of your extension?
拡張機能の説明について尋ねられています。そのまま Enterを押すと未入力になります。
※自動生成されたpackage.jsonの"description"の値になります。
? Initialize a git repository?
プロジェクト作成時にgitリポジトリとして初期化するか尋ねられています。git管理するつもりだったので「Yes」としました。git管理するつもりがないのであれば、Noを選びます。しかし、Noを選んだ後にGit管理したくなった場合は、そのタイミングで「git init」すれば良さそうですね。
? Bundle the source code with webpack?
Webpackでソースコードをバンドルするか尋ねられています。これはWebpackの知識が必要になりますが、簡単に言えば、複数のファイルを1つにまとめて出力してくれるツールです。開発していくと可読性や保守性を考えファイルを分割したくなるのはよくある事です。今回は、それを考慮して「Yes」としました。
最初にNoにして後からWebpackを入れることはもちろんできます。その時はプロジェクトに対して「npm install --save-dev webpack webpack-cli」などのコマンドを追加実行して設定を追加していくと良いかと思います。
? Which package manager to use?
どのパッケージマネージャーを使うか尋ねられています。選択肢としてはnpm/yarn/pnpmであり、こちらの選択に合わせて、自動生成されたpackage.jsonの"scripts"の内容が少し変わります。
普段使っている環境に合わせるのが良い内容です。
ソースコードのポイント抜粋するよ
今回作成した愛猫をVSCodeに貼り付ける拡張プラグインのソースコードは以下に公開しています、ここではポイントを抜粋して紹介します。
https://github.com/hanamizuki10/vscode-extension-image-import
vscode.Webviewで画像表示
WebviewとはHTMLを埋め込むことができる仕組みです。画像を表示するにはお馴染みにimgタグを利用して以下のようなコーディングで埋め込みます。
// ***.ts
webview.html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cat Coding</title>
</head>
<body>
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
</body>
</html>`;この拡張プラグインでは、src/utils.tsのgetHtmlForWebviewメソッド内にて以下のようなHTMLを生成しています。
// src/utils.ts より抜粋
// HTML生成
export function getHtmlForWebview(webview: vscode.Webview, extensionUri: vscode.Uri, configImagePath: string | undefined): string {
// ランダムに表示する画像を選択
let imagePath;
let filename;
let catImageUri;
if (configImagePath) {
// 指定フォルダパスからランダムに画像を抽出して表示
imagePath = configImagePath;
const files = getFileList(configImagePath);
if (files.length > 0) {
filename = files[Math.floor(Math.random() * files.length)];
catImageUri = webview.asWebviewUri(vscode.Uri.joinPath(vscode.Uri.file(configImagePath),filename));
}
} else {
// デフォルトの画像を表示
imagePath = 'media';
const images = ["MyLoveCat01.jpg","MyLoveCat02.jpg","MyLoveCat03.jpg"];
filename = images[Math.floor(Math.random() * images.length)];
catImageUri = webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, imagePath, filename));
}
// ファイルパスを生成
if (!catImageUri) {
return '画像が存在しません。設定[vscode-image-import]-[Image Path]を見直してください。';
}
// ファイルパスのURIを生成
const catSrc = webview.asWebviewUri(catImageUri);
const nonce = getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
コンテンツセキュリティポリシーを使用して、httpsまたは拡張ディレクトリからの画像の読み込みのみを許可し、
特定の nonce を持つスクリプトのみを許可します。
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'none';
style-src ${webview.cspSource} 'nonce-${nonce}';
img-src ${webview.cspSource} https:;
script-src 'nonce-${nonce}';
font-src ${webview.cspSource};">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Love Cat</title>
</head>
<body>
<p>${filename}</p>
<img src="${catSrc}"></img>
</body>
</html>`;
}画像格納フォルダが指定されていたら、その中からランダムに画像ファイルを抜粋して表示、指定されていなければ、拡張プラグイン内部のmediaフォルダ内からランダムに画像ファイルを抜粋して表示する仕組みです。
注意することとして、webviewにてローカルフォルダのファイルを表示できるようにするためにはアクセス許可が必要です。
Use the WebviewOptions.localResourceRoots to allow access to additional local resources.
上記の引用元に記載の通り、webview.optionsのlocalResourceRootsに対して、アクセス許可してもよいフォルダパスを指定しなければ、ローカルフォルダの画像を表示することができません。
この拡張プラグインでは、画像格納フォルダを任意に指定できるためsrc/utils.tsのgetWebviewOptionsメソッド内にて以下のようなwebview.optionsを生成して活用するようにしています。
// src/utils.ts より抜粋
// webview.options生成
export function getWebviewOptions(
extensionUri: vscode.Uri,
configImagePath: string | undefined
): vscode.WebviewOptions & vscode.WebviewPanelOptions {
const webviewOptions: vscode.WebviewOptions = {
// Webview で JavaScript を有効にする
enableScripts: true,
// ローカルリソースの画像を読み込むため必要なアクセス制御を追加
localResourceRoots: (configImagePath) ?
[vscode.Uri.joinPath(extensionUri, 'media'), vscode.Uri.file(configImagePath)] : [vscode.Uri.joinPath(extensionUri, 'media')]
};
return webviewOptions;
}エクスプローラーにWebview表示
エクスプローラーに上記のようなWeviewを表示するには、package.jsonの設定と、WebviewViewProviderを利用します。
まずは以下のようにpackage.jsonのcontributes.viewsに設定をします。
詳細:https://code.visualstudio.com/api/references/contribution-points#contributes.views
// package.json より抜粋
"contributes": {
"views": {
"explorer": [
{
"type": "webview",
"id": "viewExplorerMyLoveCat",
"name": "My Love Cat"
}
]
},この情報は、explorerに追加する名前、追加するタイプ、関連Idとシンプルなものです。
次に、ランダムに猫画像を表示するHTMLを含んだWebviewViewProvider（＝MyLoveCatViewProvider）を用意します。
// src/MyLoveCatViewProvider.ts
import * as vscode from 'vscode';
import { getHtmlForWebview, getWebviewOptions } from './utils';
/**
* エクスプローラーに表示するためのクラス
*/
export class MyLoveCatViewProvider implements vscode.WebviewViewProvider {
public static currentProvider: MyLoveCatViewProvider | undefined;
public configImagePath: string | undefined;
private _view?: vscode.WebviewView;
// コンストラクタ(初期パスを設定)
constructor(
private readonly _extensionUri: vscode.Uri,
configImagePath: string | undefined
) {
this.configImagePath = configImagePath;
MyLoveCatViewProvider.currentProvider = this;
}
// 最初に表示する際に呼び出される
public resolveWebviewView(
webviewView: vscode.WebviewView,
context: vscode.WebviewViewResolveContext,
_token: vscode.CancellationToken,
) {
this._view = webviewView;
webviewView.webview.options = getWebviewOptions(this._extensionUri, this.configImagePath);
this._update();
}
// 表示内容を更新する
private _update() {
if (this._view) {
const webview = this._view.webview;
this._view.webview.html = getHtmlForWebview(webview, this._extensionUri, this.configImagePath);
}
}
// 設定画面から画像フォルダパスを更新された場合に呼び出される
public static updateConfigImagePath(configImagePath: string | undefined) {
if (MyLoveCatViewProvider.currentProvider) {
if (MyLoveCatViewProvider.currentProvider._view) {
// webviewのオプションを更新
const webviewOptions: vscode.WebviewOptions = getWebviewOptions(MyLoveCatViewProvider.currentProvider._extensionUri, configImagePath);
MyLoveCatViewProvider.currentProvider._view.webview.options = webviewOptions;
}
MyLoveCatViewProvider.currentProvider.configImagePath = configImagePath;
}
}
// コマンドから「ランダム表示」を実行された場合に呼び出される
public static randomUpdate() {
if (MyLoveCatViewProvider.currentProvider) {
MyLoveCatViewProvider.currentProvider._update();
return;
}
}
}上記はWebviewViewProviderを継承して作成していますが、一番重要なメソッドは「resolveWebviewView」です。
resolveWebviewViewは最初にWebviewが表示される時に呼び出されます。
この拡張プラグインでは、設定値に変更ある時に情報を反映させたり、強制的に表示をランダムで切り替えできるようにするため、メソッドupdateConfigImagePath、randomUpdateを追加しています。
最後に、vscode.window.registerWebviewViewProviderでWebviewViewProviderを検証したMyLoveCatViewProviderを登録することでエクスプローラーに表示できるようになります。
// src/extension.tsより抜粋
context.subscriptions.push(
vscode.window.registerWebviewViewProvider(
'viewExplorerMyLoveCat',
new MyLoveCatViewProvider(context.extensionUri, configImagePath))
);この時に指定する「viewExplorerMyLoveCat」はユニークな識別子です。package.jsonのcontributes.views.explorer.Idに指定したIdと同じIdを指定してください。
エディタにWebview表示
エディタにWeviewを表示するには、vscode.window.createWebviewPanelとコマンドを利用します。
以下のようにvscode.window.createWebviewPanelでパネルを作成して、パネルのwebviewにHTMLを埋め込むことでエディタにWebviewを表示できます。
// src/MyLoveCatViewPanel.tsより抜粋
const webviewOptions:vscode.WebviewOptions = getWebviewOptions(extensionUri, configImagePath);
const panel = vscode.window.createWebviewPanel(
'viewPanelMyLoveCat', // パネル識別子
'My Love Cat', // パネルタイトル
vscode.ViewColumn.One, // パネル表示位置
webviewOptions, // Webviewオプション
);
// 省略
panel.webview.html = getHtmlForWebview(panel.webview, extensionUri, configImagePath);この拡張プラグインでは、MyLoveCatViewPanelクラスを用意しました。
// src/MyLoveCatViewPanel.ts
import * as vscode from 'vscode';
import { getHtmlForWebview, getWebviewOptions } from './utils';
/**
* エディタに表示するためのクラス
*/
export class MyLoveCatViewPanel {
public static currentPanel: MyLoveCatViewPanel | undefined;
public configImagePath: string | undefined;
private readonly _panel: vscode.WebviewPanel;
private readonly _extensionUri: vscode.Uri;
private _disposables: vscode.Disposable[] = [];
public static createOrShow(extensionUri: vscode.Uri, configImagePath: string | undefined) {
// すでにパネル表示している場合は、フォーカスを当て再表示させる
if (MyLoveCatViewPanel.currentPanel) {
MyLoveCatViewPanel.currentPanel._panel.reveal(undefined);
return;
}
// パネル作成
const webviewOptions:vscode.WebviewOptions = getWebviewOptions(extensionUri, configImagePath);
const panel = vscode.window.createWebviewPanel(
'viewPanelMyLoveCat', // パネル識別子
'My Love Cat', // パネルタイトル
vscode.ViewColumn.One, // パネル表示位置
webviewOptions, // Webviewオプション
);
MyLoveCatViewPanel.currentPanel = new MyLoveCatViewPanel(panel, extensionUri, configImagePath);
}
// コンストラクタ
private constructor(
panel: vscode.WebviewPanel,
extensionUri: vscode.Uri,
configImagePath: string | undefined
) {
this.configImagePath = configImagePath;
this._panel = panel;
this._extensionUri = extensionUri;
this._update();
// パネルが破棄された時のリソース解放処理を登録
this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
}
// パネルを閉じた時に呼び出される (クリーンアップ処理追加)
public dispose() {
MyLoveCatViewPanel.currentPanel = undefined;
this._panel.dispose();
while (this._disposables.length) {
const x = this._disposables.pop();
if (x) {
x.dispose();
}
}
}
// 表示内容を更新する
private _update() {
const webview = this._panel.webview;
this._panel.webview.html = getHtmlForWebview(webview, this._extensionUri, this.configImagePath);
}
// 設定画面から画像フォルダパスを更新された場合に呼び出される
public static updateConfigImagePath(configImagePath: string | undefined) {
if (MyLoveCatViewPanel.currentPanel) {
// 画像フォルダパスを更新
const webviewOptions:vscode.WebviewOptions = getWebviewOptions(MyLoveCatViewPanel.currentPanel._extensionUri, configImagePath);
MyLoveCatViewPanel.currentPanel._panel.webview.options = webviewOptions;
MyLoveCatViewPanel.currentPanel.configImagePath = configImagePath;
}
}
// コマンドから「ランダム表示」を実行された場合に呼び出される
public static randomUpdate() {
if (MyLoveCatViewPanel.currentPanel) {
MyLoveCatViewPanel.currentPanel._update();
return;
}
}
}MyLoveCatViewPanel.createOrShowをコマンドから実行される事でエディタにWebViewパネルを追加表示します。既にWebViewパネルが存在する場合はフォーカスを当てるのみとしました。
また、MyLoveCatViewProviderの時と同様に、設定値に変更ある時に情報を反映させたり、強制的に表示をランダムで切り替えできるようにするため、メソッドupdateConfigImagePath、randomUpdateを追加しています。
コマンド定義
この拡張プラグインでは、以下の3つのコマンドを追加しています。
それぞれのコマンド実行時は、以下のような機能が動くようにしました。
Explorer View：エクスプローラーにWebview表示
Panel View：パネルにWebview表示
Image Random Update：Webview表示をランダム切替
これらのコマンドはpackage.jsonのcontributes.commandsで定義します。
詳細: https://code.visualstudio.com/api/references/contribution-points#contributes.commands
// package.json より抜粋
"contributes": {
"commands": [
{
"command": "vscode-image-import.viewExplorerMyLoveCat",
"title": "MyLoveCat: Explorer View "
},
{
"command": "vscode-image-import.viewPanelMyLoveCat",
"title": "MyLoveCat: Panel View"
},
{
"command": "vscode-image-import.viewMyLoveCatRandom",
"title": "MyLoveCat: Image Random Update",
"icon": {
"dark": "media/icon/dark-reload.svg",
"light": "media/icon/light-reload.svg"
}
}
]コマンドが実行された時は、vscode.commands.registerCommandを活用して実行時の処理を定義します。
// src/extension.tsより抜粋
//==========================================================================
// [MyLoveCat: Explorer View] コマンド実行時
// explorer の表示が隠れていた場合は展開して表示
//==========================================================================
context.subscriptions.push(
vscode.commands.registerCommand('vscode-image-import.viewExplorerMyLoveCat', () => {
// すでにエクスプローラーには情報を表示しているけど、フォーカスを当てる感じ
// 隠れていたら展開して表示するしエクスプローラーを閉じていたら開く
vscode.commands.executeCommand('viewExplorerMyLoveCat.focus');
})
);
//==========================================================================
// [MyLoveCat: Panel View] コマンド実行時
// エディタに表示
//==========================================================================
context.subscriptions.push(
vscode.commands.registerCommand('vscode-image-import.viewPanelMyLoveCat', () => {
MyLoveCatViewPanel.createOrShow(context.extensionUri, configImagePath);
})
);
//==========================================================================
// [MyLoveCat: Image Random Update] コマンド実行時
// 画像をランダムに差し替え
//==========================================================================
context.subscriptions.push(
vscode.commands.registerCommand('vscode-image-import.viewMyLoveCatRandom', () => {
// 描画されている猫をrandomで描画切り替え
MyLoveCatViewPanel.randomUpdate();
MyLoveCatViewProvider.randomUpdate();
})
);これまで作成したMyLoveCatViewProviderやMyLoveCatViewPanelを、このように連携する事で、最愛の猫画像をVSCode上で眺めることができるようになります。
設定値の定義と取得と更新
この拡張プラグインでは、以下の設定値を定義しています。
Image Path：画像フォルダパス
Interval Seconds：ランダム表示の更新間隔（秒）
これら設定値はpackage.jsonのcontributes.configurationで定義します。
詳細: https://code.visualstudio.com/api/references/contribution-points#contributes.configuration
// package.json より抜粋
"contributes": {
"configuration": [
{
"type": "object",
"title": "vscode-image-import",
"properties": {
"vscode-image-import.imagePath": {
"type": "string",
"default": "",
"description": "最愛の猫画像が含まれているフォルダを指定してください。（未指定の場合は内部保存画像を利用します）"
},
"vscode-image-import.intervalSeconds": {
"type": "number",
"default": 10,
"description": "ランダム表示の更新間隔（秒）"
}
}
}
],設定値を利用したいところで、vscode.workspace.getConfigurationを活用して値を取得します。
// src/extension.tsより抜粋
let intervalSeconds = vscode.workspace.getConfiguration().get('vscode-image-import.intervalSeconds', 10);
let configImagePath: string | undefined = vscode.workspace.getConfiguration().get('vscode-image-import.imagePath');また、拡張プラグイン稼働中に設定値が変更されることがあります。
その場合はonDidChangeConfigurationとaffectsConfigurationを活用します。
// src/extension.tsより抜粋
context.subscriptions.push(vscode.workspace.onDidChangeConfiguration(e => {
if (e.affectsConfiguration('vscode-image-import.intervalSeconds')) {
// ランダム表示の更新間隔（秒）に変更あり
intervalSeconds = vscode.workspace.getConfiguration().get('vscode-image-import.intervalSeconds', 10);
clearInterval(interval);
interval = setInterval(updateRandomDisplay, intervalSeconds * 1000);
} else if (e.affectsConfiguration('vscode-image-import.imagePath')) {
// 画像が含まれているフォルダに変更あり
configImagePath = vscode.workspace.getConfiguration().get('vscode-image-import.imagePath');
MyLoveCatViewPanel.updateConfigImagePath(configImagePath);
MyLoveCatViewProvider.updateConfigImagePath(configImagePath);
}
}));エクスプローラーのメニュー定義
この拡張プラグインでは、エクスプローラーのタイトルバーの部分にメニューを追加しています。
今回は、こちらのアイコンをクリックするとランダムに画像を差し替える「vscode-image-import.viewMyLoveCatRandom」コマンドを実行するメニューです。
このメニューコマンドはpackage.jsonのcontributes.menusで定義します。
詳細: https://code.visualstudio.com/api/references/contribution-points#contributes.menus
// package.json より抜粋
"contributes": {
"menus": {
"view/title": [
{
"command": "vscode-image-import.viewMyLoveCatRandom",
"when": "view == viewExplorerMyLoveCat",
"group": "navigation@1"
}
]
},おわりに
いかがでしたか？今回は抜粋して解説しましたが詳細はGithubのソースコードをご覧ください！
このプラグインを期待通りに動かすまで、本当に色々と試行錯誤しました。特に手こずったのは、VSCodeのコンテンツセキュリティポリシーとvscode.WebviewOptionsのlocalResourceRootsの使い方です。画像が表示されない原因を探るのが一苦労でしたが、これらの問題を克服する中で、私の技術的理解は大きく深まりました。ちなみに、これらの問題はvscode.Webviewに関する公式ドキュメントをきちんと読み込めばすぐに解決策が見つかるものでしたので、少し反省しました。
デバッグでは、「Developer: Open Webview Developer Tools」が大活躍。このツールのおかげで、問題の特定と修正がぐんと楽になりました。WebViewを使うプラグイン開発では、このデバッグツールが必須ですね。
今後の予定としては、Google Photoとの連携を検討中です。認証問題や写真の表示方法など、新たな挑戦が待っています。これらの課題にチャレンジし、プラグインをさらに充実させることが楽しみです。
（成功したら、また記事にしますね！）
それでは、私の経験が皆さんのお役に立てば幸いです。ではでは！