カテゴリー別アーカイブ: JavaScript

同一画面でバージョンの異なるjQueryを共存させる方法

Web制作の仕事をやっていると、
動きのある機能を導入したいと御客様から要望がある。
しかも、高度な技術が必要なのに、おカネも期間も掛けずにというワガママ付き。。
そんな難題の要望に応えてくれるのが「jQueryを利用したツール」なのだ。

しかし、そんな便利なツールだが、当然問題もいくつかある、、
その問題の一つに、
同一画面で、動きのある機能が複数ある場合だ。 ※ 特にTOPページで
問題が発生した状態としては、片方(もしくは両方)の機能が動作しないこと。
※ 前提として、どちらか片方のみの導入ではうまくいっている

その動作しない原因の多くは、

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $・・・
</script>

というように、異なるjQueryのバージョンが「1.7.1」と「1.9.0」で共存しているためだ。
まず、簡単な解決方法としては、新しいバージョンのみ有効とし、
バージョンの古い「1.7.1」のjQueryをコメントアウトしてみる。
※ 「jQueryを利用したツール」ではなく、

<!-- script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script -->

のように、こちらのみコメントアウトする。
これで解決すれば儲けもの。
しかし、解決する可能性はそれほど高くはないのが現状。。
そこで下記を試してもらいたい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var $171 = $.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$171(document).ready(function(){
  $171・・・
</script>

こちらのように修正するとそこそこ解決するはず!!

それでも まだ解決されない方は、下記を試してもらいたいが、
この話は別の機会に

(function($){
// ライブラリ自体のJavaScript
})($171)

今さら今からGoogle Maps JavaScript API v3 -まずは表示-

Google Maps JavaScript API v2で作ったシステム(ってほどのものでもないけど)を別案件でスライドさせて使おうと考えていました。
しかし、既にv2を動かすのに必要なAPIキーの発行が出来なくなっているので、v3にて再度作らないといけなくなりました。
なので今さらながらGoogle Maps JavaScript API v3を勉強です。
既にコンテンツ自体は出来あがってしまっていますが、メモも兼ねて数回に分けてエントリーしたいと思います。
今さら今からGoogle Maps JavaScript API v3 -まずは表示- の続きを読む

地図読み込み時に吹き出し位置を自動調整 googleMAP v3

googleMAPでマーカー&吹き出しを自動調整する時のメモ。

google.maps.event.addListener(marker, "click", function() {
 if(infoWindow) infoWindow.close();
 infoWindow = new google.maps.InfoWindow({
 content: "テキスト"
 });
 infoWindow.open(map,marker);
});

マーカーをクリックしたら画面に合わせて吹き出し位置が自動調整されるようになっています。

しかし初期読み込み時に吹き出しを表示しようとするとマーカーが中心位置になってしまい、吹き出しが自動調整されず格好悪い事になっていました。

http://chiebukurow.com/modules/QandA/view/10100756160.html
こちらを参考に解決しました。

tilesloadedってのがあるんですねぇ。

google.maps.event.addListenerOnce(map, 'tilesloaded', function () {
 infoWindow.open(map, marker);
});

jQueryを使ったフォームの入力チェック

jQueryを使ってフォームで入力チェックをするプラグインjquery.validate.js。

jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化
メッセージを日本語化してくれてます。

onfocusoutやonkeyupなどタイミングも設定出来るっぽい。
jquery.validate.jsの超訳

必須・文字数制限・数値チェック・メールアドレスチェックなど一通り出来るので汎用的に使えそう。