自作ストレージサーバー用のためのCLIツールをNode.jsで作成した話

2022/07/10 2022/07/10 #PHP #Node.js #ストレージサーバー #CLI

自作ストレージサーバー用のためのCLIツールをNode.jsで作成した話

こんにちは。のんです。

今回はCLIツールを自作してみた話をしようと思います。

前にストレージサーバーを作成したけど...

以前に自作のストレージサーバー作成した話をしました。

このストレージサーバーのAPIは画像データをBase64で送信する仕組みです。

このブログのようにサービスからAPIをコールするタイプなら面倒ではないのですが、Postmanなどを利用してちょっとした画像をアップロードするときに、いちいちBase64エンコードするツールWEBサイトを開くのは面倒でした。

そこで、画像をBase64エンコードするツールを作成しようと思いたったという経緯です。

@nonz250/image-base64

こちらが作成したツールです。

CLIツールのために利用したパッケージ

詳細はコードを見ていただければわかりますが、そもそも自分で何か特別なロジックを書いているわけではありません。便利なライブラリを導入してそれを組み合わせただけのコードです。

一応少しだけ紹介をしておこうと思います。


base64-js

バイナリデータをBase64形式に変換してくれるライブラリです。


cac

JavaScriptでCLIの基本機能を提供してくれるライブラリです。


chalk

コンソールにメッセージを表示するときに、色付けを行ってくれるライブラリです。


clipboardy

環境に関わらず、クリップボードの操作を行ってくれるライブラリです。


実装内容

エラーハンドリングは行っていないので、雑な作りですが...

#! /usr/bin/env node

import base64js from 'base64-js'
import cac from 'cac'
import chalk from 'chalk'
import clipboardy from 'clipboardy'
import fs from 'fs'

const cli = cac();

cli
  .command('encode <path>', 'Convert images to base64 strings.')
  .action((path) => {
    const image = fs.readFileSync(path)
    const base64strings = base64js.fromByteArray(image)
    clipboardy.write(base64strings).then(() => {
      console.log(chalk.green('✅ Successfully. Copied to clipboard.'))
    }).catch(() => {
      console.error(chalk.red('⚠️ Failed. Please check your input.'))
    })
  })

cli.help()

cli.parse()

command メソッドでCLIで実行するコマンドの名前を決めます。ここでは encode <path> で引数に画像までのパスを指定する作りになっています。

次に、action メソッドの処理が実際にコマンドを実行するときの処理になります。

const image = fs.readFileSync(path)

で、画像の読み込みをします。

const base64strings = base64js.fromByteArray(image)

で、読み込んだ内容をBase64エンコードします。

clipboardy.write(base64strings).then(() => {
  console.log(chalk.green('✅ Successfully. Copied to clipboard.'))
}).catch(() => {
  console.error(chalk.red('⚠️ Failed. Please check your input.'))
})

で、Base64文字列をクリップボードに貼り付けます。

CLIのコマンドをpackage.jsonに登録

下記のように、 package.json にコマンド名を登録しておくことで

"bin": {
  "image-base64": "index.js"
}
npm i @nonz250/image-base64

したときに bin ディレクトリにシンボリックリンクを貼ってくれます。

つまり、インストールしたときに

image-base64 --help

のように利用できるようになるということです。

Node Package として公開

npm publish

普通に公開するだけです。

ちょっと間違えて 1.0.0unpublish してしまったので 1.0.1 から始まっていますw

初めて使う人は

npm adduser

をしたり、

npm login

をして、ユーザー情報をコマンドに紐付けておきます。

作成したCLIツールの使い方

これも README.md に書いてありますが、

  1. Install package.
npm i --location=global @nonz250/image-base64

Restart terminal.

image-base64 --help
image-base64 encode <path>
image-base64 encode ~/foo/bar.png
image-base64 encode ./baz.png 
  1. Npx command.
npx @nonz250/image-base64 --help
npx @nonz250/image-base64 encode <path>
npx @nonz250/image-base64 encode ~/foo/bar.png
npx @nonz250/image-base64 encode ./baz.png

です。

最後に

今回は自作のストレージサーバーのための、自作CLIツールを作成してみました。

画像をBase64を変換する機能はあまり需要が無いかもしれませんが、公開もしていますのでよろしければ使ってみてください。

バイクの記事が書けてないので、今度こそ...今度こそ書きたいと思いますw

そのときはよしなに。

.

のん

所属 : 株式会社スマレジ 開発部

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道 #youtube #CSS #IE #SLA #Rust #千里浜なぎさドライブウェイ #千里浜 #インサイドセールス #曽爾高原 #無線LAN #ポートフォリオ #バルカンS #納車 #Next.js #チームビルディング #リーダー #悩み #Github Actions #Marp #ネタ #サーバー移行 #S3 #ストレージサーバー #RFC 7807 #Digest #認証 #Xdebug #CLI #西日本 #例外