package.json から拾った URL をブラウザで開く npm パッケージ「@neos21/opu」を作った

Node.js 開発をしていて、「この作業ディレクトリに対応する GitHub リポジトリをブラウザで開きたいなー」とか、「このプロジェクトの GitHub Pages を直接開きたいな」とか思うことがよくある。

GitHub リポジトリの情報は、大抵 package.json の homepage プロパティだとか repository プロパティだとかに書かれるし、GitHub リポジトリの URL が特定できれば GitHub Pages の URL を導き出すこともできる。

じゃあ作っちまおう。ということで、package.json から拾った URL をブラウザでサクッと開ける npm パッケージ、@neos21/opu を紹介する。「Open Package.json Url」の略、のつもり。ｗ

• Neos21/opu

目次

• インストール
• 使い方
  • 例
• 実装解説

インストール

本ツールは npm で公開している CLI ツール。次のようにグローバルインストールする。

$ npm install -g @neos21/opu

グローバルインストールすると opu というコマンドが使えるようになる。

使い方

package.json が存在するディレクトリに移動し、おもむろに opu コマンドを実行する。

$ ls
package.json

$ opu

すると package.json の内容を見て URL 文字列を拾い上げて列挙する。また、特定した URL を基に、Github のユーザページやリポジトリページ、GitHub Pages の URL などが分かればそれも一覧に表示する。

一覧から任意の URL を選択すれば、その URL がブラウザで開かれる。

例

拙作の Garbler という GitHub リポジトリを Clone したテイで説明しよう。

$ git clone https://github.com/Neos21/garbler.git
$ cd garbler/

$ opu
? Which URL do you want to open? (Use arrow keys)
❯ [1]  https://github.com/Neos21/garbler ... GitHub Repository Page (Neos21/garbler)
  [2]  https://github.com/Neos21 ... GitHub User Page (Neos21)
  [3]  https://Neos21.github.io/garbler ... GitHub Pages
  [4]  https://Neos21.github.io/garbler/ ... package.json homepage
  [5]  http://neo.s21.xrea.com/ ... package.json author
  [6]  https://github.com/Neos21/garbler ... package.json repository
  [7]  https://github.com/Neos21/garbler/issues ... package.json bugs
  [8]  https://github.com/sponsors/Neos21 ... package.json funding
  [9]  Cancel
(Move up and down to reveal more choices)

こんな風に表示される。

• [1] GitHub Repository Page
• [2] GitHub User Page
• [3] GitHub Pages

の3つは、package.json 内の記載から推測して生成した URL。それ以外は package.json の中から拾ったモノを一部整形している。一番下にはどの URL も開かない「Cancel」選択肢を用意している。

実装解説

package.json の読み込みは自前で。fs.promises を使った。とりあえず JSON.parse() したら、URL が書かれていそうなプロパティから URL らしき文字列を抜き取れるだけ抜き取った。

それらの文字列をチェックして、GitHub の URL っぽいモノがあれば、ユーザページ、リポジトリのページ、GitHub Pages の URL を組み立てるようにした。この辺の正規表現に難アリ。もっとサクッとイイカンジにやれる方法がありそう。

選択肢を表示するのに、Angular CLI や Vue CLI などの CLI ツールでおなじみの inquirer.js を使用した。お手軽。

指定の URL をブラウザで開くのは sindresorhus 氏の open パッケージを利用。

また、選択肢を選択した後も URL をコンソール出力しておき、それをリンクとして表示するために、同じく sindresorhus 氏の terminal-link パッケージを使った。ハイパーリンクを有効にできるターミナルアプリは限られているが、入れておいたら便利かなと思い。なお VSCode は URL 文字列を勝手にハイパーリンクしてくれる。ｗ

とまぁこんな感じ。URL の変換とかにバグがあるかもしれないが、自分が必要とする範囲では上手く行ったのでこの調子で公開してしまった。