Y.A.M の雑記帳: HTML5

ラベル HTML5 の投稿を表示しています。すべての投稿を表示

2011年10月31日月曜日

Bootcamp 2011 に行ってきました。

Bootcamp 2011 Japan

今年は去年と違って、土曜日開催（去年は平日） & Google Japan の六本木オフィスで行えたこともあって、たくさんの参加者に来ていただけました。よかった、よかった。

ハッシュタグは #bc2011jp です。

@Fumi さんが Togetter にまとめてくれました。
GTUG Bootcamp 2011 #bc2011jp - Togetter -

Barエリアで松尾さんに App Engine について熱く語ると App Engine Tシャツがもらえましたー。

セッションの資料、後でチェックしなきゃ。

■ セッション：「Fragment を使ってみよう」（あんざいゆき）
資料

■セッション：「Google SketchUp　モデリングの初歩」 = 初めてでも簡単、3次元の世界 =
（田中雅子、株式会社アルファコックス　CTO）

■セッション：「はじめての Chrome Extension」（吉川徹）
資料

■セッション：「App Engine 倹約のすゝめ」（小川信一）

■ハンズオン：「新聞風の1ページを作ってみよう！」（一條美和子）
資料

■ハンズオン：Google Apps Script （中村敦）
資料1 資料2 資料3

■ハンズオン：「Spike WebView & Tough ICS」（江川　崇）
資料

■ハンズオン：Google+ API の体験と Hangouts の紹介（田中洋一郎、伊藤千光、中嶋信博）
資料参考ブログ

2010年9月12日日曜日

HTML5　canvas上のイベントの位置を取得する

イベントの位置を

　var x = event.clientX ;
　var y = event.clientY ;

でとると、ウインドウのドキュメントを表示している部分の
左上が原点になるので、スクロールするとずれてしまいます。
それに、canvas の左上からの相対座標になりません。
なので、

　canvasOffsetX = canvas.offsetLeft;
　canvasOffsetY = canvas.offsetTop;
　var x = event.clientX - canvasOffsetX;
　var y = event.clientY - canvasOffsetY;

としたのですが、これだと一番上までスクロールしている
状態ならOKですが、下にスクロールするとずれてしまいます。
それで、次に

　canvasOffsetX = canvas.offsetLeft;
　canvasOffsetY = canvas.offsetTop;
　var x = event.pageX - canvasOffsetX;
　var y = event.pageY - canvasOffsetY;

とすると、スクロールしてもOKになりました。
ただし、pageX/pageYはW3C規格では定義されていないし、IEではサポートされていないそうです。
(IE以外の主要なブラウザすべてでサポートされているらしい）

で、"本の虫: DOM level 3のマウスイベントにおけるカーソル位置の詳細"
を参考にさせていただいて、こうなりました。ありがとうございます。

　var rect = event.target.getBoundingClientRect() ;
　var x = event.clientX - rect.left;
　var y = event.clientY - rect.top;

　

2010年9月11日土曜日

HTML5　canvas でピクセル処理

canvas の各ピクセルに対して処理を行って、さまざまなエフェクトを実現するには、

　getImageData(x0,y0,x1,y1)

を使います。
例えば、
　var image = ctx.getImageData(0,0,w,h);

とした場合、image にはピクセル単位の集合体がオブジェクトとなったもの（イメージデータ）が返ってきます。
このオブジェクトは、「data」というプロパティを持っていて、ここでピクセルデータを保持しています。

「data」プロパティの配列には、各ピクセルのRGBAデータが

　{R, G, B, A, R, G, B, A, ...}

の順番で格納されています。(R = Red, G = Greed, B = Blue, A = Alpha)
これがピクセル分だけ続きます。つまり配列の要素数はピクセル数 x 4 になります。

例えば、Alpha を徐々に変化させる場合はこんな感じ


  var canvas = document.getElementById('canvas');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  ctx = canvas.getContext("2d");

  var w = canvas.width;
  var h = canvas.height;

  ctx.fillStyle = 'rgb(224, 224, 240)';
  ctx.fillRect(0,0,w,h);

  var step = 265 / (h * 1.5);

  var image = ctx.getImageData(0,0,w,h);  
  for(var i=3; i<image.data.length ; i+=4) {  
      var alpha = 255 - ((i/4/h) * step);
      if(alpha < 0) alpha = 0;
      image.data[i] = alpha;
  } 
  ctx.clearRect(0,0,w,h);
  ctx.putImageData(image,0,0);

モノクロ（monochrome）はこんな感じ


  var canvas = document.getElementById('canvas');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  ctx = canvas.getContext("2d");

  var w = canvas.width;
  var h = canvas.height;

  ctx.drawImage(canvas, 0, 0);
  var image = ctx.getImageData(0,0,w,h);
  var i = image.data.length;
 
  for(var y = h; y>0; y--){
    for(var x = w; x>0; x--){
      i -= 4;
      var c = 0.298912 * image.data[i] + 0.586611 * image.data[i+1] + 0.114478 * image.data[i+2];
      image.data[i] = image.data[i+1] = image.data[i+2] = parseInt(c);
    }
  }
  ctx.clearRect(0,0,w,h);
  ctx.putImageData(image,0,0);

HTML5　canvas の注意点？？

めもめも

1.　Canvas要素に対して、JavaScript のコーディングが誤っている場合、ブラウザによって行う対処が異なるため、それぞれ違った結果になることがある。

2.　ビットマップ操作は重い処理なので、高い解像度におけるアニメーション処理などは注意が必要。できるだけピクセルを使い回して、必要な部分だけを書き換える。つまり、必要なピクセルだけをclearRect(x,y,w,h)でクリアして再描画する。

3.　saveとrestoreという2つの方法で一旦状態を保存し、保存した状態からトランスフォーム処理（回転やスケーリング）を実施することで複数のトランスフォーム処理が実施できる。

4.　コンポージットモードを使って、マスクやレイヤの機能を実現できる。

5.　Canvasの幅と高さを設定すると、たとえ現在の長さと同一である場合でもCanvasはリセットされる。つまりCanvasのサイズを変更すると中身が消えてしまう。

参照先 : http://ajaxian.com/archives/real-world-canvas-tips via http://journal.mycom.co.jp/articles/2010/08/26/html5-canvas-thoughts-from-flash/index.html

　

2010年9月9日木曜日

HTML5 はじめました。

はじめまして HTML5

いままでほっといてごめんね

まずはここからだよね
HTML5.jp

タグリファレンス | HTML5.jp

■ Canvas

　HTML5 と言えばなんといっても Canvas!

　Canvasとは | HTML5.jp

　"Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。"

　ほぉー。知らなかった。

　"Canvasに関しては、Safari1.3以降、Opera9以降、Firefox1.5以降ですでに実装されています。"

　ふむ。

　"もっともブラウザシェアが高いInternet ExplorerはCanvasに対応していません。"
　"GoogleがExplorerCanvasというJavaScriptライブラリを公開"
　"ExplorerCanvasは、Internet ExplorerでCanvasをエミュレートするJavaScriptライブラリ"
　"ExplorerCanvasは、Internet Explorer 6以上で動作"

　これを使うと、あたかも Internet Explorer に Canvasが実装されて
　いるかのようにすることができるようになるのね。

　"Canvasの仕様には、アニメーションのメソッドがありません。もしアニメーションを実現したい場合は、一コマずつ、図を描きなおすという処理を繰り返さなければいけません。"

　はい。

　● ツール

　　リアルタイムにコード結果をみれる

　　　http://jsdo.it/

　　を使いました。

　　　http://www.rendur.com/
　　
　　でもできるのかな？？

　● 書いてみる

　　Canvasの使い方 | HTML5.jp

　　Canvasリファレンス | HTML5.jp

　　★ 図形の描画


  /* 2Dコンテキスト */
  var ctx = canvas.getContext('2d');

  /* パスの開始 */
  ctx.beginPath();

  /* 移動 */
  ctx.moveTo(x, y);

  /* 線を描画 */
  ctx.lineTo(x, y);

  /* パスを閉じる */
  ctx.closePath();

  /* 枠線を描画 */
  ctx.stroke();

  /* 塗りつぶし */
  ctx.fill();

  /* 矩形を描画 */
  ctx.rect(x1, y1, x2, y2);

　/* 円弧を描画: 0[rad] は x座標 */
  ctx.arc(x, y, radius, startAngle[rad], endAngle[rad], anticlockwise[true/false]);

  /* 二次曲線 */
  ctx.quadraticCurveTo(x1, y1, x2, y2);

  /* ベジェ曲線 */
  bezierCurveTo(x1, y1, x2, y2);

  /* 塗りつぶした矩形 */
  ctx.fillRect(x, y, width, height)

  /* 枠線のみの矩形 */
  ctx.strokeRect(x, y, width, height)

　/* 矩形を削除 : 削除された部分は透明になる */
  ctx.clearRect(x, y, width, height)

　　★ 色の指定


  /* 枠線の色を指定 : CSSで指定するフォーマットに対応 */
  ctx.strokeStyle = color

  /* 塗りつぶす色を指定 : CSSで指定するフォーマットに対応 */
  ctx.fillStyle = color

  /* 例  rgb(int red, int green, int blue) */
  ctx.fillStyle = 'rgb(192, 80, 77)';

  /* アルファ（透明度）を指定する */
  /* rgba(int red, int green, int blue, int alpha) */
  /* alpha : [0-1]  0:透明  1:不透明 */
  ctx.fillStyle = 'rgba(192, 80, 77, 0.7)';

  /* Canvas上で合成される前に図形や画像に適用するためのアルファ値をセット */
  ctx.globalAlpha = 0.7;

globalAlpha の使い方


  var ctx = canvas.getContext('2d');

  /* 半透明度を指定 */
  ctx.globalAlpha = 0.7;

  /* 円 */
  ctx.beginPath();
  ctx.fillStyle = 'rgb(192, 80, 77)'; // 赤
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);
  ctx.fill();
  /* 矩形 */
  ctx.beginPath();
  ctx.fillStyle = 'rgb(155, 187, 89)'; // 緑
  ctx.rect(20, 20, 50, 50);
  ctx.fill();

　　★ 線の幅を変える


  /* 線の幅を変える */
  ctx.lineWidth(width);

　　★ 線形グラデーションの指定


　　CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1);
　　CanvasGradient.addColorStop(offset, color);

　　createLinearGradient(x0, y0, x1, y1)
　　　　x0, y0 : グラデーションの開始地点
　　　　x1, y1 : グラデーションの終了地点

　　addColorStop(offset, color)
　　　　グラデーション全体から見たoffsetの地点で、新たな終点セットする

　　　　例外 :
　　　　offsetが0未満または1より大きい値の場合: INDEX_SIZE_ERR例外

　　　　colorがCSS色として構文解析できない場合: SYNTAX_ERR例外

　　注意: Safari 2.0の場合、fillRectメソッドで描画される図形には
　　　　　グラデーションが効かないという問題があるそうです。
　　　　　なので、x fillRect() o drawRect() + fill()

　　★ 円形グラデーションの指定

　　
　　anvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
　　anvasGradient.addColorStop(offset, color);

　　
　　createRadialGradient(x0, y0, r0, x1, y1, r1)
　　　　x0, y0 : 1つ目の円の中心座標
　　　　r0 : 1つ目の円の半径
　　　　x1, y1 : 2つ目の円の中心座標
　　　　r1 : 2つ目の円の半径
　　

　　★ 画像を組み込む

　　ctx.drawImage(image, dx, dy)
　　　image に格納されたImageオブジェクトを描画

　　　dx, dy : 左上端

　　ctx.drawImage(image, dx, dy, dw, dh)
　　　image に格納されたImageオブジェクトを dw x dh に伸縮して描画

　　　dx, dy : 左上端
　　　dw, dh : 横幅、縦幅

　　ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
　　　image に格納されたImageオブジェクトを、トリミング＆伸縮して描画

　　　sx, sy : トリミング開始位置
　　　sw, sh : トリミング横幅、縦幅
　　　dx, dy : 左上端
　　　dw, dh : 横幅、縦幅

　　　！drawImageメソッドを呼び出す前に、画像のロードが
　　　　完了するようにしなければいけない


  var ctx = canvas.getContext('2d');
  /* Imageオブジェクトを生成 */
  var img = new Image();
  img.src = "image2.gif?" + new Date().getTime(); /* for IE */
  /* 画像が読み込まれるのを待ってから処理を続行 */
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  }

　　★ 変形

　　・scale()

　　・rotate()

　　・translate()

　　・transform()

　　・setTransform()

■ 関連サイト＆資料

・http://www.slideshare.net/myakura/html5-web-platform

・HTML5 Japanese Interest Group

・HTML5の機能を知るための15のデモンストレーション

・これは見ておくべきHTML5のCanvasを使ったデモ集:phpspot開発日誌

・http://9elements.com/io/projects/html5/canvas/

・Mozilla Developer Network

・「A Basic RayCaster」

・Puzzles using Canvas

・Canvascape - "3D Walker"

・Apple - HTML5 and web standars

・[html5] - 超自己満足プログラミング -

・Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies |　caniuse.com

■ GTUG での HTML5 セッションのときのメモ（いつのか忘れちゃった ><）

　● HTML5 の特徴

　　・セマンティックな構造化言語へと進化
　　・フォーム機能の大幅な強化
　　・Web アプリケーション開発向け機能の強化

　● セマンティックってなに？

　　HTML5では情報を構造化するための新しい要素や属性が追加されている。

　　例えば、以下の要素などが挙げられる。
　　　・文章などのセクションを定義する「section 要素」
　　　・ヘッダエリアを定義する「header 要素」
　　　・フッタエリアを定義する「footer 要素」
　　　・ナビゲーションエリアを定義する「nav 要素」

　● フォーム機能の大幅な強化

　　HTML5では、問い合わせや商品購入などでユーザーが情報を
　　入力する際に用いるフォーム機能が、大幅に強化されている。

　　例えば、以下のような強化点が挙げられる。
　　　・必須入力フィールドかどうかを指定することができる「required 属性」
　　　・未入力のテキストフィールドに、文字入力の手助けとなる文字列を
　　　　あらかじめ表示できる「placeholder 属性」
　　　・入力を開始する箇所を自動的にフォーカスすることができる
　　　　「autofocus 属性」

■メモ

　・noVNC | github
　
　・http://www.hunlock.com/

　・http://www.akibahideki.com/blog/html5-canvas/

　・HTML5 Canvas Cheat Sheet

　・HTML5 Gallery | A showcase of sites using HTML5 markup

　・Dive Into HTML5

　・HTML5 Canvas and Audio Experiment

　・HTML 5 Cheat Sheet

　・Modernizr

　・jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas
　
　・70 Must-Have CSS3 and HTML5 Tutorials and Resources | Web Resources | WebAppers

　

2010年5月24日月曜日

Google I/O のメモ