バージョンアップでFacebook投稿機能などを追加する

2012年4月27日(金)
PROJECT KySS

アプリの機能と画面遷移

今回バージョンの画面遷移

機能を強化したことにあわせて、画面遷移も見直していきます。

前バージョンは、メインページ、入力・保存ページ、表示ページ、ヘルプページ(削除機能含む)の4ページで構成しました。今回は、それよりも機能が増えますが、単純に1機能を1ページとして追加するとバランスの悪い増改築になるかもしれませんから、アプリ全体を見直してみましょう。

その際、リジェクトなしでの認定を目指すべく、できるだけキャッシュの問題に関わらなくても済むように、「戻る」ボタンの処理をできるだけ書かなくてもよい画面遷移を考えてみます。

そこで、「入力」→「月選択」→「選択した月のデータを表示」という3段階の処理を、3ページではなく2ページにまとめることにします。

このような方針で考えた画面遷移が、図6です。一画面に内容が収まりそうにないヘルプページはPanorama Page、それ以外はPortrait Pageにします。それぞれのページの名前は、図6中の青文字のとおりです。

今回は、メインページ、facebookへの投稿設定ページ、入力・翻訳・保存・投稿・表示月選択ページ、表示ページ、削除ページ、ヘルプページの6ページ構成になります。

入力と表示月選択機能は1ページにまとめ、表示・非表示で切り替える方法を採用します。

つまり、入力画面の上に、表示したい俳句の月選択ボックスを重ねて表示するわけです。ただし、ウィンドウが上に開いていることが分かるように、デザインを工夫します。

 図6:このアプリのページ構成と画面遷移(クリックで拡大)

各ページに実装する機能

メインページ(入力、ヘルプ、削除、投稿設定メニューの選択)

  • ロゴがタップされた時、入力ページに移動させます。
  • 「?」ボタンがタップされた時、ヘルプページに移動させます。
  • 「設定」ボタンがタップされた時、facebookへの投稿設定のページに移動させます。
  • 「削除」ボタンがタップされた時、俳句ファイルの削除ページに移動させます。「削除」ボタンは俳句が記録されている時のみ使用可能とします(図7)。
 図7:メインページ。俳句ファイルがない時は「削除」ボタンは使用不可能とする(クリックで拡大)

投稿設定ページ(facebookへの投稿設定)

  • デフォルトでは、投稿しない設定にしておきます。
  • タイトルとリンク先が入力され、「設定保存」ボタンがタップされた時、設定情報をXMLファイルとして保存し、これを投稿時に利用します(図8)。
  • 「投稿不要」ボタンがタップされた時、設定情報を破棄します。
 図8:投稿設定ページ(クリックで拡大)

入力ページ(データの入力・検証・保存、季語のbing検索、翻訳、表示月選択)

  • 俳句入力ボックスの中に、改行しながら日本語の俳句を入力できるようにします。
  • 必須項目を検証し、不備がある場合はメッセージを表示します。
  • 必要であれば、コメント欄に、ルビや注釈などを入力できるようにします。この内容は覚書であり、ファイルに記録するだけとします。
  • 日本語俳句が入力された状態で「英語」ボタンがタップされた時、bing翻訳を実行します。英語俳句は任意とします(図9)。

なお、記事のキャプチャに使っているサンプルデータは、英語俳句を和訳する手順で作成したものですので、翻訳してもサンプルの英語俳句にはなりません。

 図9:俳句の入力と翻訳支援機能(クリックで拡大)
  • 「季語検索」ボタンがタップされた時、現在の月の季語を、bingで検索させます(図10)。
 図10:月別の季語検索(クリックで拡大)
  • 「保存」ボタンがタップされた時、年月日、俳句、あれば英語俳句やルビの記録された「○年○月.xml」という月別のファイルを、Windows Phone 実機の指定フォルダ内に保存します。このファイルは、Windows Phone Power Tools(第7回参照)で利用できるものとします(図11)。
  • 前掲の図4のように、facebookへの投稿設定を行っている場合には、保存処理に引き続き投稿機能を実行します(図12)。
 図11:保存された俳句ファイルはWindows Phone Power Toolsで利用できる(クリックで拡大)
 図12:facebookへの投稿が設定されている場合は、保存に引き続きfacebookへの投稿処理を実行する(クリックで拡大)
  • 俳句が一句でも記録されている場合「一覧」ボタンを利用可能にします。この「一覧」ボタンがタップされた時、入力画面の上に、保存済み俳句の年月をリスト表示します(図13)。
  • 年月以外の部分をタップすると、このリストを表示しているウィンドウを閉じるようにします。
 図13:月選択ウィンドウを表示する(クリックで拡大)

表示ページ(選択された年月の、俳句の昇順・降順ソート表示)

  • 選択された年月の俳句を表示します。
  • 今詠んだ最新の俳句をすぐに確認できるように、「▼」ボタンで詠んだ順、「▲」ボタンで新しい順に並べ替えます(図14)。
 図14:俳句のソート表示(クリックで拡大)

削除ページ(月別俳句ファイルの削除)

  • 保存年月別に、ファイルを削除できるようにします(図15)。
 図15:俳句ファイルの削除(クリックで拡大)

ヘルプページ(ヘルプ)

  • アプリの説明と操作手順を記載します。複数ページから成るため、今回もPanoramaを使います(図16)。
 図16:今回もヘルプページにはPanoramaを使う(クリックで拡大)
  • ロゴとボタンのExpression Designファイル

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています