Java Script: 2007年7月アーカイブ

CSSとJavascriptでシンプルなプルダウンメニューを紹介しているサイトがあったのでメモ。
テキストの中央揃えとボタンの幅を変更すればすぐに使えそうです。

プルダウンメニューの方法

１つのページに複数のページを表示できるスクリプトです。
ただ、1コンテンツに大しての情報量が多いとみずらくなる可能もある。

prototype.jsベースの伸縮するアコーディオンＵＩ実装ライブラリ「Accordion v1.0」。
prototype.jsとscript.aculo.usのeffect.jsをベースに、mootoolsで作れるようなアコーディオン風ＵＩを実装できるようです。

よくホームページの新着情報などに使われているスクロールするスペースの部分をAjaxで表示する事ができる。

Sample1
矢印にマウスオーバーでスクロールする

Sample2
矢印をクリックすると画面の移動ができ、ハンドルを使ってスクロールも可能。

Sample3
ほぼiframeと変わらない

Sample4
タブ機能が追加

Sample5
タブに加え、右側にメニューも表示

Sample6
背景にオシャレな画像

(Ajaxの)デメリットとは
まず、Ajaxといってもブラウザに依存する部分がある。(MicrosoftのIEを使うのかFirefoxを使うのか)そしてそれによってプログラムを変える必要がでてくる。(工数増大)
例えばブラウザを固定するにしてもさらにバージョンによる違いがある。(IEの6か7か)(工数増大)
さらにブラウザが動作するOSによっても制限を受ける(Windows XPかVistaか)

これらをふまえてOSやブラウザを幅広くサポートしようとすれば、Ajaxの場合、
IE6(XP)/IE6(Vista)/IE7(XP)/IE7(Vista)/Firefox2(XP)/Firefox2(Vista)/Firefox2(Mac)/Firefox2(Linux)
で必ず動作するプログラムを作る必要がある。
通常、ここまでの作り込み＆テストは不可能なので、ある程度絞り込んだ範囲で動作するものをつくることになる。

ただし、Ajaxは(日々進化している)まだ発展途上の技術である。特にAjaxライブラリの出来が重要なので、主要なメーカー(MicrosoftやGoogleなど)が出してくるAjaxライブラリは随時チェックしておく必要性はある。

メリット
・サーバー管理者は安全である。
・データーはユーザーのブラウザーの中で処理されるので悪意をもったユーザーが掲示板にいたずらしたりするようなことは起きません。
・サーバー管理者はリソース（ネットワークの大域やサーバーのＣＰＵ）を消費しない。
・プログラムはユーザーのブラウザー上で動作するので、サーバーに負荷はかかりません。
いいかえれば、大量のアクセスがあっても動作できます。
・設置環境の制限がない
・原則ホームページが公開できるところであればどこでもコンテンツを作成できます。
・cgiが使えるかどうか気にする必要がありません。
・CD-ROMというネットワークに接続しない環境用のコンテンツも作成することが可能です。

デメリット
・JavaScriptという言語で記述しないとならない。
・JavaScriptはある種特殊なので、他の言語しか知らない人には難しかったりします。
・Javascriptをオフにしている環境では動作しない。
・JavaScriptの動作はブラウザーにまかせられてますのでブラウザーによっては動かないものがある。
・Macの特定のバージョンのNetscapeで動かないときがあるので使いたくありません。

JavaScriptをオンにする方法

Internet Explorer 6.0(Windows) の場合　　(MAC版も似た感じだと思います)

メニューバーの『ツール』→『インターネットオプション』→
『セキュリティ』→ 『インターネット』→『レベルのカスタマイズ』→
『スクリプト』→『アクティブスクリプト』の「有効にする」をチェックして下さい。