'BLOG' Tag

グーグルマップ+ストリートビューが連動する地図の設置方法

main_catch

今まで、自分が受け持つ案件では<iframe>で埋め込む事が多かった「グーグルマップ」。地図を表示させるだけならそれで良かったのですが、カーソルがグーグルマップ上にあると、こっちはページの下を閲覧したいのにMAPの中身が動いてしまい、少しユーザビリティが下がってしまっていました。「Google Maps API」を利用すればこの現象を回避出来る事は知っていたのですが、たかだか地図を表示させるだけでAPI使うのもなぁ・・・と思い、APIを使用せずに実装する方法はないものか・・・?と躍起になって探していたのですが、どうやら出来ない模様・・・。APIを利用するしかないのであれば、機能をもっと付けようと思い

■ストリートビュー表示
■マップとストリートビューの連動
■自作マーカーの配置
■マウスのスクロールは非連動

と上記4つを実装することにしました。下に表示されているのが完成したサンプルになります。

ストリートビューが存在しません。

上のストリートビューで、場所の移動をすると、MAP側のペグマンが連動して動いていると思います。このように、ストリートビューとマップのペグマン(人型アイコン)が連動するMAPを設置する事ができます。不動産系のサイトなどでは、ただ単にMAPを表示させるだけよりもエンドユーザーに対する訴求力は高まるんではないでしょうか?それでは早速設置方法です。

グーグルマップの設置手順

Step1 APIの読み込み

<script src=”//maps.google.com/maps/api/js?sensor=false”></script>

上記をHTMLのヘッド内、またはMAP+ストリートビューを表示する箇所より先に記述します。

Step2 グーグルマップ・ストリートビューを表示させる要素を設置

<!–MAP用div–>
<div id=”g_map”></div>
<!–ストリートビュー用div–>
<div id=”pano”></div>

Step3 グーグルマップ側の設定を記述

この記述はStep1同様に表示させる要素より先に記述して下さい。

function initialize() {
/* 緯度・経度*/
var latlng=new google.maps.LatLng(33.581490, 130.407318);//この()内に座標点をコピペ
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 15,
/* 地図の中心点→上記で指定した座標点「latlng」を中心 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* マウスホイールと非連動 */
scrollwheel: false,
/*縮尺を表示*/
scaleControl: true,
};
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById(‘g_map’), myOptions);//グーグルマップを表示させる要素のID名を記述
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, ‘load’, initialize);

この状態で通常のMAPは表示されているはずです。ここから「マーカー」と「ストリートビュー」を表示させていこうと思います。

グーグルマップの座標点に自作マーカーを表示させる

マーカーを表示させるためにはそれ専用の記述を増やさなければなりません。

Step1 マーカー用の記述を追加

var image = ‘使用するiconのパス’;/*自作アイコンを使用する場合はこの記述が必要です*/
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
icon: image,/*自作アイコンを使用する場合はこの記述が必要です*/
center: latlng,
title: ‘表示させたいテキスト’/*アイコンにオンマウスした時に表示される文字列*/
});

Step2 マーカー用の記述を元のソースに追加

function initialize() {
/* 緯度・経度*/
var latlng=new google.maps.LatLng(33.581490, 130.407318);//この()内に座標点をコピペ
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 15,
/* 地図の中心点→上記で指定した座標点「latlng」を中心 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* マウスホイールと非連動 */
scrollwheel: false,
/*縮尺を表示*/
scaleControl: true,
};
var image = ‘使用するiconのパス’;/*自作アイコンを使用する場合はこの記述が必要です*/
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
icon: image,/*自作アイコンを使用する場合はこの記述が必要です*/
center: latlng,
title: ‘表示させたいテキスト’/*アイコンにオンマウスした時に表示される文字列*/
});
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById(‘g_map’), myOptions);//グーグルマップを表示させる要素のID名を記述
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, ‘load’, initialize);

この状態で、先ほどのMAPに指定していた座標点にマーカーが表示されていると思います。では次にストリートビューの表示です。

ストリートビューの設置手順

連動させるとなると、なんだかハードルが高そうな気がしないでもないですが、非常に簡単に設置可能です。※APIのおかげで(笑)

Step1 ストリートビュー用の記述を追加

var panoramaOptions = {
position: latlng,/*ストリートビューの座標点*/
scrollwheel: false,/*マウスホイールと非連動*/
pov: { /*表示視点の設定*/
heading: 44,/*真北に相対的な角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。*/
pitch: 13/*ストリートビュー車両に相対的な視点のピッチ(度)。90 度(真上)から -90 度(真下)の範囲です。*/
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’),panoramaOptions);//ストリートビューを表示させる要素のID名を()内に記述

Step2 ストリートビュー用の記述を元のソースに追加

function initialize() {
/* 緯度・経度*/
var latlng=new google.maps.LatLng(33.581490, 130.407318);//この()内に座標点をコピペ
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 15,
/* 地図の中心点→上記で指定した座標点「latlng」を中心 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* マウスホイールと非連動 */
scrollwheel: false,
/*縮尺を表示*/
scaleControl: true,
};
var image = ‘使用するiconのパス’;/*自作アイコンを使用する場合はこの記述が必要です*/
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
icon: image,/*自作アイコンを使用する場合はこの記述が必要です*/
center: latlng,
title: ‘表示させたいテキスト’/*アイコンにオンマウスした時に表示される文字列*/
});
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById(‘g_map’), myOptions);//グーグルマップを表示させる要素のID名を記述
var panoramaOptions = {
position: latlng,/*ストリートビューの座標点*/
scrollwheel: false,/*マウスホイールと非連動*/
pov: { /*表示視点の設定*/
heading: 44,/*真北に相対的な角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。*/
pitch: 13/*ストリートビュー車両に相対的な視点のピッチ(度)。90 度(真上)から -90 度(真下)の範囲です。*/
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’),panoramaOptions);//ストリートビューを表示させる要素のID名を()内に記述
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, ‘load’, initialize);

ここまでの段階でストリートビューが表示出来ていると思います。では、最後に「表示させているMAPとストリートビューの連動処理」をしていきましょう。

Step3 MAPとストリートビューの連動の記述を追加

map.setStreetView(panorama);

何とこの一行を追加するだけで可能です。(JSのロジックが分かる方は今更ですが「map」と「panorama」のインスタンス名を自分で変更して頂いても大丈夫です。)

Step4 ストリートビュー連動用の記述を元のソースに追加

function initialize() {
/* 緯度・経度*/
var latlng=new google.maps.LatLng(33.581490, 130.407318);//この()内に座標点をコピペ
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 15,
/* 地図の中心点→上記で指定した座標点「latlng」を中心 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP,
/* マウスホイールと非連動 */
scrollwheel: false,
/*縮尺を表示*/
scaleControl: true,
};
var image = ‘使用するiconのパス’;/*自作アイコンを使用する場合はこの記述が必要です*/
var marker = new google.maps.Marker({
position: latlng, /* マーカーを立てる場所の緯度・経度 */
map: map, /*マーカーを配置する地図オブジェクト */
icon: image,/*自作アイコンを使用する場合はこの記述が必要です*/
center: latlng,
title: ‘表示させたいテキスト’/*アイコンにオンマウスした時に表示される文字列*/
});
/* 地図オブジェクト */
var map=new google.maps.Map(document.getElementById(‘g_map’), myOptions);//グーグルマップを表示させる要素のID名を記述
var panoramaOptions = {
position: latlng,/*ストリートビューの座標点*/
scrollwheel: false,/*マウスホイールと非連動*/
pov: { /*表示視点の設定*/
heading: 44,/*真北に相対的な角度。真北は 0 度、東は 90 度、南は 180 度、西は 270 度です。*/
pitch: 13/*ストリートビュー車両に相対的な視点のピッチ(度)。90 度(真上)から -90 度(真下)の範囲です。*/
}
};
panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’),panoramaOptions);//ストリートビューを表示させる要素のID名を()内に記述
map.setStreetView(panorama);//MAP+ストリートビュー連動の記述
}
/* ロード時に初期化 */
google.maps.event.addDomListener(window, ‘load’, initialize);

見た目もかなり良くなり、「表示されている場所」に対するイメージを具体的に与えることが出来るようになると思います。実際の業務では、上記の様にかなり長いコードになってしまうので、<iframe>版と使い分けると良いと思います。簡単に説明をしてしまった為、他のオプションに関しては、こちらのサイトなどを参考にされてみてください。

いやはや、ストリートビューの対応地域がいつの間にか日本全土になっていてかなり驚いています。あっという間に、この調子でストリートビューを初め多くのwebサービスが進化を遂げていくんでしょうね。いつまでも今のままの状態では、この業界どんどん置いて行かれてしまうと考えると恐怖です(笑)だんだんと、デザイナー・SE・PGの仕事の範囲の垣根がなくなっていっていますね。「忙しくて勉強なんて出来ない!」ではなく、忙しいからこそ「楽しんで勉強!」をやっていかないとダメですね。

しかし分かっていても、それが難しい(笑)。僕の場合は、運が良いことにコラムの担当にして頂けた事で、淡々と毎週勉強する時間を強制的に毎週取れています。この世界生き残る為にはやはり、我慢強くコツコツと頑張れる人間じゃないといけませんね(笑)

おいおい「WEBデザイナー」は職種として消えるかも知れない・・・なんて言われてますが生き残るための選択肢は数多くあると僕は思います。枠に囚われず、依頼されること・やれることは全部挑戦してみる!をモットーにこれからも精進していきたいと思います。

なんだか妙に長い文章になってしまいましたね・・・。後書きが一番長くなってしまってすいません・・・。あまり理屈っぽくまとめたくなかったのですが、たまにはこんなコラムがあってもまぁ、いいんじゃないかと思い、文章をライティングしております(笑)ダラダラ書いてすいません。しこたま、良い文章が頭に浮かぶ人間だったらよかったのですが・・・。端的にライティング出来るようにこれからもがんばります!!

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

HTMLの文法を改めて見直し、まとめてみました。

maincatch

春になり、ニワカソフトにも新卒の社員が入社してきました。頑張ってHTML・CSSの勉強をしている所を見ると、初々しくて羨ましくなります。長いことWEB制作の世界に身を置いていても「あれ?<dl>の中って<dd>だけでも文法的にOKなんだ!」とかの色々な発見があると思います。そんなこんなで、少しHTMLの基礎に立ち返ってみようかと思いHTMLの文法やその他諸々を記事にしてみました。

ブロック要素とインライン要素

HTMLの話で大体一番最初に耳にする言葉じゃないでしょうか?僕も勉強し初めの頃はいまいち理解できなくて、とりあえず「タグの前後で改行が入る=ブロック要素」「タグの前後で改行が入らない=インライン要素」とかなり乱暴で大雑把ですが、そんな覚え方をしていました。まずはブロック要素の説明です

ブロック要素

cssや属性値での指定がない場合、要素の横幅が親要素の横幅100%なHTMLタグであり、CSSで処理してあげない限りはブロック要素とブロック要素を横並びに配置する事は出来ません。横幅がデフォルトで100%な為、「必ず改行されるタグ」になる訳ですね。配置場所は、の中ならどこに設置しても構いません。ブロック要素の横幅(領域)を確認したい時はbackground-colorで背景色(borderでも良いですが、borderの幅も換算されるので背景色のほうがお勧めです)を指定してあげると目視できます。

この背景色の領域は親要素の<div>の領域になります。

<p>タグの領域を表示しています。

親要素の横幅は790pxです。

上の<p>タグは特に横幅を指定していません。親要素の幅は790pxありますが、cssで左右に35pxずつマージンを取っているため、上の<p>は100%=720pxの横幅になります。

ブロック要素に該当するHTMLタグ

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

(※<li><dt><td>などの「入れ子としてのみ存在が許されるタグ」は上記から外しています。)

インライン要素

単体での使用は出来ず、必ずブロック要素の中に存在しなければいけないタグであり、横幅は要素の内容に比例します。故にインライン要素は内容が親要素である親のブロック要素の幅を超えない限り、横並びになります。そしてインライン要素は原則としてブロック要素をその子孫要素として持つことができません。インライン要素の横幅(領域)を確認したい時はbackground-colorで背景色(borderでも良いですが、borderの幅も換算されるので背景色のほうがお勧めです)を指定してあげると目視できます。

この背景色の領域は親要素の<div>の領域になります。
<span>タグの領域を表示しています。表示を分かり易くするため前後に改行を入れています。CSSでcenter寄せをしているので左右にマージンを取っている様に見えますが違います。 別の<span>タグの領域を表示しています。インライン要素はこのように横並びになります。
親要素の横幅は790pxです。

上の<span>タグはcssでcenter寄せをしています。分かり難いですが<span>タグを2個配置しており、横並びになっていることが確認できます。

インライン要素に該当するHTMLタグ

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

特殊なインライン要素

この後で説明しますが、インライン要素は「高さ=height」と「横幅=width」が設定できません。設定したい時はCSSでdisplay:block;を設定してあげなければなりません。しかし一部インライン要素では高さと幅を持っている、設定できる要素があります。下記に列挙したものが該当要素です。

<button>、<img>、<input>、<object>、<select>

上記がブロック要素とインライン要素の説明となります。ちなみにHTML5ではブロックレベル要素とインライン要素の分類は無くなります。代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。ただ、ブロック要素=改行、インライン要素=改行なしの概念は引き継いでいます。

よく使うHTMLタグの記述ルール

<div>
入れられるものdivタグの中には、ほぼ何でも入れることが出来ます。divの中にdivなどブロックレベル要素を入れ子にしても問題ありません。
入れられないもの<html> <head> <body> <meta>・・・等の基本的にbodyの外に記述する要素。
<h1>~<h6>
入れられるものhタグの中に入れていいのはインライン要素のみになります。は入れられません。また「h2の後にh1を記述する」といったような数字を遡るようなコーディングは文法的には問題ありませんがSEO的にはNGです。
入れられないものブロックレベル要素 div…etc
<p>
入れられるものa、img、span、strong、em…などなどのインライン要素。
pタグの中に入れていいのはインライン要素のみになります。初心者で間違えやすいのは、pの中にdivや、pを入れ子にしてしまったり、hを入れてしまったりなどなど…。恐らくこの勘違いの原因は、市販されている教本の最初に<p>が出てくることが多いからじゃないかなと思います(笑)
入れられないものブロックレベル要素、pの中には、divやpやhなどのブロックレベル要素を入れることは出来ません。
<ul><ol>
入れられるものul,olタグの中に入れることができるのは「li」タグのみです。それ以外のタグは入れることが出来ません。
入れられないもの「li」タグ以外のタグ全て。
<li>
入れられるものdiv、h1~h6、p、ul、dl、ol、li、span、img、strong、em…。liは「ul」「ol」の中でしか使えないタグです。liタグの中にはどんな要素も入れることが出来ます。例えば、liタグの中に新たにulリストを設置してリストの入れ子を作ったり、pやdivなどのブロックレベル要素を入れたり。NGのように思われるかもしれませんが、NGではありません。
入れられないもの特になし
<dl>
入れられるもの「dt」「dd」の2つのみです。それ以外のタグは入れることが出来ません。
入れられないもの「dt」「dd」以外のもの
<dt>
入れられるもの定義リスト「dl」の定義部分を司る「dt」タグ。dtの中にはインライン要素のみが入れられます。a、img、span、strong、em…など。間違いやすいのは、dtの中に見出し要素のhタグを入れるケースですが、これはブロックレベル要素なので入れられません。
入れられないものブロックレベル要素、address、blockquote、center、div、dl、fieldset、form、h1-h6、hr、ol、p、pre、table、ul
<span>
入れられるものspanタグの中にはインライン要素しか入れてはいけません。a、img、span、strong、em…など。僕の中では<div>のインラインverという位置付けです(笑)。
入れられないものブロックレベル要素、address、blockquote、center、div、dl、fieldset、form、h1-h6、hr、ol、p、pre、table、ul
<strong>/<em>
入れられるものインライン要素しか入れてはいけません。a、img、span、strong、em…など。
入れられないものブロックレベル要素、address、blockquote、center、div、dl、fieldset、form、h1-h6、hr、ol、p、pre、table、ul
<a>
入れられるものa、img、span、strong、em…などのインライン要素。よくある間違いは、aタグでブロックレベル要素を囲んじゃう・・・ですね。ですが、実はHTML5では<a>でブロック要素を囲んでも文法的に問題なしとなっております。
入れられないものブロックレベル要素、と言われていますが文法的に問題なしとなっております。

以上となります。今回の記事に該当するHTMLの文法は4.01基準(XHTMLも)となります。HTML5になって上記のルールが変更されているものも多々ありますので、ご注意下さい。

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

Googleが推奨しているHTML/CSSコーディングガイドラインをまとめてみました。

main_catch

webサイトを作るにあたり、HTMLをどう記述するのがBESTなのか?CSSはどう記述するのがBESTなのか?悩むことが多々あるのではないかと思います。今回はGoogleが推奨しているHTML/CSSコーディングルールを抜粋してご紹介していこうと思います。既に数多のwebサイトで紹介されてしまっていますので個人的に「そうだったの!?」と思った項目に焦点を合わせようと思います。

ちなみに、Googleガイドラインこちらが本家です。

プロトコル

http/httpsのそれぞれのファイルを両方のプロトコル上で利用できない場合を除き、画像やその他のメディアファイル、スタイルシート、およびスクリプトを指しているURLからプロトコルを省略する事が推奨されています。

<!– 非推奨 –>
<script src=”http://www.google.com/js/gweb/analytics/autotrack.js”></script>

<!– 推奨 –>
<script src=”//www.google.com/js/gweb/analytics/autotrack.js”></script>
/* 非推奨 */
.example {
background: url(http://www.google.com/images/example);
}

/* 推奨 */
.example {
background: url(//www.google.com/images/example);
}

これは知りませんでした・・・。

インデント

半角スペース2つでインデントを下げなければいけない。タブを使用したり、インデントにタブとスペースを混在させてはいけない。

<ul>
<li>Fantastic</li>
<li>Great</li>
</ul>
.example {
color: blue;
}

「ファイルサイズが若干変わる位でさほど問題ないか!」という感じでスペースとタブ混在させてしまったりしそうですよね・・・。でもインデントを下げる時は必ず「半角スペース2回」!!めんどくさい時はDWの「ソースフォーマットの適用」を使うのが楽ですね!

HTML5を使用する。

XHTMLは使用しない。またHTML5を使用する際は「空要素の閉じ」を記述してはいけない。

<!– 非推奨 –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ~以下略~

<!– 推奨 –>
<!DOCTYPE html>


<!– 非推奨 –>
<br />

<!– 推奨 –>
<br>

これは知っていたので、HTML5でコーディングする際は必ず空要素の閉じを記述しないようにしていました。ただ、2~3年前に何処かの記事でHTML5はXHTMLの書き方(※ここで言う空要素の閉じ)をしても構わない。というのを見かけた記憶があるのですが恐らく、W3C的にはOKだけどGoogle的にはダメという事なんだと思います。

構造の分離

HTML(構造)とCSS(見た目)とScript(振る舞い)は独立させて、3つの相互関係はなるべく最小限にする。要素ごとにスタイルは記述しないでスタイルシートで記述すること。スタイルシートやスクリプトは可能な限り一つにまとめる事。

<!– 非推奨 –>
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel=”stylesheet” href=”base.css” media=”screen”>
<link rel=”stylesheet” href=”grid.css” media=”screen”>
<link rel=”stylesheet” href=”print.css” media=”print”>

<!– 推奨 –>
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel=”stylesheet” href=”default.css”>

この「構造の分離」は長いことWEB屋やっている人の方が対処に困りそうですね・・・。

タグを省略する

ファイルサイズや、可読性の為に、省略できるタグ(html,body,/p,/tdなど)を省略する。省略出来るタグはコチラを参考にされて下さい

<!– 非推奨 –>
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>

<!– 推奨 –>
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

この項目は「出来たらしてね」レベルみたいですが、省略しない書き方が当たり前な昨今、これの対応は厳しいですね・・・。僕がWEBの勉強し始めた時がHTML4.01が主流の時だったのですが、この省略は昔はOKだけど、今は絶対やっちゃダメ!!って習ったんですが、<b>タグなんかのようにHTML5になって非推奨から使用可能タグに戻ったのと同じような感覚なのでしょうか・・・?

Type属性

stylesheetとscriptのtype属性は省略する。HTML5ではデフォルトで解釈されるため必要ない。

<!– 非推奨 –>
<link rel=”stylesheet” href=”//www.google.com/css/maia.css” type=”text/css”>

<!– 推奨 –>
<link rel=”stylesheet” href=”//www.google.com/css/maia.css”>

<!– 非推奨 –>
<script src=”//www.google.com/js/gweb/analytics/autotrack.js” type=”text/javascript”></script>

<!– 推奨 –>
<script src=”//www.google.com/js/gweb/analytics/autotrack.js”></script>

有っても無くても、むしろHTML5じゃなくてもこの記述は無くてもキチンとブラウザがそれぞれ解釈を正しくしてくれていたので「要・不要」の判別がようやく出来た感じですね!

IDとClassのネーミング

理解しやすく、一般的なネーミングにする。

/* 非推奨: 意味が無い */
#yee-1901 {}

/* 非推奨: 見た目を表す */
.button-green {}
.clear {}

/* 推奨: 具体的 */
#gallery {}
#login {}
.video {}

/* 推奨: 一般的 */
.aux {}
.alt {}

一番上はまだ分かりますが、2つ目の「button-green」とかはじゃあどうしろと?という感じですね・・・。「submit-btn-green」とかにすれば良いのでしょうか・・・?

IDとクラス名のスタイル

IDやクラスは、できるだけ簡潔でありながら何を意味してるか分かる名前にしてください。

/* 非推奨 */
#navigation {}
.atr {}

/* 推奨 */
#nav {}
.author {}

いやいやいや(笑)さっきの項目の「submit-btn-green」ダメじゃないですか!!(笑)。なら「submit-button-green」ならいいのでしょうか?でも長いですよね・・・?

タイプセレクタ

タイプセレクタでIDとクラス名を修飾することは避ける。不要なタイプセレクタを省くことでCSSのパフォーマンスの向上にもつながるみたいです

/* 非推奨 */
ul#example {}
div.error {}

/* 推奨 */
#example {}
.error {}

これは結構やってしまってますね・・・

プロパティは一括して指定する

可能な限りプロパティは一括して指定します。プロパティを一括指定することはコードの効率性とわかりやすさのために有用です。

/* 非推奨 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 推奨 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

一括記述があんまり好きじゃなくて、よくやってました・・・。

小数点数値0の省略

小数点の数値0は省略して記述します。

/* 非推奨 */
font-size: 0.8em;

/* 推奨 */
font-size: .8em;

そんな書き方ができる事自体知りませんでした(笑)。

IDとクラス名の区切り文字

ハイフン以外でセレクタ内の単語や略語を連結しないでください。

/* 非推奨: “demo”と”image”がそのまま連結されています。 */
.demoimage {}

/* 非推奨: アンダースコアーで連結してあります */
.error_status {}

/* 推奨 */
#video-id {}
.ads-sample {}

「ダブルクリックでソース上で選択できる」という理由でよく「_」で記述してしまっていました・・・。

CSSの宣言順番

宣言をアルファベット順に。ただし、特定のCSSプロパティの複数のベンダー固有の接頭辞(例えばの-moz接頭辞は、-webkitの前にくる)にソートに保つ必要があります。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

そこまで見ているなんて知りませんでした・・。

プロパティ名の終端

プロパティ名のコロンの後にスペースを使用します。

/* 非推奨 */
h3 {
font-weight:bold;
}
/* 推奨 */
h3 {
font-weight: bold;
}

これも知りませんでした・・・。

セレクタと宣言の分離

別々のセレクタと宣言は改行して記述していきます。

/* 非推奨 */
a:focus, a:active {
position: relative; top: 1px;
}

/* 推奨 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}

知らないことばかりです・・・(笑)

以上です、抜粋なので全文ではありませんが、他の項目も確認されたい場合はGoogleガイドラインを確認されて下さい。これを全部守ってHTML/CSSをコーディングしていくのはかなり至難の業ですし、会社勤めで他の人もソースを触る事があるような場合はさらにハードルが上がると思います。ですので僕の場合は、やれる所から規約に則ってコーディングしていこうと思います(笑)

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

クリッカブルマップを正確な座標点で作成する方法

main_catch

不動産系のサイトや、求人媒体系のサイトでよく見かける、地図画像上の県や地域毎にリンクを設定して、オンマウスで該当範囲が切り替わるアニメーションを今回は作成して行こうと思います。※今回の記事はアドビの画像編集ソフトをフル活用いたします。主にフォトショップ(イラストレーター・ファイヤーワークスでも可)を使用致しますので該当ソフトが無い方は申し訳ありません。

まずは下のサンプルを御覧ください、それぞれの県の上でオンマウス時に画像が切り替わっていると思います。


このサンプルの地図のように「四角」で区切られたリンク領域であればドリームウィーバーで完結出来てしまいますが、例えばディフォルメされていない正確な地図にクリッカブルマップを作成したい場合などに力を発揮することができます。それでは早速作成手順の紹介です!!

フォトショップ等で地図として使用したい画像の作成

画像は2枚必要になります。

img_sample
元画像
img_on_sample
オンマウス用画像

上記2点です。地図を作成する際、最終的にリンクにしようと思っている範囲は必ず「パス」でシェイプとして作成しておいて下さい。オンマウス時と通常時を別フォルダで作成しておくと良いかと思います。

Photoshopの拡張パネル「ClickableMapPanel」をダウンロード

吉本 集(よしもと つどい)さんが作成されたフォトショップの拡張パネル「ClickableMapPanel」をダウンロードしてご自身のPCのフォトショップに追加して下さい。追加方法、使用方法は吉本さんの記事を参考にされて下さい。(※CS6でしか確認できていないというお話みたいですが、CS5でも問題なく動作致しました)

ファイヤーワークスを使用する方はコチラ
イラストレーターを使用する方はコチラ

>

フォトショップから取得した座標点をhtmlに記述

このサンプル地図の場合、「shape=”poly”」よりも「shape=”rect”」の方が、確実に良いのですが「ClickableMapPanel」でパスから取得すると四角だろうが丸だろうが、「shape=”poly”」になります。

<img src=”img/kyusyu_map.png” usemap=”#shape1″>
<map name=”shape1″>
<area shape=”poly” coords=”143,40,264,40,264,114,143,114″ href=”#fukuoka”>
<area shape=”poly” coords=”107,40,139,40,139,135,107,135″ href=”#saga”>
<area shape=”poly” coords=”71,40,103,40,103,135,71,135″ href=”#nagasaki”>
<area shape=”poly” coords=”144,119,196,119,196,264,144,264″ href=”#kumamoto”>
<area shape=”poly” coords=”200,119,264,119,264,190,200,190″ href=”#oita”>
<area shape=”poly” coords=”200,194,264,194,264,264,200,264″ href=”#miyazaki”>
<area shape=”poly” coords=”143,268,264,268,264,343,143,343″ href=”#kagoshima”>
<area shape=”poly” coords=”48,264,94,264,94,339,48,339″ href=”#okinawa”>
</map>

クリッカブルマップ自体は上記で完成です。指定した範囲でリンクが貼られていると思います。ここから「jquery.imagemapster.js」を使用してオンマウス時に画像を切り替えて行きます。

「jquery.imagemapster.js」を使用して画像置換

クリッカブルマップの画像置換は<a>と違って少し面倒です、ですが「jquery.imagemapster.js」を使用することで、通常時とオンマウス時の2枚を用意するだけで良くなり非常に楽です。配布元からファイルをダウンロードされて下さい。ダウンロードが完了したら、<head>内に読み込みましょう。「jquery.imagemapster.js」はJQueryベースなので必ずJQuery本体と一緒かつJQuery本体より後に読み込みをして下さい。

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”js/jquery.imagemapster.js” type=”text/javascript”></script>

読み込みが完了したら下記のコードを外部JSファイルか、<script&gtタグで<head>内に記述されて下さい。

$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
render_highlight : { altImage : ‘img/kyusyu_map_on.png’ },//ここに置換対象の画像のファイルパスを記述
mapKey: ‘region’,
fillOpacity: 1 //塗りつぶし透明度
});
});

続けて、htmlの記述です。先程クリッカブルマップの設定をした該当ソース部分を下記の内容に改修します。

lt;img src=”img/kyusyu_map.png” usemap=”#shape1″ id=”shape1″>
<map name=”shape1″>
<area shape=”poly” region=”福岡” coords=”143,40,264,40,264,114,143,114″ href=”#fukuoka”>
<area shape=”poly” region=”佐賀” coords=”107,40,139,40,139,135,107,135″ href=”#saga”>
<area shape=”poly” region=”長崎” coords=”71,40,103,40,103,135,71,135″ href=”#nagasaki”>
<area shape=”poly” region=”熊本” coords=”144,119,196,119,196,264,144,264″ href=”#kumamoto”>
<area shape=”poly” region=”大分” coords=”200,119,264,119,264,190,200,190″ href=”#oita”>
<area shape=”poly” region=”宮崎” coords=”200,194,264,194,264,264,200,264″ href=”#miyazaki”>
<area shape=”poly” region=”鹿児島” coords=”143,268,264,268,264,343,143,343″ href=”#kagoshima”>
<area shape=”poly” region=”沖縄” coords=”48,264,94,264,94,339,48,339″ href=”#okinawa”>
</map>

これで完成となります。ただし、IE8以下はオンマウス時に画像が出てこず、IEお得意の黒のベタ塗りがされてしまいます。

IE8以下への対応

IE8以下を切り捨てるなら必要ないですが、実務レベルでそれは中々難しいと思われます。今回自分の知っている当該現象の解決方法を試してみたのですが、
■jquery.belatedpng.jsの使用
■AlphaImageLoaderの記述
共にダメでした・・・。苦肉の策としてIE8の時は画像置換をせず半透明のカラーを上乗せすることにしました。具体的な記述としては、

var userAgent = window.navigator.userAgent.toLowerCase();
var appVersion = window.navigator.appVersion.toLowerCase();

if (appVersion.indexOf(“msie 8.”) != -1) {//IE8の時
$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
mapKey: ‘region’,
fill: true, //塗りつぶし
fillColor: ’00b4ff’, //塗りつぶしカラー
fillOpacity: 0.5 //塗りつぶし透明度
});
});
} else {//それ以外のブラウザ
$(document).ready(function (){
$(‘#shape1’).mapster({
clickNavigate : true,
render_highlight : { altImage : ‘img/kyusyu_map_on.png’ },//ここに置換対象の画像のファイルパスを記述
mapKey: ‘region’,
fillOpacity: 1 //塗りつぶし透明度
});
});
}<

上記でIE8でもふんわりとオンマウスの切替が可能となります。IE8以下に関しては、「msie 8」を「msie 7」「msie 6」に変更して条件分岐をorでつなぐか、elseifで分岐を増やして頂ければ可能なはずです。

IE8に対応させたサンプルはコチラです。是非IE8でご確認下さい!

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

カテゴリ:TOPIC

« | »

webフォントとjquery.typist.jsを使ってRPG風のテキスト効果を作成する方法

maincatch

先週の記事サンプルで作っていたRPG風のテキスト効果を作成する方法をご紹介いたします。

作成準備

使用するファイルを下記からダウンロードされて下さい。

使用するフォント:8×8 ドット日本語フォント「美咲フォント」
使用するJQueryプラグイン:jquery.typist.js

webフォントの使用方法は先週の記事を参考にされて下さい。

JQuery本体とjquery.typist.jsの読み込み

ダウンロードが完了したらJQuery本体と「jquery.typist.js」のhtmlへの読み込みです。

<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”js/jquery.typist.js”></script>

例のごとく、必ずJQury本体は「jquery.typist.js」より先に読み込みをして下さい。

HTMLの記述

<div id=”wrap”>
<div id=”text_wrap” class=”myWebFontClass”>
<div id=”text_wrap_inner”></div>
</div>
</div>

CSSの記述

body{
 height:100%;
 background-color:#000;
margin: 0;
padding: 0;
position: relative;
min-width: 600px;
min-height: 400px;
}

#wrap{
 color:#fff;
margin: -200px 0 0 -300px;
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 400px;
border-radius: 15px ;
 -moz-border-radius: 15px ;
 -webkit-border-radius: 15px ;
 border:3px solid #fff;
}

#text_wrap_inner {
 margin:30px 30px 0 30px;
}

今回は画面の真ん中に角丸のBOXを作成しテキストを表示さていますので、少しCSSの記述が多いですが適宜作成されたい状況に応じて変更されて下さい。

javascriptの記述

jQuery(function($){
$(‘#text_wrap_inner’)//文字列を表示させたい要素
.typist({ speed: 12 })
.typistAdd(‘※どこからともなく声が聞こえる「おお…ニワカモノよこんなところであきらめるとはなにごとじゃ。もういちどそなたにチャンスをあたえよう」。\n’);
});

上記のコードを外部ファイルまたはHTML内部に<script>で記述されて下さい。これでOKとなります。

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

カテゴリ:TOPIC

« | »

日本語フリーフォントをwebフォント化してwebサイトに使用する方法

main_catch

最近webサイトでグーグルwebフォントを使用して画像を使用せずに魅力的なテキスト装飾をされているサイト(最近といっても2,3年前から普通に見かけますが・・・)をよく見かけます。ただ、グーグルのwebフォントは日本語が今のところ一種類しか無いので、フリーで公開されている日本語フォントをwebフォントに変換してサイトに使用する方法を今回はお届けします。

使用したいフォントのライセンスを確認する。

今回の記事で参考にさせて頂いたサイトにもステップ毎に表記されているのですが、フリーで公開されている日本語フォントをwebフォントに変換する場合、注意しなければいけないのが、フォントのライセンスになります。フォント利用規約などを確認して貰えばそのフォントのライセンスが分かると思いますが、「いや権利関係は苦手です!!」という方は 「hirok-k.comさん」こちらのサイトでwebフォントとして利用できるフォントを調査されているので、参考にして頂ければと思います。 この記事では8×8 ドット日本語フォント「美咲フォント」を使用させて頂きます。

使用したいフォントの形式をwebフォントで使用できるように変更する。

webフォントとして利用できる形式として…

■ttf (TrueType)
■otf (Open Type Font)
■woff (Web Open Font Format)
■eot (Embedded Open Type)
■svg (Scalable Vector Graphics Font)

上記5つの形式が存在します。

そして各ブラウザのwebfontフォーマットの対応状況です。

ブラウザttf/otfeotwoffsvg
IE××
Safari×
Firefox××
Opera×
Chrome×

そして日本語フォントは「ひらがな/カタカナ/漢字」とアルファベットで形成されるフォントよりデータが格段に重いためページ読み込み時に少し時間が掛かってしまいます。そんな時はフォントをサブセット化して使用する文字のみ設定すれば、かなりフォントデータを軽量化できます。

今回はサブセット化せずにやっていきます。←※めんどくさいからじゃないですよ(笑)webフォント化したい文字列が増えたら毎回サブセット化をやり直さないといけなくなるからですよ(笑)

フォントのwebフォント化は武蔵システムさんWOFFコンバータを使用させて頂きます。

WOFFコンバータをダウンロード→起動すると

img01

上記画面が表示されます、変換するフォントを指定して、「.eotファイルを作成する」にチェックを入れて下さい。サンプルをHTMLで確認したい時はその下の項目にもチェックを入れると確認用htmlが作成されます。後は「作成開始」をクリックするだけ!!

HTML/CSSのマークアップ

CSSのマークアップ

@font-face{
font-family: ‘UseFontStyle’; /* 自由な名前をつけることができます */
src:url(‘../font/misaki_gothic.eot’); /* IE9以上用 */
src:url(‘../font/misaki_gothic.eot?#iefix’) format(‘embedded-opentype’), /* IE8以前用 */
url(‘../font/misaki_gothic.woff’) format(‘woff’), /* モダンブラウザ用 */
url(‘../font/misaki_gothic.ttf’) format(‘truetype’); /* iOS, Android用 */
}

.WebFontClass {
font-family: ‘UseFontStyle’;
}

HTMLのマークアップ

<div class=”WebFontClass”>「WebFontClass」を付けた要素のテキストにwebフォントが適用されます</div>

以上で完成となります。ちなみに今回作成したサンプルはこちらです。初回読み込み時はフォントが適用されるまでタイムラグがありますので、フォントが適用されていない場合はしばらくお待ちください

ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

カテゴリ:TOPIC

« | »

Animate.cssとwow.jsで簡単にリッチなサイトを作る方法

main_catch

先週に引き続き「Animate.css」を使った要素が動きまくりなwebの作成方法です。前回は「Animate.css」と「Ani.JS」を組み合わせることでアニメーションのトリガーを設定し「オンマウス時」や「クリック時」にアニメーションを発動させる方法をお伝えいたしましたが、今回は「Animate.css」と「wow.js」を組み合わせることによりアニメーションのトリガーを「スクロールが要素に達したら実行する」方法をご紹介していきます。

ちょっと言葉だけだと分かり難いので、まずはサンプルサイトをご覧になられて下さい。(※初回読み込み時はブラウザに要素が表示されるスピードより先にアニメーションしてしまうと思うので、一度更新されてみてください)順次ご説明いたしますが、サンプルサイトでは「単純にスクロールが要素に達した時」以外のトリガーも設定しているため少しオーソドックスな設定とは違いますのであしからず・・・。

「Animate.css」と「wow.js」をダウンロード~使用準備

それぞれ配布元から取得されて下さい。■Animate.cssはこちら■wow.jsはこちらから ダウンロードが完了したらヘッド内にそれぞれ読み込んで下さい。※ちなみにJQueryは使用しません。

<link rel=”stylesheet” type=”text/css” href=”css/animate.css”>
<script src=”js/wow.js”></script>

2ファイルの読み込みが完了したらwow.jsの為の記述を追加 ※外部jsでもヘッド内に記述でもどちらでもOKです。

<script>
new WOW().init();
</script>

アニメーションを設定したい要素にclass名を追加

スクロールがその要素に達した時にアニメーションを実行したい場合はクラス名に「wow」と「追加したいアニメーション名」を記述します。

<div class=”wow fadeInDown”>

これで編集完了です。このままの設定でも十分素敵なサイトが作成できるのですが、「wow.js」の力をフルに活用するとさらにステキなサイトが作成可能です。

「wow.js」のオプションを使いアニメーショントリガーの実行タイミングをずらす

サンプルサイトを見て頂くとすぐ分かると思うのですが、ファーストビューのロゴ・グローバルナビ・メインキャッチ上のテキストが時間差で表示→アニメーションしていると思います。

時間差表示をさせたい場合はwow.jsに用意されているオプションを利用します。

data-wow-durationアニメーション時間
data-wow-delayロードからアニメーションのスタートのタイミング
data-wow-offset画面に表示されてからどこまでの距離をスクロールしたらスタートするか
data-wow-iterationアニメーションの繰り返し回数

これを実際にマークアップすると

<!– 5秒後に2秒かけてゆっくり画面左からスライドイン –>
<div class=”wow slideInLeft” data-wow-duration=”2s” data-wow-delay=”5s”></div>
<!– スクロール10を過ぎたら右からのスライドインを10回繰り返す –>
<div class=”wow slideInRight” data-wow-offset=”10″ data-wow-iteration=”10″></div>

上記のようになります。前回の記事でも書きましたがこの組み合わせでパララックスなサイトを作ると面白いものが作れそうですね!!

ニワカソフトでは新しい技術への飽くなき探究心を切らしたことがありません!!お客さまにとって最善のアウトプットが出来るように日々精進しております。ホームページの新規立ち上げやリニューアル等ございましたら、ぜひご相談下さい!!

カテゴリ:TOPIC

« | »

手軽で簡単!!CSS3とJSで様々なアニメーション効果を付ける方法

main_catch

今回は手軽にCSSアニメーションを作成することが出来るCSSライブラリ「Animate.css」をご紹介いたします。

「Animate.css」をダウンロード

配布元からコードをダウンロードされて下さい。ダウンロードしたZIPを解凍すると沢山ファイルがあると思いますが、使用するのは「animate.css」「animate.min.css」のどちらかになります。今回の記事では「animate.css」を使用します。

「Animate.css」使用準備

ヘッド内に「animate.css」を読み込んでいただくと使用準備は完了です。

<link rel=”stylesheet” type=”text/css” href=”ファイルパス/animate.css”>

「Animate.css」の使用方法

アニメーションを追加したい要素に追加したいアニメーションのclass名と「animated」というクラス名を追加するのみでOKです。

<p class=”animated flash”>flash</p>

各ボタン(といっても押せないですが…)の上にマウスを合わせて頂くとアニメーションします。ボタンに記述している英単語がそのアニメーションの名前となります。

Attention seekers (注意を促す時に使えるアニメーション)

Fading entrances (フェードしながら、表示するアニメーション)

Fading exits (フェードしながら、消えるアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

Bouncing entrances (バウンドしながら、表示するアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

Rotating entrances (回転しながら、表示するアニメーション)

Rotating exits (回転しながら、消えるアニメーション)

※一度オンマウスしてしまうと表示されなくなります(笑)

無限にアニメーションさせたい場合

実はこの「Animate.css」は単体ではページが表示された時に一度だけアニメーションして終わりという仕様になっています。無限にアニメーションさせたい場合は。下記のように記述します。

無限ループさせたい場合

<p class=”animated flash infinite”>flash</p>

class名に「infinite」を付随させることで無限にループします

サンプルの様にオンマウスでアニメーションさせたい場合

オンマウスでアニメーションをするには要素にトリガーを設定できるようにするJSAni.JSと併用します。(←こちらのリンクからダウンロードされて下さい)※JQueryは使用していないので読み込みの必要はありません

「Ani.JS」を</body>の直前に配置

<script src=”js/anijs.js”></script>
</body>
</html>

オンマウスでアニメーションしたい要素のコードをclass名ではなくdata-anijsに変更

<p data-anijs=”if: mouseover, do: flash animated”>flash</p>

少し複雑な雰囲気になってしまいますが、ここで重要になるのは「do:」の後の「flash animated」です。ここを自分のしたいアニメーション名にする事でオンマウスでアニメーションさせる事が可能になります。

「if:」の後のmouseoverをclickに変更するとクリックがトリガーとなります。

<p data-anijs=”if: click, do: flash animated”>flash</p>

スクロールが要素に達したらというトリガーでアニメーションを実行させるようにすると、パララックス効果を使ったサイトの華やかさも増しそうですね!!
ニワカソフトでは常に新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

カテゴリ:TOPIC

« | »

別のワードプレスでは動作したのに、今はJQueryが動かないという時の対処法

main_catch

「あれ!?前に別のワードプレスに組み込んだ時は動作したのに、今回はJQueryが動かない」という時の対処法!!ほぼ同じ環境下のWPサイトで、全く同じ記述してるのに片方は動いて片方は動かない・・・という時の対処法です。ケースバイケースだとは思いますが、この記事が皆さんのお役に立てたら嬉しい限りです。

念の為にワードプレスでJQueryを使用するときの注意点

ワードプレス内でJQueryを使用するには$をJQueryに変えなきゃいけないというお約束が存在します。
例えば、

$(function(){
$(‘.toTop’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});

上記はJQueryを使用してページ内リンクのスムーススクロールを実装するコードです。ワードプレス以外で使用する場合はこのままの記述で問題ありませんがワードプレスサイトでこのままの記述だと動かなくなってしまいます。これをワードプレスで使えるようにするには

jQuery(function(){
jQuery(‘.toTop’).click(function () {
jQuery(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});

と書き換えなければなりません。恐らくこの記事に辿り着いた方は「そんな事は百も承知だ!!」という方々だと思われますが、念の為・・・。

$をJQueryに変更もしている、なのに動かない場合

こうなってしまうと気が滅入ってしまいますよね・・・。しかも筆者の場合、記事タイトルの様に異なるワードプレスサイトで片方は動いて片方は動かないという状況だったので、なおさら頭を抱えました・・・。ただ同一コードで片方は動いて片方が動かないなんてコンピューターの世界であり得るわけがないと思い、2サイトのソースの差分を探しました。

wp_head()で読み込まれるJQuery本体に差分発見!!

自分でCDNなんかでJQueryを読み込んでいたのですが、キチンと動作する側はwp_head()で読み込まれるファイル群にJQuery本体が無く、動いてくれない方は読み込まれるファイル群にJQueryが含まれていました。早い話、動かない側はJQueryを二回読み込んでいた(しかも違うバージョン)そりゃ動かないですよね・・・。

wp_deregister_script()を使い、wp_head()で読み込まれるJQueryを削除する

下記のコードを組み込むことでJQueryの二重読み込みを避ける事ができます。ひとまずは、このコードで一旦は解決しました。ですがIE8でページを閲覧するとまた別の問題が発生してしまいました。

<?php wp_deregister_script(‘jquery’); ?>
<?php wp_head(); ?>

wp_head()で読み込まれていたプラグイン関連がIE8と相性が悪かった

wp_head()は使用しているプラグイン関連のファイルをを使っていないページでも読み込みます。今回作成していたサイトはlightBox2のプラグインを使用していたのですが、どうやらIE8ではlightBox2で使用しているライブラリ「prototype.js」がlightboxを使用していないページでエラーを起こしていたらしく、lightBoxを使用していないページはprototypeを外す必要性が出てきました。

<?php wp_deregister_script(‘jquery’); ?>
<?php wp_deregister_script(‘prototype’); ?>
<?php wp_head(); ?>

と記述すればもちろんprototypeの除外は出来きますがそうするとlightBoxを使いたいページでもprototypeが読めなくなってしまう。それは非常に困るので、条件分岐でprototypeが必要な所だけ呼び出せるように改良しました。筆者の場合特定のカテゴリのみ使用していたので

<?php
global $post;
$post_id = $post->ID;
$post_cats = get_the_category($post_id);
$post_cat_id = $post_cats[0]->cat_ID;
$post_cat_parent = $post_cats[0]->category_parent;
?>

//中略

<?php wp_deregister_script(‘jquery’); ?>
<?php if ( !($post_cat_id == lightboxを使うカテゴリID) || !($post_cat_parent == lightboxを使うカテゴリID) || !(cat_is_ancestor_of( lightboxを使うカテゴリID , (int)$post_cat_id ))) { ?> <?php wp_deregister_script(‘prototype’); ?>
<?php } ?>
<?php wp_head(); ?>

とすることでIE8での問題も解決しました。この記事が皆様のお役に立てることを願っています。

このようにニワカソフトでは日々新しいことに挑戦し、より良いものを皆様にご提供できるよう努力しております。ぜひホームページの新規作成・リニューアルはニワカソフトにご相談ください!!

カテゴリ:TOPIC

« | »

JQueryを使用して色々な図形で画像にマスクをかける方法

main_catch

JQueryを使用して色々な図形で画像にマスクをかける

画像を円形やらで切り抜いてwebページに表示させる場合、普通はフォトショップなどを使って加工してページに表示させると思いますが、今回はJQueryを使って画像にマスクをかける方法をご紹介します。元ネタはコリスさんのこちらの記事になります。

使用する画像の準備

画像は全部で3枚必要になります。全て同じサイズで作成します。今回のサンプルは円形で作成しますが、三角でも星形でも何でもいけちゃいます!!

img_sample
元画像
サイズ:310×310
on_sample
マスク用画像(※透過PNG画像)
サイズ:310×310
hover_img_sample
オンマウス用画像(※透過PNG画像)
サイズ:310×310

HTML,CSS,コーディング

HTML

JQueryを使用しますのでにJQuery本体を読み込んで下さい

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

ロールオーバーとマスク用に2つの空span要素を元画像の上に配置します。

<a href=”#” class=”item”>
<span class=”rollover”></span><!–hover用のspan–>
<span class=”gallery-shadow”></span><!–マスク用のspan–>
<img src=”images/sample.jpg”/>
</a>

CSS

ロールオーバーとマスク用の画像は、それぞれの背景画像として指定(※画像のサイズは適宜変更されて下さい)

a img {
border:none;
}

a.item{
position:relative;
display:block;
height:310px;
width:310px;
float:left;
}

a.item .gallery-shadow{
display:block;
position:absolute;
top:0%;
left:0%;
width:310px;
height:310px;
background:url(images/gallery-shadow.png);
}

a.item .rollover{
display:block;
position:absolute;
top:0%;
left:0%;
width:310px;
height:310px;
background:url(images/gallery-rollover.png);
}

ここまで書くと想像しやすいと思いますが、イメージとしてはこんな感じです。フォトショ・イラレのレイヤーと同じ感覚だと思って頂いて問題ありません。

image

JavaScript

下記コードをhead内または外部jsで記述(※必ずJQuery本体の読込みより後で記述して下さい)

$(document).ready(function(){
$(“.rollover”).css({‘opacity’:’0′});
$(‘#gallery a.item’).hover(
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 1);
},
function() {
$(this).find(‘.rollover’).stop().fadeTo(500, 0);
}
)
});

完成サンプル

a1180_017023

IE8以下への対応

JQueryのfadeはIE8以下のverでは挙動がおかしくなります。IE8だけではありますが、対処法を下記に追記しておきます。

jQuery.belatedPNG.jsを使う

jQuery.belatedPNG.jsを使用することでIE8で透過png+fadeを使用できるようになります。(jQuery.belatedPNG.jsは正確にはIE6に透過pngを理解させる物になります。IE8は普通に透過pngは使用できるのですが、JQueryのfadeと組み合わせると不具合を起こすんです・・・)配布元

fadeの効果をやめる

これが一番手っ取り早いです。(笑)ただ、フェードアニメーションが無くなるので少しさみしくなります・・・。

フェード効果なしJavaScript

$(document).ready(function(){
$(“.rollover”).css({‘opacity’:’0′});
$(‘#gallery a.item’).hover(
function() {
$(this).find(‘.rollover’).stop().fadeTo(0, 1);
},
function() {
$(this).find(‘.rollover’).stop().fadeTo(0, 0);
}
)
});

ハイライトされている5,8行目が元々のコードとの差分がある所になります。

完成サンプル2(フェード効果無)

a1180_017023

ワードプレスの記事のアイキャッチ等にこの手法を使えば、画像処理の出来ないお客様でも画像の加工を行うことが可能になります。このように、ニワカソフトでは様々な手法を駆使しお客さまにとって最善なホームページのご提案を致しております。ホームページの新規作成・リニューアル等をお考えの際はぜひ、ニワカソフトにおまかせ下さい!!

カテゴリ:TOPIC

« | »