DeNA、HTML5開発支援フレームワーク「Arctic.js」を オープンソースとして公開 - [DeNA] 株式会社ディー・エヌ・エー
株式会社ディー・エヌ・エー（本社：東京都渋谷区、代表取締役社長：守安功、以下DeNA）は、人気ゲームタイトルで使用されているHTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開しました。 「Arctic.js」は、スマートフォン向けブラウザゲームにおけるインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScript＊1フレームワークです。開発者は「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroid＊2とiOS＊3双方の様々なスマートフォンデバイスへ高品質なゲームを提供することが可能になります。＊4
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でローカルファイルのドラッグアンドドロップで画像ファイルを表示 - コンピュータクワガタ
HTML5でローカルの画像ファイルをファイルのアップロードなしでプレビューするというのをやってみたかったのでやってみました。 意外にというか、つまらないところで引っかかったのでメモしておきます。 まず、参考したサイトは以下の2つです。 html5の File API を使って、アップロード無しで画像プレビュー http://d.hatena.ne.jp/favril/20100506/1273143063 Canvas + File API + Drag&Drop API で Instagram みたいな画像フィルターを作ってみた http://d.hatena.ne.jp/scalar/20101026/1288068169 作ったのが以下のソースとなります。上記のサイトのコピペを駆使しております。 <!DOCTYPE html> <html> <head> <meta charset=
Pusherでお手軽WebSocket - iPhoneから加速度をリアルタイム送信
はじめに タイガーマスクが貢いでくれるのを待っている皆さんこんばんは。 前振り考えるのが面倒なので結論から書くと、今日はWebSocketについて扱おうと思います。iPhoneを使って↓こんなサンプルを作ってみました。 Safari上のJavaScriptと、WebSocketをWebサービスとして提供しているPusherを利用して、サーバサイドの言語を使わずに実装しています。 WebSocketってなぁに？ httpおさらい Webの通信に使われる皆さんお馴染みのhttpは、クライアント（ブラウザとかね）とサーバが常に「問い合わせ（リクエスト）と返答（レスポンス）」のペアでやりとりをおこないます。 クライアント(FirefoxやChromeなど): 「情報ください」 サーバ(Apacheやnginxなど): 「はい、どうぞ」 このシンプルな仕組みがhttpの強みであり、URLと共にここま
fillText(), strokeText() メソッド - Canvasリファレンス - HTML5.JP
構文 context . fillText(text, x, y [, maxWidth ] ) context . strokeText(text, x, y [, maxWidth ] ) 指定のテキストを指定の位置に、塗りつぶす、または、（個々に）輪郭描画します。最大幅が与えられると、そのテキストは必要に応じてそれにフィットするよう伸縮されるでしょう。 仕様 fillText() と strokeText() メソッドには、 text, x, y そして任意で maxWidth の3つ、もしくは4つの引数を与えます。そして、指定された text が指定された座標 (x, y) にレンダリングされます。もし maxWidth が引数に指定された場合は、それより決して横幅が広くならないようにレンダリングされます。 レンダリングの際には、現在の font, textAlign, textB
HTML5入門－canvasで四角を描く－｜mayy
ようやくcanvasを使ってみました。 基本中の基本、canvas領域に四角形を表示させてみます。 図形を描く領域を用意する まずは図形を描く領域を作ります。 やり方はとても簡単です。 html5のソース内の領域を表示させたいところに以下を追加します。 <canvas id="canvas" width="200" height="200"></canvas> id、width、heightは任意です。 分かりやすくするためにスタイルシートで背景画像を指定して枠線をつけました。 サンプルを見る 図形を描画するための準備 図形を描くにはJavascriptを使います。 以下ソースを書きます。 onload = function(){ canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d');
Node.jsでWebSocketを試してみる - Y's note
Nodejs サーバサイドJavascript。 V8 Javascriptを利用。 シングルスレッドの非同期処理環境。 処理を待たずにcallbackを実行するイベントループ、ノンブロッキングI/Oを実装。 nodejsの設定は簡単。パッケージ化されているし、buildしてもそれほど時間がかからない。 設定 macでinstallしてみる。以下のどちらか一方を行えば設定は可能だがportのversionは0.2.0、buildの最新は0.4.8。post installは少し時間がかかる。 port install $ sudo port install nodejs $ node -v v0.2.0 make install $ fetch http://nodejs.org/dist/node-v0.4.8.tar.gz $ tar -xzf node-v0.4.8.tar.gz $
はじめての共同作業 Canvas編 (node.js + websocket)
こんにちは、中川です。 先月無事に結婚をした開発者が一名おり、近年アシアルでは徐々に既婚者が増えてきている状況です。 ということで、結婚といえば共同作業ですよね。 今までは、一人で作業していて大変なことが色々あったと思いますが、 二人（複数）でやれば、乗り越えられることもあることでしょう。 Webアプリでも最近は、より共同作業がしやすい環境ができつつあるように思います。 そこで、今回はWebSocketを使ったリアルタイム通信でのやり取りを行い、 一緒にお絵描きができるサンプルアプリを作ってみました。 ■■■概要■■■ ・アプリ概要 ・・Canvas + WebSocket ・対応ブラウザ ・・Chrome or Safari (他、WebSocketが使えるブラウザ） ・サーバ側プログラム ・・node.js 0.2.0 ・・express@1.0.0rc2 ・・websocket-se
[javascript] 「node.jsでwebsocketを試してみたんだ。」のまとめ。 | La Thinking Motion.
Socket.IO: the cross-browser WebSocket for realtime apps. node.jsで満足していたんだけど、websocketも試してみたいという欲があって、インストールしてみたときのメモ。 このページを見て完結できるように、ちょっと先日のブログを復唱します。 【かんきょう】 OS：fedora15 node.js：v0.4.8 npm：1.0.10 socket.io：0.6.18 ./node_modules/socket.io 【こうもく】 1. git のインストール 2. nvmのインストール 3. node.js のインストール 4. npm (Node Package Manager) のインストール 5. socket.io のインストール 6. node.js のサンプル（チャットアプリ）を試してみる 7. websocket
WebSocket勉強会公式サイト
開催の目的 HTML5として策定が進められている多様な仕様の中において、WebSocketはWebシステム開発者ならびに Webサービス事業者に熱い注目が集まっている技術です。その理由の一つとしてWebSocketを使うことによって Webブラウザを用いたサービスの可能性が大いに広げられることが期待されるからです。 このようにWebサービスに大きな影響を与えると考えられるWebSocketに特化して、詳細な議論、意見交換を 行うために有識者を招いた勉強会を開催します。 ■Websocket勉強会概要 □日時：2011年5月28日（土） 10:00～18:00 (9:00より会場設営開始、9:30より開場） □場所：株式会社インターネットイニシアティブ会議室 17F http://www.iij.ad.jp/info/outline/index.html □参加費：無料 □参加者定員
WebSocket勉強会
WebSocket Communication 自己紹介 かみやん (Twitter@kamiyam) システム開発会社 ほとんどWebのシステム Java・C#がメイン WebSocketとは？ 今日、何度も出てきたと思いますが、リアルタイムに双方向通信を可能にするプロトコルです。 私のセッションでは難しい話は抜きにしてWebSocketを使ったデモを中心にお送りしたいと思います。 SyncSlide USTREAMをご覧の方も是非!! WebSocketが(現時点で)使えるブラウザは？ PC Chrome4 / Safari5 iPhone / iPad iOS 4.2.1 WebSocket実装状況 ちなみにFireFox4 beta7 / Opera 10.2.0ではWebSocketを利用出来ましたが、FireFox4 / Opera11 ではWebSocketは無効化されていま
WebSocket勉強会のプレゼン資料公開！（事前公開分） - Tomo’s HotLine
お待たせしました、5/28(土）に開催するWebSocket勉強会のプレゼン資料（事前）を一部公開します。 WebSocket勉強会公式サイト ※プレゼン資料は修正、追加があり次第、公式サイトに順次アップします。 なお、講演名をクリックするとプレゼン資料（あるいは講演概要）が現れます。 本番資料は事前公開分から色々と追記/修正がある予定ですので、ご期待願います。
Websocket勉強会は5/28(土）都内で開催！ - Tomo’s HotLine
お待たせしました、以前からお伝えしているWebsocket勉強会を5/28(土）に開催することになりました。講演概要の公開、参加者募集については今週末（5/15あたり）を予定しています。会場は都内の某オフィスの会議室を利用します。もちろん懇親会も行います。 今回も素晴らしい講師陣が揃いましたので是非ご期待下さい。 なお、最近のWebsocket人気に伴い、ミニプレゼン、デモトラックを急遽追加することを考えています。当日会場でミニプレゼンをしてみたい、デモをしたい！という方は@toremoro21 までご連絡願います。 またUST中継をご協力頂ける方も絶賛大募集です。ご協力頂ける方はお手数掛けますが@toremoro21までご連絡願います。
ニコスのキャッシング一括返済は手数料を取られますか？
ニコスのキャッシング一括返済は手数料を取られますか？ 私はいつでもお金を借りられる方法として、ニコスのカードキャッシングを利用しています。キャッシングは先に手続きを済ませておけばいつでも借りる事ができますし、ニコスという信頼性が高いブランドというのも、個人的にはとってもありがたいです。 それでキャッシングを使うと一括返済か分割で払うか選べるわけで、大体の場合は分割がデフォルトになっていますよね？分割すると月々が楽ですが金利手数料などもあって、余裕さえあれば一括にて返していきたいと思っています。今回はその一括返済について、お聞きしたい事があるんです。 一括返済をするときって、別途手数料がありましたっけ？ローンとかの一括返済だと繰り上げ手数料が取られると聞いた事があり、手数料が取られてしまうようならお得にならないとも聞きました。キャッシングといえどローンみたいなものですから、やっぱり手数料はあ
噂のnode.websocket.jsでサーバサイドJSとHTML5 WebSocketを体験してみたの巻 - download_takeshi’s diary
WebSocketを体験してみたいのと、サーバサイドJSを試したいのと、さらにはmac版のChromeをインストールしてみたという条件が重なり、これはもう深夜だけどnode.websocket.jsを試してみるしかないな、という状況に追い込まれました。 構成 最近あたらしく調達したばかりのmacbook air にvirtualboxを入れています。その上でCentOSが動いています。 macbookをクライアントに、CentOS側をサーバとみたてて話を進めていきます。 ちなみに、virtualboxではアダプタ１をNATに、アダプタ2をホストオンリーアダプタ（IPはstaticに設定）としているので、CentOSからは外にも抜けられるしmacbook側からも自由にアクセスできます。ごきげんな環境です。 Node.JSのインストール まずは土台となるnode.jsが必要。ソースをダウンロー
pywebsocketの導入とDraft75フォールバック対応 - Block Rockin’ Codes
[追記] id:Ehren さんが最近のWebSocket事情のまとめ記事を公開されました。 ブラウザの対応関係等わかりやすくて有益です！ 最近のWebSocket事情についてまとめとく - Keep on moving HTML5-hack-a-thonに参加しました。 自分の参加しグループは「ニコニコ動画的なもの」を作ろうと言うことで、 コメントが右から流れてくる 映像にエフェクトがつく コメントやエフェクトがリアルタイムに共有出来る といったような内容でCanvasやWebSocketを使ったアプリを作成しました(未完成でしたが、チームの皆さんお疲れさまでした！) 自分はWebSocket周りを担当したので、その時の備忘録を残します。 WebSocketとは 簡単にいうと、サーバがクライアントに対してpushが出来る技術です。 もっと正確に言えば、これまでのAjax等の通信は基本的に
HTML5－Web Socket
もくじ Web Socketとは Web Socketとは Web Socketとは The Web Sockets APIがブラウザのjavascriptエンジンがサポートすべきWeb Socketの仕様で、 Web Socketサーバとの通信プロトコルである。 Web Socketプロトコルの詳細はIETF draftのThe Web Socket protocolに書かれている しかし、少なくとも現状では素のApacheにはWeb Socketのリクエストをうまくハンドルできない。 コネクションを閉じないことを除いて基本的にHTTPと同じ 平文で通信するデフォルトポート81のws://とSSLで通信するデフォルトポート816のwss://とがある firewall/proxyを通過できる サーバで許可されていればクロスオリジン通信が可能(HTTP access controlではなく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料ホームページ作成 | ホームページの作り方 | Wix.com
https://research.sakura.ad.jp/wp-content/uploads/2011/05/20110528-WebSocket-late.pdf
canvasで↑↓←→ボタンで組み込み画像の移動 - jsdo.it - Share JavaScript, HTML5 and CSS