ElectronやGASでイラスト管理をお手軽にした話

お久しぶりです。早いもので3年目も終わりが近いエンジニアのzawaです。

久しぶりに出てきて何について書くのかというと、弊社の施策「CR」でzawaが（勝手に）作った社内ツールについてです。制作の経緯や、こういったツールを作ることの大事さ、楽しさが少しでも伝わればと思います。

本ブログではおなじみの画像です。CRについては下記を御覧ください。

【SELECK】そのルーティンを疑え！職種の壁も越える「しらけない」働き方改革の進め方とは

過去の記事にもあったように、プログラマ・エンジニアは常日頃からいかに効率よく、自動化し、ミスを減らすかを考えています。zawaも業務中に「この作業ちょっとめんどくさいな」と思ったら、その作業を単純にするための軽いスクリプトを組み、「仕事減らせた」と自己満足してます。

しかし当然ながらこれはスクリプトのようなツールを自身で作ることのできる職種だからこその話であり、多くの場合、「この作業めんどくさいな」と思ったら下記のような選択をすることになるかと思います。

・「時間」で解決する（その作業をひたすら繰り返す）

・「量」で解決する（人を増やすなど）

・解決できるツールがないか探す（フリーソフト、プラグインなど）

・etc…

時間や量を使うと、当たり前ですがコストがかかり、その作業が発生する頻度が増えれば増えるほど、コストが膨れ上がっていきます。ツールやプラグインを探してくることはできますが、やりたい要件に完全にはマッチしないことも多く、フリーソフトの利用はセキュリティ上の懸念なども上がってきます。

そこで、隣りにいるエンジニアの出番です。

この人達（zawa）は怠惰であると同時に、「触ったことのないもの、新しいもの」が好きだったりします。めんどくさいことは嫌いだし、新しいことが好き、とはひどくわがままな人ですね。しかし、他の職種の方々が「困っていること」を「触ってみたい技術」で解決できるとしたらどうでしょうか。

新しい事に触れながら（C）、無駄な作業を削減できる(R)。

ありがとうCR施策

Win-Winになりそうで楽しい感じが出てきたところで、本題の行った施策についてです。今回紹介する解決した問題は2つです。

1. アプリで利用しているイラストの検索が面倒
2. macのFinderからのファイルサーバー検索が遅い

これらの問題は以前弊社で行った「CRハッカソン」のヒアリングの際に上がってきていた問題です。CRハッカソンは1日開催のため、当日開発を行えそうなものをピックアップして開発を行っていました。ちなみにzawaは高熱で欠席しました。

1.イラストの検索が面倒

☆経緯

弊社で運用中タイトル「グリモア〜私立グリモワール魔法学園〜」では、毎月数十枚の生徒が描かれ、リリースされています。これらのイラストは社内のファイルサーバーに管理され、合計枚数は数千枚に及びます。イラストにはそれぞれ設定やシチュエーション、場所、季節のイベントなど、様々な情報が詰まっており、これらはシステム的には保持されていない情報になります。

新規のイラストを描く場合、過去のイラストと構図が被るのを防ぐため、「去年のクリスマスはどんな絵だったか確認したい」、「水着のイラストを一覧で見たい」、「武田虎千代（グリモアの生徒）のSSRを全部見たい」など、様々な条件でイラストを見る必要が出てきます。

それらを毎回一つずつファイルサーバーを探すのが地味に大きな工数となっており、無駄な時間が生まれ続けていました。もちろん、ファイルサーバーは整理されており、生徒毎のフォルダなどで別れてはいますが、それでもやはりイベントごとのイラストを探したりするのは余計な時間がかかってしまいます。

そこで、「イラストチームでイラストにタグのようなものを付けて管理したい」という要望を頂き、同時に欲しいシステムのイメージもイラストチームからいただく事ができました。何を使って作ろうかと考え、下記のどれかでやることにしました。

1. 開発用アプリで実現する
2. 社内サーバーを立て、Webブラウザで見れるようにする
3. その他

1は端末を所持していないと見ることができないため使いづらく、さらに普段業務で使っている技術に乗せるだけなのでC（チャレンジ）にならない。2はもろもろ準備が必要で、めんどくさい開発工数が変にかかってしまう可能性がある。

ふと思い出したのが、弊社では2014年にGSuiteへの移行をしており、GoogleAppsScript（以下、GAS）が社内で頻繁に使われてきていました。GASでは、Googleドキュメントやスプレッドシートの操作の他に、HtmlServiceを使ってWebアプリケーションを作ることもできます。これなら誰でも簡単に自分の作業PCから利用し、かつ個人的にGASは触ってみたいものであるため、「GASを利用したイラスト検索ツール」を作成することにしました。

☆制作物：イラスト検索サイト

【システムイメージ図】

システムの詳細は省きますが、今回実現したかったことは下記になります。

1. 各イラストが、一枚を大きく見れること、一覧で見れること
2. GSuiteに所属するユーザーが自由にタグ付けできること、それを検索できること
3. リリース済みのイラストが自動で追加されること
4. 簡易的な管理画面の用意

1と2はシステム的な要件のため必須です。3、4に関しては、ツールを扱うための工数を増やさないための機能です。

もし3の部分が手動で追加していくようなシステムであった場合、業務改善を行ったはずなのにリリースのたびに一定量の作業が増えてしまいます。こういった状態になってしまうと本末転倒なため、例えCRのためのツールだとしても、そのツールを使い続けるために最低限の保守性は備えておくべきです。

同じような理由で、使用している人からの改善要望を受け付けたり、その改善後の周知などを、簡単に行えるようにしておきたかったための機能が4の簡易的な管理画面となります。GASの場合、スプレッドシートやGoogleフォームといったGoogleのサービスとの連携が非常に簡単に行えるため、工数をかけずに実装することが可能です。

要はCRをCRしてる、ということでしょうか。これに関してはやりすぎるとそれも本末転倒なためその規模が大切ですが、個人的には大事な考えだと思っています。

☆成果物と得られた効果

・イラストを探す時間の削減

10人が1日10分短縮できたとすると、

10分×10人×5営業日 = 約8時間

ー＞　1週間で約1営業日の削減

・スキルやパラメータも確認できるようにしたため、プランニング時やデバッグ時でも利用されるようになり、想定より利用の幅が広がった

【検索画面と簡易お知らせ画面】

2.Finderからのファイルサーバーの検索が遅い

☆経緯

先程も記述したように、全体で利用している共有のファイルサーバーが存在し、各運用プロジェクトがそれぞれ必要なファイルを保持しています。

弊社では、この共有サーバーに対して、WindowsのExplorer、MacのFinderから検索を行うと、Macの方が検索に異常に時間がかかってしまう事象が起きていました。社内ではWindowsを利用している方とMacを利用している方が混在しており、この事象によりMacを利用している方のみ共有サーバーへの検索がしづらい状態となっていました。過去のUI素材などを探したい場合に、フォルダを辿って探すのが地味ながら大変な作業となっていました。

(少し余談になりますが、今回は現状のフローを優先して別の方法をとっていますが、そもそも共有サーバなんて使わずに全てgitやその他のバージョン管理ツール等を用いて、根本的に解決するケースも有効だと思います。)

この事象が何故起きているのか、調査・解決するために、まずはNode.jsの「smb2」モジュールを利用して検索をかけてみることにしました。

// npmでインストール
 npm install --save smb2

// サンプルコードの通り初期化
 var SMB2 = require('smb2');
 var smb2Client = new SMB2({
 share:'\\000.000.000.000\hoge'
 , domain:'DOMAIN'
 , username:'username'
 , password:'password!'
 });

// ディレクトリの読み込みをかけてみる
 smb2Client.readdir('RootFolder', function(err, files){
 if(err) throw err;
 console.log(files); // フォルダ、ファイルの一覧が出ます
 });

ー＞　すぐ返ってきた

ならばそのファイルのサムネイルなどを表示するのが重いのではと推測し、試しに検索に引っかかったファイルを「fs」モジュールを利用してローカルに保存してみる。

// 読み込む
 var fs = require('fs')

// ファイルを読み込んで保存してみる
 smb2Client.readFile('RootFolder/file.txt', function(err, data){
 if(err) throw err;
 // 保存
 fs.writeFileSync(__dirname+'/file.txt’, data,{}, function (err) {});
 // 完了
 });

ー＞　すぐ保存できた

遅い原因を調べるために上記の2つを試しましたが、両方爆速でした。そのため、一旦原因調査は中止し、そのままNode.jsを使って共有フォルダを検索できるツールを作成することにしました。

☆制作物：Smbクライアント

実現したかったことは下記。

1. 共有フォルダにあるファイルの検索ができること
2. OR/AND検索、複数同時検索ができること
3. 結果を一覧で見れ、画像は表示できること(GUI)
4. そのファイルのパスが分かること

Finderでやりたくてもできなかった検索ができるようになればよいので、先ほど検証で使用したスクリプトをそのまま使い、`node app.js ui_background_XXX.png`のように、コマンドラインから検索を行う形でも良いのですが、これだと利用したい人のPCにNode.jsをインストールする必要が出てきます。

また、エンジニアはこのいわゆる 黒い画面 に抵抗はないかと思いますが、 黒い画面 を知らない人からするとこの操作は非常に手を出しづらいものになってしまいます。さらに、共有フォルダを検索できずに一番困っているのは僕らではなく、画像を多く扱う方々なので、GUIで結果を提供してあげたほうがより親切です。例えどんなにすごいツールでも、使う側のことを考えてないツールは使われません。

そのため今回は、先ほどのNode.jsを使い、GUIのあるアプリケーションとして配布を行いたいため、「Electron」を使用してアプリを制作してみることにしました。

Electronは、Webの技術を用いてデスクトップアプリケーションを作成することができます。1ソースでMac、Windowsなどに対応できるため、弊社のように両OSが混在する環境の場合には非常に便利です。この時問題が起きていたのはMacのみでしたが、今後ツールを作っていく中で触っておくと役に立つこともありそうなため、Electronを選択しました。あと、単純に興味がありました。

【システムイメージ図】

こういったツールを作っていく中で、非常に大事だと感じたのが、開発時でもリリース後でも、その問題で困っている人、ツールを欲している人に必ずフィードバックをもらうことです。何かを作る時、ぶっちゃけ触ってみないとわからない部分は確実に存在するため、何度もフィードバックをもらい、改善を続けることでよりよいものになっていきます。

☆成果物と得られた効果

・（当然ですが）Macでも共有フォルダを検索できるように

エンジニアやデザイナーの大半はMacを利用していたため、共有フォルダにあるリソースを探すのが億劫でしたが、簡単に探せるようになりました。zawaの場合、デザイナーから指定された画像を素早く見つけられるようになり、非常に満足しています。

また、発注書などの資料からIDをコピーし、そのまま貼り付けて検索も可能なため時間の大幅な短縮が行えました。

【検索結果画面】

最後に

いかがでしたでしょうか。今回紹介したものは一部ですが、ここで触ったGASやElectronは後のCRにも活かすことができており、確実に自身の力となっていると思います。

日々の業務に対して疑問を持ち、単調な作業、繰り返しの作業があった場合には是非エンジニアに相談しましょう。エンジニアのみなさんはそれを快く引き受け、好き勝手やりましょう。最適な技術を選択し、自身の成長につなげましょう。

力技での解決は後に大きな工数となってしまうため、新しい物事を始める際には一番最初に、効率化、自動化の観点も考えてみるといいかもしれませんね。

おわり