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
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オブジェクトにブラウザネイティブ
さっそく試行錯誤したデモを作ってみました。 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
[追記] テストのソースだけを見られる様に、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の開発ツール「Adobe Edge Animate」の入門記事を掲載しました。 このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。このサンプルの多くは、2010年度まで弊社技術顧問を担当していただいた白石氏がマイコミジャー ナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。どれも非常にシンプルなものではありますが、HTML5の各 機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプ
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
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
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
携帯/iPhoneのGPSを試してみるサイトを作ってみました。 いまや、ほとんどのモバイル機にGPSが搭載されており、foursquare、コロプラ、ロケタッチなど位置情報を使ったサービスも多くリリースされています。 そんな便利なGPSなんですが、実際のところ、どの程度の精度で位置情報が測定できるのか、そして、その位置情報を使ってどんなことができるのかをあらためて模索するために、簡単にGPSを試すページを作ってみました。 携帯電話GPSで位置情報を見る 内容は単純で、GPSで測定した位置情報を元に Google Map と住所を表示します。参考に緯度経度、誤差も表示しています。 => 携帯/iPhone GPSテスト ページにアクセスするとリンクがあるので、クリックします。この時にGPSを送信するか否かを確認されるので、送信に同意します。 GPSを使って測定した位置情報を表示します。 iP
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
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で採用された方法は複数の違うドメインの間で永続的にデータを共有するテクニックとして素晴らしい方法だとしており、簡単なサンプルコードも含めて説明している
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く