1.概要
点検やワークフローなどのような機能を考えた場合、スマートフォンを持ちながら作業をすることを想定すると、入力はできるだけシンプルにしたいと思います。
定型的な入力や、ステータスの入力ができるようにする際、プルダウンのメニューですと、
「タップ／クリック」→「選択」→「タップ／クリック」という操作になり、入力の項目が多くなると利用者にとっては相応のストレスになってしまいます。
このような場合、プルダウンメニューではなくタップ、あるいはクリックするとステータスが変わる機能を持ったボタンであればユーザーは片手で入力ができ、作業のストレスを軽減することができます。
サンプルではタップあるいはクリックすることで「○」「△」「☓」に切り替わるボタンの作成手順を説明します。
2.作成手順
タップ／クリックすると表示が変わるボタンを作成する
Unifinityでは以下の機能を併用することで実現できます
- 画面：「ボタン」コントロール
- 処理：ディクショナリー
2.1.ボタン用画像の用意
使用するボタンを配置します。
サンプルでは「リソース」に三種類のボタン用の画像を登録し、「キーワード」にそれぞれ値を設定します。サンプルでは「丸」「三角」「バツ」と設定しています。
この値は【処理】で使用します。
ボタンは必ずしも画像である必要はなく、画像ではなく文字が切り替わるようにすることも可能です。
2.2.処理を作成する
「ディクショナリー」を使用し、タップ／クリック時に表示が切り替わる処理を作成します。
2.3.ボタン用ディクショナリーの準備
【コンポーネント】から「ディクショナリー/作成」を選択します。
『キー』には「リソース」で設定した「キーワード」を、「値」には「タップまたはクリックしたら次に表示したいボタンのキーワード」を入力します。
サンプルでは「○」→「△」→「☓」の順に繰り返されるように表示したいので、画面のように設定しています。
更に表示パターンを増やしたい場合は「要素追加」をクリックし、「キー」と「値」を設定していきます。
2.4.ボタンに動きをつける
ボタンがタップまたはクリックされた時の処理を作成します。
2.5.作成した処理をボタンに割り当てる
【画面】に戻り、作成した処理をボタンに埋め込みます。
配置したボタンを選択した状態で、「オブジェクト」内の「動作設定」タブ内の「実行処理」から、作成した処理（サンプルでは「タップ／クリックすると画像が変わるロジック」になります）を設定します。
Unifinity Studioで『実行(F5)」ボタンを押すと実際の動作を確認できますので試してみてください。
3.参考
サンプルでは「○」「△」「☓」の画像を使用していますが、必ずしも画像を使用する必要はなく、任意の文字列が切り替わるという処理にすることも可能です。
実際の業務では以下のようなパターンが考えられます。
- 「承認」「却下」「保留」
- 「在庫あり」「在庫なし」「問合中」
- 「貸出中」「返却済」「取寄中」
- 「使用中」「棚卸中」「紛失」
- 「点検中」「要交換」「故障」
サンプルには「点検作業」を想定した画面が含まれます。
アプリ開発のご参考になれば幸いです。
4.サンプルアプリ
以下のリンクからダウンロードできます。