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

撮影した写真の一覧表示

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アプリ内でのカメラで撮影した写真を、アプリの中で一覧表示させる方法について、解説致します。
講師:
03:56

字幕

このレッスンでは アプリ内でのカメラで 撮影した写真を アプリの中で一覧表示させる 方法について解説いたします まずはダウンロードしてきた こちらの「photo_list」 のフォルダの中に入っている 「index.html」ファイルと この「js」フォルダの中に入っている こちらの「index.js」フォルダを エディタで開いてください これがそれらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それではさっそく レッスンをはじめていきましょう まずこちらの「html」ファイルで 写真を一覧表示させる部分 について改めて 確認しておきましょう こちらの「id="photoList"」がついた 「ul」タグですね こちらの中に写真を 一覧表示させるために 追加していきたいと思います それではこれを踏まえて 「index.js」ファイルを エディタで確認してみます そして今回注目して いただきたい部分は こちらの部分となります こちらの部分は「function onSuccess」 ということで 前回までのレッスンで作成した 「カメラの撮影に成功した際の処理」 の部分となっています では具体的にどのように 撮影した写真を一覧で 並べて表示しているか 確認していきたいと思います まずは先ほど確認した ID「photoList」がついた 「ul」タグですね こちらを「$」マーク「( )」 の中に入れてあげます そして「.append」と書いて 「( );」と書きます このように書くことで こちらのID「photoList」 の属性がついた 「ul」タグの中に こちらの「append」の() の中に書いてある要素を 順番に足していく といった命令になります そしてこの「append」の中の ()の中身ですが このように「li」要素のタグを書いて 「img」要素のタグを書きます そして「src=」として こちらに変数「imgPath」を書きます こちらの「imgPath」は こちらの「onSuccess」 の()の中に書いてある こちらの引数と同じものですね この引数の「imgPath」には カメラの撮影が成功した際に こちらの「カメラ機能の設定」 で指定した内容が こちらの「imgPath」に格納されてくる というかたちでしたね 今回はこちらの 「destinationType」のところに 「Camera.DestinationType.FILE_URI」 と指定しているので こちらの「imgPath」には その撮影した画像ファイル の端末上のパスが 格納されてくるわけです そのパスをこちらの 「img」要素の「src」属性に 書いてあげるわけですね そして最後に「li」タグを閉じる と書くわけです こうすることによって 写真をひとつ含んだ「li」要素が このID「photoList」がついた 「ul」タグの中に順番に 後ろから足していくような かたちになるわけです このようにすることで撮影した写真を 一覧のようにして出すことが できるわけですね ちなみに一覧に 表示させる画像の 縦横のサイズですが 「css」のほうで普通に この「img」タグに対して 指定してあげれば大丈夫です 以上でレッスンは終了です 今回はアプリ内でのカメラで 撮影した写真をアプリの中で 一覧表示させる方法について 解説いたしました 以降のレッスンでは 一覧に表示されている写真へ タッチイベントを登録して 特定の処理を実行させる方法 について解説いたしますので そちらも合わせてご確認ください

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

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

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

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

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

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