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

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

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

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

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

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で止まった。

数値に関するライブラリ

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

• 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で対応

VBA 実行時エラー'1004'が発生する

VBAでコピーして貼り付けを実行しようとすると、実行時エラー'1004'が発生する際の解決方法

---
実行時エラー'1004'が発生します。
https://answers.microsoft.com/ja-jp/msoffice/forum/msoffice_excel-mso_winother/%E5%AE%9F%E8%A1%8C%E6%99%82%E3%82%A8%E3%83%A9/63090c23-3e6c-4855-80c5-d9e8684972c8

この質問の一番下の回答で解決。簡単にまとめると、

• CopyのあとDo Eventsを使う
• Do EventsのあとSleepを入れる
• それでもエラーが出る場合は、On Errorで例外処理を記述する。

なお、このSleepの書き方では64bitのコンピュータで実行すると怒られるので、下記のように記述する必要がある。

Sleep Lib “kernel32” gives 64-bit systems error
https://stackoverflow.com/questions/41638504/sleep-lib-kernel32-gives-64-bit-systems-error

Captivateで同じスライドに戻る高度なアクション

http://blog.lilybiri.com/replay-slide-button

Captivateのアクションだと、標準では「今のスライドの最初に飛ぶ」機能がありません。

高度なアクションを使って、

cpCmndGotoSlide = cpInfoCurrentSlide - 1

とすると、今のスライドの最初に飛んでくれます。

Androidでリリース前に簡易テスト

Google Play Developer Consoleの「リリース前レポート」を試すhttp://qiita.com/yamacraft/items/2effc86401af3f70248b

• 無料でテストができる
• Google Play Developer Centerからアルファ版・ベータ版をアップロードするだけ
• テスト対象端末は無作為に選ばれる
• 端末を選びたい場合は有料サービスになる
• 14機種でだいたい外国語の端末（日本語も表示できる）
• OSは今のところ Android 4.4～Android O Preview にあたる
• 4.4, 5.0, 5.1が多めで、利用者の実態に即してそうな感じがします
• 操作等も細かくは指定できないが、

Google Playストア でインストールできないエラーを解消する

Android旧機種にアプリをインストールする際、 103 エラー
https://saturday-development.com/archives/4447.html

Phonegapで作ったアプリがPlayStoreにて103エラーが出てしまうエラー。
jarsigner の後ろに -sigalg SHA1withRSA -digestalg SHA1　を付加すると解消するようです。

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

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);

iOSの"done"などを英語から日本語に

http://shake-yama.blogspot.jp/2015/07/cfbundledevelopmentregionjapanese.html

Target設定のInfoタブ内、Custom iOS Target Properties（appName.plist）に
Localization native development region を Japaneseに変更で日本語に変わりました
（Japanとポップアップに出ますが、それでは日本語化されません）

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などをすると、そこでコケてしまい、それ以降は動作しなくなります。

Android4.3以下でSVGがおかしくなる

https://iwb.jp/android-4-3-svg-image-display-illustrator/

• 4.4より前のAndroidの場合、Illustratorで書き出したSVGファイルが正しく表示されないことがある。
• Illustratorで書き出す際に「レスポンシブ」のチェックを外す（widthとheightをSVG内に指定する）ことで問題なく表示される

Chromeでfont-sizeを10px以下に設定する方法

http://time-complexity.blogspot.jp/2013/12/chrome-font-size-10px.html

• Chromeは「最小のフォントサイズ」という設定があり、CSSでどう設定しても10px以下にならない。
• transformのscaleで小さくするしか方法がない。
• この方法を使えば、ルビのスタイルを操作できない（？）Chromeでも小さくできる。
• ルビの位置も設定できない（？）けれど、transform:translateYで無理やり動かせる

Captivateでの「フレームに入ったときのアクションを実行する」リセットボタンの作り方

Captivateでの「フレームに入ったときのアクションを実行する」リセットボタンの作り方
http://blog.lilybiri.com/replay-slide-button

Captivateで同じスライドを最初から実行するアクションを素直に作っても、「入力時アクション」が実行されません。
しかし、下記の方法であれば、入力時アクションが実行されるアクションを作ることが可能です。

• リセットしたいスライドの「入力時」アクションで、スライドに入ったときのフレーム数をユーザー変数(上記の例ではv_enter)に代入
• リセットさせたいときに実行されるアクションで、"cpCmndGotoFrameAndResume = v_enter - 2"と設定する

---

「インタラクション」の「ドラッグアンドドロップ」は、「クイズに含める」にチェックしていない場合、フレームに入ったときにリセットされるので、アクションでドラッグアンドドロップをリセットさせたいときにも有効です。

Premiereにマスクをかけて、動きをトラックさせる

マスク＆トラックで、動きのある顔にぼかしをかける
https://helpx.adobe.com/jp/premiere-pro/how-to/blur-face-masking-tracking.html

顔にぼかしを入れるチュートリアルで下記２点について説明してあります。

• ぼかし系のエフェクトのかけ方
• 自動トラッキング機能

自動トラッキング機能

• Premiereが自動で動きを察知して保管してくれる機能。
• フレームとフレームの間に大きな移動があると、迷子になって、誤検出される。
• これでバーッと動きを付けて、微調整するのが良さそう。

アニメーションGIFの諸々を取ったり操作したい

libgif-js  https://github.com/buzzfeed/libgif-js

アニメーションGIFをcanvasに展開して、JSから再生・停止や、再生終了時のイベント発火などを実現している。

IEでものすごく遅くなります。クロスドメインもダメです。
（結局アニメーションGIFを使わずに、mp4にしてvideoタグの方向にしましたが、参考までに…）

gulp + EJS で JSONからファイルを生成する

http://kinacom.hatenablog.jp/entry/2015/08/04/211403

大量の(150個くらい)のHTMLをほぼ手作業で作成する必要があったのですが、定型文を流し込んでいく感じの作業だったので、自動化しようと思い立ち、イマドキっぽくgulpでやってみました。

glupのサンプル自体はたくさんあるのですが、上記のものが割と新しめでほぼそのまま使えます。

EJSとglupのファイルを用意すること自体は10分くらいででき、結果として75ms で約150のほぼ完成形のファイルが生成されました
（JSONファイルを作るのが一番手間でしたが、そこは目をつむります）。

---

追記  EJSでなにができるかは、下記の記事がよいです。

テンプレートエンジンEJSで使える便利な構文まとめ（http://qiita.com/y_hokkey/items/31f1daa6cecb5f4ea4c9）

if文で表示・非表示などが可能なので、ちょっとしたHTMLの大量生産にはうってつけだと思います。

Javascriptで改行を含む長い文を扱う

http://7cc.hatenadiary.jp/entry/string_linebreak_
改行のある長い文章なんかを変数に入れたいときに。
functionにコメントアウトした文章を入れ、そのコメントを文字列に変換して、コメント部分を消去する　ということをしています。

※ 上の記事にもあるように、最新環境だけがターゲットの場合は非推奨。

※ 内容によってはうまくいかないこともあるようで、私が試した内容だと、 replace一回のみパターンでは、iOS Safariでゴミが残った。