2019.04.04

自由レイアウトで、ユーザーさんがサクサク快適に入力できる画面を作ろう！ #シス管見習いの備忘録 vol.08

ポスト

前回までのおさらい

同期のまりちゃんから相談を受け、扶養控除申請書の入力フォームを作ることにしました！
自由レイアウトを使って、さながら申請書の上に文字を打っているかのような画面ができたのですが…
いくつか気になるところがあります。

・謎の[2019/03/28]という文字がある
・項目の位置が不ぞろい
・入力欄の文字のサイズが、枠の大きさと合っていない

というわけで、今回は上記の点を修正していきます！
まりちゃんに喜んでもらえるといいな…

今まで使っていた書類がSalesforceで再現できちゃう？！SkyVisualEditorの自由レイアウトとは

前回のブログです。お読みでない方は、先にこちらの記事をご覧ください。

謎の[2019/11/21]という文字を消しましょう

そもそもこの文字、なんでしょう…？
試しにクリックしてみたら、その日の日付が入りました。

”文書内に本日の日付を入力するとき、ワンタッチで出来るよ！”
というオプションみたいなものですかね。
普段は便利そうですが、生年月日の入力欄としては不要ですね。
オプションであれば外せるはずなので、Studioに戻って探してみると…

ありました！！
「本日日付リンク表示」というチェックボックスが。
これを外してみたところ、謎の[2019/03/28]という文字は、表示されなくなりました。

項目の位置をそろえましょう

次に気になるのが、入力項目。
縦に並んでいる項目が、不ぞろいで格好悪いですね。

そんな時は、コントロールキーで項目を複数選択して…
こうです！

これで、項目を綺麗に並べることができますね♪

ちなみに、グリッドという機能を使うこともできます。
ページプロパティの「背景画像」の下に、「グリッド」という項目があるのです。
「グリッド線表示」を押すと、罫線が表れます。
さらにその下の「グリッドに吸着」を押すと、項目の左上がグリッドにくっつくようになりますよ。

文字のサイズを変えましょう

今のままだと、枠の大きさと文字のサイズが合っていません。
これまた不格好ですね。

Studioに戻って、フォントサイズが気になる項目をクリック。
コンポーネントプロパティの中から「テキスト」→「文字のサイズ」を探してください。

残念ながら、Studio上では文字のサイズを変えた結果が確認できません。
ので、デプロイして、実際の画面を見て大きさを微調整していきましょう。
試行錯誤した結果、16ptに変えるとちょうど良いことが判明しました！

ユーザーさんに見てもらいましょう

気になる部分はすべて解消できたので、まりちゃんに見てもらいました！
案の定、自分では気づかなかった指摘をいくつかもらったので、直していきます。

「画面が全部白いから、どこを入力しているのか分からなくなりそう」
ふむふむ、ならばフォーカス色を設定するのが良さそうです。
ページプロパティに「フォーカス色」という項目があります。
「フォーカス色の有効化」にチェックをつけて、ピンクにしたいかブルーにしたいか選んでください。

「Tabキーを押したら、隣の項目に行くようにしてほしい！」
データ入力の際、マウスを使わずにTabキーで入力欄を切り替える方も多いと思います。
しかしこの画面でTabキーを駆使しようとすると
名前の入力欄⇒税務署の入力欄⇒世帯主の名前の入力欄って流れになっちゃうんですよね。

たしかに、これでは入力しづらいですね。
どうやら私が項目を配置した順番が、そのままTabキーの順序になってしまっている模様。
目についた項目から配置していったのは迂闊でした…。
まさかの、全部やり直しでしょうか。。。
それだけは避けたい…！

必死になってヘルプを探ってみたところ、解決策がありました♪
コンポーネントプロパティの「タブインデックス」に順番を入れたらよいそうです。
まずは、左上の「税務署」欄を1番目にします。

その次は、「給与の支払い者の名称」に進みたいはずなので、その項目を2番目にして…
という感じで順番を振り直したら、こんなにスムーズになりました！

「ぜんぶ入力が終わったら、どうしたらいいの？」
保存ボタンの配置を忘れていました。
みなさん、保存ボタンはどうやって配置するか覚えていますか？
左タブ「コンポーネント」に、各種ボタンがありますよ。

入力画面”は”できました！

リクエストも考慮に入れて、画面が出来上がりました！
まりちゃんも、「入力が楽になった～！」と喜んでくれています。
二人して喜んでいたら、はたまた通りがかりのノブ先輩からアドバイスが。

「入力する画面だけじゃなくて、データを見る『参照画面』も、この形に出来たらいいよね」

たしかに…！
入力も参照も、全部このレイアウトで出来たら良さそうですね。
次回のブログでは、そのあたりを書いていこうと思います。

「自分も画面を作ってみたい！」という方には、体験セミナーがおすすめです！
シナリオに沿って、SkyVisualEditorでの画面開発が体験できるそうですよ。
自社で活用する際のイメージがより具体的になると思います♪
毎月開催していますので、ご都合の良いタイミングでぜひ足を運んでみてください。