Curlで構築する長崎電子県庁システム（ポータル・スケジューラー編）（AD）

Curlで構築する長崎県電子県庁システム（ポータル・スケジューラー）
UIの向上と帳票

第2回

株式会社ドゥアイネット　前田慎治[著]

2008/12/08 14:00

　Curlは、ドラッグ＆ドロップといった操作性を向上させる機能を簡単に実装できます。また、アプレットに特権を与えることによって、ローカルにあるファイルの読み書きすることもできます。Win32APIを直接呼ぶことも可能です。

はじめに

　ポータル・スケジューラーでは、このような特徴を使って操作性が良くなるようにしています。今回は、開発するにあたり工夫した点を紹介します。

ドラッグ＆ドロップ

　ドラッグ＆ドロップの実装は簡単に行えます。イベントは、

DragEnter（ターゲットに入ったときに発生）
DragLeave（ターゲットの外に出たとき発生）
DragOver（ターゲットにドラッグされたときに発生）
Drop（ターゲットにドロップされたときに発生）

　があります。

ドラッグ＆ドロップのサンプル

{HBox spacing = 100pt, valign = "center",
  {EllipseGraphic width = 1cm, height = 1cm, dragee = {ImageDragee}},
  {Frame width = 40pt, height = 40pt, background = "red",
    {on e:DragOver do 
      {e.will-accept-drop?
        {proc {type:Type, x:Distance, y:Distance, effect:#DragEffect}:DragEffect
          {return drag-effect-copy}
        }
      }
    },
    {on e:Drop do
      {e.accept-drop
        {proc {a:any, x:Distance, y:Distance, effect:#DragEffect}:DropResult
          {return
            {DropResultCopy
              action = {proc {}:void
                         {popup-message "ドロップされた"}
                       }
            }
          }
        }
      }
    }
  }
}

　このドラッグ＆ドロップ機能を活用して、以下のような機能を実装しています。

予定のドラッグ＆ドロップ

　予定をドラッグ＆ドロップすることでコピー・移動が簡単に行えるようにしました。

予定をドラッグ＆ドロップ

エクスプローラからのドロップ

　ランチャには、アプリケーション・ファイル・フォルダのショートカットを登録できます。登録する際には、デスクトップ・エクスプローラからのドロップからも行えるようにしました。

デスクトップ・エクスプローラからの登録

ファイルをダウンロードして開く

　ファイル集や予定には、ファイルを添付できます。添付したファイルは、サーバにそのまま保存しています。画面上ではアイコンで表示され、ダブルクリックするとサーバからローカルにダウンロードし、関連付いたアプリケーションで実行されます。例えば、*.xlsの場合はExcelが起動することになります。

　ファイルを関連付けされているアプリケーションで開くのは、Win32APIのShellExecuteを使って実現しました。

添付されたファイルをアイコンで表示

ShellExecuteでファイルを開く

{define-dll-class public Win32API_ShellExecute
  {defaults
    calling-convention = stdcall,
    string-rep         = CStringUTF16
  }

  let public constant HIDE: int            = 0
  let public constant SHOWNORMAL: int      = 1
  let public constant NORMAL: int          = 1
  let public constant SHOWMINIMIZED: int   = 2
  let public constant SHOWMAXIMIZED: int   = 3
  let public constant MAXIMIZE: int        = 3
  let public constant SHOWNOACTIVATE: int  = 4
  let public constant SHOW: int            = 5
  let public constant MINIMIZE: int        = 6
  let public constant SHOWMINNOACTIVE: int = 7
  let public constant SHOWNA: int          = 8
  let public constant RESTORE: int         = 9
  let public constant SHOWDEFAULT: int     = 10
  let public constant MAX: int             = 10

  {constructor public {default}
    {construct-super
      {SharedLibrary "shell32"}
    }
  }

  {dll-method public {executeA ("ShellExecuteA")
                       hwnd: CPointer,
                       op: StringInterface (rep = CString),
                       file: StringInterface (rep = CString),
                       params: StringInterface (rep = CString),
                       dir: StringInterface (rep = CString),
                       cmd: int
                     }: int
  }

  {dll-method public {execute ("ShellExecuteW")
                       hwnd: CPointer,
                       op: StringInterface,
                       file: StringInterface,
                       params: StringInterface,
                       dir: StringInterface,
                       cmd: int
                     }: int
    {if-missing
      {return
        {self.executeA hwnd, op, file, params, dir, cmd}
      }
    }
  }

}

F5キーの無効化

　一般的なブラウザでは、F5キーを押すとブラウザの更新が行われページが初期化されてしまいます。しかし、以下のようにすることで、Curlではブラウザにイベントが通知される前にイベントを無効化できます。

F5キーの無効化

{{get-gui-manager}.add-event-handler
  {on t: KeyPress do
    {if t.value == KeyPressValue.f5 then
      {t.consume}
    }
  }
}

帳票出力

　ポータル・スケジューラーは、帳票出力として以下の2つを実装しています。

予定をエクセル形式で出力

　PHPでpearのSpreadsheet_WriteExcelを使用して、予定をエクセル形式で出力します。ただし、出力されるファイルフォーマットがExcel 95形式なので、1セル255文字までの制約があります。なお、出力形式を2000形式にするパッチが公開されているようです（参考：Spreadsheet_Excel_WriterでBIFF8を取り扱う - Paradigm Shift Design）。

画面のハードコピー

　画面のハードコピーをBMP形式でローカルに一時保存し、保存したファイルをプリンタに出力します。わざわざ帳票を作成するまでもないときは使えそうな機能だと思います。

画面に表示しているViewをBMPに保存する

{define-proc public {my-graphic-to-bitmap p_image: Graphic, p_file: Url}: void
  let v_gc: DisplayContext = {p_image.get-display-context},
      v_rect: GRect        = {p_image.layout.get-bounds},
      (r2: Renderer2d,
       d: Drawable)        = {Renderer2d.create-offscreen
                               v_rect.width,
                               v_rect.height,
                               1 / v_gc.pixel-size
                             },
      v_data: ImageData    = {ImageData}
  {r2.render-rectangle
    0pt, 0pt,
    v_rect.width - 0.5pt, v_rect.height - 0.5pt,
    fill-pattern = "white"
  }
  {{p_image.get-graphical-root}.draw r2}
  {r2.render-line
    0pt, 0pt,
    0pt, v_rect.height - 0.5pt,
    fill-pattern = "black"
  }
  {r2.render-line
    0pt,                  v_rect.height - 0.5pt,
    v_rect.width - 0.5pt, v_rect.height - 0.5pt,
    fill-pattern = "black"
  }
  {r2.render-line
    v_rect.width - 0.5pt, v_rect.height - 0.5pt,
    v_rect.width - 0.5pt, 0pt,
    fill-pattern = "black"
  }
  {r2.render-line
    v_rect.width - 0.5pt, 0pt,
    0pt,                  0pt,
    fill-pattern = "black"
  }
  set v_data.pixmaps =
        {new {Array-of Pixmap},
          {d.to-Pixmap}
        }
  {v_data.save-to-url p_file, "image/bmp"}
  {d.destroy}
}

デバッガ・ヘルプ

　さて、ここからはCurlの開発について少し紹介したいと思います。Curlには、Curl IDEをはじめとした、さまざまな開発支援ツールが充実しています。

デバッガ

　Curl IDEでは、ブレークポイントを設定することができます。デバッグ実行時には、このブレークポイントで処理がストップし、ステップ実行や実行途中の変数の中身を確認したり変更できます。デバッガを活用することで、バグの原因究明を早期に行うことができ、デバッグを効率的に行うことができるようになります。

ブレークポイントの設定