FileMakerで蔵書アプリその9 トップページを作る

FileMakerで蔵書管理アプリを作る話、これまでいろいろ寄り道しながら国立国会図書館データベースから取り込む方法を取り上げてきましたが、今回からは「よりアプリらしく機能すること」を目標にしたチューニングについて書いていこうと思います。

起動するシチュエーションを考えてみる

基本的に自分用に作るアプリなので、自分で把握していれば最初の画面はなんでも良いと思うのですが、アプリを立ち上げた時にいろんな情報が目に入ってくると、立ち上げた目的を忘れてしまったりもするので、目的に対してシンプルに見せるのが良いと思います。検索するつもりでブラウザを立ち上げたのに、目に入ったニュースの見出しをクリックして徘徊してしまった結果、何を調べるかを忘れてしまったことはあるでしょう。

前回までで作ったものは、起動時の画面は特に設定していないので、起動した時の表示は前回最後に表示した画面になります。最後に見た本の詳細画面か、登録書籍一覧の画面のどちらかでしょう。まだ実装していませんが、一覧も絞り込み検索をしていればその絞り込まれた状態です。一つ一つは細かな違いですが、重なっていけばそれが原因で予想外の挙動をすることもあります。
特に画面上に配置したボタンで全て制御する場合は元に戻れないなんてことも起こりますので、初期状態を決めておくこと、セッションが終わったらその初期状態に戻すことは管理する上でも、実際の使い勝手の点でも大事なことです。今回はトップ画面を作り、操作手順を整理していきます。

アプリを立ち上げる目的は「本を登録する」「登録した本を見る」の2択なので、最低限その２つが明示されていれば良いですが、もう少しフローを丁寧に見てみます。
書籍の追加方法で想定しているのは以下の３通りです

• バーコードを読み込み

• ISBNコードを手入力

• 各項目を手入力

一方、登録した本を見る場合も考えられるシチュエーションはありますが、登録した本に属性をつけて検索することが基本になるので後日改めてまとめようと思っています。とりあえず今回はアプリを立ち上げてから本を登録するまでの手順を整理することに留めます。

トップページを作る

それでは、必要な要素を検討しながら画面を作ってしまいます。
ベースになるのは「その７」の記事の最後にリンクした「ほん-公開用9」のファイルです。これに機能を追加していきます。

https://note.com/makeours/n/n03d4ab1c46e6

書籍の追加方法として３通りを挙げましたが、実際の割合としては私の感覚だとこんな感じです。
・バーコード読み込み・・・98％
・ISBNコードを手入力・・・0.2％（カバーが無く、奥付でコードは確認できたもの。古書や出先でたまたま出会ってしまったものなど）
・各項目を手入力・・・1.8％（小出版などISBN登録のないもの、国立国会図書館データベースに登録される前の新刊、タイトルだけ聞きかじったものなど）
あくまで私自身の蔵書の範囲での感触なので、この割合は人によって違いますが、実物があればほぼ全てバーコードの読み込みで対応できていますので、バーコード読み込みまでの操作フローがシンプルであれば、かなり使いやすいものになります。

バーコード読み込みなどの基本的な機能はすでに「新規入力」のレイアウトに実装してあるので、レイアウトをコピーしたものを元に進めます。
いきなりですが元からあった入力画面（左）とこれを元に作ったトップページ（右）です。

前に作った新規入力画面と新たに作ったトップページ

だいぶ印象は違いますが、ここで行ったことは
・ISBN以外のフィールドを削除
・「バーコード」ボタンを大型化
・「読み込み」ボタンを大型化して虫眼鏡アイコンに変更
・「書籍情報を手入力する」ボタンを追加。使用頻度が低いためテキストリンク
・「一覧」ボタンを追加。「レイアウト切り替え」ステップを割り当て
・「終了」ボタンを追加。「ウィンドウを閉じる」ステップを割り当て

スマホの一画面の範囲に収まるよう、要素を少なくして、ボタンを大きくしておくことがポイントです。要素が増えてもスクロールで対応できますが、操作性は悪くなるので極力避けたほうが良いです。

スクリプトの変更も必要

レイアウトをコピーした際に、レイアウト上のボタンに割り当てられてるスクリプトはそのままです。「バーコード」ボタンに割り当てたスクリプトはひとまず、読み込んだ数字を「ISBN」フィールドに入力して、その後に「読み込み」ボタンに割り当てた各項目を取得するスクリプトが作動するようになっています。
２つのレイアウトは同じテーブルを使用してますので、トップページの「ISBN」フィールドに入力した値は「新規入力」レイアウトの「ISBN」フィールドにも入力されている状態になります。
ですので、各項目を取得するスクリプトの冒頭、XMLを取得する前に「新規入力」レイアウトに切り替えるステップを追加するだけで、あとは今まで通りに動作させればOKです。

これで、読み込みに関しては一連のフローができました。実際に動かしてみながら他の画面についても操作と画面遷移に不自然がないか確かめてみます。
ここでは、一覧画面と詳細画面にある追加ボタンをトップページに戻るように変更しました。

トップページの注意点

検索専用画面など、特にデータをストックしない画面は全てのフィールドが空白状態のレコードが1つだけある状態にします。スクリプトの中に新規レコードのステップがあると、実行するたびにレコードが増えてしまいますので、実行するスクリプトの最後に、読み込んだデータを消すステップを入れてやります。
しかしそのスクリプトも、登録が完了する場合、やり直す場合、途中でキャンセルした場合と、それぞれの条件に対応していないと、気づかずにレコードが増えてしまうことがあります。増えたところで特に支障はないですが、あまり気持ちの良いものではありません。
条件が複雑になる場合は、想定しきれなかった状況というのもあり得るので、レイアウト設定でレコード数を0にするようにスクリプトトリガを設定します。

トップページのレイアウトに移動したら、自動的にスクリプトを作動させる。

スクリプトの内容はシンプルで、
１）全レコードを削除　２）新規レコードを作成　
この２ステップです。レコード数で条件分けしていますが、やらなくても結果は同じです。

今回はここまで

これで、アプリとして最低限の機能はカバーできたと思います。
次回からは数回に分けて、項目の読み込みについて検討していきます。まずはサブタイトルの処理、そして共著の場合のデータ格納について検討していきます。
これまでと同様、作成したデータのリンクを貼っておきますので、試してみてください。
この連載も10回を超えましたので、次回更新時にマガジンを値上げしようと思っていますので、気になる方は購入くださいませ。
それでは。