JavaScript

hash.js活用ガイド: URLハッシュ操作の最適化手法とjQuery実装テクニック

  /

ページの読み込みを伴わないURLの操作は、ユーザビリティやコンテンツの表示切り替えに役立ちます。
この記事では、hash.jsを用いて、URLにハッシュ(#)を追加し、ページURLの取得・操作の方法を詳しく解説します。

Contents

ハッシュ操作の背景

一般的に、ウェブページの内容を切り替える際には新しいページが読み込まれるのが通常ですが、hash.jsのようなツールを使用することで、ページのリロードを伴わない操作が可能になります。これは、SPA（Single Page Application）のようなモダンなウェブアプリケーションで特に役立ちます。

ハッシュを操作するCSSの設定

まず、ハッシュを操作するエリアのデザインを設定します。以下は、ハッシュ操作エリアを示すためのCSSです。
#idHshエリアをクリックするとURLにハッシュ（#）を付けます。

<style type="text/css">
<!--
#idHsh{
	cursor:pointer;
	margin:auto;
	width:150px;
	height:150px;
	border:dotted 1px #333333;
}
p{
	padding-top:50px;
	font-size:14px;
}
-->
</style>

JavaScriptによるハッシュ操作

hash.jsを利用して、ハッシュ操作を実装します。以下のスクリプトは、hash.jsとjQueryを用いたハッシュ操作の基本的な実装を示しています。
#idHshエリアをクリックするとURLにハッシュ（#）を付けます。Hash.on(“#+URLに追加する文字”)でURLを操作します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="hash.js"></script>
<script type="text/javascript">
$(function(){

	var cnt=1;

	$("#idHsh").click(function(){
		Hash.go("/page/"+cnt);
		cnt=cnt+1;
	});

	Hash.on("/page/([0-9]+)$",
		function(path, parts) {
		alert("URLに付くハッシュは "+parts【1】※+" でパスは "+path+"です。");
	});

});
</script>

　
※【】は半角の[]を記述します。

HTMLの設定

次に、ハッシュ操作エリアを表示するHTMLを設定します。

<div id="idWrap">
	<h1>下のエリアをクリックするとURLに任意のハッシュが付きます。</h1>
	<div id="idHsh">
		<p>このエリアをクリック</p>
	</div><!--/idHsh-->
</div>

ソース元：hash.js

ハッシュ操作に関連するプラグインやライブラリは多数存在しますが、この記事で紹介しているhash.jsのソース元は以下になります。

ソース元：hash.js

URLにハッシュ（#）を付けたり・取得したり操作するデモページ

実際の動作を確認したい方は、以下のデモページでhash.jsの動作を確認することができます。

URLにハッシュ（#）を付けたり・取得したり操作するデモ

SEOにおけるハッシュ操作の意義

ハッシュ操作を行うことで、1ページ内でコンテンツの切り替えが可能となります。また、ブラウザの戻るボタン（ヒストリーバック）の対応や、SEOの観点から1ページでの内容変更が複数ページとして認識されるかどうかの検証も必要です。

最後に

ハッシュを利用したURL操作は、モダンなウェブ開発の中で非常に有効な手法となっています。特にSPAの開発においては、ページ遷移の感覚を持たせつつ、実際にはページのリロードを行わないという利点があります。このような技術の導入により、ユーザビリティの向上や、SEO対策の一環としての活用が期待されます。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

#ハッシュ hash.js
関連記事