やりたいこととサイトの重さ
予め言っておきますが、オチがありません。
現在の状態
サイトを華やかにしたいと誰しも思っていると思います。と、言うより私がそう思っています。が、当然のことながら画像をガンガン使い、 JavaScript をばしばし使うと目も当てられないほど重くなってしまいます。
ありがたいことに私は FTTH ではないもののそこそこの速度で通信が出来るので、自分が「うっ」という状態にはあまりならないのですが、当サイトでもちょっと重いぞ、という方がいらっしゃる辺り少なくともサイズは現状維持がベストかな、と思っております。
やりたいこと
それはさておき、 JavaScript で何がやりたいのか。いろいろあるのですが、
サムネイルクリックで画像を表示
- Lightbox JS: 一番軽いような気がします。
- Lightbox JS v2.0: Prototype を使用。
- Litebox: moo.fx がベース。
- Highslide JS: とてもクール。おでさんが WordPress プラグイン化なさっています。
スライドショー系
- JonDesign's Smooth SlideShow: mootools 又は moo.fx がベース。
- mooShow: moo.fx がベース。
ページ内リンクをするるるーっと
いきなり変なところにとばされると迷子になった気分です。
ナビゲーションをずるるるーっと
割と何を使っても出来ます。 WordPress のテーマでこのギミックを使っているのは
- Foliage Mod: script.aculo.us を使用。
- WPGlass: moo.fx を使用。
- Scary Little: About がするするー。 moo.fx を使用。
- Durable: script.aculo.us を使用。
- StripedPlus: moo.fx を使用。
などなど。省スペースの上、見た目も楽しいのですがやり方によっては読み込み中に内容が全て見えてしまうのが難点。上部にナビゲーションがあると特に。
ツールチップ系
あると目を引きます。なくても別に構わないのかもしれませんが。
- あれこれポップアップ
- Bubble Tooltips
- Preview Bubble Javascript: リンク先をサムネイル表示
フォーム系
余裕があれば。
- Textarea tools: テキストエリアを使いやすく。
- Niceforms: フォームをお洒落に。
- formStyle: フォームをお洒落に。
- Tooltip for forms: ツールチップを表示
その他
- Website Options: 細々と便利機能詰め合わせ。
思うに
script.aculo.us も moo.fx も Prototype ベースですから ((とは言え、 moo.fx の方は私がやりたがっているような視覚効果のみにしぼってあるのでずいぶん軽いのですが。))、どうしたって重くなってしまいます。今現在の最新版、 1.4.0 での prototype.js は47kb もあるのですよ。むむ。
単発機能特化型のものをいくつか使うのか、ベースを一個定めて周辺で揃えるのか。これは試してみるほかなさそうです。
タグ: JavaScript, Thinking
2006 年 10 月 22 日 4:02 pm
この中ではmoo.fxが一番軽いですね。機能限定のprototype.liteも付いてきますし。「ページ内リンクをするるるーっと」はmoo.fxでもできますよ。ただ、moo.fx.packも使う必要があるので、ファイルサイズは大きくなが残念。それでも他の2つよりは軽い。って言うか、僕は実装に手こずって断念しました~(笑)。
2006 年 10 月 22 日 8:06 pm
やっぱり軽いのは moo.fx ですか。
おお、忘れていました。そういえば付属のドキュメントにありましたね。とは言え、私もローカルで試してくじけそうになっているのでどうなることやら(笑)