PhoneGap Buildで作るスマートフォン用カメラアプリ

一覧写真へのTouchイベントの登録

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
一覧に表示されている写真へTouchイベントを登録して、特定の処理を実行させる方法について解説致します。
講師:
03:37

字幕

このレッスンでは 一覧に表示されている写真へ タッチイベントを登録して 特定の処理を実行させる方法 について解説いたします まずはダウンロードしてきた こちらの「list_touch_event」 というフォルダの中に入っている こちらの「index.html」と この「js」フォルダの中に入っている 「index.js」ファイルを エディタで開いてください これがそれらのファイル を開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それではさっそく レッスンをはじめていきましょう 今回はこちらの 「id=photoList」がついた 「ul」タグの中に 表示されている写真リストに タッチイベントを登録する方法について 見ていきたいと思います それでは「index.js」ファイルを エディタで確認していきます 今回はこちらのファイルで 注目していただきたい部分は こちらの部分となります それでは具体的にどのようにして リスト表示されている写真に タッチイベントを登録しているか 確認していきたいと思います まずは「$」マークと書いて 「() 」その中に 「document」と書きます そして「.on」と書いて 「(」 そしてこちらの 「);」 そしてその中の引数には まず1つ目の引数 「touchstart」と書きます そして2つ目の引数 こちらは「ul#photoList img」 と書きます そして3つ目の最後の引数には 「function(){}」と書きます このようにすることで リスト表示されている写真に タッチイベントを登録することが 可能です ちなみにこちらの 「img」タグですが こちらの前回までの レッスンで作成した 「onSuccess」の関数の中に書かれている こちらの「img」要素となります 通常こちらの「$ () 」の間には こちらの「ul#photoList img」 を書くのが普通ですが こちらの「li」「img」要素 というのは HTMLファイルが 読み込まれた際には 存在していなくて こちらの「onSuccess」の処理が 走るたびに動的に 追加される要素となります そういった要素には この「$ () 」の間に その要素を指定して 「on」と書いてイベントを登録する方法が 有効に働きません それをきちんと有効に働かせて そして ちゃんと動的に出力される こちらのイメージ要素に タッチイベントを登録することができます それを有効に働かせるためには このように「$ () 」の中に 「document」と書いて イベントを登録したい要素を こちらの2番目の 引数に設定してあげることで このように動的に出力される 「img」タグにも イベントを登録することが できるようになります この点は慣れないうちは よく開発途中で はまってしまうポイント となってしまいますので しっかりと覚えておきましょう 以上でレッスンは終了です 今回は一覧に表示されている写真へ タッチイベントを登録して 特定の処理を実行させる方法 について解説いたしました 以降のレッスンでは 登録したタッチイベントに処理を加えて タップされた写真を 個別表示させる方法について 解説いたしますので そちらも合わせてご確認ください

PhoneGap Buildで作るスマートフォン用カメラアプリ

PhoneGap Buildとは、HTMLやJavaScriptを使って制作したファイルをWeb上にアップロードするだけでiPhoneやAndroidなどのモバイル端末向けのアプリに変換してくれるウェブツールです。このコースでは、PhoneGap Buildを利用してスマートフォン向けのカメラアプリを作成します。

1時間10分 (21 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年02月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。