tag:crieit.net,2005:https://crieit.net/users/Sassy_1123/feed CrieitでユーザーSassy_1123による最近の投稿 2023-04-11T23:36:31+09:00 https://crieit.net/users/Sassy_1123/feed tag:crieit.net,2005:PublicArticle/18423 2023-04-11T23:29:51+09:00 2023-04-11T23:36:31+09:00 https://crieit.net/posts/simple-hr-reporter <p>個人開発でSmartHRと連携したレポーティングツールを作成してみました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://simple-hr-reporter.saikicks.net/report"><strong>人事データ簡易分析ツール</strong></a></p> <h2 id="概要"><a href="#%E6%A6%82%E8%A6%81">概要</a></h2> <p>このツールはSmartHRと連携してAPI経由でデータを取得して可視化を行うためのレポーティングツールです。</p> <p>SmartHRではフリープラン、労務管理プランでは分析レポートの利用が有料プランに切り替えるなどの対応を行わないと利用できません。</p> <p>オプション機能として提供されていますが、そこまで細かく分析するほどでは無く現状の人事情報を可視化したい、みたいな緩い使い方でも許容できるユーザーさんを対象に簡易的なグラフ出力を提供します。</p> <p>利用にはテナントIDとアクセストークンを利用しますが、サイト内にも記載がある通り<strong>このツールはテナントIDやアクセストークンを保存したりはしません。データ取得時のみに利用します</strong>。</p> <p>そのため画面をリロードしたりするともちろん情報は失われます。</p> <p>再度表示したい場合は都度テナントID、アクセストークンはをもう一度入力していただく手間はありますが…</p> <h2 id="技術構成"><a href="#%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90">技術構成</a></h2> <ul> <li>React</li> <li>rebass</li> <li>styled-component</li> <li>recharts</li> <li>TypeScript</li> <li>Vite</li> <li>VItest</li> <li>Axios</li> <li>CloudFlare Pages</li> </ul> <h2 id="レポート出力結果"><a href="#%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E5%87%BA%E5%8A%9B%E7%B5%90%E6%9E%9C">レポート出力結果</a></h2> <p>出力結果は以下のような感じでシンプルに出力しています。</p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/y_saiki/20230324/20230324202730.png" alt="image" /></p> <p>もしご興味あれば是非使ってみてください。</p> <p>次にテナントIDとアクセストークンについて簡単に説明します。</p> <h2 id="テナントIDについて"><a href="#%E3%83%86%E3%83%8A%E3%83%B3%E3%83%88ID%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">テナントIDについて</a></h2> <p>テナントIDはSmartHRのURLに含まれている以下の部分の文字列です。</p> <pre><code>[https://[テナントID].smarthr.jp/](https://[テナントID].smarthr.jp/) </code></pre> <h2 id="アクセストークンについて"><a href="#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">アクセストークンについて</a></h2> <p>アクセストークンは管理画面より作成を行うため以下に手順を載せておきます。</p> <p>SmartHRにログインした後、右上のユーザー名の部分をクリックするとメニューが表示されます。</p> <p>その中の「共通設定」をクリックしてください。</p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/y_saiki/20230324/20230324201148.png" alt="image" /></p> <p>次に左側メニューから「外部システム連携」をクリックします。</p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/y_saiki/20230324/20230324201203.png" alt="image" /></p> <p>API連携より「アクセストークン」をクリックします。</p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/y_saiki/20230324/20230324201159.png" alt="image" /></p> <p>「新規発行」をクリックします</p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/y_saiki/20230324/20230324201155.png" alt="image" /></p> <p>「アクセストークン名」を入力します。利用する用途を名前にしておくと良いです。</p> <p>例えば「分析レポート」とか…</p> <p>必須項目の入力が埋まると「登録」ボタンがクリックできるようになるので登録するとアクセストークンが払い出されます。</p> <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/y/y_saiki/20230324/20230324201151.png" alt="image" /></p> <p>これらのテナントIDとアクセストークンを利用して本ツールにて入力して「出力」ボタンをクリックしてもらうとレポートが出力されます。</p> <p>まだまだ表示がおかしい部分があったり、追加したい機能等があるので引き続き開発を進めていきたいと思います！</p> <p>採用計画や人事データを活用して分析を行いたい方は是非活用してみてください。</p> Sassy_1123