intra-mart準拠の関数でAjaxを実装するかjQueryを使うか

2020年01月07日 00時01分

今日はイントラマートネタです。(intra-mart とどっちがいいのか迷っています。

イントラマートは web アプリなのですが、バックエンド側を Java で書くのか JavaScript で書くのかの 2 つあり、今回は JavaScript 側での実装を想定しています。(スクリプト開発)

Ajax 自体は jQuery で実装できますが、intra-mart の場合はグローバル関数にimspAjaxSendimuiAjaxSendがあります。

これらの関数は jQuery 準拠の挙動を示すのですが、サクッと実装するのであればグローバル関数を使用すると良いと思います。ただ、基本的には jQuery の実装をしておいた方がバージョンアップ時に苦しまないかなぁという印象でした。

intra-mart 準拠のものについて

intra-mart 自体の web 上の資料が差分が見れないこともあり使用するか迷いましたが、実装が楽できるから下記の2つの理由の場合は利用していました。

1.ファンクションコンテナ側の action 処理を指定して post したい場合

2.post 後の挙動が複雑ではない場合

になります。

action で指定して post したい場合

intra-mart はページロード時に、ファンクションコンテナ側の init()が必ず実行されます。

そのため、Ajax で post を行う時には init()内に処理を用意しておくか、init()実行前に割り込んで処理を実行する action 処理を利用して実装を行っていきます。

jQuery の$.ajax()でもファンクションコンテナ側の処理は変わらないのですが、ルーティングテーブルに URL と action 属性を別途指定する必要があり、ケースバイケースになりそうです。

init に実装しても良いですが(実装例ではそうしてある)、できるだけロジックを分離しておきたいので。

なお、アクション処理実行後に init()はロードされますが、httpRespons のsendMessageBodyStringの後の関数は実行されないので、処理がプレゼンテーションページに返ります。

post 後の挙動が複雑ではない場合

intra-mart のバージョン 8.0.8 未満では送信成功、失敗のコールバック関数が呼べないので、上記のような条件をつけました。(ver8.0.8 から対応)

送信完了のコールバック関数はあるので、受け取ったオブジェクトから条件を判定して処理を書く感じになりました。

imuiAjaxSend ( "#form", "post", "json",
  function(jqXHR){
   //送信前の処理を書く(ロード画面を見せる等)
  },
  function(jqXHR){
  //送信完了時の処理を書く。ifで成功、失敗を書く感じ…
  });

サーバーサイドの実装は公式ページが参考になります。

(intra-mart Accel Platform UI デザインガイドラインajax の実装例)

<pre class="wp-block-preformatted"><strong>function</strong> init(request) {
    ...
    response.setContentType('application/json; charset=utf-8');
    ...
    <strong>var</strong> resultObject = SomeAPI.doSomething();
    <strong>if</strong> (resultObject.error) {
        <em>// 処理が失敗した場合</em>
        response.sendMessageBodyString(
            ImJson.toJSONString({
                error: resultObject.error,
                errorMessage: resultObject.message,
                detailMessages: ['管理者にお問い合わせください', '連絡先:admin@xxx.xxx.xxx']
            })
        );
    }

    <em>// 処理が成功した場合</em>
    response.sendMessageBodyString(
        ImJson.toJSONString({
            error: <strong>false</strong>,
            errorMessage: '',
            successMessage: '登録しました',
            parameter:{
                param1: 'value1',
                param2: 'value2',
                array1: ['array1', 'array2', 'array3']
            }
        })
    );
}

感想:工数によっては自前で実装した方がいいかなぁ

まとまってしまいましたが、フレームームワークなのでバージョンアップの問題が関わってきます。特に intra-mart はビジネス基盤で長い期間の利用を想定するとバージョンアップで推奨ではなくなる可能性がある要素はできるだけ排除しておきたいというのがあります。(ドキュメント類を見ると結構非推奨が増えてる)

フレームームワークに乗っかると通知や管理は楽で誰が実装しても近い仕上がりになるので、品質を揃えたい場合はグローバル関数を利用するのも視野に入ってきます。…というフレームームワークを利用しているとあるあるな感じのまとまり方です。