2014年1月25日土曜日

APP Inventor で黙祷アプリを作ってみた (7/7)

最後に、画面の見栄えを整えました。
その際、若干ロジックも変更しました。

最終画面は以下のようになりました。

画面1(メニュー)


画面2(黙祷画面)

画面3(設定画面)

画面4(使い方画面)


Google Play にも公開しました。
1分で元気になる黙祷アプリ

ソースは、以下にあります。
https://github.com/mrp1q7z/SilentPrayer

2014年1月23日木曜日

APP Inventor で黙祷アプリを作ってみた (6/7)

今回は、使い方の画面を作ります。
予め作っておいた「usage.html」を表示するだけの単純な画面です。

1.画面のデザイン
WebViewer コンポーネントを貼り付け、画面いっぱいに広げます。
そして、予め作成しておいた、usage.html ファイルをアップロードします。

2.ロジックの組立
初期化時に、URL を指定します。
開発時の URL は、「file:///mnt/sdcard/AppInventor/assets/usage.html」とします。
実行時は、「file:///android_asset/usage.html」になるようです。

開発時と実行時で URL を切り替えるのは面倒なのであらかじめロジックで判定してできないのかを調べましたが、無理っぽい。なので、手動で切り替えることにします。

以上、今回は簡単でした。

PS.
WebViewer で Flash 使えないの?
Youtube など、Flash を使っているサイトを見るとサムネイルの表示はされるが、再生ができません。まだ対応してないのか、それとも何か別の方法があるのかは不明。

2014年1月20日月曜日

APP Inventor で黙祷アプリを作ってみた (5/7)

「黙祷、おわり」の音声を流すコンポーネントを「Sound」から「Player」に変更しました。

理由は、「Player」だと、Completed というイベントがあるのでタイマーで画面をクローズする必要がないからです。

以下に、修正したコードを示す。

修正前(赤い部分を削除)


修正後(赤枠部分を追加)



APP Inventor で黙祷アプリを作ってみた (4/7)

設定画面もできたので、今度は、設定した内容でもって
黙祷画面が動くように変更します。

ここで、ちょっと仕様を変更します。

最初にメッセージを1ずつ表示していたのですが、
これをやめて、1文字ずつ表示するように変更します。

なぜかというと、設定画面で入力した文字(マルチラインをONにして複数行入れれる)を改行コードで1行ずつに分けて、表示しようと思ったのですが、この「文字列を改行コードで分割」する。ってことができなかったからです。
(私が調べた限りでは無理でした。何かご存知でしたら情報をいただけるとうれしいです)

以下は、変更後の黙祷画面です。

以前よりずいぶん変わりました。

1.画面デザイン
・メッセージラベルを1つだけにしました。
・メッセージの文字数を表示する「MeesageCount」ラベルを追加しました。
・画面をクローズするためのタイマー「CloseClock」を追加しました。

2.初期化ロジック
・「g_msgText」というグローバル変数を用意し、画面の初期化時にDBよりメッセージ文字列を読み込んでセットしています。これは設定画面のメッセージで入力したものです。
・メッセージを1文字ずつ表示する間隔「MsgTypingInterval」をタイマーにセットしています。後で設定画面にも追加します。
・設定画面で録音した祈りの言葉を PrayerSound の Source にセットしています。なければプリセットされた、prayer1.wav をセットします。

3.メッセージを1文字ずつ表示する
・何文字目まで表示したかを保持するグローバル変数「g_msgNo」を宣言します。
・「g_msgNo」をインクリメント(1ずつ増加)します。
・「g_msgNo」がメッセージ文字数以内であれば、1文字目から「g_msgNo」までのメッセージを表示します。また、現在の表示位置を「(x/y)」で表示します。
・「g_msgNo」がメッセージ文字数を超えたら、「目を閉じて、12回祈ります」というメッセージを表示し、タイマー(PrintMessageClock)をストップします。黙祷用のタイマー(PlayPrayerClocl)をオンにし、黙祷開始の音声を流します。

4.祈りの言葉を12回流す
・祈りの言葉を何回流した保持するグローバル変数「g_prayerCnt」を宣言します。
・「g_prayerCnt」が12以内であれば、祈りの言葉を再生します。
・「g_prayerCnt」が12を超えたら、「黙祷、おわり」の音声を再生してタイマー(PlayPrayerClock)を停止させ、画面クローズ用の別タイマー(CloseClock)をオンします。
※なぜタイマーで画面をクローズしているかというと、「黙祷、おわり」のメッセージが再生されないうちに画面がクローズしてしまうためです。「黙祷、おわり」のメッセージが再生されるであろう、3秒待ってから画面をクローズするようにしています。

今日はこのへんで。ではまた。

2014年1月16日木曜日

Minimal Debian - 25 SD Card Reader が使えるようにする

私が使っている、Dell Precision M90 には SDカードスロットが付いているのですが、
カードを入れても認識もせず、壊れているものと思っていました。

なので、100円ショップで SD カードリーダーを買って、USB にして使っていました。
※100円なんで驚きですよね。
※100円でもちゃんと動きます。

でも、今日何気に見ていたページにヒントが書いてあったので、そのとおりやってみたら使えました。「libccid」というパッケージを入れるだけでした。

# sudo apt-get update
# sudo apt-get install libccid

しかし、なんで Plug & Play でインストールしてくれなかったのだろう?
マイナーなドライバーなのかな?

2014.01.23 追加
今日気づいたのですが、起動後にSDカードを挿してもマウントしてくれません。
電源を投入する前にカードを挿しておくと認識してくれます。
カードを挿したら自動でマウントして欲しいのだが、どうやるのだろう?

2014年1月14日火曜日

APP Inventor で黙祷アプリを作ってみた (3/7)

今回は設定画面を作ります。
黙祷の最初に表示されるメッセージと黙祷中の祈りの言葉を設定できるようにします。

1.設定画面のデザイン
5秒以内でお願いします。の部分は非表示にしておいて、上の「録音」ボタンが押されたときに、表示するようにします。RecDialog という名前の VerticalArrangement を配置して Visible プロパティを hidden にしています。

2.初期化
画面の初期化のときに、DB から設定情報を読み込みます。
「Message」というタグのメッセージを読み込みテキストボックスにセットします。
「SoundPath」というタグの祈りの言葉の音声のパスをプレイヤーのソースにセットします。
DB に該当のタグが存在しない場合は空白をセットするようにしています。

3.録音ダイアログの開閉
「録音」ボタンを押すと、いきなり録音するのはまずいのでワンクッション設けるようにします。ダイヤログ(といってもパネルのようなもの)を表示して確認後に録音するようにします。
上記は、「録音」ボタンを押すと、ダイヤログを開いたり/閉じたりするロジックです。
「キャンセル」ボタンを押した時も、ダイヤログを閉じるようにしています。
「再生」ボタンを押すと、祈りの言葉を再生するようにしています。

4.録音プロシージャ
実際の録音をするプロシージャを定義します。
吹き出しで、コメントが付けれるので試しに付けてみました。
録音中かどうかで、ボタンのラベルを「録音停止」にしたり「録音開始」に戻したりしています。

5.録音開始/終了処理
「録音開始」ボタンを押したときの処理です。4のプロシージャを呼び出しています。
また、最大で5秒しか録音できないように、5秒経過したら自動で録音が停止するようにしています。

6.データの保存
最後に、データの保存を行う処理です。
画面を閉じるときにメッセージを保存します。

音声の方は、録音完了時(レコーダーの AfterSoundRecorded イベント)で保存します。


今日はこのへんで。ではまた。

2014年1月11日土曜日

APP Inventor で黙祷アプリを作ってみた (2/7)

前回に引き続き「黙祷」アプリの続きです。

まず、黙祷アプリがどういうものかの仕様を整理したいと思います。
・スタートすると、文字のメッセージを表示する。
・「黙祷」の音声を流し黙祷を開始する
・黙祷中は、5秒程度の祈りの言葉を音声で流す。これを12回繰り返す。
・約1分経過後、「黙祷終わり」の音声を流しておしまい。

これだけです。

では、さっそく作っていきます。

1.黙祷画面をデザインする
黙祷の前に表示されるメッセージを1行ごとに貼り付けています。
あと、メッセージは1行ごとに表示させるようにするので、そのためのタイマー(PrintMessageClock)も貼り付けています。Clockは画面上にドロップしても、Non-visible components ということで、画面の下に表示されます。

その他、
・PlayPrayerClock --- 祈りの言葉を繰り返すためのタイマー
・PrayerSound --- 黙祷中に流す祈りの言葉のサウンド
・StartSound --- 黙祷開始時に流すサウンド
・EndSound --- 黙祷終了時に流すサウンド
も貼り付けています。

2.Blocksにロジックを定義する
2.1 Labelをリスト化

メッセージが沢山あるので同じような処理を繰り返すことになるので List に入れます。
Procuduresで「makeMsgList」 という戻り値を返す部品を作ります。
このリストはグローバル変数として定義したかったのですが、Initialize globalで MessageLabel1 をセットしようとすると「ここではまだ定義されてないので使えない」というエラーが出て怒られたので Procedure にしました。

2.2 黙祷画面の初期化

メッセージを表示する間隔を「3秒」にし、すべてのメッセージを非表示にしています。
これは、デザイン時にプロパティをセットすることでも可能ですが、ここではプログラムで行なっています。

2.3 メッセージを1行ずつ表示する
まず、グローバル変数「g_msgNo」を定義して0に初期化します。
これは、1行ずつメッセージを表示するのに今、何行目まで表示したかを保持する変数です。ローカス変数では、タイマーが呼ばれるたびに初期化されるのでグローバル変数にする必要があります。

次に、タイマーで一定間隔ごとに1行ずつメッセージを表示します。
メッセージをすべて表示したら(g_msgNoが11を超えたら) タイマーを無効にして、黙祷中の祈りの言葉用のタイマーを有効にします。あと、「黙祷」開始の音声も流します。

2.4 祈りの言葉を12回再生する
まず、グローバル変数「g_prayerCnt」を定義して0に初期化します。
これは、祈りの言葉を何回再生したかを保持する変数です。ローカス変数では、タイマーが呼ばれるたびに初期化されるのでグローバル変数にする必要があります。

次に、タイマーで一定間隔ごとに祈りの言葉を再生します。
12回再生したら「黙祷、おわり」の音声を流し、タイマーを無効にして画面を閉じます。


3.素材について
「黙祷」、「黙祷中の祈りの言葉」、「黙祷おわり」の音声は、自分の声で録音してもいいのですが、今回は、Open JTalk というオープンソースの文字読み上げソフトて作ったものを使いました。

今日はこのへんで。ではまた。

2014年1月5日日曜日

APP Inventor で黙祷アプリを作ってみた (1/7)

よく終戦記念日などに、「黙祷」...1分後「黙祷おわり」っていうことをします。
これを行う Android アプリを作ってみます。

簡単なアプリなので、Eclipse や Android Studio による Java での開発ではなく、

MIT APP Inventor というツールで開発してみようとおもいます。

MIT APP Inventor とは、簡単に言うと...
・WEB上で
・部品を
・マウスで
・ドラッグ&ドロップするだけで
Android アプリを簡単に作れちゃうというサービスです。
Java のプログラミングの知識は必要ありません。

元々、Google がやっていたようですが、現在は MIT に移行されています。
2014.01.04 現在、「APP Inventor2」になっており、
以前のバージョンより、より使いやすく簡単になっています。
(といっても、以前のバージョンは使ったことがない)

ではさっそく、黙祷アプリを作っていきましょう。

0.事前準備
※インストールなどの作業は別のサイトに詳しく載っているので割愛します。
といっても、Android 端末に「MIT AI2 Companion」というアプリをインストールしただけで、あとは特にインストールする必要がなかった。が、環境によりJavaのインストールとかが必要かもしれません。

※Android 端末を持っていて、パソコンと同じ WIFI で接続されている環境での作業手順です。

1.新しいプロジェクトを作る
まずは、新しいプロジェクトを作ります。
左上の「New Project ...」(画面上の赤い部分)をクリックします。

すると、Create new App Inventor project というダイアログが表示されるので、
Project name: に適当な名前を入力します。ここでは、「SilentPrayer」としました。

2.Android 端末と接続する
上部のメニューバーで「Connect」>「AI Companion」をクリックします。

すると、Connect to Cpmpanion というQRコードが表示されたダイアログが表示されます。

Android 端末で「MIT AI2 Companion」を起動します。
「SCAN QR code」を選択し、パソコン画面のQRコードを読み取ります。
これで、Android 端末との接続が完了し、Web上で作業した内容がリアルタイムに Android 端末に反映されます。

3.画面をデザインする
マウスで部品(左側のPalette)をドラッグ&ドロップして上記のような画面を作ります。
使っている部品は、以下です。()内はPaletteの分類名。
・VerticalArrangement (Layout)
・Image (User Interface)
・Button x 3 (User Interface)
※画像は、title.pngというファイル名で 240x240 のサイズで作成しています。Image の Picture プロパティにセットします。

あと、Button の名前を以下のように変更しています。
・Button1 --> btnStart
・Button2 --> btnSettings
・Button3 --> btnUsage
※Blocks(プログラムみたいなもの)から参照する部品は Button1 という名前ではなく、分かりやすい名前に変更しておいたほうがいいでしょう。

使い方は適当に触っていたら分かると思います。
ちょっと、悩んだ箇所は...
・Imageのセンタリングってどうやるの?
--> VerticalArrangement を配置し、AlignHorizontal プロパティを Center にする。そして VerticalArrangement 上に Image を配置する。

4.新たなスクリーンを追加する
各ボタン(Start、設定、使い方)を押したときに表示される画面を追加します。
「Add Screen ...」ボタンをクリックし、名前を入力してOKボタンを押します。
それぞれ、scrPrayer, scrSettings, scrUsage という名前にしました。

5.ボタンを押したら別画面を表示する
次は、いよいよプログラム(Blocks)を作成します。
各ボタンを押したら別画面を表示するようにします。

メニューバーの「Blocks」をクリックし、モードを変更します。

まず、StartボタンがクリックされたらscrPrayerという画面を開くようにします。
(1)左側の Blocks の中の btnStart をクリック
ウインドウが表示されるので、その中の「when btnStart.Click」というブロックを Viewer にドラッグします。
(2)Blocks の Built-in の Control をクリックし、「Open another screen screenName」というブロックを(1)の do の中にドラッグします。パズルのようにちょうど合わさるようになっているので分かりやすいです。
(3)Blocks の Built-in の Text をクリックし、「A text string」という部品を(2)のscreenName の右側に配置します。
" "の部分をクリックし、「scrPrayer」と入力します。
これで、Startボタンがクリックされたら scrPrayer という画面を開くようになりました。

同様に、
設定ボタンがクリックされたら scrSettings という画面を開く
使い方ボタンがクリックされたら scrUsage という画面を開くという Blocks も配置します。

6.Android 端末で動かしてみる
Android 端末にはデザインした画面が表示されていると思います。
Startボタンを押すと、scrPrayerという画面が表示されるハズです。
ただ、戻るキーを押すと MIT AI2 Companion 自体が終了してしまいます。

「Build」>「App(save to my computer)」 で apk ファイルがダウンロードされるので、
これを Android 端末にインストールすれば、ちゃんと動きました。

長くなったので続きは、また。