JavaScriptでここまでできる！Web制作で参考にしたいサイト10選

Trello

カンバン形式でタスク管理を行うツールです。ToDo、進行中、完了といった状態ごとにタスクを分けて、ドラッグ・アンド・ドロップで直感的に操作することができます。チームで共有すると、各ユーザーの操作がリアルタイムで他のメンバーに反映される優れた機能を持っています。

ユーザーインターフェースがJavaScriptで実装されているのに加えて、サーバー側のプログラムもJavaScript及びNode.jsで開発されているそうです。JavaScriptだけでアプリケーション全体を構築できるようになりました。

リンク：Trello

Kindle Cloud Reader

Amazonで購入した電子書籍はタブレットだけではなく、Webブラウザでも読むことができます。KindleCloudReaderは電子書籍の情報がクラウド情報に保存されているので、パソコンから本を開いて、タブレットと同じように読書を楽しむことが可能です。

JavaScript、HTML5をベースとしており、jQuery並びにjQueryUIを使ってブラウザ上での読書体験を創りあげています。

リンク：Kindle Cloud Reader

Draw a Stickman

タイトルは「棒人間を描いてみよう」という意味で、可愛らしい絵描きブラウザゲームです。ゲームのストーリーに従って、棒人間、風船や雲といった要素をブラウザ上で描くと、驚くべきことに、その画像がアニメーションで動き始めます。

JavaScript、jQueryに加えて、Raphal(ラファエル)というSVG画像処理用ライブラリを使用しています。SVG画像は図形の拡大・縮小を行っても画質が劣化しないことを特徴としています。Jpgなどの画質が劣化するファイル形式とは異なるSVGを利用していることで、美しいアニメーションの実装が可能になりました。

リンク：Draw a Stickman

The Interactive Ear

小中学生向けに耳の構造を解説するサイトです。耳の中を音がどのように流れていくのか、アニメーションや透過効果を駆使して、分かりやすく示しています。

JavaScriptやCSSの効果に加えて、GIFアニメーションが活用された作品です。複雑なアニメーションを実装するにはCSSだけでは難しい個所があったため、簡単に作成できるGIFアニメーションが採用されたと言います。

リンク：The Interactive Ear

Philippa Gregory

イギリスの歴史小説家フィリッパ・グレゴリーの書籍リストです。本の発行年、並びに本が取り扱った歴史イベントの年号を時系列に示しています。

サイトの訪問者の40%がスマートフォンまたはタブレットの利用者だったことから、画面サイズの異なるモバイル端末でも見栄えが柔軟に対応できるレスポンシブデザインの採用は必須になっていました。Webサイトの開発者によると、JavaScriptを活用することで、見栄えと操作性を高めたWebサイトを作成することが可能になったそうです。

リンク：Philippa Gregory

Crime Timeline

イギリスの犯罪件数をヒートマップ形式で参照できるサイトです。地図上の範囲と、表示する期間を指定すると、犯罪件数の多寡に応じて色分けされていきます。

JavaScript、jQueryを使用しており、犯罪件数のデータは公開されているAPIから取得しています。Ajaxによる非同期通信を利用して、指定された地図と期間の情報を表示します。地図はGoogle Maps APIです。また、期間の幅を指定するのは jQRangeSlider というプラグインを指定しています。地図は様々な用途に利用できるので、開発の参考になるサイトと言えるでしょう。

リンク：Crime Timeline

Find Your Way To Oz

2013年に公開された「オズはじまりの戦い」のプロモーションサイトです。物語の始まりであるサーカス小屋やファンタジーあふれる映画の世界観にひたれるようインタラクティブな効果やスムーズなアニメーションが細部にまで作りこまれており、没入型の体験ができます。優れたユーザー体験が評価され、優れたWebサイトを表彰するFWAから年間最優秀デザイン賞を受けています。

このサイトはJavaScriptのライブラリであるWebGLを存分に活用しました。WebGLはWebブラウザで3次元コンピュータグラフィックス(CG)を表示する機能を提供します。

リンク：Find Your Way To Oz

Arms Globe

小規模な武器・兵器に関する輸出入を3次元空間で可視化したサイトです。輸出入の流れを表す曲線は美しく、また、3Dの地球は自由に回転させることができます。

JavaScriptの3DライブラリであるThree.jsを活用し、スムーズな描画とインタラクティブな操作が実装されています。

リンク：Arms Globe

Google Gravity

Googleのホームページに重力があったらどうなるか？不思議な実験を行うこのサイトでは、Googleのロゴ、検索窓、各ツールへのリンクボタンなどが重力に従って画面下部へ落ちてくる様子を楽しむことができます。各要素を投げ上げることも可能です。

重力を再現できるのは、JavaScriptを利用して重力の計算を行っているからです。物理法則を実装することで、リアルな事象をブラウザ上で実現することができます。

リンク：Google Gravity

Comments

コメントの数を可視化する実験です。棒グラフ上になっており、コメントがされるたびに、画面上部から新たな棒が追加されていきます。頻繁にコメントされている時間帯は、大量のバーが降ってくるので、感覚的にコメントの様子を理解することができます。

CommentsもJavaScriptを活用しています。以前はFlashで実装されていたものをJavaScriptで書き換えたそうです。

リンク：Comments

まとめ

JavaScriptはライブラリを活用することで、従来では考えられなかったような描画やアニメーションを実装することが可能です。生産性を高めるサービスだけではなく、ゲームや物理法則のシミュレーションなど多くの事例を見つけることができるので、Web開発のアイデアを得る際に参考にすることができるでしょう。