PCを使わずに、自分でアプリを作ってみよう 第3回

画面がどんどん動いていくアプリはどう書けばいい？

「PineVentor」でスロットマシンを自作してみる

スロットマシンの処理

　 スロットマシンの処理をもう少し細かく説明します。

　アプリの開始からタイマーコンポーネントをずっと動かしておきます。タイマーコンポーネントは、あらかじめ設定された時間ごとに、対応するonTimer()メソッドを動かしますが、この中でキャラクターBoxのコンポーネントの表示変更用メソッドを呼び出すようにします。

この仕組みによって、ユーザーが何も操作しなくても一定時間ごとに表示変更メソッドが実行され、どんどん表示が変わるという処理が実現できます。

　キャラクターBoxが表示する絵文字は一括で管理した方がいいので、システムコンポーネントが管理することにします。各々のキャラクターBoxが表示を変更したいときは、システムコンポーネントのメソッドに問い合わせて新しい文字をもらうという方式です。

　まとめると、以下のようになります。

1. アプリの最初からタイマーがずっと動いていて、一定時間ごとにキャラクターBoxに表示内容を変更するようリクエストする。
2. キャラクターBoxは動作中と停止中の2つの状態を持っている。動作中状態のときに変更リクエストがあれば、内容を書き換える。停止状態では何もしない。
3. キャラクターBoxが表示する絵文字を一括管理するコンポーネントがあって、問い合わせると新しい文字をくれる。
4. キャラクターBoxにタッチするとそのキャラクターBoxは停止状態になる。
5. スタートボタンを押すと、全キャラクターBoxが動作中状態になる。

　必要なメソッドは以下のとおりとなります。

コンポーネント	イベント	メソッド
cSys	アプリ開始時	cSys.init() 　絵文字を格納する配列を初期化
cSys		cSys.getRndEmoji() 　絵文字配列の中からランダムな絵文字を返す
cBoxA, cBoxB, cBoxC		cBoxA.init() 　表示領域初期化。動作モードを停止中にする
cBoxA, cBoxB, cBoxC		cBoxA.chgImg() 　動作中なら表示内容を変更する
cBoxA, cBoxB, cBoxC		cBoxA.start() 　動作モードを動作中にする。
cBoxA, cBoxB, cBoxC	キャラクターをクリックする	cBoxA.onTouch(te) 　動作中から停止にモード変更
cTimerA	タイマー時刻になる	cTimerA.onTimer() 　全キャラクターを変更するようコール
cButtonA	スタートボタンを押す	cButtonA.onClick(te) 　全キャラクターを動作中にする

　各メソッドの設定を行う前に、PineVentor特有の仕様について説明しておきます。

init() メソッド

　全てのコンポーネントにinit()メソッドが定義されています。各コンポーネントはアプリ実行時にJavascript上のオブジェクトとして作成されますが、作成されるとすぐに各コンポーネントのinit()メソッドがコールされます。コンポーネントを表示するタグのスタイルシートの設定など、特別な初期化が必要なときはここに記述してください。コンポーネントは順に作成されるので、自分が作成されたときに他のコンポーネントが存在するかどうかはわかりません。init()内に他のコンポーネントを呼び出してはいけません。

　cSysは特別なコンポーネントです。cSysのinit()は、全てのコンポーネントが作成された後で、最後にコールされます。cSysのinit()では他のコンポーネントを呼び出しても大丈夫です。

my オブジェクト

　my という名前のオブジェクトはコンポーネント自身を指します。Javascript のthisと似ていますが、thisは呼ばれた状況によって中身が変化しますが、my は必ずコンポーネント自身です。

　cBoxA のメソッド内では、my と書くのと cBoxA と書くのは同じ意味となります。

各メソッドの詳細

　cTimerAを100msごとに呼び出すように設定。my.emoji 配列を定義している。スロットに表示したい文字を変更したい場合は、ここの定義を書き換える。

　なお、画面キャプチャーとcSys.init()のリストで表示されているキャラの絵柄が違っていますが、これは機種による違いです。

　my.emoji 配列の中からランダムに一個の文字を返す。

　自分自身の背景色を透明にし、ポーダーをなしに定義している。my.t は動作モードで、falseは停止中を示す。自分自身を my と記述しているので、キャラクターBoxの内容はすべて同じになる。

　動作モード my.t がtrue （動作中）なら、cSys.getRndEmoji()メソッドからもらったテキストを表示する。

　動作モード my.t をtrue （動作中）にする。

　動作モード my.t をtrue （停止中）にする。

　cBoxA、cBoxB、cBoxC それぞれの表示変更メソッドをコールする。

　cBoxA、cBoxB、cBoxC それぞれの表示開始メソッドをコールする。

Slotアプリの改造

　まったくの新規からアプリを作るのは、どうもよくわからないという人は、このSlotアプリを改造してみることから初めてはいかがでしょうか。サンプルに入っているので、ここまでの状態までもってくるのは簡単です。

　改造するところはいろいろあると思います。たとえばcSys.init()だけを考えても、タイマーの値を変えたらどうなるか試してみるとか、my.emoji にさらに絵文字を追加するとか、いっそカタカナだけにしてみてキャラの並びで言葉遊びができそうとか、いろいろできそうです。

　ゲームとして考えたら、まずコインの数を保存して、キャラクターの組み合わせでコインが増えたり減ったりする仕組みが欲しいです。それにはどこに手を入れればいいでしょうか。

　パソコンが生まれたころは、どんな機械にもBASICが搭載されていて、プログラムを自分で組むのが当たり前でしたが、やがてコンピューターの能力が上がり、処理が複雑になり、プログラムはどこかにいる専門の人が作るものということになりました。人が作った優秀なアプリを使えるのはいいことですが、自分だけのニーズに合わせたアプリを自分で作ることができたら、より快適なコンピューターライフを送れると思います。

■関連サイト

• PineVentor
• PineVentor Guide Book