ツールチップで分かりやすい入力画面を作る

UI部品　基本編

アプリのデザインは、開発者にとって大きな悩みの一つです。
どれほど良い機能を持つアプリでも、ユーザーにとって使いにくいものであればなかなか普及はしていきません。
DXを目指してアプリを作ってはみたものの、使い方を毎回ユーザーに教えるのが面倒だったり、使いにくいからと社内で普及しなかったり。かといって、一度作ったアプリの画面を作り直すのは時間もかかるし面倒くさい。
そんなお悩みの対処法として、今回はマウスオーバーで注釈や補足情報を表示できるツールチップ機能をご紹介します。
Forguncyでは画像型セルにツールチップを設定できます。

入力欄の隣など空いているセルを画像型に変更し、ツールチップを設定することで作成済みのアプリの画面デザインを大きく変えることなくアプリの使い勝手を向上することができます。
ここでは、定期代の申請アプリを例に入力欄やリストビューの項目にツールチップを表示する方法を解説します。
なお、画像型セルに使用する画像はForguncyに組み込まれているものを使用するので、画像を別途用意する必要はありません。

1.プロジェクトを確認する

今回の演習で使用するプロジェクトを確認します。

手順1-1.テーブルを確認

ナビゲーションウィンドウのテーブル欄には「定期代申請テーブル」と「社員マスタ」が存在します。
今回のアプリでは定期代申請テーブルにデータを登録します。
定期代申請テーブルには社員名フィールドが存在しないので、画面に表示される社員名は社員マスタから取得するよう設定しています。

手順1-2.ページを確認

ナビゲーションウィンドウから「定期代申請」ページを開きます。
ページには、申請番号、申請日、社員番号、氏名、申請理由の欄と利用する交通機関や区間、定期代を記入するためのリストビューが配置されています。
このアプリでは交通機関ごとに定期代を入力してほしいのですが、JRだけで通勤する社員もいれば私鉄とJRなど、複数の交通機関を利用する社員も存在します。
そういった状況を想定し、今回は入力行が必要に応じて増減できるリストビューを使って交通機関や定期代等の入力欄を実装しています。
申請番号はAD3セルを参照して自動採番するよう設定されています。
また、申請日も自動で今日の日付が表示されるようになっています。
今回はリストビューの項目にもツールチップを表示したいので、リボンの[リストビュー スタイルのオプション]から列ヘッダーのチェックをオフに設定し、通常のセルをヘッダーのような見た目に設定しています。

列AD～AGは申請データをテーブルに登録する際に必要ですが、ユーザーの操作は必要ないため非表示となっています。
申請ボタンには各項目のエラーチェックやテーブルにデータを追加する処理が実装されていますが、詳細はプロジェクトファイルからご確認ください。

2.入力用のセルにツールチップを作成する

ページ上の氏名欄の右側にツールチップを作成します。
今回のアプリでは誤入力防止のため、社員番号を選択すると氏名が自動でセットされるようになっています。
しかし、一目見ただけではそれが伝わらないので、ツールチップを使って補足情報を表示します。

手順2-1.画像型セルの配置

V7セルを画像型セルに変更します。
V7セルを選択した状態で、右上の[ホーム]リボンの[セル型]ドロップダウンから画像を選択します。

右ペインの[セル型]タブから画像の選択…ハイパーリンクをクリックします。
画像の選択ウィンドウが開くので、組み込み画像タブに変更して？マークの画像を選びOKをクリックします。

V7セルに選んだ？マークの画像が表示されました。

手順2-2.ツールチップの設定

V7セルを選択した状態で右ペインの[セル型]タブを見ると、ツールチップ欄が存在します。
今回はここに下記の文章を直接入力します。

• 社員番号を選択すると自動で氏名がセットされます

これで氏名欄のツールチップは作成完了です。

3.リストビューのヘッダーにツールチップを作成する

入力用のリストビューのヘッダーにもいくつか注釈を入れたいので、ツールチップを設定します。
リストビューを配置した際に自動生成される列ヘッダーには画像型セルが使えないため、今回は手順1-2で説明したように列ヘッダーをオフにして通常のセルの見た目をヘッダーのように設定してあります。

手順3-1.列ヘッダーの一部を画像型セルにする

列ヘッダーとして使用しているセルのうち、交通機関列の右端にあたるF11セルと一ヶ月定期代列の右端にあたるW11セルを画像型に変更します。
まずはF11セルを選択した状態で、右上の[ホーム]リボンの[セル型]ドロップダウンから画像を選択します。

右ペインの[セル型]タブから画像の選択…ハイパーリンクをクリックします。
画像の選択ウィンドウが開くので、組み込み画像タブに変更します。
今回は画像型セルの背景色が濃い青なので、画像が見やすくなるようアイコンの色コンボボックスで白を選びます。
組み込み画像の色が変わったことを確認したら、氏名欄で使用した画像の左隣にある、白色の面積が広い？マークの画像を選びOKをクリックします。

F11セルに選んだ？マークの画像が表示されました。
W11セルにも同様に画像を設定します。
ここまで完了すると、ページは下図のような状態になります。

手順3-2.列ヘッダーのツールチップの設定

F11セル、W11セルにも手順2-2と同様にツールチップを設定します。
まずF11セルを選択した状態で右ペインの[セル型]タブを見ます。
このツールチップ欄に、下記の文章を直接入力します。

• 複数の交通機関を利用している場合は行を分けて記入してください。

これで交通機関列のツールチップは作成完了です。
同様に、W11セルのツールチップ欄にも下記の文章を直接入力します。

• 半角数字で1ヶ月分の定期代を記入してください。

これですべてのツールチップの設定が完了しました。

4.デバッグを実行

これでページが完成したので、プロジェクトをデバッグ実行します。

手順4-1.デバッグを実行する

リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。

作成したページがブラウザで表示されます。
配置した？マークにマウスオーバーして、実際に説明文が表示されることを確認してください。

5.ForguncyのUI部品についてもっと知る

Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。

こちらもぜひご活用ください。

＞開発スタートガイド – Forguncyで機能的なUIを作成する

＞Forguncyヘルプ – セル型