CSS・Javascript

クリッカプルマップ対応Jqueryのみでツールチップ

ツールチップのJavascriptは数多くあるが、クリッカプルマップに対応したものが以外に少ない。
下のサンプルでは、他のJavascriptファイルを必要としないシンプルなTooltipでありながら以下の機能を備える。
  • 表示時のフェードインおよび速度の設定が可能。
  • 表示時の半透明(透明度)が設定可能。
  • マウス座標に対する表示位置が設定可能。
  • 画像を使わずツールチップの角丸が設定可能。
  • 文字サイズフォントの設定が自由。
スクリプトは以下の通り。
Jquery他、ファイルのダウンロードは不要。使いたいページの<body>内にスクリプトをそのまま丸ごとコピーするだけで簡単に実装できる。
【スクリプト】
JAVASCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
$(function(){
$('area.tooltip').mouseover(function(e){
$('div#' + e.target.id).css({opacity:0, display:'block'});
$('div#' + e.target.id).fadeTo('normal', 0.5);
});
$('area.tooltip').mousemove(function(e){
$('div#' + e.target.id).css('left', e.pageX + 20);
$('div#' + e.target.id).css('top', e.pageY - 50);
});
$('area.tooltip').mouseout(function(e){
$('div#' + e.target.id).css({display:'none'});
});
});
</script>

CSS

<style>
.tipText {
position: absolute;
padding: 10px;
background-color: #ffffff;
border:1px solid #ccc;
border-width:0px 1px 1px 0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tipText b {
font-size:20px;
}
</style>

HTML

<img src="bgt.gif" width="234" height="60" border="0" usemap="#Map" style="margin-left: 0px;" />
<map name="Map">
<area shape="circle" coords="208,28,20" href="javascript:void(0);" onClick="copen(1);" id="tip1" class="tooltip" />
<area shape="rect" coords="17,28,166,50" href="javascript:void(0);" onClick="copen(2);" id="tip2" class="tooltip" />
</map>
<div id="tip1" class="tipText" style="display:none;"><b>王様</b><br />(さらに容量が拡大されました)</div>
<div id="tip2" class="tipText" style="display:none;"><b>ハッスルサーバー</b><br />(おすすめのサーバーです)</div>

【設定(カスタマイズ)】

フェードイン・透明度
$(‘div#’ + e.target.id).fadeTo(‘normal’, 0.5);
速度は、”fast”、”normal”、”slow”、または完了までの時間をミリ秒
透明度は、0から1。薄いと読み辛くなるから0.5以上が好ましい
表示位置
$(‘div#’ + e.target.id).css(‘left’, e.pageX + 20);
$(‘div#’ + e.target.id).css(‘top’, e.pageY – 50);
上記ではマウスの位置右側20ピクセル離れた位置、上に50ピクセル上がった位置が基点となる。
背景色
background-color: #ffffff;
背景色を濃くした場合は文字色を白にするといい(color: #ffffff;を追加)
border:1px solid #ccc;
border-width:0px 1px 1px 0px;
この指定で右側と下側に1ピクセルの線を設定している。
角丸
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
古いブラウザは四角のまま
フォントサイズ
font-size:20px;
<b>以外の部分にサイズを指定したい場合はtipText内に指定する
.tipText {
font-size:14px;
}

【指定方法】

クリッカプルマップ
  <area shape=”circle” coords=”208,28,20″ href=”javascript:void(0);” onClick=”copen(1);” id=”tip1″ class=”tooltip” />
クリッカプルマップのhrefはjavascript:void(0);とする
onClick=”copen(1);”
カッコ内の数字1から順に振っていく
id=”tip1″の数字も合わせる
この数字が表示される文字のIDに対応する
 class=”tooltip”必須
ツールチップ
<div id=”tip1″ class=”tipText” style=”display:none;”><b>王様</b><br />(さらに容量が拡大されました)</div>
id=”tip1″の数字がクリッカプルマップに設定したIDの数字に対応する
class=”tipText”必須
 style=”display:none;”で非表示にしておく

Google Mapsでクリックやドラッグされた時にデータを取得したいとき。

Google Mapsでは地図を表示するだけでなく様々なイベントに対して情報を取得することが可能。
よく使うもの、便利な機能の具体的なJavascriptの中から。
var map = new google.maps.Map(mapdiv, myOptions);
で描画されたグーグルマップに対して以下の場合
マップがドラッグされたらマップセンターの緯度経度を取得する時
google.maps.event.addListener(map, 'drag', function(){
var mce = map.getCenter();
var mce_lat = mce.lat();
var mce_lng = mce.lng();
});
マップのズームレベルが変更されたら倍率を取得する時
google.maps.event.addListener(map, 'zoom_changed', function(){
var mzo =  map.getZoom();
});
マップのドラッグが終わったらマーカーの緯度経度を取得する時
google.maps.event.addListener(marker, 'dragend', function(){
var mpo = marker.position;
var mpo_lat = mpo.lat());
var mpo_lng = mpo.lng());
});
マップのドラッグが終わったらマップの表示範囲を取得する時
google.maps.event.addListener(map, 'drag', function(){
var mab = map.getBounds();
var m_ne_lat = mab.getNorthEast().lat();
var m_sw_lat = mab.getSouthWest().lat();
var m_ne_lng = mab.getNorthEast().lng();
var m_sw_lng = mab.getSouthWest().lng();
});
マップをクリックした場所の緯度・経緯を取得する時
google.maps.event.addListener(map, 'click', function(event){
var mk_lat_lng = marker.setPosition(event.latLng);
});
マップをクリックした場所の緯度・経緯を個別に取得する時
google.maps.event.addListener(map, 'click', function(event){
var mk_lat = event.latLng.lat();
var mk_lng = event.latLng.lng();
});

jcartのカート(買い物カゴ)をスクロールしてもついてくるようにする

前回の記事で、PHP+jQueryでつくられたDB不要のシンプルなプログラム『jcart』の商品削除にアラートを追加する方法を掲載したが、多くのショッピングカートにあってjcartに無い機能として、カート(買い物カゴ)がスクロールすると隠れてしまうことへの対応がある。

jcartはjqueryを使ったプログラムだから、この機能を追加するのは簡単。最小限の機能であればヘッダにJavascriptの一文を追加するだけでも可能だが、コントロールのし易さとオプションの使い易さを考え、jQuery Scroll Followを使うことにする。

『jQuery Scroll Follow』
http://kitchen.net-perspective.com/open-source/scroll-follow/

上記サイトに全てのデータが揃っているから簡単に導入できる。

ヘッダ内の

<script type="text/javascript" src="jcart/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jcart/js/jcart.js"></script>

の部分にui.core.js、jquery.scroll-follow.jsを追加

JAVASCRIPT

<script type="text/javascript" src="jcart/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jcart/js/ui.core.js"></script>
<script type="text/javascript" src="jcart/js/jquery.scroll-follow.js"></script>
<script type="text/javascript" src="jcart/js/jcart.js"></script>

さらに

JAVASCRIPT

<script type="text/javascript">
$(document).ready(function (){
$('#kago').scrollFollow({speed:300, offset:30});
});
</script>

を追加。

speed:300, offset:30はオプションだから、デフォルトのままで構わないという人は

$('#kago').scrollFollow();

で良い。

speedはスクロール速度(ミリ秒)
offsetはスクロール後のブラウザの上部からのピクセル数
#kagoはスクロールさせたいアイテムのID
デフォルトのjcartではsidebarがこれに該当する。

スタイルシートの一例は以下

CSS

#kago{
float: right;
position: relative;
width: 220px;
margin: 0px;
padding: 0px;
}

HTMLサンプルコードは以下

HTML

<div id="kago">
<div id="jcart">
$jcart->display_cart();
</div>
</div>

以上で、jcartのショッピングカート(買い物カゴ)がスクロールについてくるようになる。

jCartでカート(買い物カゴ)内のアイテムを削除する際にアラートを出したい場合

PHP+jQueryでつくられたDB不要の簡単カート、jCartは、シンプルで導入も簡単だが、シンプルだけに省略された機能がある。
そのひとつがカートに入れた商品を削除する時。

カートの金額欄の下に表示されている削除ボタンの処理(config.phpの設定によりremove)
ユーザーに優しい設計にしたい場合、ボタンを押したらそのまま削除ではなく、確認用のアラートを表示したいところ。

普通に考えれば、リンクタグ(a href=〜)の場合はonclick=’return confirm()を追加してあげればいいので、

/jcart/jcart.php 内にある

echo tab(7) . "<a class='jcart-remove' href='?jcartRemove={$item['id']}'>{$config['text']['removeLink']}</a>€n";

の部分にonclickを追加し、

echo tab(7) . "<a class='jcart-remove' href='?jcartRemove={$item['id']}' onclick='return confirm(€"削除してよろしいですか?€")'>{$config['text']['removeLink']}</
a>€n";

のようにすればいいのだが、ajax環境下ではページ推移が無いこともあり、この方法では失敗しアラート画面が表示されることなく削除されてしまう。

jCartでカート(買い物カゴ)内のアイテムを削除する際にアラートを出したい場合は、以下の方法。

/jcart/js/jcart.js 内にある

function remove(link) {
// Get the query string of the link that was clicked
var queryString = link.attr('href');
queryString = queryString.split('=');
// The id of the item to remove
var removeId = queryString[1];
// Remove the item and refresh cart display
$.ajax({
type: 'GET',
data: {
"jcartRemove": removeId,
"jcartIsCheckout": isCheckout
}
});
}

にconfirm(‘削除してよろしいですか?’)を追加し、返り値がtrueだったら、削除を実行するようにする。

function remove(link) {
// Get the query string of the link that was clicked
var queryString = link.attr('href');
queryString = queryString.split('=');
// The id of the item to remove
var removeId = queryString[1];
if(confirm('削除してよろしいですか?')){
// Remove the item and refresh cart display
$.ajax({
type: 'GET',
data: {
"jcartRemove": removeId,
"jcartIsCheckout": isCheckout
}
});
}
}

これにより、商品選択ページの右に表示されるカートの「削除(remove)」リンク、およびcheckout.phpページのアイテム表示の「削除(remove)」リンク、どちらもリンクをクリックした時アラート画面が表示されるようになる。

 

Google Mapの地図の一部が表示されない、灰色に表示されてしまう時

javascriptを使って折り畳まれているエリアやタブを使って選択されていない(最初は非表示)の部分にGoogle Mapの地図を設置した場合、地図の中心座標がずれたり、Google Mapの地図の一部が灰色になった状態になりGoogle Mapの地図が一部しか表示されない場合がある。
その場合、GMap2のオプション指定でサイズを指定することでちゃんと表示されるようになる。

【一部が灰色になる例】

if(GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.689735,139.700535), 17);
addMakers(35.689735,139.700535,"Soup Stock Tokyoルミネ新宿店");
}

【きちんと(地図が全部)表示される】

if(GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map"), {size:new GSize(300,200)});
map.setCenter(new GLatLng(35.689735,139.700535), 17);
addMakers(35.689735,139.700535,"Soup Stock Tokyoルミネ新宿店");
}

Firefoxのみに適用させるCSSを書く方法

FirefoxにはIEのように独自の実装擬似クラスがあるから、CSSに独自実装擬似クラス(例えば:-moz-any-link)を入れることにより、Firefoxだけに適用させるCSSを書くことができる。
方法は簡単
【例】
.tabbody {
margin-bottom: 4px;
}
の場合
Firefox2に適用させるCSSハック
.tabbody, x:-moz-any-link {
margin-bottom: 5px;
}
Firefox3に適用させるCSSハック
.tabbody, x:-moz-any-link, x:default {
margin-bottom: 5px;
}
両方に適用させたい時は、Firefox2に適用させるCSSハックを記載した後Firefox3に適用させるCSSハックを記載すればいい。

iPhone対応サイトの作り方(その3)

iPhone専用のページを用意して対応する方法

iPhoneからのアクセスの場合、iPhone用ページにリダイレクトする

■構成しているページがPHPの場合(.php)

$hua = $_SERVER[“HTTP_USER_AGENT”];

if(ereg(“iPhone”,$hua)){

header(“Location: http://digital-gate.com/i/”);

}


iPhone対応サイトの作り方(その2)

同じページでレイアウトのみを変更して対応する方法

iPhoneからのアクセスの場合、iPhone用CSSに自動的に切り替える

■構成しているページがhtmlの場合

javascriptを使ってスタイルシート(CSS)を切り替える方法

if(navigator.userAgent.indexOf(‘iPhone’) != -1){

document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”>’);

}else {

document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css”>’);

}

■構成しているページがPHPの場合(.php)

※ユーザーエージェントを取得

$is_iphone = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPhone”);

または

$hua = $_SERVER[“HTTP_USER_AGENT”];

if(ereg(“iPhone”,$hua)){$is_iphone = 1;}

※iPhoneなら、iPhone用のスタイルシートを出力

if($is_iphone){

$css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”/>’;

}else{

$css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css” />’;

}

なお、いずれの場合も、PCでのアクセス用のコンテンツや広告等、iPhoneでは不要なものは、

その部分を

<div class=”for-pc”>PC用アフィリエイトコード等</div>

としておき、

iPhone用のスタイルシートに

.for-pc{display:none;}

としておくことで、無駄な表示を減らすことが可能。



iPhoneStyleのPC版「カスタム配色」にJavascriptのカラーピッカーを追加

iPhone対応している無料SNS『iPhoneStyle』のPC版レイアウト用「カスタム配色」にカラーコード(6桁英数字)を入力するテキストボックスがありますが、それぞれのテキストボックス内でクリックすると、右側にJavascriptのカラーピッカーがポップアップして、色を確認しながら入力することができるようになりました。

左側のエリアに表示されている○と、右側のスライドエリアのバーを動かして、お好みの色を選んだら[OK]をクリックするだけ。
選んだ色のカラーコードはそれぞれのテキストボックスに入力されています。

prototype.js、scriptaculous、yahoo.color.jsを使用しています。

CSSスプライト(CSS Sprite)でサイトを高速化する方法

CSS Sprite・CSSスプライトとは、ページに表示される全部の画像をひとつにまとめて一枚の画像にしておき、表示する際にその一枚の画像から必要な部分のみをCSSで切り出して使うテクニック。
簡単な例として、メニュー等で画像を使い、ロールオーバーによる画像変更をする場合、ひと昔前であれば、通常時とマウスオーバー時の画像をそれぞれ用意し、Javascriptでプリロード、同様にJavascriptで画像を差し替える。最近では、通常時とマウスオーバー時の画像を一枚にまとめておき、CSS・スタイルシートを使って画像位置を変える。といった方法がよく使われてきていたが、これをさらに全面的に使うのがCSSスプライト(CSS Sprite)と呼ばれる方法。

確かに、サーバーへのリクエストが減るため軽量化されることが多いが、画像の作成、CSSの設定が面倒なのも事実。
そういった場合には、Sprite Creatorを使うといい。
http://www.floweringmind.com/sprite-creator/
で公開されているこのサービスは、1枚の画像から特定の画像を取り出すCSSを作成するためのツールで、画像をアップロートして切り出したい画像部分を選択すると、それに対応したCSSが自動生成される。

さらに、既存の画像ファイルをCSS Sprite・CSSスプライト化したい場合には、画像をまとめてくれるCSS Sprite Generatorを使う。
http://ja.spritegen.website-performance.org/
使っている画像をまとめてzip圧縮してアップロードすると、1枚の画像にしてくれる上に、CSS SpriteのCSSも自動的に生成してくれる。様々な設定が可能で、クラス名につけるCSS接頭語も設定できるので、既存のサイトのCSSスプライトにも便利だろう。