Developer's Blog

美しい URL って、どんな URL だろう?

こんにちはこんにちは! エンジニア川端です。
前回は「目で見てわかる」と言いつつビミョーにわかりづらいネタでした。

今回は「美しさ」について。
Software meets Design」を標榜するフェンリルの一員として、イチ技術者が考える URL の美しさをお届けしたいと思います。

とは言うものの、なかなかうまくお伝えする文章も書けないものでして、仕方ないので、架空の人物が架空のサイトを作っていく過程をツラツラと書いてみます。

「美しさ」や「わかりやすさ」の感じ方は人それぞれですし、システムとしてどう作りこんでいくのがよいのか、というのも色々な考え方があるのではないかと思います。
みなさんは、後述する 10 ステップの、どの段階の URL がお好みでしょうか?
それとも、ここにあげた例とは別の考え方で URL 設計をされているでしょうか?
私自身は、あらためて考えなおしてみると、一概には言えないよなぁ……と。けっこうブレブレです。

ともあれ、少しでもわかりやすいようにお題を「日記」と設定して、話を進めましょう。
絶妙な尻切れトンボ感を楽しんで頂きつつ、URL 設計する際の一助にして頂ければ幸いです。

……てか、こんな話をしているヤツが「post_51.html」なんて URL でいいのか!


1. 全部 HTML で作り始める

川端くんはナルシストなので、自分の素晴らしい一日をサイトで公開しようと思いました。でも、サイトの作り方なんかよくわからないので、市販のナントカビルダーで HTML を作って公開開始です。

http://example.jp/nikki/mokuji.html
http://example.jp/nikki/1.html
http://example.jp/nikki/2.html
http://example.jp/nikki/3.html

2. PHP を覚えたので、いろいろやってみたくなった

あまり見てくれる人がいないのは、ページにいろんな仕掛けがないからだと勘違いし、PHP を覚えます。覚えたら使いたくなるもので、特に意味もなく、全ページを PHP にしてみました。

http://example.jp/nikki/mokuji.php
http://example.jp/nikki/1.php
http://example.jp/nikki/2.php
http://example.jp/nikki/3.php

3. 日記スクリプトみたいなものを作れる程度に上達した

サイト訪問者はいっこうに増えず、面倒になってきましたが、なんか引込みがつかなくなってます。せめて書くのが楽になるように、多少上達してきた PHP で、日記を更新する仕組みを作りました。

http://example.jp/nikki/mokuji.php
http://example.jp/nikki/nikki.php?page=1
http://example.jp/nikki/nikki.php?page=2
http://example.jp/nikki/nikki.php?page=3

4. 一つのスクリプトにまとめてみる

日記を更新することより、PHP で色々している方が楽しくなってきた川端くん。「目次だけ別になってるのってムダだよね」と思い、一つのスクリプトにまとめてみました。
ついでに「世界中の人に見てもらうぜ!」と、nikki から diary に変更。でもサイトの内容は日本語だけです。

http://example.jp/diary/diary.php?mode=contents
http://example.jp/diary/diary.php?mode=view&page=1
http://example.jp/diary/diary.php?mode=view&page=2
http://example.jp/diary/diary.php?mode=view&page=3

5. コンテンツの内容と URL の関係が気になり始める

「diary/diary.php って、diary が連続してるのってなんか変。それに、日記なんだから、年月日で見たいこともあるよね?」と思い、色々変更してみます

http://example.jp/diary.php?mode=contents
http://example.jp/diary.php?mode=view&page=1
http://example.jp/diary.php?mode=view&page=2
http://example.jp/diary.php?mode=view&page=3
http://example.jp/diary.php?mode=dateview&date=20110701

6. モードが増えすぎて頭を抱える

その後も当初の目的を忘れ、スクリプトの改良に取り組む川端くん。たくさんのモードをつけすぎて、もう何がなんだかわかりません。URL を見ていると、自分でも頭が痛くなりそうです。

http://example.jp/diary.php?mode=categoryview&category=facebook&page=16&viewmode=summary

なんとかならないか、と調べているうちに、PATH_INFO というものを覚えました。

http://example.jp/diary.php/date/2011/07/01
http://example.jp/diary.php/category/facebook/1
http://example.jp/diary.php/category/facebook/2

7. 拡張子はなくてもいいよね?

ちょっと URL がすっきりしたので気分がよくなり、もっとシンプルにできないかと考え始めました。
diary.php の「.php」っていらないよね、と思い、Apache の設定ファイルでなんとかするワザを覚えます

<FilesMatch "^diary$">
ForceType application/x-httpd-php
</FilesMatch>

http://example.jp/diary/date/2011/07/01
http://example.jp/diary/category/facebook

8. 書かなくても意味がわかることって、あると思うの

やり始めると歯止めがききません。
「2011/07/01 って書いてたら、普通日付でしょ」
「 catetory って、わざわざ言わなくてもいいよね」

http://example.jp/diary/2011/07/01
http://example.jp/diary/facebook

9. PHP に飽きました

とかやってるうちに PHP に飽きてきました。
「国産こそ至高」と、ruby の勉強を始めしたが、まだ難しいことはわからないんで、ひとまず CGI として動かします。「diary.cgi」が URL に出てしまうと昔に逆戻りなので、Apache の設定を書き換えました。これで、今までと同じ URL でサイトを公開できました。でも訪問者数はまったく変わりません。

<FilesMatch "^diary$">
ForceType cgi-script
</FilesMatch>

10. JavaScript というものを学ぶ

世の中すっかり JavaScript。あんなに嫌われていたのがウソのようにあちこちで JavaScript が当然のように使われています。川端くんも jQuery などを勉強したくなり、サイト全部を作り直し始めました。もはや目的がなんだったのかわからなくなっています。
色々やっていたら、アドレスバーに表示される URL はまったく変わらず、ページ内ですべてクリクリ切り替わるようになりました。

http://example.jp/diary/

美しい URL とは?

いろんなことを試しているうちに、同じコンテンツを指し示す URL に色々な表現方法があることを学びました。
日記サイトではなく、検索サイトだったらどうなるんだろう? 複数のタグの時は?

川端くんの「美しく機能的な URL」を探求する旅は、まだ始まったばかりです。

Copyright © 2019 Fenrir Inc. All rights reserved.