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

ひとり勉強会

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

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

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

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

#google_vignette

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

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

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

-2020.5.7追記

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

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

その答えとは、

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

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

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

「#google_vignette」や#について

#google_vignetteとの出会い

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

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

となっていました。

popo
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が付いた状態でインデックスされたページ(とある方のブログの1記事)を発見したので、そちらのURLでも記述がある場合ない場合で試してみましたが変化無し。。。

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

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

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

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

さいごに

まとめ

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

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

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

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

まとめ:追記

-2020年5月7日追記

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

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

という事だそうです。

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

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

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

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

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

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

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

以上、ポポでした!

その他、ひとり勉強会シリーズについては下記からもどうぞ!

【祝】ブログ月間1000PV達成とアクセス数アップのために取り組んだ3つのこと
こんばんは、コーヒー分析職人ポポです。 なんと、当ブログが5月に開設してから約5ヶ月が経とうとしていた矢先、ついに 9月の月間PV数が1000を越えました! こんなしょーもないコーヒー分析ブログでも何かしら見てくださった皆様に...続きを読む
スポンサーリンク
スポンサーリンク
ひとり勉強会
ポポをフォローする
【100種類から】あなたに合う市販ドリップコーヒー探します!

コメント

  1. 財前航介 より:

    自分は以下の語学学習用のウェブサイトを運営していて、「#google_vignette」に良く出会います。
    https://z-apps.lingual-ninja.com/

    結論としては、「#google_vignette」は、Google AdSenseが出しているものだと思いますよ。

    AdSenseの自動広告をONにしていると、スマートフォンで自分のサイト内のリンクをクリックした際に、画面全体に広告が出ることがありませんか?
    右上の「×」ボタンを押すと、元のサイトに戻るような状態です。

    画面全体に広告が表示されているときのURLを確認すると、末尾に「#google_vignette」が付与されていると思います。

    AdSenseの広告を出す際には、ポポさんのサイト内にGoogleから提供されているモジュールを埋め込んでいると思いますので、Googleが勝手にJavaScriptを実行できちゃいます。
    そのGoogleのJavaScriptが、ポポさんのサイトのURLの末尾に「#google_vignette」を付与しているのだと思います。

    ちなみに、AjaxやGoogleMAPの話は、「画面内遷移」とは少し違うかもですね(^^;)

    Ajaxは、画面を遷移せずに、サーバーからデータを持ってくるための手法です。
    「JavaScriptでサーバーからデータを持ってくる仕組み」という感じです。

    特に「#」と深い関係がある話題ではないように思います。

    「#」を用いる「画面内遷移」というと、分かりやすいのは、ブログの各記事の上の方に設置する「目次」ではないでしょうか。

    記事内の各セクションにジャンプできるやつです。

    上記の僕のサイトの例で言うと、以下のページのようなやつです:
    https://z-apps.lingual-ninja.com/vocabulary-list

    「Index」っていうところから、画面内の各項目のタイトルにジャンプできると思います。
    このジャンプの際に、特にサーバーとのやり取りはしていないため、ここでAjaxは登場しません。

    ただ、画面内でジャンプ(画面内遷移)しているだけです。

    長くなってしまってすみません!
    何かポポさんのヒントになることがあれば幸いです。

    • ポポポポ より:

      >財前さま
      こんばんは。本記事の管理人ポポです!
      この度は大変貴重なコメントをいただきありがとうございます!!
      なるほどですねー!
      財前さんの”adsense全画面広告の際に付与されるもの”というお話と”vignette=挿話”という意味からも全てが繋がった気がします!

      またajax辺りの話はご指摘いただきました通り訂正したいと思います。。笑
      ページ内遷移についても目次⇒該当箇所へのジャンプというイメージでとても理解しやすかったです!!

      ご丁寧にコメントいただきありがとうございます!
      感謝いたします!

      P.S:財前さまの語学学習ページも少し拝見させていただきました。外国人の方からしたら大変貴重なサイトだと感じました!