key | value |
---|---|
Name | 南 優也 (みなみ ゆうや) |
@mooonyman | |
GitHub | yuya373 (Yuya Minami) |
はてなブックマーク | mooonymann |
- Ruby
- Ruby on Rails
- Rust
- actix-web
- diesel
- axum
- sqlx
- TypeScript
- React
- ReactNative
- Expo(v33.0.3)
- Redux
- TanStack Query
- Scala (v2.11)
- Finagle
- Finch
- TwitterServer
- Emacs Lisp
2020年8月にリリースされたクラウド型法人カード「paild(ペイルド)」の開発に取り組みました。 paildのカード開発チーム(PO1人、デザイナー1人、エンジニア3人)に属し、プロダクトオーナーが収集した要望をGitHub Issueにまとめ、エンジニアがその実現方法を検討し、タスクに分割して実装を進めました。
技術スタックは、フロントエンドにReactとTypeScript、バックエンドにRust、axum、sqlx、utopiaを使用しました。主な機能には、法人向けプリペイドカードの発行、支出管理機能、証憑管理機能、API連携(freee、MoneyForward)などが含まれます。また、ユーザーがログイン不要で領収書ファイルや税区分、取引種目を登録できる機能を実装し、操作性を向上させました。
-
開発環境とチーム編成
- 開発環境:
- フロントエンド:React, TypeScript
- バックエンド:Rust, axum, sqlx, utopia
- チーム編成:カード開発チーム(PO1人、デザイナー1人、エンジニア3人)
- 開発環境:
-
当時の状況
-
課題
-
経理担当者がリアルタイムな支出の把握に加えて領収書等での証憑の情報も管理したい (電子帳簿保存法対応)
-
経理担当者が会計処理に必要な費目、金額の情報の回収を簡単にしたい
-
インボイス制度開始後に必要な登録番号のチェック等の経理担当者の負担の軽減
-
カード利用者側に多いスマートフォンユーザーでの煩雑なログイン、ファイルアップロード、品目の入力を簡単にしたい
-
-
-
行動・判断
- POが整理した要望をチームで設計に落とし込み、実装まで進めた。エンジニアの中に、リーダーや設計担当がいるわけではなく、エンジニア同士で議論する中で、その時点で最も良い設計を採用するスタイルを取った。
- 実装
- 利用明細にレシート等の証憑を添付できる機能を実装
- 利用通知のメールにファイルを添付して返信することで証憑をアップロードできるようにする機能を実装
- アップロードされた証憑からOCRによって登録番号、金額、利用日等の情報を読み取る機能を実装
- 利用通知のメールからログイン不要で証憑のアップロードと支出の入力ができる機能を実装
- OCRによって読み取られた登録番号によって費目の入力を簡略化する機能を実装
- 実装において気を配ったこと
- 段階的な機能拡張に対応するために最初は登録番号だけをOCRで読み取る機能だったが、読み取り後のデータを保存しておいた。後にOCR結果の金額も利用したいニーズが生まれた時に再度証憑をOCRにかけることなく、DBのマイグレーションだけで済んだ
- ログイン不要画面ではセキュリティの観点からAPIで返すデータに気を配り、必要最低限のデータのみ返すように実装した
-
成果・結果
- ユーザーがログインすることなく、必要な情報を登録・更新できる体験を作ることができた。飲食店の店長など、日常的にパソコンを利用しないユーザーから非常に利用しやすくなったとの反響を得て、製品独自の強みを作ることができた。
- 管理業務の簡略化によって多数のカード利用者に対してチェックをしなければならない大企業等のユーザーへの訴求に成功した
- リリース記事
- プロジェクト期間:1~2ヶ月程度
- 開発環境とチーム編成
- 開発環境:
- フロントエンド:React, TypeScript
- バックエンド:Rust, axum, sqlx, utopia
- チーム編成:カード開発チーム(PO1人、デザイナー1人、エンジニア3人)
- 開発環境:
- 当時の状況
- 課題:
- 月ごとの上限を設定する機能があったが、顧客のニーズを十分に満たすには不十分であった。顧客からのフィードバックを基に、より詳細な制限を追加する必要があった。顧客の要望をプロダクトオーナー(PO)が整理し、エンジニアが仕様や設計について議論しながら決定することとなった。
- 課題:
- 行動・判断
- 実装
- 初期:
- 月額の利用上限(翌月1日にリセット)
- 追加:
- 日次の利用上限:毎日0時に利用可能額を設定額まで回復
- 週次の利用上限:毎週日曜に利用可能額を設定額まで回復
- 年次の利用上限:年初1月1日に利用可能額を設定額まで回復
- 1決済あたりの利用上限:上限を超える決済が不可
- 合計の利用上限:設定以後、通算で利用できる使い切り額を設定
- カード利用の期間制限:開始日~終了日の間の期間でのみ利用できる
- 初期:
- 実装において気を配ったこと
- エラーメッセージの考慮: 複数の上限に同時に該当する場合、ユーザーに分かりやすくエラーメッセージをまとめて返すようにした。
- 条件の判定: 年次、週次、日次の各制限を効率的に計算し、複数の条件が組み合わさった場合でも高いパフォーマンスを維持するための計算処理を実装する必要があった。
- 実装
- 成果・結果
- 顧客に早く価値を提供するため、コア機能を小分けにして実装し、市場に順次リリースすることで、迅速に顧客のニーズに応えることができた。
- リリース記事
- プロジェクト期間:1~2ヶ月程度
- 開発環境とチーム編成
- 開発環境:
- フロントエンド:React, TypeScript
- バックエンド:Rust, axum, sqlx, utopia
- チーム編成:カード開発チーム(PO1人、デザイナー1人、エンジニア3人)
- 開発環境:
- 当時の状況
- 課題:
- ユーザーが日々の取引データを手動で会計ソフトに入力する手間を省き、ミスを減らすために、会計ソフトとシステムのデータ連携が求められていた。具体的には、freeeやマネーフォワードなどの主要な会計ソフトとのAPI連携を構築し、自動的に取引データを転送する必要があった。また、これにより会計処理の効率化と精度向上を図ることが目標であった。
- 課題:
- 行動・判断
- 実装
- freee, マネーフォワードとのAPI連携を実装
- CSVによる弥生会計、勘定奉行への連携を実装
- 実装において気を配ったこと
- API仕様の調査と対応:freeeやマネーフォワードのAPIドキュメントを調査し、エンドポイントごとの制限やデータフォーマットの違いを把握することに注力した。特に、freeeの場合、自社で実際に利用しながらAPIと実際の画面を照らし合わせて検証を行い、API仕様書通りに動かない点を詳細に調査しエラーを特定・解決した。
- 想定外の不具合対応:上述のAPI仕様書通りに動かない点や、API連携の設定はできるもののユーザーの権限によってデータの書き込みができない等の想定外の不具合にも対応した。
- 実装
- 成果・結果
- 会計ソフトとのスムーズなデータ連携を実現し、ユーザーの手間を大幅に削減するとともに、取引データの正確性を向上させた。これにより、会計処理の効率化と精度向上を達成した。
- リリース記事
-
課題:
-
SaaS毎にカードを発行するユースケースが一部ユーザーの間で存在していたが、従業員に配るカードとは性質が異なるものの、同じUIを提供していた
-
SaaS毎にカードを管理する専用のUIを用意して便利なユースケースを広め、利用を活性化したい
-
-
実装
- SaaS毎にバーチャルカードを発行でき、リアルカードは発行できないようにする機能
- カード毎にユニークなメールアドレスを払い出して、領収書の回収を簡単にする機能
- 直近の支払情報と証憑の回収状況などが見れる一覧画面
-
成果・結果
- リアルカードは発行できないようになり、カードに他の利用者がいないことで
- 対象サービスのみに影響するカードの一時停止ができ、緊急時の対応がシンプルになる
- カードの目的外利用を防止できる
- 払い出したメールアドレスにSaaSからのメールを集約することで領収書の回収を自動で行なえる
- SaaS契約にまつわる情報を集約して可視化し、実効性のあるSaaS管理を行なえる
- リアルカードは発行できないようになり、カードに他の利用者がいないことで
-
リリース記事
- 課題
- 年・月での利用明細の検索では証憑の回収確認や支出のレビュー等のチェック業務には機能が不足していた
-
実装
- 証憑の登録状況やレビューの状況等の検索条件の拡張
- 表示する項目、検索条件をセットで保存できる機能を実装
- 保存された検索条件に該当する利用明細がある場合にメールで通知する機能
-
成果・結果
- 「利用後N日経過しているが、証憑が登録されていない利用明細」や「証憑が登録されているが、レビューがまだの利用明細」等、日々のチェック業務で利用しやすい検索条件を作ることができるようになった
- 定期的に行うチェック業務で、毎回検索条件を設定することのないように名前を付けて保存できるようになった
- 設定された検索条件に該当する利用明細をメールで通知することによってさらに管理担当者の業務負荷を下げることができるようになった
社内の運用チームが使う管理画面
- ウォレットを凍結
- ウォレット毎の管理者のメールアドレスを取得
- 残高証明書等の作成に必要な情報の取得
など、運用チームが必要な機能が実装されている管理画面
- フロントエンド
- React, TypeScript
Rust, axum, sqlx等
- カード番号やPIN等の情報を扱うサービス
- 印刷会社にリアルカードの発行を依頼したりもする
- PCI-DSSの要件を満たすため他のサービスとは隔離されている
カード券面のデザイン修正等で必要になった改修を行った
職務: ソフトウェアエンジニア 環境: Ruby(2.x), Ruby on Rails(5.x), Grape(0.19) MySQL(RDS), Redis(ElastiCache), ReactNative, Expo, Redux, ECS, Amazon Elastic Search Service
- 結婚式準備の相談サイト【maricuru】のアプリ開発
- 既存コードのTypeScript化
- パフォーマンスチューニング
PureComponent
,react-redux
のConnect
等を使ってrender
回数を減らすrequestAnimationFrame
での遅延レンダリング- カルーセルでのオンメモリ状態の画像を減らすことでのメモリ使用量の削減
redux-thunk
を用いてコンポーネントから副作用のあるコードの分離- 画像アップロード方法の改善
- クライアント → サーバー → S3 から クライアントから直接S3へアップロードするように
- 上記アプリのAPI開発
- パフォーマンスチューニング
- 遅いクエリの改善
- index追加
- クエリ自体の修正
- n+1の修正
- jbuilderからprocore/blueprinterへの移行
- 遅いAPIにページネーションの導入
- 遅いクエリの改善
- imgix導入
- 既存インフラのterraform(0.11.11)化
- cronからECS Scheduled Tasksへの移行
職務: Webアプリケーションエンジニア 環境: Ruby(2.x), Ruby on Rails(4.x), PostgreSQL(RDS), Redis(ElastiCache), Webpack, React, Redux, ECS, Scala(2.11), Finagle, Finch, Elastic Beanstalk, Amazon Elastic Search Service
- 貸し会議室・レンタルスペースの検索・予約なら | インスタベースの開発
- バックエンド
- Ruby, Ruby on Rails
- Sidekiq, AWS Batchを使った非同期,バッチ処理
- Google Calendar連携
- 決済を非同期にする
- 検索時の合計料金
- フロントエンド
- Haml, Sass
- React, Redux, Immutable.js等でのSPA、コンポーネント開発
- 検索ページ
- スペース登録、編集フォーム
- トップページ
- フロントエンドのパフォーマンスチューニング
- オフスクリーンイメージの遅延読み込み
- jsの分割
- Reactコンポーネントのパフォーマンスチューニング
- webpackのアップデート(1.x -> 4.x)
- CI, CD
- Circle CI
- eslint, stylelintでリント
- Rspec, capybara等でテスト
- バックエンド
- 主に検索ページで使われるAPIサーバーの開発
- Scala, Finagle, Finch
- 管理画面はTwitterServer
- JSONを返す
- Web(XHR)、Rubyからアクセス
- DB
- PostgreSQL(RDS)
- Elastic Search(以下、ES)
- ES内ドキュメントの検索、更新、追加、削除
- API
- 日時による検索
- 緯度・経度による検索
- フリーワードによる検索
- 都道府県、設備等の条件による検索
職務: サーバーサイドエンジニア 環境: Ruby(2.x), Ruby on Rails(4.x), MySQL(RDS), Redis(ElastiCache), CloudFront, EC2等
- スマートフォンゲームのAPI開発
- ガチャ、ログインボーナス、インゲーム開始/終了、キャラクター合成/進化等