HTML5 Drag and Drop – sorting photos between albumsScript Tutorials - Web Development Tutorials
HTML5 Drag and Drop – sorting photos between albums Today, I would like to tell you about Drag and Drop and HTML5. As you know (I hope), all modern browsers (it should be FF, Safari, Chrome, possible Opera) have native support of this useful feature (as drag and drop). It means that we can use it in our projects, the code won’t be very difficult. And, as the example of practical implementation, le
2011年12月のW3C | Web標準Blog | ミツエーリンクス
Geolocation API Level 2, DeviceOrientation 12月1日付で、Geolocation WGから2仕様の草案がLast Callとして公開されました。 Geolocation API Specification Level 2 DeviceOrientation Event Specification Geolocation API level 2はGeolocation API仕様の拡張仕様で、住所を取得するAddressインターフェースが追加されています。DeviceOrientation Eventはデバイスの傾きや加速度などに関するインターフェースを定義しています。 Geolocation APIは初めての草案ですが、Last Callとなっています。追加される機能が少ないことや、数年前からEditor's Draftのかたちで存在していたこと
Drag and DropとFile APIを試す - NullPointer's
HTML5のDrag and Drop APIとFile APIを試してみました。 Drag And Drop APIは HTML上の要素のドラッグアンドドロップをサポート File APIとの連携でデスクトップからのドラッグアンドドロップをサポート 1番はHTML5でなくてもjQuery等を用いれば実現可能ですので、File APIとの連携を試します。 File APIのサンプル jQueryでFile APIを使うために以下のおまじないを実行します。 jQuery.event.props.push('dataTransfer'); DropイベントとFile APIとの連携にはevent.dataTransferプロパティを使いますが、jQueryのイベントオブジェクトにはdataTransferが存在しません。このおまじないで、jQueryのeventオブジェクトにブラウザネイティブ
Google Chrome11でサポートされた音声入力API - Webtech Walker
Google Chrome11の正式版がリリースされたわけですが、音声入力APIに対応したようです。 音声入力APIはフォームの入力を音声から取得してテキストに変換してくれるAPIです。 HTML Speech Input API Specification 使い方は超かんたん。speech属性をinput要素に指定するだけ。chrome11ではx-webkitっていうprefixつかないとダメっぽい。こんな感じ。 <input type="text" speech x-webkit-speech> 対応してるブラウザだったらテキストボックスにマイクのアイコンがでてると思うのでクリックすると音声で入力できます。 あと、言語をlang属性で指定できる模様。 <input type="text" speech x-webkit-speech lang="en"> ちなみにGoogle検索とかG
【javascript】webkitのデスクトップ通知のデモ:</gecko>：げことじ。：日常からWEBまで：
さっそく試行錯誤したデモを作ってみました。 http://gecko.hp2.jp/chrome_notify/ サポートの有無 if(window.webkitNotifications){ $("#webkit").html("webkitNotificationsをサポートしている"); }else{ $("#webkit").html("webkitNotificationsをサポートしていない"); } 通知の許可をさせるにはクリックなどユーザーの動作が必要っぽい。 $("#request-permission").click(function(e) { e.preventDefault(); window.webkitNotifications.requestPermission(function(){ if(cb){ cb(window.webkitNotificatio
localStorageの挙動と簡単なラッパー - Block Rockin’ Codes
[追記] テストのソースだけを見られる様に、gistに張りました。 gist:542451 localStorageを使ってちょっとやってみたいことが有るので、まずはlocalStorageを色々使って見ようと思ったのですが、思った以上にブラウザごとの挙動に差があって、イベントどころかだだ値を取り出すだけでも、色々気をつける必要があることが分かりました。 以下は、手元の Mac に有った FireFox 3.6.8 Chrome 5.0.375.126 Sagari 5.0 (6533.16) の環境で試した結果です。 格納出来るデータ W3Cの仕様ではJSのオブジェクトであれば一通り格納出来るように定めているらしいですが、現在は単なる文字列しか入らない物が多いようです。 なので、オブジェクトを格納するためには、JSONをシリアライズして入れる形になると思います。 Native JSON
HTML5サンプル集 | 株式会社あゆた
会社ブログ「あゆたジャーナル」始めました。 [新着情報]あゆたジャーナルにてHTML5の開発ツール「Adobe Edge Animate」の入門記事を掲載しました。 このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。このサンプルの多くは、2010年度まで弊社技術顧問を担当していただいた白石氏がマイコミジャー ナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。どれも非常にシンプルなものではありますが、HTML5の各 機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプ
HTML5 File Uploading Tutorials | HTML5 Web Design Blog
We hope that after reading this post and thoroughly learning all tutorials you’ll be able to develop HTML5 file uploading plugin by yourself. Sometimes it seems that there are no things in web development that you can do without HTML5 involvement – it’s everywhere. Who knew that a simple markup language could evolve into a powerful and rapidly developing technology, which dictates the latest trend
HTML5 - 12 Cool HTML5 Geolocation Ideas
Figure 5 Browsers that support the HTML5 Geolocation API Even though geolocation works in all the major browsers (Figure 5), you still have to take into account the scenarios in which location can’t be provided. For example, a user might be running an older browser or have hardware that doesn’t include positioning devices, or simply might not want to automatically share location information. The l
HTML5 のオフライン機能 - 強火で進め
Google Developer Day 2011に参加しました。 参加したセッションのメモを書いときます。 (追記 2012/01/14) Googleから動画が公開されました。 http://www.youtube.com/watch?v=MY06xnSZyaw:moive ※このセッションで解説された内容に一部変更点があるとのことなので、こちらも合わせて参照下さい。 (追記ここまで) HTML5 のオフライン機能(Eiji Kitamura) @agektmr 東京 - Google Developer Day 2011 http://www.google.com/intl/ja/events/developerday/2011/tokyo/agenda/session_1001.html スライド 動的なデータの保存 Web Storage (localStorage / sess
音声入力APIを試してみた - ichhiの日記
音声入力APIでいろいろ試した過程をメモした。 本題 Google Chrome 11の正式リリースには音声入力APIが標準で使用できる。 音声入力APIとは 音声で文字をコンピュータに入力するためのAPI。 携帯電話にはすでに実装されていたが、パソコンのWebブラウザには今回が初めて(?)。 使い方 まずソースコード https://gist.github.com/946039 <html> <head> <title>x-webkit-speech test</title> </head> <body> <input type="text" x-webkit-speech /> </body> </html> 実行結果 表示結果 マイクのボタンを押すと音声入力ができる 「たけのこは」としゃべると「たけのこ派」とテキストボックスに入力される 音声が入力された時のイベントを検知 x-web
Touch Events
By publishing this Recommendation, W3C expects that the functionality specified in this Touch Interface Recommendation will not be affected by changes to HTML5 or Web IDL as those specifications proceed to Recommendation. The WG has completed and approved this specification's Test Suite and created an Implementation Report that shows that two or more independent implementations pass each test. The
携帯/iPhoneのGPSを試すサイトを作った
携帯/iPhoneのGPSを試してみるサイトを作ってみました。 いまや、ほとんどのモバイル機にGPSが搭載されており、foursquare、コロプラ、ロケタッチなど位置情報を使ったサービスも多くリリースされています。 そんな便利なGPSなんですが、実際のところ、どの程度の精度で位置情報が測定できるのか、そして、その位置情報を使ってどんなことができるのかをあらためて模索するために、簡単にGPSを試すページを作ってみました。 携帯電話GPSで位置情報を見る 内容は単純で、GPSで測定した位置情報を元に Google Map と住所を表示します。参考に緯度経度、誤差も表示しています。 => 携帯/iPhone GPSテスト ページにアクセスするとリンクがあるので、クリックします。この時にGPSを送信するか否かを確認されるので、送信に同意します。 GPSを使って測定した位置情報を表示します。 iP
HTML5 Apps: Positioning with Geolocation
At the heart of every location-based application is positioning and geolocation. In this tutorial you will learn the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 app! Introduction Three years ago, the smartphone “boom” was still an uncertain possibility. Today, we are surrounded by a society of smart phone addicts who live as if the
【レポート】クロスドメインで同じlocalStrageを使うテクニック | エンタープライズ | マイコミジャーナル
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. Nicholas C. Zakas氏がNCZOnlineのLearning from XAuth: Cross-domain localStorageの記事で、XAuthで採用されている機能を紹介している。XAuthは複数のドメイン間でデータを共有するための機能を提供してくれる。氏はXAuthで採用された方法は複数の違うドメインの間で永続的にデータを共有するテクニックとして素晴らしい方法だとしており、簡単なサンプルコードも含めて説明している
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.smartjava.org/content/html5-access-battery-status-through-javascript/
HTML 5 Notification - Xpert Developer
Web Workers in HTML5 - DZone
Examples of Sites where localStorage should or is being used | CSS-Tricks
navigator.onLine - 繧ｪ繝ｳ繝ｩ繧､繝ｳ/繧ｪ繝輔Λ繧､繝ｳ迥ｶ諷九ｒ蠕励ｋ