60 パティやイベントの詳細については後述 する。【ソース1】 �@ uses 　HookEvents イベントの実装に必要な IWRenderContext、IWScriptEvents、 色の指定を行うために必要なGraphics を宣言部のuses に追加する。 �A private 宣言 　入力された数値を内部で保管するため の変数FValue をprivate 部に宣言する。 またSetValue、GetValue、GetText に ついては後で自動生成されるため、この 時点では記載不要である。 �B protected 宣言 　ScriptEvents の設定を行うための HookEvents イベント、およびフォーカ スが抜けた際に実行するEditExit イベ ントをprotected 部に宣言する。また、 HookEvents は上位クラスから継承され ているため、宣言の後ろにoverride; を 記述する。 �C public 宣言 　クラス生成時イベント（constructor） を使用するため、public 部に宣言する。 �D published 宣言 　実際に画面に貼りつけた際にオブジェ クトインスペクタに表示される変数 Value を宣言する。また、Text は上位 クラスから存在するが、write を指定し ない（read のみとする）ことで、読み 取り専用のプロパティになる。 　各宣言部が完成したら、Ctrl ＋ Shift ＋［C］キーを同時に押下することで実 装部、および先述したSetValue、 GetValue、GetText が自動生成される。 （3）Createイベントの作成 　Create は、コンポーネントの生成時 に実行されるイベントである。 　画面にコンポーネントを配置した際 や、ソース内で動的にコンポーネントを 生成した際のプロパティの初期値は、こ こで設定した値となる。 　記述例については、ソース2 を参考に していただきたい。これらの中で注意が なお、今回の開発環境はDelphi/400 Version XE3 を使用している。 �@コンポーネントの新規作成 　メニューの［ファイル｜新規作成｜そ の他］を選択し、新規作成ウィンドウよ り「コンポーネント」を選択する。【図3】 �A フレームワークの指定（Version XE3.） 　フレームワーク指定のダイアログで は、VCL for Delphi Win32 を選択する。 【図4】 �B継承元コンポーネントの指定 　今回はTIWEdit を継承するため、 TIWEdit を指定する。【図5】 �C コンポーネント名とパレットページ、 保存先の指定 　クラス名に、今回作成するコンポーネ ント名であるTIWNumEdit を指定す る。 　パレットページ名に、新規追加するコ ンポーネントパレットのパレットページ 名を指定する。なお、今回はデフォルト 値のSamples を使用する。 　ユニット名に、今回追加するカスタム コンポーネントのpas ファイル名、お よび保存先を指定する。なお、今回は保 存先をC : \Projects\TechRep\Sample NumEdit.pas と設定する。【図6】 �D コンポーネントの新規作成の完了 　完了すると、図7 の画面が表示される。 【図7】 （2）宣言部の作成 　今回の数値入力用WebEdit では、以 下の機能を実装したいと思う。 ・ Value：Edit 値を数値として設定/ 保 持するための新規プロパティ。 ・ Text：既存のText から変更し、読み 取り専用プロパティにする。 ・ JavaScript で不必要なキー押下を無 効にする。 ・ フォーカスが抜けた時に、数値でない 値がセットされていれば色を変更する。 　これらを実現するため、ソース1 のよ うに宣言部を記述する。それぞれのプロ されている。加えて、これらはAjax の 処理に依存しているため、中には実行タ イミングや処理の種類が異なるものも存 在する。 　例えば、C/S アプリケーションにお けるTEdit のOnChange イベントは、 1 文字でも値が変更されたタイミングで 実行される。それに対し、TIWEdit の OnAsyncChange イベントでは、フォー カスが抜けたタイミングで、値が変更さ れていれば実行される。 ・JavaScript 連携 　VCL for the Web アプリケーション のコンポーネントは、JavaScript と密 接な関係がある。コンポーネントに JavaScript を埋め込み、キー押下時や フォーカスセット時などの制御を JavaScript で行うことが可能である。 　コンポーネントのカスタマイズにおい て、実際に埋め込み、制御を行う手法に ついては、次章でコンポーネントを作成 しながら解説する。 ※ Asynchronous ＝非同期 4. 数値専用WebEdit の作成例 　カスタムコンポーネントを作成するこ とで、処理の共通化を実現し、開発の効 率化を図ることが可能になる。VCL for the Web のカスタムコンポーネントも 同様であり、その特徴は前述の通りであ る。 　ここからは、実際にVCL for the Web アプリケーション用のカスタムコ ンポーネントを作成していこう。 　今回は例として、TIWEdit を継承し て「TIWNumEdit」という数値入力専 用のWebEdit を作成する。前述の Async イベントおよびJavaScript を活 用することで、C/S アプリケーション のコンポーネントと同等の制御をWeb アプリケーションでも実現できるだろ う。 （1）コンポーネントの新規作成 　C/S アプリケーションで作成する際 と同様に、コンポーネントソースを新規 作成する。手順に沿って説明していこう。