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

メモ帳アプリのHTMLコーディング

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

ぜひご覧ください。

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

字幕

このレッスンでは PhoneGap Buildを使った メモ帳アプリの開発において そのユーザーインターフェースをHTMLで コーディングする方法について解説致します まずはダウンロードしてきた こちらの html_codingという フォルダの中に入っている wwwというフォルダの中の こちらの index.htmlファイルを エディタで開いて下さい そしてこれが そのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう このHTMLファイルですが 既に今回のメモ帳アプリの HTMLコーディングが完了している 状態となっています このファイルを目で追いながら アプリを製作していく上で どのように HTMLコーディングを していくかについて いくつかのポイントを 確認していきたいと思います ここで1つ覚えておいていただきたいのが アプリを製作するからといって とりわけ特別な HTMLコーディングは 行いません 普段通りのHTMLコーディングでOKです それでは いくつかのポイントを 見ていきましょう まず こちらのメモ帳アプリですが 主に2つの画面で構成されていましたね まずは「メモ一覧画面」と そして 「メモの個別詳細画面」です まずは こちらの div class="app"と書かれた中に このように セクションで2つの画面用の 枠をとってあります 1つはメモ一覧用の画面で sectionで id="list" の属性が付いたもの そしてもう1つは メモの個別詳細画面で id="detail" の属性が付いたもの こちらの2つを用意します そして そのsectionで囲まれた中 この部分ですね この部分において その画面を構成する 要素をHTMLでコーディングしていきます こちらは「メモ一覧画面」で そしてこちらの部分ですね こちらの部分が「メモの個別詳細画面」の中の HTMLコーディングとなっています そしてこちらの「メモ一覧画面」の方ですが 「メモ一覧画面」では 登録されているメモのデータが リスト形式で表示されている形態でしたが その部分は ulタグと liタグ そしてその liタグの中にはそれぞれに aタグを用いることによって作成しています 本来であれば ここは 保存されているデータの値が 自動的に入ってくるように実装していきますが 今回は 仮の情報としてこのように 5つの li要素でデータを作成しています これと同じように「メモの個別詳細画面」にも 仮でデータをセットしています 1つはこちらの input要素 こちらの input要素には メモのタイトルが入りますが こちらの valueの値には 仮の情報で "ここにタイトル" というテキストを 入れておきます そしてこちらの textareaには 本来であれば 動的にメモの本文が表示されてきますが ここでは仮置きの情報として このようにセットしています そして各画面には それぞれのボタンを コーディングしています まずこちらの「メモ一覧画面」においては こちらの新規作成ボタンを imgで作成して それをaタグで囲っています そして「メモの個別詳細画面」においては 一覧画面に戻るためのボタンを imgタグでセットして こちらも同様にaタグで囲っています そしてもう1つ メモを削除するためのボタンですね それもこちらにセットして 同じようにaタグで囲っています それではこの状態で 一度 この index.htmlファイルを ブラウザで見てみましょう こちらをブラウザで開きます すると このような形で表示されてきましたね もちろん 現在はCSSのコーディングは 行っていないので このようにレイアウトが一切整えられていない 状態で表示されてきます CSSのコーディング方法につきましては 次のレッスンでご紹介していきますので そちらも合わせてご覧下さい 以上でレッスンは終了です 今回はPhoneGap Buildを使った メモ帳アプリの開発において そのユーザーインターフェースを HTMLでコーディングする方法について 解説致しました

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

PhoneGap Buildを使えば、HTMLやCSS、JavaScriptを使って作成したコンテンツを簡単にモバイル用アプリに変換することができます。このコースではPhoneGap Buildを使ってiOSやAndroid端末に対応したメモ帳アプリを作る方法を学びます。アプリのビルドや実機端末へのインストール、各種機能の実装などについても説明します。

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

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

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

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