第3回 日記アプリケーションのしくみを考える

では、いよいよ日記アプリケーションを作成してみよう。もうすでに開発環境も整って早くアプリケーションを作りたいかもしれない。しかしいきなり作り始めてもなかなかうまくいかない。まずは一つひとつ手順を追って作っていくことにする。

今回は、アプリケーションの設計をする。設計といっても仕事で使うようなアプリケーションを作るわけではないので、そんなに仰々しいものではない。ようは、最終的なアプリケーションの完成形をイメージしておき、それを具体的にまとめておくことが今回の目的だ。ここでしっかりとイメージを固めておけば、後々の作業もやりやすくなり、また修正も少なくて済むようになる。

条件を整理しよう

今回のエントリー部門の詳細は第2回の記事で紹介したとおりだ。

第2回エントリー部門の詳細が決まりました

http://www.willcom-fan.com/wzero3/entries/staff/000201/

ここでアプリケーションの仕様条件としていくつか決められている。

1. 一覧画面、入力画面、閲覧画面の3つの画面を持つアプリケーション
2. 日記はテキストで保存できる
3. 日記は後から修正ができるようにする
4. 有償のコントロール類は使用しない
5. ソフト キーを使ったアプリケーション

では、この条件を元にアプリケーションを設計してみよう。アプリケーションを設計する場合には、見た目、動き、結果 の3つの要素を考える必要がある。この3つの要素と上記の条件を照らし合わせるとこのように整理することができる。

（画面）　一覧画面、入力画面、閲覧画面の3つの画面
（動作）　日記は後から修正できるようにする （閲覧画面での表示も可能）
（結果）　日記はテキストで保存する

では、この3つの項目をさらに詳しく考えていくことにしよう。

ユーザーインターフェース（画面）を考える

まずは画面から考えていくとわかりやすい。どういった画面を考えたらいいかと考えるときに、一番参考になるのが自分がよく使っているアプリケーションだ。自分が使っているアプリケーション、もしくは自分が作ろうとしているアプリケーションに似ているアプリケーションが一番参考になるだろう（くれぐれも丸々コピーはしないように！）。

では、3つの画面を考えていこう。

【一覧画面】

一覧画面は起動画面であり、すべてはここから出発する。一覧というからには、保存してある日記の一覧が表示され、自分で選択することができるようにする。また、ここから、日記を書いたり（入力画面）、日記を見たり（閲覧画面）と他の画面に移動できるようにする。図は、最低限の要素を満たしたサンプル画面だ。

【入力画面】

日記を書いて保存するための画面になる。今回は日記の要素としては、タイトルと本文だけにしよう。もちろん自分なりに天気や気分などの要素を追加することも面白い。ここでは参考までに画像を読み込む機能も考えてみた。

【閲覧画面】

入力画面を見ると、「必要な情報は確認できるのだから、閲覧画面はいらないのではないか？」と思うかもしれない。しかし、入力画面ではいささか味気ない。そこで、閲覧画面では図のような調整を加えて、ちょっと見た目に凝ってみることにしよう。

また、せっかく見るための画面なのだから、日記のページをめくるように簡単にほかの日の日記に移動できるようにしたい。これはぜひ条件にもあるソフトキーを有効活用したいところだ。

とりあえずこんな感じでイメージがわけばいい。もちろん、ざっと考えたらこの部分は直接Visual Studioで作業してもいいだろう。ようは、ソフトキー、そしてメニューなどが大体イメージできればいい。

アプリケーションの動きを考える

動きといってもアニメーションを考えるわけではない。起動から終了までアプリケーションの何を押したらどう動くかといった部分を考えるのだ。ここは先ほど考えた画面にあわせて動作を考えるのがいいだろう。

【起動から一覧画面】

アプリケーションを起動するとまず一覧画面が表示される。起動時の動作としては

• 保存されている日記がある場合にはフォルダから読み込んで一覧表示をする

という感じだろう。起動後の操作に対する動きとしては、以下のような項目が考えられる。

• 閲覧メニュー、新規作成メニューを選択すると、閲覧画面を表示する
• 編集メニューを選択すると、入力画面を表示する
• 終了メニューを選択すると、アプリケーションを終了する

もちろんはじめからすべて思いつかなくてもいいが、わかる範囲で考えておくといいだろう。

【入力画面】

入力画面では、日記を書くことができる。入力画面を開く際の動作としては、

• もし一覧画面ですでにある日記を選択した場合にはその日の日記を開く
• 新規作成の場合には今日の日記を（すでにある場合には表示して）新しく作成する

といった２つのパターンがある。また、入力画面で画面表示後の動作はあまりないが、基本的には以下の２つの動作は必要になるので抑えておこう。

• 保存メニューを選択すると、保存して画面を閉じる
• 日にちを変更したら、その日の日記を開く

【閲覧画面】

閲覧画面も基本的には動作はシンプルだ。まず画面を表示したら、

• 一覧画面で選択されていた日にちの日記を表示する

ということから始まる。動作はシンプルで移動の機能だけがあればいいだろう。

• 前の日記メニューを選択すると、表示されている日付よりも前の日付の日記を表示する
• 次の日記メニューを選択すると、表示されている日付よりも後の日付の日記を表示する

【3画面】

ということでまとめてみると、起動画面である一覧画面からほかの2つの画面をそれぞれ呼びだすイメージになる。

結果を考える

日記アプリに結果というのもおかしな話だが、最終的にできあがるものは何かを考えるというイメージでいい。ペイントブラシなら、画像ファイルができあがるし、メモ帳ならばテキストファイルができあがる。では日記アプリでは何ができあがるのか。

答えは日記である。当たり前だが、では、この日記をアプリケーションのなかでどのように扱うのか考えておこう。

【保存の単位】

この日記をどのように扱うべきか。今回はもっともシンプルにテキストファイルで保存しようと思う。それも扱いやすいように1日＝1日記テキストファイルという感じだ。

【ファイルの名前と中身】

ファイル名は、わかりやすく日時にしてしまおう。「2006年12月31日.txt」といった感じだ。また、日記の中身は、タイトルと、本文の両方を入れたい。そこで、本文の１行目はタイトル、２行目以降は本文ということにしよう。

サンプル （2006年9月1日.txt）

【ファイルの保存場所】

ファイルはすべて「\My Documents\MyDiary」の下に保存する。もちろん保存場所は自分の好みで変えてもかまわない。ただ、「My Documents」フォルダに入れておけば、ActiveSyncでパソコンとやり取りするのも簡単なので何かと便利なのだ。

アプリケーションのフォルダの下に「MyDiary」のフォルダを作って入れるようにすることも可能だが、人によってインストール場所が異なる可能性があるので、ちょっと面倒になる。

まとめ

今回はアプリケーションの設計を考えてみた。なんとなくこれから自分が作るアプリケーションの形が見えてきただろうか？

もちろん、いつもここまで細かく設計しておく必要はない。簡単な機能から考えて、順次機能を追加していけばよい。しかし、このようにはじめにしっかりと設計しておくと、後々の作業がだいぶ楽になる。

さて、日記アプリもまだまだ考えなければいけない点がいくつかあるが、それはこれから作りながら検討していくことにしよう。

This article posted by staff on 2006/09/14 03:56