back
PhoneGapの環境を整えよう！ (5/5)
■jQuery Mobileでスマートフォンらしくする
とりあえず、これでプロジェクトを作ってアプリを動かすことは出来ました。が、正直いって、アプリといっても「ただのテキスト」です。いわゆるアプリらしい画面表示ではありません。
ネイティブなアプリ開発の場合、iPhoneやAndroidに用意されているボタンなどの部品を配置していけば、それぞれのOSらしい」GUIが構築されます。が、PhoneGapの場合、そうしたネイティブな部品は使えません。なにしろ、画面の表示はただのHTMLですから、ボタンなどを作ってもただのHTMLのボタンとして表示されるだけです。
そこで、PhoneGapでスマートフォンらしいアプリ作成を支援してくれるものとして「jQuery Mobile」の導入をオススメします。これはスマート向けのWebサイトを構築するためのJavaScriptライブラリで、これを利用することで簡単にスマートフォンらしいGUIが作れるのです。
では、先ほど作ったサンプルアプリにjQuery Mobileを導入してみましょう。まず、「AndroidManifest.mf」の修正を行います。XMLのソースコードを開くと、上から６～７行目あたりにこういう文が見えるはずです。
続いて、index.htmlを修正して、jQuery Mobileを利用する形にしてみましょう。下にindex.htmlのソースコードを下のリスト欄のように書き換えてください。修正したら、またプロジェクトを実行して動作を確認してみましょう。ヘッダーとテキスト、プッシュボタンといったものからなる画面が表示されます。HTMLをそのままで使うより、だいぶスマートフォンっぽい画面になっているはずです。
jQuery Mobileを利用するには、<head>タグに以下の3行を追記するだけです。（なお、ここではjQuery Mobile 1.0.1を前提にしてあります）
※jQuery Mobileによるスマートフォン用Webサイト作成入門
http://libro.tuyano.com/index2?id=624006
ネイティブなアプリ開発の場合、iPhoneやAndroidに用意されているボタンなどの部品を配置していけば、それぞれのOSらしい」GUIが構築されます。が、PhoneGapの場合、そうしたネイティブな部品は使えません。なにしろ、画面の表示はただのHTMLですから、ボタンなどを作ってもただのHTMLのボタンとして表示されるだけです。
そこで、PhoneGapでスマートフォンらしいアプリ作成を支援してくれるものとして「jQuery Mobile」の導入をオススメします。これはスマート向けのWebサイトを構築するためのJavaScriptライブラリで、これを利用することで簡単にスマートフォンらしいGUIが作れるのです。
では、先ほど作ったサンプルアプリにjQuery Mobileを導入してみましょう。まず、「AndroidManifest.mf」の修正を行います。XMLのソースコードを開くと、上から６～７行目あたりにこういう文が見えるはずです。
<uses-sdk android:minSdkVersion="○○" />○○には選んだバージョン番号が入っています。この後に、以下の文を追記してください。
<uses-permission android:name="android.permission.INTERNET" />これは、アプリでインターネットへのアクセスを許可するためのパーミッション設定です。これにより、オンライン経由でjQuery Mobileのライブラリがロードできるようになります。
続いて、index.htmlを修正して、jQuery Mobileを利用する形にしてみましょう。下にindex.htmlのソースコードを下のリスト欄のように書き換えてください。修正したら、またプロジェクトを実行して動作を確認してみましょう。ヘッダーとテキスト、プッシュボタンといったものからなる画面が表示されます。HTMLをそのままで使うより、だいぶスマートフォンっぽい画面になっているはずです。
jQuery Mobileを利用するには、<head>タグに以下の3行を追記するだけです。（なお、ここではjQuery Mobile 1.0.1を前提にしてあります）
<link rel="stylesheet"アプリに限らず普通のWebサイトでも、この3行を記述してやることでjQuery Mobileの機能が使えるようになります。なおjQuery Mobileの使い方については別途入門を用意してあるのでそちらを参考にしてください。
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
※jQuery Mobileによるスマートフォン用Webサイト作成入門
http://libro.tuyano.com/index2?id=624006
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html> <html> <head> <title>My Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <!-- home page --> <div id="home" data-role="page"> <div data-role="header"> <h1>Sample</h1> </div> <div data-role="content"> <h2>Sample Page</h2> <p id="msg">※これはサンプルで作ったページです。</p> <button>click</button> </div> </div> </body> </html>
| << 前へ |