GAE アプリでユーザごとの設定を可能にする #3

GAE が提供するユーザサービスとデータストアサービスの使い方が必要なだけはわかったので、Blogger Glass に追加する機能の具体的なデザイン(意匠と設計)に入ろう。

設定画面

設定画面には、設定可能な項目ごとに現在の値と編集のための入力フィールドが表示される。また、画面には「保存(Save Settings)」と「キャンセル(Cancel)」、さらに「削除(Delete)」の 3 つのボタンがある。それぞれの役割は以下の通り。

ボタン	機能
保存 (Save Settings)	編集した値を保存する。保存後、元の画面に戻る。
キャンセル (Cancel)	編集内容を破棄して元の画面に戻る。
削除 (Delete)	設定自体を削除するためのものだ。削除後、元の画面に戻る。

いずれの場合も、元の画面に戻ることが「ユーザ体験」上意味がないのであればトップ(一覧表示)画面に戻る。

画面遷移

これまでの「一覧表示(List)」、「内容表示(Post)」の 2 つの画面(ビュー)に加え「設定(Settings)」が加わる。3 つの画面間の遷移は以下のようになる。(1) が List、(2) が Post、(3) が Settings を表している。

Blogger Glass: 画面(ビュー)遷移

画面遷移の種類は以下の 4 つ。始めの List -> Post は従来からある遷移で、記事一覧の各項目のリンクをたどって個別の記事内容を表示させるときのものだ。

• List -> Post
• List -> Settings
• Post -> Settings
• Settings -> List

以下で、新しく増える 3 つの遷移について説明する。

List -> Settings

一覧表示画面から設定画面に移る遷移。一覧表示画面中の「設定」リクエストを発行するリンクをたどることで起こる。設定画面はログイン前提だから、必要に応じて「ログイン画面」が遷移中に挟まる。

Post -> Settings

内容表示画面から設定画面に移る遷移。一覧表示画面中の「設定」リクエストを発行するリンクをたどることで起こる。設定画面はログイン前提だから、必要に応じて「ログイン画面」が遷移中に挟まる。

Settings -> List

一覧表示画面から設定画面に移ってきた場合、設定の保存またはキャンセルを選ぶと、元の画面(一覧表示)に戻る。そのときの遷移だ。

「Settings -> Post」がない理由

「Settings」ではブログを指定する「Blog ID」を切り替えることができる(ようになる予定)だ。ところが、「Blog ID」が変わると、「Post」で記事を指定している「Post ID」が変わる。だから、単純に元の「Post」画面(の URL)に戻ると、記事が存在しないことになり、空の画面が表示される。

そもそもブログが変わっているのだから、記事の内容表示画面に戻る意味がない。

もっとも、「Settings」で設定できる項目が増えたなら、ブログの切り替えを伴わない変更も出てくる。その場合は「Post」に戻る方が(ユーザ体験として)使いやすい。この件は、設定項目が増えたときに、もう一度考えることにしよう。

メニュー

これまでは特に機能を実行するメニューを用意していなかったが、今回から「ログイン(ログアウト)」および「設定」機能が追加されるため、メニューを用意する。言うまでもなく、メニューだから全画面で共通に表示される。

メニュー自体は全画面で共通だが、項目はその画面と状況で有効なものだけが表示される。

メニュー項目 (並び順)

項目	機能
List	一覧表示画面に移る。ログインの状態に関係なく、この項目は常に表示される。
Settings	設定画面を開く。設定機能はログイン前提なので、ログインしていない状態ではこの項目は表示されない。
Login	ログインする。ログイン画面に移る。ログインしている状態ではこの項目は表示されない。
Logout	ログアウトを実行する。ログイン必須の画面で実行した場合、トップ(一覧表示)画面に戻る。ログインしていない状態ではこの項目は表示されない。

リクエスト形式

「設定」画面への遷移を行うリクエストを追加する。現時点のすべてのリクエスト形式を以下に示す。

リクエスト	機能
/	page=0 を指定した場合と同様。
/?page=<number>	number で指定したページの一覧を表示する。
/post/	最新の記事の内容を表示する。
/post/?id=<id>	id で指定した記事の内容を表示する。
/settings/	設定変更のための画面を開く。

関連リンク

• Blogger Glass (GAE アプリ)

関連記事

• GAE アプリでユーザごとの設定を可能にする #1
• GAE アプリでユーザごとの設定を可能にする #2