3

Transcription

1 プログラミングガイド ページベース 開 発 モデル 編 Ver 5.0 プログラミングガイド - ページベース 開 発 モデル 編 i

2 ii

3 第 1 章 イントロダクション 7 1 i n t r a - m a r t の 起 動 と 終 了 8 intra-martへのログイン 8 intra-martからのログアウト 9 2 intra-martのメニュー 構 成 10 メニューの 表 示 10 intra-martのホーム 画 面 11 3 サンプルプログラムの 実 行 12 ソースリストと 実 行 画 面 を 見 るには 12 本 書 のサンプルを 実 際 に 作 成 してみるには 12 4 APIリストの 見 方 13 APIリストの 格 納 場 所 13 APIの 操 作 つのWebアプリケーションモデル 14 ページベース 開 発 モデル 14 J2EEベース 開 発 モデル 14 2つの 開 発 モデルで 構 築 したアプリケーションを 混 在 可 能 14 各 ファイルの 保 存 場 所 15 intra-martベースモジュールの 場 合 15 intra-martフレームワークの 場 合 15 6 intra-martのアプリケーション 開 発 概 要 16 ページベース 開 発 モデルによるアプリケーション 開 発 16 プレゼンテーション ページ 16 ファンクション コンテナ 17 7 ページベースで 開 発 するにあたって 18 第 2 章 ページベース 開 発 プログラミングの 基 礎 19 1 Hello Worldを 作 ろう 20 ベースとなるプレゼンテーション ページ(.html)の 作 成 20 ファンクション コンテナ(.js)の 作 成 21 アプリケーション プログラムの 実 行 22 2 ページ 間 にまたがるデータの 共 有 (セッション 管 理 ) 23 ベースとなるプレゼンテーション ページ(.html)の 作 成 23 送 信 側 のHTMLファイルの 準 備 (input.html) 23 表 示 側 のHTMLファイルの 準 備 (hello.html) 24 ファンクション コンテナ(.js)の 作 成 25 受 取 側 のJavaScriptファイルの 作 成 (input.js) 25 保 存 しておいたデータを 呼 び 出 すJavaScriptファイルの 作 成 (hello.js) 25 アプリケーション プログラムの 実 行 25 3 データベースからデータを 取 得 する 28 ベースとなるプレゼンテーション ページ(.html)の 作 成 29 ファンクション コンテナ(.js)の 作 成 30 アプリケーションの 実 行 31 4 取 得 したデータの 一 覧 表 示 32 ベースとなるプレゼンテーション ページ(.html)への 追 加 32 ファンクション コンテナ(.js)の 作 成 32 アプリケーションの 実 行 33 項 目 の 拡 張 33 プログラミングガイド - ページベース 開 発 モデル 編 iii

4 5 データの 登 録 更 新 削 除 34 ベースとなるプレゼンテーション ページ(.html)の 作 成 34 ファンクション コンテナ(.js)の 作 成 35 アプリケーションの 実 行 36 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 39 1 Storage Serviceの 利 用 方 法 40 ファイル アップロード 40 ファイルリストの 表 示 42 ファイル ダウンロード 44 ファイルの 削 除 46 2 メール 送 信 49 メール 送 信 フォームの 作 成 49 添 付 ファイル 付 きメールの 送 信 51 3 拡 張 <IMART>タグ 機 能 の 使 用 例 54 タグの 定 義 と 登 録 54 拡 張 <IMART>タグの 利 用 55 4 ユーザ 定 義 関 数 の 登 録 と 利 用 56 グローバル 関 数 としての 登 録 呼 び 出 し 56 5 JavaClassとの 連 携 58 標 準 JavaClassとの 連 携 方 法 58 標 準 JavaClasss 連 携 時 の 問 題 点 60 自 作 JavaClassとの 連 携 方 法 60 intra-mart 起 動 時 の 設 定 方 法 60 自 作 JavaClass 側 の 記 述 方 法 60 サーバサイドJavaScript 側 の 記 述 方 法 61 6 E J B と の 連 携 63 EJBコンポーネントの 作 成 63 JavaScriptからの 呼 び 出 し 63 7 外 部 プロセスの 呼 び 出 し 64 8 XML 形 式 のデータを 扱 う 65 XMLパーサーとデータの 取 得 65 9 デ バ ッ グ 手 順 66 デバッグ 例 66 デバッグAPIの 利 用 方 法 JavaScriptコンパイラ 機 能 について 69 実 行 時 のファンクションコンテナ 検 索 手 順 71 仕 様 詳 細 72 コンパイラとは 直 接 関 係 ない 部 分 の 仕 様 73 制 約 73 プログラムの 書 き 方 による 制 約 im-j2ee Frameworkとの 連 携 サンプル アプリケーション 76 データベースへのサンプルデータの 登 録 76 勤 怠 管 理 アプリケーションの 操 作 76 勤 怠 登 録 76 勤 怠 修 正 78 ワークフロー モジュールとの 連 携 79 ワークフロー 連 携 概 要 79 iv

5 申 請 画 面 80 フロー 情 報 画 面 80 承 認 画 面 モジュールの 組 み 込 みと 操 作 82 ユーザインターフェース 層 83 画 面 共 通 モジュール 83 グラフ 描 画 モジュール(プレゼンテーション ページ) 84 ビジネスロジック 層 86 アプリケーション 共 通 モジュール 86 メール 連 携 モジュール(ファンクション コンテナ) 86 外 部 ソフトウェア 接 続 モジュール 88 ERP 連 携 モジュール 89 業 務 基 盤 ツール 89 アクセスセキュリティモジュール 89 ワークフロー モジュール 90 ビジネスプロセスワークフローモジュール(アドバンスド 版 には 標 準 装 備 ) 90 バッチ 管 理 モジュール 91 ポータルモジュール 91 ViewCreator ユニットの 組 み 込 みと 操 作 93 アプリケーション 共 通 マスタunit 93 カレンダーunit 93 呼 び 出 し 方 法 94 カレンダーデータの 受 け 取 り 方 法 94 高 度 なカレンダー 画 面 のカスタマイズ 95 ファイルダウンロードunit 95 ダウンロードの 方 法 95 ファイル 拡 張 子 とMIMEタイプ 96 ファイルアップロードunit 96 プレゼンテーションページとの 連 携 96 情 報 の 取 得 方 法 96 ツリー 表 示 unit 97 i-mode unit 97 ページ 管 理 マスタメンテナンスでのi-modeの 設 定 97 i-modeのアドレスとパスワードの 設 定 98 i-mode 用 外 出 設 定 エクステンション モジュールの 組 み 込 みと 操 作 100 帳 票 印 刷 モジュール 拡 張 100 IM-PDFデザイナー 100 IM-XRFコンポーザ( 大 量 帳 票 印 刷 ) 102 アクセスセキュリティ モジュール 拡 張 103 ワークフロー モジュール 拡 張 105 IM-ワークフローデザイナー(アドバンスド 版 には 同 梱 ) 105 IM-Format Creator 105 IM-Σ Serv( 別 売 ) 105 外 部 ソフトウェア 連 携 ソリューション 106 統 合 検 索 ソリューション 106 マルチデバイスソリューション その 他 の 機 能 107 プログラミングガイド - ページベース 開 発 モデル 編 v

6 ライブラリ 107 検 索 ストリーミング 機 能 107 ソースセキュリティ 機 能 107 アプリケーション ロック 機 能 107 一 意 情 報 の 取 得 機 能 107 データベースのストアドプロシジャーの 呼 び 出 し 108 ファイル 操 作 108 データベース 操 作 108 LDAPとの 連 携 109 国 際 化 対 応 109 標 準 画 面 の 作 り 方 ( 共 通 画 面 デザイン) 109 Appendix メッセージ 設 定 予 約 語 一 覧 制 限 事 項 114 ファイル 名 称 114 ID コード 114 JS 関 数 114 vi

7 1 intra-martの 起 動 と 終 了 第 1 章 イントロダクション プログラミングガイド - ページベース 開 発 モデル 編 7

8 第 1 章 イントロダクション 1 intra-mart の 起 動 と 終 了 Webベースの 開 発 ツールであるintra-martは 通 常 のコンピュータソフトとは 起 動 と 終 了 の 方 法 が 異 な ります Webベースのアプリケーションでは ブラウザ 上 から 本 システムへ ログイン で 使 用 できるように なり 終 了 時 は ログアウト で 終 了 させます intra-martへのログイン intra-martへのログインは システム 管 理 者 ログイングループ 管 理 者 一 般 ユーザによってURLが 異 な ります 以 下 ログイングループ 管 理 者 のログインの 手 順 を 説 明 します なお システム 管 理 者 一 般 ユ ーザのログインに 関 しては アドミニストレータガイド を 参 照 してください 1 ブラウザを 起 動 し intra-martのurlを 入 力 します 画 面 上 には intra-martのログイン 画 面 が 表 示 されます intra-martベースモジュール (スタンドアロン) : 名 ).manager ( 分 散 システム) :Webサーバコネクタの 登 録 内 容 に 合 わせたURL intra-martフレームワーク :Webアプリケーションサーバに 対 するintra-martの 登 録 内 容 に 合 わせたURL intra-martベースモジュールをスタンドアロン 形 態 で 運 用 する 場 合 アクセスするURLのポート 番 号 (Webサー バとしてのポート)は インストール 時 に 指 定 することができます URLは ブラウザのブックマークに 登 録 しておくと 便 利 です この 他 に ログイン 画 面 なしで 自 動 認 証 する 方 法 ( P. 3 Column 参 照 )が 用 意 されています 2 ログイン 画 面 で ユーザコードと パスワードを 入 力 し [ログイン]ボタンをクリックします <intra-martのログイン 画 面 > ログイン 画 面 及 びログイン 初 期 画 面 のソースは 以 下 の 場 所 に 用 意 されています %ResourceService%/pages/platform/src/system/securityフォルダ 8 intra-martベースモジュール/フレームワーク

9 1 intra-martの 起 動 と 終 了 <intra-martの 初 期 画 面 > 初 期 画 面 のメインページ( 右 フレーム 内 )は ポータル 画 面 となっています 新 しくポートレットを 作 成 してポー タル 機 能 に 登 録 することにより 様 々な 情 報 を 初 期 表 示 することができます intra-martからのログアウト ログイン 画 面 に 戻 るとログアウトしたことになり intra-martを 終 了 できます ログイン 画 面 に 戻 るには 画 面 左 のメニュー 上 部 に 用 意 されている[LOGOUT]ボタンをクリックします メニューの[LOGOUT]ボタンをクリックせずにブラウザを 終 了 した 場 合 や 他 のページに 移 動 してintra-mart の 画 面 から 離 れてしまった 場 合 intra-martサーバ 内 ではセッションがタイムアウトするまでログイン 状 態 を 継 続 しているものとみなされます 必 ずメニューの[LOGOUT]ボタンをクリックしてください ログイン 画 面 なしで 自 動 認 証 する 方 法 intra-martにログインする 際 のURLに 次 のようにユーザコードとパスワードを 含 めると ログイン 画 面 な しで 自 動 認 証 されます システム 管 理 者 ログイングループ 管 理 者 名.manager?im_user=ユーザコード&im_password=パスワード 一 般 ユーザ 名.portal?im_user=ユーザコード&im_password=パスワード プログラミングガイド - ページベース 開 発 モデル 編 9

10 第 1 章 イントロダクション 2 intra-mart のメニュー 構 成 intra-martのメニュー 表 示 形 式 は フォルダ という 大 分 類 と ページ から 構 成 されていて ページを 選 択 すると 該 当 する 画 面 が 表 示 されます フォルダはどの 階 層 にでも 登 録 することができ その 配 下 の ページをまとめるために 利 用 します フォルダおよびページは ログイン( 起 動 )したユーザのアクセス 権 に 応 じたものだけが 表 示 されるので 本 マニュアル 上 の 画 面 と 実 際 の 画 面 が 異 なることがあります <フォルダとページの 関 係 > メニューの 表 示 intra-martのメニュー 表 示 では 画 面 左 フレームにツリー 構 造 のメニューが 表 示 されます 大 項 目 であ る フォルダ をクリックすると そこに 属 する ページ がツリーに 表 示 されます ここで ページ を 選 択 す ると これに 該 当 する 画 面 内 容 が 表 示 されます <メニュー 表 示 画 面 の 例 > 10 intra-martベースモジュール/フレームワーク

11 2 intra-martのメニュー 構 成 intra-martのホーム 画 面 ホーム 画 面 は intra-martログイン 時 に 表 示 される 初 期 画 面 です メニューを 選 択 して 各 種 画 面 が 表 示 されている 場 合 には 画 面 左 上 の[HOME]ボタンをクリックするとホーム 画 面 が 表 示 されます この 画 面 からintra-martのポータル 画 面 への 切 り 替 えが 行 えます 画 面 の 切 り 替 えは 右 画 面 の 左 上 のタブで 切 り 替 えることができます [HOME]ボタン [LOGOUT]ボタン [MENU ON/OFF]ボタン [ポータル 切 り 替 え]タブ ホーム 画 面 に 戻 ります ホーム 画 面 はintra-martログイン 時 に 表 示 され る 画 面 で ポータル 画 面 が 設 定 されているときには この 画 面 で 切 り 替 えることができます intra-martを 終 了 して ログイン 画 面 に 戻 ります 左 側 のメニューをOn/Offします メニューをOffにすると 画 面 が 広 くな って 作 業 が 容 易 になります この 機 能 は ブラウザにInternet Explorerを 使 用 している 場 合 にのみ 利 用 できます 設 定 されているポータル 画 面 を 切 り 替 えることができます ポータル 画 面 の 詳 細 は アドミニストレータガイド 第 2 章 9 ポータルの 設 定 と 操 作 と 同 じく 第 3 章 4 ポータルの 利 用 を 参 照 してください プログラミングガイド - ページベース 開 発 モデル 編 11

12 第 1 章 イントロダクション 3 サンプルプログラムの 実 行 本 書 の 以 降 の 章 では intra-martベースモジュール/フレームワークに 付 属 しているサンプルプログラム に 対 応 して プログラミングの 基 礎 を 体 験 していただけるように 構 成 されています 本 書 を 読 みながらソ ースプログラムを 表 示 し 実 行 してみることができるようになっています また ユーザが 一 からサンプル を 作 成 して 実 行 できる 環 境 も 用 意 されています ページベース 開 発 モデル サンプルプログラム : [サンプル]-[ページベース 開 発 モデル]-[チュートリアル]-[ 初 級 ] ソースファイル : %Storage Service%/sample/tutorial/beginner/source/ ソースリストと 実 行 画 面 を 見 るには [ 初 級 ]というページの ソース というリンクを 選 択 すると 各 節 で 説 明 しているソースリストを 画 面 に 表 示 することができます また 実 行 画 面 というリンクを 選 択 すると 実 際 に 実 行 した 画 面 を 見 ることが できます 本 書 のサンプルを 実 際 に 作 成 してみるには intra-martをインストールすると sample というフォルダができています この 中 に ページベース 開 発 モデル および J2EE 開 発 モデル 用 のフォルダが 用 意 されており 以 降 の 章 のすべてのサンプルと 同 じ 名 前 テンプレートファイルが 入 っています このファイルを 利 用 してサンプルを 作 成 すると [ 初 級 ]ペー ジ 下 部 のリンクを 選 択 するだけで 実 際 に 実 行 することができるようになっています また tutorial/beginner/example というフォルダには 完 成 したサンプルが 入 っていますので tutorial/beginner/training フォルダに 全 ファイルをコピーして 実 行 することもできます <チュートリアル[ 初 級 編 ]の 画 面 例 > ここで 紹 介 したサンプルのほかにも メニューの[サンプル]フォルダにはプログラミングの 参 考 になる 勤 怠 管 理 などのサンプルプログラムが 用 意 されています こちらも 合 わせてご 利 用 ください 12 intra-martベースモジュール/フレームワーク

13 4 API リストの 見 方 4 APIリストの 見 方 APIリストには intra-martベースモジュール/フレームワークで 提 供 される 各 機 能 やAPIの 仕 様 について 記 載 されています 開 発 の 際 には 参 考 資 料 としてご 活 用 ください このAPIリストは HTML 形 式 および Windowsの 標 準 Help 形 式 のファイルとなっており 左 側 のカテゴリメニューから 表 示 するほか Windows 版 では [ 検 索 ]タブで 全 文 検 索 が 行 えます APIリストの 格 納 場 所 APIリストは インストールCDの 次 の 場 所 に 格 納 されていますのでご 利 用 ください インストールCDの intramart5/document/specification/apilist.zip API リストを 表 示 させると 次 のようなメニューが 表 示 されます <APIリスト> APIの 操 作 左 側 の[ 目 次 ]タブから 各 カテゴリーのモジュール 名 をクリックすることで 各 モジュール 内 容 が 表 示 さ れます [ 検 索 ]タブを 利 用 すると 目 的 語 で 検 索 することができます [キーワード]タブに 関 しては 現 在 使 用 していません プログラミングガイド - ページベース 開 発 モデル 編 13

14 第 1 章 イントロダクション 5 2 つのWebアプリケーションモデル intra-martには ページベース 開 発 モデル と J2EEベース 開 発 モデル の2つの 開 発 モデルが 用 意 され ています これらの 開 発 モデルは それぞれ 特 徴 を 持 ち 用 途 に 応 じて 使 い 分 けることができます また 2つのモデルで 開 発 したWebアプリケーションを 同 一 のシステム 内 に 混 在 させて 実 行 することもできます どちらの 開 発 モデルもアクセスセキュリティモジュール ワークフローモジュールなど intra-martが 標 準 で 用 意 しているフレームワークを 利 用 することができますので 高 い 生 産 性 を 誇 ります ページベース 開 発 モデル ColdFusionやMicrosoft ActiveServerPageに 代 表 されるようなスクリプトを 主 体 にした 開 発 モデルで す intra-martでは 普 段 ホームページの 作 成 に 利 用 しているHTMLと(サーバサイド)JavaScriptを 利 用 してデータベースと 連 動 したWebシステムの 開 発 が 可 能 となっています そのため 初 心 者 でも 始 めら れる 簡 易 性 をもち 要 員 のシステム 教 育 コストを 大 きく 削 減 することができます これまで 簡 単 なホーム ページしか 作 成 したことがなかった 方 でも 約 2 週 間 ~1ヶ 月 ほどでマスターしWeb 業 務 画 面 を 作 成 する ことができます また ホームページの 作 成 更 新 と 同 様 に 簡 易 に 開 発 ができますので 頻 繁 に 更 新 する ような 複 雑 なWebシステムにも 柔 軟 に 対 応 することができます さらにJavaScriptからは 開 発 者 のテクニカルスキルにあわせて Java(Class EJB) C++ ストアドプロ シージャなどが 簡 単 に 呼 び 出 すことができます ページベース 開 発 モデルに 関 しては 本 書 で 解 説 しています J2EEベース 開 発 モデル J2EE(Java2 EnterpriseEdition)とは 米 サンマイクロシステムズが1999 年 9 月 に 発 表 したプラットフォー ムです Servlet JSP(JavaServerPages) EJB(EnterpriseJavaBeans)などから 構 成 され MVCモデル (Model-View-Controller)でシステム 構 築 をおこなっていきます 特 に 高 トランザクションが 集 中 する 処 理 に 適 しています J2EEベース 開 発 モデルに 関 しては プログラミング ガイド J2EEベース 開 発 モデル を 参 照 してください 2つの 開 発 モデルで 構 築 したアプリケーションを 混 在 可 能 intra-martベースモジュール/フレームワークでは これら2つのWebアプリケーションモデルで 構 築 したアプリケ ーションを 同 一 システム 内 で 混 在 させることもできます そのため 開 発 予 算 が 限 られ 短 期 間 開 発 の 必 要 な Webシステムはページベースの 開 発 モデルを 主 体 に 開 発 を 進 め その 中 でトランザクションの 集 中 する 部 分 のみを 切 り 出 してJ2EEベースで 開 発 するといった 現 実 的 かつ 柔 軟 な 開 発 スタイルをとることができます この 方 式 により J2EEベースの 開 発 モデルでの 問 題 (クラス 設 計 などの 高 度 なスキルの 必 要 性 やJava 技 術 者 の 確 保 などの 面 から 敷 居 が 高 く 開 発 費 用 が 増 大 する)とページベースの 開 発 モデルの 問 題 ( 大 規 模 なトランザ クション 処 理 に 対 するレスポンス 的 な 限 界 )を 同 時 に 解 決 することが 可 能 となります プログラム 開 発 にあたっては プログラミングガイド(ページベース 開 発 モデル 編 およびJ2EEベース 開 発 モデ ル 編 )をお 読 みいただくと 同 時 に アドミニストレータ ガイドもお 読 みください その 他 im-j2ee Framework 仕 様 書 もインストールCDに 用 意 されています 合 わせてご 活 用 ください インストールCDのintramart5/document/specification/im-j2ee_framework-spec_5.pdf 14 intra-martベースモジュール/フレームワーク

15 5 2つのWebアプリケーションモデル 各 ファイルの 保 存 場 所 intra-martベースモジュール/フレームワークの 各 ファイルの 保 存 場 所 を 示 します intra-martベースモジュールの 場 合 静 的 コンテンツ(HTMLファイルや 画 像 ファイルなど) Webサーバコネクタのインストールディレクトリ 以 下 (スタンドアロン 型 の 場 合 はサーバモジュールのインストールディレクトリ 直 下 doc/ディレクトリ 以 下 ) ページベース 開 発 モデルのプログラム (プレゼンテーション ページ(.html), ファンクション コンテナ(.js)) ソースディレクトリ 以 下 ( 通 常 は %ResourceService%/pages/src/) J2EEベース 開 発 モデルのプログラム(JSP)(JSP ファイル(.jsp,.xtp)) %Application Runtime%(スタンドアロンの 場 合 はサーバモジュール)/doc/ディレクトリ 以 下 J2EEベース 開 発 モデルのプログラム(Servlet)(JAVAクラスファイル(.class)) %Application Runtime%(スタンドアロンの 場 合 はサーバモジュール)/doc/ディレクトリ 以 下 の 該 当 ディレ クトリ 内 WEB-INF/classes/ 以 下 (または クラスパスに 設 定 されているディレクトリ 内 ) Storage Serviceにより 一 元 管 理 されるファイル 群 %Storage Service%/storage/ディレクトリ 内 intra-martフレームワークの 場 合 静 的 コンテンツ(HTMLファイルや 画 像 ファイルなど) フレームワークサーバのインストールディレクトリ 直 下 doc/ディレクトリ 以 下 ページベース 開 発 モデルのプログラム (プレゼンテーション ページ(.html), ファンクション コンテナ(.js)) ソースディレクトリ 以 下 ( 通 常 は %ResourceService%/pages/src/) J2EEベース 開 発 モデルのプログラム(JSP)(JSP ファイル(.jsp)) %Application Runtime%(スタンドアロンの 場 合 はサーバモジュール)/ doc/ディレクトリ 以 下 J2EEベース 開 発 モデルのプログラム(Servlet)(JAVAクラスファイル(.class)) %Application Runtime%(スタンドアロンの 場 合 はサーバモジュール)/doc/ディレクトリ 以 下 の 該 当 ディレ クトリ 内 WEB-INF/classes/ 以 下 (または クラスパスに 設 定 されているディレクトリ 内 ) Storage Serviceにより 一 元 管 理 されるファイル 群 %Storage Service%/ storage/ディレクトリ 内 プログラミングガイド - ページベース 開 発 モデル 編 15

16 第 1 章 イントロダクション 6 intra-martのアプリケーション 開 発 概 要 (ページベース 開 発 モデルの 場 合 ) intra-martベースモジュールやintra-martフレームワークを 使 ったアプリケーションの 開 発 において 開 発 者 はブラウザ 上 に 表 示 されたユーザインタフェースと Webサーバ 上 で 動 作 するビジネスロジックを 作 成 す ることになります ページベース 開 発 モデルではプレゼンテーション ページ(HTMLファイル)とファンクショ ン コンテナ(サーバサイドJavaScriptファイル)の2つのファイルを 作 成 します この 際 フレームワークで 用 意 されているモジュール 群 を 活 用 することでさらに 生 産 性 を 向 上 させることができます ページベース 開 発 モデルによるアプリケーション 開 発 ファンクション コンテナ 中 には intra-martベースモジュール/フレームワークを 利 用 したビジネスロジッ クがJavaスクリプトで 記 述 されており プレゼンテーション ページ から 呼 び 出 され 実 行 されます その 橋 渡 しの 機 能 をintra-martベースモジュールやintra-martフレームワークが 実 現 しています プレゼンテーション ページ プレゼンテーション ページは ユーザインタフェース 部 分 に 相 当 し 拡 張 子 は.html で 固 定 となります 開 発 者 またはエンドユーザは intra-mart ebuilder を 利 用 して Webベースのプレゼンテーション ペ ージを 作 成 していきます また ブラウザベースのユーザインタフェースには 動 画 像 やサウンドなどを 盛 り 込 んだマルチメディアリッチな 画 面 を 構 築 していくことができます さらに プレゼンテーション ページは HTMLファイルであるため Webシステムの 開 発 において ユーザインタフェース 部 分 のみを 切 り 出 してホ ームページデザイナに 作 業 を 依 頼 することもできます ホームページ 作 成 ツールから 生 成 されるHTMLフ ァイルに<IMART>タグを 追 加 していくことで ファンクションコンテナにあるJavaスクリプトを 関 連 付 けて 呼 び 出 すことが 可 能 になります ユーザ 定 義 関 数 を 呼 び 出 す<IMART> 拡 張 タグも 追 加 できます 完 成 したHTMLファイルは ページ 登 録 をするだけですぐにデータベースと 連 動 して 高 速 動 作 します <HTML> <TR> <TD> <IMART name> </TD> <TD> <IMART name> </TD> <TD> <IMART name> </TD> </TR> 画 面 共 通 モ ジュー ル 帳 票 印 刷 ワークフロ ー アクセスセ キュリ ティ グラフ 描 画 メール 連 帯 SQL 文 intra-martベースモジュール/フレームワーク

17 6 intra-martのアプリケーション 開 発 概 要 1 2 市 販 のホームページ 作 成 ツール(Microsoft FrontPage や Netscape Composer 等 )や intra-mart ebuilder を 利 用 してユーザインタフェースとなるプレゼンテーション ページのひな 型 を 作 成 します ホームページ 作 成 ツールから 自 動 生 成 された HTML ソースに ファンクション コンテナ 中 の JavaScript 関 数 やベースモジュールのオブジェクトと 連 携 する<IMART>タグを intra-mart ebuilder やテキストエ ディタを 使 い 挿 入 ( 記 述 )します プレゼンテーション ページのサンプル 例 を 示 します intra-martの 独 自 拡 張 タグ<IMART>を 利 用 して 各 種 モジュールを 呼 び 出 していきます intra-martの 独 自 拡 張 タグ<IMART> を 利 用 して 各 種 モジュールを 呼 び 出 していきます ファンクション コンテナ 多 階 層 アーキテクチャのうちのAPサーバ 上 で 稼 動 するビジネスロジック 部 分 に 相 当 します 拡 張 子 は.js で 固 定 となります ファンクション コンテナとプレゼンテーション ページはワンセットとなっているため ファイルラベル 名 は 同 一 のものを 使 用 します 開 発 者 は プレゼンテーション ページから 呼 び 出 される Javaスクリプトを ファンクション コンテナの 中 に 記 述 し 作 成 していきます 具 体 的 には intra-martベー スモジュールで 用 意 されているフレームワークから 必 要 なオブジェクトや 関 数 群 を 選 び 出 し intra-mart ebuilder で それらオブジェクトや 関 数 群 を 利 用 したサーバサイドで 稼 動 するビジネスロジ ックをJavaスクリプトで 記 述 し 作 成 していきます データベースへのSQL 文 もファンクション コンテナの 中 に 記 述 していきます 実 際 のRDBとの 接 続 やSQL 発 行 は intra-martベースモジュールやintra-martフ レームワークから 実 行 されるため 細 かなセッション 管 理 やトランザクション 管 理 を 開 発 者 は 意 識 する 必 要 はありません 作 成 されたビジネスロジックは プレゼンテーション ページの<IMART>タグから 呼 び 出 され 実 行 されることになります intra-martベースモジュールやintra-martフレームワークで 用 意 されてい るフレームワークの 詳 細 は intra-mart APIリスト に 一 覧 記 述 されています これらスクリプトの 記 述 は Javaスクリプトで 行 えるため 習 得 が 難 しいといわれるJavaやActiveXを 用 いることなく これまでのホ ームページ 作 成 の 延 長 で データベースと 連 動 した 本 格 的 なWebシステムの 開 発 が 可 能 になります プログラミングガイド - ページベース 開 発 モデル 編 17

18 第 1 章 イントロダクション 7 ページベースで 開 発 するにあたって 本 書 第 2 章 以 降 には 次 のような 内 容 を 記 述 しています ページベース 開 発 モデルで 開 発 するにあたり ご 利 用 ください 第 2 章 ページベース 開 発 プログラミングの 基 礎 1 Hello Worldを 作 ろう 2 ページ 間 にまたがるデータの 共 有 (セッション 管 理 ) 3 データベースからデータを 取 得 する 4 取 得 したデータの 一 覧 表 示 5 データの 登 録 更 新 削 除 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 1 Storage Serviceの 利 用 方 法 2 メール 送 信 3 拡 張 <IMART>タグ 機 能 の 使 用 例 4 ユーザ 定 義 関 数 の 登 録 と 利 用 5 JavaClassとの 連 携 6 EJBとの 連 携 7 外 部 プロセスの 呼 び 出 し 8 XML 形 式 のデータを 扱 う 9 デバッグ 手 順 10 JavaScriptコンパイラ 機 能 について 11 im-j2ee Frameworkとの 連 携 12 サンプル アプリケーション 13 モジュールの 組 み 込 みと 操 作 14 ユニットの 組 み 込 みと 操 作 15 エクステンション モジュールの 組 み 込 みと 操 作 16 その 他 の 機 能 Appendix 1 メッセージ 設 定 2 予 約 語 一 覧 3 制 限 事 項 18 intra-martベースモジュール/フレームワーク

19 7 ページベースで 開 発 するにあたって 第 2 章 ページベース 開 発 プログラミングの 基 礎 プログラミングガイド - ページベース 開 発 モデル 編 19

20 第 2 章 ページベース 開 発 プログラミングの 基 礎 1 Hello Worldを 作 ろう ここでは intra-martのページベース 開 発 モデルを 用 い 簡 単 なアプリケーションを 作 成 する 作 業 を 通 し て プレゼンテーション ページやファンクション コンテナの 作 成 の 実 際 について 理 解 を 深 めましょう 本 章 で 紹 介 するサンプル 事 例 は すべてintra-martの[サンプル]の[チュートリアル]フォルダ 内 に 登 録 され ています 本 書 の 以 下 の 節 は それぞれ 次 のチュートリアルに 対 応 した 解 説 になっています 第 2 章 1 Hellow Worldを 作 ろう ~ 5 データの 登 録 更 新 削 除 第 3 章 1 Storage Serviceの 利 用 方 法 第 3 章 2 メール 送 信 初 級 ページ ファイル 操 作 ページ メール 送 信 ページ ここでは 簡 単 な 例 としてブラウザからサーバ 上 に 作 成 したプレゼンテーション ページであるhello.html を 起 動 させたとき サーバサイドのintra-martベースモジュールと 連 携 して こんにちは イントラマートで す とブラウザ 上 に 表 示 させるアプリケーションを 作 ります ベースとなるプレゼンテーション ページ(.html)の 作 成 ブラウザ 上 に 表 示 させるためのプレゼンテーション ページを HTML 形 式 で 作 成 します HTMLは intra-martの ebuilder や 市 販 のホームページ 作 成 ツール エディタを 利 用 して 作 成 します ここでは 下 記 のように 画 面 上 に 文 字 列 を 表 示 するだけのシンプルな 静 的 HTMLを 最 初 に 作 成 します ファイル 名 はhello.htmlとし imartフォルダ 下 のSampleフォルダに 保 存 します < 作 成 したhello.htmlファイル > 1: <HTML> 2: <BODY> 3: こんにちは intra-martです 4: </BODY> 5: </HTML> <hello.htmlの 実 行 画 面 > 20 intra-martベースモジュール/フレームワーク

21 1 Hello Worldを 作 ろう 作 成 したHTMLファイル 上 で ファンクション コンテナと 連 携 させたい 部 分 に<IMART>タグを 埋 め 込 み プレゼンテーション ページを 完 成 させます ここでは intra-mart の 部 分 を<IMART>タグにし ファンク ション コンテナで 指 定 した 文 字 列 (namevalueの 値 )に 置 き 換 えるように 設 定 します <IMARTタグを 埋 め 込 んで 修 正 したhello.htmlファイル> 1: <HTML> 2: <BODY> 3: こんにちは <IMART type="string" value=namevalue></imart>です 4: </BODY> 5: </HTML> <IMART type="string"> ここでは <IMART>タグのtype 句 に string を 指 定 しています string は value 句 に 指 定 された 変 数 をファンクション コンテナ 中 の 値 に 置 き 換 えるための 属 性 です type 句 に 指 定 できる 属 性 には 他 にも link repeat form input select など プレゼンテーション ページとファンクション コンテナを 連 携 させるためのものが intra-martベースモジュールにより 多 数 用 意 されています intra-martで 提 供 している<IMART>タグの 詳 細 は ベースモジュールに 付 属 している APIリスト を 参 照 してください ファンクション コンテナ(.js)の 作 成 作 成 したプレゼンテーション ページに 対 応 するファンクション コンテナを 作 成 します ファンクション コン テナには 初 期 化 関 数 であるinit 関 数 を 作 成 します ここでは 文 字 列 イントラマート を namevalue という 名 前 のプロパティに 設 定 します hello.htmlと 連 携 させるため ファイル 名 はhello.jsとし プレゼンテ ーション ページと 同 じフォルダに 置 きます < 作 成 したファンクション コンテナ(hello.js)> 1: // HTMLへ 渡 す 値 の 宣 言 2: var namevalue; 3: 4: // init 関 数 の 定 義 5: function init() 6: { 7: namevalue = "イントラマート"; // HTMLへ 渡 す 値 を 設 定 します 8: } ファンクション コンテナの 中 の 関 数 init()は ベースモジュールが 自 動 的 に 初 期 解 釈 する 固 定 関 数 です プログラミングガイド - ページベース 開 発 モデル 編 21

22 第 2 章 ページベース 開 発 プログラミングの 基 礎 アプリケーション プログラムの 実 行 作 成 したプレゼンテーション ページとファンクション コンテナからなるアプリケーションを 実 行 すると 最 初 に 示 したように こんにちは イントラマートです と 表 示 されます < 実 行 時 の 結 果 画 面 > 任 意 のディレクトリに 作 成 したアプリケーションを 実 行 するには あらかじめログイングループ 管 理 者 でログイン して [ログイングループ 管 理 ]の[メニュー 設 定 ]でページの 登 録 をしておかなければなりません アプリケー ションの 登 録 は アドミニストレータ ガイドの 第 2 章 7 アプリケーションの 登 録 を 参 照 してください 22 intra-martベースモジュール/フレームワーク

23 2 ページ 間 にまたがるデータの 共 有 (セッション 管 理 ) 2 ページ 間 にまたがるデータの 共 有 (セッション 管 理 ) intra-martを 利 用 すると 複 数 ページ 間 でのデータ 共 有 (セッション 管 理 )が 簡 単 に 行 えます ここでは プレゼンテーション ページからデータを 入 力 し ファンクション コンテナを 通 してサーバ 側 でデ ータを 保 存 別 のページにデータを 表 示 するというアプリケーションを 作 ってみます ここでは 名 前 を 入 力 するページ(input.html)を 新 しく 作 成 して そこで 取 得 したデータを 前 節 で 作 成 したhello.htmlに 表 示 させます ベースとなるプレゼンテーション ページ(.html)の 作 成 基 本 となるプレゼンテーションページを 作 成 します 拡 張 子 は.htmlに 限 定 されています 送 信 側 のHTMLファイルの 準 備 (input.html) 一 般 的 なWebページと 同 じように<FORM>タグを 使 って データ 入 力 をするHTMLページを 最 初 に 作 成 します ファイル 名 はinput.htmlです < 送 信 フォームinput.html> 1: <HTML> 2: <BODY> 3: 名 前 を 入 力 してください <BR> 4: <FORM method="post"> 5: <INPUT type="text" name="yourname"><br> 6: <INPUT type="submit" value=" 送 信 "> 7: </FORM> 8: </BODY> 9: </HTML> <input.html 実 行 時 の 画 面 > プログラミングガイド - ページベース 開 発 モデル 編 23

24 第 2 章 ページベース 開 発 プログラミングの 基 礎 フォームの 送 信 ボタンが 押 されたときに ファンクション コンテナ 上 で 指 定 した 関 数 を 呼 び 出 すようにし て フォームで 入 力 された 値 をファンクション コンテナ 側 で 参 照 できるようにします そのために ファンクション コンテナで 連 携 させる 必 要 のある<FORM>タグおよび <INPUT>タグを <IMART>タグに 置 き 換 えます 完 成 したinput.htmlファイルを 保 存 します <ファンクション コンテナとの 連 携 用 送 信 フォームHTML> 1: <HTML> 2: <BODY> 3: 名 前 を 入 力 してください <BR> 4: <IMART type="form" method="post" action="inputname" page="sample/user1/hello"> 5: <IMART type="input" style="text" name="yourname"></imart><br> 6: <IMART type="submit" value=" 送 信 "></IMART> 7: </IMART> 8: </BODY> 9: </HTML> 表 示 側 のHTMLファイルの 準 備 (hello.html) 作 成 したHTMLソースは 直 接 ブラウザでも 表 示 できますが ここでは 前 章 で 作 成 したhello.htmlからリ ンクをしてinput.htmlを 表 示 するようにしてみます hello.htmlに 次 の 行 を 追 加 してください <hello.htmlに 追 加 > <IMART type="link" page=" 保 存 フォルダ 名 /input"> 名 前 の 入 力 </IMART> <IMART type="link"> このタグを 利 用 する 事 で intra-mart のセッションを 維 持 しながらプログラムを 動 作 させることができ ます 詳 細 は APIリスト を 参 照 してください 目 的 のHTMLソースへのパス intra-mart ベースモジュールのResource Service の 管 理 しているソースディレクトリ( 標 準 で は%Resource Service%/pages/src/ ) からの 相 対 パスとなります また 拡 張 子 は 指 定 しません "./input" や " 保 存 フォルダ/input.html"という 記 述 をするとエラーになります 24 intra-martベースモジュール/フレームワーク

25 2 ページ 間 にまたがるデータの 共 有 (セッション 管 理 ) ファンクション コンテナ(.js)の 作 成 次 に JavaScriptでファンクションコンテナファイルを 作 成 します 受 取 側 のJavaScriptファイルの 作 成 (input.js) <データ 受 け 取 り 保 存 するJavaスクリプト> 1: // inputname 関 数 の 定 義 2: function inputname(request) 3: { 4: // 受 け 取 った 値 をClientオブジェクトに 保 存 する 5: Client.set( "namevalue", request.yourname ); 6: } 保 存 しておいたデータを 呼 び 出 すJavaScriptファイルの 作 成 (hello.js) 入 力 した 値 を 参 照 するように 前 節 で 作 成 したhello.jsの9 行 目 を 次 のように 書 き 換 えてみてください < 保 存 しておいたデータを 取 り 出 す 例 > 9: namevalue = "イントラマート"; // HTMLへ 渡 す 値 を 設 定 9: namevalue = Client.get( "namevalue" ); // HTMLへ 渡 す 値 を 設 定 アプリケーション プログラムの 実 行 作 成 したプレゼンテーション ページとファンクション コンテナからなるアプリケーションを 実 行 すると 送 信 側 input.htmlで 入 力 して 送 信 したデータ ユーザ1 が 受 信 側 hello.htmlに 表 示 されます < 送 信 側 input.html> < 受 信 側 hello.html> プログラミングガイド - ページベース 開 発 モデル 編 25

26 第 2 章 ページベース 開 発 プログラミングの 基 礎 <IMART type="form"> input.htmlの4 行 目 で 使 っている<IMART type="form">について もう 少 し 詳 しく 説 明 します <IMART type="form" method="post" action="inputname"page="sample/user1/hello"> この<IMART type="form">は intra-martファンクション コンテナにデータを 引 き 渡 すための<FORM> タグを 提 供 する 指 定 方 法 です action 属 性 には フォームのデータがサーバに 送 信 されたときに 呼 び 出 される ユーザ 定 義 関 数 名 を 指 定 します input.jsを 見 ると サーバサイドのファンクション コンテナ 上 に 同 じ 名 前 の 関 数 が 定 義 さ れています page 属 性 は フォームデータの 送 信 とサーバ 側 での 処 理 が 完 了 した 後 に 表 示 したいページを 指 定 で きます 省 略 した 場 合 は 現 在 のページを 再 描 画 します ここでも リンク 先 の 指 定 方 法 は Resource Serviceの 管 理 しているソースディレクトリ( 標 準 では % Resource Service%/pages/src)からの 相 対 パスになりますので 注 意 してください requestオブジェクト データを 受 信 したファンクション コンテナでは requestオブジェクトを 利 用 してプレゼンテーション ペ ージのデータを 参 照 できます requestオブジェクトは ベースモジュール/フレームワークから 自 動 的 に 呼 び 出 される 関 数 (init()や<imart>タグのaction 属 性 への 指 定 関 数 )の 引 数 として 受 け 取 ることが できます Client.set( "namevalue", request.yourname ); プレゼンテーション ページからデータが 送 られると input.jsのinputname 関 数 が 呼 び 出 されます ファ ンクション コンテナ 側 では requestオブジェクトのプロパティ 名 としてyourname(input.htmlでは テ キスト 入 力 フィールドにyournameという 名 前 を 付 けていました)を 指 定 するだけで 簡 単 に 送 信 され てきたデータを 取 り 出 すことができます 26 intra-martベースモジュール/フレームワーク

27 2 ページ 間 にまたがるデータの 共 有 (セッション 管 理 ) Clientオブジェクトによるセッション 管 理 別 のページへ 移 動 した 後 もサーバ 側 でデータを 保 存 しておくために Clientオブジェクトのsetメソッド を 使 っています Client.setメソッドは クライアントのWebブラウザがintra-martで 作 成 したサーバアプリケーションに 接 続 している 間 データを 保 持 するように 指 示 するメソッドです 保 有 するデータには 名 称 を 付 けること ができ 複 数 保 存 することも 可 能 です この 例 では namevalueという 名 前 を 付 けて 保 存 しています intra-martベースモジュール/フレームワークが 提 供 するオブジェクトには 他 にも 便 利 なメソッドやオブ ジェクトが 多 数 定 義 されています アプリケーションの 開 発 者 は これらのメソッドやモジュールを 利 用 することで 短 い 開 発 期 間 で 品 質 の 優 れたアプリケーションを 構 築 することが 可 能 になります 各 クライアント 情 報 の 保 持 時 間 の 制 限 (セッションタイムアウト 値 ) intra-martでは ここで 述 べたセッション 管 理 情 報 やアクセスセキュリティ 情 報 など 各 クライアントごと の 情 報 を 一 定 時 間 Application Runtime 上 のメモリ(HttpSession)に 保 持 しています デフォルト 時 間 の 設 定 は10 分 となっており 10 分 以 上 クライアントからのアクセスがない 場 合 には 再 度 ログインし 直 す 必 要 があります このデフォルトの 時 間 設 定 は conf/http.xml( 基 本 設 定 ファイル) で 変 更 することができます conf/http.xmlの 編 集 に 関 しては 設 定 ガイドを 参 照 してください プログラミングガイド - ページベース 開 発 モデル 編 27

28 第 2 章 ページベース 開 発 プログラミングの 基 礎 3 データベースからデータを 取 得 する ここでは intra-martが 用 意 しているオブジェクトやメソッドの 中 から データベースアクセスの 為 のオブジ ェクトおよびメソッドを 利 用 して 実 際 のデータベースからデータを 取 得 します 前 章 の 手 順 に 従 って サーバ 側 で 動 的 に 生 成 されるページを 作 成 していきます 社 員 マスタ(m_sample_stf) 列 名 内 容 属 性 データ 型 サイズ(bytes) staff_cd 社 員 コード 主 キー テキスト 型 20 stf_name_kanji 社 員 ( 漢 字 ) テキスト 型 50 stf_name_kana 社 員 (カナ) テキスト 型 50 stf_name_eng 社 員 ( 英 字 ) テキスト 型 50 < 利 用 するデータベース> ここでサンプルとして 利 用 する 社 員 マスタ(m_sample_stf)は intra-martベースモジュールをインストールし た 後 システム 管 理 者 画 面 の[ライセンス]で 作 成 できます 28 intra-martベースモジュール/フレームワーク

29 3 データベースからデータを 取 得 する ベースとなるプレゼンテーション ページ(.html)の 作 成 次 のHTMLファイルは 社 員 コードと 社 員 名 を 表 示 するための 通 常 のHTMLソースの 例 です Netscape Composer Microsoft Frontpage intra-mart ebuilder などHTML 作 成 用 のビジュアルツ ールを 利 用 すると 表 の 作 成 などが 簡 単 にできますので プレゼンテーション ページの 最 初 のひな 型 作 成 には これらのツールを 利 用 すると 便 利 です < 社 員 コードと 社 員 名 を 表 示 するstaff.html> 1: <HTML> 2: <BODY> 3: <TABLE border="1"> 4: <TR> 5: <TD> 社 員 コード</TD> 6: <TD> 社 員 名 </TD> 7: </TR> 8: <TR> 9: <TD></TD> 10: <TD></TD> 11: </TR> 12: </TABLE> 13: </BODY> 14: </HTML> <staff.htmlファイルの 実 行 結 果 > ファンクション コンテナからのデータを 反 映 するために 修 正 したstaff.htmlを 次 に 示 します < 社 員 マスタからのデータ 取 得 用 staff.html> 1: <HTML> 2: <BODY> 3: <TABLE border="1"> 4: <TR> 5: <TD> 社 員 コード</TD> 6: <TD> 社 員 名 </TD> 7: </TR> 8: <TR> 9: <TD><IMART type="string" value=staff_code></imart></td> 10: <TD><IMART type="string" value=staff_name></imart></td> 11: </TR> 12: </TABLE> 13: </BODY> 14: </HTML> プログラミングガイド - ページベース 開 発 モデル 編 29

30 第 2 章 ページベース 開 発 プログラミングの 基 礎 ファンクション コンテナ(.js)の 作 成 ファンクション コンテナのinit 関 数 を 作 成 します ファイル 名 はstaff.jsとします このstaff.jsでは 次 の2つのことを 実 現 します 1 データベース 上 の 社 員 マスタファイルからデータを 取 得 します 2 取 得 したデータをHTMLへ 引 き 渡 します < 社 員 マスタからのデータ 取 得 用 staff.js> 1: // HTMLへ 渡 す 値 を 宣 言 します 2: var staff_code; 3: var staff_name; 4: 5: // init 関 数 の 定 義 6: function init(request) 7: { 8: var objdata = false; // データベースから 取 得 したデータ 格 納 用 9: 10: // データベースから 社 員 データを 全 て 取 得 します 11: objdata = DatabaseManager.select("SELECT * FROM m_sample_stf"); 12: 13: // 1 件 目 のレコードからHTMLへ 渡 す 値 を 設 定 します 14: staff_code = objdata.data[0].staff_cd; 15: staff_name = objdata.data[0].stf_name_kanji; 16: 17: } staff_cd stf_name_kanjiはデータベースの 列 名 です DatabaseManagerオブジェクト-1 データベースへのアクセスはDatabaseManagerオブジェクトを 通 して 簡 単 に 行 えます この 例 では DatabaseManagerオブジェクトの select メソッドを 呼 び 出 しています このようにパラメ タにSQL 形 式 のSELECT 文 を 記 述 してデータベースからデータを 取 得 することができます 取 得 したデータはオブジェクトとして 返 されます データベースから 取 得 したレコードは selectメソッド が 返 すオブジェクトのもつ 配 列 プロパティとして 保 存 されています 名 称 は data です selectメソッド が 返 すオブジェクトには 他 にも 取 得 できたレコード 数 を 保 有 する countrow などがあります intra-martベースモジュールが 提 供 するオブジェクトとメソッドの 詳 細 は ベースモジュールに 付 属 する APIリスト を 参 照 してください 30 intra-martベースモジュール/フレームワーク

31 3 データベースからデータを 取 得 する アプリケーションの 実 行 このアプリケーションを 実 行 した 結 果 を 次 に 示 します < 実 行 結 果 > 作 成 したstaff.jsファイルの10 11 行 目 のdate[0]をdate[1] data[2]に 変 更 してみてください 2 件 目 3 件 目 のレコードが 表 示 されるようになります プログラミングガイド - ページベース 開 発 モデル 編 31

32 第 2 章 ページベース 開 発 プログラミングの 基 礎 4 取 得 したデータの 一 覧 表 示 前 節 で 作 成 した 社 員 名 表 示 ページ(staff)を 改 良 して 社 員 名 一 覧 を 表 示 するようにソースを 修 正 し ます ベースとなるプレゼンテーション ページ(.html)への 追 加 一 覧 の 表 示 は <IMART type="repeat">タグを 利 用 します repeatは タグで 囲 まれた 範 囲 を 指 定 回 数 だけ 繰 り 返 し 実 行 してHTMLへ 展 開 します さらに Javaスクリプト 側 で 作 成 した 配 列 と 連 動 して 配 列 内 のデータを 順 次 表 示 することもできます < 社 員 マスタからのデータ 取 得 用 HTML( 一 覧 表 示 用 )> 1: <HTML> 2: <BODY> 3: <TABLE border="1"> 4: <TR> 5: <TD> 社 員 コード</TD> 6: <TD> 社 員 名 </TD> 7: </TR> 8: <IMART type="repeat" list=stafflist item="record"> 9: <TR> 10: <TD><IMART type="string" value=record.staff_cd></imart></td> 11: <TD><IMART type="string" value=record.stf_name_kanji></imart></td> 12: </TR> 13: </IMART> 14: </TABLE> 15: </BODY> 16: </HTML> ファンクション コンテナ(.js)の 作 成 次 にJavaScriptファイルを 示 します < 社 員 マスタからのデータ 取 得 用 Javaスクリプト( 一 覧 表 示 用 )> 1: //HTMLへ 渡 す 値 を 宣 言 します 2: var stafflist; 3: 4: // init 関 数 の 定 義 5: function init() 6: { 7: var objdata = false; // データベースから 取 得 したデータ 格 納 用 8: 9: // データベースから 社 員 データを 全 て 取 得 します 10: objdata = DatabaseManager.select( "SELECT * FROM m_sample_stf" ); 11: 12: // HTMLへ 渡 すデータのリストを 設 定 します 13: stafflist = objdata.data; 14: 15: } m_sample_stf は 社 員 マスタファイル の 名 称 です 32 intra-martベースモジュール/フレームワーク

33 4 取 得 したデータの 一 覧 表 示 アプリケーションの 実 行 次 にアプリケーションを 実 行 した 結 果 を 示 します < 実 行 結 果 > 項 目 の 拡 張 完 成 したアプリケーションに 社 員 名 (カナ) の 項 目 を 追 加 してみましょう 変 更 するのはプレゼンテー ション ページ(staff.html)だけで ファンクション コンテナは 変 更 の 必 要 はありません 下 記 のリストでは の 行 を 変 更 しました < 社 員 マスタからのデータ 取 得 用 HTML( 一 覧 表 示 用 )- 項 目 を 拡 張 > 1: <HTML> 2: <BODY> 3: <TABLE border="1"> 4: <TR> 5: <TD> 社 員 コード</TD> 6: <TD> 社 員 名 </TD> 7: <TD> 社 員 名 (カナ)</TD> 変 更 した 行 8: </TR> 9: <IMART type="repeat" list=stafflist item="record"> 10: <TR> 11: <TD><IMART type="string" value=record.staff_cd></imart></td> 12: <TD><IMART type="string" value=record.stf_name_kanji></imart></td> 13: <TD><IMART type="string" value=record.stf_name_kana></imart></td> 変 更 した 行 14: </TR> 15: </IMART> 16: </TABLE> 17: </BODY> 18: </HTML> 次 に 拡 張 したアプリケーションを 実 行 した 結 果 を 示 します < 実 行 結 果 > プログラミングガイド - ページベース 開 発 モデル 編 33

34 第 2 章 ページベース 開 発 プログラミングの 基 礎 5 データの 登 録 更 新 削 除 データの 参 照 ができるようになりましたので データを 追 加 登 録 するページを 作 成 します ページの 名 称 はstaffinsとし 前 節 で 作 成 したstaff.htmlから<IMART type="link">を 使 ってリンクを 張 ってください ベースとなるプレゼンテーション ページ(.html)の 作 成 まず 社 員 データ 登 録 用 の 一 般 的 なHTMLを 記 述 します データ 送 信 を 行 うので <FORM>タグを 使 い ます 次 のリストを 参 考 にして ブラウザ 上 に 正 しく 表 示 されるのを 確 認 してください <データ 更 新 フォーム 表 示 用 HTML> 1: <HTML> 2: <BODY> 3: データを 入 力 して 登 録 ボタンを 押 してください <BR> 4: <FORM method="post"> 5: 社 員 コード 6: <INPUT type="text" name="staff_code"><br> 7: 社 員 名 8: <INPUT type="text" name="staff_name"><br> 9: <BR> 10: <INPUT type="submit" value=" 登 録 "> 11: </FORM> 12: <BR> 13: <IMART type="link" page="sample/user1/staff"> 戻 る</IMART> 14: </BODY> 15: </HTML> ブラウザ 上 に 正 しく 表 示 されるのを 確 認 後 intra-martのファンクション コンテナにデータを 送 るために いくつかのタグを<IMART>タグに 変 更 します <ファンクション コンテナとの 連 携 用 staffins.html> 1: <HTML> 2: <BODY> 3: データを 入 力 して 登 録 ボタンを 押 してください <BR> 4: <IMART type="form" method="post" action="insertstaffname"> 5: 社 員 コード 6: <IMART type="input" style="text" name="staff_code"></imart><br> 7: 社 員 名 8: <IMART type="input" style="text" name="staff_name"></imart><br> 34 intra-martベースモジュール/フレームワーク

35 5 データの 登 録 更 新 削 除 9: <BR> 10: <IMART type="submit" value=" 登 録 "></IMART> 11: </IMART> 12: <BR> 13: <IMART type="link" page="sample/user1/staff"> 戻 る</IMART> 14: </BODY> 15: </HTML> ファンクション コンテナ(.js)の 作 成 クライアント 上 のブラウザから 送 られてきたデータを サーバ 上 のファンクション コンテナ 上 でデータベー スに 反 映 するためのJavaスクリプトを 記 述 します ファイル 名 はstaffins.jsです ここでは 次 の2つのことを 行 います 1 クライアントからのリクエストデータの 参 照 2 データベースへの 追 加 データベースへのレコード 追 加 は DatabaseManagerオブジェクトに 定 義 されている 次 の3つのメソッドを 呼 び 出 すことにより 実 現 します begintransactionメソッド insertメソッド commit/rollbackメソッド トランザクション 開 始 の 宣 言 データの 挿 入 挿 入 したデータのコミット/ロールバック <データベースへのデータ 登 録 用 Javaスクリプト> 1: function insertstaffname(request) 2: { 3: var objrecord = new Object(); // レコード 登 録 用 オブジェクトを 生 成 4: var result; // DBアクセスの 結 果 5: 6: // レコードの 作 成 7: objrecord.staff_cd = request.staff_code; 8: objrecord.stf_name_kanji = request.staff_name; 9: objrecord.stf_name_kana = request.staff_name_kana; 10: objrecord.stf_name_eng = request.staff_name_eng; 11: 12: // DB 処 理 の 開 始 13: DatabaseManager.beginTransaction(); 14: 15: // レコードの 挿 入 16: result = DatabaseManager.insert("m_sample_stf", objrecord); 17: 18: // エラーチェック 19: if (! result.error) 20: { 21: DatabaseManager.commit(); // 成 功 なのでコミットします 22: } 23: else 24: { 25: DatabaseManager.rollback(); // 失 敗 なのでロールバックします 26: } 27: } プログラミングガイド - ページベース 開 発 モデル 編 35

36 第 2 章 ページベース 開 発 プログラミングの 基 礎 アプリケーションの 実 行 次 に 実 行 結 果 を 示 します <staffins.html 実 行 画 面 > < 実 行 結 果 > 初 期 表 示 されているstaffins.htmlは intra-martベースモジュールでタグ 解 釈 されて 送 付 された 通 常 の HTMLファイルです 36 intra-martベースモジュール/フレームワーク

37 5 データの 登 録 更 新 削 除 DatabaseManagerオブジェクト-2 ここで 利 用 されている insertメソッドの 他 に 更 新 削 除 用 に 次 の2つのメソッドが 用 意 されています パラメタに 指 定 する WHERE 句 の 条 件 には SQL 文 で 指 定 するWHERE 句 に 与 える 条 件 式 を 記 述 します 例 えば 社 員 コードがstf0001の 社 員 を 削 除 したい 場 合 は DatabaseManager.remove( "m_sample_stf", "staff_cd = 'stf0001'" ); のように 指 定 します 実 際 には プレゼンテーションページで 指 定 した 社 員 コードを 参 照 する 場 合 がほ とんどですので var strwhere = "staff_cd = '" + request.staff_code + "'"; DatabaseManager.remove( "m_sample_stf", strwhere ); となります また 本 オブジェクトでは 同 時 に 複 数 のデータベースへのアクセスできるオプションも 用 意 されていま す 詳 細 は APIリスト の 本 オブジェクトの 項 を 参 照 してください プログラミングガイド - ページベース 開 発 モデル 編 37

38 第 2 章 ページベース 開 発 プログラミングの 基 礎 38 intra-martベースモジュール/フレームワーク

39 5 データの 登 録 更 新 削 除 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 プログラミングガイド - ページベース 開 発 モデル 編 39

40 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 1 Storage Serviceの 利 用 方 法 intra-martではstorage Serviceを 利 用 することにより 分 散 システム 構 築 時 においても 容 易 にファイ ルの 共 有 が 可 能 となります ここでは ブラウザからアップロードされたファイルをStorage Serviceに 保 存 したり またStorage Serviceに 保 存 されているファイルをダウンロードしたりする 画 面 を 作 ってみます ファイル アップロード まずは ファイルをアップロードしてStorage Serviceに 保 存 するためのフォームを 作 成 します < 送 信 用 フォーム filer.html > 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 //EN"> 2: 3: <HTML> 4: <HEAD> 5: <TITLE>File Center</TITLE> 6: </HEAD> 7: <BODY bgcolor="whitesmoke"> 8: <H2>Upload</H2> 9: <IMART type="form" action="action_upload" method="post" enctype="multipart/fo rm-data"> 10: <INPUT type="file" name="local_file"> 11: <INPUT type="submit" value=" send "> 12: </IMART> 13: </BODY> 14: </HTML> 15: 16: <!-- End of File --> 受 信 したファイルデータをStorage Serviceに 保 存 するためのファンクションコンテナを 記 述 します ファンクションコンテナでは ファイルデータをバイナリ 形 式 で 受 け 取 るので Storage Serviceに 対 しても バイナリデータとしてファイル 保 存 を 行 います <ファイルを 受 信 するためのファンクションコンテナ filer.js > 1: // 画 面 初 期 化 2: function init(request){ 3: var root = new VirtualFile("filebox"); 4: 5: // 保 存 ディレクトリの 有 無 のチェック 6: if(! root.isdirectory()){ 7: root.makedirectories(); // ディレクトリ 作 成 8: } 9: 10: } 11: 12: // 指 定 ファイルの 受 信 13: function action_upload(request){ 14: 15: // パラメータ 情 報 (=RequestParameter オブジェクト)を 取 得 16: var parameter = request.getparameter("local_file"); 17: 18: // ファイルの 中 身 を 取 得 (バイナリ) 19: var filedata = parameter.getvalueasstream(); 20: 21: // ファイル 名 の 取 得 40 intra-martベースモジュール/フレームワーク

41 1 Storage Serviceの 利 用 方 法 22: var filename = parameter.getfilename() 23: 24: // ファイルの 書 き 出 し 25: var vf = new VirtualFile("filebox/" + filename); 26: var res = vf.save(filedata); 27: 28: } この 画 面 では 以 下 のように 動 作 します 1:ファイルコントロールにより 選 択 されたファイルデータがサーバに 送 られます 2:サーバでは ファイルの 内 容 の 有 無 を 確 認 します 3:ファイルを 受 信 していた 場 合 受 信 したファイルのファイル 名 を 取 得 します 4: 元 のファイル 名 のまま 受 信 したファイルデータをStorage Serviceに 出 力 します < 実 行 画 面 ( 結 果 )> <INPUT type="file"> HTMLフォーム 中 で 利 用 している<INPUT type="file">について もう 少 し 詳 しく 説 明 します フォームコントロールである<INPUT type="file">を 利 用 すると ブラウザからサーバに 対 してファイルを アップロードすることができます この 時 フォームは 以 下 のような 記 述 が 必 要 になります <IMART type="form" method="post" enctype="multipart/form-data"> これは ファイルの 情 報 をMIME 形 式 にエンコードして POSTモードでサーバにリクエストをするという 指 定 になります RequestParameterオブジェクト intra-martでは アップロードされたファイルの 操 作 を 容 易 にするRequestParameterオブジェクトを 用 意 しています 本 オブジェクトを 利 用 することで サーバ 側 では 受 信 したデータに 対 して 特 殊 な 処 理 を 行 うことなくファイルを 取 り 出 すことができます RequestParameterオブジェクトには アップロードさ れたファイルのファイル 名 を 取 得 するメソッド 等 も 用 意 されています 詳 しくはAPIリストを 参 照 してくだ さい プログラミングガイド - ページベース 開 発 モデル 編 41

42 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 ファイルリストの 表 示 ここでは 前 節 で 作 成 した 画 面 を 改 良 して アップロードしたファイルの 一 覧 を 表 示 するようにソースを 修 正 します < 一 覧 表 を 表 示 するためのプレゼンテーション ページ(filer.html)> 1: <HTML> 2: <HEAD> 3: <TITLE>File Center</TITLE> 4: </HEAD> 5: <BODY bgcolor="whitesmoke"> 6: <H2>Upload</H2> 7: <IMART type="form" action="action_upload" method="post" enctype="multipart/f orm-data"> 8: <INPUT type="file" name="local_file"> 9: <INPUT type="submit" value=" send "> 10: </IMART> 11: <HR> 12: <H2>File List</H2> 13: <TABLE> 14: <TR><TH>File Name</TH></TR> 15: <IMART type="repeat" list=flist item="rec"> 16: <TR> 17: <TD><IMART type="string" value=rec></imart></td> 18: </TR> 19: </IMART> 20: </TABLE> 21: </BODY> 22: </HTML> アップロードされたファイルを 一 覧 表 として 表 示 するためには 保 存 されているファイルをリストとして 取 得 する 必 要 があります Storage Serviceに 問 い 合 わせてファイルリストを 取 得 するためのコードを 追 加 します <ファイル 一 覧 を 取 得 するように 修 正 したファンクションコンテナ> 1: var flist, rec; 2: 3: // 画 面 初 期 化 4: function init(request){ 5: var root = new VirtualFile("filebox"); 6: 7: // 保 存 ディレクトリの 有 無 のチェック 8: if(! root.isdirectory()){ 9: root.makedirectories(); 10: } 11: 12: flist = root.files(); // ファイルリストの 取 得 13: } 14: 15: // 指 定 ファイルの 受 信 16: function action_upload(request){ 17: 18: // パラメータ 情 報 (=RequestParameter オブジェクト)を 取 得 19: var parameter = request.getparameter("local_file"); 20: 21: // ファイルの 中 身 を 取 得 (バイナリ) 22: var filedata = parameter.getvalueasstream(); 42 intra-martベースモジュール/フレームワーク

43 1 Storage Serviceの 利 用 方 法 23: 24: // ファイル 名 の 取 得 25: var filename = parameter.getfilename() 26: 27: // ファイルの 書 き 出 し 28: var vf = new VirtualFile("filebox/" + filename); 29: var res = vf.save(filedata); 30: 31: } Storage Service 上 のファイルを 操 作 するAPI VirtualFile Storage Service( 標 準 では%Storage Service%/storage/)にあるファイルやディレクトリの 情 報 を 取 得 したり 作 成 や 削 除 などの 更 新 したりするためのAPIです このAPIを 利 用 することで 様 々なファイルの 作 成 や 取 得 またディレクトリの 作 成 やリストの 取 得 など ができ 分 散 システムにおいても すべてのApplication Runtime 間 で 環 境 に 依 存 することなくファイ ルを 共 有 することができます < 実 行 画 面 ( 結 果 )> この 実 行 画 面 では すでに1つのファイルがアップロードされていることが 確 認 できます プログラミングガイド - ページベース 開 発 モデル 編 43

44 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 ファイル ダウンロード ファイルをアップロードできて アップロードされたファイルがStorage Serviceに 保 存 されていることが 確 認 できたので 次 は 保 存 されているファイルをブラウザにダウンロードする 機 能 を 追 加 します 前 節 で 作 成 した 画 面 に 対 してファイルをダウンロードできるようにソースを 修 正 します ファイルをダウンロードするには プレゼンテーションページにダウンロードをするためのリンクを 追 加 します また そのリンクがクリックされた 時 にファイルを 送 信 するためのロジックをファンクションコンテナに 追 加 し ていきます <ダウンロード 用 リンクを 追 加 したプレゼンテーション ページ(filer.html)> 1: <HTML> 2: <HEAD> 3: <TITLE>File Center</TITLE> 4: </HEAD> 5: <BODY bgcolor="whitesmoke"> 6: <H2>Upload</H2> 7: <IMART type="form" action="action_upload" method="post" enctype="multipart/f orm-data"> 8: <INPUT type="file" name="local_file"> 9: <INPUT type="submit" value=" send "> 10: </IMART> 11: <HR> 12: <H2>File List</H2> 13: <TABLE> 14: <TR><TH>File Name</TH><TH></TH></TR> 15: <IMART type="repeat" list=flist item="rec"> 16: <TR> 17: <TD><IMART type="string" value=rec></imart></td> 18: <TD> 19: <IMART type="link" action="action_download" server_file=rec>do wnload</imart> 20: </TD> 21: </TR> 22: </IMART> 23: </TABLE> 24: </BODY> 25: </HTML> Downloadと 表 示 するためのリンクを 作 成 します このリンクには クリックされた 時 にダウンロード 処 理 をするためのサーバー 関 数 action_downloadが 指 定 されていますので ファンクションコンテナ 内 にダウンロード 関 数 action_downloadを 追 加 します <ダウンロード 用 関 数 を 追 加 したファンクション コンテナ> 1: var flist, rec; 2: 3: // 画 面 初 期 化 4: function init(request){ 5: var root = new VirtualFile("filebox"); 6: 7: // 保 存 ディレクトリの 有 無 のチェック 8: if(! root.isdirectory()){ 9: root.makedirectories(); 10: } 11: 12: flist = root.files(); // ファイルリストの 取 得 44 intra-martベースモジュール/フレームワーク

45 1 Storage Serviceの 利 用 方 法 13: } 14: 15: // 指 定 ファイルの 受 信 16: function action_upload(request){ 17: 18: // パラメータ 情 報 (=RequestParameter オブジェクト)を 取 得 19: var parameter = request.getparameter("local_file"); 20: 21: // ファイルの 中 身 を 取 得 (バイナリ) 22: var filedata = parameter.getvalueasstream(); 23: 24: // ファイル 名 の 取 得 25: var filename = parameter.getfilename() 26: 27: // ファイルの 書 き 出 し 28: var vf = new VirtualFile("filebox/" + filename); 29: var res = vf.save(filedata); 30: 31: } 32: 33: // 指 定 ファイルの 送 信 34: function action_download(request){ 35: var fpath = new VirtualFile("filebox/" + request.server_file); // 取 得 36: Module.download.send(fpath.load(), request.server_file); // 送 信 37: } < 実 行 画 面 ( 結 果 )> ダウンロードAPI Module.download.send() サーバからHTML 形 式 以 外 での 情 報 の 送 信 を 行 うためのAPIです 主 に ファイルをダウンロードする 場 合 に 利 用 します 情 報 をダウンロードする 時 には ブラウザが その 情 報 はどのような 形 式 なのかを 判 別 するための 情 報 を 付 加 する 必 要 がありますが このAPIでは 自 動 的 に 情 報 の 形 式 を 判 断 して 適 切 な 形 でダウンロードを 行 える 機 能 を 提 供 しています 例 えば Word で 保 存 されたファイルデータをダウンロードする 場 合 ファイル 名 として ***.doc という 拡 張 子 を 持 つ 名 称 を 与 えます ダウンロードAPIでは ファイルの 拡 張 子 を 判 断 してMIMEコードを 決 定 しますので ダウンロードしたコンピュータに Word がインストールされている 場 合 には ブラウザ 内 にドキュメントが 表 示 されますし Word がインストールされていない 場 合 には フ ァイルを 保 存 するためのダイアログボックスが 表 示 されます プログラミングガイド - ページベース 開 発 モデル 編 45

46 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 ファイルの 削 除 前 節 までで ファイルをアップロードすることと アップロードしたファイルをダウンロードすることができまし た しかし このままではアップロードされたファイルがStorage Serviceに 溜 まっていってしまうので ここ では アップロードされてStorage Service 上 に 保 存 されているファイルを 削 除 する 機 能 を 追 加 します < 削 除 用 リンクを 追 加 したプレゼンテーション ページ(filer.html)> 1: <HTML> 2: <HEAD> 3: <TITLE>File Center</TITLE> 4: </HEAD> 5: <BODY bgcolor="whitesmoke"> 6: <H2>Upload</H2> 7: <IMART type="form" action="action_upload" method="post" enctype="multipart/f orm-data"> 8: <INPUT type="file" name="local_file"> 9: <INPUT type="submit" value=" send "> 10: </IMART> 11: <HR> 12: <H2>File List</H2> 13: <TABLE> 14: <TR><TH>File Name</TH><TH></TH></TR> 15: <IMART type="repeat" list=flist item="rec"> 16: <TR> 17: <TD><IMART type="string" value=rec></imart></td> 18: <TD> 19: <IMART type="link" action="action_download" server_file=rec>do wnload</imart> 20: / <IMART type="link" action="action_remove" server_file=rec>rem ove</imart> 21: </TD> 22: </TR> 23: </IMART> 24: </TABLE> 25: </BODY> 26:</HTML> < 削 除 用 関 数 を 追 加 したファンクション コンテナ(filer.js)> 1: var flist, rec; 2: 3: // 画 面 初 期 化 4: function init(request){ 5: var root = new VirtualFile("filebox"); 6: 7: // 保 存 ディレクトリの 有 無 のチェック 8: if(! root.isdirectory()){ 9: root.makedirectories(); 10: } 11: 12: flist = root.files(); // ファイルリストの 取 得 13: } 14: 15: // 指 定 ファイルの 受 信 16: function action_upload(request){ 17: 46 intra-martベースモジュール/フレームワーク

47 1 Storage Serviceの 利 用 方 法 18: // パラメータ 情 報 (=RequestParameter オブジェクト)を 取 得 19: var parameter = request.getparameter("local_file"); 20: 21: // ファイルの 中 身 を 取 得 (バイナリ) 22: var filedata = parameter.getvalueasstream(); 23: 24: // ファイル 名 の 取 得 25: var filename = parameter.getfilename() 26: 27: // ファイルの 書 き 出 し 28: var vf = new VirtualFile("filebox/" + filename); 29: var res = vf.save(filedata); 30: 31: } 32: 33: // 指 定 ファイルの 送 信 34: function action_download(request){ 35: var fpath = new VirtualFile("filebox/" + request.server_file); // 取 得 36: Module.download.send(fpath.load(), request.server_file); // 送 信 37: } 38: 39: // 指 定 ファイルの 削 除 40: function action_remove(request){ 41: var fpath = new VirtualFile("filebox/" + request.server_file); // 取 得 42: fpath.remove(); // 削 除 43: } < 実 行 画 面 ( 結 果 )> 削 除 リンクをクリックすると 該 当 するファイルを 削 除 することができます プログラミングガイド - ページベース 開 発 モデル 編 47

48 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 VirtualFileのremove()メソッド ファイルを 削 除 するためのAPIです このAPIでは ファイルの 他 にディレクトリも 削 除 することができます ただし ディレクトリを 削 除 する 場 合 には 削 除 対 象 としているディレクトリ 内 にファイルやディレクトリが 存 在 せずに 空 である 必 要 がありますので 注 意 してください 画 面 遷 移 について このサンプルでは 画 面 遷 移 を 一 切 行 わずに1 画 面 ですべての 機 能 を 持 っています この 場 合 各 機 能 に 対 するリクエストや リクエスト 後 の 画 面 の 表 示 の 際 に リンクやフォームに 対 する page 指 定 を 行 わなくても 自 分 自 身 を 再 度 表 示 することができます 48 intra-martベースモジュール/フレームワーク

49 2 メール 送 信 2 メール 送 信 ここでは メールを 送 信 するための 画 面 を 作 成 します メールを 送 信 するためには conf/imart.xml 内 のSMTPサーバの 設 定 を 正 しく 行 ってください メール 送 信 フォームの 作 成 メールを 送 信 するためのフォームを 作 成 します プレゼンテーション ページのフォーム 内 には メール 送 信 に 必 要 な 送 信 先 アドレス 送 信 者 アドレス 件 名 本 文 を 登 録 するコントロールを 用 意 します また ファンクション コンテナでは 受 け 取 った 情 報 を 元 にしてMailSender APIを 利 用 してメール 送 信 を 行 うための 関 数 を 定 義 します <メール 送 信 用 フォームを 記 述 したプレゼンテーションページ(sender.html)> 1: <HTML> 2: <HEAD> 3: <TITLE>Mail Sender</TITLE> 4: </HEAD> 5: <BODY bgcolor="whitesmoke"> 6: <IMART type="form" action="action_send" method="post"> 7: To: <INPUT type="text" name="mail_to"><br> 8: From: <INPUT type="text" name="mail_from"><br> 9: Subject: <INPUT type="text" name="mail_subject"><br> 10: Message: <TEXTAREA name="mail_body" cols="40" rows="8"></textarea><br> 11: <INPUT type="submit" value=" send "> 12: </IMART> 13: </BODY> 14: </HTML> <メール 送 信 ロジックを 記 述 したファンクションコンテナ(sender.js)> 1: // メールの 送 信 2: function action_send(request){ 3: 4: // ロケールの 取 得 5: var locale = AccessSecurityManager.getSessionInfo().locale; 6: 7: // MailSender オブジェクトを 生 成 8: var mailsender = new MailSender(locale); 9: 10: // 送 信 情 報 の 設 定 11: mailsender.addto(request.mail_to); 12: mailsender.setfrom(request.mail_from); 13: mailsender.setsubject(request.mail_subject); 14: 15: // 本 文 の 設 定 16: mailsender.settext(request.mail_body); 17: 18: // メールの 送 信 19: if( mailsender.send() ){ 20: // 送 信 成 功 21: Module.alert.reload("SYSTEM.SUCCESS", 22: "メールを 送 信 しました "); プログラミングガイド - ページベース 開 発 モデル 編 49

50 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 23: } 24: else{ 25: // 送 信 失 敗 26: Module.alert.reload("SYSTEM.ERR", 27: mailsender.geterrormessage()); 28: } 29: 30: } < 実 行 画 面 ( 結 果 )> フォーム 中 の 必 要 事 項 をすべて 入 力 した 後 に[send]ボタンをクリックするとメールを 送 信 することがで きます MailSender API メールを 送 信 するためのAPIです サンプルでは 送 信 先 送 信 者 件 名 本 文 の 設 定 しか 行 っていませんが CCやBCCの 設 定 をする こともできます TO および From 設 定 方 法 MailSenderオブジェクトを 利 用 することで 送 信 先 や 送 信 者 またCCやBCCなどの 設 定 には メール アドレスだけではなく 名 前 も 設 定 することができます 詳 しくはAPIリストを 参 照 してください メール 送 信 とサーバ 処 理 速 度 メールを 送 信 する 場 合 intra-mart Application ServerとSMTPサーバが 連 携 する 必 要 があります 送 信 するメールの 情 報 量 はもちろんのこと ネットワーク 環 境 やネットワークトラフィックなどによりメー ル 送 信 処 理 時 間 がかかる 場 合 があります 50 intra-martベースモジュール/フレームワーク

51 2 メール 送 信 添 付 ファイル 付 きメールの 送 信 前 節 で 作 成 したメール 送 信 フォームを 改 良 して 添 付 ファイルをメール 本 文 と 共 に 送 信 できるようにしま す プレゼンテーションページでは 添 付 ファイルをアップロードするためのフォーム コントロールを 追 加 し フォームの 属 性 を 変 更 します ファンクションコンテナは フォームの 修 正 に 合 わせて メール 送 信 関 数 を 添 付 ファイルに 対 応 できるよう に 修 正 します <ファイルアップロード 用 コントロールを 追 加 したプレゼンテーションページ(sender.html)> 1: <HTML> 2: <HEAD> 3: <TITLE>Mail Sender</TITLE> 4: </HEAD> 5: <BODY bgcolor="whitesmoke"> 6: <IMART type="form" action="action_send" method="post" enctype="multipart/form-data"> 7: To: <INPUT type="text" name="mail_to"><br> 8: From: <INPUT type="text" name="mail_from"><br> 9: Subject: <INPUT type="text" name="mail_subject"><br> 10: Attachment: <INPUT type="file" name="mail_file"><br> 11: Message: <TEXTAREA name="mail_body" cols="40" rows="8"></textarea><br> 12: <INPUT type="submit" value=" send "> 13: </IMART> 14: </BODY> 15: </HTML> ファイルをアップロードするためのフォーム ファイルをアップロードするためには 以 下 のようなフォームの 記 述 が 必 要 になります <IMART type="form" method="post" enctype="multipart/form-data"> こうすることで サーバー 上 では フォームコントロール <INPUT type="file"> によりローカルのファイル を 受 け 取 ることができます < 添 付 ファイル 送 信 に 対 応 したファンクションコンテナ(sender.js)> 1: // メールの 送 信 2: function action_send(request){ 3: 4: // ロケールの 取 得 5: var locale = AccessSecurityManager.getSessionInfo().locale; 6: 7: // MailSender オブジェクトを 生 成 8: var mailsender = new MailSender(locale); 9: 10: // 送 信 情 報 の 設 定 11: mailsender.addto(request.mail_to); 12: mailsender.setfrom(request.mail_from); 13: mailsender.setsubject(request.mail_subject); 14: 15: // 添 付 ファイルの 設 定 (RequestParameter オブジェクトとして 取 得 ) 16: var parameter = request.getparameter("mail_file"); 17: 18: if( parameter!= null && parameter.getlength() > 0 ) { 19: プログラミングガイド - ページベース 開 発 モデル 編 51

52 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 20: // ファイル 名 の 取 得 21: var filename = parameter.getfilename() 22: 23: // ファイルの 中 身 を 取 得 (バイナリ) 24: var filedata = parameter.getvalueasstream(); 25: 26: // 添 付 ファイルの 設 定 27: mailsender.addattachment(filename, filedata); 28: 29: } 30: 31: // 本 文 の 設 定 32: mailsender.settext(request.mail_body); 33: 34: // メールの 送 信 35: if( mailsender.send() ){ 36: // 送 信 成 功 37: Module.alert.reload("SYSTEM.SUCCESS", 38: "メールを 送 信 しました "); 39: } 40: else{ 41: // 送 信 失 敗 42: Module.alert.reload("SYSTEM.ERR", 43: mailsender.geterrormessage()); 44: } 45: 46: } < 実 行 画 面 ( 結 果 )> 添 付 ファイルとメール 送 信 速 度 ファイルを 添 付 してメール 送 信 する 場 合 RFCの 規 約 によりファイルのデータそのものをエンコードした のちにメール 本 本 も 含 めたメール 情 報 全 体 をエンコードしてからSMTPサーバに 対 して 送 信 する 必 要 があります このデータのエンコード 処 理 に 関 してはMailSender APIIが 自 動 的 に 行 ってくれますが エ ンコード 処 理 時 には アプリケーションサーバに 高 負 荷 がかかってしまいます 52 intra-martベースモジュール/フレームワーク

53 2 メール 送 信 添 付 ファイルと 処 理 速 度 添 付 ファイルを 送 信 する 場 合 ブラウザがWebサーバに 対 してファイルデータを 送 信 し その 情 報 を 受 信 したアプリケーションサーバがメール 送 信 処 理 を 行 います 1つのメール 送 信 に 対 して 複 数 のネットワークを 介 しますので サイズの 大 きなファイルを 添 付 してメー ル 送 信 する 場 合 には メール 送 信 処 理 に 時 間 がかかってしまう 場 合 があります プログラミングガイド - ページベース 開 発 モデル 編 53

54 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 3 拡 張 <IMART>タグ 機 能 の 使 用 例 拡 張 <IMART>タグとは intra-mart 側 で 既 に 用 意 されている<IMART>タグ 以 外 に 独 自 の 機 能 を 持 つ 任 意 の<IMART>タグを 定 義 できる 機 能 です 具 体 的 には <IMART>タグに 対 して 新 しいtype 属 性 を 定 義 し そのtype 属 性 が 要 求 された 時 に 実 際 に 処 理 を 実 行 するタグ 関 数 を 登 録 することで プレゼンテーション ページ 内 で 利 用 できるAPIを 拡 張 できる 機 能 です (<IMART type="xxx">のxxxの 部 分 をユーザ 独 自 に 定 義 することができます ) タグの 定 義 と 登 録 ファンクションコンテナに 拡 張 <IMART>タグの 処 理 関 数 を 記 述 します 同 時 に 関 数 とtype 属 性 での 呼 び 出 しキーワードを 登 録 します このファイルは 1 度 だけ 実 行 されればImartオブジェクトに 対 して 情 報 が 登 録 され 以 降 プレゼンテーション ページ 内 では いつでも 利 用 可 能 になります(このことから 通 常 初 期 起 動 時 に1 度 だけ 実 行 されるようにします) 1: // 関 数 と 呼 び 出 しキーワードの 登 録 2: // 呼 び 出 しキーワードNOW_DATEに 対 して 実 行 関 数 nowdate()を 3: // 登 録 します 4: Imart.defineType("JP_DATE", jpdate); 5: 6: // 実 行 関 数 の 定 義 7: // 引 数 oattr : タグ 属 性 引 数 群 オブジェクト 8: // oinner: <IMART> および </IMART> に 挟 まれた 部 分 9: // 返 却 HTMLソース 10: // 概 要 <IMART type="jp_date"> の 処 理 実 行 関 数 11: // 属 性 date に 指 定 された 日 付 データをフォーマット 12: // 変 換 して 表 示 します 13: function jpdate(oattr, oinner){ 14: var target = oinner.date; // 表 示 対 象 時 間 15: var format = "yyyy 年 MM 月 dd 日 hh 時 mm 分 ss 秒 "; // 表 示 形 式 16: var src = Format.fromDate(format, target); // 表 示 文 字 列 17: 18: // <IMART type="now_date"> および </IMART> に 挟 まれた 部 分 の 19: // プレゼンテーション ページ 内 ソースの 解 釈 と 実 行 および 20: // 表 示 ソースの 取 得 21: var sub = oinner.execute(); 22: 23: // 表 示 ソースの 返 却 24: return src + sub; 25: } この 拡 張 <IMART>タグ 実 行 関 数 が 返 却 した 文 字 列 が HTMLソースとしてブラウザに 送 信 されることに なります また 必 ず 文 字 列 を 返 却 しなければなりません 54 intra-martベースモジュール/フレームワーク

55 3 拡 張 <IMART>タグ 機 能 の 使 用 例 拡 張 <IMART>タグの 利 用 sample.html 使 用 するには プレゼンテーション ページ 内 で 拡 張 <IMART>タグを 記 述 します <IMART type="now_date" date=now></imart> 実 行 されると ファンクション コンテナからバインドされた 日 付 オブジ ェクトの 内 容 ( 実 行 時 の 日 付 および 時 間 )が 表 示 されます sample.js 拡 張 <IMART>タグに 対 してバインドする 日 付 データを 作 成 します var now; // バインド 変 数 function init(request){ now = new Date(); // 現 在 の 時 間 情 報 の 取 得 } 詳 細 については APIリスト アプリケーション 共 通 モジュール の Imart.defineType() を 参 照 してください 拡 張 <IMART>タグについて <IMART type="xxx">の"xxx" 部 分 をユーザ 独 自 に 定 義 することができます 詳 細 は APIリスト の 画 面 共 通 モジュールの 拡 張 <IMART>タグ 項 を 参 照 してください <IMART>タグへの 定 数 値 の 設 定 あらかじめユーザが 設 定 した 定 数 または 関 数 を<IMART>タグの 属 性 で 指 定 したキーワードで 呼 び 出 すことができます 詳 細 は APIリスト のimartオブジェクトの 次 のメソッドを 参 照 してください Imart.defineAttribute(sKeyWord, data) Imart.defineAttribute(sKeyWord, function) プログラミングガイド - ページベース 開 発 モデル 編 55

56 第 3 章 さまざまなコンポーネント 群 (im-bizapi)の 利 用 4 ユーザ 定 義 関 数 の 登 録 と 利 用 intra-martベースモジュールを 利 用 した 開 発 では JavaScriptで 記 述 したユーザ 定 義 関 数 を グローバ ル 関 数 として 登 録 する 方 法 があります Procedure.define() メソッドを 使 い グローバル 関 数 として 登 録 すると 多 少 メモリを 消 費 しますが 関 数 をメモリに 保 持 するため 実 行 速 度 は 速 くなります 以 下 に ユーザ 定 義 関 数 をグローバル 関 数 として 登 録 利 用 する 方 法 について 説 明 を 行 います Procedure.define() メソッドの 詳 細 については APIリスト アプリケーション 共 通 モジュール の Procedure を 参 照 してください <ユーザ 定 義 関 数 の 利 用 形 態 > グローバル 関 数 としての 登 録 呼 び 出 し ユーザ 定 義 関 数 を 任 意 のjsファイルに 作 成 し メモリ 上 に 格 納 されるよう 初 期 設 定 ファイル(init.js)に 記 述 をします これによって intra-mart 起 動 時 にユーザ 定 義 関 数 がメモリ 上 に 格 納 され ファンクショ ン コンテナ(アプリケーションjsファイル)からダイレクトにメモリに 呼 び 出 しがかかるようになります ユー ザ 定 義 関 数 の 呼 び 出 しは ファンクション コンテナに 記 述 を 行 います 1 任 意 のjsファイルにユーザ 定 義 関 数 を 格 納 する ここでは 例 として library/common.jsファイル に 共 通 関 数 addvariables() を 作 るものとします グロ ーバルユーザ 定 義 関 数 を 格 納 するjsファイルに 以 下 のように Procedure.define()メソッドを 使 用 した 記 述 をします <ユーザ 定 義 関 数 をjsファイルへ 格 納 する 記 述 > // 共 通 関 数 として 登 録 する Procedure.define("addVariables", addvariables); // 共 通 関 数 作 成 function addvariables( valuea, valueb ) { return valuea + valueb; } 56 intra-martベースモジュール/フレームワーク