JavaScript samples for CG Creators

CG屋のサイトを見ていて思うのが,JavaScriptの使いどころが絶妙だということ.必要な場所に最低限最適なアクション(Effect,効果)を挿入し,その一発一発がCG屋サイトを引き立てている.CGの華やかさでサイト全体を盛り上げつつ,動的な効果を少しだけ挿入することで憎いくらいにかっこよく仕上がる.

そんな状況を見てこのコンテンツを作成してみた.JavaScriptを使用していない画像屋,CG屋が以下にリストするアクションを使用し,サイトのちょっとしたスパイスとして役立てて欲しいと思う.ここで提供するのはアイデアを実現するための手段であり,これを使用する状況は使用者が考えて欲しい.

このコンテンツに関しては初心者でも使えるように,を重視しており,そのため見易さ重視で最低限のプログラムしか書いていない.分からない場合,私に聞くか,各アクションにZIPファイルを用意しているので理解の補助として役立てて欲しい.

尚,各アクションのリンク先にはちょっとした説明が書いてあるが,これは技術的な要素を含むため,必ずしも読む必要はない.これを読んで応用してもらうのが目的である.

インタラクティブの基本.
一番よく使われているアクション.
関数を使用することで,プログラムの冗長性の排除,再利用性を意識する.
画像を先読みすることを「画像をキャッシュする」という.画像をキャッシュしておくことで,画像切り替え時(など),その都度読み込む必要がなくなり,画像切り替え(など)がスムーズになる.
今まではマウスが乗った画像,マウスが外れた画像と,マウスのアクションが起きた画像を入れ替えていたが,ここではマウスのアクションとは関係のない別の場所の画像を入れ替える.
Aの場所をマウスが通過すると,Bの画像が入れ替わる.これもよく使われているJavaScriptだ.
アクセスするたびにランダムに変化する画像.メインで使われると鬱陶しいが,飾り的な画像などちょっとした画像にこれを利用するサイトはある.
GIFアニメを作成するのなんて問題じゃない人も多いだろうが,最大256色という制限があることはどうしようもない.JPGやPNGでこれを実現する.これもまたちょっとした画像に適用することでサイトのアクセントになるだろう.
元ネタは猥褻スカルバイツGalleryページ.こういうアクションこそ,このコンテンツが目指すところ.
左側フレームにサムネール画像を配置し,右側フレームにその拡大画像を表示する構成をよく見かける.
画像を見るユーザにとっては非常に使いやすい構成だが,作成者側は画像ごとにHTMLファイルを作成しなければいけなく,これは管理や保守性等を考えると非常に面倒くさい構成だといえる.
この構成を,フレームを使用せず一つのHTMLファイルで実現する.
元ネタはsnake heart真・女神転生マニアクスの主人公.本人書いている通り,どうでもいいくらい楽しくない効果・・・かも知れない.
フォーム部品はタブキーによりフォーカスを移動できるという利便性を維持しているおしゃれなラジオボタン。