投稿日:

HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド を発売しました


機会を頂戴いたしまして、弊社代表の野島も執筆に参加した書籍が、2013 年 3 月 11 日に、翔泳社様より出版されました。

614MUTKGzJL._SS500_

Amazon 販売ページ:
http://www.amazon.co.jp/HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY)/dp/4798129682/

(紹介文)
本格的なスマホアプリを「HTML5とJavaScript」で作ろう! HTML5とJavaScriptを利用したスマートフォンアプリ開発が、2011年から注目されてきています。背景には、PCやタブレット、スマートフォンなど、異なるデバイスでも一定レベルで動作できるWeb技術(HTML5とJavaScript)が整ってきたことがあげられます。本書は、そうしたHTML5とJavaScriptを組み合わせてスマートフォンアプリを開発したい方に向けた書籍です。HTML5とJavaScriptを組み合わせたプログラミングの基本から始まり、スマートフォン向けデバイスAPIと組み合わせた開発、そして実際に開発者の方が作ってみたくなる本格的なスマートフォンアプリの開発手法までを解説しています。これ1冊で、HTML5とJavaScriptを利用したスマートフォンアプリ開発手法をひと通り学べます。

弊社で担当させていただいた部分は2章で、Web技術の基礎について解説しています。
また機会がございましたら是非書店などで手に取っていただけましたら幸いです。

このページのビュー数が多いので、2章について少し補足します。

  • 2章では、HTML、CSS、JavaScript の3つのパートで基礎的な事を解説しています。
  • HTML、CSS のパートでは、本書の読者層を考慮し、HTML5 や CSS3 で今後実用的に利用できるであろう新しい要素や表現方法を紹介しています。特にスマートフォンの開発では現実的でしょう。これらの新しい技術を利用することで、ユーザビリティを高めることが出来たり、またスマートフォンにおける回線速度問題への対応や、いわゆる Retina ディスプレイへの対応など、多くの課題についてよりベターな解決方法を選択出来るようになります。
  • JavaScript のパートでは、JavaScript の特徴的な言語パラダイムを改めて丁寧に解説しています。JavaScript の特性や機能をより正しく理解することで、JavaScript でより高度で大規模なプログラムを書くための基礎知識を整理しています。JavaScript のビギナーにとっては内容は少し高度かも知れませんが、これらの理解が不足している場合、スマートフォンなどのクライアントサイドで動作する本格的なアプリケーションを開発することは難しいかも知れません。

 

投稿日:

JavaScript の超便利なメソッド bind で this を制御する


JavaScript の関数オブジェクトには、「bind」という便利なメソッドがあります。このメソッドは関数内で参照できる this を指定のオブジェクトに束縛できるものです。この関数を使うと、this に関連した良く有る問題をスマートに解決できます。

this にまつわるよくある問題

次の例は、実行後に「こんにちわ ぷんちゃん」とアラートするコードです。

では、3秒後に表示させてみましょう。よく次のように書きます。

これは期待通りに動作します。しかし、setTimeout に渡している無名関数は、単に Person.sayHello() をコールしているだけなので、次のようにも書けそうです。

しかし、これは期待通りには動作しません。
通常、ブラウザで実行させている時には「こんにちわ undefined」と表示されます。

これは JavaScrip における一般的な動作です。オブジェクトのメソッドはオブジェクトに束縛されているものではなく、その時々のコンテキストにおいて実行されるからです。JavaScript をある程度理解しているプログラマは、このことを良くご存知のはずです。

bind を使って this を束縛する

さて、本題です。

この this を固定してしまえるメソッド「bind」が関数オブジェクトには存在します。
例を見てみます。

今度は期待通り動作しました。

bind メソッドはこのように、関数内の this を指定のオブジェクトに束縛した新しい関数を返す機能を提供します。上の例では、bind に punchan オブジェクトを与えて、sayHello メソッド内の this が常に punchan オブジェクトとなるような新しい関数を取得し、それを setTimeout に渡すことで、期待通りの動作を実現しました。

このように、bind を使うことで、関数実行時の this を簡単に束縛できます。JavaScript でオブジェクトを利用したスクリプトを書く時にはとても便利ですね!

別のよくありそうな例

もうひとつ、良く有りそうな例を。

14行目で this を参照していますが、この時の this は Person オブジェクトでは無くて、グローバルオブジェクト(ブラウザなら通常 window オブジェクト)になります(ちなみにその this が決定されているのは、3行目の呼び出し部です)。

14 行目の this の部分で、Person オブジェクトを参照したい時に、よく次のようにするでしょう。

13 行目で期待する this の値を一旦別の変数に移して、その変数を 15 行目で参照しています。これは上手く行きます。しかし、関数オブジェクトの bind を使うと、次のようにも書けます。

15 行目で bind を使って、13〜15 行目に定義した無名関数オブジェクト内での this を指定しています。このケースではこの方がスマートですね!

読みやすさについてはケースバイケースだと思いますが、これは JavaScript でオブジェクトを扱う時の基本テクニックの一つです。このような bind の用法を知っておくことで、より読みやすいコードを書ける場面も増えると思います。

ちなみに、bind にはどんなオブジェクトでも渡すことができます。ここでは this を渡していますが、必要に応じて、様々なオブジェクトを、関数内の this として bind できるということを覚えておいてください。

bind による引数の部分適用

実は bind は this だけではなく関数の引数も束縛することが出来ます。
次の例を見てください。

4 行目の mul(2, 3) は、単純な関数呼び出しです。6とアラートされます。

7 行目で bind を利用して、引数の一つを 2 に束縛した新しい関数 mul2 を得ています。
8、9 行目の意味が分かるでしょうか? 関数 mul2 は、関数 mul の最初の引数が 2 に束縛されているものなので、常に 2 * b の演算を行ってアラートする関数になります。結果、ここではそれぞれ 2 * 4 ⇒ 8、2 * 16 ⇒ 32 というアラートが表示されます(ちなみに、前述の通り bind の第1引数には this とするオブジェクトを指定しますが、ここでは this は使っていないため null としています)。

また、11 行目からのように、引数が部分適用された関数を、更に部分適用する事もできます。

mul.bind(null, 2) で返される関数と等価なコードを書くと、次のようになります。

使いどころが難しい機能かも知れませんが、ライブラリなどの汎用性を高める為に利用することが出来そうですし、アイデア次第、使い方次第、ということになると思います。

引数の部分適用の例1

引数の部分適用の例を挙げてみます。

これは tags というコレクションオブジェクトから任意の tag を削除するコードです。tags.remove メソッドは jQuery.Deferred オブジェクトを返し、tag の削除に成功した時に done、失敗した時に fail にセットされたコールバック関数が呼ばれるというコードです。ここでコールバックでは alert を表示することしかしていません。これを bind を使って書き換えると、次のように書けます。

如何でしょうか? この例が見やすいかどかは人それぞれだと思いますが、このように使えるということを覚えていると、きっと何かの時に役立つかと思います。

もう一つ、もう少し使いどころがありそうな例を挙げてみます。

引数の部分適用の例2

次のコードは、1秒毎に3回 alert がコールされて「○秒後!」と表示します。もちろん、「1秒後!」「2秒後!」「3秒後!」となることを期待していますが、これは3回とも「4秒後!」と表示されてしまいます。クロージャ変数についてよくある問題ですね。

これは例えば次のようにして期待通りの動作をさせることが出来ます。

ただ、ちょっとややこしいですね…。

そこで、bind による引数の部分適用を利用すると、次のように書くことができます。

これはスッキリして、またしっくり来るのではないでしょうか (*’-‘*)

以上です。

ご存知の方はご存知というお話ですが、僕はつい半年位前まで知らなかったもので共有させて頂きました。

 

 

 

 

投稿日:

jquery.overscroll.js を使うと input タグ等が反応しなくなる問題の対処


jquery.overscroll.js ver 1.6.0 を使ってて、その領域内に input[type=text] や textarea タグなどが入っていると、それらの要素が反応しなくなります。該当の要素に cancelOn を指定しても改善されません。

困ったので、コードを見てみると原因が分かりました。cancelOn を判定している箇所があるのですが、その判定以前に、event.preventDefault() しています。これにはこれで意味があるのかも知れませんが、event.preventDefault() の記述を cancelOn 判定後に移動させると、期待どおり input や textarea などのタグが通常通り反応するようになり、また他にも特段影響も見られないので、とりあえずヨシとしたいと思います。

今後改善や改良があるかも知れませんが、以下、修正した部分のコードです。
jquery.overscroll.js のバージョンは ver 1.6.0 です。

上のコードで、348 行目を、361 行目に移動させています。

§

ちなみに、この件は不具合修正の依頼だけ対応したのですが、よりあたらしい jquery.overscroll.js のリポジトリをみてると、別のアプローチですが、修正されているみたいですね。良かったです。

 

 

投稿日:

WordBench神戸「第15回 WordBench神戸 jQueryどうでしょう」にて LT をさせて頂きました。


WordBench神戸

2012年9月8日(土)の、「第15回 WordBench神戸 jQueryどうでしょう」にて、『Chrome で Javascript デバッグ!まず半歩』という内容のライトニングトークをさせて頂きました。

以下に、その時のスライド資料を公開いたします。

今回の WordBench 神戸では、「jQueryどうでしょう」ということでメインは jQuery 中心のお話ではありましたが、関連ということで、Chrome における Javascript デバッグツールの基礎的な使い方を簡単に紹介させて頂きました。

Chrome Developer Tools はいつの間にか非常に高機能で強力なツールに進化していて、個人的には Firefox のそれよりも使い勝手が良くなってきたのではないかなー?と感じています(もちろん慣れの問題が大きいです。どちらも良いところあると思います)。

反省点として、また時間が無いのに盛り込み過ぎたことだと思います。慌ただしい説明になってしまって申し訳なく思います。近いうちに、1セッション時間を頂いて何かまったりとしたテーマでお話できると良いのですが、適当なネタを準備できるように考えておきたいと思います。