みつのーと

頑張ってます・・・

ローカルでdocker-composeを操作するためのGUIツール書いた

ローカルでdocker-composeを操作するための簡単なGUIツールをElectronを使って書いた。 非エンジニアの人でも気軽に開発環境をローカルで動かせるように、といった気持ちで作った。

「エンジニアが作成したdocker-composeを使って、非エンジニアの人がローカルで動作確認する」といった用途をイメージしてる。

GitHubにソースと実行ファイル(zip)を置いてある。

mitsu-ksgr/swimmy: Swimmy is simply GUI client of docker-compose built on Electron. Release ver 0.2.0 · mitsu-ksgr/swimmy

名前はスイミーにした。

で、最初に思いついたのがスイミーで、あんまり考えずそれに決めた。彼は確か群れをまとめてうんぬんしてたし、割りとそれっぽいという思いはあった。 ただ魚介に詳しくないのでスイミーが何の魚か知らないため、いらすとやさんでそれっぽい魚の画像を探してアイコンにさせて頂いた。

で、これ書きながら気付いたんだけど、体が赤いのは群れのほうでスイミーは黒だった。スイミー目だもんね。 アイコンは赤い魚にしちゃったんだけど、修正するのも面倒なので赤のままにしてある。

使い方

基本的に、開発環境のdocker-composeを操作するイメージで作っているので、scaleやconfigなんかを使うケースは考慮してない。

使い方はREADMEのUsageに書いていこうと思う。

mitsu-ksgr/swimmy: Swimmy is simply GUI client of docker-compose built on Electron.

現時点では、

  1. プロジェクトのdocker-compose.ymlを選ぶ
  2. 再生ボタンを押すとdocker-compose up
    • stop後にexitした状態の時はdocker-compose start
  3. 一時停止ボタンでdocker-compose pause
    • リピートボタンでdocker-compose unpause
  4. 更新ボタンでdocker-compose restart
  5. ゴミ箱ボタンでdocker-compose down

といった感じ。

ボタンだけだと操作方法が微妙に分かりづらく、センスの無さが滲み出てきて辛い。ので誰か助けて欲しい。 （HTML/CSS書くのだるくて、最低限のことしかやってない）

これから追加したい機能

  • migrationとかの処理をするのにdocker execで処理を実行させる何らかの仕組みを用意したい
  • ログをもうちょい見やすくしたい（現状codeタグでくくってるだけ）
  • Portsの項目からブラウザを開けるようにしたい

普通に使えるくらい機能が揃ったらver1.0.0にしたいなと思ってる。

なんで作ったか

上にも書いたけど、非エンジニアの人でも気軽に開発環境をローカルで動かせるような環境を作りたかった。

Webサービス案件に携わるようになって、デザイナーやディレクターが「ローカルの開発環境の構築が上手くいかないから、確認しながら作業出来ない！」って困ってるところを何度か目にすることがあった（デザイナーはデザインの当て込み、ディレクターは文言変更や要素の配置を試したりで、ローカルで動作させたい需要は少なくないように思うけど、他の現場だとどうなんだろ？）。

この問題そのものは、開発環境をDockerで構築することである程度対応出来ると思ってる。 ただ、コンテナ１つのプロジェクトはそうそうないのでdocker-composeを使う事になると思うんだけど、現状Kitematicがdocker-composeに対応してない（いつか対応するのかな）。

docker-composeは簡単なコマンドで操作出来るんだけども、幾つかのコマンドを覚えてターミナルを１つ立ち上げるよりも、複数のウィンドウを開いてGUIで操作するほうが性に合うってタイプの人たちも一定数いるので、そういう人たちの選択肢の一つになれば嬉しい。

取り敢えず今携わってるプロジェクトはdockerを使って開発してるので、機会があれば使ってみてもらおうと思ってる。

Electron

Electronやnode.jsにあまり詳しくなくて、moduleの書き方とかぎこちない感じがあるので、もうちょっと色々書いたりなんだりして感覚を掴みたい。 とはいえ基本的にhtmlとjs書くだけなので、"取り敢えず動かす"ってとこまですぐにいけるのは、書いてて気持ちが軽やかで良い。

あと、マルチプラットフォーム向けにパッケージングするときはelectron-userland/electron-packagerを使うとすごく手軽で便利だった。 最終的にはCIでパッケージングしてReleaseする感じに持っていきたいので、おいおいやっていきたい。

作ってる手前自分でもなるべく使うようにしてるけど、やっぱりコマンドそのまま打ったほうが楽ちんちんですね