読者です 読者をやめる 読者になる 読者になる

ビューティフルWebコード

美しいWebサイトのコーディングについて説明をしていきます。

URL設計 画面のURLの命名規則を決めよう Action名はパターン化しよう!

Action名をパターン化する!

入力新規->確認->完了 の画面遷移がたくさんあるサイトだったとします。CMSとかですかね。

  • 登録は /●●●/input -> /●●●/confirm -> /●●●/completed

といったルールを決めておくとよいです。

統一されていると嬉しいこと

  • ソースが読みやすい コントローラを開いたときに、入力新規は input、確認はconfirm、完了はcompleteといったルールが決まっているとすぐに該当のソースを確認できる。
  • 機能追加要件でのURL設計が楽。「ああ入力フォーム系か。Controller名さえ決めればいいなあ。Actionは決まってるからコピペ。」
  • 機能追加の実装が楽。「とりあえず、別のコードをパクって参照するmodelのクラスを実装すれば動くぜ!」

実際に画面の種類を洗い出す!

画面の要件定義から画面一覧をエクセルなどでまとめてみると、大抵、同じような画面が多い事に気づきます。

よくある種類の画面をピックアップしてみます。

コンテンツ表示
  • TOP画面系(いろいろ詰め込まれている、menu的な意味になったり、yahooのようなポータルになったり、facebookのような個人ページだったりします)
  • 一覧画面(記事やコンテンツの一覧を表示する画面です。)
  • 詳細画面(記事やコンテンツの1つを表示します。おすすめ記事や、同じカテゴリのトップ記事など一覧の機能が付加されていることもあります)
  • 単体の画面(このサイトについて、利用規約、会社概要、紹介画面、有料会員訴求など)
form入力
  • 入力新規画面(質問や、日記などを投稿します。パスワード変更など設定系も含まれます。)
  • 確認画面(入力内容を確認する画面です。確認画面を挟まないこともあります。)
  • 完了画面(完了したことを表示する画面です。)
  • 入力編集画面(設定内容を変更するなどの画面です。編集後、確認画面、完了画面と画面遷移することもあります)
その他
  • 認証関連(ログイン、ログアウト)
  • エラーページ(404 Not Found, 500 Internal Server Error など)

JavascriptMVCを使ったシングルページ実装などもあるので、投稿機能自体がTOPや一覧に含まれることもあります。

具体例

たとえばスポーツニュースサイトの画面構成を考えてみましょう。

  • サイトTOP画面(プロ野球結果速報、Jリーグ結果速報、相撲、、、、、、、)
  • 各スポーツ別TOP画面(プロ野球TOP、JリーグTOP、、、)
  • 各記事一覧(試合結果一覧、各ニュース記事一覧)
  • 詳細画面
  • お問い合わせフォーム

といった具合ですね。

サンプルでAction名を提示します!

  • TOP画面系 index
  • 一覧画面 index, list, etc...
  • 詳細画面 article, item, detail, etc...
  • 単体の画面 各々適当な名前をつけてください。
  • 入力新規画面 input,create, entry, new, insert, post, index(Action名省略という意味)
  • 確認画面 confirm,conf,check, review, etc...
  • 完了画面 finished, completed, end, thanks, etc...
  • 入力編集画面 input?id=xxxx(新規はid無し), edit, update, put, etc....
  • 認証関連 login, logout, auth, etc
  • エラーページ 404, 500 (これはアクセスしたURLでリライトするのか、リダイレクトさせるのか方針による)

Action名を決める場合、たとえば入力新規はHTTPMethodを意識してpostにしたら、編集はputにするとか、
CRUDを意識して create,update にするとか、ポリシーに従ったルールを決めると良いと思います。

また、URL一覧をexcelで管理し、controller名、actiom名を別セルで入力し、URLを自動生成させるようにしておくなどの工夫をすると、命名規則を管理しやすく、イレギュラー対応などが即時にできるようになります。