シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > インターネット > プログラムの中身が見れる「jsdo.it」で、天才的な猛者のWeb作品10選を集めてみた!
注目記事ピックアップ
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
share0
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
share0
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
share0
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
インターネット
2014/03/28 23:00

プログラムの中身が見れる「jsdo.it」で、天才的な猛者のWeb作品10選を集めてみた!


どうも、まさとらん(@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 まさとらん

 

 

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る