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

撮影した写真の個別表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
登録したTouchイベントに、処理を加えて、タップされた写真を個別表示させる方法について、解説致します。
講師:
03:49

字幕

このレッスンでは 前回のレッスンで登録した タッチイベントに 処理を加えてタップされた写真を 個別表示させる方法 について解説いたします まずはダウンロードしてきた こちらの「show_photo」 というフォルダの中に入っている 「index.html」ファイルと この「js」フォルダの中に入っている 「index.js」ファイル こちらをエディタで開いてください これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それではさっそく レッスンをはじめていきましょう 今回はこちらの 「id="photoList"」がついた 「ul」タグの中に 表示されている写真を タップすることで こちらの「id=photoPage」がついた 「div」タグの中にある こちらの「img」タグの中に タップされた写真のパスを こちらに入れて 個別の写真を表示させる方法 について見ていきたいと思います それでは「index.js」ファイルを エディタで確認してみます 今回こちらのファイルで 注目していただきたい部分は こちらの部分となります 前回のレッスンで こちらの部分ですね リストの写真に対して タッチイベントを登録しました 今回はその「function」 {}の間に処理を追加して 具体的に個別写真を表示させる 方法について見ていきます それでは具体的に どのように処理を行っていくか 目で追っていきたいと思います まずは変数を定義します 「var」と書いて「imgPath」とします そして「=$ (this).」 「attr('src');」と書いていますね この部分では タップしたリストの中の写真の こちらの「src」属性に書かれた その写真のパスですね その写真のパスを こちらの変数「imgPath」 に代入する処理が書かれています そして 次にこちらの2行目を 見てみましょう こちらの2行目では 「$ 'div#photoPage 」 の中の「img」要素 「).attr('src', imgPath);」 と書いていますね この部分ではこちらの 1行目で取得した 「imgPath」をこちらの「photoPage」 というIDのついた「div」タグの 中にあるイメージ要素 の「src」属性にその「imgPath」を セットするといったかたちになります そして最後にこちらの 3行目を見てみましょう こちらの3行目では こちらのID「photoPage」 がついた「div」タグを 「fadeIn」しろという命令を 書いています そしてその「fadeIn」する スピードは「fast」 ということで早く という意味になります このようにすることで リストで表示された写真 をタップした時に そのタップした写真を こちらの個別要素を表示するページの 「img」要素にそのパスをセットすることで その画像のみを表示することができて そして 最後には個別写真ページですね こちらを「fadeIn」して表示させる といった処理ができました 以上でレッスンは終了です 今回は前回のレッスンで登録した タッチイベントに処理を加えて タップされた写真を個別表示させる 方法について解説いたしました 以降のレッスンでは タッチイベントを利用して 個別写真画面から 写真一覧画面に戻す方法について 解説いたしますので そちらも合わせてご確認ください

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

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

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

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

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

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