LayerX エンジニアブログ

LayerX の エンジニアブログです。

社内業務も(バク)ラクに ーZoom背景作成をバクラクにしたハナシー

この記事は、【2022 春 LayerX Advent Calendar(概念) 】30日目の記事です。前回はインサイドセールスチームのMJさんの記事でした。

note.com

こんにちは、SaaS事業部でデザインを担当しています森です。

SaaS事業部では経理業務をバクラクにするサービスを提供していますが、今回は社内業務を少しラクにしたお話です。

bakuraku.jp

みなさん様々なツールや仕組みで業務を効率化されていると思いますが、画像作成などのデザイン作業はなかなか人の手から離れていないのではないでしょうか?

当社でも、名前入りのZoomの背景の作成などが、社員が急増しているなかで地味に手間になってきています。

制作はFigmaを使っていて、名前を入れて画像を書き出すだけですが、地味に手間なのとデザイナー以外がその作業をする場合、そのためのライセンスが余分に必要だったりと、問題があるので自動化することにしました。

f:id:hiroakimori:20220411143451p:plain
温かみのあるFigmaでの作業

仕組みを作る上で考えていたことは以下の4つです。

  • コードを書きたくない
  • サーバーを建てたくない
  • インターフェースを作りたくない
  • メンテナンスは誰でもできる

コードを書きたくない

書きたくないです。

画像に任意のテキストを合成して生成することは難しくはないのですが、書かないですませたい。なぜって、

  • どこで動かす?
  • 何で書く?
  • リポジトリは?
  • デプロイは?
  • 誰が管理?

考えたくないですね…

当社mosa_siruの言葉を借りると「作ったものは必ず負債になる」ので、より負債の軽いものにしたかったです。

www.slideshare.net

サーバーを建てたくない

建てたくないです。

  • どこで…(以下略)

考えたくないですね…

インターフェースを作りたくない

作りたくないです。

  • どこで…(以下略)

インターフェースは極力ない方がいいと思う派です。
特定の場所(URLとか)を用意して、使い方を覚えてもらう。それも、毎日使わない機能に… 全然、行動のコストとして見合ってないように思います。

メンテナンスは誰でもできる

コードを書いたり、サーバーを用意したりすれば、それを理解できる人しか管理できなくなります。
開発メンバーが使うツールならいいかもしれませんが、開発以外のメンバーには敷居が高いですよね。

ではどうやって画像を生成するか?

コードを書かないで画像生成する方法を探します。

上記のように制作にはFigmaを使っていたのでFigmaAPIを考えましたが、読み出し系のものしかないので早々に却下。

https://www.figma.com/developers/api

検索をさまよっているうちに、APITemplate.io というサービスを見つけます。

apitemplate.io

レイアウトのテンプレートに、画像とテキストを流し込んで広告画像を量産する、ような用途向けのサービスでしたが、GUIを使ってレイアウトのテンプレートを作成でき、日本語を含むGoogle Fontが使えたりもして機能的に十分でした。

f:id:hiroakimori:20220411143720p:plain
テキストや画像にキーが設定されるので、API経由で差し替えて画像やPDFを生成できます。

インターフェースは?

バグ報告や機能要望の発言にスタンプを付けるとAirtableに起票されたり、情報の取り出し口など、日頃からSlackを使った自動化を行っていることもあり、ほぼSlackだろうと考えていました。

f:id:hiroakimori:20220411145657p:plain
情報の取り出し口

Slackをつかうメリットは、

  • 日常的に使っている
  • 誰かが使っている様子が見えるのでマネできる
  • トラブルや間違った使い方を見かけたら助言しやすい

などがあげられます。

当社プロダクトの「バクラク申請」でも、Slackで申請を承認できる機能は、承認が爆速で進むと評価をいただいており、日頃から使いなれたツールをインターフェースとする事の良さがあらわれています。

prtimes.jp

Slack + APITemplate + Google Drive + zapier

機能の目処はつきました。
Slackを起点として、APITemplateで画像生成、それをGoogle Driveに保存。それらをzapierで繋ぐことにします。

f:id:hiroakimori:20220411143902p:plain
zapierのレシピ

  • Slackの特定チャンネルに、コマンド、氏名、ふりがなの3行で投稿される
  • 氏名、ふりがなをAPITemplateに渡して画像を生成
  • 生成した画像のファイル名に、氏名や日付をつけて、Google Driveに保存
  • 保存された画像のダウンロードURLをSlackで通知
  • APITemplateから生成した画像を消去

使うとこんな感じに画像URLが返信されてきます

f:id:hiroakimori:20220411145003p:plain

生成された画像

f:id:hiroakimori:20220411145932p:plain

これで、手間だった作業がラクになりました。

余談

実は公開してから、コマンドを受け付けるチャンネルを変更していて、旧チャンネルでコマンドが呼ばれた場合、変更の案内を返信するようにしています。これはSlackならではな感じがしますね。

f:id:hiroakimori:20220411145025p:plain

余談2

予想はしていましたがハックする人がでてきました。これはこれで楽しい。

f:id:hiroakimori:20220411145044p:plain

もっとバクラクに

今回は社内業務をラクにするお話しでした。

冒頭でもご紹介したように、当社SaaS事業部では経理業務をラクに、バクラクにするサービスを提供しています。 世の中の業務をもっとバクラクにするために、仲間を絶賛募集中です。是非ご連絡ください!

LayerX 採用情報

LayerX Company Deck

open.talentio.com