FileReader利用時のメモリ増減パターンをちょっと調べてみた
FileReaderを通してローカル画像ファイルのプレビュー jsFiddleを使ってみたかったので，デモ的に貼ってみます． HTML5 Rocks - Reading local files in JavaScript Utilizing the HTML5 File API to choose, upload, preview and see progress for multiple files - Robert's talk このあたりを参考に，FileReaderでローカルの画像ファイルを読み込み＆ファイルプレビューをしてみました．大体動くんですが，どうもブラウザがメモリとってもおいしいです☆をしていたので，ちょっと調べてみました． メモリリークするケース？ で，どうもFileReaderのインスタンスを作ったらしっかり使い回さないと，狭い確認範囲ですがメモリリークすることがある
「艦これ」第二期（HTML5）【Block-1】の動作が軽いブラウザーはどれだ選手権：ウェブ情報実験室 - Engadget 日本版
Nintendo Switch 2: Everything we know about the coming release
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
WebKit2 と愉快な仲間たち - steps to phantasien
ある ニュース記事を同僚に教わった。 この記事によるとタッチデバイスの会社は WebKit2 に対応しているのに検索の会社は旧バージョンにとどまっており、HTML5 に課題は多いのだそうな。 そりゃ課題は常に山積みだよね…と思っていたら記事は誤解だと別の同僚が説明を書いている。 リンク先の記事はさておき、世間の関心をいまいち集められていない気がする WebKit2 についてざっと説明をしてみたいとおもう。 この記事を読み終われば WebKit2 と Chromium WebKit, Webkit1 の違いを知ったかぶれるようになる予定。 WebKit2 は 2010 年の 4 月にアナウンスされた WebKit の新しい API レイヤで、Mac 版 Safari などが使っている。 大きな特徴はレンダリングエンジンを別プロセスで動かせること。 Chromium でやっているのと同じような
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
MediaRecorder と WebM で、オレオレ Live Streaming
5. Media Recorder API • getUserMedia()で取得したストリームを記録 するAPI – http://www.w3.org/TR/mediastream-recording/ – http://html5experts.jp/mganeko/12475/ • Firefoxで実装済 5 6. 使い方 var localStream; // getUserMedia()で取得したstreamをセットしておく var recorder = null; var video = document.getElement ById(‘video1’); function startRecording() { recorder = new MediaRecorder(localStream); recorder.ondataavailable = function(evt
Chromium で Canvas.toBlob が試験的に利用可能になっています - Qiita
5年前から多くの注目を集めていた Chromium の Issue 67587 に進捗があり、 Canvas.toBlob が Chrome Canary 47.0.2498.0 で試験的に利用可能になりました。 追記: Safari 11 にも Canvas.toBlob が実装されました。 本題 ★ Issue 67587: Add toBlob to Canvas element. 174 people starred this issue. Currently, the html5 canvas element has a toDataURL method, which outputs a DOM string representing the backing bitmap. With the File API now widely implemented, it is appro
Re:64bit版はどうなった？ (#2798848) | Thunderbird 38.0ベータ版とFirefox 38.0ベータ版がリリース | スラド
IEでは昔からあったルビ機能に対応するみたいですね。 それはよいニュースなのですが、Firefox 37から対応するという話もあった64bit版はどうなったのか気になる。 窓の森の記事には触れられていないので、延期になっているのかなあ。 仕様通りにまともにrubyを実装したのはむしろFirefoxが最初。 ChromeはHTML rubyをサポートする(ruby要素などを認識する)が、CSS rubyは一切サポートしない(組み込みのruby要素以外をルビ表示できないしルビの見栄え調整などは一切できない)。 IEはバージョン5から独自拡張でrubyをサポートして、バージョン8から当時の草案にもとづいてdisplayプロパティ値を追加したけど、ruby-position、ruby-alignなどはIE11でも独自拡張時代の仕様のままで、CSS rubyは完全無視している。HTML rubyはほ
Yahoo!ニュース月100億PVのジレンマ～マイナーブラウザとどう付き合うか
写真：アフロ こんにちは、「Yahoo!ニュース」のHTMLやCSSのコーディングを担当している吉澤です。 今回は、「Yahoo!ニュース」ブラウザ版のコーディングをするにあたって気をつけている点などに触れてみたいと思います。 まずは、現在、PC版「Yahoo!ニュース」にアクセスしている方々がどんなブラウザを使っているのかを紹介します。 ご覧のように、Internet Explorer 11からのアクセスが一番多く、次いでGoogle Chrome、そしてInternet Explorer 8といった順番となっています。 1年間の主要ブラウザシェアの大まかな推移はこのようになっています。 Windows XPのサポート終了の影響で大きな動きがあったものの、ここ数ヶ月は安定した推移で動いているのがわかります。Internet Explorerについては最新版へのアップデートが緩やかに進行し
Service worker が拓く mobile web の新しいかたち
1. ServiceWorker が拓く Mobile Web の新しいかたち HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org HTML5とか勉強会 02/25/2015 Kinuko Yasuda (@kinu) kinuko@chromium.org ServiceWorker が拓く Mobile Web の新しいかたち 2. 自己紹介： Kinuko Yasuda @kinu / kinuko@chromium.org Chrome エンジニア 5年目くらい ￭ ストレージ、ネットワーク、Worker系など裏方っぽい API をよくいじっています ￭ File/Blob, FileSystem, Quota, XHR, Web Workers, ServiceWorker などなど ￭ 2013年秋頃か
Snap.svgの使い方まとめ
Snap.svgの使い方 まとめ How to useすなっぷ.svg タイトル svg要素の基本的な使い方まとめ・別館 written by DEFGHI1977@xboxlive 本記事ではsvg世代のjavascriptライブラリとして有望なSnap.svgの使い方について実際に動作しているサンプルを交えて解説しています（これは動作サンプルであると同時にテストコードと言えるものですね）．なお間違いがあったり，バージョンアップに伴う不整合が発生するかも知れませんので，その点ご容赦下さいね．やっぱり手でゴリゴリ書いてます． なお，Snap.svgを用いたSVG(もしくはjavascriptの)入門記事ではありません．Snap.svgを上手く活用したいのであれば，背後で動いているsvgについてよく知っている必要があります．そのため，ある程度SVGやプログラミングの知識があることを前提に話を
Webrtc最新動向
5. 目次 • 最新情報を収集するには？ • W3Cでの標準化動向 • 気になるトピックス – Chrome M34,M35リリース – iOS対応 – H.264対応 – ObejctRTCについて • カンファレンスなどの予定 – WebRTC Conference Atlanta 6. 最新情報を収集するには？ • 公開Google Group – discuss-webrtc • https://groups.google.com/forum/#!forum/discuss-webrtc • 最新情報をキャッチアップできる • 情報量が多い • すごく初歩的な話題からかなり高度な話題まで様々 • ウォッチするのは結構疲れます・・・ • Chromeに関係する情報が多い • iOS向けのWebRTCスタックについても結構議論されている – mozilla.dev.media • ht
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
SpeechRecognitionとWebRTCでつながる新感覚言葉遊び「コトバツナギ」の技術全て見せます！
SpeechRecognitionとWebRTCでつながる新感覚言葉遊び「コトバツナギ」の技術全て見せます！ 藤岡宏和（株式会社ワン・トゥー・テン・デザイン） 「コトバツナギ」というWebコンテンツを作成し、HTML5 Japan Cup 2014で最優秀賞を頂きました。コトバツナギは、SpeechRecognitionとWebRTCを軸にしたマルチユーザーコンテンツです。このコンテンツで使っている主な技術の解説をしたいと思います。 概要 コトバツナギは、声に出して声で遊ぶマルチユーザーコトバアソビゲームです。 PCサイトを開き、スマートフォンを皆で持って集まって遊ぶゲームになっています。スマートフォンの代わりにマイク機能付きのノートPCでも可です。 WebRTCとwebkitSpeechRecognitionを使っているため、2014年8月の時点ではPC・スマホともにChromeブラウザ
うちみく！ウチのミクさんが話を聞いてくれるようです
ミクさんがあなたと声でお話し（全ブラウザ対応） あなたもマイクでミクさんとお話しできる（Chromeのみ対応） 声の位置でミクさんのいる場所がわかる（立体音響、IE未対応） 3Dの仮想世界でミクさんが目の前に現れる（Oculus Rift対応） ミクさんの髪を撫でてあげられる（Leap Motion対応）
Google Chromeの開発者が語るこれからのWebに必要なこと、ちょっとした懸念点とか - ふろしき Blog
ｰｰｰｰ HTML5はネタが出尽くした。あとは、IE8やAndroid2.X標準ブラウザのような、レガシーブラウザがいなくなればいいだけではないか？ 私は最近、そんな言葉を耳にすることがあるのです。しかし、ブラウザ開発者たちは未だに、そんなことを微塵も感じさせないほど働いています。まだまだ進化の速度を、落とすわけにはいかないようです。2014年06月14日に開催された「HTML5 Night」にて、Google Chromeの開発者である及川卓也氏の口から、これからのChrome開発について語られました。 本記事では、及川氏の講演のダイジェストをお届けします。 今のChromeには何が不足しているのか？ Chromeは2013年の4月に大事な出来事がありました。Appleと一緒に開発していた、「WebKit」をフォークしました。それが、Chroniumと同様なオープンソースのレンダリングエ
ブラウザストレージ技術とプライベートブラウジング（改訂版） - Nothing ventured, nothing gained.
4年前に HTML5のストレージ技術とプライベートブラウジング - Nothing ventured, nothing gained. という投稿をした。ブラウザのストレージ技術であるWeb SQL Database、Local Storage、Session Storage（いずれもWeb Storageで規定）のそれぞれが各ブラウザのプライベートブラウジングモードで使えるかを試してみたものである。 4年が経過し、各ブラウザの実装状況も変化した。また、ストレージ技術にも変化があったので、改めて調査してみた。 対象としたブラウザは前回と同じ5種類。Internet Explorer、Firefox、Opera、Safari、Chrome。それぞれ以下のバージョンを用いた。 Internet Explorer - 11.0.9600.17126 (Windows 7) Firefox - 3
ChromeTrigger.js - Web Intent implementation. We will say Goodbye Android Browser! - latest log
(ε・◇・)з o O ( ChromeTrigger.js は、 (ε・◇・)з o O ( Mobile Web ApplicationやWeb Game の開発/運用コストを最大で20〜30% カットするソリューションだよ (ε・◇・)з o O ( やれることは一つだけ。シンプル (ε・◇・)з o O ( Android 4.0〜4.3 Browser で開いているページを (ε・◇・)з o O ( Chrome Browser で開き直す機能を提供するよ 実際の動きは、デモを参照してください DEMO こちらのデモはChromeTrigger.js 本来の機能を試せます。Android 4.0〜4.3 端末から参照してください。インテントが機能します DEMO (デバッグ用) こちらのデモは PC でも機能の一部(ダイアログの動作)を確認できるようにしたものです。インテントや
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://demo.agektmr.com/dialog/
