Director's Cut - art project team Blog - » JQuery

フェスティバ!!のスマートフォン対応しました

art project team — Mon, 18 Jul 2011 14:34:47 +0000

現在運営している「フェスティバ!!」のスマートフォン版をリリースしました。
まだ、一部しか対応してませんが、順次対応していく予定です。

スマホ版の最大の特徴は、現在地からイベント開催地までのルートを表示することが出来ます。
是非、利用してみてください!!

URL：http://sp.festiva.biz/

twitterAPIを利用して複数のタイムラインを表示

art project team — Wed, 13 Apr 2011 09:12:24 +0000

ホームページなどにtwitterのタイムラインを表示するさい、大抵は一つだけのJQueryプラグインですが、複数のタイムラインを表示することができます。

一つはA jQuery TwitterTickerというプラグインを利用すればできます。
ただし、これは一つのボックスに複数のユーザーのつぶやきを表示させるというもの。

もし、上記のようなものではなく、ユーザーごとのタイムラインボックスが複数欲しいという場合の対処法。

A jQuery TwitterTickerを参考にいじりました。
といっても、jquery.mousewheel.js、jScrollPane.jsがあれば別に上記のものを使わなくてもいいのですが。。

コードは下記のような感じ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

$(function(){
var tweetUsers = [
['art project team', 'artprojectteam', 'http://art-p.com/'],
['フェスティバ!!', 'festiva55', 'http://www.festiva.biz/']
];
$('#twitterArray').slideDown("slow");

for(var i=0; i<tweetUsers.length; i++){
$('#twitterArray').append(
'

+i+'" class="tweetArea">'
+'

+tweetUsers[i][1]+'.gif" width="32" height="32" alt="'+tweetUsers[i][0]+'">

'
+'

+tweetUsers[i][2]+'" target="_blank">'+tweetUsers[i][0]+'

'
+'

+tweetUsers[i][1]+'" target="_blank">@'+tweetUsers[i][1]+'

'
+'

'
);
getTweet(tweetUsers[i][1], i);
};
});

/** ツイートを取得 **/
function getTweet(account, i){
$.getJSON("http://search.twitter.com/search.json?q=from:"+account+"&rpp=50&callback=?",
function(data){
for(var j=0; j<data.results.length; j++){
var text = data.results[j].text;
text = text.replace(/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+)/gi,'$1');
text = text.replace(/#(\w+)/gi,'#$1');
text = text.replace(/@(\w+)/gi,'@$1');

$('#tweet-'+i+' .tweetBox ol').append(
'

'
+text
+'
'+data.results[j].created_at+''
+'

'
);
$('#tweet-'+i+' .tweetBox').jScrollPane();
}

}
);
}

JSON形式で取得したデータをループさせてid=”twitterArray”の中に表示するというものです。
あと、リンク(http://)がある場合は自動的にリンクタグにするという処理も付け加えています。

q=from:xxx
の場合はアカウント(@xxx)を取得するようになります。
q=xxx
の場合はxxxという文字列を含むものを取得するということになります。
この辺のオプションはこことかここを参考にするとよいです。

ブログをリニューアルしました。

art project team — Thu, 17 Mar 2011 12:51:28 +0000

最近は宣伝ばかりの当ブログですみません。
今回も宣伝です。

ご覧の通りブログをリニューアルしました。

今回はリキッドレイアウトという手法を使って作成しています。
ブラウザの横幅によってサイズが変わります(最小サイズは決まってますよ)。

最近の流行に乗っかったといえばまぁ、間違いではないですｗ
個人的にはブログやECサイトはリキッドレイアウトに即していると思いますが、コーポレートサイトには合わないと思っています。
これは単純に1ページあたりの情報量の違いがあるからだと思います。

まぁ、そんなこんなで日々勉強の毎日です。
本業ではディレクター一色なので、なかなか制作をする時間はありませんが、いざ「やりたい！｣という時に必要な技術を揮えるように努力していかねばなりませんですな。
まだまだ日進月歩の業界なのでアンテナは常に張り巡らせないと！

ホームページリニューアルしました

art project team — Sun, 27 Feb 2011 13:17:43 +0000

つい先日、フェスティバ!!をリリースしましたが、それに伴ってホームページもリニューアルしました。
本当はフェスティバ!!リリースと同時にしたかったけど、思い立ったのが1月下旬だったので、残念ながら間に合わず。。。
結構突貫で制作したので行き当たりばったりで制作してます(前の記事にえらそうなことを書いてるにもかかわらず・・・)。

ともあれ、新ホームページもよろしくお願いいたします。

さて、次はこのブログのリニューアルもしなくては…。
1日で作ったデザインなのでかなり欠陥があるので、その辺なんとかしなければ。

[JQuery]googlemaps v3で座標を使って地図を表示

art project team — Sun, 18 Jul 2010 02:38:51 +0000

JQueryを使用 + googlemaps v3での地図とマーカー表示方法。
※データベースから座標を取得するなどの場合

※JQueryをあらかじめDLしておいてください。

htmlのhead部分を下記のようにします。

1
2
3
4
5
6
7
8
9
10

<head>
<script type="text/javascript" src="/festiva/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/festiva/js/googlemap.js"></script>
<script type="text/javascript">
$(function(){
$('#googleMap').gmap('43.0550852', '141.3412251');
});
</script>
</head>

まず、JQueryをおき、googlemapのAPI(v3)を記述します。
googlemap.jsは受け取ったデータを処理するスクリプトファイルです。
直接記述しているスクリプトはgooglemap.jsで処理するために送るデータになります。
なぜ、ここに書いたかというと、動的なページの場合を想定しているからです。

$(‘#googleMap’)はgoogle mapを表示する箇所になります。

さて、肝心の処理スクリプト(googlemap.js)は下記のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

これで、準備完了です。

実際に地図を表示するにはhtmlに場所とサイズを指定します。
ここでは#googleMapの箇所に地図を表示します。

1	<div id="googleMap" style="width: 100px;height: 100px;"></div>

これで地図が表示されます。

Jaueryでスクロール時に画像を読み込む

art project team — Mon, 07 Jun 2010 09:16:23 +0000

１ページあたりの画像が多いなどのときに便利なJQuryのプラグイン。
スクロール時に画像を読み込むプラグインを使用することで無駄なトラフィックを防ぐことが可能。

必要なファイルは下記の通り。

JQueryは必須なので必ずダウンロード
Lazyload.jsを入手

※最新版のJQuery(1.4)の場合は必要ないですが、最新版でない場合はdimensionsのプラグインが必要です。

ヘッダーに入手したファイルを記述します。

1
2
3
4
5
6
7
8
9
10
11
12

<head>
<script type="text/javascript" src="./js/jquery.js"></script>

<script type="text/javascript" src="./js/dimensions.js"></script>
<script type="text/javascript" src="./js/lazyload.js"></script>

<script type="text/javascript">
$(function() {
$("img").lazyload();
});
</script>
</head>

上記でスクロールされるとimgタグの読み込みを開始します。
$(“img”)をクラス名にすることで特定の画像のみにすることも可能です。

フェードインさせたい場合は下記のように記述。

1
2
3
4

その他のエフェクトなどは作者ページを参考にするとよいです。

JQueryでページ内スクロールをする方法

art project team — Mon, 31 May 2010 11:10:10 +0000

以前、JQueryを使ってページのトップへスライドアップさせるという記事の変形。

前回と違うのは、複数のIDに遷移する方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function() {
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 400);
return false;
});
}
}
});
});

アニメーションを変更したければ animate 内を好みのアニメーションにすると良いです。

JQueryのロールオーバーに関するあれこれ

art project team — Fri, 14 May 2010 04:59:04 +0000

JQueryを使用してrollover.jsを使ってロールオーバーを作成してて、Firefoxでブラウザの戻るを押すと、マウスが乗っていなくてもロールオーバーしたままなので困った。
とりあえず、ググったらはてなに情報があったので参考にして回避。

要はimgタグをすべてreplaceで置換をしてロードさせればいいみたい。

JavaScriptの記述

1
2
3
4
5
6
7
8
9
10
11

次にbodyに

1	<body onpageshow="resetRollover();">

と書くことで回避できる模様。

ただ、このままだと最初から「_on」がついているファイルもなってしまうので、それを除く場合は、
imgタグにclass=”rollover”をつけて、

1
2
3
4
5
6
7
8

とすることで、のファイルのみを拾ってきます。

ちなみに自分がよく使用するロールオーバーのスクリプト。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function(){
var postfix = '_on';
$('img.rollover').not('[src*="' + postfix + '."]').each(function(){
var img = $(this);
var src = img.attr('src');
var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.'));
$('').attr('src', src_on);
img.hover(
function(){
img.attr('src', src_on);
},
function(){
img.attr('src', src);
}
);
});
});

上記の場合はimgタグにclass=”rollover”をつけたものを対象にしてますが、img.rollover部分を.rollover a imgなどと指定するとブロック単位で指定可能。

thickboxでフラッシュが写りこむのを防ぐ方法

art project team — Fri, 07 May 2010 01:19:32 +0000

前回の記事で紹介したJqueryのプラグインthickboxですが、htmlファイルを表示する際フラッシュがある場合は、フラッシュが写り込んでうまく表示できません。
そこでフラッシュを隠す方法。

thickbox.jsの22行目に下記を記述。
$(“object”).css(“visibility”,”hidden”);
$(“embed”).css(“visibility”,”hidden”);

記述箇所はここ。

1
2
3
4

function tb_init(domChunk){
$(domChunk).click(function(){
$("object").css("visibility","hidden");
$("embed").css("visibility","hidden");

これで、thickboxを動作させた時に、フラッシュが隠れます。

このままでは、thickboxを閉じた時もフラッシュが隠れたままなので、下記記述でフラッシュを再表示します。
$(“object”).css(“visibility”,”visible”);
$(“embed”).css(“visibility”,”visible”);

記述箇所は282行目あたり

1
2
3
4

setTimeout(function(){
$("object").css("visibility","visible");
$("embed").css("visibility","visible");
},500);

こんな感じです。

HTMLファイルもライトボックスのように表現したい

art project team — Thu, 06 May 2010 08:24:00 +0000

画像などをライトボックス化する方法は前回書いたとおりですが、今回はHTMLファイルなども表示する方法。

前回同様JQueryを使いますが、今回はtickboxというプラグインを使用します。
thickboxのソースはここでダウンロードできます。
ダウンロードする際、thickbox.js、thickbox.css、loadingAnimation.gifの3つを必ずダウンロードしてください。
※Downloadの項目にあるjs、css、gifのことです。

ダウンロードしたらthickbox.jsを開き、8行目を修正します。

1
2
3

var tb_pathToImage = "images/loadingAnimation.gif";
↓　↓
var tb_pathToImage = "(画像までのパス)/loadingAnimation.gif";

修正したらhead部にthickbox.jsとthickbox.cssを読み込ませ、ライトボックス化したいaタグにclass=”thickbox”と入れることでライトボックス化できます。
複数の画像をギャラリーとして使う場合は、

1	<a href="xxx/abc.gif" class="thickbox" rel="gallery-plants"><img src="xxx/abc.gif" /></a>

というようにrel=”gallery-plants”とすることで、画像をnextやprevすることができます。

htmlファイルをライトボックス化する際は、

1	<a href="xxx/abc.html?width=123&height=456" class="thickbox">リンク</a>

というように横幅と縦幅を指定する必要がありますので注意してください。