短くて覚えやすい自作短縮リンク「ogtm.dev」の運用を始めました【ogtm.shortener】

こんにちは。小川智也です。

夏休み毎日投稿からあっという間に1ヶ月と少しが経過しました。このままではまた後戻りするだけな気がするので今回は自作短縮リンク「ogtm.dev」を作ってみたのでご紹介したいと思います！

ogtm.dev とは

このogtm.devというドメインを取得したのは約1年前に遡ります。

当時はこのドメインでGitHub Pagesの各アプリケーションを動かしたりしていましたが、なんかもったいないということで3ヶ月前くらいにGitHub Pagesのアプリはgh.ogtm.devに変更し、大本のogtm.devは何も使わずに放置していました。

ちなみに.devドメインにしたのは、現在Cloudflare DomainがJPドメインに対応しておらず、今後移管するときのことも考えた結果こうなりました。嘘です.devのほうが開発者みたいな感じ(小並感)がして格好いい気がしたからです

短縮リンクにしたら便利じゃね？

そこでふと思いました。

なんかこういう独自ドメイン短縮リンクって憧れませんか？（憧れません）

プロフィールとかなにか文章にリンクを書くとき、こっちのほうが短い上によくあるbit.lyと比べて結構自由にできるのでめちゃくちゃ便利な気がします。

ぶっちゃけ今ある ogatomo.net にサブドメインをくっつけて短縮リンクにしてもいいですが ogtm.dev のほうが短くて使いやすい上なによりちょうど余ってたのでこれで作ってみることにします。

完成品

ということで完成品がこちら！Cloudflare Workers+KV+Honoでいい感じに作りました。

既存の独自ドメインを短縮リンクとして使えるようにするサービスでもいいですが、せっかくならここも自作しちゃえ！とChatGPTを駆使しながら2,3時間で作りました。

画面はTailwind CSSを初めて使ってモダンな感じにしました。使いこなせば便利なんだろうけど既存のコンポーネントでとにかく楽したい僕にはあまり向いてない感じがしました。完全に独自のUIでデカイアプリ作るとかだったらTailwindのほうが楽そう。

詳細 ogtm.shortener https://ogtm.dev/

管理画面

一応管理画面も作ってみました。

こんな感じで短縮リンクの情報や簡易的なクリック数が見れます。

管理画面・APIの認証

今回認証基盤にはBearerトークン or BASIC認証を用いたチョーーーーーーーーーー簡易的な認証を使っています。

わざわざBASIC認証も併用しているのは、管理画面にBASIC認証でログインしつつ、APIも同じBASIC認証の認証情報で叩くためです。

まとめ

いかがだったでしょうか。

今回は「ogtm.dev」という自分向け超自己満短縮リンクサービスを作ってみました。

今は短縮リンクとGitHub Pagesだけの運用ですが、今後は他の自作Webアプリも基本的に全てこのogtm.devのサブドメインで動かしていこうと思っていて、このドメインを使う機会も増えるかと思うのでよろしくお願いします！

最後まで見ていただき、ありがとうございました。