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

一覧画面への表示切り替え

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Touchイベントを利用して、アプリの画面表示を、個別写真画面から、写真一覧画面に戻す方法について解説致します。
講師:
05:06

字幕

このレッスンでは タッチイベントを利用して アプリの画面表示を 個別写真画面から 写真一覧画面に戻す方法 について解説いたします まずはダウンロードしてきた こちらの「back_to_list」 というフォルダの中に入っている この「js」フォルダの中にある 「index.js」ファイルを エディタで開いてください これがそのファイルを開いてきた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それではさっそく レッスンをはじめていきましょう それでは前回のレッスンの おさらいのほうから やっていきたいと思います 前回のレッスンでは リスト内の写真をタップして 個別写真を表示する ところまでやりましたね そしてその個別写真を 表示させるために このID「photoPage」がついた 「div」要素に対して 「fadeIn」を指定して 表示させてきました 今回はこの逆で 画面に表示されている個別写真 をタップすることによって このID「photoPage」を 「fadeOut」させる方法について 見ていきたいと思います それがこちらの部分となります それでは実際にどのように 実装しているか確認して いきたいと思います まずはこちらの部分ですね この部分では 表示されている個別写真 の「img」要素に対して タッチイベントを登録しています 「$(document)」と書いて「on」そして「(」 1つ目の引数に「touchstart」 そして2つ目の引数に「div」ID「photoPage」 の中の「img」要素 そして「function(){});」 と書いて処理を閉じています そしてこの「function」の{}の間に 「fadeIn」の逆である「fadeOut」を書きます 「$()」その中に 「fadeOut」させたい要素 要するにID「photoPage」 がついた「div」要素ですね それに対して「fadeOut」をさせます そして()の間には その「fadeOut」する スピードを書いておきます 今回は「fast」 ということで早く「fadeOut」させる という意味になります このようにすることで 「fadeIn」して表示されてきた 個別写真ページに対して 再度その個別写真をタップすることで その個別写真ページを非表示にして リスト画面に戻ることが できるわけです この処理を加えたところで 今回制作しているこのカメラアプリ の開発は完了となります それではこの状態で 先ほどダウンロードしてきた こちらの「back_to_list」という フォルダの中に入っている 「www」フォルダ こちらを圧縮して 「PhoneGap Build」に アップロードしてみましょう こちらが「PhoneGap Build」の アプリの個別画面ですね こちらの「コードを更新」するボタンから 先ほどのzipファイルを選択して こちらの「アップロードボタン」 を押してください アップロードが完了したら こちらのQRコードを 端末から読み込んでいただくか もしくはハイドレーション機能を ONにしている場合は すでにインストールしている 端末上のアプリを起動して ファイルを更新してみてください そして端末上にインストールされたアプリを 立ち上げるとこのように 表示されてきましたね それでは動作のほうを 確認してみたいと思います まずこちらの部分 要するに写真一覧部分には 何も表示されていない状態ですね それではこちらの「カメラボタン」を タップしてみましょう するとこのように カメラが起動して 表示されてきましたね ではこの状態で撮影をします こうすることで撮影ができましたので こちらの「Use Photo」 というボタンをタップします すると撮影した写真が取り込まれて このように一覧画面のほうに 表示されてきました そしてこの状態で この写真をタップすると このように個別写真ページが 表示されてきましたね そして再度こちらの写真をタップすると このように一覧画面に戻りましたね このように動作すると きちんとプログラムの実装が 完了しているというかたちになります 以上でレッスンは終了です 今回はタッチイベントを利用して アプリの画面表示を 個別写真画面から写真一覧画面に 戻す方法について解説いたしました 以上のレッスンをもちまして 「PhoneGap Build」を使った スマートフォン用カメラアプリの 作成は完了となります このように「PhoneGap Build」 を習得すれば 新たに専用のプログラム言語を 習得しなくても 簡単に今回のようなカメラアプリが 作れるようになりますので ぜひご自身でも オリジナルアプリの制作に チャレンジしてみてください

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

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

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

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

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

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