こんにちは！プロダクトエンジニアの otakky です。 普段は SmartHR のホーム画面を、SmartHR にログインした従業員の業務の入口になる機能を提供する場にするための開発をしています。
今回は、ホーム画面開発にとても嬉しいアップデートがあったので共有したいと思います。
ホーム画面のダッシュボードにウィジェットを誰でも開発できるようになりました！
背景
いきなり「ウィジェットを誰でも開発できる」とお伝えしても、何が嬉しいのかわかりづらいと思うので、少し背景を説明させてください。
まず、いままでのホーム画面の様子をご紹介します。
ホーム画面には「ダッシュボード」と呼ばれるエリアがあり、タスクやお知らせ掲示板、給与明細などが表示されています。これらを「ウィジェット」と呼んでいます。
ウィジェットが存在することでホーム画面が各プロダクトへの入口となり、自然と従業員のみなさまがホーム画面にアクセスしたくなってくれることを期待しています。
また、SmartHR の利用者さまの中には、SmartHR の各プロダクトはもちろん、SmartHR とシナジーのあるサードパーティ製のアプリも利用している場合も多くあります。
（詳細はついにリリース！アプリストアを支える技術について解説してみたを見てみてください）
これらサードパーティ製アプリにも SmartHR のホーム画面から利用・アクセスしやすくなれば、ホーム画面が業務の入口としてより強固になるはずと考えています。
そのためにも、ホーム画面開発チームとしてウィジェットの開発を促進することはとても重要なことだと捉えていました。
ウィジェット開発の課題
しかし、ウィジェットの開発を促進するには１つ課題がありました。
それは各プロダクトに特化したウィジェットの開発が難しいという点です。
SmartHR は各プロダクトごとにチームや開発環境が異なります。それ自体は普段の開発スピードを高める要因ですが、ウィジェット開発においては逆に足かせとなることがありました。
つまり、
- 各プロダクトチーム
- ホーム画面の開発知識を習得し、その後の運用・保守を続けるのが難しい
- ホーム画面チーム
- 各プロダクトの内容を理解しながら機能を開発するのが、ドメイン知識の面で難しい
という状況が生じ、どのチームにとっても開発上のハードルが発生していたのです。
つまり疎に開発することが難しい状況ということですね。
SmartHR 内のチームでも上記のような問題があるので、サードパーティ製のアプリであればなおさらです。
今回はこの課題をどう解決したのかをご紹介させていただこうと思います。
iframe を利用したウィジェット開発
課題を解決するために考えたのは、次の 2 点です。
- 各プロダクトチームが、自分たちの環境でウィジェットを開発できるようにする
- ホーム画面チームが、手間をかけずにウィジェットを提供できる仕組みを作る
この構図、どこかで見覚えあるかたもいらっしゃるかもしれません。
そうです、iframeです。（見出しでネタバレしていますが）
Web ページに他の Web ページを埋め込むことができるインラインフレーム要素です。
私たちも iframe を活用することで、この課題を解決しました。
せっかくなので、課題解決の具体的な流れを簡単にご紹介します。
iframe を扱う際の課題
iframe を埋め込むだけなら簡単ですが、それだけで価値のあるウィジェットが作れるわけではありません。最大の課題は認証です。
近年では iframe 内のアプリケーションでログインしても、その状態を維持するのが難しくなっています。これは、サードパーティ Cookie や localStorage の利用が制限されているためです。
しかし、ウィジェットを利用するたびにログインを強いるのは現実的ではありません。
そこで、今回はJWT（JSON Web Token）を使うことにしました。
JWT の詳細は割愛しますが、仕様を定義しているRFC 7519 - JSON Web Token (JWT) 日本語訳 から引用すると
2 つのパーティ間で転送されるクレームを表す、コンパクトで URL セーフな手段のことです。
と定義されています。 この２つのパーティが本記事ではホーム画面とウィジェットのことを指します。 JWT を利用することで、ホーム画面にログイン情報の一部をウィジェット側にわたすことでログインを不要にしようと考えました。
JWT の利用方法
具体的な処理の流れは以下の通りです。
ホーム画面上に iframe 経由でウィジェットを表示し、そのウィジェットに postMessage で JWT を渡します。ウィジェット側は JWT を検証し、問題がなければウィジェットを表示する仕組みです。
また、JWT のペイロードには最小限の情報しか保持しないようにし、盗聴リスクにも備えています（ペイロードの詳細は割愛します）。
この仕組みのおかげで、チーム間の連携をできるかぎり疎にした状態でウィジェットを開発できるようになりました。
さっそくウィジェットを作ってみたよ
仕組みを作っただけではまだまだ開発ハードルが高いはず。 そこで、さっそくホーム画面チームでウィジェットを作成してみました。
ウィジェット開発のテーマにしたのは
こちらの記事で紹介されている社内イベント管理アプリ。 打ち上げや社内コミュニティの企画・管理に便利な、実際に SmartHR 社内でも利用されている SmartHR Labs 製アプリです。
さっそくですが、作ったウィジェットがこちら。
イベント管理アプリにいかずとも、現在募集されているイベントや応募済のイベントなどにかんたんにアクセスできるようになりました。
こんな感じでどんどんウィジェットを追加していけると思うと、とてもワクワクしますね。
今後の展望
今回の仕組みにより、大きな課題は解決し、各プロダクトチームやサードパーティ製アプリの開発者にウィジェット開発を委譲できるようになりました。
しかし、ウィジェットの価値をさらに高めるために、今後取り組みたいことがまだあります。
例えば
- JWT の検証や postMessage による JWT の受け渡し処理をライブラリ化し、開発速度をさらに向上させたい
- ペイロードに含める以外の方法で、ホーム画面から多様な情報をウィジェットに渡せるようにしたい
などなど。まだまだやれることはいっぱいありますね。
おわりに
いかがでしたでしょうか？今回の感動は一見伝わりにくいかもしれませんが、この仕組みのおかげでホーム画面がより強力なポータルへと進化していくはずです。乞うご期待！
これは余談ですが、今回の技術検証では
- 技術的課題をフロントエンドエンジニアが調査・方針精査
- チーム全体で一週間集中して実現可能性を検証
- 入社 1 ヶ月のエンジニアがキャッチアップしてほぼ一人で開発
- ウィジェットを開発したいプロダクトチームにノウハウを展開
という流れで進められました。
何が伝えたいかと言うと、「SmartHR は、入社直後からコア機能の開発に参加できる環境です！」ということです。
興味があれば、ぜひ私たちと一緒に働いてみませんか？
