755

私たちが今まで使用していた長くて複雑なFacebookのURLが次のようになっていることに気づきました。

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

私が思い出す限り、今年の初めには#、感嘆符のない、通常のURLフラグメントのような文字列(で始まる)でした。しかし、今ではシバンまたはハッシュバン(#!)になりました。これは、以前はシェルスクリプトとPerlスクリプトでしか見られませんでした。

新しいTwitterURLにも#!記号が含まれるようになりました。たとえば、TwitterプロファイルのURLは次のようになります。

http://twitter.com/#!/BoltClock

#!新しいFacebookとTwitterのインターフェースが主にAjax化されたため、特定のAjaxフレームワークなど、URLで特別な役割を果たしていますか?
これをURLで使用すると、Webアプリケーションに何らかのメリットがありますか?

4

6 に答える 6

489

この手法は現在非推奨です

これは、ページのインデックスを作成する方法をGoogleに指示するために使用されていました。

https://developers.google.com/webmasters/ajax-crawling/

この手法は、HTML5とともに導入されたJavaScriptHistoryAPIを使用する機能にほとんど取って代わられています。のようなURLの場合www.example.com/ajax.html#!key=value、GoogleはURLをチェックして、www.example.com/ajax.html?_escaped_fragment_=key=valueAJAX以外のバージョンのコンテンツを取得します。

于 2010-06-09T20:07:25.070 に答える
221

octothorpe / number-sign / hashmarkは、URLで特別な意味を持ち、通常、ドキュメントのセクションの名前を識別します。正確な用語は、ハッシュに続くテキストがURLのアンカー部分であるということです。ウィキペディアを使用すると、ほとんどのページに目次があり、次のようなアンカーを使用してドキュメント内のセクションにジャンプできます。

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turingページを識別しEarly_computers_and_the_Turing_test、アンカーです。Facebookやその他のJavascript駆動型アプリケーション(私自身のWood&Stonesなど)がアンカーを使用する理由は、ページをブックマーク可能にする(その回答へのコメントで示唆されているように)か、ページ全体をリロードせずに戻るボタンをサポートするためです。サーバー

ブックマークと戻るボタンをサポートするには、URLを変更する必要があります。ただし、ページ部分(のようなものを使用window.location = 'http://raganwald.com';)を別のURLに変更した場合、またはアンカーを指定せずに変更した場合、ブラウザはURLからページ全体をロードします。FirebugまたはSafariのJavascriptコンソールでこれを試してください。ロードhttp://minimal-github.gilesb.com/raganwald。次に、Javascriptコンソールで次のように入力します。

window.location = 'http://minimal-github.gilesb.com/raganwald';

サーバーからページが更新されます。次のように入力します。

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

あはは!ページの更新はありません!タイプ:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

まだ更新はありません。戻るボタンを使用して、これらのURLがブラウザの履歴にあることを確認します。ブラウザは、同じページにいるがアンカーを変更していることに気付くため、リロードされません。この動作のおかげで、ブラウザには1つの「ページ」にあるように見える単一のJavascriptアプリケーションを作成できますが、戻るボタンを尊重するブックマーク可能なセクションを多数持つことができます。ユーザーがさまざまな「状態」に入ると、アプリケーションはアンカーを変更する必要があります。同様に、ユーザーが戻るボタン、ブックマーク、またはリンクを使用してアンカーを含むアプリケーションをロードする場合、アプリケーションは適切な状態を復元する必要があります。

アンカーは、Javascriptプログラマーに、ブックマーク可能、索引付け可能、および戻るボタンに適したアプリケーションを作成するためのメカニズムを提供します。この手法には名前があります。これはシングルページインターフェイスです。

psこの手法には4番目の利点があります。AJAXを介してページコンテンツをロードし、それを現在のDOMに挿入すると、新しいページをロードするよりもはるかに高速になります。速度の向上に加えて、バックグラウンドで特定の部分をロードするなどのさらなるトリックをプログラマーの制御下で実行できます。

ppsこれらすべてを考慮すると、「バング」または感嘆符は、まったく同じページをサーバーからわずかに異なるURLでロードできるというGoogleのWebクローラーへのさらなるヒントです。Ajaxクロールを参照してください。もう1つの手法は、各リンクがサーバーからアクセス可能なURLを指すようにし、控えめなJavascriptを使用してアンカー付きのSPIに変更することです。

ここでも重要なリンクは次のとおりです。シングルページインターフェイスマニフェスト

于 2010-10-16T22:30:42.497 に答える
113

まず第一に:私はraganwaldによって引用されたシングルページインターフェースマニフェストの著者です

raganwaldが非常によく説明しているように、FaceBookとTwitterで使用されるシングルページインターフェイス(SPI)アプローチの最も重要な側面は、#URLでのハッシュの使用です。

この文字!はGoogleの目的でのみ追加されます。この表記は、AJAXを集中的に使用するWebサイト(極端なシングルページインターフェイスWebサイト)をクロールするためのGoogleの「標準」です。GoogleのクローラーがURLを見つけると#!、同じページの「状態」を提供する代替の従来のURLが存在することがわかりますが、この場合は読み込み時にです。

#!組み合わせはSEOにとって非常に興味深いものですが、Googleでのみサポートされています(私が知る限り)。JavaScriptのトリックを使用すると、任意のWebクローラー(Yahoo、Bing ...)とSEO互換のSPIWebサイトを構築できます。

SPIマニフェストとデモはGoogleのハッシュ形式を使用していません!。この表記は簡単に追加でき、SPIクロールはさらに簡単になります(更新:今すぐ!表記が使用され、他の検索エンジンとの互換性が維持されます)。

このチュートリアルを見てください。これは単純なItsNatSPIサイトの例ですが、他のフレームワークのアイデアをいくつか選ぶことができます。この例は、すべてのWebクローラーとSEO互換です。

難しい問題は、SEO用のプレーンHTMLとして(または選択された)「AJAXページ状態」を生成することです。ItsNatでは、同じサイトが同時にSPIまたはSEOベースのページになります(またはJavaScriptが無効になっている場合)。アクセシビリティのために)。他のWebフレームワークでは、ダブルサイトアプローチに従うことができます。1つのサイトはSPIベースで、別のページはSEOに基づいています。たとえば、Twitterはこの「ダブルサイト」手法を使用しています。

于 2010-10-17T09:04:05.513 に答える
90

このハッシュバン規則の採用を検討している場合は、非常に注意が必要です。

一度ハッシュバンすると、元に戻すことはできません。これはおそらく最も厄介な問題です。ベンの投稿は、pushStateがより広く採用されれば、ハッシュバンを残して従来のURLに戻すことができるという点を提唱しています。まあ、事実は、あなたはできません。先ほど、URLは永久に存在し、インデックスが作成されてアーカイブされ、通常は保持されると述べました。それに加えて、クールなURLは変更されません。私たちは、私たちのコンテンツへのすべての貴重なリンクから自分自身を切り離したくありません。いつでもハッシュバンURLを実装したことがある場合は、リンクを壊さずにURLを変更したい場合は、ドメインのルートドキュメントでJavaScriptを実行するしかありません。永遠に。それは決して一時的なものではなく、あなたはそれに固執しています。

URLを醜く、場合によっては壊れてしまう可能性があるため、ハッシュバンの代わりにpushStateを使用することをお勧めします。これは、ハッシュバンの巨大で永続的な欠点です。

于 2012-02-24T21:34:35.623 に答える
16

これらすべてについて良いフォローアップを行うために、Twitter(hashbang URLとシングルページインターフェイスのパイオニアの1つ)は、hashbangシステムが長期的には低速であり、実際に決定を覆して戻ってきたことを認めました。昔ながらのリンク。

これに関する記事はこちらです。

于 2012-05-31T09:51:02.960 に答える
9

私は常に、サイトのルートまたはドメインの代わりに、!後続のハッシュフラグメントがURLに対応していることを示していると想定していました。!理論的には何でもかまいませんが、Google AJAXCrawlingAPIはこのように気に入っているようです。

もちろん、ハッシュは実際のページのリロードが発生していないことを示しているだけなので、そうです、それはAJAXを目的としています。編集:Raganwaldはこれをより詳細に説明する素敵な仕事をしています。

于 2010-10-16T22:31:25.640 に答える