ほんじゃらねっと

ダイエット中プログラマのブログ

Node.jsで作成した自動化プログラムをGUI化してより多くの人に役立ててもらおう

プログラマの仕事は、人が行う作業を代わりに行なってくれるプログラムを書くことであり、それはつまるところ「作業を自動化」することだ。

長くプログラマをやってると忘れちゃうけど、

コマンドプロンプトを開いてコマンドを実行するのは、

プログラマ以外にとってはとてもハードルが高い。

作業を自動化するためのツールをGUI化するメリットについて考えてみた。

後半でNode.jsでのGUI化の方法についても紹介する。

GUI化するとメインの処理とは別で画面の作成や入力処理を実装する必要があり、

単純に開発時の作業が増えるのだけど、CLIと比較してそれだけのメリットがあるのか?

まず思いつくことで、一番重要なのは

GUI化することで作成したツールを

プログラマ以外の人が抵抗なく使えるようになるので、

対象ユーザーがグンと増える、ということ。

自動化ツールを必要としているのはむしろプログラマ以外の人たちであると考えると、

CLIスクリプトをソースと一緒に提供して頑張って勉強してもらうよりも、

GUIアプリを提供してそれを使ってもらう方が当然使ってもらいやすい。

もう1つ、CLIツールよりもGUIの方が良いな、と思うのは

「入力パラメータの保存と選択がしやすくなる」、ということ。

例えばリモートのLinux環境やDBを操作するような自動化ツールの場合、

色々な接続先に対して使うので、

接続先アドレスやユーザー名を保存しておき、一覧から選べると使いやすい。

GUI化するとメニュー等でメイン機能以外のサブ機能を持たせやすくなるので、

こういった入力の簡略化がしやすい。

あと出力についても、テキストだけでなく

グラフ等テキスト以外の形式で見せることができるので、

データの内容に適した分かりやすい出力ができる。

Node.jsで作成したスクリプトのGUI化方法

今まで書いてきた記事を見返すと、

どの自動化ツールもGUI化すればより多くの人にメリットを提供できそうなので、

今後は自動化ツールを提供する時は

できる限りGUI化したものを提供するように心がけたい。

GUI化の形としては

  • Webアプリ
  • デスクトップアプリ
  • スマホアプリ

があるけど、自動化ツールを作るならまずはデスクトップアプリだろう。

Javascript/Node.jsでデスクトップアプリを作る方法としては、

「Electron」で作るのがおそらく実績として一番多いんじゃないかと思うのだけど、

ちょうど数日前にGoogleが「carlo」という、

Node.jsアプリをより手軽にGUI化できるライブラリをリリースしたようなので、

今後はこちらも選択肢になりそう。

github.com

まだ試してないので、なにをどこまでできるのか近いうちに検証してみたい。

UIフレームワークを選択する

どういう形でGUI化を行うのであれ、

GUI化する場合はレイアウトとかコンポーネントのデザインを考慮する必要がある。

Node.jsベースのアプリをGUI化する場合、

WebアプリだろうがElectronだろうがcarloだろうが、

UIはHTML、CSS、Javascriptで作成するので、

ハイブリッドに使えるUIフレームワークを1つ習得しておくと使い回しが効いて良い。

大抵はAngular/React/Vueのいずれかのフレームワークと、

それに対応したUIフレームワークを組み合わせて使う感じだと思う。

私は今のところ「Vue.js + VuetifyJS」がお気に入り。

https://vuetifyjs.com/ja/getting-started/quick-startvuetifyjs.com

VuetifyJSはアプリ風レイアウトができること、

画面サイズによってレスポンシブにレイアウトを変更できること、

コンポーネントが十分に揃っていることが気に入ったポイント。

スマホ用WebアプリとElectronアプリを作ってみたけど、

どちらもアプリの形式に関わらずサクッと書けた。

他にもBulmaとかOnsenUIとか、色々フレームワークがあるので、

試してしっくりくるものを選ぶのが良いと思う。

bulma.io

onsen.io

おわり

GUI化に慣れていないうちは、

考えることが多くて「めんどくさ...」となることが多いけど、

何個か作ってるうちに慣れるはずなので頑張ろう。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

  • 作者:mio
  • 発売日: 2018/05/29
  • メディア: 単行本(ソフトカバー)