5.8. SmartDeviceのサンプル

5.8.1. 概要

HTML5、jQuery Mobileのスニペットを利用して作成される画像展示、音楽放送のサンプルです。 詳細は、スマートデバイスアプリケーションの作成 の中で説明しています。

Caution
事前に「ADT Bundle for Windows」という Android SDK をダウンロードして、インストールする必要があります。「ADT Bundle for Windows」のダウンロード、及びインストール、設定方法 の詳細は[シミュレータでのテスト実行]を参照してください。

5.8.2. 構成

表2.5.9.2-1
src Webプロジェクトのソースフォルダです。
src/ContentInfo.java ContentInfoサーブレット。
WebContent コンテキストディレクトリです。
WebContent/index.html Loginページです。
WebContent/msg.html ようこそダイアログページです。
WebContent/content.jsp Image Showページです。
WebContent/music.jsp Music Showページです。

5.8.3. 実行手順

  1. サンプルプロジェクト SmartDeviceSample.zip をインポートします。

  2. [ jQueryとjQuery Mobileのインポート ] を参照して、jQuery 1.9.1とjQuery Mobile 1.3.2をダウンロードして、jquery-1.9.1.min.jsjquery.mobile-1.3.2.min.jsjquery.mobile-1.3.2.min.cssimagesフォルダ をSmartDeviceSampleプロジェクトの WebContent に入れます。

  3. 右クリックメニュー > サーバで実行 を選択します。

  4. http://Webサーバ名(ドメイン省略不可):ポート番号/SmartDeviceSample/index.html にアクセスします。

  5. User name に任意のユーザ名を入力して、Login をクリックします。


    図2.5.9-1

    Save user nameYes にスライドすると、カレントユーザ名が保存されます。次のログイン時、保存されたユーザ名が表示されます。


    図2.5.9-2

  6. Login ボタンをクリックし、Noticeダイアログがポップアップされます。 


    図2.5.9-3

  7. OK ボタンをクリックし、 Image Show ページに遷移します。


    図2.5.9-4

  8. Search...欄 で、pp2 を入力し、検索結果と一致する内容だけが表示されます。


    図2.5.9-5

  9. 画像リストの一つをクリックし、原画がポップアップされます。


    図2.5.9-6

  10. 原画を閉じて、Music ボタンをクリックし、 Music Show ページに遷移します。


    図2.5.9-7

  11. 音楽リストの一つをクリックし、オーディオコントロールがポップアップされます。プレーボタンをクリックし、音楽が放送されます。


    図2.5.9-8

  12. オーディオコントロールを閉じて、Logout をクリックするとログインページに戻ります。


    図2.5.9-9


5.8.4. 注意事項

このサンプルはjQuery 1.9.1、jQuery Mobile 1.3.2での動作する実績があります。

HTML5、jQuery Mobileをサポートしているブラウザー(例:IE10以上)で実行してください。