HTML5のcanvasを使ってみた
マウスイベントのclientXとclientYは、クライアント座標であって、canvasの左上を(0,0)とした座標ではないので、四角形を出現させる位置がずれていた。、offsetTopとoffsetLeftを使って修正したが、これは規格にはない。どうしたものか。 かなりやっつけ仕事。canvas上をクリックすると、どんどん四角形が増えていく。ドラッグすると面白いことになる。回転軸が四角形の中央でないのは仕様。バグだったけど、動きが面白かったので、あえて修正しなかった。 一つだけ気にくわない点がある。いわゆる拡大縮小や回転、移動は、行列で行えるのだが、"The transformations must be performed in reverse order."ってどういう事だ。なぜ逆なんだ。逆にしたら分かりやすくなるとでも思っているのか？ どう考えても混乱するだけだろ。あと、Ident
Inside Web Socket
HTML5関連で、Web Socketが話題になることが増えてきました。 その中で、Web Socketはブラウザで生のTCPが扱えるようになった！いや、違うよ。生のTCPじゃないよ！と言ったことをよく目にします。 lighttpd 1.4.x用のmod_websocketを個人的に作成している為、そういった疑問に対しての参考になりましたら、と。勿論、間違ってたらご指摘ください。(^-^; Web Socketとは ブラウザ(上のJavascript Program)で生のTCPを扱えるように策定されたプロトコルです。 なぜ、そう言うのか、順を追って説明します。(ごめんなさい、やっぱりちょっと修正しておきます) ブラウザがどう動いているのか? まず、Web Socketを利用する際、ブラウザがどのように動いているのかを説明します。また、Web Socketには、ws schemeとwss
めざましTech HTML5 を使ってみよう！＠Opera Japan - jitsu102's blog
HTML5の概要、新機能であるWeb Socketsについての勉強会。 HTML4からHTML5へのライブコーディングやホワイトボードを使用した説明など、解りやすかった。 既存のHTML4とXHTMLは、ほぼHTML5に含まれているので、全てをHTML5化する必要はないようだが、ユーザエージェントのアクセシビリティとかを考えるとHTML5化が必要だと思った。*1 ただ何でもありの感じで適用範囲が広いので、いろいろ混乱しそうだと思った。 (個人的つぶやき) 21:04 終わったなう。今後も勉強会やるよ。 #mez 21:00 pywebsocket http://bit.ly/8DowVt #mez 20:54 Web Sockets protocolは双方向 #mez 20:41 The Web Sockets API http://bit.ly/4zDw51 #mez 20:40
Ruby & WebSockets: TCP for the Browser - igvita.com
By Ilya Grigorik on December 22, 2009 WebSockets are one of the most underappreciated innovations in HTML5. Unlike local storage, canvas, web workers, or even video playback, the benefits of the WebSocket API are not immediately apparent to the end user. In fact, over the course of the past decade we have invented a dozen technologies to solve the problem of asynchronous and bi-directional communi
【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (10) Web Sockets | エンタープライズ | マイコミジャーナル
Web Socketsは、サーバとの双方向通信を実現するための非HTTP通信を、Webアプリケーションから行えるようにするための仕様である。HTTPでは実現が容易でなかった、サーバからのデータプッシュ等をスマートに実現するための技術として、非常に注目されている。 Web SocketsのAPI自体は非常に単純だ。サーバとの通信を確立するには、URL文字列をパラメータとしてWebSocketコンストラクタを呼び出すだけだ。 var ws = new WebSocket("ws://localhost:8005/echo"); URLは「ws」もしくは「wss」(暗号化通信時)というスキーマ文字列で始まる必要がある。設定したURLは、WebSocketオブジェクトのURLプロパティにアクセスすれば取得することができる。 通信を確立したら、サーバとの双方向通信が可能だ。サーバに対してデータを送信
RFC 6455: The WebSocket Protocol
Internet Engineering Task Force (IETF) I. Fette Request for Comments: 6455 Google, Inc. Category: Standards Track A. Melnikov ISSN: 2070-1721 Isode Ltd. December 2011 The WebSocket Protocol Abstract The WebSocket Protocol enables two-way communication between a client running untrusted code in a controlled environment to a remote host that has opted-in to communications from that code. The securit
こてさきAjax:websockets - livedoor Blog（ブログ）
ドワンゴの草野さんが開発し、第６回html5とか勉強会で利用されていた HTML プレゼンテーションツール 『Nerine』が、かなりいけています。 <section>タグが一つのスライドに相当し、一つのhtmlファイルだけをメンテすれば良いという簡便性（このため、ページ切り替えも非常にスムーズです）。更に、CSS3を定義すれば、エフェクトも思いのまま。HTML5/CSS3の知識がある人であれば、非常に手軽に「イケテル」HTMLプレゼンが作れます。更に、カーソルの「上」を押せばインデックスが表示されるし、「A」キーを押せば、アスペクト比を変えれるという、とても気の利いた作りになっています。 デモを絡めたプレゼンをするときに、デモとプレゼンでウィンドウを切り替える操作って結構煩雑です。なので、HTMLでプレゼンを作って、そこにiframeでデモも埋め込んじゃうみたいなスタイルは結構好きだった
Jetty7でWebSocket開発：マピオンラボ(Java)
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>jp.co.mapion.honjo</groupId> <artifactId>aaa</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>aaa Maven Webapp</name> <url>
「Gmail」に新機能--ドラッグ＆ドロップによるファイル添付が可能に
Googleは米国時間4月15日、「Gmail」用に小さいながら便利なアップデート2件を発表した。このアップデートは、同サービスの使用をより簡単にするとともに、同社が無料で提供する「Google Calendar」サービスとの統合を進めることができる。特筆すべき点としては、ともに同社が実験的なサービスを提供する「Google Labs」のセクションをスキップして、ダイレクトに正式版でのサービスが開始されていることが挙げられる。 最初に紹介するアップデートは、ドラッグ＆ドロップによる添付機能で、PCのデスクトップから電子メールメッセージ上にファイルをドラッグするとアップロードが開始される。これはちょうど同社が「Google Wave」で写真や他の種類のメディア向けに導入したシステムと同じように機能する。Google Waveでの機能と同じく、新たなドラッグ＆ドロップによる添付機能を利用するに
SVG vs. Canvas? « HTML5.JP ブログ
先日の HTML5 3Days の Tech Talk で Canvas と SVG の違いを簡単に説明しましたが、これを深く追求してレポートされている方がいらっしゃいましたので紹介します。 2009 年 10 月にカルフォルニアで開催された SVG Open 2009 で、ヘルシンキ大学の Samuli Kaipiainen 氏と Matti Paksula 氏によるプレゼンテーション SVG vs. Canvas on Trivial Drawing Application で、SVG と Canvas の特性の違いや、それらを組み合わせる方法などが解説されています。このプレゼンテーションの内容は、こちらの資料に詳しく説明されています。 このプレゼンテーションを要約すると、次の通りです。 ピクセル描画では Canvas が優れている。SVG でもできないことはないが、ピクセルごとにノー
HTML5のCanvasに欠けているもの：フレームワーク － ＠IT
OSSプロジェクトのホスティングサイト「GitHub.com」では、Flashで実装されていた一部のUIをCanvasに移行したという HTML5のCanvasとFlashの最大の違いは、アニメーションなどを行うために利用できる抽象レベルだ――。こう指摘するのは、Gitベースのコードホスティングサービス「GitHub.com」の共同創業者、Tom Preston-Werner氏だ（ちなみにWerner氏はマイクロソフトに買収された検索ベンチャー「Powerset」の元社員で、買収直後に“サラリー以外に3年間で30万ドル（約2770万円）”というおいしいオファーを断ってまでGitHub.comのフルタイム開発の道を選んだことでも知られている）。 Flashで書かれた一部のUIを全面的にCanvasで書き直した経験からWerner氏は、Canvasにはまだ抽象度の高いフレーワムワークが欠けてい
SketchPadを見ずしてHTML5を語るなかれ － ＠IT
2010/02/10 鳴り物入りで発表されたアップルのタブレット型デバイス「iPad」がFlash非対応であったため、Flashを巡る論争がホットだ。iPad発表直後の1月29日にはアドビの幹部が「iPadユーザーは多くのWebコンテンツにアクセスできない」と批判。一方、アップルのスティーブ・ジョブズCEOは、FlashはバギーでMacがクラッシュする大きな原因になっているから採用しないと語ったと伝えられている。「Flashなんて将来誰も使わなくなる。世界はHTML5に向かって動いている」とも言ったという。 有力ブロガーで元マイクロソフト社員のロバート・スコーブル氏が書いた「Flashは生き残れるのか」と題するエントリには200を超えるコメントがつき、激論となるなど多様な論点が噴出している。根底にある論点は、 HTML5にはFlashを置き換えるポテンシャルがあるか Web体験にブラウザ以
IO 9elements
Our company's top wizards, stuntmen, and industry experts offer their best advice, how-tos, and insights - all in the name of shockingly good code & design. Building a Rock Solid Auto GridExplore a customizable CSS auto-grid layout in our latest post. Adjust column widths, gaps, and max column count for flexible web designs. Ideal for any web project. Hosting a ComfyUI Workflow via APIBasic WebSoc
progress.from.tv » HTML5 「Web Workers」でマルチスレッドプログラミング
以前の記事「JavaScriptのマルチスレッド（？）はマルチコアの恩恵を受けるのか？」で現在主流のブラウザ(HTML4)のJavaScriptでは、マルチスレッドプログラミングを行うことができないという結論に至りました。 ただし、現在主流のブラウザではマルチスレッドプログラミングが行えないだけであって、次のバージョンであるHTML5からは、ちゃんとマルチスレッドプログラミングを行うことができます。 それは、HTML5で追加される「Web Workers」という機能を使用することで実現できます。 今回は、本日(6月9日)に正式リリースされたばかりの、HTML5をサポートする「Safari 4」を使用して、Web Workersを使用したマルチスレッドプログラミングを行って、マルチコアによるパフォーマンス向上の恩恵を受けるかどうか、実験で確かめてみようと思います。 さっそくサンプルコード 百
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+clockmaker+%28ClockMaker+Blog%29
アップルの新デバイス iPad が Flash に対応していないことや、アップルの CEO スティーブ・ジョブズ氏の苦言により、HTML5 は Flash に取って代わるのかという論議が現実味を帯びて論じられるようになりました。 「なぜAppleはiPadにFlashを載せるべきではない」のか AdobeのCTO、Kevin LynchがFlashを擁護―「HTML5はウェブビデオを暗黒時代に投げ戻す」 そこで、HTML 5 と Flash は何が違うのか両者の違いを図にまとめてみました。 (上の画像はクリックで拡大できます) 左側が HTML5 にしかない機能、右側が Flash にしかない機能で、中央の重なっているところが両方が利用できる機能です。グラフィック関係では、HTML5 では描画やビデオ関係はサポートするものの、テキスト周りや高度なグラフィック処理、デバイス機能ではまだ Fl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デブサミ2010のベストスピーカー賞は 「次世代Web標準 HTML5 最新動向」のセッションが獲得
SVG OPEN
TechCrunch | Startup and Technology News
freeml（フリーエムエル）｜新しい生活をはじめる羅針盤