講 習 会 テキスト ~ XCute ナビ 機 能 を 使 用 した XCute による Web 開 発 の 基 本 ~ はじめに XCute は DB 連 携 の Web アプリケーションを Excel を 使 って 開 発 するツールです 一 般 に DB 連 携 の Web アプリケーションを 作 成 するのに 必 要 な 知 識 や 技 術 は Java や Perl などの 言 語 と ブラウザ(HTML) と DB(SQL) です XCute は Java や Perl など 言 語 のプログラミングを Excel に 置 き 換 え Excel を 開 発 と 実 行 のプラットフォームに 使 います このため Excel の 技 能 は 必 須 となります ブラウザ(HTML) と DB(SQL) のスキルも 少 なからず 必 要 になりますが これ ら2つの 技 能 は XCute を 通 して 少 しずつ 学 んでください この 講 習 会 テキストの 内 容 は マイクロラボのホームページのドキュメントページにある XCute ナビ 動 画 と 連 動 しています 講 習 会 の 復 習 や 自 習 にお 役 立 て 下 さい http://www.microlab.jp/xcutedoc/index.htm#movie 平 成 27 年 8 月 株 式 会 社 マイクロラボ -1-
1 章 DB と Excel を 双 方 向 に 連 結 する XCute 1 章 では XCute のインストールと DB 入 出 力 の 基 本 となる DB から Excel へのデータ 出 力 を 学 びます 1.1) XCute のインストール XCute を 使 用 するためには XCute Web サーバ DB の 3 つのシステムが 必 要 にな ります XCute のインストールメディアから Install.exe を 実 行 すると 下 図 のようなセッ トアップメニューが 表 示 され XCute と Web サーバ(Apache) をインストールする ことが 出 来 ます この 2 つを 実 行 X Cute Ver12 と Apache 2.2 With SSL をセットアップウィザードに 従 ってインス トールして 下 さい Apache のサービスを 確 実 に 起 動 するため OS の 再 起 動 を 行 います Web ブラウザを 起 動 して 下 記 URL を 入 力 して 下 さい http://localhost/procgi12/procgi.exe?ver 上 記 画 面 が 表 示 されれば Apache の 動 作 確 認 はできました localhost が 通 らない 場 合 localhost を 127.0.0.1 に 置 き 換 えてください エラーメッセージが 表 示 される 場 合 は サービスの 動 作 状 態 や Proxy の 設 定 等 を 確 認 して 下 さい サービスの 動 作 確 認 は コントロールパネルの 管 理 ツールのサービスで 確 認 できます これで Xcute のインストールは 終 了 です 次 からは Xcute ナビ 動 画 に 習 って 実 際 に 動 作 する Web アプリの 実 習 を 行 います -2-
1.2) 名 簿 データ 一 覧 を 作 成 A) 準 備 作 業 として Xcute フォルダーに Test フォルダーを 作 り meibo.mdb をコピー MDB ファイルをコピーすることで XCute Web サーバ DB が 揃 い 開 発 を 進 める 準 備 が 出 来 ました B) プロジェクト Test を 作 成 し 名 簿 テーブルを 接 続 した MyList レポートを 作 成 XCute ではアプリケーションの 単 位 をプロジェクト Excel シートに 対 するデータの 読 み 書 きの 単 位 をレポートと 呼 んでいます プロジェクト レポート DB テーブル ひな 型 ブック C) 教 材 からひな 型.xls のシートを TEST.xls ひな 型 ブックへコピー プロジェクトは XCute(proles.exe) を 起 動 してファイル PLS ファイル 新 規 作 成 から レポートはレポ ートエリアを 右 クリック レポ ートの 新 規 登 録 で 作 成 して 下 さ い テーブルの 接 続 はレポート 名 を 右 クリック テーブル 追 加 です MyList MyEntry シートを TEST.xls にコピーします 講 習 会 テキストでは 便 宜 上 マイクロラボが 用 意 した 画 面 で 進 めて 行 きますが ひな 型 の 画 面 デザインにつきましては Excel の 機 能 を 活 用 して 自 由 に 作 成 することが 出 来 ます 既 存 の Excel 帳 票 からコピーしても 差 し 支 えありません ひな 型 をデザインする 際 の 注 意 点 は R1 ~ R3 の 行 C1 の 列 に 対 して 画 面 を 作 成 しては いけないことです これらのセルは XCute のコマンドを 書 くエリアとして 予 約 されてい ます 実 際 には 少 し 余 裕 をもたせ R10C2 以 下 のセルで 画 面 のデザインを 行 うようにして 下 さい ( 画 面 デザインの 変 更 や 変 数 領 域 として 必 要 になる 場 合 があるためです) -3-
D) ひな 型 の 設 定 レポートに 接 続 した DB テーブルをどのひな 型 シートで 読 み 書 きするか 定 義 する 必 要 があ ります それを 定 義 する 操 作 が ひな 型 の 設 定 です ひな 型 の 設 定 は 接 続 した DB テーブルを 右 クリッ クして 表 示 されたメニュ ーから 呼 び 出 します ひな 型 シート テーブル 1 レコードの 読 書 範 囲 は 必 須 設 定 項 目 です MyList のレポートでは ひな 型 シート MyList テーブル 1 レコードの 読 書 範 囲 R11C2:R11C7 と 設 定 して 下 さい E) マッピング(DB の 項 目 と Excel のセルとの 関 連 付 け) DB<-->Excel の 完 成 画 面 デザインと DB 項 目 の 辻 褄 が 合 うように 適 切 なセル 番 地 を 指 定 して 下 さい GUI 操 作 にも 対 応 して いますので マッピング したいひな 型 のセル 位 置 をターゲットした 状 態 で XCute 操 作 パネルの セ ル 位 置 欄 を 右 クリック して 番 地 を 取 得 すると 手 軽 です 1.3) DB Excel 機 能 を 確 認 してみよう A) WriteReport ボタンを 押 す ひな 型 を 複 製 したワーク Book にデータが 書 き 出 されます 正 しく 出 力 されない 場 合 は ひな 型 の 設 定 やマッピング 位 置 を 確 認 して 下 さい -4-
2 章 Exce と Web ブラウザーを 双 方 向 に 連 結 する XCute 前 章 では DB と Excel を 双 方 向 に 連 結 する XCute を 学 びました 2 章 では Excel と Web ブラウザーを 双 方 向 に 連 結 する Xcute について 学 習 します Excel Web ブラウザーは Excel の HTML 保 存 機 能 を 使 って HTML ファイルを 作 り Excel の HTML 保 存 機 能 では 作 成 できない<Form>タグやテキストタグなどは XCute のタ グ 差 込 機 能 で 補 完 します 2.1) 一 覧 をソートし 15 件 表 示 A)ひな 型 シートに 印 刷 範 囲 を 指 定 し ブラウザに 1 件 表 示 する XCute では HTML 化 する 範 囲 を Excel の 印 刷 範 囲 で 定 義 します 複 数 レコードを 表 示 する 画 面 の 場 合 ひな 型 の 設 定 の 1 レコードの 読 み 書 き 範 囲 で 設 定 した 範 囲 より 1 行 以 上 大 きめの 範 囲 にすることがポイントです MyList の 画 面 では R8C2:R12C7 の 範 囲 を 印 刷 範 囲 に 設 定 して 下 さい XCute ナビゲーション 機 能 を 使 用 して レポートをブラウザで 開 く(WriteReport=MyList) を 選 択 するか ブラウザの URL 欄 に 下 記 URL を 入 力 してブラウザに 画 面 を 表 示 します http://localhost/procgi12/procgi.exe?p=test&writereport=mylist ひな 型 シートの 複 製 に データが 書 き 出 され その 印 刷 範 囲 がブラウ ザに 表 示 されます B) R2C8 以 降 のセルに Next と Sort コマンドを 設 定 して 15 件 表 示 する 出 力 するデータ 件 数 の 指 定 や 並 び 替 え 抽 出 などデータベースの 操 作 はひな 型 に コマンドを 記 述 することで 行 います R1 ~ R3 行 のコマンド 記 述 エリアはセルごとに 機 能 が 決 まっています 詳 しくは XCute のオンラインヘルプをご 確 認 下 さい 件 数 を 指 定 する Next コマンドやデータの 並 び 替 えを 行 う Sort コマンドは R2C8 以 降 のセ ルに 記 述 します ナビゲーション 機 能 を 使 用 して R2C8 に Next コマンド R2C9 に 更 新 日 を 降 順 表 示 する Sort コマンドを 設 定 して 下 さい ブラウザを 更 新 して 記 述 したコマンド により 書 き 出 し 件 数 とソートが 正 しく 行 われている 様 子 を 確 認 して 下 さい -5-
2.2) 名 前 で 検 索 して 表 示 A) <form>タグやボタンなどのインターフェイスを 設 置 Excel の HTML 生 成 機 能 ではデータの 送 信 に 必 要 な<Form>タグやテキストエリア などのタグを 作 ることが 出 来 ません XCute では ひな 型 の 特 定 の 位 置 に 自 由 な HTML タグを 書 くことができ Excel の HTML と 組 み 合 わせて 表 現 させることが 出 来 ます 主 要 なタグについては XCute ナビ 機 能 で 自 動 挿 入 できますのでご 活 用 下 さい ひな 型 を 右 クリックすると 表 示 される XCute ナビゲーション から ひな 型 ナビ を 選 択 して<form> </form>タグを 挿 入 します 次 にテキストエリアやボタンを 作 成 したい 位 置 で XCute ナビゲーションを 呼 び 出 し 入 力 エリア( 文 字 ) 送 信 ボタン(WriteReport) を 設 定 して 下 さい 入 力 エリア(テキスト) 送 信 ボタン Form タグ ブラウザを 更 新 して 入 力 インターフェイスの 生 成 を 確 認 した 後 テ キストエリアに 文 字 を 入 れて 検 索 ボタンを 押 下 して 下 さい 結 果 検 索 はされてお らず 同 じデータが 表 示 されました ここでのポイントはブラウザから 送 信 した 文 字 列 がサーバ 側 のワークシートに 受 け 渡 され ていることです 正 しく 受 け 渡 されていれば その 値 を 参 照 する Filter コマンドを 追 加 す ることで 抽 出 結 果 が 得 られることになります R2C10 セルにナビゲーションから FILTERfieldnameLike を 設 定 し セルの 参 照 番 地 を R9C5 fieldname を 名 前 に 書 き 換 え ブラウザから 値 を 再 度 送 信 して 正 しい 検 索 結 果 が 得 られるかお 試 し 下 さい HTML 生 成 後 のブッ クを 確 認 すると ブ ラウザから 受 け 渡 さ れた 値 で Filter コマ ンドが 組 み 立 てら れ 目 的 の 結 果 が 得 られています このように Excel の 数 式 でコマンドを 組 み 立 てることが XCute におけるプロ グラムです ブラウザからひな 型 に 値 を 送 る Set コマンドについて XCute ではブラウザから 値 を 受 け 渡 す 仕 組 みを Set コマンドで 行 っています Set コマンドの 書 式 は Set_RxCy= 送 信 値 で RxCy セルに 送 信 値 が 受 け 渡 されます ナビゲーション 機 能 でテキストエリア 等 のインターフェイスを 設 定 すると 自 動 的 に 同 じセ ル 番 地 に 値 を 送 る Set コマンドが 挿 入 されますが 任 意 のセル 番 地 に 値 を 送 ることも 可 能 です 詳 しくはオンラインヘルプの Set コマンドの 項 をご 覧 下 さい -6-
タグ 差 し 込 みと;htmltag について 印 刷 範 囲 の 右 上 の;htmltag 識 別 子 の 右 下 には 任 意 の HTML タグを 記 述 することが 出 来 これをタグ 差 し 込 みと 呼 んでいます タグ 差 し 込 みは 印 刷 範 囲 の 左 端 を 基 準 に ;htmltag 指 示 子 から 同 じ 列 数 オフセットしたセ ル 位 置 に 記 述 します ナビゲーション 機 能 を 使 用 すると 適 切 なセル 位 置 にタグが 差 し 込 まれますが ナビゲー ションを 使 用 せずに 任 意 のタグを 記 述 する 場 合 は オフセットするセルの 数 を 間 違 えない ように 注 意 して 下 さい また <font color='red'>のような HTML タグのほか ナビゲーションで 設 定 したタグの 属 性 だけ 差 し 込 む 属 性 差 し 込 み も 使 用 できます 属 性 差 し 込 みは (パイプ 記 号 )で 始 まり style=none のように 記 述 します これらの 差 し 込 みタグは 数 式 で 可 変 させる 内 容 にすることも 可 能 です 2.3) 詳 細 画 面 ( 入 力 更 新 )の 作 成 A)1 章 で 作 成 したリスト 形 式 の 画 面 を 参 考 に MyEntry レポートを 完 成 させる ひな 型 シート: MyEntry テーブル 1 レコードの 読 書 範 囲 :R9C2:R14C5 名 前 :R10C3 (キー 必 須 ) 業 種 :R11C3 都 道 府 県 :R12C3 年 齢 男 女 :R11C5 :R12C5 更 新 日 :R14C3 WriteRepot ボタンを 押 下 してデータを 書 き 出 した 後 セル 値 を 変 更 して ReadReport ボタ ンを 押 下 し データベースの 更 新 が 出 来 ることも 確 認 して 下 さい -7-
2.4) 詳 細 画 面 の Web 化 A) 詳 細 画 面 をナビゲーションを 使 用 して Web 化 します 印 刷 範 囲 R9C2:R13C5 を 設 定 ;htmltag と<form>~</form>タグをひな 型 ナビで 挿 入 名 前 業 種 都 道 府 県 各 項 目 に 入 力 エリア( 文 字 列 ) 年 齢 入 力 エリア( 整 数 ) 男 女 プルダウンリスト (, 男, 女 ) 更 新 ボタン 送 信 ボタン ReadReport 上 記 の 設 定 が 完 了 したら MyEntry シート 上 でナビゲーションより Excel シートをブラウ ザで 開 く WriteSheet を 選 択 してブラウザに 表 示 して 下 さい 表 示 されたブラウザの 画 面 に 正 し く 入 力 インターフェイスが 作 成 さ れていることを 確 認 して 下 さい 各 項 目 に 値 を 入 れ 更 新 ボタンを 押 下 し ブラウザから 入 力 した 値 が DB に 反 映 されるか 試 して 下 さ い MyList の 画 面 で 登 録 した 名 前 を 検 索 すると 先 ほど 入 力 したデータがヒ ットしています 今 回 の 画 面 では 更 新 日 項 目 は 印 刷 範 囲 外 としたため 入 力 インターフェイスが 無 く DB に 反 映 されていません しかし 読 み 取 るデータは 必 ずしもブラウザから 受 け 渡 された 値 でなくても 良 いため Excel の 数 式 や 関 数 を 使 うことで 入 力 を 自 動 化 することが 出 来 ます ひな 型 の 更 新 日 がマッピングされている R14C3 セルに =now() を 設 定 して 下 さい コンピュータのシステム 時 刻 が DB に 登 録 されるようになります B) 入 力 規 則 でエラーチェックを 行 う データの 登 録 や 修 正 も 出 力 時 と 同 じく 手 軽 に 設 定 できますが 実 際 の 業 務 では 入 力 され たデータの 整 合 性 をチェックする 必 要 があります 例 えば 現 在 の 設 定 では 年 齢 欄 に 常 識 的 な 範 囲 を 超 える 値 を 入 力 できてしまいますが お かしな 値 は 入 力 できないようにあらかじめ 制 限 する 必 要 があります XCute では Excel の 入 力 規 則 を 使 用 して 簡 易 的 にデータの 制 限 を 行 うことが 出 来 ます R11C5 セルの 入 力 規 則 を 開 き 次 のように 設 定 して 下 さい 最 大 値 :100 エラーメッセージ: 年 齢 は 0 ~ 100 で 入 力 ブラウザから 範 囲 外 の 値 が 入 力 さ れると 次 の 結 果 が 返 ります -8-
2.5) 一 覧 画 面 と 詳 細 画 面 をリンクする A)リンクタグを 設 定 し リンク 先 アドレスを 変 更 一 覧 画 面 の 名 前 をリンクにして 詳 細 画 面 を 呼 び 出 すようにするため ナビゲーション を 使 用 して MyList シートの R11C2 セルに リンクタグ を 設 定 して 下 さい 次 にタグ 差 し 込 みエリアに 差 し 込 まれたタグのリンク 先 を 次 のように 書 き 換 えます ="<A HREF='procgi.exe?P="&R1C5&"&WriteReport=MyEntry&SET_R6C1="&RC2&"'> "&RC2&"</A>" 赤 文 字 部 分 WriteSheet=Menu を WriteReport=MyEntry に 書 き 換 え ブラウザから 画 面 の 遷 移 が 正 しくおこなわれる 事 を 確 認 したあと 青 文 字 部 分 の Set コマンドを 追 記 して 値 が 次 画 面 に 引 き 継 がれることを 確 認 して 下 さい リンクに 追 記 した Set_R6C1 コマンドに より 選 択 したレコードの 名 前 がサーバ 側 のブックに 値 が 引 き 継 がれています B) 引 き 継 いだ 名 前 でその 詳 細 画 面 が 表 示 されるよう Filter コマンドを 記 述 Set コマンドにより 受 け 渡 された 文 字 列 で 完 全 一 致 の Filtrer を 掛 けることで 目 的 のレコードが 呼 び 出 せるようになります MyEntry シートの R2C8 セルにナビゲーションで FILTERfieldname= を 入 れ fieldname 部 分 を 名 前 に 参 照 セル 番 地 を R6C1 に 変 更 して 下 さい 目 的 のレコードが 呼 び 出 される 仕 組 みを 確 認 して 下 さい -9-
C) 詳 細 画 面 を 更 新 すると 一 覧 画 面 に 遷 移 する 仕 組 み(コマンド 連 鎖 )を 設 定 現 在 の 設 定 では 更 新 ボタンを 押 下 してデータを 更 新 すると 更 新 画 面 の 印 刷 範 囲 が そのままブラウザに 出 力 されるため データベースに 値 が 正 しく 登 録 されたか 判 り にくい 状 態 になっています このような 場 合 は R3C8 以 降 に 記 述 する コマンド 連 鎖 を 使 用 して 任 意 の 画 面 に 自 動 遷 移 させることが 可 能 です ナビゲーションを 使 用 して MyEntry シートの R3C8 セルに コマンド 連 鎖 を 選 択 し 自 動 的 に 差 し 込 まれた 数 式 の WriteSheet=menu を WriteReport=MyList に 変 更 し て 下 さい R3C8 セルにコマンドが 記 述 されていると 印 刷 範 囲 を HTML 化 せずに 記 述 されたコマンドを 実 行 します 今 回 の 例 では 直 前 に ReadReport コマンドが 発 行 された 場 合 に 次 画 面 の コマンドを 表 示 するよう に 数 式 を 設 定 しています R3C8 以 降 に 記 述 するコマンド 連 鎖 は メインコマンドの 他 データベースの 値 を 上 書 きする OverWrite や 別 のレポートで 読 み 取 る OverRead コマンドも 記 述 できます IF 関 数 と 組 み 合 わせ 特 定 の 条 件 で 切 り 替 えるように 制 御 することでプログラム 言 語 的 なロジックを 作 成 することが 可 能 です D) 新 規 登 録 ボタンを 追 加 し 詳 細 画 面 から 新 規 登 録 ナビゲーションから リンク ボタン を 設 定 して セルの 文 字 列 を 新 規 登 録 に 変 更 する 差 し 込 まれたタグの WriteSheet=menu を WriteSheet=MyEntry に 書 き 換 える Submit ボタンとリンクボタンの 違 いについて ここで 設 定 したリンクボタンは Button タグに Java スクリプトを 使 用 してハイパーリン クを 行 ったものです 同 じボタンのインターフェイスに 見 えますが Form の 内 容 を 送 信 す る Submit ボタンとは 性 質 が 異 なります 見 かけがボタン 状 のリンクを 作 成 したい 場 合 は リンク ボタン を ブラウザから 入 力 した 値 を 送 信 したい 場 合 は 送 信 ボタン を 設 置 して 下 さい 終 わりに 今 回 習 得 した 基 本 機 能 で Web アプリケーションの 基 本 的 な 仕 組 みを 作 ることが 出 来 ま す この 他 にも XCute は 様 々な 拡 張 機 能 があり ファイルのアップロードやメールの 送 信 といった Web システムとして 必 要 な 機 能 はほとんど 備 えています 詳 しくはマイクロラボ Web サイトの ドキュメント&サンプル をご 覧 下 さい http://www.microlab.jp/xcutedoc/index.htm -10-
NOTE -11-