この記事は はてなエンジニアのカレンダー | Advent Calendar 2023 - Qiita の22日目の記事です。
前日は 
id:utgwkk さんの 知見がどんどん集まってくるところが見た〜い - 私が歌川です でした。
突然ですが、
こんにちは、
id:cateiru です。皆さん、出社していますか？
はてなでは、フルリモートとなっておりオフィスの出社は任意となっています。しかし、毎日在宅で勤務していると外に出るタイミングを見失い、ずっと引きこもってしまいます*1。そのため、独自ルールで最低でも1ヶ月のうち1日は出社しようと決めています。
しかし、いざ出社するといつもより早く起きて、朝ごはんを食べ、身支度をして、満員電車に揺られるという大変な道のりが待っています*2。そんな高いハードルを超えつつ出社したら、仕事をしなければならずまた就業後には家に帰らなければなりません。
こんな偉業は褒められるべきです。しかし、なかなかSNSなどで「出社した私えら〜い」などとつぶやくのはハードルが高いと思います。
ということで、今回出社という偉業を記録に残しておけるような出社できて偉いボタンを作成しました！
使い方
まずは、オフィスの位置を設定します。これは、寝ぼけて家でボタンをおしてしまうというヒューマンエラーを回避するためです。位置情報は LocalStorageに保存され外部に送信されることはありません。
これで、準備は完了です。あとは、出社したらボタンを押すだけで出社が記録されツイート*3などができます！
技術的な解説
このページはNext.jsのApp Routerで作られています。サーバーなどは特に無いため、出社記録や位置情報などはのすべてのデータはLocalStorageやIndexedDBに保存されています。
UIコンポーネントはChakra UI、マップなどは Leaflet です。デプロイ先はVercelとなっています。
機能自体シンプルだったため思いついてから実際に完成するまで、4時間ほどででき自分のなかでの開発工数の目安になったかなと思っています。
2点間の距離
今回は、オフィスと現在との位置情報から距離を計算して表示するようになっています。位置情報は緯度と経度ですが、地球は球体*4であるため実は三平方で直線距離を求めても正しい値にはなりません*5。
正確な距離を求める場合、様々な公式、アルゴリズムがありますが、今回はヒュベニの近似式を実装しています。
他のアルゴリズムもあるので興味があったらぜひ調べてみてください！
終わりに
ぜひ、皆さん出社した際には偉業を共有しましょう！
明日は 
id:todays_mitsui さんです！お楽しみに！
