JavaScript

ストリートビューの画像が存在するかどうか調べる/インドアビューを除外する

2016年9月1日更新:ストリートビュー画像の有無を API で取得できることが分かったので書き直しましたGoogle Maps JavaScript API v3 では次のようにして、指定した div 要素に任意の地点のストリートビューを表示することができる。 // ストリートビューを…

Web Storage のデータをウィンドウ間で同期する (IE8+)

HTML 5 で導入された Web Storage ではブラウザに数 MB 程度ほどのデータを保存できる。 仕様上は他のタブやウィンドウでデータが変更されると storage イベントが発生することになっているが、ブラウザによっては多少癖のあるものも存在する。各ブラウザの…

数値を3桁ごとに区切る

最近のブラウザでは toLocaleString() メソッドが用意されているのでそれを使う。 Number.prototype.toLocaleString が実装されていない場合や、(1).toLocaleString() の結果がなぜか "1.00" になってしまうブラウザでは次の代替関数を用いる。 if (!Number.…

全角文字やよく似た文字を正規化する

JavaScript でアプリを作るとき、入力文字の正規化を行って利用者の負担を減らそう。 全角文字 Unicode の Halfwidth and Fullwidth Forms Block のうち、ASCII コードと対応している 94 の文字を置換する。 str.replace(/[!-〜]/g, function(s) { return S…

IE で String.substr の引数に負数の指定が効かない

ゼロ埋めするために次のコードを書いたら Internet Explorer 8 以下ではうまくいかなかった。 var num = 12; ("0" + num).substr(-2); // IE8では "012" このような場合は substr(start[, length]) を使わずに slice(begin[, end]) を使う。 var num = 12; (…

JSHint を導入して xyzzy から使えるようにしたメモ

JavaScript のコードをチェックしてくれる JSHint というツールを導入した。 Node.js と JSHint のインストール こちらを参考にした。かんたん。 Windows に JSHintをインストールしてみた - かわちょでぶろぐ JSHint の設定 ホームディレクトリ (Windows の…

App Framework, Zepto.js 1.0 と jQuery との互換性

2013年12月12日に Zepto.js 1.1.2 がリリースされました (リリースノート)。v1.1 以降は IE10 に対応するなど、動作が異なる可能性があります。App Framework は jQuery 互換のライブラリとして作られた jqMobi から派生し、改良を加えながら現在に至る。 Gi…

DOM ノードの種類を取得・比較する

ノードの種類は node.nodeType で取得できる。 var node = document.body.firstChild; console.log(node.nodeType); 比較は Node オブジェクトに定義された定数を使って行える。 console.log(node.nodeType === Node.TEXT_NODE); Internet Explorer 8 以前で…

setZoom() でエラーが発生するときの対処法 [Google Maps API]

Google Maps JavaScript API v3 を使ったところ次のような例外が発生した。 Uncaught InvalidValueError: invalid argument to setZoom: 15 コードは次の通り。div 要素に設定された属性 data-lat, data-lng から中心の座標、 data-zoom から縮尺を取得して…

Android 4 は screen.width/height の値もデバイスピクセル値で返す

先日 Android 4 の標準ブラウザには、メディアクエリに使われる device-width/height が CSS ピクセルではなくデバイスピクセル値として扱われてしまうバグがあることを紹介した。 Android 4 に存在する device-width/height のバグ - メモ用紙 今回、同様の…

IE 9/10 未満のブラウザとそれ以外を判定する

HTML 5 や CSS 3 の新機能を使う場合、古いブラウザでも誤解なく内容が伝わるよう努めるべきだ。Safari, Chrome, Firefox, Opera の場合、自動アップデート機能やユーザのリテラシーの高さゆえ、古いバージョンを使い続けていることは少ない。そもそもバージ…

Object.prototype.forEach

大昔の「prototype.js の Object 汚染」を思い出した。 http://la.ma.la/blog/diary_200507101154.htm 後に追記されたようだが、 Array.forEach に倣ってきちんと書くとこうなる。 (function(global) { Object.prototype.forEach = function(callback, conte…

jqMobi (1.11) の jQuery との互換性、Zepto とも比較

2013年11月現在、jqMobi は App Framework へ、Zepto は v1.0rc1 から v1.0 (正式版) へとバージョンアップしています。最新版 App Framework, Zepto.js 1.0 と jQuery との互換性 をご覧ください。jQuery と互換性があり、とっても軽い JavaScript ライブラ…

&& 演算子と || 演算子

問題 2 3 7 7を組み合わせて10を作れ。 回答 javascript:alert(!2||3+7||7) JavaScriptの変わった性質。&& || 演算子の判定自体はBoolean型で行われるが、その式全体の値は最後に評価された値になる。 ここでC系の言語ではふつう、&& 演算子はfalseとなる式…

日本語入力時のキーイベントの仕様変更と対策

Camino 2.1a1pre (Gecko 1.9.2, like Firefox 3.6.6pre) を使っていて、テキストボックスの内容に応じて自動的にサイズを調整するスクリプトが動かなくなっていた。調べてみると、そのスクリプトはkeypressおよびkeyupイベントが発生したときに処理を行って…

JavaScriptの特別な値メモ

undefined typeof undefined → "undefined" undefined === undefined → true undefined == null → true undefined == 0 → false undefined == false → false void x → undefined null typeof null → "object" null === null → true null == 0 → false null =…

JavaScriptの配列周りメモ

push/pop, shift/unshift, sort, reverse, splice は破壊的 join は値が undefined または null の要素を無視する [] を使って配列を書く場合 最後の要素区切り , は無視される(最近のJavaScriptでは) 区切りと区切りの間に何も書かないとその要素は定義さ…

入力プロンプトを表示するjQueryプラグインをちょこっと変えたよ

桜ヶ丘さん作のこのスクリプト、JavaScriptで直接色を指定するのはちょっと嫌だったのでクラスを指定して、CSSでスタイルを指定できるようにしました。 入力プロンプトを表示するjQueryプラグインを書いたよ - 桜ヶ丘日記 引数に何も指定しないときは placeh…

Web音声合成API “vds” を使う

vds はWebアプリケーションから使える音声合成APIです。 vds - ホームページ音声読み上げサービスを提供しています。音声読み上げサービスは、インターネットに誰もが使いやすい手すりをつけるをコンセプトにサービスを提供しています。 チュートリアルはこ…

JavaScriptでJW Playerを制御する

忘れないうちにメモ。JW PlayerはFlashを使った動画・音声プレーヤー。 The Most Powerful & Flexible Video Platform | JW Player 下ごしらえ まず window.playerReady という関数を作りプレーヤーのオブジェクトを取得する。 var player; window.playerRea…