ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

さらなる自動化のために、作成したツールを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」がお気に入り。

vuetifyjs.com

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

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

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

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

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

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

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

bulma.io

onsen.io

おわり

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

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

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

Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう

Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js