かすみん日記

暇なときに何か喋ります

フロントエンドで完結するテンプレートエンジンを作った?【JavaScript】

テンプレート言語は便利だけど、いちいちサーバーでレンダリングしないと使えないのがアレ。

もちろん、サーバー側で動的にHTMLを作るからこそ意味があるのだが、APIでデータ(今日の天気とか?)を取ってきて表示をif文で分岐させる、みたいな使い方ならフロント側だけで十分だなと思った。

というわけで、フロントエンドで完結するテンプレートエンジンを作った。

と言っても、変数定義と変数展開の機能しか実装していないので、ただのおもちゃです。 if文も無いよ。

フロントではJavaScriptしか動かないので、それで作りました。

ソースコード

github.com

使い方

nyaa.jsを読み込む:

<script src="./nyaa.js"></script>

読み込んだHTML内で、変数の定義と展開ができる:

<!-- 変数定義 -->
{% assign nyaa = にゃあ! %}

<!-- 変数展開 -->
{{ nyaa }}

その他の機能は皆無です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./nyaa.js"></script>
  <title>テストにゃ</title>
</head>
<body>
  {% assign hello = 'こんちわ!' %}
  {% assign good_night = "おやすみ" %}
  {% assign url = https://google.com %}
  {% assign nyaa = にゃあ %}
  <h1>テスト</h1>
  <p>ほげ</p>
  <p>にゃあ</p>
  <p>{{ hello }}</p>
  <p>{{ hello }}で始まり{{ good_night }}で終わる。</p>
  <p>{{ good }}</p>
  <p><a href="{{ url }}">Google</a>です。</p>
</body>
</html>

参考

developer.mozilla.org

developer.mozilla.org

koseki.hatenablog.com

qiita.com

フロントエンドで完結するテンプレートエンジンを作った?【JavaScript】

テンプレート言語は便利だけど、いちいちサーバーでレンダリングしないと使えないのがアレ。

もちろん、サーバー側で動的にHTMLを作るからこそ意味があるのだが、APIでデータ(今日の天気とか?)を取ってきて表示をif文で分岐させる、みたいな使い方ならフロント側だけで十分だなと思った。

というわけで、フロントエンドで完結するテンプレートエンジンを作った。

と言っても、変数定義と変数展開の機能しか実装していないので、ただのおもちゃです。 if文も無いよ。

フロントではJavaScriptしか動かないので、それで作りました。

ソースコード

github.com

使い方

nyaa.jsを読み込む:

<script src="./nyaa.js"></script>

読み込んだHTML内で、変数の定義と展開ができる:

<!-- 変数定義 -->
{% assign nyaa = にゃあ! %}

<!-- 変数展開 -->
{{ nyaa }}

その他の機能は皆無です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./nyaa.js"></script>
  <title>テストにゃ</title>
</head>
<body>
  {% assign hello = 'こんちわ!' %}
  {% assign good_night = "おやすみ" %}
  {% assign url = https://google.com %}
  {% assign nyaa = にゃあ %}
  <h1>テスト</h1>
  <p>ほげ</p>
  <p>にゃあ</p>
  <p>{{ hello }}</p>
  <p>{{ hello }}で始まり{{ good_night }}で終わる。</p>
  <p>{{ good }}</p>
  <p><a href="{{ url }}">Google</a>です。</p>
</body>
</html>

よくつかうMySQL 8.0コマンド備忘録

書きかけです(ということにして質の低さの言い訳に)。

環境

HomebrewでMySQL 8.0をインストールした。

% mysql --version
mysql  Ver 8.0.30 for macos12.4 on x86_64 (Homebrew)

OSはmacOS Monterey。

今日は2022-08-13。

インストール・初期設定

MySQL 8.0のインストールや初期設定はこちらにまとめた。

geniusium.hatenablog.com

サーバー起動・終了

mysql.server start
mysql.server stop

または

brew services start mysql
brew services stop mysql

対話MySQL起動・終了

まず、サーバーを起動している必要がある。

ユーザーuser_nameでデータベースdb_nameにログイン:

mysql --user=user_name --password db_name
## このあとパスワードを入力

上の略記:

mysql -u user_name -p db_name

データベース名は指定しない場合:

mysql --user=user_name --password
mysql -u user_name -p

ユーザー名を省略した場合は、rootユーザーでのログインとなる:

mysql --password db_name
mysql -p db_name

パスワードを設定していない(空白''を設定している)場合は、パスワード入力を省略可能:

mysql --user=user_name db_name
mysql -u user_name db_name

rootユーザーにパスワードを設定していない場合は、以下でログイン可能:

mysql
mysql db_name

対話MySQL終了

exitコマンドで終了:

mysql > \q
mysql > quit
mysql > exit

MySQLコマンド

対話MySQLで使えるコマンド(SQL文)。

パスワード変更

ALTER USER 'user_name'@'localhost' identified BY 'パスワード';

rootユーザーのパスワードを削除する(空白''にする)場合:

ALTER USER 'root'@'localhost' identified BY '';

データベース移動

use db_name

データベース一覧取得

show databases;

テーブル一覧取得

show tables;

テーブルの列一覧を取得

describe table_name;
decs table_name;
show columns from table_name;

その他コマンド集

よくまとまっているサイトをまとめる。

https://qiita.com/merrill/items/967884c02e10bd8f32f5

【作業ログ】MySQLのインストール・初期設定

MySQLをインストールしたときの作業ログです。

Progateの記事が参考になります。

prog-8.com

環境

  • macOS Monterey
  • インテル入ってる
  • MySQL 8.0
    • バージョンによる違いが結構あるようなので注意

インストール

Homebrewでインストールします。

パッケージがあるか確認:

% brew search mysql
==> Formulae
automysqlbackup          mysql++                  mysql-client@5.7         mysql-sandbox            mysql@5.6                mysqltuner
mysql                    mysql-client             mysql-connector-c++      mysql-search-replace     mysql@5.7                qt-mysql

==> Casks
mysql-connector-python        mysql-shell                   mysqlworkbench                navicat-for-mysql             sqlpro-for-mysql

ありました:

% brew info mysql
mysql: stable 8.0.29 (bottled)
Open source relational database management system
https://dev.mysql.com/doc/refman/8.0/en/
Conflicts with:
  mariadb (because mysql, mariadb, and percona install the same binaries)
  percona-server (because mysql, mariadb, and percona install the same binaries)
Not installed
From: https://github.com/Homebrew/homebrew-core/blob/HEAD/Formula/mysql.rb
License: GPL-2.0-only with Universal-FOSS-exception-1.0
==> Dependencies
Build: cmake ✘, pkg-config ✔
Required: icu4c ✘, libevent ✔, libfido2 ✘, lz4 ✔, openssl@1.1 ✘, protobuf ✘, zstd ✘
==> Caveats
We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

MySQL is configured to only allow connections from localhost by default

To connect run:
    mysql -uroot

To restart mysql after an upgrade:
  brew services restart mysql
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/mysql/bin/mysqld_safe --datadir=/usr/local/var/mysql
==> Analytics
install: 114,189 (30 days), 276,044 (90 days), 1,041,048 (365 days)
install-on-request: 113,807 (30 days), 275,331 (90 days), 1,037,696 (365 days)
build-error: 331 (30 days)

インストールします:

brew install mysql

インストールできたか確認:

% which mysql
/usr/local/bin/mysql

% mysql --version
mysql  Ver 8.0.30 for macos12.4 on x86_64 (Homebrew)

実行確認

まずはMySQLのサーバーを立てる:

% mysql.server start
Starting MySQL
. SUCCESS! 

MySQL monitor(対話形式のやつ)を起動:

% mysql
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.30 Homebrew

Copyright (c) 2000, 2022, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

サーバー立てるのを忘れていると、以下のようなエラーメッセージが表示される(はず):

% mysql
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

ちゃんと起動したら、試しにselect文でも実行してみる。

かけ算:

mysql> select 6 * 4;
+-------+
| 6 * 4 |
+-------+
|    24 |
+-------+
1 row in set (0.00 sec)

ユーザーリスト取得:

mysql> select host, user from mysql.user;
+-----------+------------------+
| host      | user             |
+-----------+------------------+
| localhost | mysql.infoschema |
| localhost | mysql.session    |
| localhost | mysql.sys        |
| localhost | root             |
+-----------+------------------+
4 rows in set (0.00 sec)

既存データベース確認:

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.03 sec)

対話モードから抜けるにはexitを実行する:

mysql> exit
Bye

初期設定

mysql_secure_installation

上のProgateの記事にも、まずmysql_secure_installationコマンドを実行してセキュリティあーだこーだしろって書いてあります。

mysql_secure_installationは最低限のセキュリティ設定をしてくれるものらしいです。

例えば、匿名ユーザを削除したり、rootユーザのパスワードを設定したりとかです。

あとは、バージョンによる差異(設定の仕方とか)も吸収してくれるらしいです。

今回はこれを使用せず、手動で設定をしてみます。

下記記事も参照してください:

qiita.com

初期DBの確認

存在しているデータベースはshow databases;コマンドで確認できます:

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+

インストールした時点で、4つのDB(スキーマ?)がありました。

各DB内のテーブルを確認するには、use db_nameコマンドのあとshow tables;コマンドを実行すればよいです。例えば:

use mysql
show tables;

初期ユーザの確認

インストールした時点で何人かユーザがいます:

mysql> select user, host, authentication_string from mysql.user;
+------------------+-----------+--------------------------+
| user             | host      | authentication_string    |
+------------------+-----------+--------------------------+
| mysql.infoschema | localhost | 長い文字列                 |
| mysql.session    | localhost | 長い文字列                 |
| mysql.sys        | localhost | 長い文字列                 |
| root             | localhost |                          |
+------------------+-----------+--------------------------+

昔のバージョンではpasswordという列が存在していたようですが、MySQL 8.0では存在していませんでした。

どうやらpassword列はauthentication_string列へと移行したようです。

匿名ユーザ(user列が空白のレコード)は存在していませんが、rootユーザのパスワードは空白となっていました。

なので、単にmysql実行時や、mysql -u root -pでパスワードを聞かれたときに何も入力せずエンター押下した際には、そのままrootユーザでログインできてしまいます。

パスワード設定

rootユーザにパスワードを設定します。初期では空白''でした。

上で見た通り、ユーザのパスワードはmysqlデータベースのuserテーブルのauthentication_string列に保存されていました。

なので、普通にupdate文でデータ更新すればと思ったが、password_last_changed列などもあるので何かしら関数を使った方が良さげ。

関数というか、alter user文でパスワードの更新を行う。

ALTER USER 'root'@'localhost' identified BY 'パスワード';

実行後、authentication_string列に何かしらの長い文字列が挿入され、password_last_changed列(パスワード更新日時)も現在の日時に更新された:

mysql> select user, host, password_last_changed from mysql.user;
+------------------+-----------+-----------------------+
| user             | host      | password_last_changed |
+------------------+-----------+-----------------------+
| mysql.infoschema | localhost | 2022-08-09 08:51:28   |
| mysql.session    | localhost | 2022-08-09 08:51:28   |
| mysql.sys        | localhost | 2022-08-09 08:51:28   |
| root             | localhost | 2022-08-10 00:56:10   |
+------------------+-----------+-----------------------+

一旦ログアウトして、パスワード無しでログインしようとすると、今度は怒られる:

mysql> exit
Bye

% mysql
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

% mysql -u root -p
Enter password:   # 何も入力せずエンター
ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

上で設定したパスワードを入力すると、ちゃんとログインできた:

% mysql -u root -p
Enter password:   # 上で設定したパスワードを入力してエンター
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 17
Server version: 8.0.30 Homebrew

試しにパスワードを空白''に戻してみたら、初めの状況に戻った:

ALTER USER 'root'@'localhost' identified BY '';

あと、5系の記事でよく見るpassword()関数は8系では使えないようです?

初期設定は以上。

不具合対処

以下では、エラー対応やらなんやらの備忘録になります。

どうやら私は、昔にMySQLをインストールしたことがあるようです。

上のProgateの記事もvisitedでしたし。

それで、おそらくそれが原因で色々不具合があったので、対処法?をまとめておきます。

エラー1

% mysql.server start
Starting MySQL
. ERROR! The server quit without updating PID file (/usr/local/var/mysql/マシン名.pid).

原因はよくわからない。

とりあえず以下の作業でこのエラーは出なくなったが、再現性がないので原因を特定できず。

古いバージョンを昔に使っていたことがあると、MySQL 8.0と競合しちゃう的な?

愚直な対応として、/usr/local/var/mysql/ディレクトリを削除してからMySQLを再インストールしました。

brew uninstall mysqlしてもディレクト/usr/local/var/mysql/は自動削除されないようなので、まずは手動でこれを削除します:

rm -r /usr/local/var/mysql/

そのあと、MySQLをアンインストール&インストールします:

brew uninstall mysql
brew install mysql

brew reinstallで良かったかも)

これで、初めに書いたエラーは出なくなったのですが、別のエラーが出るようになったので継に続く。

エラー2

% mysql.server start 
Starting MySQL
 SUCCESS! 

% 2022-08-09T00:01:33.6NZ mysqld_safe A mysqld process already exists
# ↑勝手に挿入、入力待ち

なんかmysqldプロセスは既に存在していると書いてある。

じゃあstopしてみるか:

% mysql.server stop        
Shutting down MySQL
.. SUCCESS! 

成功したと書いてるが、もう一度mysql.server startしても同様の症状となる。

これは、既にbrew services start mysqlが走っていることが原因。

再現もできたので、これが原因で間違いないと思う。

というわけで、これを終了させる:

% brew services stop mysql 
Stopping `mysql`... (might take a while)
==> Successfully stopped `mysql` (label: homebrew.mxcl.mysql)

このサービスが走っていなかった場合は、下記のような表示になる:

% brew services stop mysql
Warning: Service `mysql` is not started.

どうして既にbrew services start mysqlが走っていたかは謎。 brew install mysqlしたら自動でサービスが起動するとかではない(これは再インストールして確認した)。

おそらく、昔にインストールしたときに、これを走らせたまま今の今まで忘れていた?

試行錯誤ログ

後になってみれば、上で書いた2つの原因だけだったが、途中試行錯誤したときのメモを残しておく。

プロセス確認

mysqldプロセスが走っているかの確認:

% ps aux | grep mysqld                  
username           10644   0.0  0.0 33598524    800 s001  S+   10:18AM   0:00.00 grep mysqld

この結果であれば、今実行中のgrep mysqldが表示されているだけなので、他には走っていない。

他にプロセスが走っていれば、以下のようになる:

% ps aux | grep mysqld 
username            5141   0.1  2.3 34802212 389808   ??  S     8:51AM   0:02.81 /usr/local/opt/mysql/bin/mysqld --basedir=/usr/local/opt/mysql --datadir=/usr/local/var/mysql --plugin-dir=/usr/local/opt/mysql/lib/plugin --log-error=nyaa.err --pid-file=nyaa.pid
username            5512   0.0  0.0 33607740    820 s001  S+    9:04AM   0:00.00 grep mysqld
username            5053   0.0  0.0 34134528   1520   ??  S     8:51AM   0:00.03 /bin/sh /usr/local/opt/mysql/bin/mysqld_safe --datadir=/usr/local/var/mysql

プロセスを終了するには、kill -9 プロセスIDコマンドを実行する。

プロセスIDは、左から2列目の4桁の数字。これを指定すればよい:

kill -9 5141
kill -9 5053

なお、このプロセス状況では、/bin/sh /usr/local/opt/mysql/bin/mysqld_safeのプロセスを終了したら、勝手に/usr/local/opt/mysql/bin/mysqldの方も終了した。

この状況は、mysql.server startあるいはbrew services start mysqlを実行すれば再現できる。

前者の場合はmysql.server stopで、後者の場合はbrew services stop mysqlでプロセス終了できる。

brew services start mysqlで起動したプロセスをmysql.server stopで終了することはできない。逆もまた然り。

pidファイル

mysql.server startまたはbrew services start mysqlが走ってる間、usr/local/var/mysql/以下にマシン名.pidファイルが生成される。

stopすると、pidファイルは削除される。

マシン名はumane -nコマンドで確認できる。

下記コマンドで結果が返ってきたら、そのpidファイルが存在している:

ls usr/local/var/mysql/$(uname -n).pid

参考

prog-8.com

qiita.com

ja.stackoverflow.com

dkssksk.com

qiita.com

yaba-blog.com

qiita.com

https://qiita.com/busitora2/items/5b93c12f8964a7eae316

「このMacについて」と同等な情報をコマンドラインから取得する

このMacについて

概要

デスクトップ左上のリンゴマーク押下からの「このMacについて」で表示される情報をコマンドラインから取得する方法を調べた。

system_profilerコマンドを使えば、「このMacについて」と同等な情報を取得できる。

system_profiler SPSoftwareDataType SPHardwareDataType SPMemoryDataType SPDisplaysDataType

この方法では、OSバージョン名(Montereyとか)と機種名(MacBook Pro (15-inch, 2016)とか)は、直接は取得できないが、対応表(Apple公式サイト)を用いればわかる。

動機

ブログ書くときに、自分の環境情報を手書きするのがだるいので、何かコマンドでまとめて出力してコピペするだけじゃダメかなと模索してて、そもそも「このMacについて(About This Mac)」で表示される情報はコマンドラインからも取得できるのか?の段階でとりあえず結果をまとめたのがこの記事。

環境情報なんてOSバージョンだけで十分だろと思っていたが、CPUがIntelApple Silicon(M1とか)ではぼちぼち違いが出るらしいので、それも記載しといた方が良いのかなと思い始めた。

OS情報はsw_versコマンドで取得できる:

% sw_vers
ProductName:    macOS
ProductVersion: 12.4
BuildVersion:   21F79

あとsysctl -aコマンドで、何かよくわからん情報がいっぱい取得できる。

その中にはCPU情報も含まれるようで、その部分だけ抽出するには下記のようにコマンド実行すればよい:

% sysctl machdep.cpu.brand_string
machdep.cpu.brand_string: Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz

IntelApple Siliconかはすぐ識別できそう。

unameコマンドとかもある。

もっと詳細な情報はsystem_profilerコマンドで取得できる模様(使い方はman system_profiler参照)。

とにかく、以下では「このMacについて」で表示される情報に限って取得してみた。

情報の取得

Software

macOSのバージョン番号が取得できる。

% system_profiler SPSoftwareDataType
Software:

    System Software Overview:

      System Version: macOS 12.4 (21F79)    # macOSのバージョン番号
      Kernel Version: Darwin 21.5.0
      Boot Volume: Macintosh HD
      Boot Mode: Normal
      Computer Name: □□□
      User Name: □□□ (□□□)
      Secure Virtual Memory: Enabled
      System Integrity Protection: Enabled
      Time since boot: 11 days 9:09

macOSのバージョン名は、バージョン番号と下記サイトの対応表から確認できる。

support.apple.com

バージョン名 バージョン番号
Monterey 12.x
BigSur 11.x
Catalina 10.15.x
Mojave 10.14.x
High Sierra 10.13.x
Sierra 10.12.x

Hardware

機種ID、プロセッサ情報、シリアル番号が取得できる。

% system_profiler SPHardwareDataType
Hardware:

    Hardware Overview:

      Model Name: MacBook Pro
      Model Identifier: MacBookPro13,3           # 機種ID
      Processor Name: Quad-Core Intel Core i7    # プロセッサ情報1
      Processor Speed: 2.6 GHz                   # プロセッサ情報2
      Number of Processors: 1
      Total Number of Cores: 4
      L2 Cache (per Core): 256 KB
      L3 Cache: 6 MB
      Hyper-Threading Technology: Enabled
      Memory: 16 GB
      System Firmware Version: 451.120.7.0.0
      OS Loader Version: 540.120.3~6
      SMC Version (system): 2.38f12
      Serial Number (system): □□□□□□□□□          # シリアル番号
      Hardware UUID: □□□□□□-□□□-□□□-□□□-□□□□□□
      Provisioning UDID: □□□□□□-□□□-□□□-□□□-□□□□□□

機種名(インチ、発売年)は、機種IDと下記サイトの対応表から確認できる。

support.apple.com

Memory

メモリ情報が取得できる。

% system_profiler SPMemoryDataType
Memory:

    Memory Slots:

      ECC: Disabled
      Upgradeable Memory: No

        BANK 0/DIMM0:

          Size: 8 GB
          Type: LPDDR3       # 1つめのメモリ情報1
          Speed: 2133 MHz    # 1つめのメモリ情報1
          Status: OK
          Manufacturer: 0x802C
          Part Number: 0x4D5435324C31473332443450472D30393320
          Serial Number: -

        BANK 1/DIMM0:

          Size: 8 GB
          Type: LPDDR3       # 2つめのメモリ情報1
          Speed: 2133 MHz    # 2つめのメモリ情報2
          Status: OK
          Manufacturer: 0x802C
          Part Number: 0x4D5435324C31473332443450472D30393320
          Serial Number: -

「このMacについて」では、2つのメモリ情報がまとめて(合算されて)表示されている。

Graphics

グラフィックス情報が取得できる。

% system_profiler SPDisplaysDataType
Graphics/Displays:

    Intel HD Graphics 530:            # 1つめのグラフィック情報1

      Chipset Model: Intel HD Graphics 530
      Type: GPU
      Bus: Built-In
      VRAM (Dynamic, Max): 1536 MB    # 1つめのグラフィック情報2
      Vendor: Intel
      Device ID: 0x191b
      Revision ID: 0x0006
      Automatic Graphics Switching: Supported
      gMux Version: 4.0.29 [3.2.8]
      Metal Family: Supported, Metal GPUFamily macOS 2

    Radeon Pro 450:                   # 2つめのグラフィック情報1

      Chipset Model: AMD Radeon Pro 450
      Type: GPU
      Bus: PCIe
      PCIe Lane Width: x8
      VRAM (Total): 2 GB              # 2つめのグラフィック情報2
      Vendor: AMD (0x1002)
      Device ID: 0x67ef
      Revision ID: 0x00ef
      ROM Revision: 113-C980AF-908
      VBIOS Version: 113-C9801AL-028
      EFI Driver Version: 01.A0.908
      Automatic Graphics Switching: Supported
      gMux Version: 4.0.29 [3.2.8]
      Metal Family: Supported, Metal GPUFamily macOS 2
      Displays:
        略

「このMacについて」では、グラフィックス名とVRAM情報が表示されている。

まとめ

system_profilerコマンドとApple公式サイトにある対応表を用いれば、「このMacについて」で表示される情報はすべてコマンドラインからも確認できる。

(左側に表示されている、OSのメジャーバージョンごとのアイコン画像は知らん)

あとは頑張って取得したデータを整形すれば、「このMacについて」と同じような形式で情報を表示できるかと思う。 本当はここまでやりたかったが面倒くさいのでやめた。

以上。

参考

ex1.m-yabe.com

osxdaily.com

support.apple.com

support.apple.com

FinderのコンテキストメニューからVisual Studio Codeを開けるようにする【Mac】

Finderでファイルorフォルダを選択して右クリックで表示されるコンテキストメニューに「Visual Studio Codeで開く」項目を追加します。

環境

概要

Automaterアプリでコンテキストメニュー項目を作成し、シェルスクリプトvscodeを起動する。

手順は下記記事と同様。

qiita.com

手順

Automater.appを起動する。

cmd + spaceで表示される窓から検索すれば良い。

作成する書類の種類は「クイックアクション」を選択。

左サイドの「ライブラリ」から「ユーティリティ」を選択して、「シェルスクリプトの実行」を右側の領域へドラッグアンドドロップする。

右側の領域で設定を色々弄る。

  • ワークフローが受け取る現在の項目:「ファイルまたはフォルダ」
  • 検索対象:「Finder.app」
  • 入力の引き渡し方法:「引数として」

最後に、実行するシェルスクリプトを以下のように変更:

open -a "Visual Studio Code" "$@"

cmd + Sで変更内容を保存する。

クイックアクションの名前は、例えば「Visual Studio Codeで開く」とする。

この名前がコンテキストメニューに表示される項目名となる。

作業は以上で終わり。

これで、Finderで適当なファイルやフォルダ(複数でもOK)を選択、右クリックで表示されるコンテキストメニューの「クイックアクション」の中に、今作成した項目「Visual Studio Codeで開く」が追加されていることが確認できる。

また、「システム環境設定」>「拡張機能」>「Finder」にも作成した項目が追加されている。

補足

以下補足です。

保存されるファイルの場所

今回Automater.appで作成した書類は、以下ディレクトリに.workflowという拡張子で保存される。

/Users/<username>/Library/Services

コンテキストメニュー項目を表示する場所

「クイックアクション」の中じゃなくて、最上階に表示してくれた方がうれしいのだが、その方法はわからない。多分無理なのでは。

シェルスクリプト解説

open -a "Visual Studio Code" "$@"

open -aコマンドは、引数で指定した名前のアプリを起動するコマンド。

おそらく/Applicationsディレクトリにある.appファイルの名前を指定すれば良い。

$@vscodeコマンドラインから起動する時に与える引数。

この引数は、Finderで選択しているファイルやフォルダが与えられる。

$@というシェルの特殊変数は、引数で与えられた複数の変数を、それぞれ別々の変数として解釈される。

つまり、hoge1.txthoge2.txtを選択して「Visual Studio Codeで開く」押下時に実行されるシェルスクリプトは、以下のようになる。

open -a "Visual Studio Code" "hoge1.txt" "hoge2.txt"

参考記事では$@を展開するためにfor文を回しているが、おそらく不要。

また、vscodeコマンドラインから起動するコマンドcodeをインストールしているなら、実行するシェルスクリプトは以下でもOK。

code "$@"

短くなっただけ。

以上

FinderのコンテキストメニューからVisual Studio Codeを開けるようにする【Mac】

Finderでファイルorフォルダを選択して右クリックで表示されるコンテキストメニューに「Visual Studio Codeで開く」項目を追加します。

環境

概要

Automaterアプリでコンテキストメニュー項目を作成し、シェルスクリプトvscodeを起動する。

手順は下記記事と同様。

qiita.com

手順

Automater.appを起動する。

cmd + spaceで表示される窓から検索すれば良い。

作成する書類の種類は「クイックアクション」を選択。

左サイドの「ライブラリ」から「ユーティリティ」を選択して、「シェルスクリプトの実行」を右側の領域へドラッグアンドドロップする。

右側の領域で設定を色々弄る。

  • ワークフローが受け取る現在の項目:「ファイルまたはフォルダ」
  • 検索対象:「Finder.app」
  • 入力の引き渡し方法:「引数として」

最後に、実行するシェルスクリプトを以下のように変更:

open -a "Visual Studio Code" "$@"

cmd + Sで変更内容を保存する。

クイックアクションの名前は、例えば「Visual Studio Codeで開く」とする。

この名前がコンテキストメニューに表示される項目名となる。

作業は以上で終わり。

これで、Finderで適当なファイルやフォルダ(複数でもOK)を選択、右クリックで表示されるコンテキストメニューの「クイックアクション」の中に、今作成した項目「Visual Studio Codeで開く」が追加されていることが確認できる。

また、「システム環境設定」>「拡張機能」>「Finder」にも作成した項目が追加されている。

補足

以下補足です。

保存されるファイルの場所

今回Automater.appで作成した書類は、以下ディレクトリに.workflowという拡張子で保存される。

/Users/<username>/Library/Services

コンテキストメニュー項目を表示する場所

「クイックアクション」の中じゃなくて、最上階に表示してくれた方がうれしいのだが、その方法はわからない。多分無理なのでは。

シェルスクリプト解説

open -a "Visual Studio Code" "$@"

open -aコマンドは、引数で指定した名前のアプリを起動するコマンド。

おそらく/Applicationsディレクトリにある.appファイルの名前を指定すれば良い。

$@vscodeコマンドラインから起動する時に与える引数。

この引数は、Finderで選択しているファイルやフォルダが与えられる。

$@というシェルの特殊変数は、引数で与えられた複数の変数を、それぞれ別々の変数として解釈される。

つまり、hoge1.txthoge2.txtを選択して「Visual Studio Codeで開く」押下時に実行されるシェルスクリプトは、以下のようになる。

open -a "Visual Studio Code" "hoge1.txt" "hoge2.txt"

参考記事では$@を展開するためにfor文を回しているが、おそらく不要。

また、vscodeコマンドラインから起動するコマンドcodeをインストールしているなら、実行するシェルスクリプトは以下でもOK。

code "$@"

短くなっただけ。

以上