ASCII.jpツイートする必須項目のチェックとアニメーション効果を組み込むまずは例によってライブラリの準備からです。<script>タグで以下のようにprototype-1.6.0.2.jsとeffects.jsファイルを読み込ませます。src="js/effects.js"></script>次にテキストフィールドが空欄かどうか調べて左右に揺らすアニメーション処理を追加します。HTML側からは送信時にformCheck()関数が呼び出されるようにしたので、この関数内で空欄をチェックし、空欄の場合にはテキストフィールドを左右に揺らすようにスクリプトを書きます。具体的には、以下のスクリプトを組み込めばでき上がりです。「"name","email"」で指定します。指定するのは、先ほどつけた<input>タグのname属性とid属性の名前です。他の項目も空欄かどうか調べる場合は「,」(カンマ)で区切り、<input>タグで指定した名前を追加していきます。Script.aculo.usにはほかにもさまざまなエフェクトがあるので、もし左右に揺らすエフェクトが気に入らない場合は他のエフェクトも使えます。$(checkList[i]).visualEffect("Shake");の「"Shake"」部分に指定します。テキストフィールドを点滅させたいのであれば以下のようにします。$(checkList[i]).visualEffect("Pulsate");エフェクト処理の種類については、動作を見られるデモページがありますので、いろいろ試してみるとおもしろいでしょう。以上ですべての作業が終わりました。動作するか確認してみましょう。必須項目を入力せずに送信ボタンを押すと以下の画面のように変化しましたか?■完成した作例サイト名前が入力されていないので、名前の欄が左右に揺れます。実際の動きはぜひ作例サイトでさて、これまで全8回・2カ月間に渡ってさまざまな機能を組み込んできた「JPhoto.net」を作例とするシリーズは今回でおしまいです。すべての機能を一通り組み込んだサイトは以下で公開していますので、改めて振り返ってみて、気になる技があればぜひ記事を参考にチャレンジしてみてください。■連載で紹介した「JPhoto.net」の完成サイト次回は1週お休みをいただき、その後、また新しい作例サイトをベースにした新シリーズをお届けする予定です。一覧へDESIGN普通のtableタグを1行で動く表にするJSライブラリ「Yahoo!不動産」が採用する“ソートできるテーブル”を組み込んでみよう。ライブラリを使えば僅かな作業で実現できる。DESIGNGoogleマップ+jQueryで作るAjaxなデザインGoogleマップと自作のスクリプトで、地図と連動するショップガイドのWebサイトを作ろう。Lampの使い方を紹介する。DESIGNjQueryでクールなくるくるウィジェットを作ろうjQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。運営するWebサイトに複数のショッピングサイトのアフィリエイトリンクを張りたい――そんなときはJavaScriptでちょっとした工夫をしてみよう。DESIGN意外性が心地よいJSメニューのWebデザイン米国のインタラクション・デザイナーのサイトで使われているナビゲーション。意外な動きが気持ちいいこのメニューをjQueryで再現してみよう。地図で入力できるWebフォーム「HTMLフォームでの都道府県名の選択」に特化した新発想のJavaScriptライブラリが登場している。Design作の「jsmap」がそれだ。jsmapをHTMLフォームに組み込むと、プルダウンで選択する代わりに、地図をマウスでクリックすることで都道府県名を入力できるようになる。00DESIGNJavaScriptライブラリで作るリッチUI(まとめ)簡単・便利なJavaScriptライブラリの使い方、実際の採用サイトの情報をまとめてみた。自分のWebサイトのUI制作の参考にしてみよう。あのサイトの“技”を盗め「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。JavaScriptライブラリ/フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく連載。第10回はサムネイル画像の魅力的な見せ方について。国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく連載。第9回はFlickrのようなスライドショー機能を組み込んでみよう。00DESIGNHTMLもCSSも書換不要!気持ちいいスクロール国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく連載。第8回はスムーズなスクロールを実現する方法について。00DESIGNFlashではなくjQueryで!インパクトのあるUIを作ろう国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンにWebサイトをブラッシュアップしていく方法を紹介する本連載。第6回はFlashを使わずにインパクトのある表現を実現する方法について。00DESIGNたった1行で再現する有名ECサイトのUIデザイン国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第5回はECサイトの詳細検索ダイアログのUIに挑戦してみよう。00DESIGNYahoo!の流れるパネルをJSライブラリで再現スライドするタブネルを作ってみよう。既存の便利なJavaScriptライブラリを使いつつ、ちょっとしたカスタマイズの工夫も紹介。00DESIGNjQueryで作るAmazon流リキッドレイアウトAmazonのようにウィンドウの幅に合わせてコンテンツの表示を変えるようにしたい――難しいリキッド・レイアウトで使えるテクニックにチャンレジしてみよう。00TREND「最後の最後でお客が逃げた」を防ぐ「EFO」とは?Webマーケティング関連のイベントで出展が増えている「EOF」。スマホお気に入り一覧マイページ。