JavaScriptで、より偏りのない乱数を発生させる

Mersenne Twister in JavaScript
https://magicant.github.io/sjavascript/mt.html

Mac、iOSだけでmp3が再生されないとき！

HTML5のオーディオ再生、Mac、iOSだけでmp3が再生されないときは、再エンコードしてみる。
変なビットレート値だとなんのエラーも出ず、ただ再生されないことがある。

JavaScript CSVパーサー

いちばん優秀そうなCSVパーサー
https://www.papaparse.com/

いままでEXCELでデータ編集する場合は、Unicodeテキスト→UTF-8保存（Firefox対応）とすることが多かったですが、Excelの新バージョン（2016から？）では、UTF-8 CSVが書き出せるので、これを標準にしていこうと思う。

F2 モバイル向けグラフライブラリ

F2
https://antv.gitbook.io/f2/

モバイルに特化したインタラクティブなグラフが作れるライブラリ。
パンでの移動やピンチイン・ピンチアウトでの拡縮にも対応している。
Canvasに描画するかたち。

IE11 audioタグで playbackRate が適用されないことがある

IE11のaudioタグ実装で、Aの音声を再生後（endedイベント）Bの音声を再生、ということをやろうとしたら、Bの音声に playbackRateを設定してもなぜか反映されない現象発生。再現条件は不明。

以下のスクリプトを常時（ticker的なスクリプト内）実行することで対応。

if(audioObj.playbackRate && audioObj.playbackRate != audioRate){

audioObj.playbackRate = audioRate;

}

Shift JIS でURLエンコードしたい

あるURLにShiftJISでURLエンコードする必要があり見つけたライブラリ

http://polygon-planet-log.blogspot.jp/2012/04/javascript.html

内部UTF-8でSJIS URLエンコードした文字列にする

function sjisencode(_str){
var utf16arr = _str.split('').map(function(c) { return c.charCodeAt(0); });
var utf8arr = Encoding.convert(utf16arr, 'UTF8', 'UNICODE');
var sjisArray = Encoding.convert(utf8arr, 'SJIS');
return Encoding.urlEncode(sjisArray);
}

数式を表示するJSライブラリ

MathJax
JavaScriptを読み込むとTeX形式で書いた数式を表示できるライブラリ。
若干のタイムラグが発生するけれども、きれいに数式が表示できるので便利。

chart.jsでレーダーチャート

公式ドキュメントよりこの記事が参考になった
http://www.madeinclinic.jp/javascript/20160828/

公式
http://www.chartjs.org/docs/latest/charts/radar.html

SVGを手書き風のアニメーションにするライブラリ（vivus.js）

vivus.js
https://maxwellito.github.io/vivus/

SVGのストロークをなぞる感じのアニメーションができるライブラリ。
SVGを全部pathに変換して、stroke-dasharray と stroke-dashoffset をうまく適用させて手書きを再現しているみたいです。

下記サイトで、SVGファイルをアップロードするだけで試せます。
https://maxwellito.github.io/vivus-instant/

Firefoxで非表示の iframeに対する getComputedStyle が null を返す

getComputedStyle が null を返す - 地獄のネコブログ
http://anekos.hatenablog.com/entry/20100516/1273953156

Firefoxで非表示のiframeに対してgetComputedStyleを使おうとすると、nullが返ってきて例外発生で止まってしまう。

Captivateで出力したHTMLをiframeに入れdisplay:noneにしておいて、moduleReadyEventが来たら表示させようとすると、CPM.jsで止まった。

大文字小文字関係なく検索しハイライトする

http://jsdo.it/tsunet111/qX4C

JavaScriptでディープコピー

https://qiita.com/knhr__/items/d7de463bf9013d5d3dc0
Date型を扱わないのであれば、1つ目のJSONでよいかと思う。

ディープコピーとは？
http://kurochan-note.hatenablog.jp/entry/20110316/1300267023
JavaScriptで配列やオブジェクトを = で代入しようとすると、シャローコピーになってしまうので注意。知らないとハマる！

ページ読み込み中にローディング

http://gimmicklog.main.jp/jquery/278/
読み込みに時間がかかるときに、ブラウザならローディング中がわかるけど、Cordovaで囲むとわからないので、いれるほうが親切そう。

数値に関するライブラリ

数値に関するライブラリ、いろいろありましたので簡単にまとめます。

• numerial.js 数値データの加工が簡単に
• http://numeraljs.com/
• 次のようにすると、 stringに 1,000 という結果が入る
• var string = numeral(1000).format('0,0');  // 1,000
•  あとは、1st,2ndのような表現も何も考えずに正しい結果が手に入る
• var string = numerial(1).fortam('Oo');  // 1st

• math.js より高度な数値の加工・計算・単位変換など
• http://mathjs.org/
• いろいろできますが、個人的に使えそうだと思ったのは下記
• 数式処理
• var string = math.simplify("2x * 3x");  // 6 * x ^ 2
• 桁数を指定した数値の丸め(下の例だと、3.14が手に入る)
• var string = math.round(3.141592,2);  // 3.14
• 単位変換
• var string = math.eval(5inch to cm);  // 12.7cm 
• http://mathjs.org/docs/datatypes/units.html
• 距離・面積・体積その他いろいろ対応
• 独自の単位も設定できる

• moments.js 時間に特化した加工・計算ライブラリ
• https://momentjs.com/
• 時間に関して、計算・表示形式の変換・単位変換など
• 相対表示（"～分前"）なども可能。
• 日本語もmoment-with-locales.min.jsで対応

フルスクリーン用JS

https://github.com/sindresorhus/screenfull.js
ブラウザごとの違いを吸収してフルスクリーン実現できる

ネットワークがつながるまで繰り返す

Phonegap Network Connection - Cannot read property 'type' of undefined
http://stackoverflow.com/questions/25672502/phonegap-network-connection-cannot-read-property-type-of-undefined

Androidのエミュレータ環境だと、起動後すぐにアプリが開くので、

ネットワークにつながっていない状態の場合、情報取得などがうまくいかないです。

setTimeoutで500ms程度待つという解決法があったのですが、稀にまだつながっていない場合があったので、

ネットワークを認識するまでsetIntervalでループさせる方法を実装しました

（ある程度のリトライでエラー表示をさせるなどの処理が必要になりそうですが）。

------

  console.log('networkState => ' + navigator.connection.type);

  var connectionDetect = setInterval(function(){

      console.log(navigator.connection.type)

      if(navigator.connection.type != undefined && navigator.connection.type != 'none'){

        clearInterval(connectionDetect);

        console.log('networkState => ' + navigator.connection.type);

        //つながったときの処理

      }

  }, 500);

img 要素の src 属性と onload イベントリスナの設定タイミング

http://please-sleep.cou929.nu/onload-handler-setting-timing-and-async-request-of-image-element.html

imgタグなどでonloadイベントを取りたい場合、srcを設定する前に onloadを記述しておくべきという話。

（下記のコードは上記サイトからの引用）

var img = new Image();
img.src = 'http://example.com/foo.png';
img.onload = function() { // このタイミングではすでにロードが完了している可能性がある
// event handler };
document.body.appendChild(img); 

iOS Safari プライベートブラウズがオンのとき、localStorageが使えない

http://cly7796.net/wp/javascript/can-not-be-used-localstorage-when-private-browsing-in-ios/

• プライベートブラウズで確認することも多いと思いますが、iOS Safariのプライベートブラウズだと、localStorageが使えません。
• setItemsなどをすると、そこでコケてしまい、それ以降は動作しなくなります。

document ready と window load の違い

画像の読込もおわってから処理したいときは、$(window).load を使おう。

https://www.softel.co.jp/blogs/tech/archives/2425

HTML data-*属性

HTMLの属性（attribute）として、data-* とついているものがよくありますが…
他の属性と違った取り扱いができるらしい（しらなかった！）

jQueryだと、
<tag data-abc="myValue">
に対して、
$(selector).data("abc")
で値が取得できます。
ふつうに属性取得するのは、
$(selector).attr("data-abc")

このデータの扱いについて、少し注意が必要そう。
http://qiita.com/Kta-M/items/2eda39750abd10df9801