まほろば

<<前の記事　次の記事>>

jQuery Mobile で VOCA その１ （概要とサンプル）

投稿者：マーチン　 2011年11月27日　
カテゴリ：障碍者全般::VOCA (会話補助装置)

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

●動画デモ

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

●オンライン実行

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

●オフライン実行

　以下の ZIP ファイルをダウンロードして、解凍してください。ダウンロードしたファイルの改造、再配布はご自由にしてください。
sample02.zip
iPhone / iPad は、こちら sample02.zip
　PC上のGoogle Chrome の場合は、解凍先の index.html を開いてください。
　Android の場合は、解凍したファイルを、SDカードに保存して、ブラウザから開いてください。
　iPhone、iPad は、以下の記事を参照ください。
⇒ 【まほろば】jQuery Mobile で VOCA その２ （オフライン実行）

●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
ｊQuery Mobile 1.0 に更新

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

◆連載
【まほろば】jQuery Mobile で VOCA その１ （概要とサンプル）
【まほろば】jQuery Mobile で VOCA その２ （オフライン実行）
【まほろば】jQuery Mobile で VOCA その３ （音声作成ツール）

◆関連記事
【まほろば】使ってみようGalateaTalk (総合案内)
【まほろば】おしゃべりプレイヤー Ver.1.3 (インストール)
【まほろば】iPhone/iPad コミュニケーションツール１ (シンボル)


<<前の記事　次の記事>>

↑