jQuery Mobile で VOCA その1 (概要とサンプル)

投稿者:マーチン 2011年11月27日

 HTML5 と CSS3 を使って市販のVOCAソフトのようなWebアプリを作れないかを試してみました。一から作るのは無理なので、手軽にモバイルWebアプリを作ることのできるフレームワーク「jQuery Mobile」を使っています。ここで紹介するサンプルは、まだ、実用的なものではありません。
 CSS3、jQuery Mobile の知識があれば、画面の配置やサイズ、表示される文字や画像を、かなり自由に編集することができます。出来上がったデータは、PC上のGoogle Chrome や iPhone、iPad、Android、Windows Phone、BlackBerry でも実行可能(なはず)です。
 同梱した jQuery Mobile のバージョンを1.0 に更新しました。(2011/11/27)

●動画デモ

 Windows PC 上の Google Chrome 14.0 で実行しています。
◆iPhoneサイズ
◆iPadサイズ

●オンライン実行

 PC上のGoogle Chrome や iPhone、iPad、Android で、以下のURLにアクセスしてください。
 音声データをダウンロードする時間がありますので、ネットワーク環境によっては、ボタンをタップしてから音声の再生までに、少し間が空くことがあります。

●オフライン実行

 以下の ZIP ファイルをダウンロードして、解凍してください。ダウンロードしたファイルの改造、再配布はご自由にしてください。
sample02.zip
iPhone / iPad は、こちら sample02.zip
 PC上のGoogle Chrome の場合は、解凍先の index.html を開いてください。
 Android の場合は、解凍したファイルを、SDカードに保存して、ブラウザから開いてください。
 iPhone、iPad は、以下の記事を参照ください。

●jQuery Mobile とは

 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。
 jQuery Mobileが他のスマートフォンフレームと大きく異なるのは、対応デバイスの幅広さです。iOSやAndroidなどのWebKitベースのスマートフォンだけでなく、Windows PhoneやBlackBerryにも対応しており、さまざまな環境に自動的に最適化してくれるのがメリットです。

●技術情報

 高等なテクニックを使っているわけではありません。jQuery Mobile バージョン RC2 の基本的な書式に従って、複数ページの切り替えを行っています。あらかじめ作成した音声データを、HTML5 の Audio タグで再生しています。
 画像ファイルは、Drops (ドロップス)を使用しています。著作権は、Droplet Project (http://droplet.ddo.jp/drops/) にあります。
 音声データの作成は、Galatea Talk を使用しました。 男性と女性の音声を作成してあります。

●更新履歴

2011/11/27
jQuery Mobile 1.0 に更新

2011/10/22
初リリース
jQuery Mobile 1.0 RC2 使用


◆連載

◆関連記事

Copyright © まほろば. All Rights Reserved.(http://mahoro-ba.net/)