HTML5の最近のブログ記事

[HTML5] Akihabara

| トラックバック(0) |

Akihabara

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

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

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

 

html5_pacman.png

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

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

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

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 を理解する際の参考になると思います。

 

 

  • 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&API入門

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

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

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

Twitter の #html5_dev_jp に触発され、

「はじめてのCanvas!」

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

 

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

Chrome.png

 

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

Firefox.png

 

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

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

 

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

超お勧めサイトです!

 

ソースコード

※テキストに貼って、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>

 

あわせて読みたい

Android ニュースリンク集のように、HTML5 ニュースリンク集をはじめました。

 

今のところ、記事の数が少ないので、HTML5というキーワードがあれば、スクラップしています。

したがって、Gear、Chrome、Waveじゃんという記事も含まれています。。。

 

ネタは、Google リーダーにとっておいた2007年以降のスター付きアイテムから持ってきました。

半分くらいは英語の記事でしたが、ぱっと見わからなくなるので、割愛しています。

1年後には、Canvasの記事とか書いているんでしょうか。。。

1

2016年8月

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31