はじめに

アカツキにて内定者インターンをしているsachaosです。この記事ではプロジェクトに配属され、少しの間アシスタントディレクター業を行っていた僕が、エンジニアの端くれなりに社内ツールを作って業務プロセスの無駄な部分を自動化した話をします。

アシスタントディレクター業

アシスタントディレクター業として僕に任せられたのは、とあるゲーム内のお知らせを作成する業務でした。お知らせとはゲームに追加された施策(イベント・ガチャ)の内容や、メンテナンスの時間等をユーザに伝えるものです。お知らせはHTMLで書かれていて、タイトル、表示開始日時、表示終了日時などの値と共にデータベースに保存されています。また、お知らせには画像も含まれていてアカツキではAWS S3に保存しています。

改善前の業務プロセス

お知らせの作成では以下のような業務プロセスが取られていました。

HTMLを書く
Sequel Pro(GUIのDBクライアント)を立ち上げてレコードに手動で入れる
Cyberduck(GUIのFTPクライアント)を立ち上げて画像をアップロード
実機で表示が正しいか確認。

このプロセスを複数回繰り返していくことでお知らせを作成していくのですが、手動でレコードを挿入・更新したりする必要があり時間がかかる。また、重いソフトウェアを立ち上げておかなければならないので、なかなかストレスフルだという問題がありました。なにより、レコードを直接弄るといろいろな人為的ミスも増えます。 レコードを弄るのは人間の仕事ではありません。

お知らせ更新ツールの作成

上記のようなプロセスはなかなかつらいので、 CLIのスクリプトを書き自動化していたのですが、後任のお知らせ作成業務をするディレクターに作業を引き継ぐ必要がでてきましたので、引き継ぎやすいようにGUIのツールを作成することにしました。

エンジニアかつミーハーである僕は、今流行りのElectronを使用してGUIツールを作成することにしました。

Electron？

ElectronとはGitHub社が提供しているアプリケーションフレームワークです。同じくGitHubが提供しているエディタのAtomやSlackのアプリケーション、Kobito for Windowsで使用されていることで有名です。内部はChromium + node.jsとなっていてWebの技術(HTML, CSS, Javascript)で、スタンドアローンアプリケーションを作成することができます。 Mac, Windows, Linuxにクロスコンパイル可能となっているので、使用者の環境を考える必要がありません。

お知らせのをHTMLファイル一つで管理する

ツールの作成にあたり、お知らせに付随する情報(タイトル、表示開始日時、表示終了日時など)をHTMLファイル一つに管理した方が便利だと思いましたので、 metaタグとしてHTMLファイルの中に上記の情報を埋め込んで管理することにしました。

<meta name="title" content="超重要なお知らせ！！！" />
<meta name="start_at" content="2015-08-01 15:00" />
<meta name="end_at" content="2015-12-6 23:59" />
<!-- 以下お知らせの内容 -->

HTMLファイルが入力された時にパースしてmetaタグの中身を取り出し、その値を元にレコードを登録・更新します。

ドラッグ＆ドロップでお知らせを更新

お知らせが書かれたHTMLと必要な画像を入れたフォルダをドラッグ＆ドロップするだけで, HTMLはDBに保存し画像をAWS S3へアップロードするアプリケーションを作成しました。こんな感じです。

人間の仕事っぽいですね。

改善前の業務プロセスでは一回の更新作業で、どうしても2分程度かかってしまっていましたが、これにより3秒で更新することができるようになりました。

時間を短縮することで本来するべきお知らせの内容等に、時間をかけることができるようになりました。

Electronどうだった？

メリット

Webの技術で簡単にスタンドアローンのアプリが作成できる。

ビューの作成もHTML、CSSで簡単に作成することができますし、デバッグもChromiumの開発者ツール上で行えます。またnode.jsまわりの既存の資産を活用できるので、簡単に強力なアプリケーションを作成することができます。

使用者の環境を整える必要がない。引き継ぎが楽。

スタンドアローンなので、環境構築・バージョン管理を意識させず「このアプリをDropBoxから落としてきてー」というだけでアプリを使用させることができます。また、クロスプラットフォーム(Mac, Linux, Windowsへ吐き出せる)なので、使用者のOSを考える必要がなく、様々なOSが混在するような社内環境でも問題ありません。

デメリット

謎な挙動がある。

tmuxを通して立ち上げると文字入力できない等、たまに謎な挙動に出くわしました。しかし困ったことがあっても大体ググれば問題は解決できます。解決できなければコントリビュートするチャンスです！

吐き出されたものが無駄に大容量。

結局Chromiumを内蔵しているので、アプリケーションにした物はブラウザくらいのファイルの大きさになります。

まとめ

社内GUIツールを作って業務改善しました。
Electron、GUIツールの作成におすすめです。

社内ツールを作るのはエンジニア的には楽しいですし、業務も改善することができます。 Electronを使用すれば簡単にこういったツールを作ることができるのでおすすめです。もし、社内の業務でイケてない部分があれば、ツールの作成で解決することができるかもしれません。ぜひ、試してみてはいかがでしょうか？

Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)

Akatsuki Hackers Labは株式会社アカツキが運営しています。

Electronで社内ツール作ってみた