複雑な配送作業を効率化せよ！Slack Bot「カイルくん」をインターン生が開発した話
こんにちは！
Stroboでエンジニア・カスタマーサポートとしてインターンをしている、東大4年生の大村瞬也（おおむらときや, @tttockllll）です。
Stroboでは名字を音読みしてダイソンと呼ばれています。
ぜひ気軽にTwitterのフォローしてくださいね〜
今日は、私がインターンとして働いているStroboで行なった、配送作業を効率化する「カイルくん」を生み出した背景・内容についてお話したいと思います！
カイルくんとは？
カイルくんとは、手作業で行なっている配送作業を楽に、安全に効率化させるためのSlackアプリです。
それでは、詳しく説明していきたいと思います。
Stroboは、すべての製品を社内で製造・発送
Stroboではすべての製品を社内で製造し、手作業で梱包して発送しています。
私たちが作っているプロダクト製品は一般的には「工場で生産しAmazon経由で販売する」手法が主流ですが、あえてそうしないのには理由があります。
それは、機器使用開始までの体験が向上するからです！
私たちの製品は、通常の製品同様、製品が届いてから利用者様ご自身にWi-Fiに接続いただき、設定を行なっていただく必要があります。
しかし、接続設定の段階で、うまく接続ができなかったなど利用者様の負担が増える場合があります。
また、お客様は少しでも早く利用したいのに、製造・販売を行う私たちが、手作業でお客様の情報と機器を紐づけて配送を行うため、使用開始まで時間がかかり、体験として良くないものとなっていました。
発送フローがより大変になってしまった
機器到着後のお客様に作業していただく手数を減らすことで、使い始めるまでの体験を向上させることに成功しましたが、その分Strobo社内の作業工数増加してしまいました。
注文されたお客様の住所を伝票に印刷し、お客様の情報を機器と紐付け、手で梱包し、配送情報を入力し......という作業を毎配送ごとに行うのは大変非効率的でした。
また、配送までに情報を他部署間でやり取りを行うため、情報がきちんと伝わらない危険性がありました。
また、これらの作業はお客様の大切な情報を扱うため、ミスが許されません。
そのため、責任者の対応や作業が都度必要でした。
効率化が大好きな私は、この一連の作業を「楽に」「安全に」できないかと考えました。
実現すれば、空いた人的・時間的リソースをより高次なアクションに割くことができるようになるはずと確信を持っていたからです。
そこで今回は、Stroboで使用しているコミュニケーションツールSlack上でこれらの作業を完結させられるようにしました。
「カイルくん」誕生
というわけで、社内 Slack アプリ「カイルくん」が爆誕しました！
（卒業された先輩インターンから受け継ぎ、改善・拡張したものです）
カイルくんの主なスキルは以下のとおりです。
① 新規で注文されたお客様の情報を一括で取得し、エクセルファイルを作成する
Stroboでは注文をStripeで管理しています。1件の注文情報を見て1件の伝票を印刷するという手順を踏む必要がありましたが、カイルくんによって一括で確認・伝票印刷できるようになりました。
どれだけ頑張っても1件あたり2分はかかっていましたが、カイルくんの利用開始後全件で1分程度に短縮されました。
② 注文内容や発送情報に注意や変更を加える
梱包から発送までの実作業とお客様とのやりとりは、それぞれ別担当者が行っています。
そのため、発送時の注意やお客様のご要望がある場合には引き継ぎを含めたコミュニケーションが発生してしまい、別の業務を中断せざるを得ないこともありました。
しかし、この機能によって担当者間のコミュニケーションや業務を円滑にすることができました。
③ 機器とお客様の情報の紐付け確認
梱包前に、どの機器Noがどのお客様のものなのかを手作業で紐付けているのですが、人が行うとどうしても登録忘れ・ミスが発生します。
これを防ぐために管理画面（RailsのActive Admin）を直接操作する必要があったため、責任者以外が触るのは非常にリスキーでした。
しかし、カイルくんの実装によって一瞬で全メンバーが安全に確認することができるようになり、責任者不在でも梱包作業者が自走できるようになりました。
※ 実在しないIDです。
性質上ブラウザで操作する必要があったため、ここだけSlack外での実装です。
最近のトレンドである「ニューモーフィズム」を用いて、直感的かつ親しみやすいデザインにしました。
※ニューモ―フィズムとは…
以前広く使われた「スキューモフィズム」のようなリアルな質感を持ちつつも、柔らかさやシンプルさを追求したデザイン手法です。
（スキューモフィズムは背景から浮き上がらせたりくぼませたりする表現のことです）
ユーザーにとても親しみやすい印象を与えることができます。
「ニュー」と「スキューモフィズム」を組み合わせた造語です。
④ 退会処理
ここまでは発送作業時の対応ですが、カイルくんは退会作業も効率化しました。
退会作業時には、機器とお客様との紐付け解除のみならず、返金の要不要の確認など膨大な作業が必要です。
送られてきた退会フォームとStripeの様々なページを行ったり来たりしながら入力していました。
一方カイルくんのスキルでは、ワンストップで退会処理を完了させることができます。返金の要不要も自動で判別してくれるので、考えることも劇的に減少しました。
こだわりのデザイン
カイルくんを作成する上では、特に以下の点に注意して作成しました。
- PCスキルがあまりない人でも簡単に扱えること
- 押し間違いなどのミスを極力少なくすること
Slack BotはBlock Kitが誕生して以来、表現力が大幅に向上しました。
アイコンや文字の太さ、ボタン配置やバーの色、絵文字などを凝ることで、次に押すボタンやお客様の状態が直感的にわかるようにしました。
Slack Botを支える技術
TypeScriptとbolt-jsを用いて開発しました。
bolt-jsはSlack公式のBot開発用フレームワークです。
難しいことを意識しなくてもすぐにSlack Botを作成することができます。
ほとんどの処理が以下のような簡単な記述で実現できるスグレモノです。
const receiver = new AwsLambdaReceiver({ signingSecret: YOUR_SIGNING_SECRET });
const app = new App({
receiver,
token: SLACK_BOT_TOKEN,
});
app.command("/command-name", async ({ ack, context, payload }) => {
// リクエストを正常に受け付けたことを知らせる
await ack();
// ここで何らかの処理を行う
// Slackにメッセージを投稿する
await app.client.chat.postMessage({
token: context.botToken,
channel: payload.channel_id,
text: "hoge fuga"
});
});最近のアップデートにより、TypeScriptでの補完が強化され、開発体験が向上しました👏
さて、実際にカイルくんが投稿しているメッセージはただのテキストではなく、ボタンなどの装飾がついたリッチなものでした。
デフォルトでこれを実現するには、下図右のように長いjsonを渡す必要があります。
これでは設計時の見通しも悪く、メンテナンスもしづらいでしょう。
しかし、jsx-slackを使うとこの問題が一気に解決できます。
下図左のようにHTMLライクな記述で表現できるようになるのです！
作成したものは AWS Serverless でデプロイしています。
構成図は以下のとおりです。
（ Lambda が2つありますが、これは Slack アプリには3秒以内にレスポンスを返さなければならないという仕様があるためです。
1つ目の Lambda がイベントを受け取ったら先にレスポンスだけ返し（破線部）、実際の処理は2つ目の Lambda に任せる形をとっています）
おわりに
Slack Bot「カイルくん」を作成し、大変だった配送・退会作業を効率的かつ簡単にすることができました。
カイルくんがいるおかげで、より多くの仕事を、より短時間のオンボーディングで責任者以外にも割り振ることができるようになりました。
この作業に割く時間的・人的リソースを減らすことができ、さらに高次のことに手を回せるようになりました。
自分の作成したツールによって組織の成長速度が早まるのを実感し、大変いい経験になりました。
Slack Botは意外と簡単に作れてしまうので、ぜひみなさんも身の回りの大変なものをサクッと効率化してみてください！
Stroboで働きませんか？正社員・インターン募集しています！
現在Stroboでは、様々なポジションで正社員・インターンの採用を行っております。ご興味のある方は、YOUTRUSTのStrobo企業ページをご覧ください。
※募集要項をご覧になるには、YOUTRUSTの登録が必要です。
お待ちしております！
この記事が気に入ったらサポートをしてみませんか？