みなさんは、フルスクラッチでテトリスを作ることができますか? プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの45分でテトリスが完成! それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
Mozillaは3月27日(現地時間)、HTML5の性能を紹介する目的で開発したMMORPG(多人数同時参加型オンラインロールプレイングゲーム)「BrowserQuest」を公開したと発表した。Firefoxや米AppleのSafari(iOS版を含む)、米GoogleのChromeなど、HTML5をサポートするWebブラウザで楽しめる。 BrowserQuestは、Mozillaがフランスのゲーム開発メーカーLittle Workshopと共同で開発したMMORG。好きな名前を付けたキャラクタで村の中を動き回り、村人と会話したり敵キャラを倒してアイテムを獲得したりして先に進む伝統的なロールプレイングゲームになっている。本稿執筆段階でMac版Safariで参加したところ、74人のプレーヤーが同時に参加していた。プレーヤー同士はテキストチャットで交流することもできる。 このゲームは、HTML
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL(zip:12kb) HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ?とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な?話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
Appleをはじめ、最近脱FLASHの動きを見せており、FLASHクリエータとしても、今後どこに向かえばよいのかと、頭を悩ませる今日この頃ですが、そんな中、FLASHの代替方法として注目されているのがHTML5という技術なのです。もちろん、まだ普及するには時間がかかりますが、FLASHを超えるべくポテンシャルは存分に秘めており、WEB業界ではいつかFLASHがHTML5に抜かれてもおかしくは無いという空気になってきております。 <注意> これらサンプルはHTML5で作られております。HTML5が表示できないブラウザでは 閲覧ができませんので、ご注意ください。 HTML5についてはこちらを参考ください。 http://www.html5.jp/ ということで早速サンプルの紹介をします。 音が出るものもありますのでご注意ください。 Audioburst Animation音と、ドットが同調して
15 Free HTML5-CSS3 Templates to Start the Future of Web Design | blogfreakz.com フリーで使える15のHTML5+CSS3なテンプレートファイルが公開されています。 それぞれ地味なようでいて、HTML5やCSS3のテクニックをふんだんに使っています。 素材として使ってもよいですし、1つの学習用リソースとして活用してみるのも有益ですね。 関連エントリ ハイセンスにデザインされたHTML/CSSテンプレート集 CSSテンプレート配布サイト色々まとめ フリーのビューティフルなCSSテンプレート沢山「Css 4 Free」 フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 使えるCSSレイアウトテンプレート集「mycelly.com」
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
中島聡氏が見せるhtml5の未来:前半6本 の続きの6本を紹介します! 前半に引き続きここで公開しているウェブアプリはすべてこちらのページ(WidgetPad.com)で見ることができます。 例えばですが本日Twitter上でいろいろ話題になっていたこちらのサービスとか、これアプリじゃなくてiPhoneのSafariで動いているんですよ!すごい! では、後半6本紹介していきます! 3D Photo これ、Twitter界隈ですげぇ、って話題になってますよね。 すごいんです。動画必見! このウェブアプリの動画はこちら。 Canvas Benchmark:QuadraticCurve Fill うにょうにょします。 このウェブアプリの動画はこちら。 Finger Art:Circles 指で画面をなぞるとなぞったところに絵が書けます。 すごいです。 このウェブアプリの動画はこちら。 Calcu
本日鎌倉に来ていただいた中島聡さん、html5で何が実現できるのか?を現在果敢に挑戦されていまして、こちらのページ(WidgetPad.com)で実験作品を随時公開されているのですが、現在公開されている12個のhtml5で作成されたウェブアプリケーションをすべてご紹介いたします! 信じられますか?これらはSafari上で動いているんですよ!?まずは前半6個です。 これがiPhoneのSafari上でスムーズに動いているんです。 まずは6本、個別に紹介していきます! Gold Fish Simulation 小さなお魚さんが画面上をスイスイ泳ぎます。 このウェブアプリの動画はこちら。 Blob Sallad これが一番すごいかも!!! 指で触れます。ぴょんぴょん触れます。 2本指で触るとなんと分裂します!!! このウェブアプリの動画はこちら。 YAHOO! Finance 3D ヤフーファイ
あの中島聡さんが、今回の来日にあわせて鎌倉まで遊びに来てくれました!「Life is beautiful」という中島さんのブログは有名すぎますよね。今年の3月の対談(【AppBank特別企画】生きてるだけで丸儲け:中島聡氏対談)以来です! 最近ではあのPhotoShareの上位サービスである「PhotoShare Premium」をリリースするなど、iPhoneアプリを精力的に発売されています。 また、HTML5への注目もされており、appbankでも氏の作ったソフト12個を紹介しています。 中島聡氏が見せるhtml5の未来:前半6本 中島聡氏が見せるhtml5の未来:後半6本 今回は定番となりつつあるおそば屋さん鎌倉五島にていろいろお話させていただきました。中島さん出演のPodcast の視聴は下のPodcastバナーをiTunesにドラック&ドロップしてどうぞ。 五島の入り口でパチリ。
Note: Higher quality version on Vimeo: http://vimeo.com/6691519 Are you interested in HTML 5 and what's coming down the pipeline but haven't had time to read any articles yet? Brad Neuberg has put together an educational Introduction to HTML 5 video that goes over many of the major aspects of this new standard, including: * Web vector graphics with the Canvas tag and Scalable Vector Graphics
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く