第5回 日記アプリケーションを作る ― その1 一覧画面の作成

では今回から、日記アプリケーションを作ってみることにしよう。もし、まだVisual Studio 2005を使ってWindows Mobileアプリケーションの作成を経験していないのであれば、前回の記事を参考にして一度簡単なアプリケーションを作ってみることをおすすめする。一度作ってみると大体の流れが分かり、また環境も整うからである。

第4回 Visual Studio を使ってみる

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

アプリケーションプロジェクトを作成する

まず、アプリケーションを作成する。Visual Studio 2005を起動したら、「ファイル」メニューから「新規作成」→「プロジェクト」を選択する。「新しいプロジェクト」のダイアログウィンドウが表示されたら、以下の設定でプロジェクトを作成する。

今回は、「デバイスアプリケーション」ではなく「空のプロジェクト」で作成するので注意してほしい。この空のプロジェクトに１つひとつ画面を作っていくためである。
プロジェクト名はデフォルトでそのままアプリケーションの名前となる。今回は「MyDiary」とした。もちろんこれはPocketDiaryでも、pDiaryでも自分なりに変更してもかまわない。ただしすべて半角の英数字で作成することだけ注意してほしい。

プロジェクト名の設定が終わったら「OK」をクリックしてプロジェクトを作成する。

一覧画面を作る

プロジェクトを作成すると、右上にソリューションが表示され、「MyDiary」プロジェクトと、「MyProject」の2つの項目が確認できる。しかし、空のプロジェクトを作成したので前回のようなPocket PCの画面は表示されない。まずは、ここに一覧画面のためのフォームを追加しよう。

「プロジェクト」メニューから「Windows フォームの追加」を選択すると、「新しい項目の追加」ダイアログが表示され、すでに「Windows フォーム」が選択されているはずだ。ここでファイル名に「listForm」と入力して「追加」をクリックして、閲覧画面を作成する。

これで、フォーム画面が表示されたはずだ。まずはフォームの設定をし、ここにコントロールを配置して画面を作成していこう。

はじめにフォームのタイトルを変更しておこう。タイトルがlistFormではしょうがない。ここは「日記一覧」に変更する。プロパティウィンドウの「Text」欄の「listForm」を「日記一覧」に変更する。このようにフォームのTextプロパティはそのまま画面上ではタイトルとなることを覚えておこう。

コントロールの配置

では、コントロールを配置して画面を作成していこう。画面の設計は第3回での設計を参考にしていくといい。

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

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

まずはLabelを配置する。ツールボックスのLabelコントロールをマウスでドラッグしてフォームに配置する。画面の左上に移動するとほんの少しだけ間隔を置いてスナップするのでその位置でドロップしよう。

その後、幅を調整して右端のスナップポイントまでLabelコントロールの大きさを変更する。

続けてLabelコントロールの設定を行う。「プロパティ」ウィンドウの各項目を以下のように設定する。

これでLabelの設定はひとまず完了だ。

しかし、ここで１点問題がある。フォームのタイトルの部分を右クリックして、コンテクストメニューから「左に回転」を選んでみよう。

するとこのように、Labelが左寄りに表示されてしまう。

現在の設定のままではLabelのサイズが固定なので、画面の回転をすると表示がおかしくなってしまう。そこで、コントロールをフォームの縁に張り合わせて画面サイズが変わったら自動的に大きさを変更するように設定しよう。これには「Anchor」（アンカー）機能を使う。

まずは横画面のまま、titleLabelコントロールの大きさを右端のスナップポイントまで大きくしよう。そして「プロパティ」の「Anchor」をクリックして右端のボタンをクリックする。下のようなウィンドウが出たら、右の部分をクリックして接点を追加する。

これで、上と左右にアンカーが付けられた。アンカーはその方向の隣の縁との間隔を一定に保つ。そのため画面の幅が変化しても画面の縁から設定した距離を保つようにコントロールのサイズを変化させる。

こんどはエミュレータを「右に回転」させてもう一度画面を縦に戻してみよう。今度は、画面サイズに合わせてきちんとtitleLabelコントロールが表示されたはずだ。

リストボックスコントロールの配置

続けて、日記一覧を表示させるためのリストボックスコントロールを配置する。ツールボックスから「ListBox」を画面に配置する。

titleLabelコントロールの下に上下左右に少しだけ余白を開けるように配置したら、以下のようにプロパティを設定する。

これでコントロールの設定は終了だ。画面を回転させてもきちんと２つのコントロールの大きさが画面にあわせて変化することを確認しよう。

ソフトキーメニューの追加

続けて、今回のエントリー部門の条件でもある、ソフトキーメニューの設定をしよう。

はじめに左ソフトキーを設定する。フォームの左ソフトキーの位置でダブルクリックしたらそこに｢日記を見る｣と入力する。

Enterキーを押して確定したら今度はプロパティウィンドウで以下のように設定する。

続けて右ソフトキーメニューだ。ここには同じように「メニュー」と入力し、同じように以下のように設定しよう。

右ソフトキーメニューにはサブメニューを追加する。「メニュー」の上の「ここへ入力」の欄をダブルクリックして同じようにメニューを作成する。（Textプロパティは前述のようにプロパティウィンドウではなくフォーム画面に直接入力する）

区切り記号は、「ここへ入力」のところで右クリックして、「区切り記号を挿入」で追加することができる。

これでソフトキーメニューの作成は完了だ。しかしまだメニュー項目を作成しただけで機能は追加されていない。機能は後から追加していくのでご安心を。

いったんここまでの作業を保存しておこう。「ファイル」メニューから「すべてを保存」を選択して作業を一通り保存しておく。

まとめ

Windows Mobileの画面作成は、エミュレータ画面を見ながらコードを書かずに作成することができる。自分の使いやすいように画面やメニューを自由に修正するとよいだろう。また、Anchor機能を使うことで縦画面でも横画面でも使いやすいアプリケーションを作ることができる。もちろんこういった設定は必ずしも行わなければならないわけではないが、こういった1つ1つの心配りが、よいアプリケーションにつながっていくのである。

では次回は作成したアプリケーションをテスト実行してみよう。

＜執筆者プロフィール＞

高橋 忍
元は、某重工業メーカにて航空機の自動操縦システムのソフトウェア 開発に従事。 その後、マイクロソフトにて開発サポート、コンサルタントを経て、 現在はエバンジェリストとして開発者に新しい技術を紹介している。難しい技術を楽しくわかりやすく伝えるのがモットー。
http://blogs.msdn.com/shintak/

高橋 忍のブログ

http://blogs.msdn.com/shintak/default.aspx

MSDN eye: 第 8 回「Windows Mobile 開発」

http://www.microsoft.com/japan/msdn/eye/

＜書籍情報＞

Windows Mobile 5.0のアプリケーション開発について、もっと詳しく知りたくなったら

Windows Mobile 5.0 アプリケーション開発 Beginner's Book

高橋 忍・著／280ページ／2色印刷／B5変形／CD-ROM付
価格3129円（税込）／ISBN4-7741-2891-0／技術評論社・刊
発売日・2006年9月22日

Track back URL

http://www.willcom-fan.com/adm/mt-tb.cgi/143

Track backs: