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

JavaScriptの読み込みと事前設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML内からJavaScriptとjQueryを読み込む方法と、メモ帳アプリを開発するにあたっての事前設定として、アプリ内の画面ごとに対して変数を定義する方法について解説致します。
講師:
04:53

字幕

このレッスンでは HTMLファイル内からJavaScripと jQueryを読み込む方法と メモ帳アプリを開発する にあたっての事前設定として アプリ内の画面ごとに対して 変数を定義する方法について解説致します まずは ダウンロードしてきたこちらの load_jsホルダーの中に入っている まずはこちらのindex.htmlファイル そしてこちらのjsホルダーの中に入っている app.jsとindex.jsファイルを エディタで開いてください そしてこの画面がそれらの ファイルを開いた状態です これらのファイル使いながら今回の レッスンの解説を進めていきたと思います それでは早速レッスン始めていきましょう 今こちらの画面の右側で表示しているのが こちらのindex.htmlファイルを ブラウザで表示した状態となっています それではまず こちらの index.htmlファイルに JavaScriptを読み込む 設定をしていきましょう こちらのHTMLファイルの 一番下 この部分ですね この部分がJavaScriptの 読み込みを行っている部分です まず こちらの一番上の cordova.jsというファイルですが こちらはPhoneGap Buildに ファイルをアップロードした際に 初めて読み込まれるファイルとなっていて PhoneGap Buildで アプリを生成するために 必ず必要なファイルとなっていますので これはこのまま利用していきます そして次に こちらのjQueryですね こちらのjQueryは jQueryのサイトからダウンロード してきたjQueryのファイルを 先ほどのjsホルダーに保存して 読み込み行っています そしてその次にこちらの app.js こちらは こちらで 読み込んでいるファイルですね これは自分で新しく生成した ファイルとなっています そして 最後に読み込みを行っているのが こちらのindex.jsファイルです こちらのファイルも このファイルですね こちらのファイルをここで読み込んでいます このファイルはテンプレートファイルに 元々含まれていたファイル となりますのでこれもそのまま このような形で読み込みます このようにJavaScriptを 読み込む順番に注意しながら それぞれのファイルを 読み込むようにしてください ちなみに最後のこの部分ですが この部分はこちらのindex.js のファイルに含まれている このinitializeという関数を 実行するためのものです こちらも元々テンプレートファイル の中に記述があったものですので これはこのまま利用します それでは 次にindex.jsファイルを 見ていきたいと思います このindex.jsファイルは この部分が元々テンプレートの ファイルの中に記述されている 部分となっています この部分の中でこちらの部分 を変更してみます こちらの部分では 後ほどご紹介する こちらのapp.jsフォルダ の中で定義している memoAppという関数を 呼び出すようにしています ここに書くことによって アプリを実機端末で起動して アプリの準備が整った時に このmemoAppという関数が 呼び出されるようになります ただ このままですと PC上での開発においては 不便となってしまいますので こちらに ローカル開発用として 同じmemoAppという 関数を記述しています このようにすることで PC上での開発も同じように 動作確認をしながら 実行していくことが可能です それでは次に こちらのapp.js ファイルを見いきたいと思います こちらでは 先ほどご紹介した 関数 memoAppを定義していますね そしてその中では ページの定義という形で 二つの変数を定義しています まずこちらのpageList という変数ですが こちらにはid listの属性がついた sectionを格納しています そして次にこちらの pageDetailという変数には id detailがついた sectionを定義しています このように定義しておくことで 今後のアプリの開発を効率よく 進めていくことができます 以上で レッスンは終了です 今回はHTMLファイル内から JavaScriptとjQueryを 読み込む方法と メモ帳アプリを開発するに あたっての事前設定として アプリの中の画面ごとに対して 変数を定義しておく方法 について解説致しました 以降のレッスンでは アプリを 動作させる端末の高さに応じて メモ帳の本文入力部分の高さを JavaScriptを使って調節する 方法について解説致しますので そちらも合わせてご覧ください

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

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

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

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

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

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