jQueryのイベントで return false はしない方が良い

前回の記事を書いている時に検索にヒットしたリンクでちょっと「へぇ～っ」となったものがあったのでメモ。

　javascript - event.preventDefault() vs. return false - Stack Overflow

イベントのハンドラを書く時に、jQueryのイベントと通常のDOMのイベントでは

return false;

の意味が違うらしい。まずい、今まで気にしていなかった。。。


jQueryのイベント：

• 　　デフォルト動作を抑止。
• 　　イベントバブリングを中止する。

通常のDOMのイベント：　

• 　　デフォルト動作を抑止。（但しブラウザのバージョンに依存）
• 　　イベントバブリングの中止はしない。

という事らしい。


jQueryのイベントハンドラで return false; をしてしまうと、イベントバブリングまで中止されてしまう。これはあまり好ましくない事だ。

なぜイベントバブリングを中止する事が好ましくない（or やってはいけない）のかは、下の記事を読めばよく分かる。

jQuery Events: Stop (Mis)Using Return False | Fuel Your Coding


jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について | ふじこのプログラミング奮闘記


JavaScriptのイベント伝播について覚書 | Linuxで自宅サーバ構築

結論

jQueryのイベントハンドラでは、

1. デフォルト動作を抑止するには、event.preventDefault() を 使う。

2. バブリングを中止する必要がある場合は、event.stopPropagation() もしくは
event.stopImmediatePropagation() を場面に応じて使い分ける。

3. return false は親要素にもイベントハンドラがアタッチされている場合などにバグの原因になり得るので、使う場合は十分に注意する。（もしくは使わない。）

というのが良いみたいだ。







 　

[jQuery] Enterキーでフォーカスを移動するには

Enterキーでフォームを送信したくない時は

あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。

リターン（Enterキー）でフォームを送信しない方法: 小粋空間

とりあえずこの記事の「４．押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。

Enterキーで次のフィールドにフォーカスを移動するには

次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな～、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。

Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。

Shift＋Enterキーにも対応するには

さらについでにShift+Enterキーでの逆順の移動にも対応させてみた。

もっとキーイベントを細かく制御するには

こんな感じで作りだすと、欲が出てきてさらにファンクションキーや矢印キーにも対応したくなってくる。でも、自分で作らなくても何かあるんじゃないかな～という気もする。

探してみたら次の様なjQueryプラグインが見つかった。

Enter/Tab項目移動とFunctionKey制御をplugin化 - せかにゃ～

これで機能的には申し分無さそうだ。ただソースコードを見ると対象のフォームがdocument.forms[0]に固定されていたりするので場合によっては少し変更する必要があるかも知れない。


キーイベントを拾って独自の関数を実行するだけならこういうのもあった。（フォーカス移動の処理は自分で書く必要があるみたいだ。）

jQuery.gpKeyでキー操作が楽々に。 | Ginpen.com

最近はWindowsアプリケーションをWebに置き換える案件も多いので、きっとこの様なプラグインは役に立つと思う。




　

Azure仮想マシン上でNode.jsアプリケーションをデーモン化してユーザー権限で運用する方法

作ったNode.jsアプリケーション

初めてのNode.jsアプリケーションを作ってみた。
作ったのは、ここに載っていたもの。

Androidアプリからnode.js+Socket.IOと双方向通信する

早速Windows Azure上で動かそうと思ったのだけれど、いくつか苦労したのでメモしておきたい

「Windows Azure Web Sites」は現状ではWebSocketは不可

まず、「Windows Azure Web Sites」は現時点では使えない。このサービスのベースとなっているIISのバージョンが7.5で、まだWebSocketプロトコルに対応していないからだ。

試しにやってみると、ブラウザ同士で試すと問題なく動くが、実際にはWebSocket以外のプロトコルにフォールバックして動作している。この状態だとAndroidのネイティブアプリケーションからsocket.ioライブラリを使用しての接続は上手く行かなかった。

近い将来これが IIS8.0 にアップデートされてWebSocketが使える様になったら、多分これから下に書く様な面倒な作業は不要になると思う。

「Windows Azure 仮想マシン」でUbuntuサーバーを立てる

仕方ないのでAzure上にUbuntu仮想マシンを立ち上げる事にした。

Ubuntu 12.04 Serverのインスタンスを起動して、Node.jsやその他のパッケージをインストールするのは、何の問題もなく完了。

　node folder/app.js

で起動して3000番ポートで接続を待ち受ける。と同時にAzure仮想マシンの設定でエンドポイントを追加して、外側の80番ポートを内側の3000番ポートにつなげる。これでブラウザからもAndroidアプリからも接続出来て問題無く動作させる事が出来た。

素晴らしい！

ただ、Android側のネットワークをWiFiから3G回線にすると動作しなくなるという現象に遭遇した。どうやらキャリア側で80番ポート上のWebSocketの通信を遮断しているみたいだ。（というよりおそらく、キャリアが使っているProxyサーバーがWebSocketに対応していないのだと思う。）

これに対する対策として、Azure側のエンドポイントのポート番号を443に変更したら問題なく動作する様になった。（特に443番でなくてもいいと思うけれど、ユーザー側にFirewallがある場合に、外向きのTCPパケットがブロックされている可能性が80番の次に低いポート番号という事で、443番にしておいた。）

Node.jsアプリケーションをデーモン化したい

Node.jsのアプリケーションをデーモン化して動かすには、forever を使うのが簡単らしい。

foreverコマンドを実行するスクリプトを rc.localに追加するなり、/etc/rc2.d フォルダにシンボリックリンクを張るなりすればサーバー起動時に自動で実行される様になる。

ユーザー権限でデーモンを実行したい

ただ、root権限ではなくユーザー権限で実行する方法がすぐには見当たらなかったので、調べるのにちょっと時間がかかった。結論としては次の２つのどちらかが良さそうだ。

方法１：　suコマンドと forever を使う

　su - [user] -c"cd [/home/directory] && forever start [folder]/app.js"

というコマンドへのシンボリックリンクを /etc/rc2.d フォルダに作成する。(または/etc/rc.localの最後に追加する。)


方法２：　Upstartを使う
　

　Upstart を使ってお手軽 daemon 化 - インフラエンジニアway

ここに書いてある方法で initctl コマンドでデーモンとしての実行を管理出来る様になる。
実行ユーザーを指定するには、

　setuid [user]

を設定ファイルに追加すればOK。


Ubuntuの標準的な方法としては Upstart を使う方が良さそうなので、とりあえず今はこれでいいかな、と思う。







　

初めてAndroidアプリを公開して1年経過した

作ったアプリ

1年半ぐらい前にこんな記事を書いて、オセロゲームを作ってみた。

http://blog.makotoishida.com/2011/06/android-1.html 

6月から作り始めて、9月に一応大体の機能が完成。その後アイコンを作ったり細かい改善をしたりして、2011年の12月にGoogle Playストアに公開した。

Google Play
https://play.google.com/store/apps/details?id=com.ishida_it.mireversifree

１年間の有効インストール数の推移

公開してから全く更新せずに1年を経過した頃からアクティブユーザー数に減少傾向が見られた。
ちなみに下段のグラフの水色の線はAndroid 2.3、緑の線はAndroid 4.0以降。
グラフの右端で少し右肩上がりになっているのは、Undo機能を追加する更新をした後。

現在の有効インストール・ユーザー数(インストール後、削除していないユーザーの数)は約7400。総ダウンロード数は2万1200となっている。

細々とした数字ではあるけれど、公開してからほぼ1年間放置状態だったのにしては結構インストールされているのではないかと思う。

やはり誰でも知っているオセロゲームだから、ダウンロードする前に「このゲームは面白そうかどうか」を考える必要が無いというのが大きいのだろうと思う。

とは言えさすがに1年も更新せずにいると、新たにインストールされる数よりもアンインストールされる数の方が上回ってアクティブユーザー数が徐々に減少し始める。Google Playの検索アルゴリズム上なんらかのマイナス評価が加えられるのかも知れない。

Undo機能追加でちょっと持ち直す

2012年の12月になってようやくUndo機能を追加する更新を行った。するとやはり新規インストール数がまた上昇しだした。更新によってユーザーの目に付く機会が多少増えたみたいだ。

この直後、ユーザーさんから「Undo機能を付けてくれてありがとう」というメールをもらったのには驚いた。と同時に単純に嬉しかった。アプリ開発者のモチベーションは案外こういう些細な事で保たれるのではないかとも思った。

せっかくなので大幅にリファクタリング

ただ、Google Playのレビュー欄に「コンピュータが弱い」という評価が多かったので、今年の1月に大幅にリファクタリングを行なって思考ルーチンの高速化と強化をしてみた。

思考ルーチンだけでなく盤面のデータ構造から書き直す様な大変更になったのでなかなか大変だったけれども、何とか先日新しいバージョンを公開する事が出来た。

これでまた新規インストール数が増えてくれればちょっと嬉しい。初めて公開したAndroidアプリという事もあってか、何となくよちよち歩きの我が子を見守る様な気分になってくる。



　
　

無料で外国語を学べるDuolingoに感動!

今週の中島聡さんのメルマガで紹介されていたこの動画を観た。

Luis von Ahn: Massive-scale online collaboration | Video on TED.com

Webで自動投稿を防ぐための認証に使われる「CAPTCHA」を発明したLuis von Ahnさんのスピーチだ。

CAPTCHAを改良したRECAPTCHAでは多数の人間の画像認識力を集めて古い書籍などのデジタル化に役立てているとの事。

このアイデアをさらに進めて言語教育に応用したのが、「Duolingo」という言語学習サービス。

早速登録して試してみた。今のところスペイン語、ドイツ語、フランス語、ポルトガル語、イタリア語の5ヶ国語のみの様だけれど、ぜひアジアの言語も増やして欲しいところだ。



個々の生徒が学習している間に行った翻訳作業が、実はDuolingoのサーバーで集約されて巨大な知識ベースに格納され、実際に翻訳が必要な所で活用される、というイメージだろうか。

つくづくすごい事を考える人が居るものだと感心させられてしまった。

来年こそはしっかりモノにしたい6つの技術スキル

1. Node.js

今注目のサーバーサイドJavaScript実行環境。

Windows Azure上でも簡単にホスティング出来るみたいなのでぜひ何か作りたい。

リアルタイムな何か。最初の題材としては対戦型のゲームとかが面白そう。

「サーバサイドJavaScript Node.js入門」

この本をちらちら見ながらワクワクしている。

2. クライアントサイド MVC

ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理

この本は一応読むことは読んだ。でもまだ実践ではクライアントサイドMVCを使う機会がない。

ASP.NET界隈では Knockout.js の人気が高まっているみたいだ。

個人的にはGoogle発の AngularJS に最も興味がある。DotInstallでのレッスンには興奮した。

3. CSS3/LESS/SCSSなど

CSS3はそろそろ機が熟して来たのかなと感じている。

CSSだけで時計やゲームの様な動きを見事に実現してしまう例を見せてくれた http://www.adventar.org/calendars/2 を眺めて、今さらながら驚かされた。

大規模なプロジェクトになると効率アップのために LESS か SCSS はやはり必要になるだろうなと思う。

LESSとSCSSのどちらを使った方が良いか、というのは迷う所だけれども、LESSの方が明らかに名前で得をしていると思う。子音だけのSCSSよりもLESSの方が発音しやすいし、語感が明るい気がする。名前付けは重要だなあ、と。

4. テスト駆動開発

最近は意識的に単体テストを書く頻度を上げて「テスト駆動」に近づく様にしている。そのおかげでリファクタリング/デバッグのスピードが着実に向上しつつあるのを実感している。

下の２冊はまだ読んでいる途中だけど、しっかりとモノにしたいスキルだ。

実践テスト駆動開発 テストに導かれてオブジェクト指向ソフトウェアを育てる

レガシーコード改善ガイド

5. Titanium Mobileによるスマートフォンアプリ開発

Eclipse+Javaを使ってAndroidアプリを個人的に開発するという事は１年半以上前からやっている。JavaやAndroidの勉強をしながら、少しずつ自分で作ったものが形になって行くのはとても楽しい。

ただ、この方法だとXcode+Objective CでのiOSアプリの開発まではいつまで経ってもたどり着けそうにない。趣味的に続けて行くには、単純に時間が足りなすぎるのだ。

そこで何らかのクロスプラットフォームなツールを使う必要性を強く感じている。

ゲームなら多分 Unity や Corona と言ったあたりが良さそうだけれども、ツール系のアプリだと Titanium Mobile が一番良さそうかなと思っている。

Titanium Mobileで開発するiPhone/Androidアプリ

この本はかなり前に買ったのだけれど、忙しくてまだじっくり読めていない。

来年はAndroidだけでなくぜひiOSアプリの開発にもチャレンジしたい。

6. TypeScript

CoffeeScript ももちろんいいのだけれど、Windows 8アプリの開発などを視野に入れると TypeScript の方に注目したい。

JavaScriptを書くならTypeScriptを使え！ - 部屋とボードゲームと私と酒と泪と男と女

Visual Studio 2012を使ってTypeScriptのサンプルを動かしてみたところ、確かにこれなら気軽に入っていけそうだ。もしかしたら来年の今頃は「TypeScript無しでの開発なんて考えられない」っていうぐらいになっているのかも知れない。

来年こそは！

以上、来年こそはしっかりとモノにしたい6つの技術スキルを挙げてみた。

ホントは今年中にやっておきたかったのだけれど、来年の自分に向けて書いておく。