2014年07月30日

WebRTCで通信を中断させる

WebRTCで通信を中断させる方法。ストリームの送信側のRTCPeerConnectionオブジェクトからlocalStreamを取り出し、removeStream()を利用してストリームを取り出します。そうすると送信先のストリームオブジェクトにメディアストリームが除かれる形になり、addStream()でストリームを復元することができる。

var localStream = peer.getLocalStreams()[0];
$(".stop").click(function(){
peer.removeStream(localstream);
});
$(".start").click(function(){
peer.addStream(localstream);
});
タグ:WebRTC HTML5
posted by ねこまんま at 14:35 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2014年07月17日

Socket.IOでクライアントサイドのデバッグを行う

Socket.IOでのデバッグが以外と面倒臭かったのでメモ書き。

以下のようにsocket.on()のコールバック関数内でエラーが出ても、JavaScriptコンソール内にエラーが表示されない。謎にSocket.IOが新しいコネクションを張ります。

socket.on('fuga', function (data) {
//ここでJavaScriptエラー
});


ソースコード中に以下のようにlocalStorage.debugに*を入れておくとコンソール上に様々な情報が表示されるようになる。

localStorage.debug = '*';


ただ、表示されるログは非常に多いので以下のようにすると絞り込むことができる。(ただ、まだ多い)

localStorage.debug = 'socket.io-client:socket';


これにどのコールバック関数でエラーが出ているか、どのようなエラーが出ているかが含まれているのでそれを参考にデバッグ。行数とか教えてくれないので想像力をかなり働かせなくてはエラーが見つけられないので注意。
タグ:socket.io
posted by ねこまんま at 15:08 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2014年07月04日

video要素の内容をcanvasを使って画像に変換する

次のような感じでvideo要素の内容をcanvasに変換してからData URIに変換する

var getVideoCapture = function(video){
var canvas = document.createElement("canvas");
canvas.width = video.width;
canvas.height = video.height;
var context = canvas.getContext("2d");
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var getVideoCaptureURL = canvas.toDataURL();
delete canvas;
return getVideoCaptureURL;
}
posted by ねこまんま at 16:32 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年09月07日

ブラウザのオートコンプリート機能をOFFにする

ブラウザのオートコンプリート機能をOFFにする方法。autocomplete属性にoffを設定する。

<input type="text" autocomplete="off" />


参考:ブラウザのオートコンプリート機能を無効 - ぷろぐらまさんの忘れないようにメモ書き
タグ:AutoComplete
posted by ねこまんま at 19:29 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年05月06日

HTML5のcanvasで円グラフを描画

HTML5のcanvasで円グラフを描画を描画する方法

window.onload = function(){
var imgcanvas = document.getElementById("imgcanvas");
if (imgcanvas.getContext){
var ctx = imgcanvas.getContext("2d");
var xPos = imgcanvas.offsetWidth / 2;
var yPos = imgcanvas.offsetHeight / 2;
var radius = 80;
var sAngle = 0;
var eAngle = 0;
sAngle = ( 0 - 90) * Math.PI / 180;
eAngle = (120 - 90) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(xPos , yPos);
ctx.arc(xPos, yPos, radius, sAngle, eAngle, false);
ctx.closePath();
ctx.fillStyle = "rgba(255,0,0,.5)";
ctx.fill();
}
};
タグ:HTML5 Canvas
posted by ねこまんま at 17:42 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年04月13日

条件付きコメントでIE対応を簡単にする

コピペで使えるシリーズ

<!DOCTYPE html>
<!--[if lt IE 7]> <html dir="ltr" lang="ja" class="no-js ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <html dir="ltr" lang="ja" class="no-js ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <html dir="ltr" lang="ja" class="no-js ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <html dir="ltr" lang="ja" class="no-js ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <html dir="ltr" lang="ja" class="no-js"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
<head>


こうやっておくとIE対応が楽になる

さらにModernizrとかも合わせて使うといいかも
posted by ねこまんま at 23:48 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年03月17日

複数のオブジェクトをアニメーション

複数のオブジェクトをアニメーションさせるには各種情報を配列に格納しておき処理を行う。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var balls = [];
var tempAngle,tempRadian,tempSpeed;
function rdm(max,min){
return Math.floor(Math.random()*(max-min))+min;
}
for(var i=0;i<10;i++){
tempAngle = rdm(0,360);
tempRadian = tempAngle*Math.PI/180;
temSpeed = rdm(1,50);
balls.push({
speed : temSpeed,
angle : tempAngle,
radian : tempRadian,
x:rdm(1,500),
y:rdm(1,500),
moveX:Math.cos(tempRadian)*temSpeed,
moveY:Math.sin(tempRadian)*temSpeed
});
}
function updateAngle(ball){
ball.radians = ball.angle * Math.PI / 180;
ball.moveX = Math.cos(ball.radians)*ball.speed;
ball.moveY = Math.sin(ball.radians)*ball.speed;
}
setTimeout(function(){
ctx.clearRect(0,0,500,500);
for(var i=0;i<10;i++){
ball = balls[i];
ctx.fillRect(ball.x,ball.y,50,50);
ball.x += ball.moveX;
ball.y += ball.moveY;
if(ball.x+10>400 || ball.x<0){
ball.angle = 180-ball.angle;
updateAngle(ball);
}
if(ball.y+10>400 || ball.y<0){
ball.angle = 360-ball.angle;
updateAngle(ball);
}
}
setTimeout(arguments.callee, 20);
},1);​


サンプル

HTML5 canvas 入門
posted by ねこまんま at 21:30 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

canvasの基本-円の描画-

Canvasで円を描画するにはarcメソッドとstrokeメソッドを利用します。arcメソッドで円を設定しstrokメソッドで実際に円を描画します。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI*2, false,false);
ctx.stroke();​


arcメソッドは第1引数から中心のX座標、Y座標、円の半径、開始の角度、終了の角度、時計回りで描画するかどうかが設定できます。

サンプル

角度を変更することで円弧も描画できます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI*1.5, false,false);
ctx.stroke();​


サンプル

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI*2, false,false);
ctx.stroke();
ctx.arc(200, 200, 50, 0, Math.PI*2, false,false);
ctx.stroke();


2つの円を書こうと上記のように設定するのは間違いです。1つめの円を書き始める前にbeginPathメソッドを利用して新たなパスを設定します。そしてstrokeメソッドは最後にするだけで良いです。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 100, 50, 0, Math.PI*2, false,false);
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI*2, false,false);
ctx.stroke();


サンプル

beginPathメソッドで初めfillメソッドを利用することで塗りつぶして描画することも可能です。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI*1.5, false,false);
ctx.fill();​


サンプル

HTML5 canvas 入門
posted by ねこまんま at 20:22 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

Canvsアニメーションで反射を制御する

単純なアニメーションの反射ではなく、角度をもったアニメーションで反射を制御する為には反射角の法則を利用します。入射角と反射角は等しくなるので壁と反射したタイミングで角度の変更を行ないます。左右の壁とぶつかった場合は現在の180度から現在の角度を引いた角度を、天上と床に反射した際には360度から現在の角度を引いたものを新しい角度としてアニメーションさせます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var speed=3;
var start = {x:0,y:0};
var point = {x:0,y:0};
var angle = 40;
var radians,moveX,moveY;
updateAngle();
function updateAngle(){
radians = angle * Math.PI / 180;
moveX = Math.cos(radians)*speed;
moveY = Math.sin(radians)*speed;
}
setTimeout(function(){
ctx.clearRect(0,0,500,500);
ctx.fillRect(point.x,point.y,50,50);
point.x += moveX;
point.y += moveY;
if(point.x+50>400 || point.x<0){
angle = 180-angle;
updateAngle();
}
if(point.y+50>400 || point.y<0){
angle = 360-angle;
updateAngle();
}
setTimeout(arguments.callee, 20);
},1);​


サンプル

HTML5 canvas 入門一覧
タグ:Canvas
posted by ねこまんま at 14:24 | Comment(1) | TrackBack(0) | HTML5 | 更新情報をチェックする

Canvasで特定の角度にアニメーション

特定の角度にアニメーションする場合は数式で移動距離を算出します。JavaScriptでは角度は「度」ではなく「ラジアン」で取り扱うためラジアン値に変換しコサインとサインを利用してXとYそれぞれの移動距離を算出します。

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

var speed=3;
var start = {x:0,y:0};
var point = {x:0,y:0};
var angle = 45;
var radians = angle * Math.PI / 180;
var moveX = Math.cos(radians)*speed;
var moveY = Math.sin(radians)*speed;

setTimeout(function(){
ctx.clearRect(0,0,500,500);
ctx.fillRect(point.x,point.y,100,100);
point.x += moveX;
point.y += moveY;
setTimeout(arguments.callee, 20);
},1);​


サンプル

あとは移動距離に応じて描画をおこなっていきます。

HTML5 canvas 入門
タグ:HTML5 Canvas
posted by ねこまんま at 13:50 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年03月01日

canvasで色を変更

canvasコンテキストには色を制御するfillStyleプロパティとstrokeStyleプロパティが用意されています。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(155, 187, 89)';
ctx.fillRect(25,25,100,100);
ctx.strokeStyle = '#ff0000';
ctx.strokeRect(225,225,100,100);


それぞれ、プロパティに値を設定後fillRectやstrokeRectメソッドで描画したオブジェクトに色が反映されています。色にはCSSと同じ値がりようできます。

サンプル

HTML5 canvas 入門一覧
posted by ねこまんま at 08:44 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年02月29日

canvasアニメーションで跳ね返りを表現する

canvasアニメーションで跳ね返りを表現するspeedを変数に格納しておき特定のタイミングで切り替えることで跳ね返りを表現することができる。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var i=0,speed=4;
setTimeout(function(){
if(i>400){
speed=-4;
}else if(i<0){
speed=4;
}
ctx.clearRect(0,0,500,500);
ctx.fillRect(i,0,100,100);
i += speed;
setTimeout(arguments.callee, 20);
},1);​


サンプル

XだけでなくYも合わせて指定するとよりリアルなアニメーションになる。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x=0,y=0,speedX=4,speedY=3;
setTimeout(function(){
if(x>400 || x<0){
speedX = speedX*-1;
}
if(y>400 || y<0){
speedY = speedY*-1;
}
ctx.clearRect(0,0,500,500);
ctx.fillRect(x,y,100,100);
x += speedX;
y += speedY;
setTimeout(arguments.callee, 20);
},1);​


サンプル

オブジェクトの数を増やしてランダム性をだすと結構良い感じになります。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var speedX = [],speedY=[],x=[],y=[]
var flag = 1,flag2 = 1;
for(var i=0 ;i<100 ; i++){
flag2 = flag2*-1;
if(i>50){
flag = -1
}else{
flag = 1;
}
speedX[i] = Math.random() * 5*flag;
speedY[i] = Math.random() * 5*flag2;
x[i] = 245;
y[i] = 245;
}
setTimeout(function() {
ctx.clearRect(0, 0, 500, 500);
for(var i=0 ;i<100 ; i++){
if (x[i] > 500 || x[i] < 0) {
speedX[i] = speedX[i] * -1;
}
if (y[i] > 500 || y[i] < 0) {
speedY[i] = speedY[i] * -1;
}
ctx.fillRect(x[i], y[i], 5, 5);
x[i] += speedX[i];
y[i] += speedY[i];
}
setTimeout(arguments.callee, 20);
}, 1);​


サンプル
タグ:Canvas HTML5
posted by ねこまんま at 23:59 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

canvasで簡単なアニメーション

canvasで簡単なアニメーションを作成するには描画とclearRectによる初期化を繰り返して行ないます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var i=0;
setTimeout(function(){
ctx.clearRect(0,0,500,500);
ctx.fillRect(i,0,100,100);
i += 4;
setTimeout(arguments.callee, 20);
},1);​


サンプル

HTML5 canvas 入門
posted by ねこまんま at 01:46 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年02月24日

複数画象のプリロード

canvasで画象を描画する際には画象をプリロードしておかなくはいけません。

複数の場合は次のようにすると良いでしょう。

var i=0;
var imgObj1 = new Image();
imgObj1.src = "http://k.yimg.jp/images/top/sp/logo.gif";
imgObj1.onload = function(){
i++;
}
var imgObj2 = new Image();
imgObj2.src = "http://cdn.www.st-hatena.com/images/logo_portal_hatena.gif";
imgObj2.onload = function(){
i++;
}
var imgObj3 = new Image();
imgObj3.src = "http://www.nttdocomo.co.jp/images/header/logo.gif";
imgObj3.onload = function(){
i++;
}
setTimeout(function(){
if(i==3){
//canvasの描画
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(imgObj1, 100, 100);
ctx.drawImage(imgObj2, 300, 100);
ctx.drawImage(imgObj3, 400, 100);
}else{
setTimeout(arguments.callee, 100);
}
},1)();


サンプル
posted by ねこまんま at 01:24 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2012年02月23日

canvasの基本-画象の描画-

canvasで画象を描画するにはdrawImageメソッドを利用します。引数の数により動作が異なります。

ctx.drawImage(image, dx, dy)


3つの場合は最初にimageオブジェクト、描画するx座標、描画するy座標の順に指定します

ctx.drawImage(image, dx, dy, dw, dh)


5つの場合は更に画象の幅と高さをしていできます。

ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)


7つの場合はimageオブジェクトの次に画象のトリミング位置を指定して、次に画象の描画位置を指定します。


drawImageメソッドは画象の読み込みが終了していないと何も描画されません。そこで次のようにimgオブジェクトを生成しプリロードしてからloadイベント後にcanvasの描画を行ないます。

var imgObj =  new Image();
imgObj.src = "http://k.yimg.jp/images/top/sp/logo.gif"
imgObj.onload = function(){
//canvasの描画
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(imgObj, 100, 100)
}


サンプル

HTML5 canvas 入門一覧
posted by ねこまんま at 21:38 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

canvasの基本-描画の削除-

描画された状態をクリアできるのがclearRectです。

ctx.clearRect(45,45,60,60);


fillRectなどの描画系のメソッドで描画された状態を消すことが可能です。

サンプル

引数には他の四角形描画メソッドと同じくX座標、Y座標、横幅、高さの値をとることができます。

clearRectメソッドは後述するcanvasによるアニメーションの描画に深く関わってきます。canvasでは一度おこなった描画を消すことができないため、clearRectで消して少しズラして描画を繰り返してアニメーションを表現するためです。

HTML5 canvas 入門一覧
posted by ねこまんま at 21:02 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

canvasの基本-四角形の描画-

canvasの基本はHTML文章中にcanvas要素を配置することから始まります。

​<canvas width="500" height="500" id="canvas"></canvas>​​​​


idth属性やheight属性を省略すると一部のブラウザで正常にレンダリングできなくりますので忘れずに設定しましょう。

次はJavaScriptでcanvas要素を取得し、getContextメソッドを利用してcanavsオブジェクトを取得します。

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


getContextメソッドの引数には2dしかありませんが、今後3dなどがされるかもしれません。

まずは四角形を書いてみましょう。四角形の描画にはfillRectメソッドとstrokeRectメソッドが準備されています。

ctx.fillRect(25,25,100,100);


fillRectメソッドでは塗りつぶされた四角形を書くことができます。

ctx.strokeRect(250,250,100,100);


clearRectメソッドは線のみの四角形を書くことができます。

それぞれ第一引数からX座標、Y座標、横幅、高さの値をとることができます。

サンプル

HTML5 canvas 入門一覧
posted by ねこまんま at 20:39 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

HTML5 canvas 入門

HTML5で策定されているcanvasの入門コンテンツです。

タグ:HTML5 Canvas
posted by ねこまんま at 20:22 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2011年10月24日

HTML5のvideo要素とFlashのswfを切り分けて表示する

HTML5のvideo要素に対応しているブラウザではvideo要素を利用して、対応していないブラウザではFlash のswfオブジェクトを表示するJavaScript。

try { 
var v = document.createElement("video");
if (v && v.canPlayType &&
v.canPlayType("video/mp4").match(/^(probably|maybe)$/i)) {
$("object.movie01").hide();
}else{
$("video.movie01").hide();
}
} catch (e) {
$("video.movie01").hide();
}


object要素とvideo要素に適当なclass属性を振っておき、表示・非表示で切り分ける。video要素に対応しているブラウザは生成したvideo要素がcanPlayTypeメソッドを持つのでtry...catchで対応しているかどうかを切り分けます、canPlayTypeメソッドでは再生できるファイルが確認できますので利用するファイルが再生出来るか確認しましょう。再生できる場合はvide要素を、再生できない場合はobject要素を表示します。
posted by ねこまんま at 13:20 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2011年08月27日

IEなどでHTML5を利用するためのスクリプト

IEなどでHTML5の新要素を利用するには次のようなスクリプトを実行

<!--[if lt IE 9]><script>
var html5_elements = ["header", "footer", "nav"];
for (var i = 0, len = html5_elements.length; i < len; i++){
document.createElement(html5_elements[i]);
}
</script><![endif]-->


html5_elements には理由したいHTML5要素を入れておきましょう
タグ:IE HTML5
posted by ねこまんま at 04:50 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2011年06月06日

HTML5のruby要素でルビ表示

HTML5でルビ表示する方法

<ruby>藁<rp>(</rp><rt>わら</rt><rp>)</rp></ruby>


ruby要素でつつみ、ルビはrt要素内に記述する。ruby要素に対応してないブラウザ向けにrp要素で括弧などを補足してあげる。

仕様としてはもっと複雑怪奇らしいけどとりあえずはこれで。

ちなみにAndroid2.1は対応してない
タグ:ruby RP RT HTML5
posted by ねこまんま at 21:59 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2010年12月14日

Web StorageのsessionStorage

HTML5のWeb StorageにはlocalStorage以外にsessionStorageが用意されている。

if(!sessionStorage.username){
sessionStorage.username = "John";
alert("セット");
}else{
alert(sessionStorage.username);
}


Session Storageは、セッション内で一時的にデータ保存しておくいわばcookieの拡張版といった感じです。

参考:Storage
posted by ねこまんま at 08:34 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2010年11月23日

WebSocket(ウェブソケット)

WebSocketはW3CとIETFが策定しているサーバとクライアントが通信する為の規格。

AjaxなどのXMLHttpRequestではブラウザからサーバに情報を遅れるがサーバからクライアントにデータをプッシュ配信することが難しい。一度コネクションを行った後は、必要な通信を全てそのコネクション上で専用のプロトコルを用いて行うため。

ようは軽量なサーバー間データのやり取りが可能になる。
タグ:WebSocke
posted by ねこまんま at 09:23 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする

2010年09月28日

Web Storage

サーバー不要で保存できる「Web Storage」の使い方

Web Storageはブラウザ上に情報を保存しておく技術。結構いろいろなブラウザが対応している。

Internet Explorer 8以降
Safari 4以降
Firefox 3.5以降
Google Chrome 3以降
Opera 10.5以降

同じような技術でcookieがあるが容量が大きいとかんがえておけばよい。

Firefox3.5.3 5MB
Firefox3.6β5 4.99MB
iPhone 3.1.2 2.49MB
Safari4 50MB以上
Chrome 4 2.49MB
IE8 2.22MB
Opera10.50 2.49MB

Web Storage の残容量を調べてみた

if(window.localStorage){
alert("ok");
}


localStorageプロパティが利用できればlocalStorageが利用できる


var ls = window.localStorage;
if(!ls.getItem("key")){
ls.setItem("key", "内容");
alert("セット");
}else{
alert(ls.getItem("key"));
}


setItemでキーを指定してデータを保存し、getItemでデータの取得が出来る。

var ls = window.localStorage;
if(!ls.key2){
ls.key2 = "内容2";
alert("セット2");
}else{
alert(ls.key2);
}
if(!ls["key3"]){
ls["key3"] = "内容3";
alert("セット3");
}else{
alert(ls["key3"]);
}


プロパティや配列としても保存可能。


また、window.removeItem(key)でデータの削除が出来る。

参考:W3C - 『Web Storage』日本語訳
posted by ねこまんま at 11:36 | Comment(0) | TrackBack(0) | HTML5 | 更新情報をチェックする