どうも、まさとらん（@0310lan）です！

「HTML5」「CSS」「JavaScript」と言えば、ほとんどの方が一度は聞いたことがあるのではないでしょうか？

サイトやWebアプリなどを作る上で、まず最初に学習するための知識・言語と言えますが、これらをブラウザ上で書いたり実行したり共有できるサービスとして「jsdo.it」があります。


サイト内は、毎日無数のWeb作品が作られており、コードの中身を自由に閲覧・共有出来るため、コミュニティも非常に活発です。

そこで、今回はこの「jsdo.it」で人気の高い作品として知られているモノをピックアップしてみましたのでご紹介しようと思います。

ぜひ、スキルアップにも役立てて見て下さい！

 

アイデア次第で「顔文字」もココまで作り込める！

【 Gravity Face 】


ただの顔文字を、まるで「たまごっち」のような愛らしいキャラクターに変化させた事例がこちら。

つまんだり、ひっぱったりすることで、様々なアクションを見せてくれる俊敏な作品です。スマホで見ている場合には、傾きも検知してくれるようになっており、コロコロと転がっていくのもカワイイです。


 

6000行を超えるCSSで「ワニワニパニック」を作った事例！

【 CSS PANIC 】


CSSって、こんなに動きのあるゲームも作れるんですね…。

コードの中身を見てもらうと分かるのですが、JavaScriptは一切書かれておらず、本当にCSSだけで作り込まれていることに驚きます。


ぜひ、一度プレイしてみてください！

一体、どのようにして作られているのか、時間のある方はぜひコードレビューもしてみましょう。

 

「じゃんけん」の概念を覆す斬新なゲームアプリ！

【 じゃんけんスクイーズ 】


「じゃんけん」というシンプルな遊びを、リアルタイムアクションゲームにしてしまった事例。

言葉では説明が難しいのですが、簡単に言うと「押し合いゲーム」です。
じゃんけん「ぽん！」の後に、グー・チョキ・パーのいずれかをクリックして、勝っていれば敵陣へ押していけるようになっており、自分側の端まで到達すると負け！というゲーム。


ところが、途中でリアルタイムにチョキやグーに変更することが出来るため、常に「勝っている状態」で押していくのはなかなか難しいのがハマリどころとなっています。

 

「画面遷移」にこだわるとココまで可能！？

【 Elements Transition 】


画面が切り替わる際に、こんな仕掛けを自分のサイトにも仕込んでおけば楽しいだろうなぁと思える作品です。
（Chromeブラウザ推奨）

背景がコンテンツになっているのが特徴的で、アニメーションも非常に美しくてカッコイイです。

ちょっとした奥行き感もあって、フラットデザインよりも個人的にはこんな仕掛けのサイトに興味を惹かれてしまいます…。


 

洗練されたアニメーション時計！

【 パーティクル時計 】


時計の表示方法について、勉強になる作品がこちら。

時計に関しては、いろいろ「jsdo.it」のサイト内にもあるのですが、こちらの作品はあまり見たことないアニメーションが斬新なのと、見ているだけでカッコイイのでついつい見入ってしまうのが魅力です。


ちょっと変わった時計の表示方法を模索している人は、一度参考にしてみてはいかがでしょうか。

 

学習にも最適な「アルゴリズム」を視覚化した作品！

【 ソートアルゴリズムを映像化してみた 】


「並び替え」に関するアルゴリズムを、視覚的に見ることができる作品。

上部メニューから、いくつかのアルゴリズムを切り替えたり、並び替え速度を速くしたりも可能になっています。これを見ていると、どのアルゴリズムを使った方が速いのか、どのような過程を経て処理がされているのか…、などがよく分かるので勉強になります。


コードの中身を見て、さらにアルゴリズムについて知識を深めることも出来ますね。

 

「返り値」を言い当てるギークなクイズゲーム！

【 JSQuiz 】


簡単な条件式や、ファンクションなどが表示されるので、その返り値となるモノを入力するクイズ作品です。

意外に、プログラミング学習にもなるので、これをもっと発展させてWebサービスとしてリリースしても面白いのでは？と思ってしまいました。



 

3Dマップジェネレーターを作ってしまった事例！

【 ハコニワブロックス タクト 】


ゲームの作成にも活かせそうな、3Dマップジェネレーターとして機能する作品。

しっかりと、作ったデータはテキスト形式で書き出しすることも出来るようになっており、このデータをいじることで素早くマップを作ることも可能です。


「jsdo.it」では、フォークという機能があり、誰かが作ったコードを元にして自分流のコードに編集することも出来るので、このジェネレーターをさらに発展させてみるのも面白いかもしれませんね。

 

滑らかに動くルービックキューブ！

【 CSS RubikCube Game 】


ルービックキューブを忠実に再現した作品がこちら。

非常に滑らかに動くのが特徴で、回したい部分をクリックすると矢印が表示されるのも親切で良いですね。


ルービックキューブは、世界大会も定期的に開催されるくらいメジャーな遊びになっているので、本物を持っていない人はまずこちらの作品で試してみましょう。

 

こんな「応募フォーム」があったら絶対に申し込むはず！

【 ゲーム風 登録画面 】


アンケートや、ご意見・感想などのフォームで使える斬新な作品。

なぜか、フォームに入力をしていくことで得点がゲットできるようになっており、最後まで入力を終えるとランキングまで表示されるという楽しい仕掛けが施されたフォームになっています。


入力したら、文字が大きく表示されたり、性別を答える時にパーセンテージで指定するなど、細かい作り込みも俊敏です。

 

まとめ

「jsdo.it」では、気軽にWebのプログラミングがブラウザ上で試せるので、ちょっとした実験や学習には最適なサービスかと思います。

特に、他人の書いたコードを見れるのは勉強にもなるし、何よりいろいろ発見があって楽しいですね。

みなさんも、自分のWebサイトやサービスに、ちょっとした工夫が欲しい時には、ぜひ立ち寄ってみると良いでしょう。

 

written by まさとらん