くずWebデザイナーのなれの果て

サイトを巡回していて見つけた記事です。
JavaScriptはとても便利な言語なのですが、大量のプログラムを入れるとWebサイトの表示に時間がかかるようになります。そこでソースコードからの記述を見直して、プログラムの動作速度を速くしようという方法を説明しています。

JavaScriptを高速化する6つのテクニック

ブラウザごとの実行速度比較がされているのでわかりやすいです。BASICで涙ぐましい努力をしていた過去を思い出しました。

仕事でLavaLampを導入しました。
簡単に設置できず試行錯誤したので、今後LavaLampを使ってみたい人向けの参考にまとめを載せておきます。

LavaLampはjQuery(Javascript)を使用したリッチメニューです。グローバルナビゲーションを格好良く見せることができます。
詳細はコチラのページ(英語)に書かれています。

導入方法

導入方法は2種類あります。ただ、パッケージとして提供されているものについては環境によりクリックできない可能性があり、完全解析するより個別導入した方が早そうなので個別導入方法で説明します。

• 上記ページのStep 3: The Javascript項目下にあるdownload jQuery here, Easing plugin here, and the LavaLamp plugin here.から3つともDLします。
  ※jQueryはバージョンにより動作制限があるかも知れません。私が導入した時のバージョンはjQuery1.2.6です。
• 各ファイルを格納場所(自分で決めて良い)に格納し、Step 3: The Javascript項目を参考に呼び出します。
  PLAIN TEXT
  HTML:

  1. <script type="text/javascript" src="path/to/jquery.js"></script>
  2. <script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
  3. <!-- Optional -->
  4. <script type="text/javascript" src="path/to/jquery.easing.js"></script>
  5. <script type="text/javascript">
  6.     $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
  7. </script>

• CSSはUpdate項目にあるDownload the zip fileをDL、解凍してlavalamp_test.cssの必要な箇所を取り出して、JSファイル同様に呼び出します。
  PLAIN TEXT
  HTML:

  1. <link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="all">

• HTMLにリストタグでメニューを記述します。
  PLAIN TEXT
  HTML:

  1. <ul class="lavaLamp">
  2.             <li><a href="#">Home</a></li>
  3.             <li><a href="#">Plant a tree</a></li>
  4.             <li><a href="#">Travel</a></li>
  5.             <li><a href="#">Ride an elephant</a></li>
  6.         </ul>

• ※初期位置を決めるにはリストタグにクラスをセットします。
  PLAIN TEXT
  HTML:

  1. <li class="current">

先日、ロールオーバーで良いモジュールがあるという話をしましたが、
メニューが下がるプルダウン形式のモジュールは無いか、興味があって探してみました。

CSSやSpryでも同様の機能はありますが、アニメーションするものが希望という制限で探しています。
また、プルダウン形式のモジュールは「アコーディオン」「ドロップダウン」など他の名称が付いてるものもあります。

MenuMatic

見た目の綺麗で使いやすそうなモジュールです。モジュールはコチラからダウンロードできます。http://greengeckodesign.com/projects/menumatic.aspx
導入はさほど難しくありませんが、リンク先の説明を掲載します。

MenuMatic導入方法

• mootools-1.2とMenuMatic_0.67.jsをDL、解凍します。
• HTMLでこれら2つのモジュールを読み込みます。
• ＜script src="js/mootools-1.2-core-min.js" type="text/javascript"＞＜/script＞
• ＜script src="js/MenuMatic_0.67.js" type="text/javascript"＞＜/script＞
• CSSも読み込み
• ＜link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="all" /＞
• HTML内にリストタグ＜ul id="nav"＞を記述していけばOK。

紹介サイトにはモジュールと説明、サンプルがありますのでよく分かると思います。

ちょっと調べた結果を載せてみます。
Ajaxの台頭でJavaScriptが見直され、ロールオーバーもこちらで設置する人が増えました。
Dreamweaverでロールオーバーの設定を行うことも多いと思いますが、Dreamweaverのスクリプトは長く扱いづらいのが欠点です。

最近ではロールオーバーも外部モジュールとして組み込めるよう開発が進められ、公開されています。私はsmartRollover.jsを使っています（http://css-happylife.com/log/javascript/000157.shtml）すごくシンプルで軽いのですが、画像に_offと_onを追加しないと使えないためFireworksを使う場合大きな弱点がありました（使えるようカスタマイズしている人はいましたが）。

そこで色々調べてみると、jquery_auto.jsというのを見つけました。こちらはjQueryと組み合わせて使います。メリットは上記弱点がない部分。デメリットはjQueryを使うため読み込みにほんの少し時間が掛かる、コンフリクトする可能性がある、などです。ちなみにjQueryはここに日本語解説（http://semooh.jp/jquery/）があります。jquery_auto.jsはサイトに繋がらないので、ここらへんから入手します（http://logic.stepserver.jp/data/archives/579.html）

jQuery自体他にも機能があるので、最初から搭載するのであればこちらの方が良いかも知れません。