Curlで始めるリッチクライアント(1) Page 2/3

入力系アプリケーションでCurlを使ってみる

住商情報システム
三野 凡希
2005/5/7

Curlの基本的な構文

 本記事で紹介する入力系(業務系とも呼ばれる)のサンプル・アプリケーションを解説する前に、基本的なCurlのシンタックスを説明しておきましょう。

 Curlでアプリケーションを構築するためには、まず拡張子に「.curl」を付けた「アプレット」と呼ばれるファイルを作成します。これは通常のテキストファイルです。Curlのアプレット・ファイルにはまず「ヘラルド」と呼ばれる宣言文を入れ、その後、テキスト、式、コメントを混在して記述していきます。

||ヘラルド
{curl 3.0 applet}
リスト1 ヘラルド(宣言文)の記述

 ヘラルドはCurlアプレット・ファイルのトップに必ず宣言しなければなりません。Surge Lab IDEを使用してアプレットを新規作成すると、自動的にヘラルドと日本語表示のための文字エンコーディング指定が記述されます。テキストを表示する場合は、通常エディタで文書を書くように記述します。Curl言語のテキスト書式を使用せずにテキストを含めると、既定のフォント/ポイント/サイズで表示されます。

{curl 3.0 applet}
{curl-file-attributes character-encoding = "shift-jis"}
Hello! World こんにちは!
リスト2 テキストのみによる「Hello World」

 Curl言語の予約文字は“{”“}”“\”“|”の4つです。この中でも評価する式をCurlブラケット(“{”と“}”)で囲みます。実はこの“{”と“}”がCurlの名の由来です。英語ではこれをcurly bracketと呼びます。最初は戸惑うかもしれませんが、ほとんどが以下のようにシンプルな構文になっています。コマンドに当たる部分は、クラス名やプロシージャ名などになります。

{コマンド 引数1, 引数2, ….}
リスト3 Curlの基本構文

サンプル・アプリケーションの概要

 従来のWebページで一般的な入力フォーム(お客さま登録ページなど)は、いつも煩わしさを感じるぐらい不親切なものばかりでした。例えば、名前を入力する欄では「全角で入力」、電話番号を入力する欄は「半角で入力」という指示があり、その都度頻繁にIMEを切り替えて入力するのは煩わしいものでした。しかも、やっとすべての入力が終わって「登録」ボタンを押したところ、「入力が間違っています」などといわれたりします。それなら入力中に知らせてほしいものです。本来、入力画面はユーザーにもっと親切でなければなりません。

 また、表形式のインターフェイスも期待していた並び順序でないと、並べ替えるのに手間取ったり、見たくない項目があって見づらいといった不満も聞かれます。一般に表といえばExcelの画面に慣れ親しんでいますが、どうしてあのようなインターフェイスがWebアプリケーションで実現できないのだろうと思ってしまいます。

 そんな問題点を解決するのが、Curlをはじめとしたリッチクライアント製品です。本記事で紹介するサンプル・アプリケーションは、入力用コントロールおよび表コントロールを使用し、入力業務アプリケーションに必要な機能を実装しています。

図2 サンプル・アプリケーションに実装された機能

 サンプル・アプリケーションを構成するすべてのファイルは、以下のURLからダウンロードできます。

 ダウンロードして解凍するといくつかファイルが生成されますが、Surge Lab IDEがインストールされた環境で「project.cprj」というファイルをダブルクリックするとSurge Lab IDEが自動的に起動され、今回のサンプル・アプリケーションのソースファイルがすべて参照できます。

図3 Surge Lab IDEの起動画面(クリックすると拡大します)

 サンプル・アプリケーションの詳細な機能および基本クラスは以下のようになっています。

使用目的 クラス名 機能
入力フォーム TextFieldクラス IME(InputMethodEditor)制御、フォーカスインのときの色変更、Tab、Enterキー移動、入力チェック
RecordGridクラス 列の移動、列のサイズ変更、レコードのソート、スクロール
タブシート TabContainerクラス タブ選択による画面遷移
内部保存データ RecordSetクラス レコードとフィールドによる編成、データの変更に関するイベント管理

 実行方法はSurge Lab IDEからメニューバーの「実行(R)」−「プロジェクトの実行(R)」を選択して実行するか、「start.curl」をエクスプローラなどから直接ダブルクリックします。実行すると以下のような画面がWebブラウザに表示されます(注2)

図4 サンプル・アプリケーションのインターフェイス
注2:サンプル・アプリケーションをダウンロードしたディレクトリによっては、Webブラウザを開いたときにエラーが表示される場合があります。Curlアプレットの実行を許可するディレクトリを追加することで、このエラーは回避できます。Windowsでは「スタート」メニューから「プログラム」−「Curl RTE」−「Surgeコントロールパネル」を選択し、「特権ロケーション」タブで「このコンピュータ」を展開し、「特権ディレクトリの追加」からサンプル・アプリケーションをダウンロードしたディレクトリを追加します(下図を参照、画像をクリックすると拡大します)。

  2/3

 INDEX

Curlで始めるリッチクライアント(1)
入力系アプリケーションでCurlを使ってみる
  Page1
Curlとは?
Curlが動作する仕組み
Page2
Curlの基本的な構文
サンプル・アプリケーションの概要
  Page3
TextFieldクラスを使ってみよう




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間