かつおの「もっと教えてくれや!」
#6_RakStudioを使おう!「ロジックでユーザビリティをあげろ!」

おっす! かつおです。

毎日寒いですね。
インフルエンザが猛威をふるっていますが、そこは気合と根性でのりきるんや!
ってなわけで、今回も始まります。

かつお
かつお

よっしゃ。今日も一発かましたろ!!!!
ふんっふんっ

中島
中島

(うわぁまた一人で暴れてる……)

かつお
かつお

おっ 中島くんやないか

中島
中島

どうしたんですか、一人でふんふん言って

かつお
かつお

どうしたもこうしたもないやろ。インフルエンザや風邪に負けんように気合と根性を自分自身に注入するために鍛えてるんや!

中島
中島

うーん。病は気からということもあるけど

かつお
かつお

せやろせやろ。声をかけてくれたついでに、すまんがちょっとお願いがあるんや

中島
中島

えぇ……またですか

かつお
かつお

もうすぐ展示会やろ? けど展示会の資材管理の作業が残ってんねん
管理システム作って登録しとったが、まだ残っとるんや。手伝ってくれんやろか

中島
中島

そんなこと言われても、他に業務ありますし、無理ですよぉ

かつお
かつお

頼むわ。俺は今年の展示会は俺が責任者やからしっかりやらなあかんねん

中島
中島

仕方ないですね。いいですよ。まかしてください!

かつお
かつお

じゃあ、説明すっぞ。これが俺の作った展示会用資材管理システムや。どやすごいやろ
プロトタイプからレイアウト整えて ちょちょいのちょい や。ひたすらここに入力して登録してくれや

かつおが作った登録画面
中島
中島

これ合計金額はどうやって計算するんですか

かつお
かつお

中島くん。君は電卓も知らんのかね。文明の利器を活用するんやで
気合と根性があれば、何でもできる!!! わはは

中島
中島

えーと、マウス1個千円のを10個で1万円。で、搬入日を入力して登録
あっ、間違えて登録してしまった

かつお
かつお

おー中島くん根性が足りんのちゃうか。根性出してこうやるんや。 おんどりゃー

中島
中島

すごい。すごいスピードでミスなく入力してる……

中島
中島

でも、こういう処理は『 ロジック 』を設定して処理を組み込むべきですよ

かつお
かつお

なんやロジックって。なんか聞いたことあるぞ

中島
中島

(この人、講習を聞いてなかったのかなあ…)
パターンの標準動作だけでは解決できない業務独自の処理は『ロジック』を組み込むことで対応します。 ロジックは、どの タイミング に、どの 条件 の時、どのような 処理(アクション) を実行するかを定義します

処理の流れ
中島
中島

まずはチェック処理を組み込んでみましょう。今回の展示会の搬入可能日って何日から何日なんでしょうか

かつお
かつお

搬入日は早くても開催日2日前で、遅くとも最終日までやな

中島
中島

では、登録ボタン押下時に、搬入日の入力値が開催日3日以前、または、最終日の翌日以降であればエラーとして、メッセージを出力する処理を組み込みましょう

中島
中島

『エラーとしてメッセージを出力する処理』については、丁度InputErrorアクションが用意されています。実際に設定してみます

InputErrorアクションの設定
中島
中島

これであり得ない搬入日を入力してしまうミスを防げます

かつお
かつお

おお、これで中島くんも安心やな

中島
中島

次は、合計値の入力を自動化しちゃいましょう
これは、該当項目の入力値が変化した際にJavaScriptにて自動で指定した計算をしてくれる CalcAutoアクション が用意されているので、それを利用します

中島
中島

今回はコンポーネントの画面表示時に常に自動計算する処理を組み込みたいので以下のように設定します

CalcAutoアクションの設定
かつお
かつお

さっきは気づかんかったけど、この実行条件欄上の青枠の『サーバ/ブラウザ』ってなんやねん

中島
中島

これは、処理をサーバで実行するかブラウザで実行するかの選択区分です
サーバ実行時はサーバ側のJavaで処理がされます。ブラウザ実行時はブラウザ側でJavaScriptで処理がされます

かつお
かつお

今回はJavaScriptで自動計算って言っとったから、ブラウザ実行でええんか

中島
中島

はい。そうですね
ちなみに、実行条件ですが、ブラウザ実行時はHTML上のInputタグ要素を参照して処理するため、入力項目またはHidden項目のみ参照できます

かつお
かつお

中島君、もの知りやなあ。これからもどんなロジックがあるか教えてくれな!!

中島
中島

それは勘弁してくださいよぉ。用意されているアクションとその動作は、楽々Framwork3 Javadocのパッケージ jp.co.sei.is.lib30.man2.action に記載されているのでまずはそちらを参照してください
アクション選択画面の『?』マークをクリックすることでもJavadocのそのアクションの説明ページに飛ぶことができますよ

Javadocのそのアクションの説明ページに飛ぶリンクアイコン
中島
中島

よく使われているアクションは 楽々Framework3 逆引き辞書 にも記載があるので、自分で調べてみてくださいね。

中島
中島

ちなみに今回使った、InputErrorアクション、CalcAutoアクション共に逆引き辞書で紹介されています。便利ですね
(逆引-00166)2項目の入力値を比較したエラーチェックを独自に組み込む方法
(逆引-00004)入力項目のonChangeイベント時に独自の計算式を実行する方法

かつお
かつお

(なんや一人でえらい喋り出したぞ。まぁええわ流しとこ)
よっしゃ、早速動作を確認しようや

中島
中島

金額と個数を入れてフォーカスを外すと……ほら、自動で合計金額が入りました

かつお
かつお

ほんまにこの金額合っとるんか。ちょい待っとれ(電卓ぱちぱち)
合っとるやないかー

中島
中島

そりゃ合ってるでしょ

かつお
かつお

あぁ!?  まぁええわ便利な世の中になったもんやの。さっさと入力済ますで。根性や

かつお
かつお

よし、終わったな。ありがとうやで中島くん。そいじゃあ、鍛えるついでに展示会会場まで下見に走っていってくるわ

中島
中島

えーーここから会場まで何キロあると思ってるんですか??? って行っちゃった…。外は平成最大の寒波がやってきてるというのに…。大丈夫かな

このあと、寒波に見舞われたかつお。
見事に風邪をひき、3日3晩しっかりねこんだとのこと。

皆さん。くれぐれも無茶には気をつけてくださいね。

各種お役立ち資料もご用意しています

簡単な製品説明や見積りのみご希望の場合も
気軽にお問い合わせください

お問い合わせ

専門スタッフが製品や導入に関する不安やお悩みにお答えします。

担当者に製品の説明を聞く

資料請求

楽々Framework3の詳しい製品情報や、活用事例をまとめた資料を無料で請求いただけます。

製品資料を請求する

体験セミナー
eラーニング

Webでの講義と体験版ソフトで楽々Framework3を体験いただけます。

体験セミナーeラーニングに
申し込む