HTML: JavaScript で書き換えられる前のソースコードを取得

ページ読み込み時に JavaScript が HTML の内容を書き換えることで、
広告や Twitter のタイムラインを表示するページが多くある。

サイトの移植などで、元のファイルに直接アクセスできず、
ブラウザのデバッグツールで HTML 等をコピーしてくる場合、
JavaScript の使用をOFFにした状態でデバッグツールから HTML を取得すると、
JavaScript で書き換えられる前の元のソースコードを取得することができる。

広告や Twitter タイムラインなど、
読み込み直後に書き換えられるページを移植する場合に便利。

jQuery：onclick イベントが動作しない場合

jQuery() から要素をクリックする場合は以下のように .click() や .trigger('click') が使用できる。

// .click() を使う場合
$('#my_element').click();

// .trigger() を使う場合
$('#my_element').trigger('click');

しかし、詳しい原因はわかっていないが上記の処理で発動しないケースがあった。
その場合は、DOM を取得して DOM の .click() を実行すると通る場合がある。

// DOM の click() を呼び出す
$('#my_element').get(0).click();

Chrome アプリ：<webview> から親要素へオブジェクトを渡す

Chrome アプリの <webview> から親要素（embedder）にデータを渡す際に console.log() を使う方法がある。

<webview> 内で console.log() を使用すると、<webview> の consolemessage イベントが実行される。

JSON データを console.log() で出力して、親側で受け取れば複雑なオブジェクトも渡すことができる。

親要素側

var webview = $('#my_webview');
webview.on('consolemessage', function(e) {
    var message = e.originalEvent.message;
    try {
        var datas = JSON.parse(message);
        console.log(' からデータを受け取りました', datas);
    } catch(e) {
        console.log(' からログが発行されました', message);
    }
});

webview 側

var result = {
    id: 1,
    value: 1234
};
var json = JSON.stringify(result);
console.log(json);

JavaScript: <input type="image"> で座標を送る

<form> 内の <input type="image"> は画像をクリックした時の、
マウスカーソルの座標（画像の左上の 0,0 とする相対座標）も送信する。

jQuery でお手軽にクリックイベントを実行すると、
座標として x = 0, y = 0 が送られる。

JavaScript による自動クリックの対策として、
<input type="image"> のクリック時の座標がセットされていることや、
(0, 0)以外の座標でなければリクエストを拒否するサイトも存在する。

JavaScript から座標をそれっぽく送りたい場合は、
createEvent() と initMouseEvent() で
座標を指定したマウスクリックイベントを作成・実行すれば良い。

// 検索ボタン(をクリックする場合)
var searchButton = document.querySelector('input[name=search]');
var event = document.createEvent('MouseEvents');
event.initMouseEvent(
 'click',
 true,
 true,
 window,
 0,
 0,
 0,
 $(searchButton).position().left + 15,  // X = 15
 $(searchButton).position().top + 15,  // Y = 15
 false,
 false,
 false,
 false,
 0,
 null
);
searchButton.dispatchEvent(event);

参考
<input type=image>で送信すると、X,Y座標が送信されるので、調べたら闇だった | それマグで！
http://takuya-1st.hatenablog.jp/entry/2014/12/05/145944

jQuery: 要素内の HTML を無視したテキストを取る

.html() だと HTML を含めた内容を取れる。
.text() だと HTML を無視した内容を取れる。

HTML
<div id="my-div">Hello <strong>World !</strong></div>

$('#my-div').html();  // Hello <strong>World !</strong>
$('#my-div').text();  // Hello World !

Chrome アプリ： 内の console.log() を jQuery で取得

Chrome アプリでは <webview> 要素を設置することで、
外部サイトをアプリ内に表示することができる。

<webview> 内で発生するイベントは、
<webview> を含む親（embedder）から JavaScript 経由で取得できる。

<webview> 内で console.log() を使用する場合は、
consolemessage イベントを使って親要素側で改めて出力しなければ確認できない。

jQuery の場合は originalEvent の中に入っているイベントから取得する必要がある。

var webview = $('#my-webview');

// webview 内で console.log() が使用されると consolemessage イベントが発生
webview.on('consolemessage', function(e) {
    // 引数内の originalEvent.message にメッセージが渡される
    console.log(e.originalEvent.message);
});

jQuery の .on() でバインドした場合は、
本来のイベントオブジェクトは originalEvent 内に格納されるので注意。

jQuery: 選択されたラジオボタンの取得

セレクタで :checked を使用するとチェックされている要素を取得できる。
必要であれば name 属性も指定する。

var selected = $('input[name="my_input"]:selected');
alert('選択されたのは' + selected.val() + 'です');

JavaScript： Cookie を読み書きするときのライブラリ

Mozilla Developer Network で公開されているコードが非常に便利。
https://developer.mozilla.org/ja/docs/DOM/document.cookie

docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])

のように使用できる。

JSON の文字列にシングルクォートが使えない

JavaScript のオブジェクトではシングルクォートでもよいが、
JSON ではダブルクォートのみ使用できる。

{
    "key1": "value1",  // これは OK
    'key2': 'value2'   // これは NG
}

JavaScript: 小数点の計算の誤差対策

JavaScript では少数の計算時に丸め誤差が発生する。
例えば

var result = 4.225 * 100;
console.log(result); // 422.49999999999994

自動見積もりなど計算ツールを作成する際には注意が必要。
上記の場合は Number.toFixed() で一旦文字列に変更すると誤差を回避できる。

var result = (4.225 * 100).toFixed(1);
console.log(result); // 422.5

少数の計算箇所に toFixed() を挟むようにする。

fancybox.js で $.browser エラー

fancybox を使用しているページで $.browser が使用できないエラーが出ていました。
jQuery のバージョンが 1.8 までしか対応していないことが原因のようでした。
jQuery 1.11 → 1.8 へ変更したところ解消出来ました。

参考
Fancybox doesn't work with jQuery v1.9.0 [ f.browser is undefined / Cannot read property 'msie' ] | stackoverflow
http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read

JavaScript のソースマップファイル

jQuery を使用しているサイトでたまに .map ファイルが存在しない
というエラーが出ていることがある。

調べてみたところ .map ファイルはソースマップといい、
変換前と変換後の ファイルの対応関係を表しているものらしい。

ミニファイされたコードでエラーが発生した時に、
元々のソースコードでいうところのエラー発生位置を通知することができる。
他にも Coffee Script などから変換した JavaScript のエラー箇所が、
元々の Coffee Script のどの部分のエラーなのかを知ることができたりする。

jQuery の .map ファイルも公式で配布されているので、
サーバ上に配置するとエラーは発生しなくなる。

ソースマップについてはこちらがとてもわかりやすいです。
#JSオジサンで Source Map について話してきました - document
http://imaya.blog.jp/archives/7169783.html

JavaScript で RSS 取得・解析

Google が提供している JavaScript ライブラリ「Google Feed API」を使うと、
JavaScript から RSS を簡単に扱えるようになります。
WebStorage などと組み合わせるとローカルの RSS リーダなども
簡単に作れそうです。

Google Feed API
https://developers.google.com/feed/


例えばこのブログの最新記事を読み込む場合は以下のようになります。

google.load("feeds", "1");
google.setOnLoadCallback(initialize);

function initialize() {
    var feed = new google.feeds.Feed('http://yokano-jp.blogspot.com/feeds/posts/default');
    feed.setNumEntries(20);
    feed.load(function(result) {
        if(!result.error) {
            console.log(result);
        }
    });
}

RSS1.0, RSS2.0, Atom どれでも読み込めるようです。

JavaScript の new RegExp() で以下の様なエラーが出る場合は、
正規表現の書き方が間違っています。

Range out of order in character class

特に忘れやすいのがエスケープ記号 \ を 2 回書くことです。

var reg1 = /^([A-Z_\-\.])/  // こちらは通る
var reg2 = new RegExp('^([A-Z_\-\.])'); // エラー

// で定義する場合1回ですが、new RegExp() で書く場合は、
文字列として 1 度解釈されるのでエスケープ記号が消えないように \\ と 2 回書く必要があります。

var reg2 = new RegExp('^([A-Z_\\-\\.])'); 

以前、ブログで書いたはずなのですがすっかり忘れていて、
結構詰んでしまいました。

CSS の zoom を使ってコンテンツの高さを合わせる

スクロールなしで画面内にきっちりフィットさせたいコンテンツを、

PC、スマホなど様々なサイズに対応させる場合、

１つの方法として CSS の zoom が使用できます。

とくに画面のサイズが固定の時に使用できます。

例えばコンテンツの高さが 1000 px 固定の場合は、
以下のようにしてウィンドウの高さにきっちり合わせることができます。

$(function() {
    var height = $(window).height(),
        zoom = height / 1000;
    $('body').css('zoom', zoom);
});

jQuery UI DatePicker で日付のフォーマットを指定

jQuery UI DatePicker で日付を選択した時に、
実際に <input> 要素の value としてセットされる日付のフォーマットを設定できる。

$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });

http://api.jqueryui.com/datepicker/#option-dateFormat

sessionStorage にオブジェクトを保存

sessionStorage に保存されるデータは自動的に文字列に変換されます。
オブジェクトをそのまま保存しようとすると以下のようになってしまいます。
JSON で保存するのがオススメです。

var data = {
    'key': 'value'
}
sessionStorage.setItem('my_data', JSON.stringify(data));

...

var data = JSON.parse(sessionStorage.getItem('my_data'));

Google CDN の jQuery UI で datepicker を日本語に

Google CDN で jQuery UI を読み込んだ後に、
以下のファイルを読み込むと日本語化される。

http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

NicEdit で見たままのデザインにする

MIT ライセンスで自由に使える NicEdit ですが、
他の WYSIWIG エディタと同様に初期状態だと、
見たままのデザインになっていません。
（最終的に出来上がりのページに適用される CSS が適用されていないため）

最終的に出来上がった HTML を公開するページで
読み込まれる CSS を NicEdit を使用するページに適用すると、
見たままのデザインになります。

CSS の優先順位で適用されない部分は、
.nicEdit-main など編集領域のセレクタをうまく使って適用されるようにする必要があります。

jQuery: Ajax でエラーが出るときのレスポンス確認

dataType を json にして jQuery の $.ajax() で通信している時に、
error に処理がわたってしまう場合、
パースエラーが発生していることがあります。

とりあえずサーバからのレスポンスを見てみるとエラーの原因が分かりやすいです。
以下のように一時的に dataType を text にして、
console.log() や document.write() で表示してみると良いと思います。

$.ajax('target_url', {
    type: 'POST',
    dataType: 'text', // text に変える
    data: {
        client_data: 'my_data'
    },
    error: function() {
        // エラー
    },
    success: function(response) {
        document.write(response);
        return;  // エラーを表示して抜ける
        ...
    }
});