webカメラなど簡単にブラウザから!新しいAPI『getUserMedia』に注目

いきなりですが、新しいhtml5API 「navigator.getUserMedia()」を、
ちょっとだけ触ってみました。
 

まだまだ新しくすぎる機能のため、使えるブラウザは現状だとopera12ぐらいですが、
ブラウザ以外特に外部ソースをなどを利用せずに、ブラウザでwebカメラが使えてしまうのに、驚き! 
(ちなみに既にダウンロード可能なGoogleChrome21 betaも対応)

これ
↓↓↓

http://matsudapress.com/lab/html5/api/test.html
※opera12ぐらいしかみれないかな。

キャプチャgetUserMedia()

 

これを使えば、顔認識や、ライブ映像などいろいろなアイデアに使えそう!!
まだ普通につかえるまでは時間がかかりそうですが、最近のブラウザの進化はとてつもなく早いので、意外にすぐに普通に使える日がくるかもw

取り急ぎ今後に注目です。

参考サイト:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/

ブラウザ上で動くWEBGLを使った3Dの世界

ネットサーフィン中にいいもの見つけたのでピックアップ!
WebGLを使ったブラウザ上で人が動く3Dの世界

http://webcraft.vertinode.nl/

http://webcraft.vertinode.nl/

上記URLより見れます!(chrome推奨かと)

a/w/s/d で移動
spaceでジャンプなどできます。
またマウスで視点を替えたり、ブロックを消したり、選んだりできましたw

最近はgoogle先生のMapsGLなどWebGlを使ったサービスを良く目にするようになったので、
今後他のブラウザもwebGLをブラウザに標準装備していってほしいです!

 

webGLを使った刻々と変化する3Dアニメーションがすごい!

いいもの見つけたので、久々の更新w!
WEBGLを利用した刻々と変化する3Dアニメーション!すごすぎ!

ウェブGL

lights.elliegoulding.com

http://lights.elliegoulding.com/
上記から見れます!Chromeブラウザ推奨かと!
※音楽が流れます

めちゃくちゃリアルなWEBGLを使った車にインスパイアされました!

webglもここまできたかというぐらいチョーリアルな3Dカーが、
ブラウザ上でぐいぐい動きます!!
※十字キーでオレンジカーを操作可能、後ろの白いカーもw/a/s/dで操作できます。 

↓↓↓

3dcar

 このリアルさ半端ないです、blurを使った遠近間や、反射の光具合など、、、
すごすぎます!

ちなみにnキーを押すとナイトモードに切り替わり!12345キーで視点を切り替えられます!

↓↓↓

webgl_car2

下記から見れます!これ作った人ホントすごい!(chrome推奨かと)

http://alteredqualia.com/three/examples/webgl_cars.html

リニューアル!! ルートドメインへ変更&MediaQueriesでスマートホンレイアウトに対応しました。

今回サイトのサーバー移行と一緒に、いままで無料のDDNSで利用していたサブドメインを、
独自ドメインを取得してルートドメインに変更しましたw

http://e-com.webhop.net/wordpress/ → http://matsudapress.com

また、移行先もwordpressにしhtml5&CSS3対応にし、スマホで表示してもレイアウトが崩れないようまえから気になっていたmedia queriesを利用したブログに変更しました。

Media Queriesを利用することで、ブラウザの画面サイズによって利用するCSSを変更できるので、ブラウザの画面サイズを意識し、スマホでも見やすいサイト作成ができます。
このブログでもサイズによってこんな感じに変わります。

media queries

サイズ小(主にスマホ用)

media queries

中サイズ(サイドバー分スペースを下へ折り返しています)

media queries big width

サイズ大(基本のレイアウト)

 

下記のように横幅の最小と最大を指定し、そのサイズ内ならこのCSSを適用するということができます。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none;
	}
}

上記を利用しスマホの画面サイズを意識て作ることできれいなPCデザインをいかしつつスマホにも同時に適用できるのが魅力的です!
ちなみにいままでwordpressのプラグインでスマホ用の画面を用意してましたが、この方法なら好きにカスタマイズできるし、PC&スマホ両方に適用させたい場面など大変便利になります。

実は今回利用しているテーマですがデフォルトテーマで、最初からMedia Queriesに対応しているので、気になる部分をカスタマイズして利用させていただいております♪