RAKSUL TechBlog

ラクスルグループのエンジニアが技術トピックを発信するブログです

承認時間が半減!Slack Boltでワークフロー承認を最適化してみた

こんにちは!ラクスルのCorporate Application Developmentに所属している高橋です。
普段の業務としては社内システムの機能開発・改善に取り組んでいます。
ラクスルでは上司への承認依頼などのワークフローを管理するシステムを自社開発しています。
最近ではワークフローをSlack上で完結させる機能開発を行いました。
この取り組みにより、申請してからワークフローの全ての承認が完了するまでに要していた時間が平均6時間20分から2時間54分に短縮されて承認時間が約半分になりました。

目次

なぜワークフロー管理を自社開発しているの?

本題へ入る前に、我々が所属しているCorporate Application Developmentでの開発方針について軽く触れておきたいと思います。

  • SaaSを積極的に採用し、独自業務の価値がなければSaaSに業務を合わせる
    • SaaSにロックインされないように重要データは自社管理し、いつでも乗り換え可能にしておく
  • コーポレート業務の生産性や体験を大幅に向上させる機能や、コストパフォーマンスの良いSaaSがない機能のみ内製開発する

導入に至った背景

それでは、なぜSlack上でのワークフロー完結化を目指したのか、その背景を見てみましょう。

改善前のSlack通知
改善前のSlack通知では承認をするためにはタイトルリンクをクリックし、別の画面に移動してから承認ボタンを押す必要がありました。
そのため、承認画面に遷移するのが手間で通知を見てそのまま放置されるケースもありました。

承認画面を経ずにSlack上で完結できるようなUIを実現できれば、承認作業の手間が軽減されることを期待されて開発に至りました。

改善後のSlack通知がこちらです。

改善後のSlack通知
承認者はSlack上で申請内容を確認し、画面に移動することなくボタンを押すことで承認することができます。

どのように実現したか

今回はSlack公式のフレームワークであるBoltを採用しました。

BoltはSlackの公式で提供されているSlackアプリ開発フレームワークです。
SlackBoltを使用すると、メッセージやイベントを受信し特定のアクションを実行するSlackボットも簡単に作成できます。
現時点ではPython、Javascript(Node.js)、およびJavaで利用することができます。
今回は、チーム全体が慣れ親しんでいるNode.jsを採用することにしました。

システム構成図

承認依頼

承認処理

Slack Appsの設定

まず初めにLambdaとSlackの連携が必要です。
承認ボタンを押したときにPOSTするURL先を設定します。

Slackではインタラクティブコンポーネントという仕組みがあります。
これを使うとユーザーがボタンをクリックするアクションをトリガーすることができます。

Slack App管理画面のInteractivity & Shortcutsから設定が可能です。

Node.jsの実装例

SlackではBlock KitというUIのフレームワークが提供されており、それを利用することで簡単にボタンを表示することができます。

それでは、実際に承認ボタンを表示する例を見てみましょう。 以下のようにJSON形式でSlackに表示させたいUIを指定することができます。

approve_action_id = 'approve_action_id'
{
    block_id: "button_group",
    type: "actions",
    elements: [
      {
        type: "button",
        style: "primary",
        text: {
          type: "plain_text",
          text: "承認する",
        },
        confirm: approveConfirm(locale),
        action_id: approve_action_id,
      }
    ],
  }

詳細な設定については、公式ドキュメントを参照してください。

block_actionsに承認ボタンで指定した同じaction_idを設定することでボタンを押した時の処理が実行されます。

approve_action_id = 'approve_action_id'
app.action(
    { type: "block_actions", action_id: approve_action_id },
    async ({
      body, ack, client,
    }) => {
  // 承認ボタンを押下時の処理を書く
 }

つまずいたSlackの3秒ルール

開発が完了し、いざリリースとなった際に問題が発生しました。
それはSlackアプリにおける3秒ルールです。
Slackからのリクエストに対して3秒以内に応答がない場合は、タイムアウト扱いにされるという仕様があります。

具体的に問題となったのはコメント投稿をした場合にエラーが表示されるようになりました。
これまでの処理フローとしては以下の通りでした。

  1. 2度押し防止のため、承認/否認/コメントのみのボタンを非表示にする
  2. ワークフロー管理システムのコメント投稿APIにリクエストを送信する
  3. Slack APIにコメントが作成された旨のメッセージを投稿する
  4. 承認/否認/コメントのみのボタンを表示する

実装中に処理時間が増加し、気づかぬうちに3秒以上かかっていたようです。
一旦3と4を非同期化することで3秒以内に対応できましたが、今後は2の処理も非同期化する予定です。

まとめ

Slack上で承認作業を完結することによって承認時間を約半分まで短縮できた事例の紹介でした。
フレームワークを利用することで、Slackアプリの開発もそこまでハードルが高くないと感じました。
開発は主にRubyで行っていますが、今回のように他の言語も採用しています。
特定の技術に縛られることなく、ユーザーの課題解決に貢献できる手段を積極的に採用するようにしています。
また社内で利用されているシステムであるため、改善した際には直接ユーザーからの喜びの声を聞くことができるのもやりがいに感じています。

一番読まれた記事はコレ!RAKSUL Tech Blog 2023PVランキングTOP10!

こんにちは、ラクスル技術広報の和田です。
いつもTechBlogをご覧いただき、ありがとうございます。

2024年のはじまりに、RAKSUL TechBlogで2023年にもっとも多くの方に読んでいただいた記事を、年間PV数によるランキング形式でTOP10まで発表いたします。
是非ご覧ください!

10th place

  • OpenAPI Generator typescript-fetch を使ってみる

techblog.raksul.com

こんな方にオススメ!

  • OpenAPI のクライアントコードを自動生成する方法を知りたい方
  • typescript-axios の挙動の変化について知りたい方
  • OpenAPI のクライアントコードの品質向上に取り組んでいる方

9th place

  • StepFunctions を CDK + Typescript で構築するサンプル集

techblog.raksul.com

こんな方にオススメ!

  • StepFunctions を CDK を使って構築したい方
  • StepFunctions の基本的な使い方を知りたい方
  • AWS の各種サービスを連携させたワークフローを構築したい方

8th place

  • マイクロサービスにSagaパターンを用いて検証を行った

techblog.raksul.com

こんな方にオススメ!

  • マイクロサービスアーキテクチャにおけるトランザクション管理に興味がある方
  • Sagaパターンの概要やメリット・デメリットを知りたい方
  • マイクロサービスアーキテクチャにおけるSagaパターンの実装例を知りたい方

7th place

  • 機械学習の推論用REST APIサーバーをAmazon SageMakerで構築するまでに考えたこと

techblog.raksul.com

こんな方にオススメ!

  • 機械学習の推論をREST APIとして提供したい方
  • SageMakerを利用した推論サーバーの構築を検討している方
  • FastAPIを用いた開発に興味がある方

6th place

  • iframe で複数の管理画面を1つの統一されたサイトに見せるパターンのまとめ

techblog.raksul.com

こんな方にオススメ!

  • iframe を使って複数の管理画面を統合したい方
  • iframe を使って複数ページのサイトを構築したい方
  • 既存の管理画面をリニューアルしたい方

5th place

  • Sidekiq queues & job priorities management

techblog.raksul.com

こんな方にオススメ!

  • Ruby でバックグラウンドジョブ処理を行うシステムを開発している方
  • Sidekiq をジョブキューシステムとして活用している方
  • ジョブの優先順位付けに課題を抱えている方

4th place

  • Protocol Buffers で快適な API 開発環境を構築した話

techblog.raksul.com

こんな方にオススメ!

  • マイクロサービス化に伴い、Web API の開発を検討されている方
  • IDL の導入を検討されている方
  • Protocol Buffers の利用を検討されている方

3rd place

  • 【全2回】AWS Lambda x FastAPIによるPythonモダンAPI開発のすゝめ

techblog.raksul.com

techblog.raksul.com

こんな方にオススメ!

  • Pythonを使用して新しいプロジェクトを開始しようとしている方
  • Python開発に役立つリンターやフォーマッターなどの効率的なライブラリを探している方
  • Pythonでの開発に際して参考にしたいアーキテクチャを探している方

2nd place

  • 【Ruby】Array から Hash を作る方法7選(a.k.a. やっぱり Array#zip はかわいいよ)

techblog.raksul.com

こんな方にオススメ!

  • Array から Hash を作成する実装方法を知りたい方
  • Array#zip 以外の方法も知りたい方
  • Ruby を使っている方

1st place

  • HonoとDenoで社内ツールを作ってみた

techblog.raksul.com

こんな方にオススメ!

  • モダンな技術スタック(Hono、Deno、Twind、Alpine.jsなど)に興味がある方
  • 社内ツールの開発に携わっている方
  • 社内ツールの開発を検討している方

おわりに

RAKSUL TechBlog 2023PVランキングはいかがでしたでしょうか。
2024年もブログを通して、さまざまな技術情報を発信していきます!
引き続き、RAKSUL TechBlogをよろしくお願いします!

年末年始にソースコードのお掃除大会をした話

ラクスル事業本部サーバーサイドエンジニアの杉山です。2023年4月に新卒で入社しました。もう数か月で入社から1年とは、時の流れがはやいですね。 現在は印刷のラクスルにおける商品追加やその他運用・保守開発に携わっています。

今回の記事では、2023年12月末から2024年1月にかけて私の所属しているチームで行ったコードお掃除大会について紹介します。

続きを読む

Tech組織が成長し続ける仕組みをつくるTech Organization Enablement

こんにちは。12月1日にラクスルにTech Organization Enablementという役割で入社した宮本です。

「Tech Organization Enablement」とは?

Tech Organization Enablementという役割は、ラクスルの中で初めて作られたポジションです。私自身初めて耳にする役割であり、何をする人なのかわからない方もいると思いますので、まず最初にその役割について説明させていただきます。

Tech Organization Enablementの役割は、ラクスル事業本部のシステム統括において、組織的な成長・改善を横断的に行う役割です。 組織的な課題を言語化・分析し、組織が成長するために必要な施策を計画・推進することで、開発組織が継続的に成長できる環境・文化を構築することをミッションとしています。

この記事では、これまでの組織マネジメント経験で注力していたこと、私の組織マネジメントスタイルと、今後ラクスルでどのようなことを行っていくのかを、簡潔にお話させていただこうと思います。

略歴

2002年、電気技師として建築現場で電気工事に従事。2006年、SESに転職しエンジニアキャリアをスタート。2010年に楽天グループ株式会社に入社し、エンジニア、スクラムマスター、プロデューサー、チームリードと役割を変えながらプロダクト開発・保守・運用に従事。2015年より、楽天デリバリー、楽天Kドリームスのエンジニアリングマネージャーを歴任。2022年、コミューン株式会社のシニアエンジニアリングマネージャー、開発責任者を歴任し、コミューン事業の開発部門を統括。2023年12月、ラクスル株式会社にTech Organization Enablementとして参画。

私の組織マネジメント経験

私は直近の約8年間で、メガベンチャーとスタートアップという規模感や組織のフェーズが全く違う組織にて、エンジニアリングマネージャー、シニアエンジニアリングマネージャー、開発責任者を経験し、モチベーションが下がっていたり、成長意欲が低迷してしまっていたり、これからどのように組織を成長させていけばいいのかが不透明、といった組織をマネジメントし、自律的に長期目標を設定し成長していける組織づくりを行ってきました。

組織づくりを行ってきたと言っても、私一人が何か施策を考え実行に移すのではなく、チームや組織が潜在的に持っている成長や課題解決への意欲を引き出し、組織の総意として長期目標を設定したり、組織の理想像を言語化することで、自律的に組織が成長できる環境整備や組織の支援を行うことで、関わる人達が一丸となって組織づくりができるような仕組みを作ってきました。

中でも、特にリーダーシップを発揮してほしいエンジニアリングマネージャー、テックリード、チームリーダーといったミドルマネジメント層の方々の内発的動機と組織の長期目標を紐付けることに注力し、自力で組織を成長させることができるよう、育成・サポート・環境整備を行うことで、組織のリーダーシップの面を広げ、組織が継続的に成長していける環境を構築してきました。

組織マネジメントスタイル

組織のリーダーシップの面を広げる、とお話しさせていただきましたが、私がこれまでどのようにしてリーダーシップの面を広げてきたのかお話しさせていただきます。

私は、組織に関わる人達全員の小さなリーダーシップをはぐくむことで自律的な組織を作ってきました。

小さなリーダーシップとは、ポジションに関わらず、組織やプロダクト、プロセスに対し漠然とした課題感や不満に思うことに対して課題を明確に設定し、理想の状態に近づけるよう今の自分にできることを実行する姿勢を指しています。

漠然とした課題感や不満は、各々が考える理想の状態が作れていない、または近づけていないときに出てくることが多いように思います。 理想の状態になるためにはギャップがどこにあるのか?何をすれば理想に近づけるのか?実際に何をやっていきたいのか?という部分に焦点をあてて思考することで、それぞれの立場や状況に応じた課題設定から具体的な行動目標設定が可能になります。

また、自分たちで設定した課題や行動目標に対しては、自分たちで振り返ることができ、現状の評価や方向修正も小さなリーダーシップをもって自分たちで進めていくことができます。

小さなリーダーシップが集まることで、リーダーシップの面は広がり、良い組織の基盤となっていきますし、組織が継続的に成長していける環境を構築するためにはなくてはならない重要な要素の一つだと考えています。

ラクスルでどのようなことを行うのか?

これまで、ラクスル事業本部の開発組織はミドル〜シニアにステップアップしていく仕組みづくりが十分とは言えない状況にありました。エンジニアリングマネージャーや更に上のマネージャーになると、これまでの延長線上で役割を担うことは難しく、役割や責任が大きくなります。そのような変化の際には、十分な学習機会やフィードバック、サポートを行うことが非常に重要だと認識しております。

この状況に対し、ミドル〜シニア層への学習機会やフィードバックやサポートを組織横断的に行い、継続的に成長できる仕組みを整えることが、Tech Organization Enablementである私のまず最初のミッションです。

また、自身の入社後オンボーディングは、エンジニアやエンジニアリングマネージャーだけではなく、プロダクトマネージャーや事業のメンバーとの1on1でした。そこでは、開発組織の課題だけではなく、事業の方向性や、プロダクト開発の進め方など、いろんな視点でインプットさせていただきました。

所感として、プロダクト開発のプロセスに関しても仕組みを変えることでよくなっていくだろうな、と思える部分がありました。組織づくりだけにとどまらず、直接プロジェクトに関わっていくことで課題の解像度を上げ、より洗練されたプロダクト開発プロセスの構築にもチャレンジしていきます。

さいごに

私のこれまでの組織づくりの経験を活かし、組織が確実に拡大・成長していける仕組みを構築し、盤石な組織基盤を作っていけるよう尽力することで、ラクスルに所属するエンジニアメンバーが「ラクスルの開発組織って働きやすくて、チャレンジできて、成長できて、超楽しい!!」と感じ、成長し続けることができる開発組織を作っていきます!

【24新卒】ラクスルエンタープライズの内定者インターンブログ

はじめに

こんにちは!今回ラクスルのエンタープライズで2名の24新卒内定者が内定者インターンをさせていただいたため、インターンを通して行ったことや、学んだことなどを振り返っていきたいと思います。

ラクスルに興味がある学生にとって参考になれば幸いです。

ラクスル エンタープライズについて

ラクスル エンタープライズは、企業向けに印刷の管理や販促業務の生産性向上を支援するサービスです。

https://enterprise.raksul.com/

ラクスル エンタープライズ

木下

こんにちは、ラクスルのエンタープライズでサーバーサイドエンジニアとしてインターンさせていただいている木下です。内定者インターンは、2023年8月から週2,3ペースで参加しています。

インターンで行ったことを振り返っていきます!

管理画面上での管理者権限の管理機能

エンタープライズにはオペレーター用の管理画面があり、その管理画面にアクセスしたり、情報を変更できる管理者権限をYAMLファイルにユーザ名を書くことで管理していました。

しかし、この運用では新しくメンバーが増えて権限を付与する際に、都度エンジニアに依頼し、エンジニアがYAMLファイルを変更したPRを作成するという手間が発生していました。

そのため、YAMLファイルで管理していた権限をデータベースに入れて、管理画面上で権限を変更し管理することができるようになったことで、セールスの方々で管理できるようになり、エンジニアの手間を減らすことができました。

管理画面の管理者権限ページ

カタログサイトのリプレイスのRPCのproto定義、RPC作成

エンタープライズのサービスには、カタログサイトという機能があり、これがRailsのviewで実装されていたのですが、機能が大きくなるとともにviewでの限界を感じたため、フロントエンドをNext.js、通信にRPCを使うアーキテクチャにリプレイスしています。そのリプレイスで、いくつかのProtocol Buffersの定義やRPCの実装に関わりました。

Ruby on RailsはAPIモードではREST APIの開発は経験していましたが、RPCを使った開発は初めてだったため、RESTとRPCでの通信の違いや、Rails側ではどのようにリクエストが来てレスポンスを返すのか経験することができ、学びになりました。

カタログ商品の並び替え機能

カタログ商品という機能があるのですが、カタログ商品の一覧画面で商品を前や後ろに移動してほしいという要望があり、その都度オペレーターさんでわざわざ商品を入れ直すなど手間がかけていました。そのため、カタログ商品の並び順を変更する機能を実装しました。

実装に関しては、仕様や実装方法を最初から自分で決める必要があったため、どのように運用したり並べ替えたいのかをPdMの方に質問したりしながら仕様を決めていきました。

その際、複数案を考えた時は、それぞれのメリットデメリットであったり、考慮すべき点を出しながら、どの案にするかを考えて決めていきました。gemを使うことを検討した際には、似た動作をするgemが複数ある中で、どのgemが1番適しているかをドキュメントやソースコードを見たり、実際に触ってみたりして決めていきました。

結果的に、実装はオペレータ用の管理画面上で並び番号を入力することで更新できるように実装しました。また、今後ユーザ側の画面で変更ができても対応できるような設計になるように考慮したので、今後の拡張性もある実装にできたのではないかと思います。

仕様や実装方法を自分で1から考えていき、PdMや開発メンバーにフィードバックやレビューをもらいながら決めていくことが大変でしたが、とてもやりがいがあり、楽しかったです!

その他の学び

検証環境で動作確認すること

本番環境では、開発環境で考えていなかったデータが入っていることがあり、検証環境で確認すると予想外の動作になってしまうということがありました。

あまり検証環境やQAの大切さがわからなかったのですが、今回検証環境で動作検証をして発見した事象があったため、大切さを身をもって知りました。

頻繁にレビューをもらったり質問すること

仕様や実装方法を決める際に、まずコードを書くのではなくNotionにドキュメント化してレビューをもらうことで、不安点や懸念点を解消することができ実装後の手戻りが少なくなったため、実装フェーズに入ってからはスムーズに実装を進めることができました。

また実装中も仕様やドメインについて疑問点があった際には、都度メンターさんやチームメンバーの方に聞くことで、後から聞いて修正することになったなどの手戻りがなく、不安なく進めることができました。

そのため、方針が定まってないことは一旦チーム内で理解を得たあとに実装することが大事だと学びました。

進捗や考えていることをアウトプットすること

インターン中に今やっていることや詰まったこと、疑問に思ったことをSlackのスレッドや日報に書くと、メンターさんやチームメンバーの方がアドバイスを教えていただけて、疑問や問題を解消できたり新しい知見を得られたりしました。

まとめ

インターン期間を始めて5ヶ月ほどですが、いろいろ経験できてとても学びのある楽しいインターンでした。

ラクスルの事業に関する解像度も上がり、入社がとても楽しみになりました。技術的にもエンジニアとしても成長できるようにこれからも頑張っていきたいです。

池原

初めまして!ラクスル24新卒内定者の池原です。ラクスルのエンタープライズで、フロントエンドエンジニアとしてインターンしています。2023年の8月から週2日フルリモートで勤務しています。そのインターンも12月末で終了することになったので、振り返りの意味も込めて、やったこと・学んだことを紹介できればと思います!

サービスサイトの機能追加

私は、主にサービスサイトの機能追加・修正を担当しました。サービスサイトは、顧客がラクスル エンタープライズを知ろうとしたとき、Web検索などを経由して最初に訪れる場所です。サービスの概要、ご利用事例、セミナー開催情報などのコンテンツを提供しています。

技術スタックとしては、Nuxt.jsとmicroCMSを用いた静的サイトであり、一般的なJamstackの構成です。Nuxtは使用経験があったので、とりあえず手を動かしてタスクを進めることはできました。具体的には、導入企業ロゴ一覧の追加などのタスクについて、UIマークアップからCMSの繋ぎ込みまで一気通貫で任せていただきました。

HTML/CSSの基本を抑えていたことで、UIマークアップはスムーズにこなすことができました。JavaScriptでロジックを書いていくと、非同期関数や変数の命名などでつまずいたり、指摘をいただくことが多く、プログラミングの基本的な部分を理解していた”つもり”になっていたことに気づきました。

実装した導入企業ロゴ一覧

記事のページネーション機能の実装

一番時間をかけて取り組んだのが、記事一覧のページネーションの実装です。ページネーションとは、多量のコンテンツを複数ページに切り分けて表示することで、ユーザーがコンテンツを探しやすくする機能です。

実装方法の調査から任せていただき、いくつかのアプローチの中から、メリット・デメリットや今後追加する機能への影響等を考慮して、設計を行いました。

その後、とりあえず動くものをコーディングしてから、コードレビューで次のような指摘がありました。「あるべきものが、あるべきところに置いてないよね」というクラスや関数の責務に関する指摘でした。SOLID原則等は書籍で読んだことのある知識でしたが、ここについても分かっていた”つもり”だったのだと思います。

しかし、メンターの方と何度も修正とレビューを繰り返すことで、プログラミングの概念的な部分の理解が少しずつ深まり、コードも最終的にアクセプトをいただくことができました。このページネーション実装は、プラクティスの題材として自分を成長させてくれたと思いますし、最後まで、フィードバックや相談に応じてくださったメンターの方にとても感謝しています。

まとめ

5ヶ月のインターンで、チームでの開発やセールスメンバーとのやり取りなど、普段できない様々な経験をすることができました。また、自分の利点、欠点に新しく気づいたところもありました。

入社に向けて、また入社後も、より良いエンジニア像に近づけるように、研鑽を続けたいと思います!

ラクスル エンタープライズのここがイイ!

ここでは、ラクスル エンタープライズでインターンして感じた魅力をお伝えしていきます!

どんどん大きくなる開発を経験できた

ラクスル エンタープライズは他のチームに比べるとサービスが比較的新しく、ソースコードも比較的綺麗でした。

しかし、サービスに対して事業がどんどん拡大していき、顧客のニーズにサービスを対応させるために新しい機能を追加していたり、初期の実装で対応できなくなってきた機能をリプレイスしたりしています。

そのスピード感のある開発と、非連続的に成長する事業に参加することができ、とても学びも多く、楽しいインターンでした!!

気軽に相談できる環境

今回、リモートでのインターンだったのですが、勤務中はDiscordで繋がっていて、声かけしたり、Slackでメンション飛ばすと割と即レスで返信が返ってきます。

実装や仕様のことで相談や気になったことがあっても、気軽に解消できる環境だったので、メンターさんやチームメンバーの方々にはとても感謝しています。

また、ペアプロやモブレビューなども気軽に行えるため、新しい知見やドメインの知識をたくさん得られて、ペアプロの素晴らしさに気づきました!

今回は、エンタープライズでインターンをしたため、エンタープライズでの話を中心に書きましたが、ラクスル全体でも共通することも多く、どのチームも心理的安全性の高い素晴らしいチームだと思います!

おわりに

以上、木下・池原のエンタープライズでのインターン体験記でした。受け入れをしてくださったエンタープライズ開発チームの皆さまありがとうございました。

toCのイメージが強いラクスルですが、ラクスル エンタープライズをはじめとするtoBサービスの開発にも携わることができます。興味のある方は、お気軽にカジュアル面談や座談会にお申し込みください!