Web Design Tips

別ウィンドウで開くをもっと簡単に

Naoking — 2007-03-29T16:24:14+09:00

先日書いたThickBoxを使ってWeb2.0っぽくの記事中で「別ウィンドウが開くっていうのは嫌われる傾向にあります」とか書いたばっかりですが、やっぱり使わなきゃならない場合もあります。

で、Dreamweaver使ってると、いまいちめんどくさいんですよね。スクロールバーとリサイズはオンにして……とか。
いや、それほどの手間でもないんですが（＾＾；

サンプル1

サンプルファイルのソースを見てもらえるとわかりますが、

とけっこー長いですね。

Dreamweaver使ってても、基本的にソースに直接書き込みしていくので、いちいち「width=350」とかめんどい。

ってワケでちょっと簡単にするJavascriptを書いてみました。

サンプル2

ソースを見てもらえればとても簡単なのがわかると思います。

導入方法は

～内に

リンク部分は
"javascript:newWindow('URL','名前','横サイズ','縦サイズ')">リンク

これならソースも多少すっきりしますし、サイズ変更したい場合も~~ちょっと~~簡単になりますね。

SWFObject.jsを使ってIE上でFlashをアクティブ化する

Naoking — 2007-03-28T21:29:44+09:00

IEでFlashがあるサイトを訪れるとFlashのSWFファイルの周りに点線入った上に、下の画像のようなメッセージが表示されますね。

「このコントロールをアクティブ化して使用するにはクリックしてください。」
って、使用しない人いるんですか？これってなんの意味があるんでしょうね？
Flashを利用したセキュリティホールへの対応とかなんでしょうか？
他のブラウザではそういうのないとこみるとなくてもいいもんなんでしょう、多分w

なにより点線も邪魔だし、メッセージが出るのも嫌いなんです。いちいちクリックしなきゃならんのもイヤなんです。

またもや自分が嫌いだからって理由でユーザビリティ無視して消しちゃいますw

今回はSWFObject.jsってJavascriptライブラリを使います。
さっそくdeconcept > SWFObjectの「Download SWFObject 1.5」ってとこからダウンロードしてきます。

設置方法は

～内に

Flashを挿入する部分に

Flashが表示されない時に表示される部分。この「flashContent」内がSWFファイルと入れ替わる形になります。
画像でもHTMLでも可。検索ロボットのクロールにも拾われるのでSEO対策にもなります。

複数のFlashを配置する時は
の名前を変えてください。

サンプルを用意しましたので、どんな風になるか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のドキュメントを日本語に翻訳してみたよで公式サイトを日本語化して説明してあります。

Flashで使える属性(パラメータ)

Naoking — 2007-03-27T15:53:10+09:00

EMBED タグ、OBJECT タグの中にパラメータ（アトリビュート）オプションをつけ加えることによって、Flashの動きや質にHTMLから変化を与えることができます。

使用例

flash/swflash.cab#version=8,0,0,0" width="300" height="400" align="middle">
"allowScriptAccess" value="sameDomain" />
"movie" value="sample.swf" />
"quality" value="high" />
"bgcolor" value="#FFFFFF" />
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" />

Play

値： TRUE か FALSE
初期値： TRUE

TRUE：
SWFファイルが直ちに再生されます。SWFファイルは、読み込まれると自動的にフレーム１から再生されます。
FALSE：
読み込まれたSWFファイルがフレーム１の位置で待機し、ユーザーがボタンをクリックするかメニューからコマンドを選らんだ時点で再生が始まります（メニューコマンドの詳細については、「MENU」を参照してください）。

Loop

値： TRUE か FALSE
初期値： TRUE

TRUE：
SWFファイルが最後のフレームまで再生されると、先頭シーンの最初のフレームに戻って再生を開始します。再生は、別のページが読み込まれるか、ユーザーがメニューコマンドを使って停止を指示するまで続けられます（メニューコマンドの詳細については、「MENU」を参照してください）。
FALSE：
SWFファイルが最後のフレームまで再生された時点で停止します。最終フレームは、別のページに切り替えるまでブラウザ内に表示されます。

Quality

値： LOW, HIGH, AUTOHIGH, AUTOLOW
初期値： AUTOHIGH

LOW：
アンチエイリアス機能がオフになります。見た目よりも再生速度を重視した設定です。
HIGH：
アンチエイリアス機能がオンになります。再生速度よりも見た目を重視した設定です。
AUTOHIGH：
アンチエイリアス機能がオンになった状態で再生が始まりますが、再生速度が設定されているフレームレート以下に落ちた時点で自動的にオフになります。とりあえず見た目を優先させておき、速度的に追い付かなくなった場合に限り速度を優先させる設定です。
AUTOLOW：アンチエイリアス機能がオフになった状態で再生が始まりますが、プロセッサがアンチエイリアス処理を行うのに十分であると判断した時点でオンになります。とりあえず、速度を優先させておき、可能なときに見た目も向上させる設定です。

BGColor

nnnnnn の値：16 進数表記の RGB カラー値
EMBED タグ内で BGCOLOR 属性を使って 16 進数表記の RGB カラー値で指定します。

Scale

値： SHOWALL, NOBORDER, EXACTFIT
初期値： SHOWALL

SHOWALL：
指定した範囲内に SWFファイル全体が表示されます。 SWFファイルのサイズ比率は維持されるため伸縮による歪みは生じません。
NOBORDER：
指定した範囲全体を埋めるように SWFファイルが伸縮されます。 SWFファイルのサイズ比率は維持されるため伸縮による歪みは生じませんが、SWFファイルの一部が隠れることがあります。隠れる側を指定する方法については、「SALIGN」を参照してください。
EXACTFIT：
指定した範囲内に SWFファイルがぴったり収まった状態で表示されます。この設定では、SWFファイルのサイズ比率が失われてしまうので、サイズ比率を考えて指定しないと歪みが生じます。

Align

ALIGN="値"
値: L, R, T, B

SWFファイルの位置を変更します。デフォルトはブラウザの中心に置いて、ブラウザウィンドウが SWFファイルより小さいなら、縁を切り取ります。「SALIGN」とほぼ同じです。

L：
ブラウザの左端に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、上下と右側で隠れる部分が出ます。
R：
ブラウザの右端に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、上下と左側で隠れる部分が出ます。
T：
ブラウザの上端に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、左右と下側で隠れる部分が出ます。
B：
ブラウザの下端に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、左右と上側で隠れる部分が出ます。

SAlign

SALIGN="値"
値: L, R, T, B, TL, TR, BL, BR

SWFファイルの位置を変更します。デフォルトはブラウザの中心に置いて、ブラウザウィンドウが SWFファイルより小さいなら、縁を切り取ります。「ALIGN」とほぼ同じですが、SALIGNの方がより詳しく設定できます。

L：
ブラウザの左端に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、上下と右側で隠れる部分が出ます。
R：
ブラウザの右端に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、上下と左側で隠れる部分が出ます。
T：
ブラウザの上端に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、左右と下側で隠れる部分が出ます。
B：
ブラウザの下端に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、左右と上側で隠れる部分が出ます。
TL：
ブラウザの左上角に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、右側と下側で隠れる部分が出ます。
TR：
ブラウザの右上角に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、左側と下側で隠れる部分が出ます。
BL：
ブラウザの左下角に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、右側と上側で隠れる部分が出ます。
BR：
ブラウザの右下角に揃えた状態で表示します。ブラウザサイズより SWFファイルが大きい場合、左側と上側で隠れる部分が出ます。

WMODE

値:transparent

指定することで Flashの背景を透明にできます。その場合、SWFファイル内で指定してある背景色は無視されます。(Flash Player 6,0,65,0/Windows 、6,0,67,0/Macintosh以降)
※透明表示モードを使用すると、パフォーマンスに影響する可能性があります。

サポートしているブラウザ

Internet Explorer 3 以降 (Windows)
Internet Explorer 5.1 および 5.2 (Macintosh)
Netscape 7.0
Mozilla 1.0 以降
AOL
CompuServe

Base

BASE="基本ディレクトリか URL"

BASE="."：
SWFファイル内で指定されているすべてのパスが SWFファイルファイルが収められているディレクトリへの相対パスになります。
BASE=URL：
URLで指定したディレクトリの一つ上の階層がカレントディレクトリになります。

FlashVars

FlashVars プロパティを Object またはEmbed タグ内に記述することで、変数を SWFファイル内で使用することが可能です。ストリングは name=value の組み合わせを1セットとし、& (アンパーサンド) 記号で区切ります。特殊記号や印刷不可記号は % (パーセント) 記号の後に2桁の Hex 値を使用したものでエスケープできます。シングルのブランクスペースは + (プラス) 記号で表せます。(Flash Player 6以降)

Object タグの使用例

Embed タグの使用例

sample.swf" FlashVars="foo=Hello%20World&paragraph=first+line%0Dsecond+line" ... (ほかのパラメータ)>

値： TRUE か FALSE
初期値： TRUE

SWFファイルを右クリック(Macの場合はCommand キーを押しながらクリック)したときにポップアップされるメニューをの属性です。通常のメニューには、ブラウザ内での表示方法や再生、拡大などを制御できるオプションがありますが、表示させたくないときは、この MENU 属性を使って、メニュー項目を制限できます。

TRUE：
すべてのオプションがリストされている。
FALSE：
“About Shockwave Flash ...”しか表示されない。

pluginspage

PLUGINSPAGE= URL

タグの中に記述します。Flash Playerプラグインがインストールされていなかった場合にURLで指定したマクロメディアの日本語のダウンロードページを案内します。

type

type="application/x-shockwave-flash"

MIME Typeの設定を行わなくてもこの記述によってコンテンツのMIME Typeを認識します。（Netscape Navigator 3.0以上）

PCサイトと携帯サイトを自動判別

Naoking — 2007-03-26T12:33:22+09:00

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をダウンロードする方は「続きを読む」をクリックしてください。

ThickBoxを使ってWeb2.0っぽく

Naoking — 2007-03-24T09:39:51+09:00

「サムネイル画像をクリックすると大きな画像を同ブラウザ上で表示する」ってサイトをよく見るようになりました。
クリックすると別ウィンドウではなく、サムネイルの上に画像ボックスが表示するやつです。

別ウィンドウが開くっていうのは嫌われる傾向にありますし、なによりかっこいいですよねｗ

たいていはPrototype.jsとLightBoxというライブラリを使用しています。
LightBoxってのがWeb2.0っぽい表示をさせるライブラリです。

Prototype.jsはファイルサイズが大きいためにLightBoxを使用するために他の必要ファイルも読み込むと100KB以上になってしまいます。
まぁ、その分いろいろ便利な機能もついてるんですが、ちょっと重すぎ……って思いますね。Javascriptが全部読み込まれる前にサムネイルをクリックすると、思ったように動作してくれませんので遅い回線を使ってる方にとってはイライラさせられるものかもしれません。

そこでサンプルを見てください。
LightBoxを使ってるサイトと似たような感じで表示されますが、これはPrototype.jsを使用していません。

代わりに「jQuery」と「ThickBox」というライブラリを使っています。
必要ファイルのサイズは31KB程ですので、1/3以下になりますね。

ThickBoxとLightBoxの違いは様々な形式に対応しているという点も違います。
LightBoxは画像ファイルにしか対応していませんが、ThickBoxはHTMLファイルを表示させることもできます。
外部ファイルでFlashを貼ったHTMLを読み込むことや、ログインボックスを表示させることができます。
ただ、LightBoxで使える画像のスライドショーには対応してませんので、その場合は外部ファイルでスライドショーのJavascriptを使ったHTMLを用意したりしなければならないですね。

肝心の導入方法です。
必要なのが、jQuaryとThickBox.js、ThickBox.css、loadingAnimation.gifですので、それぞれ下記サイトからDownloadします。
ThickBox公式サイト
(jQueryは二つありますが、compressed versionってのは改行やコメントを省いてより軽くしたものです)
サンプルで使っているthickbox.jsとthickbox.cssは若干いじってますので注意してください。

loadingAnimation.gifは読み込むHTMLファイルと同じ階層に「images」という名前のフォルダを作って入れてください。
thickbox.js47行目のってところを絶対パスにしてしまったほうが他のページでも使えて便利かもしれません。

ThickBoxの使い方

～内に