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

最近話題のリッチスニペット(構造化データ)ですが、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の指定だけでアニメーション効果が得られます。

JavaScriptなどのプラグインを使用せず、CSSのみでフォームのラジオボタンやチェックボックスを画像で装飾する方法です。
さまざまな方法があると思いますが、1つの方法としてご参考いただければと思います。

まず、例えば以下のような未選択状態と選択状態のものを並べた装飾画像を1つ用意します。

checkbox-radio-image

今回は横幅15px、縦幅15pxの画像を縦に並べたもので装飾してみます。

次にHTMLの用意です。

<label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン1</label>
<label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン2</label>
<label><input type="radio" name="radio" /><span class="image"></span>ラジオボタン3</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス1</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス2</label>
<label><input type="checkbox" /><span class="image"></span>チェックボックス3</label>

登録・エントリーフォームなどでよくみかける「住所検索」ボタン、実際に実装する機会があったので、ライブラリ「ajaxzip3」を試してみました。


ajaxzip3/ajaxzip3.github.io · GitHub

結果から申し上げると、非常に簡単に導入することができました。
「世界一、簡単に設置できる郵便番号検索を目指して!」のキャッチコピーもすばらしいですね。

iPhoneやAndroidなどスマフォサイトでtableを閲覧する場合に、以下のように横にボリュームが大きいと表示崩れが発生する場合があります。

dummy dummy dummy dummy dummy dummy
dummy dummy dummy dummy dummy dummy

この問題の回避策のひとつとして、横スクロールさせる方法があります。

スマフォブラウザではframe、iframe要素などでスクロールバーを表示させない仕様ですが、
実は、スタイルで指定してあげれば、スクロールバーが表示されなくとも、スクロール操作は可能なのです。

jQueryプラグインを組込む場合、jQueryのバージョンに依存して動作したりしなかったりという事が稀にあります。

例えば、以下のようにjQuery 1.4.4を読み込んでいる既存のページを考えます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.sample.js"></script>

任意のプラグイン「jquery.sample.js」は1.4.4には対応しておらず、1.8以上のjQueryを必要とするため、
上記のような順でライブラリを読み込むとエラーが発生します。

ここで、1.4.4はCMSのテンプレートとして組み込まれており、サイト全体への影響なども踏まえて簡単にはバージョンアップはできません。
本来、それらの影響を踏まえてバージョンアップすることが望ましいですが、
「バージョンアップできない」という判断に至ったとします。

スマートフォン専用のサイトを構築した際に、PCでスマートフォンサイトを閲覧してほしくない、逆に、スマートフォンでPCサイトを閲覧をしてほしくないといった要件は少なくありません。

Webページにアクセスしてきた端末情報を判定し、リダイレクトさせてしまえばいいのですが、その手法でも「.htaccess」を使ったり、javascriptやPHPを使ったりといくつか方法があります。

今回はjavascriptを使った方法を紹介します。

Monthly Archives

Search