Html5 on akky@サイボウズラボ・ブログ

イーロン・マスク氏が12歳の時に投稿したゲーム Blaster が再現される

Wed, 10 Jun 2015 00:00:00 +0000

電気自動車テスラを創業したイーロン・マスク氏が、南アフリカの12歳の少年だった時に作ったゲーム Blaster が公開されています。

上記ページで遊んでみても、今の子供が見ても「これがゲームなの?」と思うようなものですが、作られたのはインターネットも無くパソコンがそれほど普及もしていなかった1984年で、しかも作者は12歳の少年です。

マスク少年はこのゲームのコードを PC and Office Technology という雑誌に投稿し、500ドルの報酬を得たというのですから、双葉より芳しいとはこのことですね。

今回この習作が知られるようになったきっかけは、先月発売されたアシュリー・バンス氏によるマスク氏の伝記本 Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future の中で、当時掲載されたソースコードが掲載されていたからということです。

https://www.amazon.co.jp/Elon-Musk-SpaceX-Fantastic-Future-ebook/dp/B00KVI76ZS/

この昔のソースコードを元に、グーグルのエンジニア、トーマス・ロレットさんがHTML5で再現しGoogle App Engine上でこれを公開したことで、ネットにつないでいる多くの人が実際に遊べるようになったというわけ。

via The Verge

slitscanner.js - 動画をスリットスキャンして一枚の画像に収めるライブラリ/ブックマークレット

Tue, 22 Jan 2013 00:00:00 +0000

「スリットスキャン」とは、こちらで解説されていますが、時間軸のある動画などを、フレームを動画上の場所ごとにずらすことで作られる特殊な映像効果、のようです。

アナログの時代はカメラの前に置いたスリットを動かすことで、デジタルになってからは動画編集ソフトで、こういった効果をつけているそうです。

プロが人の手で編集を加えれば、独特の不思議な映像はもちろんできるのですが、VimeoやYouTubeなどの動画サービスで再生している動画を、ブラウザ上でそのままスリットスキャンしてしまおう、というのがSha Hwangさんによるslitscanner.js。HTML5のビデオプレイヤーで再生できる動画をスリットスキャンで一枚の画像にまとめてくれるライブラリ(とライブラリを使ったブックマークレット)です。

上記ライブラリページのブックマークレットをブックマークしておいて、Vimeoで適当な動画を開き、右下の"Switch to HTML5 Player"で(Flashプレイヤーではなく)HTML5プレイヤーを使うようにしてから、ブックマークレットを実行すると、動画の再生にあわせてスリットスキャンした画像が作られていきます。

上の動画から作ってみたスリットスキャン画像がこれ。

フレームを取り込む間隔はスライダーで調整できますので、多少は編集的なこともできるかと。

もう一つためしてみました。

動きの早い動画だと細切れになりすぎて、よくわからない画像ができてしまいますね。Vimeoだけじゃなく、HTML5プレイヤーを使っていればYouTubeなどでも使えるのですが、YouTubeの場合は広告がFlash Playerで再生されるので面倒なことがあるとか。

うまくはまれば、長時間動画の雰囲気や盛り上がっているポイントを見つけるのに役立つかもしれません。

ブラウザで再生されている動画を、手元で加工することで面白くしたり発見したり、ということも、いろいろ出てくるのかもしれないですね。

via Slitscanning online videos

出たばかりのChrome版Angry Birdsがさっそくハックされ、全レベルが遊べるように

Thu, 12 May 2011 00:00:00 +0000

Google I/Oで発表された、iPhoneやAndroidで人気のゲームAngry Birdsのウェブブラウザ版、HTML5で作られていてChromeブラウザでアプリ版とまったく変わらない感覚で遊べることに驚きましたが、もう中身を解析した人が出てきたようです。

要は、どの面をクリアしたかの情報が保存される場所がわかったということなのですが、ブラウザ版を実行した状態で、以下のコードをアドレスバーで実行すると、全部の面のロックが外れてしまいます。

javascript: var i = 0; while (i<=69) { localStorage.setItem('level_star_'+i,'3'); i++; } window.location.reload();

Google I/Oでは、Chromeブラウザ上でのアップストアも発表されました。ケータイやスマートフォンでやっているようなアプリ課金がHTML5ベースのwebサービスでもできるという嬉しいニュースでした。パソコン上のブラウザで動くゲームやコンテンツを作って売れる手段ができるのですから。

このブラウザ版Angry Birdsは、今のところ課金とか無い無料版ですけど、元々のiPhone版などは先のレベルに進みたい人に有料アイテムを売るのが収益源の一つなので、こんな風にソースから中の仕組みが見えてしまうと、そのような課金はやりにくくなるかもしれませんね。スマートフォンのアプリとは違って、ブラウザ上のページではソースが見放題なのは仕方がないことですけれど。