svgからcanvasを経由して画像に変換する。 昔は、svgの内容をcanvasに変換するライブラリcanvgが必要だったが今はそのままいけるっぽい！？ SVGを画像に変換してダウンロードする方法 - Qiita

GigazineさんのBPG紹介記事が変なので、技術的に検証してみた所…なんと！ - Windows 2000 Blog

つまりはSVG、imgタグでsvgを指定できるんだ。 SVG中に画像をbase64で格納してあるだが、gz圧縮してあげれば多少はましかも GIF に変わると噂の XNG という新しいアニメーション画像フォーマットを調べてみた | WWW WATCH

someを使う方法があるらしい。 someというメソッドの使い方からはプログラムの意図が分かりにくいというのはもっともですが、個人開発だったら別にありな気がする。 場合によっては、プログラムを短く簡潔に書ける。 var result = null; var arr = ['up','do…

// !を使う !!1; // true !!0; // false !!'zawa'; // true !!''; // false !!null; // false !!undefined; // false 型変換のいろいろ - Qiita

何を言っているのかよく分からないかもしれませんが、 ある共通の配列処理の中で、必ずしもソートが必要ない場合、デフォルト値としてソートしない無名関数を設定したい。 ソート条件を省略すると、デフォルトは文字列比較でソートされてしまうので Array.so…

chromeのjavascript コンソールでobjectの中身を表示するときに console.dir(object); or console.log(object); or object; とするといずれも階層構造で表示してくれるが、コピペできない。 console.log(JSON.stringify(object); JSONに変換するとコピペでき…

bashのfor inと同じ構文がjavascriptにもあるが、挙動が全く異なるので注意bashのfor inと同じ動作で行いたい場合 今はfor of構文がある。ちなみにjavascriptのfor inは、いろいろな問題を持っていて、ほとんど使い道がない。 for...of - JavaScript | MDN f…

例えば、SPAなどrequire.jsで非同期にjqueryが呼ばれる場合などで、jqueryの読み込みが完了するまで待つ場合。 jqueryが存在しない場合に1秒後にもう一度自分自身を呼び出したい場合arguments.calleeを使う。但し、arguments.calleeは非推奨。そういう用途で…

いつの間にか、startsWithやendsWithが追加されている。 正規表現で String.match(/^比較文字列/) String.match(/比較文字列$/) でもいいけど、気持ち的に処理が重くない方がいいかな。最近のchromeとかでは部分一致のincludesも追加されている。 chrome拡張…

ソート条件で、不等号が逆で、返り値なだけなのに同じような記述を書かなきゃいけないのをなんとかしたい。こんな感じ Array.sort( (a,b) => { if(a > b) return -1; if(a < b) return 1; return 0 }) 比較対象のaとbがただの配列だったらいいけど、オブジェ…

C#とかでおなじみのstartsWith endWithが使える環境では使えるのでこいつを使うといい感じあとは str.matchの正規表現が定番ですね。 部分一致について、正規表現を使うのはイマイチだし、indexOfは-1と比較させるのが、なんか嫌だしと思っていたら、こんな…

reduceで空配列を操作しようとすると Reduce of empty array with no initial value エラーが発生する。 対応方法は、reduceの初期値に0を与える Javascript Reduce an empty array - Stack Overflow

例えば、あるページのリストをjsonを取得して さらにそのリストの一覧から、それぞれのdetailのjsonを取得する場合取得したリストの一覧をwhenでまとめて非同期で取ってくるものは良く見かけたけど 直列でやるやり方が分からなかった。これでいけるらしい。 …

$.ajaxの単体の記事はわりと良くみかけるけど、多段の場合のサンプルがなかなか見つからなかったのでメモ。callback地獄を抜け出す為に、最近は、javascript自体にgeneretorやらpromiseやらが備わっているが、jqueryにはDeferredという仕組みが備わっており…

できないので、concatを使う。 ぐぐってもすぐ出てこなかったのでメモ Arrayのconcatメソッドが何気に便利だった - あと味

プロパティは動的に生成している。 try { Object.defineProperty(Array.prototype, "last", { get: function(){ return this[this.length-1]; } }); }catch(e){ Array.prototype.__defineGetter__("last", function(){ return this[this.length-1]; }); } ja…

色々、やり方はあるが、最終的には以下で落ち着いた。 function isset (fn) { var value; try { value = fn(); } catch (e) { value = undefined; } finally { return value !== undefined; } }; console.log( isset(() => a.b.c), isset(() => a.b.c.d.e.f)…

今なら、アロー関数を使えばもれなく、勝手に渡ります。var that = thisとか一旦変数に代入したり.bind(this)とかしていたのが懐かしいですね。 that(self)とか別の変数にthisを入れる奴 var self = this; something( function () { // callback stuff } ) …

merge(obj1,obj2); これだけだった for(var prop in obj2){ obj1[prop] = obj2[prop] } とかやってたよ。 そうなると、あんまりfor in文で使いどころないなぁ。 複雑なオブジェクトのマージとかに使うか javascript オブジェクトのマージあれこれ - Code Life

このレベルならなんとかなりそう。 JavaScript難読化読経

function って書くの冗長だなと思っていたら、いつの間にか実装されていた。 chrome拡張の開発だったら、chromeが常に最新版に更新されるし、chrome以外のことを 考える必要ないので、使ってもいいんじゃね。chrome拡張の開発は、最新の技術を心置きなく盛り…

getJsonがあるので、postJsonがあるかと思えば、そんなものはないので、みなさん、postJsonを勝手に作って使っている模様。わりと、良く使うと思うんだけどなぁ。。。なぜか標準ではない。 jQueryでJSONをPOSTしてJSONのレスポンスを受け取る - ブログ - ワ…

今度は、generatorにしたせいで、かえってソースが難解になっているような気がするのだが、気のせいかな。ここらへん、一般には全然浸透していない気がする。 ES6 Generatorを使ってasync/awaitを実装するメモ - maru source

テキストを均等割り付けしてくれるjQueryプラグイン「jQuery.justify.js」 | OZPAの表4 どうしてもやりたいならjavascript使うしかないがイマイチな感じ

なるほど、overflow:hidden;が必要だったのか overflow:hidden; 参考 [CSS] 角丸は便利だけど理解に苦しむ時もある

ぐぐってもあまり出てこないのでメモ基本は以下の使い方で、:checkedと隣接セレクタのコンビで状態のON OFFを実現 折りたたみ可能なパネルの作成 - CSSのみを利用した折りたたみ領域 / アコーディオンパネル (CSS Tips) 頑張ると、モーダルウィンドウや、Lig…

使い方は簡単で、 chrome.tabs.captureVisibleTab(null,{format:"png"},function(string){}) とするだけなのだが 何故か以下のエラーが発生 tabs.captureVisibleTab: The 'activeTab' permission is not in effect because this extension has not been in i…

formでinputのchangeやclickイベントだらけになった時に中級者に上がる為の一手。 実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid

cssでできなくはないらしいが、かなり無茶なので、素直にcanvasに書いた方がよさそう。 参考 Pure CSS Circular Percentage Bar | CSS Script