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

カメラアプリのHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PhoneGap Buildを使ったカメラアプリの開発において、カメラアプリのUIをHTMLでコーディングする方法について解説致します。
講師:
04:03

字幕

このレッスンでは「PhoneGap Build」 を使ったカメラアプリの開発において カメラアプリのUI要するに ユーザーインターフェイスを HTMLでコーディングする方法 について解説致します まずはダウンロードしてきた こちらの「html_coding」という フォルダの中にはいっている このフォルダの中の 「index.html」 こちらのファイルを エディタで開いてください そしてこれがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう 現在開いている こちらのHTMLファイル こちらのファイルはすでに 今回ご説明するHTMLのコーディング が完了している状態 となっています このファイルを目で追いながら いくつかのHTMLコーディングのポイントに ついてご説明したいと思います まずこのHTMLファイルですが もともとは「GitHub」から ダウンロードしてきた プロジェクトテンプレートファイルから 変更をしている状態となっています まず大きな変更点としては こちらの「DOCTYPE」の 上にあった長いコメントアウト の部分を削除して そしてこちらの 「body」の中ですね 「body」タグの中を変えています そしてこの「body」タグの中ですが この「id="app"」 という属性を持った「div」要素の中に 大きく分けて 二つの要素を入れています まず一つ目は 写真をリスト表示するための ページに該当するための「div」タグ そして 個別の写真を表示するための 「"photoPage"」 といった「id」をもった「div」タグ これで二つのページを 構成するようにしています そしてリストページの方には 「id="photoList"」をつけた 「ul」要素をおいて その「ul」要素の中を 空っぽにしています この空っぽにした「ul」要素の中に 写真のリストを 付け加えていく形となります そしてその下には カメラを起動するための 「button」要素を設置しています そしてもう一つの 「"photoPage"」という 「id」のついた「div」ですが こちらは個別写真を表示するためのもので この中には「src」属性 が空っぽの状態の イメージタグを置いています そして最後に こちらの「javascript」ですね この部分を記述しています まずこちらの 「"cordova.js"」というファイルですが こちらは「PhoneGap Build」 を使って 開発するにあたり 必ず必要となるものになりますので こちらはこのように入れて おきましょう そしてその下には ダウンロードしてきた 「jquery」のファイルです そして次の「index.js」は プロジェクトファイル内に含まれている 「index.js」というファイルを 読み込んでいます そして最後にこちらの 「script」タグで囲まれた 「app.initialize();」 こちらに関しても 「PhoneGap Build」を使って 開発するにあたり 必ず必要となりますので これも忘れずに 入れておくようにしておきましょう この「cordova.js」や「index.js」 やこちらの「app.initialize();」 という記述は 「GitHub」からダウンロードしてきた プロジェクトテンプレートファイルの方に 初めから入っているので それをそのまま利用するようにして こちらの「jquery」の部分だけ 新たに足すようにしてください 以上でレッスンは終了です 今回は「PhoneGap Build」 を使ったカメラアプリの開発において カメラアプリのUI 要するにユーザーインターフェイスを HTMLでコーディングする 方法について解説致しました 以降のレッスンでは 作成したカメラアプリの HTMLファイルに対して CSSでスタイルを調節する方法 について解説致しますので そちらもあわせてご覧ください

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

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

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

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

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

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