URLが絵文字に！？史上最狂なURL短縮サービス誕生
先日開催されたクソアプリハッカソンで実装したアプリのお披露目。
Musubu
私はURL短縮サービスMusubu(読み方: むすぶ)を全世界へ公開します。
このアプリはただの短縮サービスではありません。
さっそくアプリの動きを見ていきましょう。
生成された短縮URLは見た目は不穏だが、ちゃんと登録したURLへリダイレクトかかります。
短縮さるたURLをブラウザのURLにコピペしてもリダイレクトされます。
このように短縮サービスのパスが絵文字となります。
実装した背景
日本語のアンカーリンクをクリックすると、ブラウザのURL欄にはエンコードされたURLが入ります。
例えば、こんな感じです。https://example.com#%2r�aaaaaa
日本語をURLに含ませるとエンコードできることを、今まで当たり前のように扱っていました。
URLにエンコードできる文字ならば、どんな文字もURLに含められるかもと思ったのが、今回のクソアプリのアイデアです。
すでに日本語がエンコードできることが分かっているので、日本発祥の絵文字もエンコードできるかもと思いました。
絵文字をURLに含められるかを検証してみたらできたため、Musubuを実装しました。
実装周り
インフラ
フロントエンド、バックエンドのインフラは、すべてCloudflareを使用しています。
使ったものはこちら。
- Cloudflare Workers
- Cloudflare Pages
- Cloudflare KV
Pagesにはフロントエンド用です。
WorkersとKVはバックエンド用で用意。
フロントエンド
仕事でバリバリ使っているTypeScriptとReactで実装しました。
コードの9割はGitHub Copilotによるものです。
GitHub Copilotに書かせた理由は、クソアプリハッカソンで作り切ることがたぶん難しいと思ったため、AIに全部任せました。
私が手を加えたのは、言語の切り替えボタンくらいです。特に手が混んだ実装はしていません。
バックエンド
Rustで実装しました。
APIは全体で3つ実装しました。
worker-rsとserde等のcrate(ライブラリ)を使って実装しました。
KVにはエンコードしたURLとエンコード前のURLを保存しています。
WorkersからKVへデータ書き込みや読み込みはCloudflareの公式ドキュメントで十分でした。
実装してみての感想
URLを短縮している？
短縮したURLのドメインがam.sontixyou.comなので、ドメイン名が長い。
ものによっては、短縮前のURLより短縮したURLのほうが長くなるかもしれないが、クソアプリなので気にしない。
無理くり実装した箇所
今回は、短縮したURLの中に絵文字を含ませる必要がありました。
また、ランダムに絵文字を選んだときになるべく重複させたくないため、次の形にしました。
目が痛い。
この配列からいくつかをランダムに選択するようなロジックを実装しました。
仕事では書けないコードなので、こんなコードを書けるのはクソアプリならでは！！！
環境変数でURLを切り替える
ここがよく分かってないです。
私は、本番環境と開発環境でバックエンド側のAPI URLとフロントエンドのURLを切り替えたかったんですが、Workersの環境変数をどう切り替えるのかわからずでした。
公式のドキュメントによると切り替えできると書いてあるが、切り替えできんかった。
たぶん、自分の書き方が間違えている。
最後に
Musubuは2025/1下旬ごろまで公開予定です。
アドベントカレンダーはこちら
Discussion