「システムはオブジェクト指向 Ruby & Flash」(#007)
福井修@Fsys
【○】本日のお題 【 実践編 】LoadVars連携での ログイン認証 ━━━━━━
「システムはオブジェクト指向 Ruby & Flash」も早いもので７回目です。
前回注1)【 実践編 】「サーバサイドで Ruby&PostgreSQL 連携」というテーマ
でRubyでのDBアクセス、ファイル書き出し、正規表現の処理、多重代入、イテレ
ータなどいろいろなテクニックの実装を披露しました。
本日は、LoadVars連携での ログイン認証というテーマでクライアントFlashとサ
ーバサイド Ruby との連携を説明します。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ リッチクライアントって何？
────────────────────────────────────
MVCモデルでViewにFlashを採用しリッチクライアントを実現するのがよさげと
いう話しをしてきました。注2)
では、普通のHTMLで書かれた Web画面と リッチクライアントといわれる画面で
何がどう違うのでしょうか。
視点や立場で、様々な解がありそうですが、私の考えでは以下の様です。
………………………………………………………………………………………………
【 リッチクライアント 】 【 リッチでないクライアント 】
………………………………………………………………………………………………
１．出力 １．出力
………………………………………………………………………………………………
・ 見栄えが良い・表現が豊か ・ 見栄え・表現がさびしい
・ 動きがある ・ 動きがない
・ 音が出る ・ 音が出ない
: :
………………………………………………………………………………………………
２．入力 ２．入力
………………………………………………………………………………………………
・ 思い通りに入力できる ・ 思い通りに入力できない
・ 余分な操作が必要ない ・ 余分な操作が必要
・ 操作への反応が親切 ・ 操作への反応が親切でない
・ 期待通りの反応がある ・ 期待通りの反応でない
・ 入力の訂正がすぐにできる ・ 入力の訂正がすぐにできない
: :
………………………………………………………………………………………………
リッチな方がもちろん良いのですが、実現するのが難しい場合があるわけです。
表現の豊かさがリッチさなのはもちろんですが、操作性のリッチさにこそ大事だ
と思います。特に、業務の定型的な入力の場合に、入力項目が画面内に沢山ある
場合には差がでます。HTMLWeb画面では、カーソルの制御などが弱いです。
そろそろ年賀状の季節ですが、例えば、住所を入力する場面を想定してみましょ
う。
郵便番号
３桁ハイフン４桁
口口口-口口口口
例) 6 5 1 2 1 0 2 兵庫県神戸市西区学園東町
郵便番号を入れたら、住所の都道府県市区町村が自動的に出て、あと番地などだ
け入力するようになっていると便利です。年賀状ソフトでは、かなり前から当た
り前ですね。
HTMLWeb画面ではどうでしょう？ユーザ情報の入力で住所を入力する場面に遭遇
して、郵便番号を入れただけで、住所が出てくるケースは、まずありません。
郵便番号を入力しても、重ねて都道府県から入力させられるケースがほとんどで
す。いちいち都道府県などを入力しなくても良いようにできた画面でも、郵便番
号入力後、一旦ボタンをクリックする必要があります。
郵便番号は、７桁と決まっている訳ですが、普通見やすいように上３桁と下４桁
の間にハイフンを表記します。このハイフンの扱いも様々です。
「数字を７桁入れるだけで、他のアクション（タブやリターン..）なしで住所(
都道府県市区町村)を出すことができる」とリッチクライアントであるという『
踏み絵』を提案しておきます。７桁数字入力済みを検知すれば良いのですがHTML
Web画面では、難しいところなのです。注3)
入力枠に 英文字が入力出来（あとでエラー）たり、全角半角の切り替えが必要
だったり、ハイフンも入力させられたり、マウスを操作してボタンを押さされた
りすると、面倒ですね。
ひとりふたりなら面倒でもまあ誤差ですが、業務で1000件入力とかになると、操
作性の善し悪しで、大きな差が出てきます。Web画面を基幹システムに採用する
には、このあたりの操作性へのこだわりも必要だと思います。
実業務システムでは、
面倒なことはしなくて良い＝省操作＝省時間＝省コスト
ですし。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ 入力のチェックを Flash と Ruby の連携でおこなう 実装例
────────────────────────────────────
ViewにFLASHを利用するとサーバとの対話(Request&Response)はLoadVarsオブジ
ェクトのsendAndLoad メソッドが使えます。そうするとサーバとの対話でいちい
ちページを遷移させないですませることが出来るので、同一画面内で応答を確認
しながら操作が出来ます。この挙動を利用するとユーザーの使い勝手が上がり、
操作時間を節約できることになります。
リクエストボタンで入力画面から、応答画面に遷移してしまう方式では、ユーザ
の入力内容を逐一保持するようにしないと、ユーザに再入力を強制することにな
り、操作性は非常に悪いという評価になってしまいます。
これは、入力項目が多い場合に、ユーザの入力ミスにきめ細かく応答するには、
相当大変になります。応答画面に遷移せず、その画面のままサーバの反応を得ら
れると、再入力の手間は避けることができます。
本日は、ログインの認証をFlashとRuby の連携 を行う実装例の紹介を行うのです
が、ちょっと前置きで、操作性に焦点を当てたので、
ログイン認証の場合
ユーザid と パスワード を入力してサーバサイドでチェックし応答
と同様な既存のデータと照合して応答する例として
郵便番号上３桁と郵便番号下４桁を入力してサーバサイドでチェックし応答
する例を示します。
・ 入力の際、枠への入力が済んだあと、次の枠への移動を、いちいち「tab」キ
ーを押したり、マウスでフォーカスを移したりしなくて済むという点。
・ 画面が遷移しないで、サーバからの情報を部分更新(元の情報を残して)表示
できる点。
などが便利さのポイントになります。
１．Flash の画面を作成
レイヤ１の１フレーム目
入力テキスト枠
ユーザid 入力用 （郵便番号上３桁）インスタンス名 uid
パスワード 入力用（郵便番号下４桁）インスタンス名 passwd
出力テキスト枠
メッセージ出力用 （エラーのメッセージや検索結果）
インスタンス名 res
ActionScript は
#include "login.as"
として外部ソースファイルに記述したものを読み込むように指定します。
２．ActionScriptを作成
login.as は次のとおり
ここから
System.useCodepage = true
//──────────────────────────────────
// 入力チェック制約定義
_root.uid.restrict = "0-9" // 半角数字
_root.uid.maxChars = 3 // ユーザid最大文字数
// パスワード入力テキストフィールドにする
_root.passwd.password = true
_root.passwd.restrict = "0-9" // 半角数字のみ
_root.passwd.maxChars = 4 // パスワード最大文字数
//──────────────────────────────────
// ユーザid 入力後パスワード入力エリアへ
_root.uid.onChanged = function(){
if( this.text.length == this.maxChars){
Selection.setFocus(_root.passwd)
}
}
//──────────────────────────────────
// パスワード入力後ボタンへ
_root.passwd.onChanged = function(){
if( this.text.length == this.maxChars){
Selection.setFocus(_root.button1)
selPostal()
}
}
// ボタンのクリックイベントハンドラ指定
_root.button1.setClickHandler("selPostal")
//──────────────────────────────────
// 入力された郵便番号をサーバに渡し、検索結果の住所を受け取る
function selPostal() {
_root.res.text = "リクエストを受付けました。ＤＢ検索待ちです。"
// 送信用LoadVarsオブジェクト
sendCheck = new LoadVars()
// 受信用LoadVarsオブジェクト
resCheck = new LoadVars()
// 送信引数セット
var zipno1 = _root.uid.text
var zipno2 = _root.passwd.text
zipno = zipno1 + zipno2
sendCheck.zipno = zipno
// 応答読み込み完イベントハンドラメソッドを定義
resCheck.onLoad = function(success) {
_root.res.text = resCheck.addr
}
// 送信用オブジェクトに対して、sendAndLoadメソッドを実行
// 応答を受け取る受信オブジェクト：resCheck
sendCheck.sendAndLoad("selPostal.rb",resCheck,"POST")
}
ここまで
３．サーバサイドプログラム
ActionScript よりWebサーバ経由で、呼ばれるスクリプトは、前回作成した
selPostal.rb を使います。
但し前回は、検索結果をログファイルに書き込んだだけであったので
次の 標準出力への書き出しを追加します。また出力Shift_JIS変換もやってい
ます。
:
require 'nkf'
:
# データの出力
print "Content-type: text/plain\n\n"
print "addr=#{NKF.nkf('-sZ',out)}"
なお 実際に操作して頂けるように
http://fsys.net/ruby/post.html
に環境を作成しておきます。
また.flaファイルや改訂版 selPostal.rb も入手できるようにしておきます。
どうぞ ご参考に。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
※ 注釈、資料、参考情報
────────────────────────────────────
注1) http://www.melma.com/mag/02/m00020302/a00000641.html
注2) http://www.melma.com/mag/02/m00020302/a00000631.html
注3) http://ns3.fsys.net/nw/post.rb/
に郵便番号検索の画面例があります。この場合「検索」ボタンを押す操作
が必要です。HTMLWeb画面は普通この程度なので、リッチクライアントとは
言えません。
【プロフィール】
福井 修 ( FUKUI Osamu )o-fukuiアットpo.iijnet.or.jp
福井システムリサーチ http://fsys.net/ 主幹。システム構築歴２７年。
システム構築エキスパート
日本リヌクス協会、神戸商工会議所、情報処理学会 会員
関西ソーホ・デジタルコンテンツ事業協同組合員
デジタルハリウッド三宮校 Java講師
