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

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
作成したカメラアプリのHTMLファイルに対して、CSSでスタイルを調節する方法について解説致します。
講師:
05:03

字幕

このレッスンでは 前回のレッスンで作成した カメラアプリのHTMLファイルに対して CSSでスタイルを調節する方法 について解説致します まずはダウンロードしてきた こちらの「css_coding」という フォルダの中にはいっている こちらの「CSS」フォルダの中の 「index.css」ファイルを エディタで開いてください そしてこれが そのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速 レッスンを始めていきましょう この今表示されている 「index.css」ファイルは すでに今回のカメラアプリ用に スタイルシートを設定した状態 となっています もともとは「GitHub」から ダウンロードしてきた プロジェクトテンプレートファイルの CSSの内容でしたが それをすべて削除して カメラアプリ用に再度 スタイルシートを設定しています それではこの「index.css」 を目で追いながら いくつかのポイントについて 解説していきたいと思います まず基本的には 「PhoneGap Build」を使って アプリを構築する とはいっても CSSコーディングに関しては 特に特別なことを意識する 必要もなく 普段通りのコーディングでOKです ただアプリを構築するにあたって いくつかのテクニックがありますので そちらもあわせてご紹介します まずこのように「body」タグや 「id=#app」のついた「div」タグ こちらに対して「width」や 「height」を100%にしておきます このようにすることで どのような解像度を 持つ端末が来ても それに合わせるような形で アプリの画面の縦幅や横幅を 設定することができます そして今回のカメラアプリ 二つのページから成り立っていますね まずは撮影した写真を一覧表示させる リスト画面と そのリスト画面から写真を選択して 表示させる 個別表示画面 それらに対しても スタイルシートを当てていきます まずリスト表示画面に含まれる この「photoList」 という「id」のついた「ul」タグ こちらに注目してください まずこちらの「width」や 「height」を使って リスト画面の 横幅や縦幅を 指定することができます 今回のコースではiPhone6+を 確認端末として利用しています ですのでこちらの 「width」や「height」は それに合うような形の ピクセル数で指定しています ただ先ほども言ったように 色々な解像度を持つ端末に 対応させたいということであれば こちらを%指定にするのもありですね そして次にこちらをご注目ください 見慣れない 「CSS」プロパティが出てきました 「-webkit-overflow-scrolling:」 というプロパティになっています このプロパティで 「touch」を選択することによって アプリの中での 画面スクロールの際に 滑らかな慣性のついたスクロールを 実現することができるプロパティ となっていますので 覚えておきましょう それでは次に 個別表示ページの方の スタイルシートも見ていきたいと思います それはこちらの部分になりますね 「id=#photoPage」という属性をもった 「div」タグです こちらでも 「width」や「height」を使って iPhone6+のサイズに 最適化していますが 皆さんの手元の端末が 違う解像度の端末であったり 色々な種類の解像度に 対応したいということであれば 適宜変更していただいても大丈夫です そしてこの「id=#photoPage」という 属性をもった「div」タグには 「position absolute」と「z-index:10」 をつけてそして「top;0」「left:0」 としています こうすることによってリストページ の上に覆いかぶさるような形で この個別ページを配置することが できるようになります そしてデフォルトの状態では 一覧ページを見せておきたいので こちらの「display;none」を付けて 初期状態では 表示を隠している状態としておきます このようにすることで 2ページ構成のアプリを実現しているわけです これら以外の スタイルシートの設定については 普段通りのレイアウトを調整する形 で設定していますので 合わせて参考にしてみてください 以上でレッスンは終了です 今回は前回のレッスンで作成した カメラアプリの HTMLファイルに対して CSSでスタイルを調節する方法 について解説致しました 以降のレッスンからは JavaScriptを使って アプリの中でカメラ機能を 利用する方法について解説致しますので そちらもあわせてご確認ください

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

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

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

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

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

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