jQueryのプラグイン「jquery.timeago.js」を使います。
timeago: a jQuery pluginから jquery.timeago.js
jQueryからjquery.jsをそれぞれダウンロードしましょう。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.timeago.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('abbr.timeago').timeago();
});
</script>
で準備オッケー。
あとは表示させたい箇所に下記を記述です。
<abbr title="2010-04-01T15:13:00Z+09:00" class="timeago">更新時間</abbr>
+09:00は日本時間で表示する場合です。「+9」だけでもオッケー。
入れないとグリニッチ標準時が基準になっちゃいます。
先日書いたThickBoxを使ってWeb2.0っぽくの記事中で「別ウィンドウが開くっていうのは嫌われる傾向にあります」とか書いたばっかりですが、やっぱり使わなきゃならない場合もあります。
で、Dreamweaver使ってると、いまいちめんどくさいんですよね。スクロールバーとリサイズはオンにして……とか。
いや、それほどの手間でもないんですが（＾＾；
サンプル1
サンプルファイルのソースを見てもらえるとわかりますが、
<a href="javascript:MM_openBrWindow
('http://www.google.co.jp/ig?hl=ja','newWindow',
'scrollbars=yes,resizable=yes,width=350,height=400');">
とけっこー長いですね。
Dreamweaver使ってても、基本的にソースに直接書き込みしていくので、いちいち「width=350」とかめんどい。
ってワケでちょっと簡単にするJavascriptを書いてみました。
サンプル2
ソースを見てもらえればとても簡単なのがわかると思います。
導入方法は
<head>〜<head>内に
<script language="JavaScript" type="text/JavaScript">
<!--
function newWindow(url,windowame,w,h){
winSize= 'width='+w+',height='+h+',scrollbars=yes,toolbar=no,xlocation=no,status=no,menubar=no,resizable=yes';
win = window.open(url,windowName,winSize);
}
//-->
</script>
リンク部分は
<a href="javascript:newWindow('URL','名前','横サイズ','縦サイズ')">リンク</a>
これならソースも多少すっきりしますし、サイズ変更したい場合もちょっと簡単になりますね。
IEでFlashがあるサイトを訪れるとFlashのSWFファイルの周りに点線入った上に、下の画像のようなメッセージが表示されますね。
「このコントロールをアクティブ化して使用するにはクリックしてください。」
って、使用しない人いるんですか？これってなんの意味があるんでしょうね？
Flashを利用したセキュリティホールへの対応とかなんでしょうか？
他のブラウザではそういうのないとこみるとなくてもいいもんなんでしょう、多分w
なにより点線も邪魔だし、メッセージが出るのも嫌いなんです。いちいちクリックしなきゃならんのもイヤなんです。
またもや自分が嫌いだからって理由でユーザビリティ無視して消しちゃいますw
今回はSWFObject.jsってJavascriptライブラリを使います。
さっそくdeconcept > SWFObjectの「Download
SWFObject 1.5」ってとこからダウンロードしてきます。
設置方法は
<head>〜</head>内に
<script type = "text/javascript" src="swfobject.js"></script>
Flashを挿入する部分に
<div id = "flashContent">
Flashが表示されない時に表示される部分。この「flashContent」内がSWFファイルと入れ替わる形になります。
画像でもHTMLでも可。検索ロボットのクロールにも拾われるのでSEO対策にもなります。
</div>
<script type = "text/javascript">
var so = new SWFObject("ファイル名.swf", "名前", "横サイズ", "縦サイズ", "必要とされるFlashのヴァージョン(半角数字で)", "背景色");
so.write("flashContent");
</script>
複数のFlashを配置する時は<div id = "flashContent">の名前を変えてください。
サンプルを用意しましたので、どんな風になるかIEで見てみてください。
SWFObject.jsで出来るのはそれだけではありません、Flashを使うなら是非導入したい機能がたくさんあります。
背景を透明にするなどのパラメーターを追加するのも簡単。
っていうか、Flashの背景を透明にするって今はIE以外でもできるんですね、どうせIEだけなんだろうと無視してました（＾＾；
var so = new SWFObject("ファイル名.swf", "名前", "横サイズ", "縦サイズ", "必要とされるFlashのヴァージョン(半角数字で)", "背景色");
の下に追加していきます。
- 背景透明なら
so.addParam("wmode", "transparent");- クオリティを変更するなら
so.addParam("quality", "autolow");- 表示位置を変更するなら
so.addParam("salign", "br");
他のパラメータとかはFlashで使える属性(パラメータ)の記事を参考にしてください。
Flashvarsパラメーターを使って、Flashに変数を渡すには
"flashvars"というパラメータは通常
変数名1=値1&変数名2=値2&変数名3=値3
といったように「変数名=値」をひとくくりに、「&」を使ってつなげていきますが、SWFObjectを使えばより簡単に、わかりやすく設定できます。
渡す変数値が決まっている場合は
so.addVariable("変数名1", "値1");
so.addVariable("変数名2", "値2");
so.addVariable("変数名3", "値3");
のように追加していきます。
URLから変数と値を読み込み、それをFlashに渡す場合は
URLの例:
http://www.sample.com/index.html?変数1=値1&変数2=値2
SWFObjectには上記の変数を受け取るスクリプトがちゃんと用意してあります。
so.addVariable("変数名1", getQueryParamValue("変数名1"));
so.addVariable("変数名2", getQueryParamValue("変数名2"));
を追加することで、変数を渡すことができます。
他にもFlash Playerがなかったら、インストールした後、また自分のサイトに戻ってくるとか、いろいろ便利な機能が使えるようになります。
trick7.com blog > SWFObjectのドキュメントを日本語に翻訳してみたよ で公式サイトを日本語化して説明してあります。
EMBED タグ、OBJECT タグの中にパラメータ（アトリビュート）オプションをつけ加えることによって、Flashの動きや質にHTMLから変化を与えることができます。
使用例
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=8,0,0,0" width="300" height="400" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="sample.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="sample.swf" quality="high" bgcolor="#FFFFFF" width="300" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Play値： TRUE か FALSE
|
Loop値： TRUE か FALSE
|
Quality値： LOW, HIGH, AUTOHIGH, AUTOLOW
|
BGColornnnnnn の値：16 進数表記の RGB カラー値 |
Scale値： SHOWALL, NOBORDER, EXACTFIT
|
AlignALIGN="値"
|
SAlignSALIGN="値"
|
WMODE値:transparent サポートしているブラウザ
|
BaseBASE="基本ディレクトリか URL"
|
FlashVarsFlashVars プロパティを Object またはEmbed
タグ内に記述することで、変数を SWFファイル内で使用することが可能です。ストリングは
name=value の組み合わせを1セットとし、& (アンパーサンド) 記号で区切ります。特殊記号や印刷不可記号は % (パーセント)
記号の後に2桁の Hex 値を使用したものでエスケープできます。シングルのブランクスペースは + (プラス) 記号で表せます。(Flash
Player 6以降)
|
Menu値： TRUE か FALSE
|
pluginspagePLUGINSPAGE= URL |
typetype="application/x-shockwave-flash" |
PCも携帯もユーザーエージェント値というものをもっていて、ブラウザや機種がわかる値を持っています。
それを利用してPCからアクセスしていればPC用サイトへ、携帯からアクセスしていれば携帯用サイトへ飛ばすことができます。
やり方は簡単。
PC用サイトを「top.html」（index.html以外の名前にします）
携帯用サイトをiフォルダの中「i/index.html」とします。
そんで、index.cgiにそれぞれ振り分けるスクリプトを書いてあげればオッケーです。
index.cgiの中身は
#!/usr/local/bin/perl
############ 設定変更箇所 ##############
#
#携帯用サイトURL
$mobilesite = 'http://www.foo.com/i/';
#
#PC用サイトURL
$pcsite = 'http://www.foo.com/top.html';
#
############ 設定変更箇所終了 ##########
#以下は変更の必要ありませんが、特定の携帯機種を他と別サイトを表示させたい時には""内にURLを。
#例：$imode = "http://www.yahoo.co.jp/index.html";
#i-mode
$imode = $mobilesite;
#EZweb
$ezweb = $mobilesite;
#J-Sky
$jsky = $mobilesite;
#Vodafone
$vodafone = $mobilesite;
#SoftBank
$softbank = $mobilesite;
#PCの場合
$pc = $pcsite;
$brwsr = $ENV{'HTTP_USER_AGENT'};
#i-mode
if ($brwsr =~ /DoCoMo/){
print "Location: $imode\n\n";
}
#EZweb
elsif ($brwsr =~ /UP.Browser/){
print "Location: $ezweb\n\n";
}
#J-Sky
elsif ($brwsr =~ /J-PHONE/){
print "Location: $jsky\n\n";
}
#Vodafone
elsif ($brwsr =~ /Vodafone/){
print "Location: $vodafone\n\n";
}
#SoftBank
elsif ($brwsr =~ /SoftBank/){
print "Location: $softbank\n\n";
}
#ユーザーエージェント値が上記外の場合はPCサイトを表示
else {
print "Location: $pc\n\n";
}
exit;
1行目はサーバによっては「#!/usr/bin/perl」に変更してください。
設置方法は
こんな感じで。public_html（homeやhtmlの場合もあります） ｜ ├ index.cgi(パーミッションは705か755で) ｜ ├ top.html(PC用サイトのトップ) ｜ ├ i（携帯用サイトのディレクトリ） ｜ ├ index.html（携帯用サイトのトップ） ｜
今回のcgiをダウンロードする方は「続きを読む」をクリックしてください。