adakoda: HTML5アーカイブ

[HTML5] Akihabara

adakoda (2010年4月29日 12:53) | トラックバック(0) |

Akihabara

http://www.kesiev.com/akihabara/

HTML5/Javascriptで実現したゲームデモのサイト。

HTML5 対応ブラウザーがあれば、PC からはもちろん、スマートフォンからでも閲覧できます。

ちなみに上記のキャプチャは、ADP1に載せている2.1（Eclair）上で閲覧したもの。

今後も Canvas を使った作品は、どんどん増えていきそうです。

何よりもクロスプラットフォームで動作するのが良いですね。

[HTML5] 位置情報取得（Geolocation）API

adakoda (2010年4月 3日 20:57) | トラックバック(0) |

JavaScript のプログラムから位置情報を取得するには、Geolocation API を使用します。

位置情報は、GPS、またはネットワーク情報から取得できるため、

PC などの GPS を内蔵していないデバイス上のブラウザアプリでも、

ネットワーク情報から位置情報を利用することができます。

getCurrentPosition

位置情報を（1回だけ）取得するには、getCurrentPosition を呼び出します。

この API は非同期で実行され、結果は1度だけコールバックとして渡されます。

※第1引数：位置情報の取得に成功した際に呼び出されるコールバック
※第2引数：位置情報の取得に失敗した際に呼び出されるコールバック ※省略可
※第3引数：オプション（正確さの有効/無効、タイムアウト、位置情報の有効期限） ※省略可

watchPosition / clearWatch

位置情報を監視するには、watchPoistion を呼び出します。

※引数は getCurrentPosition と同じ

この API も非同期で実行され、結果は位置情報が変更されるたびにコールバックとして渡されます。

また、位置情報の監視をやめるには、clearWatch を呼び出します。

※第1引数：watchPostion を呼び出した際の戻り値（整数値）

Geolocation API デモ

http://html5demos.com/geo

アクセスすると、位置情報の許可が促され、

許可すると、結果が地図上に表示されます。

※Firefox 3.6.2 で確認

ブラウザのページソースから JavaScript のコードを参照できるため、API を理解する際の参考になると思います。

[HTML5] そろそろ少しずつ勉強していこうかと＾＾；

adakoda (2010年3月19日 22:17) | トラックバック(0) |

HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/

html5-developers-jp | Google グループ
http://groups.google.co.jp/group/html5-developers-jp

Google Developer Day 2009 Japan オープニング

HTML5 により拓かれる次世代 Web : Google Developer Day 2009 Japan

― PDF資料
http://dl.google.com/gdd/2009/intl/ja/pres/WS1.pdf

― 【レポート】5分で把握するHTML5 - Google Developer Dayセッションリポート (1) HTML5仕様の概要 | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/articles/2009/06/15/gdd1/index.html

[HTML5] パスでドロイド君を描きました - adakoda
http://www.adakoda.com/adakoda/2009/10/html5.html

HTML5&API入門

「HTML5&API入門」を参考に勉強していこうと思います。

HTML5の概要、キャンバス、Video&Audio、DnD API、リッチ編集用API、Web API（Storage、SQL、Workers、Sockets）、Geolocation API などなどが解説されています。

開発環境もテキストエディタとブラウザがあれば着手できますし、各章読み切りで勉強できるので、少しずつ身につけていこうと思います。

[HTML5] パスでドロイド君を描きました

adakoda (2009年10月 2日 23:41) | トラックバック(0) |

Twitter の #html5_dev_jp に触発され、

「はじめてのCanvas！」

ということでドロイド君を描いてみました。

以下のキャプチャは、Chromeで表示した結果。

以下のキャプチャは、Firefoxで表示した結果。

テキストエディタで書いて、ブラウザでReflesh！Reflesh！は、なんというか新感覚。

ちなみにFirefoxの結果が間違っているのは、わざと（半分嘘）。。。ということでお題にしておきます。

ちなみにHTML5の勉強にあたっては、以下のサイトを参考にさせていただきました。

超お勧めサイトです！

HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/

ソースコード

※テキストに貼って、hoge.htmlで保存し、HTML5対応のブラウザに放り込めば表示できます

<!DOCTYPE html>
<html>
<head>
<title>Droid</title>
<style>
    body {
      text-align: center
    }
</style>
<!--[if IE]><script type="text/javascript" src="http://www.adakoda.com/excanvas.js"></script><![endif]-->
<script>
window.onload = function() {
var ctx = document.getElementById('c').getContext('2d');

// 色（深緑）
ctx.strokeStyle = 'rgb(164, 199, 58)';
ctx.fillStyle = 'rgb(164, 199, 58)';
ctx.lineCap = "round";

// 線幅
ctx.lineWidth = 3;

// アンテナ？
ctx.beginPath();
ctx.moveTo(33, 5);
ctx.lineTo(43, 18);
ctx.moveTo(97, 5);
ctx.lineTo(87, 18);
ctx.stroke();

// 頭
ctx.beginPath();
ctx.moveTo(65, 50);
ctx.arc(65, 50, 40, Math.PI, 2 * Math.PI, false);
ctx.fill();

// 線幅
ctx.lineWidth = 18;

ctx.beginPath();
// 腕
ctx.moveTo(12, 50);
ctx.lineTo(12, 100);
ctx.moveTo(118, 50);
ctx.lineTo(118, 100);
// 足
ctx.moveTo(50, 100);
ctx.lineTo(50, 130);
ctx.moveTo(80, 100);
ctx.lineTo(80, 130);
// 胴体（下部）
ctx.moveTo(35, 100);
ctx.lineTo(95, 100);
ctx.stroke();

// 胴体（上部）
ctx.fillRect(25, 45, 80, 55);

// 色（白）
ctx.fillStyle = 'rgb(255, 255, 255)';

// 首
ctx.fillRect(25, 45, 80, 4);

// 目
ctx.arc(47, 30, 4, 0, 2 * Math.PI, false);
ctx.arc(83, 30, 4, 0, 2 * Math.PI, false);
ctx.fill()

};
</script>
</head>
    <body>
        <canvas id=c width=200 height=200></canvas>
    </body>
</html>

あわせて読みたい