karasuyamatenguの日記

 | 

2011-02-12

さらなる「#!」URL批判

07:59

このブログはlifehackerを含むgawkerメディア系サイトの#!URLへの移行を批判している。

http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs/

以下、isolaniとテングの見解をごっちゃ混ぜに紹介する。

lifehacker他のgawkerメディアサイトが数日前に長時間におよびアクセス不能になった。(厳密に言うとページ内のコンテンツアクセス不能になった) #!URLベースのサイトはJavaScriptにエラーがあるとコンテンツが一切ロードせずのっぺらぼう状態になってしまうようだ。

#!について

  • 「#!」は何で呼ぶの? shebangと綴られる。
    • Hash=# Bang=!の略
    • 発音すると「シバン」といったところか。(ちなみにUnixの#!とは無関係)
  • 以下「#URL」は:
  • #!
    • グーグルが公開した#URLをクロールできるようにするスペックのこと
    • #URLの殆どは#!と表記されているで#URLと#!URLをinterchangablyに呼んでいる。

#!の短い歴史

Googleの警告

Googleは上記の#!スペックで"progressive enhencement"を奨励している。まず、基本的なURLHTMLでナビゲーションできるようにする。さらにユーザの体験を向上させたかったらその上でJavaScriptAJAXを使う。これらが揃っていない環境(クローラJavaScript非対応ユーザエージェント)などでもコンテンツがアクセスできることが原則のサイト作りを奨励している。

なんか勘違いしているんじゃない?

つまり、#!はサイトのアーキテクチャを根本的に間違え(GoogleBotに見えなくなりSEO効果を逃し)たサイトに投げられた命綱だ。しかしFacebookTwitterそしLifehackerなどのデベロッパはこの命綱をゴーサインと勘違いして#!街道を爆進しはじめた。

lifehacker URLの変遷

あまりカッコよくない。なんか昔のaspURLみたい。10年にわたるクリーンなURLの実績を捨ててASPサイトのような醜いURL構造にしたことになる。全然綺麗なURLなんかじゃない。googleの#!スペックでは#!URLを「綺麗なURL」と呼んでいるがその背後には汚いものが潜んでいる。

#!サイトの問題

  • GoogleBot以外の(#!スペックに準じていない)クローラ、アグリゲータなどのボットがサイトをコンテンツをアクセスできなくなる
  • ブラウザ外のキャッシュができなくなる (これは深刻)
  • Microformatsが使い難くなる
  • FacebookのLike widgetsなどが難しくなる
  • Refererにページレベルの情報が無くなる (これも深刻だ)

完璧なJavaScriptに依存するコンテンツ

  • エラーのない完璧なJavaScriptがないと何も見れなくなる
  • lifehacker等の月曜の5時間のダウンタイムはJavaScriptのエラーによるものだった
  • arrayの終りに,が残っているだけでIEユーザには真っ白な画面しかみえなくなる
  • デベロッパconsole.logを間違えて残してしまうと殆どのユーザが真っ白な画面を見ることになる
  • サイト管理者のコントロール下にない広告のJavaScriptにエラーがあるとコンテンツが見れなくなる

以下テングの結論

結論1: gmailみたいに個人情報を扱うアプリなら#!使ってもいい

結論2: 情報公開系サイトでは#!を使わない方がいい

そもそも出版系サイトにおける#URLの意味がわからない。HTML再ロード無しにページを変えて、それをURLバーに表示したいから? それって、HTMLのロードが重いサイトのパフォーマンス問題をajaxカバーするためのまやかしなんじゃない? 理由はともあれ、#URLの乱用に対するバックラッシュ英語圏ブログ界や日本でも感じられる。

若いデベロッパーはとにかく新しいものに飛び付く傾向があって、そのお陰、進歩があっていいんだが、「URLとドキュメントの対応」という昔からの原則に少し恐れを抱いた方がいいと思う。

最後に:「コンテンツがcurlでロードできなければそのサイトは壊れている」-Ben Ward

反応

わざきたわざきた 2011/02/12 21:23 >「#!」は何で呼ぶの? 英語では「シバング」と読む
"shebang"ですよね?
"bang"を「バング」とはあまり読まない気がします。

ゲストゲスト 2011/02/13 01:47 なぜ「#」ではなくて!を含めた「#!」が流行っているんでしょうか

zebevoguezebevogue 2011/02/13 08:19 わざきた氏に同意。

karasuyamatengukarasuyamatengu 2011/02/13 08:25 わざきたさん: そうshebangです。確かにグはおかしいですね。じゃあ、シバン? それもおかしい? じゃあ、ローマ字にしておきましょう。

karasuyamatengukarasuyamatengu 2011/02/13 08:29 ゲストさん: 上にも書いたんですが、昔は#の後をjavascriptに解釈させていた記憶があります。グーグルがそういうのをクロールできるのように#!規格を提案して広がたんだと思います。その際、#の後を全てクローラに特別扱いさせると伝統的な#フラグメントとかで変なことがおきるので、それまであまり発生していなかった#!というシーケンスを特別扱いの対象に決めたんだと思います。

ゲストゲスト 2011/02/13 12:30 タイポ?「クローラ・キャッシュがきなかったり」「そのお陰し進歩が」

karasuyamatengukarasuyamatengu 2011/02/13 15:43 ゲストさん: ご指摘がりがとうございました。直しておきました。

ゲストゲスト 2011/02/13 18:00 なるほど、#は同一ページでの異なる位置、#!は異なる内容のページ、を表す感じでしょうか。回答ありがとうございます。

karasuyamatengukarasuyamatengu 2011/02/14 03:55 ゲストさん: 使われ方から見るとその記述が的確ですね。すごく分かり易い表現だと思います。使わせてください。

qnighyqnighy 2011/02/14 18:25 githubのページが#を使わずに状態遷移していて好きです。

 |