プログラミング]ワークフロー業務アプリケーションで「イントラマート」というものがあります。Java開発やスクリプト開発以外でノンプログラミングによる標準機能でフローを作れるのは魅力的です。申請・承認画面を部品を配置して簡単に作り出すことができますし、そのままワークフローの承認ルートに載せることもできます。プログラミング知識がない方でもすぐに帳票を作り出すことができ、非常に汎用性は高いです。用意されている部品や機能もそこそこ使えるので、基本的に設定するだけでできてしまいます。帳票画面のデザイン・レイアウトを自由にカスタマイズしたいという場合には向きません。実装するものによってはスクリプトを使ってゴリゴリコーディングしなくてはならなかったり、そもそも実装が不可能だったり、レスポンスが悪くなったりしてユーザビリティーが低くなることもあります。FormaアプリでAjax処理を実装するにはFormaアプリ単体では自由にAjax処理を実装することができません。私は自由にカスタマイズしたい派なので、Formaアプリはあまり使わず、Java開発で様々な機能を実装しますが、ちょっとした小規模なコンテンツを作るにはJava開発だとコストインパクトがかかりすぎてしまいます。できればFormaアプリとちょっとした実装で片づけてしまいたい案件もあると思います。Formaアプリだけでは解決が難しいので、今回はスクリプト開発を利用して実現させてみたいと思います。スクリプト開発でhtmlファイルをマッピングする方法Java開発よりはスクリプト開発の方が開発コストが少なく、初心者でも比較的に簡単に実装ることができます。設定ファイルとして使用するxmlにURLとファイルパスを記述するだけである。resinサーバのディレクトリにhtmlファイルを配置します。class="imui-form-container-narrow"><p>このhtmlファイルはダミーとして使用します</p></div></body></html>Ajax処理実装による遷移先ページを生成します。「resin-pro¥webapps¥imart¥WEB-INF¥jssp¥src」に、「ajaxtest」というフォルダを作成し、そのフォルダ内にこのサンプルのhtmlファイルを配置しましょう。文字コードはBOMなしのUTF-8にします。htmlファイルを配置しただけでは、イントラマート上ではページコンテンツとして生成されません。次に、ファイルマッピングを行ない、イントラマートのURLにhtmlを公開してあげましょう。以下のサンプルプログラムを利用して下さい。/></routing-jssp-config>この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」に配置します。配置が完了したらイントラマートを再起動しましょう。http://localhost:8080/imart/recieveAjaxを開くと上記の画面が表示されるようになります。このページをAjax処理の遷移先ページとして利用します。Ajax処理ではレスポンス取得するには遷移先のページ情報が空でなくてはなりません。htmlファイルだけの実装では、ページ情報が空出ないので、HTMLタグの文字列がすべて取れてしまったり、エラーになったりしてしまいますね。Ajax処理用のスクリプトをサーバーサイドJSとして配置するここまでの手順だけではイントラマート上にひとつページを公開しただけに過ぎません。次に実装したhtmlベースのページにJavaScriptを実装します。ここでいうJavaScriptはサーバーサイドで動作するJSであり、クライアントサイドのプログラムではありません。実装方法ですが、htmlファイルと同名にします。charset=UTF-8");response.sendMessageBodyString(jsonString);}このJSファイルをhtmlと同じフォルダ階層に配置することで、ウェブコンテンツの動作が変化します。イントラマートではjsファイルにinitメソッドを定義した場合、htmlファイル呼出しの前処理でinitメソッド内のプログラムを優先的に動作させることができます。スポンサードリンクちなみに引数のrequestは送信元ページからのPOSTデータが含まれます。仕組みとしては、POSTデータを取得して、最終的にJSON形式により、レスポンスを返します。最後の4行の処理が最も重要で、このImJsonというAPIで、返したい情報をJSON形式に変換し、Web.getHTTPResponse()の機能のsendMessageBodyStringによって、レスポンスを返すことができます。charset=UTF-8");response.sendMessageBodyString(jsonString);試しにこのjsファイルを配置した状態で、先ほどの画面を表示させてみましょう。htmlファイルの情報が呼び出されず、白紙のページでレスポンス文字列だけが表示されるようになります。sendMessageBodyStringを利用することで、レスポンスを返すことができます。これでAjax処理用のページは用意できました。htmlファイルの必要性さてここで少し疑問になるのが、htmlファイルの存在です。jsファイルを利用してAjaxのレスポンスを返しているわけなので、htmlファイルは不要なんじゃないの?と思う方も多いことでしょう。確かにAjax処理ではレスポンス文字列を返す記述があり、そのページが空ページであれば良い。ところが、イントラマートのスクリプト開発の仕組みはhtmlファイルをベースとしてURLを生成し、ウェブコンテンツを公開します。今回用意したforma.htmlファイルをサーバから削除してしまうと、500エラーになってしまいます。ファイルマッピングをする場合、必ずhtmlファイルが必要になるのです。forma.htmlは実体はありますが、ダミーファイルとして必要不可欠なんです。Formaアプリのフォーム編集でAjax処理を実装Formaのフォーム画面編集で適当にコントロールを配置して、画面を作成します。それぞれnameの属性値は上図のように設定します。「申請」ボタンはワークフロー処理の「申請」実行のコントロールです。Ajax処理を実装するには、「イベントボタン」のスクリプトを利用します。このスクリプトの枠内に以下のソースコードを記述します。function(res){$("[name='outputBox1']").val(res.outputBox1);$("[name='outputBox2']").val(res.outputBox2);}});とてもシンプルな構文ですが、ajax関数でPOST形式を指定し、スクリプト開発で用意したページを遷移先に指定します。dataにはセレクトボックスの値をセットし、この状態でAjax処理を実行します。「出力値1」と「出力値2」の両方のテキストボックスに値を表示させるというものです。Formaアプリでスクリプト開発で実装したAjax処理を動作させる実際に動かしてみると以下のようになります。「非同期で値取得」ボタンをクリックすると、サーバサイドJSをロードして、レスポンスを返してくれます。JSON形式でレスポンスを取得して、上の画面のように値を出力させることができます。あとはサーバサイドのJSで思い通りにイントラマートのスクリプト開発用のAPIを利用すれば、Forma画面で様々な機能を盛り込むことができますね。最新の記事よっきパソコンが大好きな青年。職業はプログラマ/SE。フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。最終更新日:2017年8月17日コメントを残す返信をキャンセルする。published)サイト上に表示された文字を入力してください。業:IT系の講師/フリーランスJavaやPHPなどを中心にWEB系エンジニアとして活動しています。自作PCの魅力にハマり、何台も組み立て経験は豊富。自作PCアドバイザー的なこともやってるので、気軽にご相談下さい!!趣味でホームページ制作をしています。お仕事の依頼をしてみませんか?WordPressテーマ・プラグイン開発、自作PC組立代行などお仕事の依頼はこちらでお願いします。Reserved.このページの先頭へ。