その2 チュートリアルから完成まで

■ チュートリアルを途中までやる。

早速、Code Warriorをインストールして、チュートリアルを開始しました。
この、チュートリアル、まさに私の作ろうとしているPalmwareにおあつらえむきです。
で、7章までやったところで、今回使う機能はほぼ網羅できたのでチュートリアルはとりあえずここでやめました。
で、チュートリアルをやってみて思ったことは、

  1. 分かりやすい。
    図が多く、迷う個所はほとんどありません。また、各章毎に、サンプルコードが付いていて、途中の章から始めることもできます。
  2. 開発の流れが分かる。
    リソースの作成、ソースのコーディング、ビルド、エミュレータによる動作確認、と開発の流れが分かります。
と、いうことで掴みはこれでOKなのですが、ことPalm開発初心者としては、
  1. 各章でどこのソースコードが追加されたのかが分かりにくい。
    各章毎にソースコードがついているのですが、各章でどこを追加すれば良いかはマニュアルには記載されていません。
    ソースコードの追加個所を知るには、各章の差分をとる必要があります。
  2. 応用の仕方が載っていない。
    紙面の都合なのかもしれませんが、応用の仕方みたいなことは全然載っていません。
    せっかく、たくさんのサンプルが付属しているのですから、「こんなことはこのサンプルを参照してください」とか、ポイントだけでも載っていたらよかったのにと思いました。

という欠点もあり、チュートリアルが終わって、さあ、はじめよう!と思うととたんに立ち往生することになります。きっと既に別な環境でPalmwareを開発している人向けなのでしょう。
実際、私もO'REILLYの「Palmプログラミング」買ってしまいました。それでもよく分からないところはサンプルを見たり、WEBで「Palm」「プログラミング」で検索して、それを参考にしました。

■ 名前とインタフェースを考える。

まず、名前を考えないと、始まりません。
「Hiragana Pictures」略して「HiraPic」。あんまり考えてないので後から後悔しそうですが、とりあえずこれで。

続きまして、インターフェースの具体化です。

前回、

「イメージとしては、画面上に絵の出るスペースがあって、その下にひらがな50音の並んだ入力ボタンがあり、ボタンをタップすると上のスペースに対応するカラーの絵が出るというものです。」

と書いたのですが、そのイメージで画面を作ると、こんな感じになります。

駄目です。2歳児Palmwareとしてはボタンが小さすぎます。それに絵のスペースも小さいです。
と、言うわけでいきなり方針変更することにしました。

  1. ボタン入力のみの画面を2画面(あ行〜な行)と(は行からわ行)作る。
  2. 絵の画面は1画面の3分の2をBitmapの絵、残りを絵のタイトルに割り当てる。

そうすると、こんな感じになります。
(以下の説明では順にキー画面2、キー画面1、絵画面と呼ぶことにします。)



イベントの処理はこんな感じで。

  1. ボタン
    「あ」〜「ん」の各ボタンを押すと、それに対応した絵画面に遷移します。
  2. ハードボタン
    キー入力画面1,2の遷移は「予定表」、「アドレス」、「ToDo]、「メモ」ボタンで行うことにしました。
    はじめは、ボタンを押すたびに、キー画面1とキー画面2を切り替わるようにしようと思ったのですが、奴はボタンを連打する傾向にあるので、「予定表」、「アドレス」ボタンをキー画面1、「ToDo]、「メモ」ボタンをキー画面2に割り当てることにしました。
    上下ボタンは絵画面で押された場合、「上」で前の絵、「下」で次の絵、キー画面で押された場合、「上」でキー画面1、「下」でキー画面2に割り当てます。
  3. シルク
    シルクは全てマスクします。

各遷移でビープ音を出します。遷移できない場合、(キー画面1にいて、「上」ボタン押下など)もエラー音を出すことにします。


■ 完成?

当初、ここでプロトタイピングをして完成品とする予定だったのですが、プロトタイプ作成までに時間がかかりすぎ、もたもたしているとユーザが3歳になってしまうので、一気に完成品にしました。使ってみて問題があればバージョンアップということで。

完成版1 完成版2

仕様変更

    いろいろと仕様も変えました。
  1. 作っている間にユーザが成長して、ジョグダイアルがまわせるようになったので、対応しました。
  2. 「シルクをマスク」は間に合いませんでした。次の課題ということで。
  3. 個人的な興味でメニューも作ってしまいました。単なる自己満足ですね。(これは無くなる可能性大。)
  4. 結局、全部ハードコーティングになってしまいました。「オヤヂ de MAMBO!」みたいに画像ファイルをDBに切り出したかったのですが、こちらも時間切れということで。。

苦労した点
  1. 今回、一番大変だったのが、47枚の絵を書くところでした。MSペイントにマウスで 絵を書いて、Constructor for PalmOSにカット&ペーストしたのですが、 白黒しかコピーできないので白黒をコピーしてConstructor上で色を塗りました。 このConstructorの画像エディタの出来が悪く、 画面サイズが変えられないためドット単位の色塗りはほとんど勘の世界です。 マウス左クリックとCtrl+Z(Undo)の繰り返しを何度したことか。 また、私の落書きチックな絵なんて16色もあれば十分なのにカラーは256色カラーしか選択できません。 ファイルサイズがでかい(350K!!)のはそのせいもあるかと。
  2. プログラミングではまったのはハードキーの設定です。ハード1〜4キーに上下操作を割り当てて、テストしてもメモ帳などの元のアプリが起動してしまいます。あんまり分からないので、環境設定でハードキー全部にHiraPic割り当ててごまかしちゃえ、などと物騒なことも考えましたが、我に返って「Palmプログラミング」読んだらちゃんと載ってました。ハードキーが押されたら、SysHandleEvent()処理に行かないでAppHandlEvent()が処理されるようにしたら、所望の動作をするようになりました。

Special Thanks
  1. 「理論は後からついてくる?!」:このサイトが無かったら完成は更に遅れた事でしょう。内容は分かりやすく、CodeWarriorにこのレベルのチュートリアルが付いていたら、と思ってしまいました。Bitmapを書き換えるところ、音を出すところはこちらをパクリ参考にしました。この場を借りてお礼申し上げます。どうもありがとうございました。
  2. 「Palm Hackers Salon」:私をCode Warriorのモニタに選んでいただき、本Palmwareを作るきっかけを与えてくれたスタッフの方々に感謝します。
  3. 桜(2歳)&香織(1歳):我が愛娘たち。HiraPicのベータ版テスターでありユーザ第1号2号。香織、Palmを投げるな。
というわけで、お待たせしました。2歳児Palmwareの完成です。お子さんをお持ちで、多少手荒に扱われてもいいPalmをお持ちの皆さん、是非ダウンロードしてお子さんに遊ばせてあげてください。ちょっと高いおもちゃだけど。

ダウンロード

こんな感じで使っていただければ。

桜&S500_1 桜&S500_2


copyright(C)2002 Hacker Dude-san all rights reserved.