This domain may be for sale!
みなさんは、フルスクラッチでテトリスを作ることができますか? プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの45分でテトリスが完成! それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ25種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
最近テック系のブログやニュースなどでHTML5を取り上げられることが多くなり、目にされた方も多いと思います。人気ブログの「Techwave」でも以下のような記事でHTML5に言及しており、その注目の高さが伺えます。 ソーシャルの次の時代、「フリーミアム」が終わり「コンテンツがキング」になる Appleを脅かすFacebookの「プロジェクト・スパルタン」とは 日本のソーシャルゲームに追い風、日本はスマホソーシャルゲーム市場で世界を獲れる! これらの記事の中で、HTML5をベースにしたWebアプリの可能性が非常に高く評価されており、今後のモバイルアプリの主流がネイティブアプリからWebアプリに移行すると予想されています。 そこで今回はこのHTML5およびWebアプリについて取り上げ、その可能性を探ってみたいと思います。 ■ HTML5とは 最初にHTML5とはどういうものなのか簡単に説明した
2011年8月21日(日)に開催されたChrome+HTML5 Conferenceにて、id:nagayamaとid:nanto_viが講演を行ったので、その資料を公開します。「Webアプリの道も一歩から 〜はてなブックマークの場合〜」と題し、公式Chromeウェブアプリ はてなブックマークの開発フローや利用技術について解説しました。発表は2部構成で、ディレクターのid:nagayamaがはてなでのChromeウェブアプリの開発フローに関して、エンジニアのid:nanto_viがウェブアプリで活用しているHTML5関連技術に関して述べています。 Webアプリの道も一歩から 〜はてなブックマークの場合〜 View more presentations from nagayama Web アプリの道も一歩から 実装について by nanto_vi スクリプトの設計 表示内容と URL の切り
皆さんいつもWEBサイトのデザインをする際に何を参考にしていますか? 気にいったサイトがあったらブックマークをしてストックしておく、WEB系の本を見る、あとはWEBサイトのまとめサイトを見るですよね? 自分もまとめサイトを見つけるとブックマークして定期的にチェックしていたのですが、いろいろなまとめサイトがありましたのでまとめサイトをまとめてみました。 このほかにもこんななのがあるよというのがありましたら是非教えてください。 TheFWA http://www.thefwa.com/ High Floater http://www.highfloater.com/ ABM | AnotherBookmark™ – Webデザインブックマークサイト http://www.anotherbookmark.com/ Webデザインのリンク集 Webデザインポータルサイト S5-Style http
講師だって、最初は初心者だもの[番外]これからのHTMLの話をしてみようか。──Chrome+HTML5 Conference 感想 ── 森 和恵 ── 投稿:2011年08月22日 著者:森和恵 こんにちは。森和恵です。昨日、東京で開催された Chrome+HTML5 Conferenceの中継をみんなで見よう!の会に参加してきました。 |【参考】「Chrome+HTML5 Conference」パブリックビューイング in OSAKA |< http://osaka.cssnite.jp/event/html5conference.html > 次世代のWeb技術をしょって立つ「HTML5」を主題にセッションが構成されていましたが、その仕様を詳細に解説したり、テクニックを披露したり......というよりは、「HTML5を使って、これからのWebサイトはこう変わるよ!」という方向を指
以前、スマートフォンアプリ開発のフレームワークとして紹介したPhoneGapについて、 データベース(以降DB)を使ってみましたので、メモしておきます。 まず、PhoneGapのDBはHTML5の「Web SQL Database」を使用しています。 PhoneGapのAPIにDBの使用法のサンプルがあるのですが、少々使い方が間違っていて動かなかったので、簡単にサンプルを作りました。 Contact Example Example Database load select add delete 基本的な流れは DBを開く→トランザクション→SQL実行→(SQLの成功・失敗のコールバック)→トランザクションの成功、失敗のコールバック→終了 というような流れです。 以下説明です。 まず、DBを開くには、「openDatabase」という関数を使います。 function on
HTMLやCSS、JavaScriptといったWebの技術でスマートフォン用のアプリを開発できるモバイルフレームワークが注目されています。本連載でもこれまで、Web技術を使ってiOS向けのアプリを開発できる「NimbleKit」を紹介してきましたが、他にも以下のような同様のモバイルフレームワークがあります。 スマートフォン向けのアプリケーション開発フレームワーク Titanium http://www.appcelerator.com/ PhoneGap http://www.phonegap.com/ NimbleKit (iPhone専用) http://www.nimblekit.com/ JSWaffle (Android専用) http://d.aoikujira.com/jsWaffle/wiki/ 今回から数回にわたって、「PhoneGap」を使ったiPhone/iPad向け
皆さん、こんにちは。リクルート メディアテクノロジーラボの山本です。現在、「Mashup Awards 6」という開発コンテストを開催しています。このコンテストの関連イベントで開発者の方とお会いする機会があったのですが、その際に「応募したいんだけど、開発する時間がない……」という声をよく耳にしました。そこで今回は、そんな開発者の方の参考になればと思い、1時間で開発できるスマートフォン向けマッシュアップアプリの開発手順を紹介します。 現在地周辺のスポットをリアルタイム表示するWebアプリ 今回開発するのは、現在いる場所の位置情報を基に、その周辺にあるスポットをリアルタイム表示するWebアプリです。PCではなく、iPhoneやAndroidなどのスマートフォンで使われることを想定しています。最近スマートフォンを持っている方は増えているので、そういったスマートフォンを持っている方が、普段生活する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く