Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: HTML5

[Game] JS GameBoy Color Game Center – JSとHTML5で作られたゲームボーイカラーのシミュレーター

  • Pocket
  • このエントリーをはてなブックマークに追加

JSとHTML5で書かれたゲームボーイカラーのシミュレーター。ようするにブラウザベースのエミュです。JSベースでこれを作ったという点もなかなかホットなんですが、それよりも用意されてるROMの数にビックリしました。プルダウンからロードするゲームのカートリッジを選択できるんですが、ゼルダやメトロイド、ロックマン(欧米圏ではMega Man)、スーパーマリオ、ポケモン、ドンキーコングなどのメジャータイトルが山盛りです。これ著作権的にグレーどころかぶっちぎりで真っ黒なんじゃ・・・w ちなみにSafariでは動きませんでした。Firefoxでならちゃんと走ってくれます。著作権云々はとりあえず置いといて、技術的にはなかなかホットだなぁと。

[HTML5] 20 HTML5 sites that changed the game – ゲームを変えたHTML5サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

ゲームを変えたHTML5サイトの作例が20紹介された記事。ゲームとは言うものの全てがゲームサイトではなく、なんつーかHTML5で記述されたナイスな作例といった内容。この中で半分くらいは見たことのあるサイトだったけど、特に印象深かったのはKern TypeROME。あとSlavery Footprintのようにスクロール芸のHTML5サイトも今年は流行ったような気がします。オーディオ関連、クライアントサイドのWebApp、SVG、Canvas、WebGLといった感じで、各カテゴリのアツいサイトが紹介されるという内容。来年はこういうのドバっと出てくるような気がします。あー俺もこういう仕事したい。

[HTML5 / CSS3] HTML5 and CSS3 Advent 2011 – HTML5 / CSS3のTipsやチュートリアルを日ごとに紹介するサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5やCSS3のTipsやチュートリアルを日ごとに紹介するサイト。1日ごとに1つの項目がアンロックされていくようです。今日の段階では15のチュートリアルが紹介されてます。「CSS3でテキストシャドウ描くに際にはこうするとイイYO!」的な内容が多いです。実例と併せて紹介されてるのでサクっとコピペしてサクっと使えるものが多いです。HTML5 / CSS3はこれからって人にイイかも。

[HTML5] 20 Amazing Implementations of HTML5 Canvas – Canvasタグを使った作例まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5のCanvasタグを使った作例の紹介記事。ゲーム、エフェクト、スライドショー、フォトウォール(フォトギャラリー)の4つに分けて紹介されています。この手の記事ではありがちではあるけど、「へぇーこんな事できるんだー」的なのが色々あります。HTML5で記述したサイトの制作経験はぼちぼちあるけど、Canvasタグってちゃんと描いた事ないんスよね。動きを使った表現や動的なコンテンツを作る時のために勉強しておかなきゃな、とか思いました。

[HTML5] 25 Amazing HTML5 Tricks and How to Make Them – HTML5を使った作例まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5を使った作例やTipsをまとめた記事。ビデオプレーヤー、コンタクトフォーム、マルチタッチデバイス向けコンテンツ制作、ドラッグ&ドロップを使ったインターフェース、Canvasを使った作例、動きのあるメニュー作例、ブログテンプレートなど、わりと幅広い内容。最近サイトのソース見ると宣言文がHTML5になってるものも多く見かけるようになりました。Web屋やってくならこういうの勉強していかなあきまへんね。

[HTML5 / CSS3] Tron : Legacy – TronのIE9向けコンテンツがなんかスゴい

  • Pocket
  • このエントリーをはてなブックマークに追加

Tron : LegacyのIE9向けサイトがなんだかスゴいです。サイトの目的はBlue-Rayディスクの販売サイトと、コミックアプリへの誘導という位置づけのようで、IE9でベストなパフォーマンスで動くとの事。けどSafariでもちゃんと見れました。HTML5のCanvasやAudio機能を使ったコンテンツだそうで、マウスのドラッグ操作やキーボードの左右でコンテンツを閲覧できます。早い話がWebコミックなんだけど、コマ内でもレイヤーが分かれてたりして手が込んでます。いやーなんかスゴいっす。

[Game] World’s Biggest PAC-MAN – 世界最大のステージを誇るパックマン

  • Pocket
  • このエントリーをはてなブックマークに追加

世界で最も大きいステージのパックマン。どれくらい大きいかというと、ザっと見た感じじゃサッパリ見当も付かないくらい大きいです。1つ1つのステージは普通なんだけど、それらが上下左右につながる事で超広いステージを構成してます。んでそれぞれ相互に移動もできます。興味深いのはこれがHTML5で作られている点。最初Flashかと思ったけど違いました。マップクリエイトもできるようなので、なんかこうネタ的にオイシイマップ作ろうかなとも思ったけど仕事中なので自重しました。ザクとか描きたいなーこれ。

[Presentation] Pure CSS Slideshow – HTML5/CSS3を使ったWebスライドショー

  • Pocket
  • このエントリーをはてなブックマークに追加

HTML5/CSS3で作られた、プレゼン向けな印象のスライドショー。仕組みは極めてシンプルで、画面の右半分をクリックして進む、左半分クリックで戻るというものです。動きの仕組みについても画像で分かりやすく解説されてます。こういう飾り気のないシンプルなプレゼンする人ってかっけーなーって思います。Web系のこの手のイベント行くと思うんだけど、最近じゃKeynoteとかではなくWebベースのスライド使う人増えたような気がします。