こんにちは。
私は猫をテーマとしたブログを運営していながら、 ペット不可の物件に住んでおり猫を飼うことができません。
しかし、同じようにペットを飼えない方でも猫を飼う方法がありますので、ご紹介します。
はじめに
みなさん、VS Code は使っていますでしょうか。
私は普段のプログラミングはもちろん、このブログの執筆にも使用しています。
知らない方向けに説明すると、 VS Code (Visual studio Code) は 2015 年に登場したオープンソースのエディタで、macOS, Windows, Linux に対応しています。無料です。
また、2019 年の Most Popular Development Environments 調査では最も人気な開発ツールとなっています。
vscode-pets の紹介
本題です。
VS Code で vscode-pets という拡張機能があります。
Anthony Shawさんという方が開発しており、インストールするとエディタ上でペットを飼うことができます。
使い方は簡単で、
コマンドパレットから コマンドパレットから実行Pet Coding: Start pet coding session を実行するだけです。
同様の手順でボールを投げ入れてみたり、 カーソルを合わせるとじゃれてきたりします。
また、設定画面からペットの種類や大きさを選ぶことができます。 設定画面
犬 🐶 や蛇 🐍 なんかも選べますが、やっぱり猫 🐈 が一番可愛いですね。
なんと、最近のアップデート(version 1.4.0)ではトトロを飼うこともできるようになりました1。 トトロがペットに
選べるペットは？
選べるペットについて見ていきましょう。 2021年4月現在で選べるペットの種類は以下です。
- イヌ
- ネコ
- ヘビ
- トトロ
- カニ
- アヒル（ラバーダック）
- クリップ（クリッピー）
このうち、カニやトトロは割と最近追加されました。
多数飼うことも可能
version 1.0.0 では複数の飼育にも対応しました。
※ 最近のアップデートが活発です。 2021年3月末に version 1.0.0 がリリースされましたが、執筆時点で既に version 1.5.0 になっています。
開発が活発
中身について
一体どのような技術が使用されているのでしょうか。
GitHub でソースコードが公開されているので、後学のためにざっくりと読んでみました。
執筆時のソースコードのバージョンは こちら です。
どうやって動いている？
Web ページの技術が使われているようです。
具体的には HTML, CSS, Javascript ですね。
Webview とは？
なぜエディタなのに Web の技術が使えるのかというと、 Webview という機能がサポートされているためです。
Webview は、スマホアプリなどで見かけることがあると思いますが、アプリケーション内で Web ページを表示する機能です。 レンダリングエンジンによって見え方は多少変わりますが、Web ページという共通の形式を利用することができるため、 開発が容易になるというメリットがあります。
一例として iOS/Android の Amazon アプリではこの Webview を使用して実装されています2。
VS Code では Webview API という Webview を利用できる API が備わっており、HTML を表示する拡張機能の開発が可能となっています。
動作について
各ペットごとに GIF のアニメーション画像を行動パターン分用意しておき、 うまい具合に描画する座標を変化させることで動きを出しています。
行動パターンについては 13 個ほど用意してあります。 ある行動の次に取れる行動の選択肢が決まっており、 一定時間(100ms)ごとにランダムで次の行動が選ばれているようです。
また、カーソルを当てたときの判定は mouseover イベントで拾っています。
この場合はすぐに swipe() 関数が呼ばれ、カーソルに反応してくれる、という仕組みでした。
おわりに
今回は VS Code エディタ上で猫を飼うことができる拡張機能 vscode-pets についてご紹介しました。
動物が好きな方はぜひインストールしてみてください。