.vscode/tasks.json でタスクの自動実行ができるようだったので、それで設定。

「決まったディレクトリに移動してコマンドを打つ」をしたかったので調べたところ、cwd で作業ディレクトリを指定できるようだったのでその方法でやることに。また2種類打ちたいコマンドがあったので、それは並行処理で行う形に。

プロジェクトのルートに .vscode/tasks.json を作り、以下のように記述。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "startup",
      "dependsOn": ["dev", "gradle"],
      "runOptions": { "runOn": "folderOpen" }
    },
    {
      "label": "dev",
      "type": "shell",
      "command": "npm run dev",
      "options": {
        "cwd": "${workspaceFolder}/htdocs/test_2022"
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "gradle",
      "type": "shell",
      "command": ".\\test.bat",
      "options": {
        "cwd": "${workspaceFolder}/hoge"
      },
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

毎回打ち込むのは地味に面倒だったので、これでラクになりました。

ここ数年はできるだけWordPressの拡張機能を減らして安定＆軽量で～と思ってたんですが、ソースコードのcopyを範囲選択してコピーするの面倒だなと思ったので、久しぶりに拡張機能を追加しました。

普通に便利だな～と思ったのでメモかねて。

Copy Anything to Clipboard for WordPress – Copy Button, Copy Text & Copy Code – WordPress プラグイン | WordPress.org 日本語

Copy Anything to Clipboard is the #1 WordPress copy-to-clipboard plugin trusted …

ja.wordpress.org

上記のようなCopyボタンがソースコードの右上に表示されるようになりました。

1. WSL、Ubuntu のインストール

Windows に Linux 環境を作ろうという場合 Cygwin で頑張る記憶があったんですが、調べたところ、今は「WSL（Windows Subsystem for Linux）」というものがあるらしい。今回は WSL で環境を作ることに。

WSL のインストールには以下 2 つの方法があるとのこと。

• WSLコマンドを使ったインストール（従来）
• Microsoft Store 経由でインストール（今後こちら推奨らしい）

参考）

atmarkit.itmedia.co.jp

推奨とされてる Microsoft Store 経由でインストールすることに。

Microsoft Store で「wsl」と検索し、「Windows Subsystem for Linux」と「Ubuntu」をインストール。

インストールが終わったら、Microsoft Store の Ubuntu ページの「開く」ボタンを押す。

1-1. エラーが出てしまったら

※エラーが出ない場合は「1-2. エラーが出ない状態になったら」に飛んで OK。

黒い画面として Ubuntu が開いて、本来ならここで Ubuntu のユーザー名とパスワードを設定するはず…なのだがエラーが出てしまって進まず。エラー内容は次のようなもの。

Installing, this may take a few minutes...
WslRegisterDistribution failed with error:～～以下中略～～

Press any key to continue...

私の場合、仮想マシンプラットフォームが有効化されていないことが原因だった。なお、仮想化支援機能（Intel VT-x／AMD-V）が BIOS で無効になってる場合にもこのようなエラーが出るらしい。

1-1-1. 仮想マシンプラットフォームの有効化方法

[コントロールパネル] > [プログラムと機能] > 左ナビゲーション内の [Windows の機能の有効化または無効化] をクリック > 「仮想マシンプラットフォーム」にチェックをつけて OK ボタンを押す。

最後にマシンを再起動。

1-2. エラーが出ない状態になったら

マシン再起動後に改めて Ubuntu を開く。

「Enter new UNIX username:」とユーザー名を聞かれるので入力して Enter キーを押す、続いてパスワードも聞かれるので入力して Enter キーを押す。

1+. Windows Terminal を入れておくと楽

ここからの作業、PowerShell と Ubuntu の切り替え（黒い画面の切り替え）が多くあるので Windows Terminal を使うとタブで切り替えられたり色々便利です。

2. Ubuntu に色々入れていく

WSL を使用して Linux GUI アプリを実行する | Microsoft Learn

WSL が Linux GUI アプリの実行をサポートする方法について説明します。

learn.microsoft.com

上記ページを参考にしつつ、作業を進めた。Windows11 の PowerShell と、Ubuntu の bash、2 つの黒い画面を使っていく。間違えて反対に打ち込むとエラーになるので注意。

Ubuntu を立ち上げ、ディストリビューション内のパッケージを更新する。

sudo apt update

…が、もうこの時点でエラーが出た。最初気づかずに 3 時間くらいやり直してしまった。

2-1. Temporary failure resolving エラーが出た場合

エラー文は「Temporary failure resolving ‘archive.ubuntu.com’」。このエラー文で検索したところ以下の記事を発見。

名前解決ができていないことが原因とのこと。

PowerShell で以下のように打ち込んで自分の DNS サーバーを調べる。

ipconfig.exe /all

いっぱい色々な情報が表示されるので、「DNS サーバー」と書いてある部分を探す。

私の場合こんなかんじで、 192.168.11.1 が DNS サーバーの IP アドレスだった。

2-1-1. /etc/resolv.conf に nameserver を書き込む

/etc/resolv.conf を開く

sudo nano /etc/resolv.conf

次に以下の内容を追記する。 192.168.11.1 の部分は各自の DNS サーバー IP アドレスにする。もしすでに nameserver～という行があったら、削除してから追記する。

保存は Ctrl+o → Enter 。閉じるときは Ctrl+x 。

ここではエディタとして nano を使っていますが、Vim が良い！という方は、コマンドの nano 部分を vim に変更しても◯。（Vim, nano に限らずエディタはなんでも OK 。）

nameserver 192.168.11.1

これでエラーが出なくなるはずなので、先程エラーがでてしまった以下の内容を打ち込んでみる。

sudo apt update

問題なく進んだら OK。

2-1-2. /etc/resolv.conf の内容を永続化させる

先程設定した etc/resolv.conf の内容は WSL によって上書きされてしまい設定が変わってしまうことがあるので、変更されないよう永続化させる設定をしておく。

まずは /etc/wsl.conf を開く。

sudo nano /etc/wsl.conf

以下の内容を追記する。

[network]
generateResolvConf = false

この設定が効いた状態にするため、一旦 PowerShell で以下の内容を打ち込み WSL を再起動。

wsl --shutdown

/etc/resolv.conf の中身が上書きされてしまっているかもしれないため、「2-1-1. /etc/resolv.conf に nameserver を書き込む」の内容を再度行って設定する。

参考）

WSLからインターネットに接続できないときは/etc/resolv.confを変更する

私は普段、WSLでアプリ開発やデータ解析をしています。 そのときたまに、Windowsのブラウザは普通に使えるのに、WSLからは極端にインストールやダウンロード…

blog.cosnomi.com

2-2. アプリのインストール

先程も見ていた以下のページを改めて開き、色々なアプリをインストール。

私は Google Chrome、X11 アプリ、Nautilus を入れました。

ここでインストールしたアプリは、以下の 2 つの方法で起動できる。

• Ubuntu にコマンドを打ち込んで起動
• Windows のアプリ一覧の「Ubuntu」部分から起動

Linux 向け Google Chrome

1. ディレクトリを temp フォルダーに変更
   

   cd /tmp

2. wget を使用してそれをダウンロード
   

   wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

3. 現在の安定したバージョンを取得
   

   sudo dpkg -i google-chrome-stable_current_amd64.deb

4. パッケージを修正
   

   sudo apt install --fix-broken -y

5. パッケージを構成
   

   sudo dpkg -i google-chrome-stable_current_amd64.deb

Nautilus

sudo apt install nautilus -y

X11 アプリ

sudo apt install x11-apps -y

それぞれ起動できるか確認して、問題なければ OK。

3. 日本語化と日本語入力できるようにする

デフォルトでは日本語に対応していないので、先程インストールした Chrome で日本語サイトを見ると日本語部分が文字化けする。

そのため日本語対応が必要。以下のサイトを参考に対応しました。

4. Windows / Ubuntu のファイルにアクセスするには

4-1. Windows から Ubuntu のファイルにアクセスする

Windows で \\wsl$\ にアクセスするとディストリビューションごとのフォルダがある。今回は「Ubuntu」フォルダ。

4-2. Ubuntu から Windows のファイルにアクセスする

Ubuntu で cd /mnt/c/ にアクセスすると Windows の C ドライブにアクセスできる。

参考）

WSL2のインストールを分かりやすく解説【Windows10/11】 | チグサウェブ

Widows上でLinuxが使えるWSL2をインストールしてみました。WindowsでLinuxコマンドが使えますし、開発環境としても便利に使えます。

chigusa-web.com

毎回ターミナル起動するたびに環境変数を打ち込みなおすのは面倒なので、direnv を導入し以下のように設定しました。作業環境は WSL + Ubuntu です。

direnv のインストール

sudo apt install direnv

フックを追加

~ にある .bashrc に以下の内容を追記する。

eval "$(direnv hook bash)"

設定を読みこみなおす

source ~/.bashrc

direnv の有効化

.direnv を作成・編集した後は .direnv が無効になっているので、1 回以下の内容を打ちこんで有効化しておく。

direnv allow

参考

• direnvを活用して楽々環境変数管理【Ubuntu】- Abillyz
• direnvを使おう – Qiita
• direnvでディレクトリ毎に設定を切り替える

.envrc ファイルの作成

環境変数を設定したいディレクトリに、 .envrc ファイルを作成し、そこに環境変数を記述する。

.envrc を Git にコミットしないようにする

.gitignore に .envrc を追加する。

または、git-secrets を使うのもあり。

参考

• git-secrets
• git-secretsを導入してみた
• クラウド破産しないように git-secrets を使う – Qiita
• git-secretsを使用して、Gitリポジトリをスキャンして機密情報やセキュリティ上の問題がないか調べる – AWS 規範的ガイダンス

確認する

Ubuntu を開いて確認する。以下のように direnv: loading～ とあれば OK。

そのためワークスペース切り替えがストレスになっていたので他に代替え案がないか探したところ、Project Manager という同じようなワークスペース切り替え拡張機能があり、試したところこちらは Cursor でも問題なく動くようだったので乗り換えた。

他にも Project Dashboard という似たようなことができそうな拡張機能があったが、使い勝手が Project Manager のほうが好みかな～と思い、今回は Project Manager を使うことに。

参考）

• VS Codeのワークスペースやフォルダーを簡単に切り替える拡張機能【Project Manager】 | ウェブ倉庫
• VS Code のワークスペースをちゃんと使いたい #初心者 – Qiita

# 指示
- {ソースコード}のt.getの処理をhttps.getになおしてください
- ◯◯を利用してください
- {ソースコード}はJavaScriptです

# ソースコード
"""
ここにソースコードを書く
"""

指示はまとめて箇条書きにして、ソースコードは最後にまとめて書く形にするとしっかり伝わって良い感じになる。

Astro
.astro ファイルの言語サポート

Auto-Open Markdown Preview
Markdown をプレビューで表示してくれる

Auto Rename Tag
⇨VSCodeに内臓されるようになりsetting.jsonに以下を書いておけばOKになった（インストール不要）

{
…,
"editor.linkedEditing": true,
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
…,
}

Claude Code for VS Code
Claude Code を使えるように

Codex – OpenAI’s coding agent – Visual Studio Marketplace
Codex を使えるように

Container Tools – Visual Studio Marketplace
コンテナ化されたものを扱うために Docker など

CSS Peek 2026.01.29追加
HTMLの CSS 部分に Ctrl+hover することで詳細を見たり、F12 で CSS の該当箇所にジャンプできる

CSV to Table – Visual Studio Marketplace
CSV を table 表示

gettex 2024.02.09追加
.po ファイルなどのハイライト

Git Graph
Git リポジトリの履歴を表示したり、Gitアクションを実行できたりする

GitHub Actions
VS Code から GitHub Actions を操作

GitHub Copilot

GitHub Pull Requests 2025.07.08追加
プルリクを作成したり、確認したりできる

GitLens — Git supercharged
誰がこの行のコードを書いたのかや、編集履歴が表示できたりする

HTML CSS Support
HTML の id と class 属性の補完

indent-rainbow
インデントが分かりやすいよう色をつけてくれる

Insert <br> Tag
[Shift+Enter] で <br> が入れられる

Japanese Language Pack for Visual Studio Code
VS Code を日本語化

JSON to CSV – Visual Studio Marketplace
JSON を CSV に

Live Server
ローカルにサーバーを立てて表示確認できる　⇨脆弱性が発見され更新されてないので削除

Markdown PDF – Visual Studio Marketplace
Markdown のファイルを PDF に書き出し

Output Colorizer
出力/デバッグ/拡張パネルと *.log をカラー化して可読性をあげる

Project Manager
ワークスペースの切り替えを簡単にできるように

Python Debugger
Python のデバッグを debugpy でサポートする

Quokka.js
JavaScript / TypeScript を実行したりできる

Rainbow CSV
CSV をカラー化して可読性をあげる

vscode-pdf – Visual Studio Marketplace
VSC で PDF 開けるように

Windsurf Plugin (formerly Codeium): AI Coding Autocomplete and Chat for Python, JavaScript, TypeScript, and more – Visual Studio Marketplace
旧名：Codeium: AI Coding Autocomplete and Chat for Python, Javascript, Typescript, Java, Go, and more
無料の AI コード補完拡張、GitHub Copilot と迷ったけれど今のところ Codeium が好み

Workspace Explorer
ワークスペースの切り替えを簡単にできるように
⇨2025/07/12 Cursorで動かないので Project Manager に乗り換え

WSL – Visual Studio Marketplace
WSL を使うために

zenkaku
全角スペースを表示

Dev Containers – Visual Studio Marketplace
Docker のコンテナ使うために

以下、検討中の拡張機能

HTML End Tag Labels
HTMLタグの終了タグの後ろにコメントを表示して分かりやすくする

Vim
Vimぽい操作ができるようになる

0. Node.js のバージョンを確認しておく

VSCode でターミナルを開く（Ctrl + J か Ctrl + @ ）。

node -v で Node.js のバージョンを確認。

1. launch.json を作成する

VSCodeのサイドメニュー [実行とデバッグ] をクリックし、「launch.json ファイルを作成します」をクリック。

ワークスペース下にある .vscode に launch.json が作られる。

2. launch.json に設定を書き込む

launch.json に以下のように書く。

"runtimeVersion" 部分には利用したい Node.js のバージョンを書く。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
        "type": "node",
        "runtimeVersion": "14.19.1",
        "request": "launch",
        "name": "Node: Current File (with FNM)",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen",
        "program": "${file}",
        "runtimeExecutable": "fnm",
        "runtimeArgs": [
            "exec",
            "--using-file",
            "--",
            "node"
        ],
        "restart": true
        }
    ]
}

3. 実行する

VSCodeを再起動し、VSCodeのサイドメニュー [実行とデバッグ] をクリック。先程作ったものがプルダウンメニューにあるので選択し、三角部分を押して実行。

VSCodeの下部の色がオレンジになり実行してる内容が表示される。

4. Node.js のバージョンを確認する

node -v で Node.js のバージョンを確認。

設定したバージョンになっていれば OK。

5. 止めるには

VSCodeのソースコード編集画面右上あたりに表示されている下記画像の、四角ボタンを押す。

参考

• https://code.visualstudio.com/updates/v1_81#_debug
• https://github.com/microsoft/vscode-js-debug/issues/847
• fnmに切り替えたらVSCodeのF5実行できなくなった

上記の内容のメモ。

GoogleカレンダーのIDをコピーする

通知用カレンダーの上にカーソルを持っていくと出てくる三点の部分をクリック。

表示されるメニューの [設定と共有] をクリック

「カレンダーの統合」部分の「カレンダーID」をコピーして控えておく。ここで控えたカレンダーIDは後で使います。

Slackアプリの作成

slack api の Your Apps から、「Create New App」をクリック。

「From scratch」をクリック。

「App Name」にわかりやすい任意の名前を入れて、「Pick a workspace to develop your app in:」で使いたいワークスペースを選び、最後に「Create App」ボタンを押す。

アプリが作成されるので、設定していきます。

[Settings] > [Basic Information] の中にある、「Add features and functionality」をクリック。

「Incoming Webhooks」をクリック。

「Activate Incoming Webhooks」の右にあるボタンをクリックして「On」にする。

すると下部に表示が増えるので「Add New Webhook to Workspace」をクリック。

Slackに接続するための権限リクエストの画面が出るので、投稿先チャンネルを選び、「許可する」ボタンを押す。

「Webhook URL」の部分に今作った Webhook URL があるので、「Copy」ボタンを押して控えておく。この Webhook URL は後で使います。

アイコンなどを設定したい場合

[Settings] > [Basic Information] のページ下部にある「Display Information」の「App icon & Preview」を設定するとアイコンを設定することができる。説明が必要であれば「Short description」や「Long description」を設定。

Googleスプレッドシートを作成設定

Googleスプレッドシートを作成して、名前をわかりやすいものにしておく。「Slack_remind通知用」など。

[拡張機能] ＞[AppScript] をクリック。

コード.gs に以下のように設定する。変更箇所は以下の3つ。

• 先程控えておいたWebhookURLを記入
• 先程控えておいたカレンダーのIDを記入
• 何日前にリマインドするかを設定

// ポストするSlackチャンネル
// ※SlackAppで設定したWebhookURL
var postUrl = '先程控えておいたWebhookURL';

// 何日前にリマインドするか？
// var day = 1; // 1日前
var days = [1, 7]; // 1日前と7日前

// チェックするカレンダーのID
var calendarId = '先程控えておいたカレンダーのID';


function myFunction() {

  var pushMessage = "リマインド予定をお知らせするよ\n";
  var remindNum = 0;
 
  for (var i = 0; i < days.length; i++) {
    var day = (days[i]);
    var events = getEvents(day);
    if (events != "") {
      var message = makeMessage(events, day);
      pushMessage += message;
      remindNum ++;
    }
  }

  // Logger.log("1\n" + pushMessage);
  Logger.log("remind数：" + remindNum);

  if (remindNum > 0) {
    sendHttpPost(pushMessage);
  }

}

// イベント取得
function getEvents(day) {

  var searchStr = '';
  var events = [];
  var targetDate = new Date();
  targetDate.setDate(targetDate.getDate()+day);
  var options = {
    search: searchStr
  }

  var calendar = CalendarApp.getCalendarById(calendarId);
  var events = calendar.getEventsForDay(targetDate, options);


  var no_reservation_msg = '';

  return events;
}

// function postToSlack(events) {
function makeMessage(events, day) {

  var message = '';
  message += '▼予定の' + day + '日前\n';

  for (var i in events) {
    var title = events[i].getTitle();
    var start = events[i].getStartTime();
    var location = events[i].getLocation();
    var description = events[i].getDescription();


    var start_month = start.getMonth()+1;
    var WeekChars = [ "日", "月", "火", "水", "木", "金", "土" ];
    var start_day = WeekChars[start.getDay()]; // 曜日
    var start_time = start.getHours() + ':' + pad(start.getMinutes());
    var start_date = start.getDate(); //日

    message += start_month.toString() + '月' + start_date.toString() + '日（' + start_day + '）：';
    message += title + '\n';
  
  }
  return message;
}

function sendHttpPost(message)
{
    var jsonData =
    {

         "text" : message,
         "link_names": 1
    };
    var payload = JSON.stringify(jsonData);
    var options =
    {
        "method" : "post",
        "contentType" : "application/json",
        "payload" : payload
    };

    UrlFetchApp.fetch(postUrl, options);
}

function pad(n){return n<10 ? '0'+n : n}

テスト実行する。メニューの「実行」をクリック。

問題なく動けば、先程指定したSlackのチャンネルに以下のように投稿される。

実行トリガーの設定

Apps Script の左側にあるメニューの [トリガー] をクリック。

ページ右下にある「トリガーを追加」ボタンをクリック。

• 「実行する関数を選択」：「myFunction」を選択
• 「イベントのソースを選択」：「時間主導型」を選択
• 「時間ベースのトリガーのタイプを選択」：「日付ベースのタイマー」を選択
• 「時刻を選択」：任意の時間を設定する。設定した時間にSlackに通知がいく

上記を設定したら、忘れず右下の「保存」ボタンを押す。

これで毎日指定の時間に通知がSlackに飛ぶようになりました。
※該当するGoogleカレンダーのスケジュールがない場合は通知は飛びません。

おわり！

以下、C:\Users\◯◯\.ssh など保存してある ssh の公開鍵を利用する場合

1 . WinSCPで「転送プロトコル」を「SFTP」に、「ホスト名」「ユーザー名」を入力し、「設定」ボタンを押す。

2 . 「高度なサイトの設定」が開いたら、[SSH] > [認証] の中の「認証条件」部分にある「秘密鍵」の「…」を押す。

3 . 選びたい鍵ファイルが表示されていない場合は「すべての秘密鍵ファイル」にして、選びたい鍵ファイルを選択する。

4 . 「秘密鍵 OpenSSH を PuTTY 形式に変換しますか？」とでたら「OK」を押す。

5 . 変換された秘密鍵を選択して終わり