前回と同様、またもやタブに悩まされました。

今回はタブを切り替ると
aが#の時（ページ内リンク）、反応するスクロールが邪魔してくるという件です。

こんな感じで、画面から切れてしまっているタブ。
こちらをクリックすると･･･



スムーズスクロールが反応し、
強制的にタブエリアごと上にスクロールしてしまう。




一見便利に思えますが、
たくさんのタブエリアが存在しているページだと
すこしうざったらしく思えます。


スムーズスクロールは機能させたまま、
その機能からタブだけ除外する！
そんないい方法はないのかと模索したところ。

数行で解決できることが判明！

まず、スクロールの記述の上に

$(function(){
$('.タブエリア').find("a").addClass('適当なクラス名');
});

このような、タブのエリアのa要素にクラスを追加させます。


そして次にスクロールにこちらのフィルタを追加。

('a:not(.適当なクラス名[href*=#]')

こちらは先ほどつけたクラスがついている
要素は選択しないという意味です。

たったこれだけでスクロールとタブの機能の
バッティングを防ぐことができました。

上記のフィルタにもJQueryにはたくさんの
フィルタがあります。

スクリプト同士がバッティングして困ったときは
まずフィルタを駆使して解決法を導いてみることにします。

参考：
http://alphasis.info/2011/10/jquery-api-jquery-not/

お正月にお餅を食べすぎて、●kg太ってしまった村上です。。
なんであんなに美味しいんでしょうね。お餅...。
数年ぶりに体が重くなった感じが自分でも分かってしまい
これはさすがにヤバい！と思いまして、、体重を記録できるアプリを導入しました。

でもうちには体重計がなかったというのは別のお話です（T-T）


さてさて。アプリと言えばスマートフォン！なのですが...

先日、一年ほど愛用していたAndroidがお亡くなりになりました。。
前々から一日に何度もフリーズしたり、メールが受信できなくなったり
予兆はあったのですが。。壊れたのが連休中でよかったものの。

とにかくこのままではまずいと思い、すぐにショップにいきました。
ちょうどキャンペーン中でお得な値段で手に入るということで、機種変更。そして念願のiPhoneに。
前に使ってたAndroidの動きがスムーズでなかったので、iPhoneの「気持ちよさ」に驚愕しました。

ですが一年も使っているとどんなものでも愛着がわくもの。
直して使えればよかったなあとちょっぴり後悔。
そんな中、外出先でこんなものを見つけました。

スマホステーション：
http://sma-sta.com/

私が発見したのは大手町駅の改札口の傍でした。
今まで駅で靴や合鍵などの修理屋は見かけたことがあるのですが
スマートフォンの修理屋は初めて見ました。
お店自体の大きさは駅の売店ぐらい。
スマートフォンの修理は有料ですが、
なんと！メールを登録するだけで充電やWi-Fi設定を無料でやってくれるそうです。

スマホステーションは現在二号店まであるそうなので、
よく充電を忘れてしまう私の最寄駅にもいつか出来たら便利だろうなあ、と思いました。

いよいよ年越し間近ですね。村上です。

弊社は真に勝手ながら、12/29(木)から1/4（水）まで休業となります。
年始は1/5（木）からとなりますので、ご了承くださいませ。

本日の夜にバスに揺られて実家へ帰るのですが
実家のある関西が今年大寒波だそうで；
滅多に雪なんか積もらないのに、今年は銀世界！なんてこともあったそうです（そういえばまだ今年は雪を見ていないなあ...）
関西だけでなく、今年の年末年始は全国的に冷え込むそうなので
皆様あったかくして風邪をひかないようにしてくださいね。

さて、それでは本題です。

近年「スマートフォン」が当たり前のツールとなってきました。

HTML5、CSS3でより細かな実装ができるということ。PNG画像が使えること。
WEB製作者の敵（？）でもあるInternet Explorerの挙動を気にしなくていいこと...など。いいことだらけでもありますが、ただ現状のPCサイトをスマートフォンに最適化するだけでは、なかなか成果を出すことが難しく...
弊社でもスマートフォンサイトがどうあるべきか？本当に必要なのか？など連日議論をしております。

そんな中、スマートフォンサイトを製作するにあたって
便利なWEBサービスをご紹介したいと思います。



Cacoo(カクー): https://cacoo.com/

こちらはなんと、、
WEB上でサイトのワイヤーフレームを作れてしまうツールです。
とにかく簡単。しかも無料！

利用するにはアカウント登録を行うのですが、これも簡単。
メールアドレスと名前など五項目を入力するだけ。
しかもTwitter、Facebookなどのアカウントを使ってログインすることもできます。

さて実際にどう製作するのか？
実際に作ってみました。

Cacoo(カクー)では下記のようなオブジェクトが用意されていて、
それが道具箱のように収納されています。



こちらをドラッグ＆ドロップで出し入れして、動かしたり、大きさを変えたり、文字を入れたりして
サイトのワイヤーフレームを作成することができます。

実際に作ってみたのがコチラ。



うーん。簡単。
ちなみにソーシャルボタンも用意されてました。
私もこれからどんどん便利なものは利用していきたいと思います。


最後になりましたが、
今年も大変お世話になりました。
2012年もWEB&PEACEをよろしくお願いいたします。

それではよいお年を！

だんだんと寒くなってきましたね。村上です。

冬はイベント事が多いので大好きなんですが（笑）やっぱり寒いもんは寒い！ひやっこい！
乾燥もするから加湿器も買わなきゃなあと思いつつ、、まずはこたつかなあ。

そんなこんなで今回はタイトル通り、複数のGoogleマップを表示させる場合にJavaScriptのタブを使うと発生しまう問題。

わたしは普段、こちらのタブを使用しているのですが↓

タブ切替をサクッと実装：
http://archiva.jp/web/javascript/tab-menu.html


先日こちらのタブとGoogleマップ（埋め込み）を使って、
タブを切り替えると別のマップを表示させるというものを作っていたのですが



↓タブを切り替えると・・・


こんなかんじで表示させたい！


はずが････


実際は2個目以降のタブは上の図のようにずれて表示がされてしまいます。。マップ同士が干渉しているのかな...とにかくこまった！


調べてみるとこちらのサイトでは、原因がタブを切り替えるときの display:none;が影響しているのでは？と書かれています。。

また同サイトでこの問題の解消法が書いておりましたので、ご紹介させていただきます。


方法としては2通り。

方法 (1): iFrame の要素 REL に URL を埋込み、クリックファンクションで REL -> SRC に変換する

方法 (2): クリックファンクションで HTML を読み込んで表示する


ということで、実際に今回は　方法 (1)　を試してみました！


まず、Googleマップのソースの中の

<iframe width="578" height="250" ･･･src=（省略）

こちらのsrcをrelにします。


そしてあとはjsでクリックを押したときにrelがsrcに変わるようにすればOK。

例）
jQuery('#クリックするタブ').click(function(){
        var rel = jQuery('#クリックするタブのエリア').find('iframe').attr('rel');
        jQuery('#クリックするタブのエリア').find('iframe').attr('src',rel);
});


というかんじ。あーすっきり！



●参考サイト

・埋め込みGoogle マップの座標がズレる場合のメモ。
・jQuery UI TabsにGoogleMap埋め込むと表示位置ズレる
・埋め込みGoogleマップをdisplay: none;にすると座標がズレる件。