Curlで構築する電子県庁システム（DBメンテナンスツール編）
アクセス制御と画面内検索をGUIで実現する

第3回

2009/02/25 14:00

　DBメンテナンスツールをリリースした後に寄せられた要望として、「データベース・テーブルへのアクセス制御」「画面内検索機能」の2点がありました。これらの解決方法を紹介します。

はじめに

　およそ6000名の職員を抱える長崎県では、高い操作性とサーバ負荷の軽減を実現することのできるCurl言語を使って電子県庁システムの構築を行っています。現在、約30システムが稼動中です。

　ながさきITモデルは県職員が主体となってシステムの開発・運用を行う仕組みのため、職員がデータベース（MySQL）を操作することが当たり前のように行われています。ですが、県職員はデータベースの専門家ではないため、複雑なSQLを書けと言ってもそうそうできるものではありません。そこで、簡単に操作できる便利ツールが必要になります。このような理由から開発されたのがこのマスタメンテナンスツールです。

　今回は、ユーザーである県職員の方からの要望で追加した機能について紹介していきます。

これまでの記事

Curlで構築する長崎電子県庁システム（DBメンテナンスツール編）連載一覧

ユーザーからの要望

　リリース後にユーザーから追加要望があったのは、「データベース・テーブルへのアクセス制御」と「画面内検索機能」の2点でした。

1．データベース・テーブルへのアクセス制御

　1つ目は「自分にとって必要なデータベース・テーブルだけを表示したいので、ユーザーごとにアクセス権を設定できるようにしたい」という要望です。当初は、どのユーザーに対しても、全データベース・全テーブルを表示していましたので、表示される数が多く、ごちゃごちゃした感じに見えていました。加えて、関係のないテーブルを誤って操作してしまうなどのミスが起こりやすい状態になっていました。

作成したアクセス権設定画面

　そこで、上図のようなアクセス権設定画面を追加しました。画面左側でアクセス権を設定する対象を選択して、画面右側のデータベース・テーブル一覧からドラッグ＆ドロップでアクセスできるものを設定します。画面中央に表示されているツリーがアクセスできるデータベース・テーブルとなります。ツリー表示とドラッグ＆ドロップを使うことで、誰でも簡単に操作できるようにしました。

Curlでのドラッグ＆ドロップ

　Curlでは、容易にドラッグ＆ドロップを実装できます。例えば以下のような機能を作るとします。

ドラッグ＆ドロップの例

　円を右側の四角にドラッグ＆ドロップするとメッセージが表示されます。右から2番目の四角はドラッグはできますが、ドロップできないように制御します。このプログラムは次のようになります。

ドラッグ＆ドロップのロジック

{HBox spacing = 2cm, valign = "center",

  ||ドラッグ対象 「dragee」をセットするとドラッグ対象になります。
  {EllipseGraphic width = 1cm, height = 1cm,user-data="黄色",fill-color="yellow", dragee = {ImageDragee}},
  {EllipseGraphic width = 1cm, height = 1cm,user-data="赤", fill-color="red",dragee = {ImageDragee}},
  {RectangleGraphic width = 1cm,height = 1cm,fill-color = {FillPattern.get-olive}, dragee = {ImageDragee}},
    
  ||ドロップ対象
  {Frame "ここにドロップ",
    width = 3cm, height = 2cm,border-style="flat",border-width=1pt,background="#ffffff",
    {on e:DragOver do 
      {e.will-accept-drop?
        {proc {type:Type, x:Distance, y:Distance,
               effect:#DragEffect}:DragEffect
          ||ドラッグオーバーされたオブジェクトのタイプを参照できます。
          ||以下のように特定のタイプのみドロップを受け付けるようにすることができます。
          {if type == EllipseGraphic then 
            {return drag-effect-copy}
           else
            {return drag-effect-none}||円以外はドロップを受け付けない
          }
        }
      } 
    }, 

    {on e:Drop do
      {e.accept-drop

        {proc {a:any, x:Distance, y:Distance,
               effect:#DragEffect}:DropResult
          {return 
            {DropResultCopy
              action = {proc {}:void 
                ||ドロップされたオブジェクトを参照できます。
                ||以下の例では、ドロップされたオブジェクトの「user-data」を参照しています。
                {popup-message "ドロップされたのは" & a.user-data & "の円です!",modal? = true}
              }
            } 
          } 
        } 
      } 
    } 
  } 
}

　このように、プロパティの設定とドロップイベントを追加をするだけで、ドラッグ＆ドロップが実現できます。ドラッグ＆ドロップをうまく使えば、より操作しやすいアプリケーションを実装することが可能です。

　実際のアクセス権設定画面では、下図のようにドラッグ＆ドロップを制御しています。設定したアクセス権はゴミ箱にだけドロップ可に、DB・テーブル一覧のものは中央にだけドロップ可になっています。

アクセス権設定画面でのドラッグ＆ドロップの制御

ゴミ箱部分のロジック

  ||アクセス権ゴミ箱にドラッグオーバーイベントを追加
  {self._auth-trash-box.add-event-handler
    {on e:DragOver at s:MyPartsTrashBox do {self.auth-trash-over e,s}}
  }
  
  ・・・
  
  ||method
  ||名称:[auth-trash-over 内容:[アクセス側ゴミ箱over]
  {method protected {auth-trash-over t:DragOver,p_box:MyPartsTrashBox}: void

    let v_drag-effect:String = "none"

    ||最初の例ではドラッグオーバーされたオブジェクトのタイプを参照していましたが、
    ||この場合は、ドラッグオーバーされたオブジェクトを参照して判断しています。
    {t.dss.for-each ||DragOverの「dss」からドラッグされたオブジェクトを取り出します。
      {proc {ds: DataTransferSource}: void 
        let v_src: any = {ds.get-data}
        {switch v_src using isa
          case MyNodeTextFlowBox do ||DB、テーブルツリーノードの場合
            let v_item: MyNodeTextFlowBox = v_src asa MyNodeTextFlowBox
            ||さらにそのツリーノードの親が「MyPartsHostListDropBox(中央のドロップエリア)」の
            ||場合にだけドロップを受け付ける
            {if v_item.parent-box isa MyPartsHostListDropBox then
              set v_drag-effect = "move"
            }
        }
      }
    }
    
    || v_drag-effecが「move」のときは、ドロップ可の表示になり、「none」の場合はドロップ不可の表示になります。
    {{get-gui-manager}.report-drag-drop-effect
      {DragEffect v_drag-effect}
    }

  }

2．画面内検索

　2つ目は、「カラムが100以上もあるようなテーブルだと、目的のカラムがどこにあるのか探すだけでも大変なんです」という相談です。

　これを解決するために、検索ダイアログを追加して、すぐにたどりつけるようにしました。

データ入力画面（カラムが多いと、目的のカラムをなかなか見つけることができない）。

追加した画面内検索ダイアログ

　入力画面に表示しているカラム名をリストに表示しています。英名、和名に文字を入力すると、その文字に該当するカラムのみリストに表示されます。

絞込み後画面内検索ダイアログ

　リストからカラムを選択して、「ジャンプする」をクリックすると対象カラムに移動します。

　移動する際に、ScrollBoxの「scroll-to-object」メソッドを使用しています。「scroll-to-object」はScrollBoxをスクロールして、指定したオブジェクトを表示してくれます。例えば下図のサンプルでは、ボタンをクリックするとデータ10が表示される位置までScrollBoxがスクロールします。

scroll-to-objectの例

　このサンプルのソースは以下のとおりになります。

scroll-to-objectのロジック

{let v_text10:TextFlowBox = {TextFlowBox "データ10"}}
{let v_sc:ScrollBox =
  {ScrollBox
    width=3cm,height=3cm,border-width=1pt,
    {VBox
      {TextFlowBox "データ01"},
      {TextFlowBox "データ02"},
      {TextFlowBox "データ03"},
      {TextFlowBox "データ04"},
      {TextFlowBox "データ05"},
      {TextFlowBox "データ06"},
      {TextFlowBox "データ07"},
      {TextFlowBox "データ08"},
      {TextFlowBox "データ09"},
      v_text10,
      {TextFlowBox "データ11"},
      {TextFlowBox "データ12"},
      {TextFlowBox "データ13"},
      {TextFlowBox "データ14"},
      {TextFlowBox "データ15"},
      {TextFlowBox "データ16"},
      {TextFlowBox "データ17"},
      {TextFlowBox "データ18"},
      {TextFlowBox "データ19"},
      {TextFlowBox "データ20"}
    }  
  }
}
{value v_sc}
{CommandButton
  label = "データ10へ移動",
  {on Action do
    {v_sc.scroll-to-object v_text10}
  }
}

　上記のように、メソッドを呼ぶだけで簡単にScrollBox内のオブジェクトを表示できます。入力チェック時に、エラーのある位置までにスクロールするなどの用途にも使用できて非常に便利です。