カテゴリー : JavaScript

[Handlebars.js] registerHelper で独自のヘルパーメソッドを登録する

Handlebars.js は registerHelper を使って、独自のヘルパーメソッドを登録することができます。

例えば、テンプレートで encodeURIComponent メソッドを使いたいときは、

Handlebars.registerHelper('encodeURIComponent', encodeURIComponent);

という風にヘルパーを登録して、

<p>{{encodeURIComponent 'http://tryhandlebarsjs.com/'}}</p>

とテンプレートに書けば、

<p>http%3A%2F%2Ftryhandlebarsjs.com%2F</p>

というような HTML が出力されます。

ヘルパーが不要になったら、

Handlebars.unregisterHelper('encodeURIComponent');

で割り当て解除できます。


参考情報

[Moment Timezone] moment.tz の使い方

Moment Timezone の moment.tz メソッドの使い方を紹介します。

moment.tz には 2 つのインターフェースが用意されていて公式ドキュメントに明記されているので、それを元に説明していきます。

There are two interfaces for using timezones with Moment.js.

moment.tz(…, String) is used to create a moment with a timezone, and moment().tz(String) is used to change the timezone on an existing moment.

直訳すると下記のような感じでしょうか。

Moment.js で timezone を使うために、

  • moment.tz(…, String) は moment instance を timezone 付きで作成する
  • moment().tz(String) は既存の moment instance の timezone を変換する

という 2 つインターフェースが用意されています。

moment.tz(…, String) の使用例

var a = moment.tz('2015-01-01 00:00:00', "America/Los_Angeles");
a.format();
// '2015-01-01T00:00:00-08:00'
 
a.utc().format();
// '2015-01-01T08:00:00+00:00'

moment().tz(String) の使用例

var b = moment.utc('2015-01-01 00:00:00').tz("America/Los_Angeles");
b.format();
// '2014-12-31T16:00:00-08:00'
 
b.utc().format();
// '2015-01-01T00:00:00+00:00'

よく理解して使わないと期待していたのと違う挙動になっているかもしれないので、よく理解して moment.tz を使うようにしましょう。

[JavaScript] Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

ローカル環境でローカルにある JSON ファイルを $.getJSON しようとすると Chrome では file スキーマは読み込んでくれなくてエラーが発生します。

var jsonFilePath = "./json/sample.json";
 
$.getJSON(jsonFilePath, function(data){
  // do something
});

エラーメッセージ

XMLHttpRequest cannot load file:///Users/bakorer/Downloads/hoge.json.
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource.

ステージングサーバに設置して http 経由で確認するしかなさそうです。

簡単に確認する方法だと DropBox の Public ディレクトリに設置して、https://dl.dropboxusercontent.com/u/xxx/index.html とかいう URL でアクセスすることで確認できます。


参考情報

[JavaScript] jsdom memory leak (メモリリーク)

Node.js で jsdom を利用して数万件のウェブページをスクレイピングしたところ out of memory エラーが発生しました。

Node.js のエラーメッセージ

FATAL ERROR: CALL_AND_RETRY_2 Allocation failed - process out of memory

jsdom のメモリリーク解決方法

jsdom.env メソッドに渡す callback メソッドの中で使用した window オブジェクトに関連するメモリを解放するために window.close() メソッドを呼ぶ必要があるそうです。

jsdom.env(html, function (errors, window) {
  // free memory associated with the window
  window.close();
});

ドキュメントに書いてある通りに使わないとダメだなぁと痛感しました・・・。


参考情報

tmpvar/jsdom

jsdom and node.js leaking memory – Stack Overflow

javascript – Memory leak in Node.js scraper – Stack Overflow

[JavaScript] merge recursive なメソッド

JavaScript で merge recursive なメソッドは lodash.merge を使うのが良さそう。

_.merge – Lo-Dash documentation

説明とかはここには書かないので、参考情報を読むといいですよ。


参考情報

underscore.jsだと再帰的にマージできないのでlodashを使う – Labo Memo