Nuts Choco Web Design - 情報誌 -

HTMLでフォームを作成された事がある方はたくさんいると思います。作成して気づく点としては、ブラウザやOSごとにフォームのデザインが全然違うって事。ですのであまりデザインにこだわったフォームはユーザーに混乱を招くので、結果的に無難なフォームされることが多いと思います。それでもデザインにこだわりたいって方はおられると思います。JavaScript や Flashを使う方法があります。

今回、簡単なFlashとCGIを使ったフォームのテンプレートを作ってみたので、よければこれを元にオリジナルのフォームを作ってみてください。

メールフォームテンプレート

Zipで圧縮してます。中身の mail.cgi の属性は 755（もしくは705）で cgi や sendmail のﾊﾟｽはサーバーの管理者に確認してください。mail.fla は自由にデザインを変更してください。

アクションスクリプトの中の if 文
 if (email.text eq "" || name.text eq "" || body.text eq "") {
  hissu._alpha = 100;
 }
は必須項目が未入力の場合は、[hissu(未入力の文字) を表示させなさい]との記述です。

それぞれのインスタンス名
name：名前
email：メール
subject：件名
body：本文

あと、var TO:String ='info@example.com';　は送信先のメールアドレスですので、適切なものに変更してください。
サンプルはこちら（送信はできません。)

Flashのサウンド再生のイベントを作成し、ボリューム調整のフェーダー(knob_mc)を作る場合がある。

このフェーダーの動作を以下のような値に設定をするとマウスでフェーダーを動かして、クリックしたままフェーダー以外の場所で、マウスをはなすと、フェーダーの動作がおかしくなってかなり鬱陶しい。イライラ度2

/*マウスでドラッグ開始*/
knob_mc.onPress = function():Void  {
 startDrag(this, false, -50, this._y, 50, this._y);
};
/*マウスをはなす*/
knob_mc.onRelease = function():Void  {
 stopDrag();

Sample1

このような怪しいボリュームフェーダーの動きは、「マウスのリリースをムービークリップ以外の場所で行った場合、ドラッグをやめろ」との記述を追加することで回避ができる。

/*マウスをムービークリップ以外の場所ではなす*/
knob_mc.onReleaseOutside = function():Void  {
 stopDrag();
};

Sample2

Windows XP以上、IEを利用のユーザーで Windows Update [KB912945]のパッチを当てられているユーザーは現在、従来の方法でOBJECTタグを使って表示させる方法で、Flashを使うと、以下のような表示がされ、一度、クリックし、ActiveXを有効化する操作が必要になる。これはセキュリティー上の対策としての名目でこのような動作仕様となっているが、ある米国の会社の訴訟により、このような仕様に変更させられる結果になったようだ。ユーザーにとっては不便極まりない。



ただ、この動作は回避することが可能です。JavaScript のdocument.writeを使うことにより、この問題を回避できるとの情報があります。
＜ActiveX コントロールのアクティブ化＞
http://www.microsoft.com/japan/msdn/workshop/author/dhtml/overview/activating_activex.aspx
＜Active Content Update Article＞
http://www.adobe.com/devnet/activecontent/articles/devletter.html

Microsoft社 の上記のウェブサイトに記載している情報と Adobe 社で提供しているJavaScriptを使って以下の手順で後半のようなサンプルを作ってみた。

▼JavaScriptの外部ファイル（.jsファイル）
http://nuts-choco.com/test/object/scripts.zip

具体的な修正例：

1. まず、上記のサンプルファイルを解凍し、任意の場所に保存し、ヘッダーに、外部のJava Scriptを読み込む記述を行います。

<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>

2. 次に、Flashを表示させる箇所に以下のような記述を行います。

■Java Script を使った表示

※ スクリプト内の AC_FL_RunContent ('  中略  '); //end AC code は表示の都合上、改行を行っていますが、実際は改行せずに記述ください。

<script type="text/javascript">
AC_FL_RunContent( 'codebase'
,'http://fpdownload.macromedia.com　中略　/swflash.cab#version=8,0,0,0',
'width','200','height','101','src','swf/test','quality','high','pluginspage'
,'http://www.macromedia.com/go/getflashplayer','movie','swf/test' ); //end AC code
</script>

■ <object > を使った従来の表示
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com　中略　swflash.cab#version=8,0,0,0" width="200" height="101" id="object" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="swf/test.swf" />
    <param name="quality" value="high" />
    <embed src="swf/test.swf" quality="high" bgcolor="#ffffff" width="200" height="101"  allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

3. 元々、JavaScriptを無効にされている方もいるので、その場合Flashが見れなくなりますので<noscript></noscript>タグ内に<OBJECT> タグの情報を書き込みます。
　
4. 完成したものが以下のサンプルです。もちろん、[KB912945]を適用されていない方には違いが分かりません。

▼サンプル
http://nuts-choco.com/test/object/