📮

全てがTypeScriptで動く「クラウド郵便 atena」を支える技術スタック

2022/03/11に公開

初めまして! クラウド郵便サービス「atena」を開発・運営する N Inc. 共同創業者・エンジニアの北方 (@Yk_0n)です。

今回は、atenaを支える技術スタックについて紹介したいと思います!

そもそも クラウド郵便サービス「atena」とは?

まず初めに、弊社の「クラウド郵便サービス atena」について簡単に紹介したいと思います。

https://atena.life/

クラウド郵便とは、その名の通り 郵便物をクラウド化するサービス です。

具体的には、atenaが郵便物をお客様の代わりに受け取り、管理・転送・中身のデータ化(PDF化)を行うことで、郵便物の対応から解放されるサービスとなっています。

atenaが受け取った郵便物はWebポータルから確認・操作・管理ができるようになっており、郵便物現物に触れることなく日々のコーポレート業務を進めることができます。

機能

atena サービスサイトより: https://atena.life/

郵便物管理の仕組みと工夫

atenaでは日々大量の郵便物のデータ化・開封・発送を行っており、取り違えのリスクや紛失のリスクがあります。

そのリスクを最大限減らすため、atenaでは郵便物1つ1つに対してIDを発行し、IDを印字したQRコードを貼り付けています。このIDをピックアップや発送時にスキャンし、オペレーターや作業日時などのデータを記録して突合を行うことで郵便物をトラッキングできる仕組みを採用しています。これにより、万が一インシデントが起きてしまった場合でも、素早い調査や確実な原因究明を行うことができる体制を取っています。

この他にも、細かい現場レベルでの安全対策、確認体制などを行い、システムと人力の組み合わせでインシデントを未然に防ぐ取り組みを日々行っています。また、自社内でオペレーションを行っていること、改善・対策をスピーディーに行うことができているのも弊社の特徴だと考えています。

atenaを構成するシステム

atenaでは、弊社のオペレーションセンターにお客様の郵便物を集約し、弊社のスタッフが郵便物のデータ化や管理をおこなっています。
この裏側の作業をオペレーションと呼び、オペレーションを行うスタッフをオペレーターと呼んでいます。

atenaは、このようなオペレーションで使用するシステムを含めて、4つのシステムで構成されています。
(他にも管理者用の画面や、オペレーション用のWebポータルなども存在しますがここでは割愛します。)

システム構成図

概要 使用者 動作プラットフォーム
バックエンドAPI ユーザー / オペレーター HTTP
ユーザーが使用するWebポータル ユーザー Webブラウザ
オペレーションで使用するスマホアプリ オペレーター iOS
オペレーションで使用するWindowsアプリ オペレーター Windows

バックエンドAPI

バックエンドAPIは、全てのシステムで使用されており、HTTP(REST)を通じてコールすることができます。

バックエンドAPIには、NestJS + TypeORMを採用しています。

開発速度向上のため、バックエンド・フロントエンドともにTypeScriptで構築したいという意向があり、NestJSを採用しました。

(2020年5月のリリース時は、エンジニアが私一人だったこともあり、出来る限りスピーディーに開発したいという意図がありました。)

ユーザーが使用するWebポータル

ユーザーが使用するWebポータル

ユーザーが郵便物を確認し、管理するためのWebポータルには、Next.js + TypeScript + Reactを採用しています。

また、UIライブラリにはAnt Designを採用しているほか、細かい部分やAnt Designでは足りない部分についてはstyled-componentsを用いてコンポーネントのカスタマイズ・デザインを行っています。

オペレーションで使用するスマホアプリ

オペレーターが郵便物のピックアップを行う際に、手元で郵便物の情報を確認できるiOSアプリケーションを開発しています。郵便物は多くの棚に分割されて保管しているため、オペレーターが現物を探す際には、このスマホアプリを使用してピックアップを行なっています。

このスマホアプリには、React Native + TypeScriptを採用しています。一部、ネイティブAPIとの連携が必要な箇所があり、React Nativeとのブリッジを実装している箇所もあります。

オペレーションで使用するWindowsアプリ

オペレーターが郵便物の登録(データ化)、スキャンデータのアップロード、発送処理を行うために、Windowsのアプリケーションを開発しています。
このWindowsアプリでは、Electron + Next.js (SSG) + Reactを採用しています。専用のスキャナーとの連携や、ラベルの印刷などを行っている関係で、一部ではffiを通じてWindows APIにアクセスしています。

atenaを支えるインフラ

インフラモニタリング

atenaでは、アプリケーションの実行環境として、Kubernetesを採用しています。具体的には、AWS上に構築したEKSクラスタにデプロイしています。

Kubernetesへのデプロイは、Github Actionsを用いてCDを行なっており、デプロイ作業は自動化されています。

また、エラー通知にはSentryを採用し、アプリケーションのエラーの監視を行なっています。

https://sentry.io/

パフォーマンスモニタリングについては、AWSのサービスであるCloudWatchを用いて行なっています。

全てのシステムにTypeScriptを採用してみて

このように弊社では、全てのプラットフォームでTypeScriptが採用されていますが、現在の所、この技術選定は良かったと考えています。
例えば、TypeScriptという言語を理解している方であればコードが読めるため、特定の言語のみの知識があるメンバーのリソースが足りない・余ってしまうと言う事象が発生しにくいと感じています。
特に、弊社はアーリーフェーズのスタートアップのため、きれいなタスク配分やリソース配分が出来る体制は整っていません。そう言った環境下では、全てのプラットフォームを同一言語で開発するメリットは大きいと考えています。また、エンジニアリングメンバーの共通言語があることで、TypeScript/JavaScriptのディープな話ができるというのもメリットの一つです。

他にも、潤沢なNode.jsのライブラリ・フレームワークを活かすことが可能である点などもメリットとして感じています。バックエンドからフロントエンド、スマートフォンアプリ、デスクトップアプリまでを開発できるというのは、素晴らしいライブラリ・フレームワークのお陰です。

終わりに

atenaは2020年5月にリリースし、多くのお客様にご利用いただいています。本当にありがとうございます!

↓ 導入事例も公開しております!

https://atena.life/cases

今後も、郵便物をより便利に、コーポレートや総務の方々をサポートするサービスとして、機能改善・機能開発を行っていきたいと考えています。

そんなatenaで、よりスピーディーに、クオリティの高いコード・プロダクトを生み出すメンバーも大募集中です!

副業・転職問わず募集していますので、TypeScriptを書きたい方、フルスタックに色々なプラットフォームで開発したい方など、お待ちしております!

atena株式会社

Discussion