HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第二版

JavaScriptプログラミングのTOPへ 今から3分で,HTML5の JavaScript API の使い方を2つ覚えよう。 1:ドラッグ&ドロップAPI 画面上の要素を。 画面外から。 2:File API 読み込み。 書き込み ※これは覚える必要はない。 シンプルなサンプルコード付きで,これらの実装の方法を素早く学習する。 ※サンプルは,IE8のようなHTML5未サポートの古いブラウザでは動かないので注意。FirefoxやChromeを使うこと。 では,ここから3分の時間のカウントを開始。集中して読もう。 (0:00〜前半の1分半) 画面内でのドラッグ・ドロップ (後半の1:30〜3:00) 画面外からのドラッグ・ドロップ 参考資料 (0:00〜前半の1分半)画面内でのドラッグ・ドロップ まず,動作例を見てみる。「リンゴ」をバスケットにドロップしてみてほしい。 動作サンプル1 ht
初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> 小山田 晃浩(株式会社 ピクセルグリッド) WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね! これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり!!SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました!!! これからWebサービスを作るなら、導入したいですね!!! これpjaxを使えば簡単に導入できるんです!!!よし!!! PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
昨日の記事で、抽象的なまま書きまくった反省もあるのだけど、それと同時に残念な気持ちになったので、すごく当たり前のことを書く。 オンラインゲームでクライアントに状態を持ったらメモリ操作されて危険っていうブコメが多かった。それは正直、古典的なウェブアーキテクチャから脱却できない残念な感じだと思ってる。 原則 クライアントはサーバーのキャッシュを作って、サーバーと同じロジックを持って、計算し、次の行動を決定する。 が、サーバーはクライアントから送られてくる情報を信用しない。 大事なことなのでもう一度言う。サーバーは、クライアントから送られてくる情報を信用しない。 対応 モデルの状態を受け取るのではなく、モデルのトランザクションを受け取る。 実装例 AからBに攻撃したい。この時にattackEnemyというAPIを作るとする。 ここでのクライアント目的では、手元のデータで対象に攻撃可能かどうかを判
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く