【URLフラグメント?アンカーハッシュ?】#google_vignetteについて調べてみた

ひとり勉強会

パソコンども。ブロガー初心者ポポです。
ブログをPCで作成して、スマホで暇な時に記事の誤字・脱字等の確認しているとURLにおかしな部分を見つけました。
URL欄の語尾に見慣れない文字列、、、

#google_vignette

「なんじゃこりゃ!?自分のブログ記事のURLにgoogle_vignetteなんてものはないぞ?!」
ここからが始まりでした。。。
結論から言います。Web知識ゼロの私がどれだけWebページ上を探しても答えは見つかりませんでした。
それでも、理解しようと努力した形跡についてここに記したい思います。




#google_vignetteとの出会い

先ほども少し述べましたが、スマホで自分が書いた記事の体裁等をチェックしていた時のことです。
戻るキーを押したのかな?ページが変わらず、おかしいなとふとURLを見ると

http://sample.jp/sample/○○○#google_vignette

となっていました。ちなみにブラウザはChromeを使用していました。
これが変に気になって調べ始めたというわけです。

URLの語尾の#の意味

そもそもURLの語尾につく「#」にはどのような意味があるのか確認しました。

「#」以下はfragment identifierという特殊な意味を持つ記号

だそうです。
なんのこっちゃよく分かりません。もう少し確認すると、
javascriptで使う用語では#以下を「ハッシュ」と呼ぶそうで、
WEB業界の技術用語として正式な名称は「URLフラグメント」と呼ぶようです。
頭が痛くなります。。

#の用途

その#ですが、通常はアンカーハッシュと呼ばれる使い方で、
”location.hash”という命令をページのソースに書けばページ内でそこまでジャンプして表示できるようです。
例:同一ページ内(例えばhttp://sample.index.htmlだとする)で下部にある見出しに付けられたname属性「about」までジャンプするときにはhttp://sample.index.html#aboutなどとして使われるようです。

またAjaxアプリケーションで用いられる#は画面遷移ではなくページ内遷移を実行できるようです。
これはイメージとしてGoogleMAPをご想像頂ければと思います。
ほら、GoogleMAPってスライドする度に画面は切り替わらないけどスムーズに隣のエリアが表示されますよね?あれがページ内遷移です。
ちなみにAjaxとはAsynchronous JavaScript + XMLの略でエイジャックス、アジャックスと読みます。Asynchronousとは非同期という意味ですね。文字通りスマホを操作してる人の動作とWebサーバーの動作が息ぴったりじゃなくても次々と情報がやり取りできるようです。
XMLとJavaScriptの組み合わせでよりWeb上のデザイン、閲覧性をよくする手法・やり方で、インストールして使うとかそういうものじゃないようです。(Web初心者の私にはこの理解が限界です。。。涙)
そしてGoogleMAPはAjaxが広く認識されるきっかけとなったそうですよ!

少し話が逸れました、、、

#google_vignetteがあるver.とないver.のページの違い

先ほど#の使い方としてページ内遷移と述べましたが、じゃあページ内で「google_vignette」に遷移するようなname属性があるか?と言われると私の記事内にそんな記述は一切ありません。
そして実験として自分の記事URLに対して「#google_vignette」の記述がある場合とない場合でどのような違いがあるのかURL入力して試してみました!
その結果、、、

変化無し!

Web検索でURL末尾に#google_vignetteが付いた状態でインデックスされたページ(とある方のブログの一記事)を発見したので、そちらのURLでも記述がある場合ない場合で試してみましたが変化無し。。。

ページのソースを比較しても、もちろん差異なし。。チーン。。。ガクッ
ちなみにvignetteとは直訳すると

vignette(ビネット):
「(書物の章頭・章尾の)小さな飾り模様、小さなかわいらしい絵」
「(演劇や映画中の)挿話、短い場面」、「ジオラマ」

などという意味があるようです。
う~ん、、、記事の章頭のかわいらしい絵?わからん。。。

まとめ

と、言うことで色々と調べてはみたものの大した情報は掴めず、#googel_vignetteの謎は深まるばかり。。
実はさっきもう一度スマホからchromeにて自分の記事を見て「戻る」最中、URLを注視していると

http://sample.index.html#i-3

なるURLが出現してきました!
これはもしかすると記事内の目次で、ページ内リンクを生成しており、さっき確認しているときに「目次の3」をクリックしたからかも!?
、、、しかし確信できる情報は何もありません。。謎は深まるばかりです。
もしWEB上級者の方がこの記事を見られたのであれば、#google_vignetteについて何でもご教授いただけると幸いです。どうぞ、よろしくお願いします。
自分でも引き続き情報収集し、何か判明すれば追記させていただきます!

以上、ポポでした!




あなたに合った市販コーヒーを50種類から探します!というページを作りました!よろしければご自身の理想のドリップコーヒーを探してみてください!

スポンサーリンク
スポンサーリンク
ひとり勉強会
ポポをフォローする
【100種類から】あなたに合う市販ドリップコーヒー探します!

コメント