@fugaco

JavaScriptのイベントがうまく効いていないときの原因の探し方例

あるボタンにclickイベントを設定してあるのに、クリックしてもそのイベントが起きない・・・なぜだろう?ということってありますよね。設定したclickイベント自体に問題がないならば、他のイベントが悪さをしているのかもしれません。


HTML要素にどんなイベントがついているのかを調べるために、少し前まではVisual Eventというブックマークレットを使っていました。

20150421-0.png

私のFirefoxに入れているVisual Eventは少しデザインが古いものかもしれませんが、だいたいこんな風に見えます。

イベントがついている要素のところにイベント種類のアイコンが表示され、マウスオーバーするとイベント内容(関数)を見ることができます。ソース上の場所までは分かりませんが、ここに表示されたスクリプトでソース内を検索すれば見つけることができます。


でも現在は、ChromeにもFirefox(Firebug)にもイベントを取得する開発ツールが追加されていますので、そちらも便利に使えます。

20150421-firebug.png

Firefox(Firebug)


20150421-chrome.png

Chrome


今回はFirefoxのFirebugで、おかしいイベントの探し方を見てみます。

こんなHTMLページを用意してみました。

20150421-html-1.png

「Click Me!」ボタン → documentにclickイベントが設定されている
「Click Me! (2)」ボタン → ボタン自身にclickイベントが設定されている

20150421-html-2.png


これは3つ目のボタンだけアラートが表示されません。
Firebugを使って原因を探ってみます。


まず、アラートがちゃんと表示される、1つ目のボタンのイベントを確認してみます。

20150421-button-1.png
(1つ目のボタンのイベント)

documentに対し、「.clickmeというボタンが押されたらアラートを表示する」というイベント(上記イベントの②)がついています。何も問題ありません。


次に、アラートが表示されない、3つ目のボタンのイベントを確認してみます。

20150421-button-3.png
(3つ目のボタンのイベント)

documentのイベントより上(上の方が優先度が高い)に、「tr.wrap-2」という要素についたclickイベントが表示されています。イベントはクリックした要素から順に親要素に伝わっていきますが、documentにイベントが届く前に、この「tr.wrap-2」についたイベントでclickイベントがキャンセルされています(上記イベントの①)。ソースコードはこのHTMLファイルの72行目にあるようです。

イベントタブを使うと、悪さをしているイベントを簡単に見つけることができました。


参考までに4つ目のボタンのイベントを見てみます。親要素にclickイベントのキャンセル処理が書いてあるのに、このボタンはアラートがちゃんと表示されます。

20150421-button-4.png
(4つ目のボタンのイベント)

なぜならば、キャンセル処理の①よりも、ボタン自身についている③のclickイベントの方が先に来ているからですね。


おしまい。

How to enable multi-byte characters in Itext of fabric.js - fabric.jsのItextで日本語入力をする方法

fabric.jsはブラウザ上で画像の編集をするためのJavaScriptライブラリです。

fabric.js DEMO

ところがItextオブジェクトでテキストを変更しようとしても、日本語などのマルチバイト文字を打つことができません。このライブラリではキー入力をonKeypressイベントで取得しているのに、日本語入力ではonKeypressが発火されないからです。

というわけで、解決策(の簡易版)を作りました。





-----

ちなみexcanvasというライブラリを使ってIE8にもそこそこ対応させましたが、編集後に画像として出力する(canvas.toDataURL)ところでIE8にはその能力がなく、node.js、node-canvas、node-fabricjsを揃えたサーバーを用意する必要が出てしまいました。

企業用のプロダクトではまだまだIE8の面倒を見なくてはならないので厄介ですが、ちょいと前まではIE7も見ていたと考えればだいぶマシだと思うことにします。

Windowsの新ブラウザで開発は楽になる?

先週末、マイクロソフトから新しいブラウザについての発表がありました。そのプロジェクト名はSpartan(スパルタン)。Windows 10から搭載されるとのことです。ま、Windows 10やSpartanについての情報はもういろいろな場所で出ているので、ここではWebシステム開発に関係ありそうなことを簡単にまとめておきたいと思います。


Windows 10で目指していること

  • 開発者がブラウザ互換を気にしないで開発できるようにする
    →新ブラウザSpartanの導入
  • 利用者が最新のバージョンのブラウザを使うようにする
    →リリースから一年間、Windows 10への無料アップデートを提供(Win7以降のPCのみ)
    →Firefox、Chromeのようにブラウザの自動アップデートをする

Windows 10に搭載されるブラウザ

  • Spartan(標準ブラウザ?)
  • IE(IE11?IE12?)

Windows 10でのWeb閲覧

普通のサイト
  • Spartanで最適に見られる
  • IEでも見られる

IE向けのサイト
  • Spartanで見られる
  • IEで見られる

昔のIE独自仕様(カスタムActiveXコントロールなど)を使っているサイト
  • Spartanでは対応していない
  • IEで最適に見られる

Spartanとは

  • 新しいレンダリングエンジンEdgeHTML.dllを採用
  • デュアルエンジンで、Tridentも備えている
  • IE9で導入されたChakra JavaScriptを使用
  • F12キーの開発者パネルも大きく機能アップ

EdgeHTMLとは?

  • 何十年もInternet Explorerを動かしていたレンダリングエンジン、Trident (MSHTML.dll)とは別物
  • IE11に搭載されている最新のTridentから旧技術に関わる部分を削除したもの(*)をベースに再開発

(*)削除されたもの

  • ドキュメントモード
  • IE8モード
  • VBScript
  • attachEvent
  • X-UA-Compatible
  • currentStyle

Windows 10のIEとは

  • 最新のTridentを採用
  • デュアルエンジンで、Spartanも備えている
  • 昔のIE向けサイトを見るために残している


本当に開発者にとって楽になるのでしょうか。みんながみんなWindows 10のSpartanに移行してくれれば理想的ですが、そうなるのに何年もかかりそうですよね。その頃もまだWeb開発してるといいな、私。

2つのテーブルを横にunionする方法(PostgreSQL)

男性の一覧テーブルと、女性の一覧テーブルがあったときに、ランダムに男女のペアを作るSQLを考えました。(本当はもっと業務用のデータで、同じようなことが必要だったんです。念のため。)


男性のテーブルと、女性のテーブルの構成はこうなっています。IDと名前だけ。

-- 男性リスト
create table men (
id integer not null,
name character varying(256)
);

-- 女性リスト
create table women (
id integer not null,
name character varying(256)
);

データには男性を1人多く入れておきましょう。1人余っちゃうけど、ごめんね。

-- 男性データ
insert into men (id, name) values
(11, 'John'),
(12, 'Jack'),
(13, 'Dan'),
(14, 'Ken'),
(15, 'Tom');

-- 女性データ
insert into women (id, name) values
(21, 'Sue'),
(22, 'Jane'),
(23, 'Beth'),
(24, 'Maria');

この2つのテーブルを普通にunionすると、縦一列に並んでしまい、男女のペアが作れません。

select * from men
union
select * from women;

---

id;name
11;"John"
12;"Jack"
13;"Dan"
14;"Ken"
15;"Tom"
21;"Sue"
22;"Jane"
23;"Beth"
24;"Maria"

cross joinすると2つのテーブルの直積になってしまい、全員浮気し放題です。

select * from men, women;

-----

id;name;id;name;
11;"John";21;"Sue"
11;"John";22;"Jane"
11;"John";23;"Beth"
11;"John";24;"Maria"
12;"Jack";21;"Sue"
12;"Jack";22;"Jane"
12;"Jack";23;"Beth"
12;"Jack";24;"Maria"
13;"Dan";21;"Sue"
13;"Dan";22;"Jane"
13;"Dan";23;"Beth"
13;"Dan";24;"Maria"
14;"Ken";21;"Sue"
14;"Ken";22;"Jane"
14;"Ken";23;"Beth"
14;"Ken";24;"Maria"
15;"Tom";21;"Sue"
15;"Tom";22;"Jane"
15;"Tom";23;"Beth"
15;"Tom";24;"Maria"

こういうときは、行番号を使ってjoinすると良いようです。スピードはちょっと遅くなりますが、ペアを作るためなので仕方ない。

-- カップル作成SQL
select
*
from (
select *, row_number() over(order by random()) as rownumber
from men) m
join (
select *, row_number() over(order by random()) as rownumber
from women) w
on w.rownumber = m.rownumber;

-----

id;name;rownumber;id;name;rownumber
11;"John";1;23;"Beth";1
12;"Jack";2;21;"Sue";2
14;"Ken";3;22;"Jane";3
15;"Tom";4;24;"Maria";4

ここでのポイントは、「row_number() over()」を使っているところです。男性テーブルと女性テーブルでそれぞれ、条件なしのselect結果の各行に、行番号のカラム(as rownumber)を追加しています。これは1から順に振られるので、このカラムを使って2つのテーブルをつなげることができます。

「over()」の中には、行番号を付ける際の条件を書くことができます。ここでは「order by random()」とランダムにソートして行番号を付与しています。おかげで運の悪い男性が1人、あぶれています。

おしまい。

脆弱性のあるPHPの普及率が高すぎる件

W3Techsという調査会社のデータを元に、脆弱性のあるPHPの普及率をまとめた記事があったので紹介します。

PHP Install Statistics
http://blog.ircmaxell.com/2014/12/php-install-statistics.html



PHPはバージョンによって、脆弱性が発見されているものと、そうでないものがあります。使用しているPHPがセキュアでなかったら、すぐにでも上の(マイナー)バージョンに更新しましょう。


バージョン 普及率(%) セキュア?
5.6.4 0.0268 Yes
5.6.3 0.1164 No
5.6.2 0.1272 No
5.6.1 0.0208 No
5.6.0 0.1088 No
5.5.20 0.216 Yes
5.5.19 0.852 No
5.5.18 0.852 No
5.5.17 0.336 No
5.5.16 0.27 No
5.5.15 0.198 No
5.5.14 0.174 No
5.5.13 0.108 No
5.5.12 0.162 Yes
5.5.11 0.174 No
5.5.10 0.096 No
5.5.9 1.818 Yes
5.5.8 0.192 No
5.5.7 0.084 No
5.5.6 0.066 No
5.5.5 0.036 No
5.5.4 0.03 No
5.5.3 0.258 No
5.5.2 0.006 No
5.5.1 0.036 No
5.5.0 0.036 No
5.4.36 0.2376 Yes
5.4.35 5.4912 No
5.4.34 4.5936 No
5.4.33 1.7688 No
5.4.32 1.452 No
5.4.31 1.1616 No
5.4.30 1.2144 No
5.4.29 0.924 No
5.4.28 0.8184 No
5.4.27 0.9504 No
5.4.26 0.7656 No
5.4.25 0.5016 No
5.4.24 0.7128 No
5.4.23 0.5016 No
5.4.22 0.3432 No
5.4.21 0.2904 No
5.4.20 0.3168 No
5.4.19 0.264 No
5.4.18 0.0792 No
5.4.17 0.3168 No
5.4.16 0.4224 Yes
5.4.15 0.0792 No
5.4.14 0.1584 No
5.4.13 0.0792 No
5.4.12 0.1056 No
5.4.11 0.1056 No
5.4.10 0.0528 No
5.4.9 0.1848 No
5.4.8 0.0528 No
5.4.7 0.1056 No
5.4.6 0.1848 No
5.4.5 0.0264 No
5.4.4 2.1384 Yes
5.4.3 0.0264 No
5.4.2 0 No
5.4.1 0 No
5.4.0 0.0264 No
5.3.29 10.8783 No
5.3.28 7.1145 No
5.3.27 3.3048 No
5.3.26 1.1016 No
5.3.25 0.4131 No
5.3.24 0.459 No
5.3.23 0.6885 No
5.3.22 0.2754 No
5.3.21 0.3672 No
5.3.20 0.2754 No
5.3.19 0.3672 No
5.3.18 0.4131 No
5.3.17 0.459 No
5.3.16 0.2295 No
5.3.15 0.4131 No
5.3.14 0.2754 No
5.3.13 1.4688 No
5.3.12 0 No
5.3.11 0 No
5.3.10 4.131 Yes
5.3.9 0.1377 No
5.3.8 0.6885 No
5.3.7 0 No
5.3.6 0.5508 No
5.3.5 0.3213 No
5.3.4 0.0459 No
5.3.3 10.3734 Yes
5.3.2 1.0557 Yes
5.3.1 0.0459 No
5.3.0 0.0459 No
5.2.x 20.1 No
5.1.6 1.1376 Yes
5.1.5 0.0024 No
5.1.4 0.0168 No
5.1.3 0 No
5.1.2 0.0372 No
5.1.1 0.0048 No
5.1.0 0 No
続きを読む "脆弱性のあるPHPの普及率が高すぎる件"

1/41  | 次のページ »