モダンブラウザで使う「Geolocation API」前編
（2011/04/15 追記） 広義の HTML5、狭義の HTML5 について追記しました もりやまです。 最近比較的余裕があるので色々調べたりしているのですが、今回はブラウザの位置情報取得機能（Geolocation API）について調べてみました。 携帯端末では昔から結構使われていましたが、今回調べてみたところ、ほとんどのモダンブラウザが対応していることがわかりました。 というわけで、ここにまとめてみます。 Geolocation API とは ホストデバイスに関連する地理的な位置情報へのスクリプトによるアクセスを提供する API です。 ザックリ言ってしまうと、ブラウザ上で動く JavaScript から現在の位置情報を取得するためのAPI の仕様、ということです。 W3C で策定中の規格で、現在は最終草案（Last Call Working Draft）の段階です。 よく「HTM
JSONで管理するHTML5音楽プレイヤーを作ってみた (1/4)
HTML5サウンドプレイヤーのサンプル。マウスで選択した曲（音声ファイル）を再生し、ラインアートを表示する。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） HTML5 Audioを使ってブラウザー上で動くサウンドプレイヤーを作る記事の続き。前回は、再生リストから選択した音楽（音声ファイル）を再生する基本機能を作りました。このままでも十分と言えば十分ですが、今回はビジュアルエフェクトと操作ボタンを追加して、より充実した機能のプレイヤーに仕上げていきます。 ビジュアルエフェクトを追加する まずビジュアルエフェクトを追加します。今回は、サウンドプレイヤーの背景いっぱいにcanvas要素を配置し、canvas上にランダムな色の線を描画していくラインアートのプログラムを用意しました。 HTML5 Canvasの基本的な使い方については本連
HTML5 Audioで作るiTunes風音楽プレイヤー (1/7)
HTML5サウンドプレイヤーのサンプル。マウスで選択した曲（音声ファイル）が再生される。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 本連載でもこれまでHTML5 Videoを使って動画を再生する方法を紹介しましたが、今回は音声を再生してみましょう。HTML5ではプラグインを使用しなくても動画や音声を再生できます。 今回はHTML5 Audioのサンプルとして、選択した音楽（音声ファイル）を再生するサウンドプレイヤーを作ります。単に音楽を再生するだけでは面白くないので、Canvasを使ってビジュアルを表示する機能も付けます。さしずめ、iTunesやWindows Media Playerのブラウザー版、といったところでしょうか。 ブラウザーによって違うサポート形式 HTML5 AudioはVideoと同じメディア要素として扱わ
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS
/* * CSSでキュウべえ(FULL)を描いてみた * ※Google Chrome, FireFox, Safari, Operaに対応しています。 */ <div class="qb"> <!-- tail --> <div class="tail"> <div class="parts-1"></div> <div class="parts-2"></div> <div class="parts-3"></div> <div class="parts-4"></div> <div class="parts-5"></div> <div class="parts-6"></div> <div class="parts-7"></div> <div class="parts-8"></div> <div class="parts-9"></div> </div> <!-- ear --
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.matsuaz.com/4_1/2011/02/11/1297429590850.html
