わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
HTML5 の Drag and Drop API と File API を使ってファイルアップロードを実装する - しばやん雑記
HTML5 の Drag and Drop API を使うことで、ブラウザにドロップされたファイルの情報を扱うことが出来ます。そして File API を組み合わせることで、ファイルの中身まで扱うことが出来るようになります。 そして FormData オブジェクトと XHR を組み合わせることでアップロード処理までを実装することが出来ます。完成図はこんな感じです。 今回は JavaScript の処理が中心です。jQuery を使っているので追加してくださいね。 $(function () { var uploadFiles = function (files) { // FormData オブジェクトを用意 var fd = new FormData(); // ファイル情報を追加する for (var i = 0; i < files.length; i++) { fd.append(
HTML5 videoでリアルタイム顔認識 - 風と宇宙とプログラム
以前、、ビデオのリアルタイムなヒストグラム表示を作ってみたが、思ったより高速だったので、もっと処理の重いものをやったらどうだろうと思い、JavaScriptで書かれた顔認識ソフトを利用して、ビデオに対してどのくらい可能なのかを試してみた。 JavaScriptによる顔認識ソフトは以下のものを利用。 Face Detection in JavaScript via HTML5 Canvas | Badass JavaScript 中身を見ると、canvasにdrawImage()した画像をgetImageData()でピクセル情報を取得している。その際、モノクロ画像に変換してから認識している。また、動的にcanvasオブジェクトを生成してオリジナルの部分的な領域を抽出している。その先はちょっとブラックボックス。 で、ビデオのヒストグラム表示でやったときと同じように、ビデオを一旦canvasに
【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (8) Web Storage | エンタープライズ | マイコミジャーナル
Web Storage/Web Databaseとは、クライアントサイドにデータを永続化するための仕組みで、オフラインWebアプリケーションを作成する上で非常に重要なテクノロジーだ。Web Storageはキー/バリュー型の単純なストレージ、Web Databaseは本格的なリレーショナルデータベースでありSQLを用いてストレージ操作を行うことができる。 Web Storageで取り扱うことのできる、キー/バリュー型のストレージには、以下の2種類がある。 sessionStorage … ウィンドウごと(セッションごと)に異なるストレージとなる。ウィンドウが閉じられると、データも消失する localStorage … オリジン(プロトコル + ドメイン + ポート)ごとに異なるストレージとなる。複数のウィンドウをまたいでストレージは共通。ウィンドウが閉じられてもデータは消失しない これ
Firefox3.6βで利用できるFile APIの可能性について：マピオンラボ(Javascript)
FileAPIとは？ HTML5関連のAPIです。これ。 http://www.w3.org/TR/FileAPI/ こんなことが出来る バイナリーで読み込める 文字列としても読み込める ただしローカルのファイルには保存が出来ない フローの変化 １）今まで ファイルをサーバに上げる サーバで処理する クライアントに表示 サーバを更新 ２）FileAPIを使うと？ クライアントでファイルを処理 サーバを更新 シンプルなフローを実現することが可能になりますね。 サンプル サンプルは、ソースファイルをただ表示するだけというシンプルなものです。 File APIでソースコードを表示するサンプル ※文字コードはUTF-8限定。 実はこのスクリプト、1秒おきに表示を更新しています。 書いている人が保存をするたびに表示が更新されるので、同じファイルを読み込める環境であればチームメンバーのコードの進捗
こてさきAjax:twitterを javascript だけで自動分類（WebDatabaseで機械学習） - livedoor Blog（ブログ）
WebDatabase使って何か面白いことできないかなぁ・・・と。 で、思いついたのが 「簡単な機械学習作って、文書分類とかできちゃうんじゃない？」 という素朴なアイディア。 例えば、メーラーの迷惑メールフィルターで、「このメールはスパム」と指定すると、似たようなメールをスパムとして自動判定してくれるけど、そんな類のことをjavascriptだけで出来ちゃうんじゃないかなと。 というわけで、twitterのsearch結果を、自分好みに自動分類してくれるサンプルを作ってみました。（safari4と、iPod touchで動作確認。WebDatabaseとwebkitがMUSTになってます） http://komachu.sakura.ne.jp/twittersearch/ 窓から、好きな言葉でtwitterを検索できます。例えば「田町」と入れると といったように、twitterが表示され
HTML5入門：アニメーションの実装方法３種
HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。 今日作ったのは、HTML5+CSS3上で可能になる（ただし現在ではWebkit独自の拡張を含む）３つのアニメーション・テクニックの比較（左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ（ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか？））。 詳しくはソース（参照）を見ていただければ
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://rpgjs.com/
Loading...
9leap : トップページ - どこでも遊べる、投稿型ゲームサイト
IBM Developer
[CSS]HTML5, CSS3, jQueryを使用して実装する画像ギャラリー
Ben Joffe |Canvascape