JavaScript on Lin's Blog

Vue.js でオブジェクトを表として美しく表示する方法

Fri, 17 Mar 2017 01:39:34 +0000

Vue.js では、v-for を使うと、配列を HTML のテーブルやリストとして見やすくレンダリングできます。しかし、オブジェクトのキーと値をテーブルとして表示したい場合はどうすればよいのでしょうか。例えば、連絡先の情報を JS のオブジェクトと配列で多数保存していて、連絡先ごとにキーが異なるとします。連絡先1の情報をテーブルで表示したいのですが、v-for はこの用途には向いていないのでしょうか？

ページの onFocus の後に input の onFocus が発火するのを防ぐ方法

Thu, 16 Feb 2017 11:27:59 +0000

最近の仕事で、ウェブサイトに Google Analytics のユーザーイベント追跡コードを組み込んでいました。HTML のイベントを使ってコードを input にバインドし、ユーザーが特定の欄やボタンをクリックするたびに Google Analytics へ記録を送信するようにしました。この方法自体には問題ありません。ところが、ユーザーが input 欄をクリックしたあとに別のページ（Chrome のタブ）へ切り替え、再び自分のページに戻ってきた（Page onFocus）とき、input の onFocus イベントが自動的に発火することに気づきました！

JavaScript で変数が NaN かどうかを判定する

Tue, 14 Feb 2017 22:44:05 +0000

JavaScript には本当に奇妙な落とし穴がたくさんあります。今日、文字列を数値に変換するために parseFloat を使っていたところ、渡された値を数値に変換できない場合は NaN（Not a Number）が返ることを知りました。そこで、次のようなコードで判定することにしました：

var score = parseFloat(prompt("Score:"));
if(score === NaN) {
console.log("Not a Number");
} else {
console.log(score);
}

一見すると当然に見えるコードです。undefined や null のように、直接等値比較できそうに思えます。まさかまったく期待どおりに動かないとは思いもしませんでした。

訪問者による記事のコピーが心配？ JSで注意書きを自動追加する、またはコピーを禁止する方法！

Sun, 12 Feb 2017 23:43:41 +0000

多くのコンテンツサイトには、テキストをコピーすると元記事のURLを自動で付けてくれる仕組みがあります。たとえば魔境歌詞網や知乎などです。中にはテキストのコピーを一切禁止しているサイトもあります。こうした機能の実装は難しくなく、数行の簡単なJavaScriptで済みます。ただ、その前にサイトに本当に必要な機能なのかを考えるべきです。通常の訪問者がテキストをコピーしてFacebookに貼り付けたとき、それは本当にサイトの害になるのでしょうか。また、訪問者によるコピーを本気で防ぎたいなら、こうした方法は「君子は防げても小人は防げない」というもので、本当に正直者だけを防げるにすぎません。それで利益を守れているのでしょうか、それとも、サイトを使いにくくしているだけなのでしょうか。

JSでフロントエンドのファイルアップロードを処理する：プレビュー、サイズ、寸法、形式

Thu, 09 Feb 2017 13:44:33 +0000

ファイルをアップロードするときに一番嫌なのは、5分後に「ファイルが大きすぎる」「サイズが正しくない」と言われることです。アップロードの検証は通常バックエンドに任せるため、条件を満たしているかを確認するには、まずファイルをアップロードしなければなりません。特に画像は縦横比も確認する必要があります。これらすべてをバックエンドに任せきりにすると、ユーザー体験が損なわれることがあります。以前、NewTalkでプロフィール画像のアップロードを調べていたとき、これらの多くはフロントエンドで処理できることがわかりました。JSとHTML5 APIを使えば、ファイルの形式、サイズ（20MB）、寸法（100x100）をチェックできます。プレビューやフロントエンドでの画像の切り抜き・変換まで行えるのです！

JavaScript で関数の実行時間を計測する

Tue, 24 Jan 2017 18:56:38 +0000

JavaScript で関数の実行時間を計測するには、関数の実行前に取得したタイムスタンプと、実行後に取得したタイムスタンプの差を取ればよいです。多くの人は new Date().getTime() でタイムスタンプを取得しますが、関数の実行時間が1ミリ秒未満の場合は、タイムスタンプの最小単位がミリ秒までなので計算できません。そこでここでは、Window.Performance API の使用をおすすめします。これはページの読み込み開始からの経過ミリ秒数を提供し、精度は1000分の1ミリ秒までです。

JavaScript で文字列をすべて置換する

Mon, 16 Jan 2017 01:20:29 +0000

JavaScript で String.replace を使うときは、期待どおりに動かない場合があるので注意してください。ある文字列を置換しようとすると、replace は最初の1つしか置換しないことに気づくでしょう。たとえば “AAA”.replace(“A”, “B”) は、“BBB” になると思うかもしれませんが、実際には “BAA” になります。これは、JS の replace の第1引数が実は文字列ではなく正規表現だからです。文字列を渡すと、最初に見つかったものだけが置換されるため、期待と異なる結果になります。

JavaScript でブラウザの履歴を操作し、URL を変更して、戻るボタンのイベントを扱う（SPA に必須）

Sat, 14 Jan 2017 12:59:02 +0000

今や JavaScript はどこにでもあります。Ajax、ページの切り替え、ポップアップウィンドウなど、JS でウェブページを操作することはますます一般的になっています。React JS や Vue JS など、Single Page Application（SPA）の開発を支援する JS フレームワークまで登場しています。JS でウェブページを操作するときに一番怖いのは、URL の変化と履歴です。たとえば jQuery でページを切り替えても、JS の操作なので URL は変わりません。さらにユーザーがブラウザ左上の「戻る」ボタンを押すと、履歴に JS の操作が記録されていない（実際には記録できない）ため、まったく別のページに戻ってしまいます。この一連の問題を解決するには、HTML5 が提供する history.pushState、history.replaceState、そして onpopstate イベントを使えます。

端数切り上げ機能の実装の考え方と方法

Wed, 11 Jan 2017 23:30:33 +0000

少し前、嘖嘖（Zeczec）で「端数切り上げ」機能を見かけました。たとえば会計で 1359 元になったとき、端数切り上げボタンを押すと 1400 元になります。面白い機能ですが、実際に実装してみると、端数切り上げは思ったより難しいことがわかりました。技術面以外の配慮事項もたくさんあります。ここでは、実装中に直面した問題と、その過程、そして最終的な解決策を記録しておきます！

JavaScript の Page Load、Focus、UnFocus、Exit イベント

Tue, 03 Jan 2017 20:43:11 +0000

JavaScript でユーザーがいつウェブページに入ってきたかを記録することは、多くの人がすでにやっていると思います。でも、ユーザーがいつページを「閉じた」のかを判断する方法を考えたことはありますか？今のブラウザは複数のウェブページをタブで表示するので、ユーザーが実は別のページを見ていて、あなたのページはただ開いたままになっているという可能性もあります。たとえば YouTube もこの問題によく直面します。ユーザーが音楽を聴くためにページを開いたままにしていても、実際には Facebook を見ているのです……。

今回は、JS のページ読み込みとクローズのイベント、そして Focus（ページに入った）と UnFocus（ページから離れた）のイベントを簡単にまとめます。これらのイベントを使えば、ユーザーの操作状況を記録して分析できますし、ユーザーがページから離れたときに音楽の再生を止めるといったことも実現できます。

JavaScript でクリップボードにテキストをコピーする

Sat, 10 Dec 2016 15:19:09 +0000

以前は、JavaScript でクリップボードを操作してテキストをコピーしたり貼り付けたりするのはとても面倒でした。NTUST.ME（台湾科技大学の短縮URLサービス）を開発したとき、短縮した URL をみんなが簡単にコピーできるようにしたいと思い、JavaScript のクリップボード API を調べました。すると、新しめのブラウザには execCommand という関数があり、コピーや全選択など、便利なテキスト操作がたくさんできることが分かりました。では、ご紹介しましょう！

Enable Cross-Origin Resource Sharing (CORS) for Phaser.js

Fri, 02 Dec 2016 14:01:31 +0000

Phaser JS で別のドメインにあるリソースや素材を読み込もうとすると、ブラウザの同一生成元ポリシーにブロックされ、次のようなエラーメッセージがいくつも表示されます。

XMLHttpRequest cannot load http://s.ntustcoding.club/scroll-game-workshop/map.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

実は、Phaser 自体がクロスオリジンリソース共有（CORS）に対応しており、簡単な一行を書くだけで解決できます。ただし、利用しているホスティングサービスも CORS に対応している必要があります。

【jQuery】Lazyload - 画像の遅延読み込み

Wed, 27 Apr 2011 19:15:30 +0000

写真系のサイトには一般的に多くの画像が掲載されています。訪問者がそうしたサイトを開くと、たくさんの写真を読み込むため、表示まで時間がかかります。これはサイトのホストのトラフィックに大きく影響するうえ、訪問者側のCPU Timeも大きく増えてしまいます。ここでは、画像の読み込みを遅らせるjQueryプラグイン「Lazyload」を紹介します。つまり、サイトにアクセスしたときにすべての画像を一度に読み込むのではなく、一部だけを読み込みます。ブラウザのスクロールバーを動かすと「今見ている範囲の画像」を読み込むので、ページの表示速度が速くなるのです。

【JavaScript】encodeURIComponent――URL をエンコードする関数

Wed, 22 Jul 2009 14:49:56 +0000

JavaScript で GET リクエストなどを行うときには、JavaScript が URL のエンコードを要求してくることによく直面します。URL のエンコードが必要な関数では、encodeURIComponent を使って URL をエンコードできます。