intra-mart Accel Platform スクリプト開発モデル プログラミングガイド 第15版 2018-08-01

基本( intra-mart Accel Platform での初めてのプログラミング)

本項では、 intra-mart Accel Platform での開発の導入として、 intra-mart e Builder for Accel Platform でスクリプト開発を利用した Hello World を作成することによって intra-mart Accel Platform でのスクリプト開発の流れを体験します。

前提条件

  • intra-mart e Builder for Accel Platform をインストール済みであること。

  • intra-mart Accel Platform をインストールし、初期設定までが完了していること。

    ベースモジュールにスクリプト開発フレームワークを含めて環境を作成してください。
    開発環境の Resin サーバは単体テスト用で作成してください。

intra-mart e Builder for Accel Platform で Hello World を作ろう

以下の手順で Hello World を作成していきます。

ステップ1:プロジェクトの作成と設定

intra-mart e Builder for Accel Platform 上にモジュール・プロジェクトを作成し、プロジェクトの設定を行います。
プロジェクトの作成・設定の方法に関しては、『 intra-mart e Builder for Accel Platform アプリケーション開発ガイド』の『モジュール・プロジェクト作成』、および『プロジェクトの設定』の項を参照してください。

ステップ2:入力画面の作成

入力画面(input.html)を作成します。
プロジェクトの src/main/jssp/src/ の配下に helloworld/js/ という階層でフォルダを作成し、作成したフォルダ配下に「 input.html 」ファイルを作成し、 以下のように実装をします。
<!-- HEADタグ -->
<imart type="head">
  <title>Hello, World</title>
  <script type="text/javascript">
    $(function() {
      $('#button').click(function() {
        $('#hello_info').submit();
      });
    });
  </script>
</imart>

<!-- 画面上に表示されるタイトル -->
<div class="imui-title">
  <h1>Hello, World (スクリプト開発)</h1>
</div>

<!-- 入力画面 -->
<div class="imui-form-container-narrow">
  <p>
    <label>Please input the name. </label>
  </p>
  <!-- Formの設定 actionに出力結果のパスを入力 -->
  <form action="helloworld/output" name=form id="hello_info" method="post">
    <div>
      <!-- テキストボックスの設定 -->
      <imart type="imuiTextbox" id="name" name="name" size="10" ></imart>
    </div>
    <!-- submitボタンの設定 -->
    <imart type ="imuiButton" value="Hello!!" name="button" class="mt-10" id="button" inputType="submit"></imart>
  </form>
</div>

注意

文字コードを UTF-8 にして保存してください。

ステップ3:出力画面の作成

出力画面(output.html)を作成します。
プロジェクトの src/main/jssp/src/helloworld/js/ の配下に「 output.html 」という名前で作成し、以下のように実装をします。
<!-- HEADタグ -->
<imart type="head">
  <title>Hello, World</title>
  <script type="text/javascript">
    function back() {
      $('#back-form').submit();
    };
  </script>
</imart>

<!-- 画面上に表示されるタイトル -->
<div class="imui-title">
  <h1>Hello, World (スクリプト開発)</h1>
</div>

<!-- ツールバー(前の画面へと戻るボタンを配置) -->
<div class="imui-toolbar-wrap">
  <div class="imui-toolbar-inner">
    <ul class="imui-list-toolbar">
      <li>
        <!-- 「戻る」ボタンのアイコンを作成 JavaScriptの関数を呼び出す -->
        <a href="javascript:back();" class="imui-toolbar-icon" title="back">
          <span class="im-ui-icon-common-16-back"></span>
        </a>
      </li>
    </ul>
  </div>
</div>

<!-- 出力結果 -->
<div class="imui-form-container-narrow">
  <label> <imart type="imuiTextbox" id="result"
      name="result" value=name class="imui-text-readonly" readonly />
  </label>
</div>

<!-- 「戻る」ボタンのフォーム情報 actionに入力画面のパスを設定する。-->
<form id="back-form" name="backForm" action="helloworld/input"
  method="POST"></form>

コラム

intra-mart Accel Platform 上で動作する HTML ファイルに記述するタグで
<HTML> 、 <BODY> は記述せず、<HEAD> は <imart type=”head”> を利用してください。
詳細は、 UI(デザインガイドライン) を参照してください。

注意

文字コードを UTF-8 にして保存してください。

ステップ4:入力画面処理の作成

入力画面の初期化処理を行う JS ファイル(input.js)を実装します。
プロジェクトの src/main/jssp/src/helloworld/js/ の配下に「 input.js 」という名前で作成し、以下のように実装をします。
/**
 * Hello Worldでは特別に処理を行わないため未処理
 * 初期化等が必要な場合はinit()にその処理を記述していく。
 */
function init(request) {

}

注意

文字コードを UTF-8 にして保存してください。

ステップ5:出力画面処理の作成

入力情報に対する結果表示処理を行う JS ファイル(output.js)を実装する。
プロジェクトの src/main/jssp/src/helloworld/js/ の配下に「 output.js 」という名前で作成し、以下のように実装をします。
/**
 * 出力結果のバインド変数
 */
var name;

/**
 * 初期表示
 * 名前を渡す
 */
function init(request) {
  name = 'Hello, ' + request['name'];     // 出力結果を作成し、バインド変数へ格納
}

注意

文字コードを UTF-8 にして保存してください。

ステップ6:ルーティング設定ファイルの作成

ルーティング用の xml ( helloworld.xml )を作成します。
プロジェクトの src/main/conf/routing-jssp-config/ の配下に helloworld.xml のファイルを作成し、以下のようにファイルのマッピング情報を記述します。
認可の設定に当たる authz-default の mapper 属性には “welcome-all” を設定します。
URLの設定に当たる file-mapping には、 path 属性に2つの画面のURLを、 page 属性に2つの画面のファイルパスをそれぞれ設定します。
<?xml version="1.0" encoding="UTF-8"?>
<routing-jssp-config 
  xmlns="http://www.intra-mart.jp/router/routing-jssp-config" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd ">

  <authz-default mapper="welcome-all" />

  <file-mapping path="/helloworld/input" page="/helloworld/js/input" />
  <file-mapping path="/helloworld/output" page="/helloworld/js/output" />
</routing-jssp-config>

コラム

ルーティングの設定の詳細に関しては、 ルーティング を参照してください。

注意

文字コードを UTF-8 にして保存してください。
ここまでスクリプト開発のサンプルの作成が完了となります。
ここまで作成されたソースは、プロジェクトの設定によって Resin サーバ上のフォルダに適切にデプロイされています。
本番環境に移行する際は、作成したプロジェクトをユーザ定義モジュール化、または、ソースをデプロイして適用を行ってください。

登録と画面表示

ステップ1:メニューの登録

ここでは、上記で作成したサンプルをサイトマップに登録して実際に実行します。
Resin を起動し、テナント管理者で intra-mart Accel Platform にログインします。
ログイン画面の URL は「 http://<HOST>:<PORT>/<CONTEXT_PATH>/login 」となります。
その後、「メニュー設定」画面を表示し、メニューを以下のように設定します。
Hello World メニュー登録
ここで作成する新規アイテムの情報に以下の情報を入力します
メニューアイテム名(日本語) Hello World for JavaScript
URL helloworld/input
また、メニューを閲覧できるようにするために作成した「Hello」グループに以下のように認可を設定します。
本項では、Hello グループに対してゲストユーザと認証ユーザの参照を許可するように設定します。
詳細については 認可 を参照してください。
Helloグループの認可設定

ステップ2:Hello Worldの動作

設定したメニューを反映させ、実行します。
下の画像のようにサイトマップから選択できます。
サイトマップ画面
サイトマップで先ほど登録したメニューアイテムをクリックすると入力画面が表示されます。
入力画面
テキストボックスに名前を入力すると結果画面に表示されます。
結果表示画面
結果画面の上部にある「戻る」アイコンを押下すると、入力画面へと戻ります。

コラム

このチュートリアルでは、下記のポイントを確認しました。

  • スクリプト開発を用いて、簡単なアプリケーション(Hello World)の作成を通して、
    intra-mart Accel Platform におけるアプリケーション作成からメニューに登録するまでの流れを把握しました。