このページの本文へ

jQuery、HTML5も使って作る!

BiND4で、空腹時に絶対見てはいけないサイトを作る!

2010年09月28日 12時00分更新

文● ASCII.jp編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

パッとできてスゴい! 【その2】
jQuery、HTML5のムービーが一瞬で作れる

 基本の枠組みはあっという間にできた。次はいよいよ、最も目立つビルボードだ。鶏肉のフォー、羊肉のキーマカレー、こっくり煮込んだサムゲタン……美味そうな写真が流れ、スライドショーするものが作りたい。

 スライドショーにはjQueryというJavaScriptのライブラリを使う。とはいえもちろん1文字ずつプログラムを打ちこんでいくわけではなく、「SHiFT」というツールを使う。テンプレートを選び、写真を入れ、サイズを変え、キャッチコピーを書く。作業はこれだけ!

jQueryを使いたいときは「SHiFT」を使う。(1) テンプレートを選び (2) 画像とテキストを入れる

これだけでjQuaryのスライドショーが完成! 美味しそうな写真が右から左にスライドしていく

 ちなみにこれら「SHiFT」に入っているテンプレートはすべてjQuaryを使っているため、iPhoneやiPadのウェブブラウザーからでも読みこめる、最新のウェブ標準形式。特別なプレイヤーを使わないでも、スライドショーのような動画や、マウスで「いじって遊ぶ」演出が入れられる。

 拍子抜けするほど簡単だったので、HTML5のデザインも試してみる。最新技術というと難しそうに聞こえるが、これまた一瞬だ。ふたたび「SHiFT」を起動し、先ほどつくったスライドショーのテンプレートをHTML5のデザインに選びなおすだけ。重なった写真をマウスでズラして見ていくようなビルボードができた。

HTML5を使った、マウスでいじれるタイプのビルボードも簡単に作れる

 簡単に作れるのはもちろん驚きなのだが、画像はそのまま「テンプレートを変えるだけ」というのが衝撃だ。しかも切り替わりはほんの一瞬で、ラグタイムもほとんどない。ソフトの動作そのものが本当に軽いことに驚かされる。

(次のページにつづく)

カテゴリートップへ

注目ニュース

ASCII倶楽部

プレミアムPC試用レポート

ピックアップ

ASCII.jp RSS2.0 配信中

ASCII.jpメール デジタルMac/iPodマガジン