Auto-prefix URL：時間を節約する小さな工夫

リンク短縮フォームに allegro.pl を入力すると、大半の短縮サービスは「正しいURLではない」と警告し、先頭に https:// を付けて再入力するよう促します。しかし cutty.dev は https:// を自動的に追加して処理を続行します。

これは、言及する価値 barely ある機能に聞こえます。実際には、以下の違いがあります：

• 「貼り付けた、短いリンクができたのでウィンドウを閉じる」（2秒）
• 「貼り付けた、エラー、メッセージを読む、https を追加、もう一度、リンクができた」（15〜20秒）

URLを貼り付ける月の頻度、エラーメッセージを読む際のイライラ感、「あぁそうだったプロトコルね」という気づきの瞬間を掛け合わせたもの。個人当たりで月単位で数えるとわずかな時間だが、重要な要素だ。

cutty.dev が具体的に何をするか

フォームにテキストを入力しました。サーバーに送信する前に、JavaScript はそのテキストが特定のプロトコル（http://、https://、ftp://、mailto: など）で始まるかどうかを確認します。もしプロトコルで始まらない場合、システムはそれを単なるドメインであるとみなし、先頭に https:// を追加します。

つまり：

• allegro.pl → https://allegro.pl
• github.com/twoj-profil/projekt → https://github.com/twoj-profil/projekt
• www.gazeta.pl → https://www.gazeta.pl

何か既にプロトコルがある場合（それが不適切であっても）、システムはそのままにして、さらにチェックを行います：

• http://example.com → http://example.com のまま（許可済み）
• ftp://example.com → 拒否（http/httpsのみ）
• javascript:alert(1) → 拒否（XSS保護）

なぜこれが私にあるのか、他の人にはないのか

大半のURL短縮サービスは、new URL(string) による標準的なURL検証を行っています。ブラウザやJavaScriptにおけるURLコンストラクタは厳格であり、プロトコルがない場合はエラーをスローします。new URL("allegro.pl")のデフォルトの出力はTypeErrorです。

これはほとんどのアプリケーションにとって正しい動作です。しかし、ユーザーがアドレスバーや他のアプリケーションからコピーしたURLを貼り付けるリンク短縮フォームでは、この厳格さは助けではなく障害となります。

解決策は5行のJavaScriptで実装できます：

function sanitizeUrl(input) {
  const trimmed = input.trim();
  const hasProtocol = /^[a-z][a-z0-9+.-]*:/i.test(trimmed);
  const normalized = hasProtocol ? trimmed : "https://" + trimmed;
  // dalsza walidacja przez new URL(normalized)
}

5行のコードで、ユーザー1人あたり1日あたりのフラストレーションが数十秒減る。なぜ市場の大多数がこれを行わないのか分からない。「標準的」だからといって「URLコンストラクタはこう動く」という理由だろうか。

UXにおける細部は不均衡に重要である

cutty.dev には、機能リストに明記されていないような要素がいくつかあります。それぞれ単独では些細なものに思えるためです。

• 空白文字のトリム — バリデーション前に実行 — 末尾にスペースを含む貼り付けられたURLはエラーを引き起こさない
• ハッシュの保持 — https://example.com/page#section は短縮後も #section を保持する
• クエリ文字列の保持 — ?utm_source=test は切り捨てられずに通過する
• プロトコルの自動アップグレード — ソースURLがTLSをサポートしている場合、http:// が https:// に変更される（計画済み、まだLIVEではない）
• IDNドメイン — źdźbło.pl は自動的にPunycodeに変換される
• スラッグ内のポーランド語文字 — カスタム末尾を作成する際に自動的にASCIIに変換される（różowy-link → rozowy-link）
• 危険なプロトコルの検出 — javascript:、data:、file:、mailto: は具体的なメッセージとともに拒否される

これらの細部が、誰かの5〜30秒とイライラする瞬間を節約します。それらが合わさって、「このアプリが好き」と「まあまあ使える」の違いを生みます。

UX デタイルの次は？

将来やりたいことのリスト：

• スマート貼り付け — ユーザーが他の単語の間にURLを含むテキストを貼り付けたことを検出し、URLのみを抽出する
• 一括貼り付け — 貼り付けられたURLのリスト（1行に1つ）から、複数の短縮リンクを同時に作成する
• 推奨スラッグ — 宛先ページのタイトルに基づいて、選択可能な3つのブランドドメイン末尾候補を提案する
• 自動OGプレビュー — URLを貼り付けた直後、クリックする前にOpen Graphカードのプレビューを表示する

これらすべてもまた「何の役にも立たない5行関数」です。全体として、OKなツールと毎日使いたくなるツールの違いはそこにあります。

やってみよう

何か貼り付け — allegro.pl または github.com または news.ycombinator.com。システムが自動的にプロトコルを追加し、処理を続行します。待ち時間なし、エラーなし、「再試行してください」のメッセージなし。

このUXの詳細タイプに興味がある場合は、hello@cutty.dev までお知らせください。次にどの方向に進むべきかをお知らせします。