こんにちは、プロダクトエンジニアのa2cとutakahaです。
SmartHR PlusというSmartHRのアプリストアの開発をしています。 このアプリストアは、SmartHRをもっと便利にご利用いただきたいというコンセプトで現在約50のアプリを掲載しています。
我々のチームでは、SmartHR Plusにアプリを掲載していただいているパートナーの利便性向上や価値提供を目的に、『SmartHR Plus For Partners β版』というパートナー専用サイトの提供準備を進めています（乞うご期待！）。
この記事では、SmartHR Plus For Partners β版を開発する背景と技術選定について紹介できればと思います。
SmartHR Plus For Partners β版の紹介
SmartHR Plus For Partnersは、SmartHR Plusにご参画いただいているパートナーに向けた専用サービスです。このサービスは、アプリストアとしてのプラットフォーム事業を運営するにあたり、最終的にご利用いただくエンドユーザーの皆様だけでなく、パートナーの皆様にも価値を提供することを目的としています。
アプリストアの運営にあたっては多くのパートナーに継続的なご協力をいただいており、その期待に応えるべく、以前から構想していたパートナー専用サイトの開発を進めることになりました。この専用サイトは、パートナーの皆様にとってより使いやすく、価値ある機能を提供していくことで、SmartHR Plusを通じた事業拡大を支援することを目指しています。
開発体制
このサービス開発は、序盤はプロダクトエンジニア2名の体制で進められ、開発が本格化する後半にはエンジニア4名体制に拡充して取り組みました。さらに開発に加えて、パートナーの皆様を 担当するSmartHRの「パートナーアライアンスユニットメンバー」（通称：アライアンス担当）とも連携し、機能仕様や社内の業務フローの調整を行う必要がありました。
入稿機能の開発背景
今後SmartHR Plus For Partnersはパートナーの皆様に様々な便利な機能を追加していく予定でありますが、第一弾として「入稿機能」の開発を行いました。入稿機能は、パートナーがSmartHR Plusに掲載する自社アプリ情報を簡単に作成・更新できるようにするために設計された機能です。チーム内で議論を重ねる中で、特に重要な課題として浮上したのが「アプリストアに掲載する情報の入稿」プロセスの改善でした。この機能により、パートナーの皆様が情報をスムーズかつ効率的に入稿できる環境が整うことで、より迅速に正確で有益な情報をユーザーに提供できることを目指しています。
以前までは、SmartHR Plusに掲載されているアプリ情報はすべてYAMLファイルで管理されていました。このYAMLによる掲載内容の管理方式では、パートナーからの情報更新依頼があるたびにアライアンス担当が間に入り、スプレッドシートやGoogle Driveを通じてプロダクトエンジニアに更新を依頼し、エンジニアがYAMLファイルを手動で編集・反映する必要がありました。このように、更新のたびにパートナー、アライアンス担当、エンジニア間でやり取りが発生し、依頼内容の確認や編集の作業が繰り返されていたため、特に頻繁な更新が必要な場合には、パートナーにご負担をかけていました。
こうした課題に対応するため、入稿機能の開発では、パートナーが直接自社のアプリ情報を入稿・更新できる仕組みを提供することに重点を置きました。この入稿機能によって、パートナーはSmartHR Plus For Partnersにアクセスし、掲載したい情報を自分で作成・編集できるようになります。
さらに、入稿機能では、SmartHRのアライアンス担当も管理画面を通じて情報の加筆・修正ができる機能を組み込んでいます。これにより、必要に応じてアライアンス担当が情報の確認や修正を行い、パートナーと協力してコンテンツの精度を向上させることが可能です。特に、情報の誤りや改善点があった際に迅速に対応できるため、アプリストアに掲載される情報の質が向上し、ユーザーにとってもわかりやすく信頼性の高いコンテンツを提供することを目的としています。
現在は提供準備段階ですが、この入稿機能の導入により、パートナーとSmartHR双方の業務負担が大幅に軽減され、情報の更新プロセスが効率化されることを目指しています。
開発時の技術選定
microCMSを利用する
入稿機能を作るにあたり様々なパターンを検討しましたが、最終的にAPIベースのヘッドレスCMSであるmicroCMSを利用することに決めました。SmartHR Plusは、SmartHRだけでは解決できない課題を他のサービスと連携することで解決することを目的としています。そのため、時間をかけてアプリケーションを追加するための機能を作り込むことはせず、コンテンツの管理はmicroCMSに任せる方針をとりました。
microCMSを利用することで、管理画面を用意せずとも、アライアンス担当はmicroCMSを操作してアプリを直接更新できます。また、microCMSにはレビュー機能や予約投稿機能が存在し、今後もコンテンツを管理するための様々な便利機能が増えていくはずなので、それをSmarHR Plusで独自に用意する必要がなくなり、コア機能を作ることにフォーカスできるのは非常にありがたいです。
特徴的な点として、フロントエンドからmicroCMSへアクセスするのではなく、バックエンドからmicroCMSのWeb API（以降API）を呼び出すようなアーキテクチャになっています。 SmartHR Plusのバックエンドには、もともとアプリの情報を定義したYAMLをもとにデータを返すAPIが存在します。今回の変更に伴ってmicroCMSのAPIをフロントエンドから直接利用するように変更すると、受け取るAPIのレスポンスが変わってしまうので、フロントエンド側にも大幅な改修が必要になります。場合によってはアプリの検索などの機能が現在の仕様を満たせなくなる可能性があり、SmartHR Plusをご利用いただいているユーザーにも影響がでてしまう可能性がありました。また、今後アプリストアの規模が大きくなったときにmicroCMSから内製の管理システムへ移行することは十分に考えられるので、今回はバックエンドを介してmicroCMSにアクセスするようなアーキテクチャにしました。
YAMLファイルからmicroCMSへのデータの移行は、YAMLで定義してるアプリのデータを元にリクエストボディを作成し、microCMSのコンテンツ入稿APIへリクエストするスクリプトを作って一括でアプリを入稿しました。その後、検証環境で既存のアプリ取得APIのレスポンスが変わらないことを確認し、不具合が出ないことを検証したうえでデータを切り替えました。幸い、データ移行のタイミングでメンテナンスを入れたり、障害が発生することはありませんでした。
SmartHRアカウントとは別のパートナー専用アカウントを用意する
今後パートナーの利便性を高めていくために、入稿機能のリリースと同じタイミングでアカウント機能も用意しました。SmartHRにはすでにアカウント機能が存在し、SmartHR PlusのユーザーもSmartHRのアカウントでログインできるようになっています。しかし、SmartHR PlusのパートナーはSmartHRのアカウントを所持していないケースもあるので、SmartHR Plus For Partners専用のアカウント機能を作成しました。
認証にはRailsのデファクトスタンダードな認証ライブラリであるDeviseを利用しています。ただ、SmartHR Plus For Partnersはパートナー専用のサイトであり、利用者が自分でアカウントを作成することはないので、SmartHRの運用チームが招待した方のみアカウントを作成できる仕組みになっています。
入稿フォームをZodとReacct Hook Formで開発する
入稿機能を支える入稿フォームの開発には、Zod、React Hook Form、SmartHR UIを組み合わせて利用しています。採用したライブラリ自体に新規性はありませんが、社内外で多くの知見が蓄積されており、問題に直面した際にも解決が比較的容易な構成を採用しました。特にフォームライブラリについてはconformという Next.jsのApp Routerに対応したフォームライブラリも検討しましたが、現時点ではPages Routerを採用していること、チームのスキルバランスやドキュメントの豊富さ等を鑑みてReact Hook Formを採用しました。
SmartHR Plusのアプリストアでは、アプリ情報の掲載にあたって、入稿できる文字数や画像サイズといった細かな制約があります。これらの制約は、Zodによってバリデーションを設定することで入力段階で自動的に確認できるようにしています。このバリデーションにより、パートナーがフォームに入力したデータが一定の基準を満たしているかどうかを即座に確認でき、データの品質が確保されています。
フォームの実装には、React Hook FormとSmartHR UIを活用しています。ただし、SmartHR UIのコンポーネントが制御コンポーネントとして実装されている場合には、React Hook Formとの組み合わせが難しい場面がありました。具体的に直面した例で言うと、バリデーションが行われるタイミングが異なっていたり、入力値が正常に反映されなかったり、エラー時に適切にフォーカスが当たらないといった問題が発生しました。 これらの課題を解決するために、React Hook Formが提供するControllerコンポーネントを利用しました。Controllerは、外部の制御コンポーネントをReact Hook Formと統合するためのラッパーコンポーネントです。これを利用することで、SmartHR UIの制御コンポーネントとReact Hook Formのバリデーションや状態管理を連携させ、UIを維持しながらフォーム管理をシンプルにしています。
以下は、React Hook Formで非制御コンポーネントと制御コンポーネントを扱う例です。
非制御コンポーネントの例（React Hook Formのregisterメソッドを使用）
<input {...register('description')} width="100%" />
制御コンポーネントの例（Controllerを使用してSmartHR UIのInputコンポーネントをラップ）
<Controller control={control} name="description" render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => ( <Input error={!!error} onChange={onChange} onBlur={onBlur} value={value} width="100%" /> )} />
このようにControllerを活用することで、SmartHR UIのデザインシステムに沿ったフォームを構築しつつ、入力バリデーションやエラー処理を管理できるようになりました。
実際に採用してみてどうだった？
microCMSにアプリのデータを移管したことで、アプリのデータを変更する工数が一気に削減されました。運用メンバーでもアプリのデータを更新することができるようになったことで、開発チームとの調整が必要なくなり、好きなタイミングでアプリのデータの更新ができるようになりました。今でもエンジニアの作業が必要な業務は残っていますが、以前と比べ大幅にアプリの追加と変更を行う時間が減りました。リリース後は、パートナーが直接データを更新することができるようになります。
コンテンツ管理が楽になった一方で、いくつかデメリットもありました。 外部のサービスを使ってる以上、パフォーマンスや可用性の課題が目立つようになりました。ユーザーのリクエスト毎にバックエンドからmicroCMSに問い合わせてしまうと、その度にHTTP通信が行われるのでパフォーマンスが大幅に悪くなります。また、microCMSへのリクエストでなんらかの問題が発生してしまうと、SmartHR Plusにも影響がでてしまいます。 上記の課題を解決するため、microCMSへ毎回アクセスするのではなくバックエンド側でキャッシュし、アプリを取得するリクエストがあった際はキャッシュしているデータを返すような実装に変更しました。アプリの更新があった場合は、microCMSが提供しているWebhookを利用してSmartHR Plusのバックエンドに通知を行い、キャッシュを更新しています。
また、バックエンドではアプリをできるだけ扱いやすくするために、ActiveModelを利用してアプリのオブジェクトを作成しています。そのおかげでバリデーションやデータの変換などは便利に行えている一方で、ActiveRecordが提供しているメソッドを利用してデータを作成することはできないので、その部分は自前でmicroCMSに問い合わせるように実装しています。
まとめ
この記事では、SmartHR Plus For Partners β版の開発背景と技術構成について紹介しました。 入稿機能の開発では、microCMSを導入することでパートナーが自らアプリ情報を管理・更新できる仕組みを整え、情報更新がこれまでよりもスムーズに行えるようになりました。また、パートナー専用のアカウント機能の導入により、専用サイトでの操作性も向上しています。 また、外部CMSの導入によって得られた利便性だけでなく、パフォーマンスや可用性の課題とその対策についてもご紹介しました。SmartHR Plus For Partners β版の提供を通じて、パートナーへの価値提供をさらに強化し、今後もパートナーとユーザーにとって意義あるサービスを目指してまいります。リリース後のフィードバックも踏まえ、さらなる改善を重ねていく予定です。
We Are Hiring!
SmartHRでは一緒にSmartHRを作りあげていく仲間を募集中です！ 少しでも興味を持っていただけたら、カジュアル面談でざっくばらんにお話ししましょう！
