<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p data-line="1" class="code-line"><a href="https://qiita.com/advent-calendar/2024/unipos" target="_blank" rel="nofollow noopener noreferrer">Unipos Advent Calender 2024</a>の24日目の記事です</p>
</div></aside>
<p data-line="4" class="code-line">いや〜社内のちょっとめんどくさいことってありますよね。<br>
小さいことなのだけど、申請をしたりで数分時間がかかるな〜みたいな。</p>
<p data-line="7" class="code-line">もちろん、制度設計をする中でベストを考えてくれている人には大感謝という前提ありつつ、エンジニアだったらもっと便利にするぞ！というのがこの記事で扱う話です。</p>
<h2 id="%E4%BD%95%E3%82%84%E3%81%A3%E3%81%9F" data-line="9" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%95%E3%82%84%E3%81%A3%E3%81%9F" aria-hidden="true"></a> 何やった</h2>
<p data-line="10" class="code-line">今回の記事では、社内の出張手当で◯◯km以上だと申請をというのが扱う話です。</p>
<p data-line="12" class="code-line">以前は以下のサイトにアクセスして、出張先の住所をいれて距離をだして、申請時に結果URLを貼るというようなものでした。<br>
<a href="https://www.kyori.jp/" target="_blank" rel="nofollow noopener noreferrer">https://www.kyori.jp/</a></p>
<p data-line="16" class="code-line">結果として、slack botでスラッシュコマンドで <code>/直線　住所</code>とすると出張かわかり、どのくらい離れているかがわかるようになりました。(例は国会議事堂)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/c155136e3c57-20241224.png" loading="lazy" class="md-img"></p>
<p data-line="19" class="code-line">かつ、画像は切れて見れていないですが、URLを発行し画像のようなページが表示されます。<br>
お客様先に行く際には、コマンドで出張判定がされて、出張であれば発行されたURLを貼るだけというシンプルなフローに変わりました。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/297945e06cfc-20241224.png" loading="lazy" class="md-img"></p>
<p data-line="23" class="code-line">これは人事ともフローを固めて、これならOKということで正式採用もらいました。</p>
<h2 id="%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%9F" data-line="25" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%9F" aria-hidden="true"></a> どうやった</h2>
<p data-line="26" class="code-line">社内でn8nというサービスをcloudrun上で立てて運用しています。(といっても、ほぼ個人利用レベルなのですが)</p>
<p data-line="28" class="code-line">実装など詳しくはこの記事で<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0a1c7eb6600f1" src="https://embed.zenn.studio/card#zenn-embedded__0a1c7eb6600f1" data-content="https%3A%2F%2Fzenn.dev%2Fksmlo%2Farticles%2Fd0700149ee5777" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/ksmlo/articles/d0700149ee5777" style="display:none" target="_blank">https://zenn.dev/ksmlo/articles/d0700149ee5777</a></p>
<p data-line="31" class="code-line">その中で以下のようなワークフローを組んでいます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/f850bcdb09c0-20241224.png" loading="lazy" class="md-img"></p>
<p data-line="34" class="code-line">webhookでslackのリクエストを受け付け、情報を集めたうえでレスポンスをするというものです。<br>
発行するURLについては、slackのリクエスト時のtrigger idを利用してユニークなidとして利用して、情報・idをNotionに保存 -&gt; URLのクエリパラメータでNotionの情報へアクセスしwebページとして第三者が見えるようにしてます。(細かいので以下で解説深くしないです)</p>
<h3 id="%E3%81%A9%E3%81%86%E8%B7%9D%E9%9B%A2%E3%82%92%E6%B8%AC%E3%81%A3%E3%81%9F%E3%81%8B" data-line="37" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%86%E8%B7%9D%E9%9B%A2%E3%82%92%E6%B8%AC%E3%81%A3%E3%81%9F%E3%81%8B" aria-hidden="true"></a> どう距離を測ったか</h3>
<p data-line="38" class="code-line"><strong>step1: 住所から緯度経度を取得する</strong><br>
以下のURLにあるとおり、無料でAPI公開してくださっている方がいます。ありがたや<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6207ab33ffb48" src="https://embed.zenn.studio/card#zenn-embedded__6207ab33ffb48" data-content="https%3A%2F%2Fwww.geocoding.jp%2Fapi%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.geocoding.jp/api/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.geocoding.jp/api/</a></p>
<p data-line="42" class="code-line">クエリに住所をいれると、XML形式で返却されます。</p>
<p data-line="44" class="code-line"><strong>step2: 緯度経度をオフィスの地点を結んで距離をだす</strong><br>
実は国土地理院がAPIを出してくれています。<br>
zennの記事でも使用例については記載あるので、ぜひそちらを！<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ebde6d078b192" src="https://embed.zenn.studio/card#zenn-embedded__ebde6d078b192" data-content="https%3A%2F%2Fvldb.gsi.go.jp%2Fsokuchi%2Fsurveycalc%2Fapi_help.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://vldb.gsi.go.jp/sokuchi/surveycalc/api_help.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://vldb.gsi.go.jp/sokuchi/surveycalc/api_help.html</a></p>
<p data-line="49" class="code-line"><strong>+α: webページをつくる</strong><br>
今はとっても便利でv0.devに命令したら大抵のシンプルなページは秒で作ってくれますね！<br>
この程度でよさそうというのが見つかれば、それを叩きにいじればよしです。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0b6c21056b47c" src="https://embed.zenn.studio/card#zenn-embedded__0b6c21056b47c" data-content="https%3A%2F%2Fv0.dev%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://v0.dev/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://v0.dev/</a></p>
<p data-line="54" class="code-line">ちなみに、緯度経度で地図表示として、以下のように緯度経度をクエリに埋めてiframeに突っ込めばgoogle mapは提供されます。<br>
<code>https://maps.google.com/maps?output=embed&amp;q=35.671782,139.741836&amp;ll=35.671782,139.741836&amp;t=m&amp;hl=ja&amp;z=18</code></p>
<h2 id="%E3%81%A9%E3%81%86%E5%8B%95%E3%81%84%E3%81%9F" data-line="57" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%86%E5%8B%95%E3%81%84%E3%81%9F" aria-hidden="true"></a> どう動いた</h2>
<p data-line="58" class="code-line">プロトタイプを作った後に、人事の方に「作ったんですけど、どうでしょ？」という話をもっていき、「え。めっちゃいいじゃん！」という感触をもらいました。<br>
(よく何か作っての会話はしている仲というのもあり)</p>
<p data-line="61" class="code-line">ただし、制度上確認プロセスとして</p>
<ul data-line="62" class="code-line">
<li data-line="62" class="code-line">第三者が確認できるようにしてほしい</li>
<li data-line="63" class="code-line">slackのbotの反応でより判定がわかりやすいようにしてほしい<br>
というようなFBをもらいました。</li>
</ul>
<p data-line="66" class="code-line">それに対して</p>
<ul data-line="67" class="code-line">
<li data-line="67" class="code-line">URLを発行してページを提供する</li>
<li data-line="68" class="code-line">よりわかりやすいslackの反応にする</li>
<li data-line="69" class="code-line">+αでhelpコマンドを作成<br>
というようなことをしました。</li>
</ul>
<p data-line="72" class="code-line">それをすることで制度としても記載をいただき、ちょこちょこ社内で使ってもらっている状態です。</p>
<h2 id="%E3%83%A2%E3%83%81%E3%83%99%E8%A9%B1" data-line="75" class="code-line">
<a class="header-anchor-link" href="#%E3%83%A2%E3%83%81%E3%83%99%E8%A9%B1" aria-hidden="true"></a> モチベ話</h2>
<p data-line="76" class="code-line">普段、プロダクトを作っている中で、それ以外の仕事をするの。。みたいな話もあると思いますが、会社の中でちょびっと気になることに個人でやってみることでの発見はすごく多いです。</p>
<p data-line="78" class="code-line">例えば今回だと</p>
<ul data-line="79" class="code-line">
<li data-line="79" class="code-line">制度設計</li>
<li data-line="80" class="code-line">何を人事として気にしたいのか</li>
<li data-line="81" class="code-line">どういう作りだと喜ばれるのか</li>
<li data-line="82" class="code-line">情報を無料で取得するためのソースはあるか<br>
というようなものがあります。</li>
</ul>
<p data-line="85" class="code-line">これって、普段のプロダクト開発だけの視点だと意外と得られないのではないかなと思っています。<br>
小さいことではあるかもしれないけど、小さい変化を社内・コミュニティで作っていけると自分にとっても良い環境を作っていけることに繋がります。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="88" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="89" class="code-line">今回は公開情報であるAPIを利用して、社内の制度を決めている人との対話も含めて記事として書いてみました。<br>
具体的な技術の話はさっぱりめですが、読んでくれた方が2025年に何かアクションしてみようにつながるといいなと思っています！</p>


公開情報を使って社内のプチめんどくさいことを解決しよう

Discussion