1. サンプルアプリのセットアップ
※Linux自動インストールの場合はこの手順は不要です。
1-1. ソース配置
Haluのソースを以下のフォルダに配置してください。
配置先(デフォルト)：C:\git_tills
※gitからzipファイルをダウンロードした場合、フォルダ名の変更が必要です。
変更前：halu-master
変更後：halu
配置後のフォルダ構成は以下の通りです。
1-2. DB作成
以下の手順でデータベースを作成してください。
1. データベース名 sample を作成する
2. 以下のバックアップファイルをリストアするHaluProject\Halu\Application\Sample\バックアップ
1-3. 動作確認
1. 起動方法に従ってHaluを起動する
2. 以下のURLにアクセスしてサンプルアプリの動作確認を行うhttp://[サーバIPアドレス]:[ポート番号]/Application/Sample/Html/Apps/Login/index.html
2. DBの設計
HaluはDBの設計が完了していることを前提としています。
ただし、Haluの基本機能動作のために必須のテーブルがあります。
Halu必須テーブル
以下のテーブルはHaluの動作に必須です。
これらを含んだSampleアプリのデータバックアップは以下に保管されています。HaluProject\Halu\Application\Sample\バックアップ
画面動作
バッチ動作
3. 新規プロジェクト作成
新規プロジェクトを作成する場合、以下の手順で準備・設定を行います。
3-1. Sampleをコピーする
コピー元：HaluProject\Halu\Application\Sample
コピー先：HaluProject\Halu\Application\【新規プロジェクトフォルダ】
3-2. フォルダ名を変更する
3-1 のフォルダ名をアプリケーションのルートフォルダ名に変更します。
3-3. 設定ファイルを編集する
Server側設定ファイルに、アプリケーションとデータベースの情報を記載します。
設定ファイル：HaluServer\Halu\System\Server\Libraries\halumain\haluconf.py
設定可能な項目は以下の通りです。
・ システムパスとアプリケーションパス
・ ログレベル（出力有無）
・ アプリケーションサーバのIPアドレス＆ポート番号
・ プリントサーバのIPアドレス＆ポート番号
・ バッチサーバのIPアドレス＆ポート番号
・ プロジェクト別 IPアドレスの制限有無
・ プロジェクト別 データベース定義
3-4. 環境変数を設定する
システム環境変数に以下の設定を追加します。
変数：PYTHONPATH
値（デフォルトの配置先の場合）：
C:\git_tills\halu\HaluServer\Halu
C:\git_tills\halu\HaluServer\Halu\System\Server\Libraries
4. アプリ開発
4-1. アプリ開発のポイント
画面毎のプログラム作成
画面毎に必要なプログラム一式を作成します。
差分情報のみのコーディング
各画面パターンに基本処理が用意されているため、画面毎のプログラムは差分情報のみのコーディングで完了します。
さらに利用したい画面パターンに合わせてSampleアプリから画面プログラム一式をコピーすることで効率の良いコーディングが可能です。
利用可能な便利機能
帳票(PDF)出力機能
バッチ処理機能
4-2. 作成が必要なプログラム
JSON
| ファイル名 | 説明 |
|---|---|
| dataset.json | 画面で使用する項目定義 |
| validation.json | 各項目の入力制御 |
| tran.json | リクエストデータの項目とレスポンスデータの項目定義 |
| sql.json | クエリ定義 |
JavaScript
| ファイル名 | 説明 |
|---|---|
| appspec.js | 画面のイベント処理定義・画面遷移の受渡データ定義 |
| controller.js | イベントを受け取り、model/viewをコール |
| model.js | datasetの項目操作とリクエストデータの操作 |
| view.js | レスポンスデータを操作し、画面表示 |
| main.js | appspecを起動 |
Python
| ファイル名 | 説明 |
|---|---|
| controller.py | リクエストデータのバリデーション処理 |
| model.py | リクエストデータ、SQLデータの編集処理 |
| view.py | レスポンスデータの編集処理 |
5. 新規画面作成
新たに画面プログラムを作成する場合、各プログラムについて以下のように準備・実装します。
5-1. コピー元画面を決める
Sampleアプリから、コピー元とする画面プログラムを決定します。
5-2. プログラムのコピー
注意事項
ツールによるファイル名の置換を行うため、以下が一致している必要があります。
・置換対象のフォルダ名
・上記フォルダ内にあるファイル名
・上記ファイルのプログラムに記述されたファイル名
ファイル名置換手順
1. 作業フォルダを用意する
2. コピー元画面から以下のフォルダを作業フォルダへコピーする
コピー元：【プロジェクトフォルダ】\Html\Apps\【コピー元画面フォルダ】
コピー先：【任意の作業フォルダ】\【コピー元画面フォルダ】
3. ツールを実行する
VSCodeで以下を開いて実行します。
【プロジェクトフォルダ】\Workshop\programConvert.py
4. 置換対象フォルダを指定する
「フォルダ指定ウィンドウ」で置換対象のフォルダ（※）を選択します。
※手順2. のコピー先フォルダ：作業フォルダ\【コピー元画面フォルダ】
5. 置換後名称を入力する
「置換後ファイル名入力ウィンドウ」に置換後の名前を入力します。
置換前：コピー元フォルダ名
置換後：新画面フォルダ名（入力） → 以下が自動で置換されます。
・フォルダ名
・配下のファイル名
・各ファイルに記述されたファイルパス／ファイル名定義
6. 置換結果を確認する
各ファイルを開き、正しく置換されていることを確認してください。
7. 配置
置換後のフォルダをプロジェクト内の以下フォルダに配置します。
配置先：【プロジェクトフォルダ】\Html\Apps\【新画面フォルダ】
5-3. 各プログラムの編集
HTML
画面のHTMLファイル(index.html)について、以下に沿って編集します。
1. titleの名前とh5 id="ヘッダータイトル"の名前を変更する
2. 各データ項目を編集する
※注意事項
・class名の先頭部分、id、nameは同じ値を設定してください。
・後半部分にあるフォーマット指定は任意です。
・footerを追加する場合は必ずidを指定してください。
3. メニュー画面に登録する
メニュー画面のindex.htmlに新規画面のリンクを追加します。
CSS
必要に応じて以下に追加します。
配置先： 【プロジェクトフォルダ】\Html\css
JSON
各種JSONファイル(画面_XXX.json)について、以下に沿って編集します。
※dataset.jsonは必須です。
1) ファイルコピー
コピー元画面から、以下にファイルをコピーします。
配置先：【プロジェクトフォルダ】\Json\Apps\【新画面フォルダ】
2) json設定
機能詳細を参考に、各jsonの設定を行います。
参考：機能詳細>データマッピング
AppSpec
アプリケーション仕様設定(画面.appspec.js)について、イベントマッピング、画面表示とデータの項目マッピングなどの各種設定を行います。
参考： 機能詳細>AppSpec
JavaScript
以下に、画面独自処理を記述します。
パターンのメソッドをオーバーライドすることも可能です。
・ Controller：入力伝達(画面.controller.js)
・ Model：処理(画面.model.js)
・ View：表示、出力(画面.view.js)
配置先：【プロジェクトフォルダ】\Html\Apps\【画面フォルダ】
Python
Pythonプログラムを使用する場合に実装します。
実装した処理の呼び出し情報をjsonファイルに設定します。
参考：機能詳細>データマッピング配置先：【プロジェクトフォルダ】\Server\Apps\【新画面フォルダ】