HTML5 audioタグで音声再生 | ゆる～くWebのこと
HTML5 で追加された <audio> タグで音声の再生を試してみます。 <audio> タグの書式は以下のとおりです。 <audio src=”音声ファイル” preload=”自動で読み込むか (auto/metadata/none)” autoplay=”自動で再生するか” loop=”繰り返し再生するか” controls=”プレーヤーを表示するか” > ここに <audio> タグ未対応の場合の記述 </audio> iPhone (おそらくスマートフォン全般) では autoplay 属性は無効に設定されています。端末が従量課金の可能性がある場合を考慮してのものだそうです。 audioタグで音声再生してみる それでは上記の書式に従って音声を再生してみます。 デモページ <!DOCTYPE html> <html> <head> <meta charset
詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編
Web Workersは、Webアプリケーションにおいてバックグラウンドでの処理実行を実現するための技術だ。 HTMLとJavaScriptで作成したプログラムは、基本的にUIスレッド内で行われるため、JavaScriptでの処理に時間がかかるとその分UIの応答性が劣化する。最悪の場合は、ブラウザがフリーズした挙句に「スクリプトが応答しない」というダイアログが表示されてしまい、処理を中断されてしまうこともある。 Web Workersを使用すると、バックグラウンドで動作するスレッド(ワーカ)を簡単に生成することができるため、長時間にわたる処理はワーカに任せることで、UIの応答を妨げることがなくなる。 ワーカを生成するのは非常に簡単だ。Workerクラスのコンストラクタに、ワーカのソースコード(JavaScriptファイル)を指すURLを渡せばよい。 var worker = new Wor
詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編
HTML5から、ウィンドウ(フレーム)間でメッセージの送受信を行うための仕組みが用意された。この仕組みを用いると、対象となるウィンドウのインスタンスさえ手に入れば、同じオリジン(プロトコル+ドメイン + ポート番号)のWebページはもちろん、違うオリジンのWebページとも通信を行うことが可能だ。 まず、他のウィンドウから送られてきたメッセージを受信するには、windowオブジェクトのmessageイベントを監視する必要がある。 // messageイベントの監視 window.addEventListener("message", function() {...}, false); 他のウィンドウに対してメッセージを送信する場合は、window.postMessage()メソッドを使用する。 postMessage(data, "targetOrigin"); postMessage()の
HTML5のlocalStorageでiPhone用Webアプリを高速化
HTML5のlocalStorageでiPhone用Webアプリを高速化：iPhoneで動かす業務用Webアプリ開発入門（4）（1/2 ページ） 今回は、iOSのSafariの中にデータを記録できる、HTML5の「localStorage」機能を使って、データの先読みとキャッシュを実現しアプリケーションの体感パフォーマンスを向上させてみます。 HTML5の「localStorage」とは localStorage（ローカルストレージ）とは、HTML5で規定されている、Webブラウザ内部のKVS（キーバリュー型データストア）です。iOSのSafariでも実装されていて、JavaScriptコードからアクセスでき、任意のデータを保存できます。 いきなり注意！ localStorageの保存データはテキストで！ HTML5の仕様では、localStorageに保存できるデータはJavaScrip
HTML5のlocalStorageでiPhone用Webアプリを高速化
HTML5のlocalStorageでiPhone用Webアプリを高速化：iPhoneで動かす業務用Webアプリ開発入門（4）（2/2 ページ） function loadList() { var ul = document.getElementById('list'); // 【1】 リストの内容を保持するJSON文字列から<li>を作成する関数オブジェクト var rebuild = function(json) { ul.innerHTML = ''; var list = JSON.parse(json); for (i = 0; i < list.length; i++) { li = document.createElement('li'); li.innerHTML = '<a href="#content" onclick="openContent('+ list[i].i
HTML5関連のデータベースAPIとWeb Storageの基本
HTML5時代にはWebブラウザでデータベースを扱える 最近のWebの世界で、トレンドになっている技術の1つとして、「HTML5」があります。Webブラウザ上で動作するアプリケーション（Webアプリケーション）が一般化したことがあって、Webブラウザに求められる機能が増えてきました。そこで、その状況に即してHTMLをバージョンアップしようという流れが起こり、HTML5の仕様策定が進められています。 HTML5では、HTMLのタグの仕様だけでなく、周辺のAPI（Application Programming Interface）の仕様も明確化して、Webブラウザによる動作の差異をなくそうという方向になっています。また、Webアプリケーションを作る上で従来不十分だった機能について、各種の新しいAPIも追加されます。 APIの中で、特に不足していた分野の1つとして、「データ管理」が挙げられます。
HTML5のWeb SQL DatabaseをGoogle Chromeで試す - にたまごほうれん草アーカイブ
W3C - Offline Web Applications 日本語訳 - HTML5.JPによるとJavaScriptからローカルDBを扱えるとのことなので、サンプルコードを拝借しながら試してみた。Google Chromeでは既にHTML5の新機能の実装は入ってきているようで、簡単なノートアプリを作成したらさっくりと動いてしまいました。 こちらで試せます→testdatabase.html コード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>web database test</title> <script type="text/javascript"> var db = window.openDatabase("notes","","notes app", 1048576); function clearNo
HTML5だけでiPhoneアプリをつくる - EC studio デザインブログ
間が開いてしまいましたが、CSS Nite 4周年記念イベント（Vol.40 reprise）の続きです。HTML5のメリットを活かしたコンテンツアイデア」というテーマでお話されたのはKAYACの山田敬美さん。 HTM5を取り上げたブログ記事などを多く見るようになりましたが、その多くは新要素のマークアップについてが特に目立つ気がします。 そんな中、マークアップエンジンニアでもあり、KAYACのブッコミ11メンバーでもある山田さんはWebアプリケーションとしてのHTML5を生かしたアイデアをお話されていました。 iPhoneがHTMLで使える理由 HTML5といっても現状ブラウザごとで実装が異なり、実務として使うのは非常に難しい。でもそういったブラウザの種類に左右されないデバイスがある。 それがiPhoneだということです。iPhone SafariのWebkitはHTML5を要素のいくつか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
