かつおの「もっと教えてくれや!」
#6_RakStudioを使おう!「ロジックでユーザビリティをあげろ!」
おっす! かつおです。
毎日寒いですね。
インフルエンザが猛威をふるっていますが、そこは気合と根性でのりきるんや!
ってなわけで、今回も始まります。
![かつお](/framework/column/images23/tmb/katsuo.webp)
よっしゃ。今日も一発かましたろ!!!!
ふんっふんっ
![中島](/framework/column/images23/tmb/nakajima.webp)
(うわぁまた一人で暴れてる……)
![かつお](/framework/column/images23/tmb/katsuo.webp)
おっ 中島くんやないか
![中島](/framework/column/images23/tmb/nakajima.webp)
どうしたんですか、一人でふんふん言って
![かつお](/framework/column/images23/tmb/katsuo.webp)
どうしたもこうしたもないやろ。インフルエンザや風邪に負けんように気合と根性を自分自身に注入するために鍛えてるんや!
![中島](/framework/column/images23/tmb/nakajima.webp)
うーん。病は気からということもあるけど
![かつお](/framework/column/images23/tmb/katsuo.webp)
せやろせやろ。声をかけてくれたついでに、すまんがちょっとお願いがあるんや
![中島](/framework/column/images23/tmb/nakajima.webp)
えぇ……またですか
![かつお](/framework/column/images23/tmb/katsuo.webp)
もうすぐ展示会やろ? けど展示会の資材管理の作業が残ってんねん
管理システム作って登録しとったが、まだ残っとるんや。手伝ってくれんやろか
![中島](/framework/column/images23/tmb/nakajima.webp)
そんなこと言われても、他に業務ありますし、無理ですよぉ
![かつお](/framework/column/images23/tmb/katsuo.webp)
頼むわ。俺は今年の展示会は俺が責任者やからしっかりやらなあかんねん
![中島](/framework/column/images23/tmb/nakajima.webp)
仕方ないですね。いいですよ。まかしてください!
![かつお](/framework/column/images23/tmb/katsuo.webp)
じゃあ、説明すっぞ。これが俺の作った展示会用資材管理システムや。どやすごいやろ
プロトタイプからレイアウト整えて
ちょちょいのちょい
や。ひたすらここに入力して登録してくれや
![かつおが作った登録画面](/framework/column/images23/RakStudio-05-usability/ka6-1.webp)
![中島](/framework/column/images23/tmb/nakajima.webp)
これ合計金額はどうやって計算するんですか
![かつお](/framework/column/images23/tmb/katsuo.webp)
中島くん。君は電卓も知らんのかね。文明の利器を活用するんやで
気合と根性があれば、何でもできる!!! わはは
![中島](/framework/column/images23/tmb/nakajima.webp)
えーと、マウス1個千円のを10個で1万円。で、搬入日を入力して登録
あっ、間違えて登録してしまった
![かつお](/framework/column/images23/tmb/katsuo.webp)
おー中島くん根性が足りんのちゃうか。根性出してこうやるんや。 おんどりゃー
![中島](/framework/column/images23/tmb/nakajima.webp)
すごい。すごいスピードでミスなく入力してる……
![中島](/framework/column/images23/tmb/nakajima.webp)
でも、こういう処理は『 ロジック 』を設定して処理を組み込むべきですよ
![かつお](/framework/column/images23/tmb/katsuo.webp)
なんやロジックって。なんか聞いたことあるぞ
![中島](/framework/column/images23/tmb/nakajima.webp)
(この人、講習を聞いてなかったのかなあ…)
パターンの標準動作だけでは解決できない業務独自の処理は『ロジック』を組み込むことで対応します。
ロジックは、どの
タイミング
に、どの
条件
の時、どのような
処理(アクション)
を実行するかを定義します
![処理の流れ](/framework/column/images23/RakStudio-05-usability/ka6-2.webp)
![中島](/framework/column/images23/tmb/nakajima.webp)
まずはチェック処理を組み込んでみましょう。今回の展示会の搬入可能日って何日から何日なんでしょうか
![かつお](/framework/column/images23/tmb/katsuo.webp)
搬入日は早くても開催日2日前で、遅くとも最終日までやな
![中島](/framework/column/images23/tmb/nakajima.webp)
では、登録ボタン押下時に、搬入日の入力値が開催日3日以前、または、最終日の翌日以降であればエラーとして、メッセージを出力する処理を組み込みましょう
![中島](/framework/column/images23/tmb/nakajima.webp)
『エラーとしてメッセージを出力する処理』については、丁度InputErrorアクションが用意されています。実際に設定してみます
![InputErrorアクションの設定](/framework/column/images23/RakStudio-05-usability/ka6-3.webp)
![中島](/framework/column/images23/tmb/nakajima.webp)
これであり得ない搬入日を入力してしまうミスを防げます
![かつお](/framework/column/images23/tmb/katsuo.webp)
おお、これで中島くんも安心やな
![中島](/framework/column/images23/tmb/nakajima.webp)
次は、合計値の入力を自動化しちゃいましょう
これは、該当項目の入力値が変化した際にJavaScriptにて自動で指定した計算をしてくれる
CalcAutoアクション
が用意されているので、それを利用します
![中島](/framework/column/images23/tmb/nakajima.webp)
今回はコンポーネントの画面表示時に常に自動計算する処理を組み込みたいので以下のように設定します
![CalcAutoアクションの設定](/framework/column/images23/RakStudio-05-usability/ka6-4.webp)
![かつお](/framework/column/images23/tmb/katsuo.webp)
さっきは気づかんかったけど、この実行条件欄上の青枠の『サーバ/ブラウザ』ってなんやねん
![中島](/framework/column/images23/tmb/nakajima.webp)
これは、処理をサーバで実行するかブラウザで実行するかの選択区分です
サーバ実行時はサーバ側のJavaで処理がされます。ブラウザ実行時はブラウザ側でJavaScriptで処理がされます
![かつお](/framework/column/images23/tmb/katsuo.webp)
今回はJavaScriptで自動計算って言っとったから、ブラウザ実行でええんか
![中島](/framework/column/images23/tmb/nakajima.webp)
はい。そうですね
ちなみに、実行条件ですが、ブラウザ実行時はHTML上のInputタグ要素を参照して処理するため、入力項目またはHidden項目のみ参照できます
![かつお](/framework/column/images23/tmb/katsuo.webp)
中島君、もの知りやなあ。これからもどんなロジックがあるか教えてくれな!!
![中島](/framework/column/images23/tmb/nakajima.webp)
それは勘弁してくださいよぉ。用意されているアクションとその動作は、楽々Framwork3
Javadocのパッケージ
jp.co.sei.is.lib30.man2.action
に記載されているのでまずはそちらを参照してください
アクション選択画面の『?』マークをクリックすることでもJavadocのそのアクションの説明ページに飛ぶことができますよ
![Javadocのそのアクションの説明ページに飛ぶリンクアイコン](/framework/column/images23/RakStudio-05-usability/ka6-5.webp)
![中島](/framework/column/images23/tmb/nakajima.webp)
よく使われているアクションは 楽々Framework3 逆引き辞書 にも記載があるので、自分で調べてみてくださいね。
![中島](/framework/column/images23/tmb/nakajima.webp)
ちなみに今回使った、InputErrorアクション、CalcAutoアクション共に逆引き辞書で紹介されています。便利ですね
(逆引-00166)2項目の入力値を比較したエラーチェックを独自に組み込む方法
(逆引-00004)入力項目のonChangeイベント時に独自の計算式を実行する方法
![かつお](/framework/column/images23/tmb/katsuo.webp)
(なんや一人でえらい喋り出したぞ。まぁええわ流しとこ)
よっしゃ、早速動作を確認しようや
![中島](/framework/column/images23/tmb/nakajima.webp)
金額と個数を入れてフォーカスを外すと……ほら、自動で合計金額が入りました
![かつお](/framework/column/images23/tmb/katsuo.webp)
ほんまにこの金額合っとるんか。ちょい待っとれ(電卓ぱちぱち)
合っとるやないかー
![中島](/framework/column/images23/tmb/nakajima.webp)
そりゃ合ってるでしょ
![かつお](/framework/column/images23/tmb/katsuo.webp)
あぁ!? まぁええわ便利な世の中になったもんやの。さっさと入力済ますで。根性や
![かつお](/framework/column/images23/tmb/katsuo.webp)
よし、終わったな。ありがとうやで中島くん。そいじゃあ、鍛えるついでに展示会会場まで下見に走っていってくるわ
![中島](/framework/column/images23/tmb/nakajima.webp)
えーーここから会場まで何キロあると思ってるんですか??? って行っちゃった…。外は平成最大の寒波がやってきてるというのに…。大丈夫かな
このあと、寒波に見舞われたかつお。
見事に風邪をひき、3日3晩しっかりねこんだとのこと。
皆さん。くれぐれも無茶には気をつけてくださいね。