スポンサードリンク


イントラマートのFormaアプリでAjax処理を実装!スクリプト開発のファイルマッピングで応用!サーバサイドJSでレスポンスを取得するサンプル!

    ワークフロー業務アプリケーションで「イントラマート」というものがあります。
    Java開発やスクリプト開発以外でノンプログラミングによる標準機能でフローを作れるのは魅力的です。

    ノンプログラミングの場合、Formaアプリという機能を利用することで、
    申請・承認画面を部品を配置して簡単に作り出すことができますし、そのままワークフローの承認ルートに載せることもできます。

    イントラマート Formaアプリ

    プログラミング知識がない方でもすぐに帳票を作り出すことができ、非常に汎用性は高いです。
    用意されている部品や機能もそこそこ使えるので、基本的に設定するだけでできてしまいます。

    ところが、Formaアプリをベースとしてウェブコンテンツを制作する場合、
    他のコンテンツと連携したり、外部から自由に値を取得したり、
    帳票画面のデザイン・レイアウトを自由にカスタマイズしたいという場合には向きません。

    実装するものによってはスクリプトを使ってゴリゴリコーディングしなくてはならなかったり、
    そもそも実装が不可能だったり、レスポンスが悪くなったりしてユーザビリティーが低くなることもあります。

     

    FormaアプリでAjax処理を実装するには

    Formaアプリ単体では自由にAjax処理を実装することができません。

    私は自由にカスタマイズしたい派なので、Formaアプリはあまり使わず、
    Java開発で様々な機能を実装しますが、ちょっとした小規模なコンテンツを作るにはJava開発だとコストインパクトがかかりすぎてしまいます。

    できればFormaアプリとちょっとした実装で片づけてしまいたい案件もあると思います。
    Formaアプリだけでは解決が難しいので、今回はスクリプト開発を利用して実現させてみたいと思います。

     

    スクリプト開発でhtmlファイルをマッピングする方法

    Java開発よりはスクリプト開発の方が開発コストが少なく、初心者でも比較的に簡単に実装ることができます。

    流れは、htmlファイルをサーバ上に配置して、
    設定ファイルとして使用するxmlにURLとファイルパスを記述するだけである。

    まずは、resinサーバのディレクトリにhtmlファイルを配置します。

    forma.html

     

    Ajax処理実装による遷移先ページを生成します。
    まずは「resin-pro¥webapps¥imart¥WEB-INF¥jssp¥src」に、「ajaxtest」というフォルダを作成し、
    そのフォルダ内にこのサンプルのhtmlファイルを配置しましょう。

    文字コードはBOMなしのUTF-8にします。

    htmlファイルを配置しただけでは、イントラマート上ではページコンテンツとして生成されません。

    次に、ファイルマッピングを行ない、イントラマートのURLにhtmlを公開してあげましょう。

     

    以下のサンプルプログラムを利用して下さい。

    ajaxtest.xml

     

    このxmlファイルの名称は任意で構いませんが、上記のソースコードは改変せずに利用します。

    ファイルを配置する前に記述している内容を簡単に紹介します。

    ヘッダの<?xml … ?>はxmlファイル共通の記述です。

    <authz-default>タグの記述はイントラマートの認可の設定になります。
    実装するページコンテンツの表示権限を設定するタグになりますが、今回はwelcome-allを指定し、誰でも見れるようにします。

    <file-mapping>タグがサーバに配置したhtmlなどのコンテンツを公開するための記述で、最も重要なものです。

    属性値のpathはURLの設定の記述です。
    例のように、/recieveAjaxと記述すれば、http://localhost:8080/imart/recieveAjaxというURLで公開されます。

    属性値のpageはサーバ上のウェブコンテンツのファイルパスを指定する記述です。
    例では、/ajaxtest/formaとなっていますが、これはjssp内のsrcをルートディレクトリとして、
    その階層内に入っているファイルオブジェクトを指定します。

    尚、ajaxtestはフォルダで、formaの部分はhtmlファイル名の記述となります。

    なので先に配置したhtmlファイルを指定するための記述になります。

    あとはこのxmlをサーバの「resin-pro¥webapps¥imart¥WEB-INF¥conf¥routing-jssp-config」に配置します。
    配置が完了したらイントラマートを再起動しましょう。

    イントラマート file-mapping

    http://localhost:8080/imart/recieveAjaxを開くと上記の画面が表示されるようになります。
    このページをAjax処理の遷移先ページとして利用します。

    尚、Ajax処理ではレスポンス取得するには遷移先のページ情報が空でなくてはなりません。
    htmlファイルだけの実装では、ページ情報が空出ないので、HTMLタグの文字列がすべて取れてしまったり、
    エラーになったりしてしまいますね。

     

    Ajax処理用のスクリプトをサーバーサイドJSとして配置する

    ここまでの手順だけではイントラマート上にひとつページを公開しただけに過ぎません。

    次に実装したhtmlベースのページにJavaScriptを実装します。
    ここでいうJavaScriptはサーバーサイドで動作するJSであり、クライアントサイドのプログラムではありません。

    実装方法ですが、htmlファイルと同名にします。

    forma.js

    このJSファイルをhtmlと同じフォルダ階層に配置することで、
    ウェブコンテンツの動作が変化します。

    イントラマートではjsファイルにinitメソッドを定義した場合、
    htmlファイル呼出しの前処理でinitメソッド内のプログラムを優先的に動作させることができます。

     

    スポンサードリンク

     

    ちなみに引数のrequestは送信元ページからのPOSTデータが含まれます。

    仕組みとしては、POSTデータを取得して、最終的にJSON形式により、レスポンスを返します。

    最後の4行の処理が最も重要で、
    このImJsonというAPIで、返したい情報をJSON形式に変換し、
    Web.getHTTPResponse()の機能のsendMessageBodyStringによって、レスポンスを返すことができます。

     

    試しにこのjsファイルを配置した状態で、先ほどの画面を表示させてみましょう。

    イントラマート スクリプト開発

    htmlファイルの情報が呼び出されず、白紙のページでレスポンス文字列だけが表示されるようになります。
    sendMessageBodyStringを利用することで、レスポンスを返すことができます。

    これでAjax処理用のページは用意できました。

     

    htmlファイルの必要性

    さてここで少し疑問になるのが、htmlファイルの存在です。
    jsファイルを利用してAjaxのレスポンスを返しているわけなので、htmlファイルは不要なんじゃないの?と思う方も多いことでしょう。

    確かにAjax処理ではレスポンス文字列を返す記述があり、そのページが空ページであれば良い。

    ところが、イントラマートのスクリプト開発の仕組みはhtmlファイルをベースとして
    URLを生成し、ウェブコンテンツを公開します。

    なので、今回用意したforma.htmlファイルをサーバから削除してしまうと、500エラーになってしまいます。
    ファイルマッピングをする場合、必ずhtmlファイルが必要になるのです。

    forma.htmlは実体はありますが、ダミーファイルとして必要不可欠なんです。

     

    Formaアプリのフォーム編集でAjax処理を実装

    Formaのフォーム画面編集で適当にコントロールを配置して、画面を作成します。

    イントラマート Forma開発

    それぞれnameの属性値は上図のように設定します。

    「非同期で値取得」のボタンはツールキットの「イベントボタン」アイテムで、
    「申請」ボタンはワークフロー処理の「申請」実行のコントロールです。

    Ajax処理を実装するには、「イベントボタン」のスクリプトを利用します。

    イントラマート Forma開発

    このスクリプトの枠内に以下のソースコードを記述します。

    とてもシンプルな構文ですが、ajax関数でPOST形式を指定し、
    スクリプト開発で用意したページを遷移先に指定します。

    dataにはセレクトボックスの値をセットし、この状態でAjax処理を実行します。

    あとは取得したレスポンス文字列を受け取り、
    「出力値1」と「出力値2」の両方のテキストボックスに値を表示させるというものです。

     

    Formaアプリでスクリプト開発で実装したAjax処理を動作させる

    実際に動かしてみると以下のようになります。

    スクリプト開発 Forma

    スクリプト開発 Forma

    「非同期で値取得」ボタンをクリックすると、サーバサイドJSをロードして、
    レスポンスを返してくれます。

    スクリプト開発 Forma

    JSON形式でレスポンスを取得して、上の画面のように値を出力させることができます。

    あとはサーバサイドのJSで思い通りにイントラマートのスクリプト開発用のAPIを利用すれば、
    Forma画面で様々な機能を盛り込むことができますね。

    例えば、ActiveDirectoryのデータベースからユーザ情報を取得して、
    イントラマートのユーザとして新規登録するというロジックも作れるんじゃないかな?

      The following two tabs change content below.
      よっき
      パソコンが大好きな青年。職業はプログラマ。 幼少期からパソコンが好きで、趣味がそのまま仕事になりました。 主にウェブ系コンテンツの開発が中心です。 自作PCの魅力に惹かれたのは学生時代の頃で、現在に至ります。 自作PC専門ブログで、お得な情報を紹介しています。 趣味はホームページ制作かな。起業を夢見て奮闘中の毎日!

      スポンサードリンク


      コメントを残す




      *

      このページの先頭へ