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

ども。ブロガー初心者ポポです。

ブログをPCで作成して、スマホで暇な時に記事の誤字・脱字等の確認しているとURLにおかしな部分を見つけました。

URL欄の語尾に見慣れない文字列、、、

#google_vignette

『なんじゃこりゃ！？自分のブログ記事のURLにgoogle_vignetteなんてものはないぞ？！』

ここからが始まりでした・・・

結論から言います。Web知識ゼロの私がどれだけWebページ上を探しても答えは見つかりませんでした。
それでも、理解しようと努力した形跡についてここに記したい思います。

－2020.5.7追記

そして記事作成から４年の月日が経過しようとしていた時！ついに答えが見つかりました！

というより見つけた方が有難い事にコメントをくださったことにより解決する事ができました！

その答えとは、

「GoogleAdsense全画面広告表示時にURLにGoogleが付与するURLフラグメント」です！

気になる方は引き続きご覧くださいませ。

＃財前様、コメント及び解決にご協力いただき感謝致します！

「#google_vignette」との出会いや＃について

#google_vignetteとの出会い

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

404 Not Found

sample.jp

となっていました。

popo

な、なんじゃこりゃ！？

ちなみにブラウザはGoogleChromeを使用していました。

これが変に気になって調べ始めたというわけです。

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ページで検証してみた

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

先ほど#の使い方としてページ内遷移と述べましたが、じゃあページ内で「google_vignette」に遷移するようなname属性があるか？と言われると私の記事内にそんな記述は一切ありません。

そして検証として自分の記事URLに対して「#google_vignette」の記述がある場合とない場合でどのような違いがあるのかURL入力して試してみました！
その結果、、、

変化無し！

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

ページのソースを比較しても、もちろん差異なし。。チーン。。。ガクッ

ちなみにvignetteとは直訳すると、

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

さいごに

まとめ

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

http://sample.index.html

sample.index.html

#i-3

なるURLが出現してきました！
これはもしかすると記事内の目次で、ページ内リンクを生成しており、さっき確認しているときに「目次の３」をクリックしたからかも！？

、、、しかし確信できる情報は何もありません。。謎は深まるばかりです。
もしWEB上級者の方がこの記事を見られたのであれば、#google_vignetteについて何でもご教授いただけると幸いです。どうぞ、よろしくお願いします。

自分でも引き続き情報収集し、何か判明すれば追記させていただきます！

まとめ：追記

－２０２０年５月７日追記

と、４年近くの月日が過ぎようとしていましたが、とある方にコメントをいただき一気に答えが見つかりました！

#google_vignetteとはGoogleadsenseの全画面広告が表示される際に、広告掲載のためにブログ内に組み込んであるコードでJavascriptを実行し、その際にURLに#google_vignetteが付与されている。

という事だそうです。

全画面広告とはブログ等を見る時に画面いっぱいに表示され、「×」ボタンを押さないと消せないやつですね！（当時は確かに全画面広告を表示する設定にしていましたが、現時点では非表示にしています。閲覧者に不快に感じられたくないためです。）

そう考えるとvignette（ビネット）：「（演劇や映画中の）挿話、短い場面」

という意味も何となく理解できませんか？

ブログ記事閲覧中の挿話＝Google全画面広告

なんだかとてもスッキリとした気持ちになれましたー！！

わかりやすいコメントをくださった財前さまに心より感謝いたします！

そして、皆さまの参考になっていれば幸いです！！

以上、ポポでした！