2019
12/26

【VSCode】ステータスバーに今ラジオでかかっている曲名を表示する拡張機能

今さらという感じもしますが、数ヶ月前からVisual Studio Codeを使いはじめまして、拡張機能をつくってみました。

ADs

つくったもの

ステータスバーに指定Twitterアカウントの最新ツイートを取得し、表示させるものです。
ラジオ局のオンエア情報を流しているアカウントを対象にして、今流れている曲名とアーティストを知るという使い方を想定しています。

Twitter Ticker (Github)

Twitterをスクレイピングして最新ツイートを取得しますので、NERVのアカウントを対象にしてニュース速報をいち早く知る、みたいな使い方もできます。

作成手順をご紹介します。

まずはじめに

Node.jsのインストール

VSCodeの拡張機能はNode.jsを使いますので、まずはNode.jsをインストールします。

Node.jsは特定のバージョンでないと動かないツールが多々ありますので、Nodistなどのバージョン切り替えが簡単にできるツールの使用がおすすめです。

ジェネレータのインストール

Node.jsがインストールされたことでnpmが使えるようになりました。

VSCodeのターミナルで以下を入力し、yoとgenerator-codeという拡張機能作成のための支援ツールをインストールします。

ひな形を生成

カレントフォルダの直下に指定した拡張機能の名称でフォルダが作成されますので、事前にフォルダを移動してから以下のコマンドを入力します。

このコマンドを実行したあとは以下の質問に答えていくだけで最小限のコードや必要ファイルが生成されます。

What type of extension do you want to create?
New Extension (TypeScript)New Extension (JavaScript)を選びます。
私は慣れていないのでJavascriptで…そのうちTSも勉強します。

What’s the name of your extension?
拡張機能の名前です。この名前でフォルダが作成されます。

What’s the identifier of your extension?
拡張機能のIDです。マーケットプレイスに公開するときは既に公開されている拡張機能とかぶらないIDが必要ですが、公開する予定がないなら何でもかまいません。

What’s the description of your extension?
拡張機能の説明文です。こちらもマーケットプレイスでの公開時に表示される程度のものなので空白でもかまいません。

What’s your publisher name?
作成者の名前です。マーケットプレイスの公開時に(ry

Initialize a git repository?
Yesを選択するとローカルリポジトリが作成されます。gitを使わないならNoです。

拡張機能の名前でフォルダが生成されていますので、そのフォルダに移動し、codeコマンドでフォルダを開くことができます。

フォルダ内のextension.js(TypeScriptを選択した場合はextension.ts)をベースに拡張機能を作成していきます。

ここからが本題:ステータスバーに現在ラジオで流れている曲名を表示する

ところで私の職場ではFMラジオが流れているのですが、ラジオ局は現在流れている曲名をTwitterでbot的にツイートしていることが多いです。
今かかっている曲が誰の何という曲なのかが気になることもあるのですが、仕事中に堂々とTwitterを開いて確認するのは気が引けます。

そこでラジオ局の最新ツイートを取得し、曲名部分だけを取得してVSCodeのステータスバーに表示させる拡張機能を作成することにしました。

FMはたまにおいおいマジかよ…みたいな曲がかかるのでびっくりします。

現在オンエア中の曲を紹介しているアカウントを探す

まずは現在オンエア中の楽曲を紹介しているアカウントを探します。

たとえば

FM802なら802NOWONAIR
J-WAVEならJ-WAVE NOW ON-AIR(非公式らしい)
Kiss FM KOBEならKissNowPlaying

などです。

このようなアカウントが見つからない局については今回は諦めます。

最新ツイートをスクレイピングで取得する

ツイートの取得というとAPIを申請してアクセストークンを取得してREST APIを叩いて…と難しくなってしまうのですが、もっと簡単にスクレイピングで最新ツイートを1件取得する方法を取ります。

通常のアドレス(https://twitter.com/802NOWONAIR)ではJavascriptをもりもり使ってスクレイピングも難易度が高いのですが、モバイル&レガシー環境版の https://mobile.twitter.com/802NOWONAIR はJavascript無効状態でも見ることができ、固定ツイートもないシンプルなページになっています。このページの最新ツイートを取得します。

request-promiseとcheerioを使う

VSCode拡張機能の強みはnpmの豊富なライブラリを使えることにもあります。

request-promiseはHTTP通信を行うライブラリで、cheerioはjQueryのようにHTMLを解析できるライブラリです。

VSCodeのターミナルで以下のコマンドを入力し、インストールします。

コードを書く

extension.jsを編集します。
yo codeの時点で実行すると「Hello World」と表示されるだけの拡張機能のひな形ができあがっていますので、これを編集していくと分かりやすいと思います。

全文はgithubもご参照ください。

ユーザー変数の定義

上記のコードの中に

という部分がありますが、これはユーザーが定義した内容を取得するという部分です。

package.jsonのcontributes配下にconfigurationという名前で作成します。

configurationが存在する場合、拡張機能の「拡張機能の設定を構成します。」メニューが有効になります。

使い方

マーケットプレイスに公開しない場合は

%USERPROFILE%\.vscode\extensions

内にフォルダのシンボリックリンクを作成すると一番手っ取り早いです。

フォルダ名は

[ユーザー名(何でもよい)].[拡張機能名]

とします。

まとめ

VSCodeの拡張機能は自由自在に何でも作れるというわけではないのですが(たとえば、複数の入力箇所があるフォームのようなものは作れない)、アイデア次第ではいろいろなことができそうです。
引き続きやっていきたいと思います。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。