はてなブックマーク

ポエムです。コードは一行もでてきません。 Chromiumベースの新Edgeブラウザもベータに突入し、いよいよ IE のサポートを切れるタイミングが見えてきました。 とはいえ、私が関わっている現場のように、既にリリースしているサービスの場合は IE のサポートを突然切るわけにも行かず… そのような場合は、まずはチーム内への根回しやコンセンサスからになるでしょうか。 かれこれ2年前(2017年)。 今のサービスがまだ設計段階だったころに、 「2年後の2019年にはIEシェア1%とかなんだから、あらかじめ IE 対応だけは切らせてくれぇぇ」 と訴えていたのですが、 ちょうどサービスのグロースや顧客層を最大化して考える時期(風呂敷を大きめに広げている時期)というタイミングの悪さもあり、 「今の段階でIE切るとか、事業というか、ビジネス的にありえないでしょ!!」 という、 なかなか強烈な拒否反応が

JavaScript で Promiseを返す関数を並列に呼び出しその結果を取得するには、Promise.all と Array#map を併用し、 const values = await Promise.all([fn, fn, fn].map(fn => fn()) のようにします。 (async() => { const fn = (index) => { return new Promise(resolve => { setTimeout(() => resolve(index), 1000 * index); }); }; const process = async() => { console.log(`fn call begin`); const source = [ fn, fn, fn ]; const values = await Promise.all(source

RFC 8259 (JSON data format) JSON の新版が公開されました。 復習を兼ねて、変更点とおさらいをまとめておきました。 従来からの変更点 JSON は ECMA-404 と RFC8259 で定義されているが、今後は完全に互換性があるものとして扱われる JSON が最新の UNICODE を参照するようになった。つまり UNICODE の仕様変更で JSON も影響を受ける string は UTF8 が必須に JSON とは JSON はポータビリティを意識して設計された JavaScript のサブセット XML にくらべて手軽に利用できるため、ブラウザ界隈から利用が始まった。現在では広く利用されている JSON の object は JavaScript における Object リテラルである、array も同様に Array リテラルである string,

JavaScirpt を使ったアプリケーションの開発において、 依存関係のある復数のモジュールを並行で開発する状況はよくあると思います。 そのような状況の手助けをしてくれるコマンドが npm link です。 例 モジュール(A, B)を並行開発中に、B が A を必要としている状況があるとします。 A を少し変更するたびに npm publish したり、A のコードを B/node_modules/A 以下にコピーするのは辛いので npm link でリンクを作成し解決します。 まずは、A のディレクトリに移動し npm link を実行します。 cat package.json | jq '{name}' # Aのモジュール名を確認(この例では"A") > { "name": "A" } npm link > /usr/local/lib/node_modules/A -> ~/wo

Chrome Canary に ES Modules が仮実装されました(chrome://flags/#enable-experimental-web-platform-features を有効にすると利用できます)。 いよいよ HTTP/2 と ES Modules を組み合わせた形で、アセットパイプラインを考える時代に突入するようです。 このエントリでは、ES Modules を手元で試したい方のために、HTTP/2 の最低限の動作環境を Mac に構築する手順を簡単に紹介します。 brew install nginx --with-http2 nginx -V > nginx version: nginx/1.12.0 > built by clang 8.1.0 (clang-802.0.42) > built with OpenSSL 1.1.0e 16 Feb 2017 >

あるあるです。よく忘れるのでメモです。 デバッグのために node_modules 以下のコードを直接修正していたが、途中で寝てしまい、どのコードを修正したのか良く覚えていない。困った… といったタイミングで修正されているファイルをリストアップする方法です。 ls -tl `find . -regex ".*node_modules.*" -name "*.js" -type f -print` | head -20 -rw-rw-rw- 1 foo Users 22562 7 11 14:40 ./node_modules/bar.js/lib/Bar.js -rw-rw-rw- 1 foo Users 13430 7 11 14:00 ./node_modules/hoge.js/node_modules/huga.js/lib/Huga.js -rw-rw-rw- 1 foo Use

JavaScript も他の言語と同様に記号($=_-+~[]{}()*/<!\;"',.)のみを使ったプログラミングが可能です。 以下に console.log("Hello World") を実行するための手順を説明します。 コードに出てくる $0 や $a などの変数は、読者への説明のために可読性のある形で記述しています。 もちろん、これらの変数は記号のみを使った形に書き下すことが可能です。 まずは記号から数値を導出します。 $0 = +[]; // 0 (-[] or +"") でも可能 $1 = -~[]; // 1 $2 = $1+$1; // 2 (1+1) $3 = $2+$1; // 3 (2+1) $4 = $3+$1; // 4 (3+1) $5 = $4+$1; // 5 (4+1) $6 = $3<<$1; // 6 (3<<1) $7 = $6+$1; // 7

Prevents the zoom of the viewport by successive tap of the button in iOS 10 Safari.JavaScriptiOSSafariZoomios10 iOS 10 から <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> が機能しなくなりました。 具体的には initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no の解釈が変更になり、特に user-scalable=no は iOS Safari において完全に無視されるようになりました。 (WKWe

Canvas#drawImage を使ってかなり大きな画像を縮小表示すると、派手にジャギーが発生する事があります。(drawImage のデフォルトのフィルターが速度優先らしく、現状このようになってしまうとか) antialias を効かせるか、もうちょっと綺麗に表示する方法が無いか色々と探ってみました。 方法1. canvasContext.drawImage(source, sx, sy, sw, sh, tx, ty, tw, th) を使って描画する方法 画像1 と 2 の Original がこれです 方法2. HTML5 Rocks にあるように ratio = devicePixelRatio / backingStoreRatio を計算し、canvas のサイズ(width, height)と canvas のviewサイズ(style.width, style.heig

このエントリは IE の現状と今後について理解を(ちょっとだけ)助ける物です。時事性とポエム成分(願望)が含まれているため一部の興奮しやすい方々はご注意ください。 IE のサポートポリシーは 2016/01/13 から "その OS における最新の IE のみ" に変化し、サポート期間が大幅に短縮されています(こちらは広く知られている情報です)。 新しい IE のサポートポリシーを参照してください それに加え、 2016/01/15 の MS の発表「条件付きで Windows 7/8.1 のサポートを短縮します」 により、 IE のサポート期間が更に短縮されている状態です(こちらはまだ余り知られていない情報です)。 新しい Windows のサポートポリシーを参照してください 2017/07/17 以降は Windows 7/8.1 をサポートしません Skylake 以降のCPUを搭載

このエントリでは、Web Developer が IE 対応を止めた場合に得られるメリットがどれ位あるのかを示します。 前提として IE 7, 8, 9, 10 のサポートは 2016-1-13 に終了し、IE 11 が残りました。 IE 11 は IE でしか動かないシステム(特定企業向けに書かれたシステムなど)を利用するためのブラウザとして2023年までサポートが継続するそうです。 ずるずるとサポートを強要するビジネス層、エンジニアとの対話の不在、揃わない各社の足並み、繰り返される10年前の記憶 ES6 が本格的に活用される段階(2017年後半〜)になると、 多くの Web Developer が ES6 をサポートしない古いブラウザを「コストをかけて今後もサポートする」か「切り捨てる」か… を真剣に検討する事になります。 Babel などの補助ツールを使う事で部分的に対処療法も可能で

ffmpeg を使い、HTTP Live Streaming(HLS)をファイルに保存し、保存したファイルからストリーミングを行う方法についてffmpegmp4HLS 追記 2016/02/16 に ffmpeg version 3.0 がリリースされました。 ver 3.0 では libaacplus libvo-aacenc が削除されるなど、コーデックとコンテナの統廃合が行われたようです。 このエントリは ffmpeg version 2.x について記述しているため、 ver 3.x ではそのままでは動かない部分があるかもしれません。ご留意ください。 また、 libfdk_aac が使えない場合は、 libfaac を使用してください。 本文 ffmpeg を使い HLS を使ったストリーミングを mp4 フォーマットで保存したり、その反対に mp4 からストリーミングを行う(m3

ECMAScript6にシンボルができた理由 で紹介されている Symbol の使い方を見て、fmfm するためのエントリです。 似て非なる 2つの NativeObject 拡張ライブラリを同時に読み込むとどうなるか 例 Array に JSON.stringify(Array) 相当の機能を拡張するライブラリが2つ(AwesomeArray.js, ExArray.js)あります。これらを読み込むと Array#toJSON が拡張されます。 AwesomeArray.js と ExArray.js には、カンマの後ろにスペースがある/ない という違いがあります。 ES5 式 ES5 で書かれた AwesomeArray.js と ExArray.js です。 ES5 までは、AwesomeArray.js を読み込んだ後に ExArray.js を読み込むと、AwesomeArray

iPhone 6s と force touch event iPhone 6s から ForceTouchEvent が利用可能になりました。 機能を体感できる 簡単なお絵かきデモ を作成しました。 iPhone 6s の Safari でアクセスし、指で画面をなぞってみてください。 Demo Code デモのコードはこのようになります。 <!DOCTYPE html><html><head><title>ForceTouch Event demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> html, body, ul { margin: 0; padding: 0; } canva

iOS 9 Safari WebAudio::AudioBufferSourceNode does not play on first touchstart event.JavaScriptiOSSafariWebAudio このエントリの末尾に重要な追記があります。この問題は iOS 9.3 β1 で fix しました。 iOS 8 Safari と iOS 9 Safari では WebAudio + touchstart において一部動作が異なっています。 iOS Safari の制限(おさらい) まずは、前提となる知識について軽くおさらいから。 ご存知のように、 iOS Safari における Media(Audio,Video)の再生には、以下の制限があります。 Audio や Video リソースの読み込み(load) や 再生(play)は、ユーザのインタラクションを起点とし

Safari がサポートしている Audio と Video フォーマットを確認する方法について説明します。 WebKit のコードを追っかけると... MediaPlayer::getSupportedTypes installedMediaEngines buildMediaEnginesVector MediaPlayerPrivateAVFoundationObjC::registerMediaEngine getSupportedTypes avfMIMETypes と来て、最終的に AVURLAsset audiovisualMIMETypes に辿り着きます。 AVURLAsset::audiovisualMIMETypes を OS X 10.9.5 で実行した結果がこちらになります。 import UIKit import AVFoundation var mimeTyp

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

このエントリは、indirect eval call を使い global を取得する方法についてのメモです。 (0, eval)('this')とは何なのか を拝見したのがこのメモを記述するきっかけです。 このイディオム(indirect eval call)に関連する記事としては、以下の3つが見つかりました。2つめは Dr.Axel さんのものですね。 http://pirosikick.hateblo.jp/entry/20110517/1305645797 ("global", eval)("this") http://www.2ality.com/2014/01/eval.html Evaluating JavaScript code via eval() and new Function() http://stackoverflow.com/questions/19357978