HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアのid:nanto_viです。みなさんHTMLのフォーム検証機能は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつがinput要素のpattern属性です。pattern属性の値にJavaScriptの正規表現パターンを指定することで、ユーザーの入力が意図しないものであった場合、フォーム送信ができなくなります。下図は5桁の数字の入力が求められるところに3桁しか入力せずフォーム送信しようとしたところです。ブラウザに組み込みのエラー表示が出現し、またそのメッセージにtitle属性の値が使われていることを確認できるでしょう。(pattern属性を指定する際には、title属性に書式の説明を記述することが推奨されています。) <input type="text"
ブラウザのみで使えるバーコードリーダーを作った - @znz blog
最近の HTML5 の getUserMedia API でカメラの画像をブラウザ上で処理できるようになったということで、 専用のバーコードリーダー機器を買ったり、 モバイル機器で専用のアプリを入れたりしなくても、 ノートPCの内蔵のカメラでも使えるバーコードリーダーを作ってみました。 使い方 Web Barcode Reader (2022-11追記: 放置していたら削除されてしまったためデモサイトは今はありません) を開いて、 既にPC上に画像がある場合はその画像を選択してください。 選択するだけでバーコードの認識が始まります。 iOS や Android などではファイル選択かカメラで撮影かを選べます。 BarcodeReader のライブラリを使って JavaScript のみで認識していて、 バーコードの認識は初回はちょっと時間がかかるようなので、 ゆっくり待ってください。 Go
WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5 Conference 2012
WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5 Conference 2012 HTML5のコミュニティ「html5.org」主催のイベント「HTML5 Conference 2012」が9月8日、慶應大学日吉キャンパスで開催されました。ボランティア主催のイベントでありながら、約1000人の来場者と4トラック20セッション以上という規模は、現在のHTML5への大きな注目度を示しているようです。 Publickeyでは、セッションの中からWebの最新動向に関連した「WebIntents」と「WebRTC」に関する記事を2本公開します。 WebIntentsとSocket APIでブラウザから家電が操作できる。HTML5 Conference 2012 WebRTCはブラウザ上でリアルタイムコミュニケーションをするためのフレームワーク。HTML5
ブラウザ上でカメラを使って色認識 - Okiraku Programming
getUserMedia APIに対応したブラウザでは、カメラで取り込んだ画像などをブラウザ上で処理できます。 参考サイト:[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ これを使って、先日作ったトレジャーパーク・ソルバに、カメラを使って色入力ができるようにしてみました。 （ただしChromeでしか動作を確認していません。） 使い方は、ソルバにアクセスして「カメラで認識」をクリックします。すると、カメラへのアクセスを求められるので、許可してください。カメラで撮影された画像がリアルタイムで表示されるので、白枠の中にトレジャーパクのシートがぴったり収まるようにします。 認識に成功すると、自動入力されたソルバ画面にジャンプします。 仕掛けとしては、一定時間ごとにcapture()関数で画像をvideoからcanvasに複製し、ctx.getImag
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」 | Web活メモ帳
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
http://www.igloolab.com/jquery-html5-uploader/
See related links to what you are looking for.
HTML5 ドラッグ&ドロップ操作を活用する方法(2) | TechBooster
「ドラッグ&ドロップ操作を活用する(1) 」では、ブラウザでドラッグ＆ドロップ操作を 活用する手順をご紹介しました。 HTML5では、デスクトップに保存されているファイルをブラウザにドラッグ＆ドロップして 任意の処理させることも可能です。これによりWebアプリケーションでも デスクトップアプリケーションと同等のユーザビリティを実現することができるようになります。 今回はドラッグ&ドロップとFile APIを活用して、デスクトップからブラウザにドラッグ＆ドロップされた ファイルの情報を表示するサンプルをご紹介します。 詳細は続きからどうぞ。 デスクトップからのドラッグ&ドロップに対応するには 前回の記事では同じブラウザ内に表示されている画像のドラッグ＆ドロップできるようにしましたが、 実はデスクトップからのドラッグ＆ドロップでも特に変わった設定をする必要はありません。 まず下図のように、ドラ
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Taberareloo + upload from cache - 枕を欹てて聴く
というわけでversion 2.0.13にて, Taberarelooにupload from cache相当を実装しました. 結果, ある種のreferer checkを行うserviceの画像がTumblrにpostできたり, なにより, screen captureの結果がHatena Fotolife以外のTumblrにpostできるようになりました!(上図) これで手軽にscreen captureを撮ってtumblrにuploadできますね. Chrome Web Store - Taberareloo upload from cacheは実装されないのかと言われてきましたが, なんというか技術的に可能になったので実装しました. 楽しいですね! 正確にはcacheからuploadしているわけではないのですが, 一応これでどうでしょうか? なんかダメなserviceとかあったら,
HTML5の登場でエバークッキーが蔓延 - huixingの日記
HTML5の登場でいろいろ出来ることが増えてきたが逆に不都合な点も出てきた。それがエバークッキーevercookieと呼ばれるクッキーで、コンピュータの奥深くクッキーを残し、マーケッターや広告主などにウェブユーザーのオンライン・アクティビティーをより細かく知らせてしまう。クッキーをHTML5のローカルデータベースに保存する方法で、より大量のデータがハードディスクに収集され、マーケッターなどに時には数ヶ月に渡る、場所、時間帯、写真、ブログ文章やショッピングカートの中身などの個人情報を知らせることができてしまうようになったからだ。evercookieは2005年にマイスペースをダウンさせたウイルスであるSamy Wormを創りだしたカリフォルニアのプログラマーのサミー・カムカルSamy Kamkarの考案によるもので、フラッシュ・クッキーやシルバーライト・クッキーや3種の異なるHTML5のロー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engadget | Technology News & Reviews
http://japan.internet.com/webtech/20120418/1.html
IDEA * IDEA
Engadget | Technology News & Reviews
http://japan.internet.com/busnews/20101203/8.html