HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

jQueryプラグイン「RWD Image Maps」を利用すれば、簡単にイメージマップリンクをレスポンシブ対応させることができます。

例えば、以下のように100×100のサイズの画像「sample.jpg」に対してイメージマップを用意します。

<img src="sample.jpg" usemap="#sample" alt="サンプル" >
<map name="sample">
<area href="sample1.html" shape="rect" alt="四角形のリンク" coords="10,10,30,30">
<area href="sample2.html" shape="circle" alt="円形のリンク" coords="50,50,10">
<area href="sample3.html" shape="poly" alt="多角形のリンク" coords="60,60,80,80,70,90">
</map>

画像に対して、四角形のリンク、円形のリンク、多角形のリンクの3つのエリアを設定しています。
通常だと、これをレスポンシブ対応のサイトに設置し、画面の大きさに応じて画像サイズを拡縮した場合、イメージマップのリンクエリアがズレてしまいます。

このような場合に、以下のプラグインを導入することで、簡単にイメージマップをレスポンシブ対応することができます。

GitHub – stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin

5年ほど前に以下の記事を書きました。
jQueryプラグイン「jquery.cookie.js」でお手軽にクッキーを操作する
久しぶりに公式サイトをのぞいてみるとjQueryを使わない、JavaScriptのプラグインとして開発が移っていたようです。

js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

改めて、便利な使い方を確認したいと思います。

導入方法

導入方法はとても簡単です。
上記サイトから「js.cookie.js」をダウンロードして読み込みます。

<script type="text/javascript" src="/js/js.cookie.js"></script>

cookieの操作だけが目的の場合に、jQueryを読み込まなくてもよいので容量が軽くて済みます。また、jQueryのバージョンなどベースライブラリの依存も考慮する必要もなくなりました。

画像サイズを変更せずにCSSのborderで画像の枠を装飾するテクニックです。

リンク画像にマウスオーバーでborderをつけることがよくありますが、
リンクエリアのサイズを変えずに、かつ、画像サイズを変えずに、となると少しテクニックが必要です。

例えば以下のような例です。
マウスオーバーで10pxの太さの赤いborderを表示させていますが、カクっとサイズが変わる感じが嫌ですね。

てんとう虫
※分かりやすくするために極端な太さを例にしています。

単純にaタグにボーダーを追加してしまうと、その分だけリンクエリアが広がってしまいます。
てんとう虫

そこで、以下のようにCSSを用意してあげれば、borderを追加してもリンクエリアのサイズは変わりません。

JavaScriptやjQueryでクリックイベントを設置した際に、そのイベントを子要素、孫要素へ伝播させないための処理を紹介します。

よくあるケースとして、ライトボックスのようなしくみを構築したときを考えます。
ブラウザの画面全体をグレーアウトして、その上のレイヤに画像、動画やフォームなどのコンテンツを配置します。

<div class="lightbox">
	<div class="grayout">
		<div class="contents">
画像、動画やフォームなどのコンテンツ
		</div>
	</div>
</div>

今回はjQueryで、グレーアウトしたエリアをクリックすると、ライトボックスをクローズするような処理を追加します。

$('.grayout').click(function(){
	$('.lightbox').fadeOut();
});

しかし、そのままではコンテンツエリア「class=”contents”」までイベントが伝播してしまい、コンテンツエリアをクリックしてもクローズしてしまいます。
そこで、コンテンツエリアをクリックしてもイベントが発生しないように以下の処理を追加します。

$('.contents').click(function(event){
	event.stopPropagation();
});

これで大丈夫です。
忘れてしまいがちなので、メモまで。

Googleマップストリートビューで表示可能な目的地近くの座標を取得する方法です。

ストリートビューを使ったことのある人はご存知と思いますが、ヒト型のマーカーをストリート上のブルーのラインの上にドラッグしてストリートビューを表示させます。
ストリートビューは全ての座標で表示可能ではありません。ブルーのラインの範囲にポジションを置かないと正しく表示されないのです。
つまり、APIで範囲外の座標位置を指定してしまうと、ストリートビューを表示できずにエラーになってしまいます。

APIを開発する上で、このエラーを避けるために「StreetViewService」の関数「getPanoramaByLocation」を利用することで、目的の近くのストリートビュー表示可能座標を取得することができます。

ストリートビュー表示可能ポイントを取得する

例えば、以下のような処理で考えてみます。

最近話題のリッチスニペット(構造化データ)ですが、Googleも採用に積極的のようで、SEO的観点からも注目されています。
そこで、今回、導入編としてGoogleのガイドラインに習ってパンくずリストを装飾して、Google検索結果への影響を試したい思います。
Breadcrumbs | Structured Data | Google Developers

例えば、以下のようなパンくずを装飾します。

HOME > Structured Data > sample1 > sample2 > リッチスニペット(構造化データ)でGoogle検索結果にパンくずリストを表示させる 

装飾にはJSONやRDFAが使えるようですが、今回は比較的導入が容易なMICRODATAをhtmlソースに組み込みます。

以下、これまでのhtmlコードです。

<ol class="breadcrumb">
<li><a href="http://web.helog.jp">HOME</a></li>
<li><a href="http://web.helog.jp/category/structured-data/">Structured Data</a></li>
<li><a href="http://web.helog.jp/category/structured-data/sample1/">sample1</a></li>
<li><a href="http://web.helog.jp/category/structured-data/sample1/sample2/">sample2</a></li>
<li>リッチスニペット(構造化データ)でGoogle検索結果にパンくずリストを表示させる</li>
</ol>

横並びの要素の高さがバラバラの場合、表示崩れの原因になることがしばしばあります。
テーブルにしてしまえば楽なのですが、要素をfloatさせてレスポンシブ対応していたり要素数を動的にしている場合などは、一筋縄ではいきません。

そのような場合はjQueryプラグイン「jquery.tile.js」が便利です。
jquery.tile.js Demo page

上記のデモページを見れば分かりますが、例えば以下のようなコードの場合、

.sample{
	clear: both;
}
.sample p{
	float: left;
}

<div class="sample">
<p><img src="sample-height-100.jpg"></p>
<p><img src="sample-height-200.jpg"></p>
<p><img src="sample-height-100.jpg"></p>
<p><img src="sample-height-300.jpg"></p>
<p><img src="sample-height-100.jpg"></p>
...
</div>

デザイン性からフォームの「select」を装飾することがしばしばありますが、CSSのみでの装飾には限界があります。
それがIE7やIE8など、古いブラウザに対応させるとなるとなおさらの事です。

装飾にJSを利用するのはあまり好きではありませんが、最終手段として重宝しているのがjQueryのプラグイン「customSelect」です。
jQuery Custom Select Box Plugin – jQuery.customSelect()

しくみとしては、スクリプトで既存のselect句の上に空のレイヤーを重ねて、それを装飾できるようにしています。
また、そのレイヤーを選択した場合にselectのような挙動をさせて、既存のselect句のvalueと同期するように制御してくれます。

導入方法については公式サイトにもありますが、いたって簡単です。

HTML5の新機能「Geolocation API」を使用して位置情報を取得します。

HTML5が公開され、いくつかの新機能が策定されましたが、中でもその有効性が期待されているのが「Geolocation API」です。

これまでの位置情報取得技術

一昔前までは、Webブラウザで現在地を取得する方法としては、例えばマシンのIPアドレスから位置を特定する方法がありました。しくみはとても単純で、IPと位置情報の紐づけはデータベース化されており、その精度はデータ量によるというものでした。
そのため、IPがプロキシサーバで偽装しているなどの場合に、正確な位置情報を決定できないという問題などがありました。

その他理由からも、ブラウザから正確な位置情報を取得するということは、当時は困難であり、サービスコストのかかる技術だったといえます。

処理進捗やLoading状態を表現するプログレスバーですが、今回はBootstrapのプログレスバーの長さをjQueryでアニメーション制御します。

こちらがBootstrapのデフォルトのプログレスバーです。

30% Complete
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
    <span class="sr-only">30% Complete</span>
  </div>
</div>

このバーの長さを制御するためには、単純にwidthの値をJavaScriptで変更するだけで良いです。
BootstrapでデフォルトのTransitionプロパティが指定されているので、CSS3が有効なブラウザ上でwidthの指定だけでアニメーション効果が得られます。

Monthly Archives

Search