Haluで新しいアプリケーションを開発する手順です。
新しいプロジェクトを作成し、Sampleアプリから必要な画面をコピーして、差分を実装します。
手順は、開発準備（DBの設計・構築）、開発の流れ（プロジェクトの作成から、画面・バッチ・帳票の作成と既存画面の変更まで）、実装例の3つで構成されます。
1. 開発準備
開発を始める前に、Sampleアプリを実行できる環境を用意し、新しいアプリケーションが使用するDBを設計・構築します。
1-1. Sampleアプリのセットアップ
新しいアプリケーションは、Sampleアプリの画面をコピーして作成します。
次のページの手順を実施し、Sampleアプリを実行できることを確認してください。
・環境構築：「Linux（自動インストール）」または「Windows」
・起動方法：Haluの起動と、Sampleアプリの動作確認
1-2. DBの設計
Haluは、アプリケーションのDBの設計が完了していることを前提とします。
そのうえで、Haluのログイン処理とバッチ処理を使用するために、次のテーブルが必要です。
◇Halu必須テーブル
次のテーブルを、アプリケーションのDBの設計に含めてください。テーブルの作成方法は「1-3. DBの構築」を参照してください。
・ログイン・メニュー：
ユーザ、ログ情報、テーマ。「2-3. ログインとメニューを作成する」でコピーする画面が使用します。
・バッチ処理：
バッチ管理、バッチ分割管理、バッチパラメータ管理、バッチキー管理。フレームワークのバッチ処理が使用します。バッチ処理を使用しない場合は不要です。
バッチの実行状況は、Sampleアプリのバッチ関連の画面で確認できます。
1-3. DBの構築
1-2のテーブルは、Sampleアプリのバックアップに含まれています。
次の手順で、新しいアプリケーションのDBを構築してください。
- 新しいDB名でDBを作成する
- 作成したDBに、Sampleアプリのバックアップファイル（
HaluProject\Halu\Application\Sample\バックアップ\sample.backup）をリストアする - Sampleアプリの業務テーブル（顧客、商品、受注ヘッダ、受注明細、受注ＣＳＶ、受注ＣＳＶエラー）を削除する
- 1-2で設計した、アプリケーションのテーブルを作成する
※バッチＣＳＶ管理・バッチ帳票管理は、Haluのバッチ処理が参照しないため、削除できます。
※ユーザテーブルには、Sampleアプリのユーザー（ADMIN001・TEST001）が登録されています。
「2-3. ログインとメニューを作成する」の確認に使用できます。運用を始める前に、削除するか、パスワードを変更してください。
2. 開発の流れ
アプリケーションは、画面ごとに必要なファイル一式で構成されます。
画面タイプごとに基本の処理が用意されているため、Sampleアプリから同じ画面タイプの画面をコピーし、その画面に固有の処理だけを実装します。
プロジェクトの作成から、画面・バッチ・帳票の作成と既存画面の変更までの手順は、次のとおりです。ファイル一式は「HaluProject詳細＞必要なファイル一式」を参照してください。
2-1. プロジェクトを作成する
新しいアプリケーションのプロジェクトを作成し、Sampleアプリから、すべての画面で共通に使用するファイルをコピーします。ディレクトリ構成は「HaluProject詳細＞ディレクトリ構成」を参照してください。
①ルートフォルダを作成する
HaluProject\Halu\Applicationに、プロジェクトのルートフォルダを作成します。
フォルダ名はプロジェクト名で、画面のURLの一部（/Application/{プロジェクト名}/…）になります。
②共通のファイルをコピーする
Sampleアプリ（HaluProject\Halu\Application\Sample）から、次のフォルダを、ルートフォルダの同じ位置にコピーします。
| フォルダ | 内容 |
|---|---|
Html\css | アプリケーション全体で共通のスタイル |
Html\js | 画面タイプのMixin |
Html\SvelteComponent | ヘッダー・フッターなどの部品（Svelteコンポーネント） |
Html\images・Html\fonts | 画像・フォント |
Html\Apps\Error404 | 指定した画面が見つからない場合に表示する画面 |
Server\Commons | 共通のPython |
Error404の画面は、フォルダ名を変えずにコピーしてください。指定した画面のindex.htmlが見つからない場合、Webサーバーは同じアプリケーションのHtml\Apps\Error404\index.htmlを返します。
※Html\SvelteComponentにnode_modulesがある場合、このフォルダのコピーは不要です。
③プロジェクト名を置換する
コピーしたファイルには、Sampleのプロジェクト名が記述されています（ファイルのパス、ヘッダーに表示するアプリケーション名、ログアウト後に表示する画面）。
エディタの一括置換などで、ルートフォルダ内のSampleを、プロジェクト名に置換してください。大文字・小文字は区別します。
※ビルド済みのHtml\SvelteComponent\build\AppComponents.jsも置換されるため、Svelteコンポーネントをビルドし直す必要はありません。
2-2. 設定ファイルを編集する
設定ファイル（HaluServer\Halu\System\Server\Libraries\halumain\haluconf.py）に、1-3で作成したDBの定義を追加します。Sampleの定義（database0）を参考に、次の項目を設定してください。
・変数名：ほかの定義と重ならない名前（例：database1）
・DB名：1-3で作成したDB名（{変数名}['database']の値と、self.__def_database[]のキーの2か所）
・接続先：ホスト・ポート番号・ユーザー名・パスワード
self.__def_database[]のキーに指定した名前を、sql.jsonのdbnameに記述します。sql.jsonのdbnameの値は、「2-3. ログインとメニューを作成する」で置き換えます。
※設定ファイルを変更したあとは、起動中のHaluのサーバーをすべて起動し直してください。
2-3. ログインとメニューを作成する
Sampleアプリのログイン画面とメニュー画面をコピーして、新しいアプリケーションにログインとメニューを作成します。
①画面をコピーする
Sampleアプリ（HaluProject\Halu\Application\Sample）から、次の画面のフォルダを、ルートフォルダの同じ位置にコピーします。
| 画面 | コピーするフォルダ |
|---|---|
Login | Html\Apps\Login・Json\Apps\Login・Server\Apps\Login |
StartMenu | Html\Apps\StartMenu・Json\Apps\StartMenu |
AdminMenu | Html\Apps\AdminMenu・Json\Apps\AdminMenu |
②プロジェクト名とDB名を置換する
コピーしたファイルのSampleを、プロジェクト名に置換します。
あわせて、Jsonフォルダ内の"dbname":"sample"の値を、2-2で設定したDB名に置換してください。大文字・小文字は区別します。
・プロジェクト名：Html・Json・Server内のSample
・DB名：Json内のdbnameの値
③メニューのボタンを整理する
メニュー画面のindex.htmlには、Sampleアプリの画面を指すボタンが並んでいます。
ボタンのnameには、遷移先の画面（{プロジェクト名}/Html/Apps/{画面名}）が指定されています。コピーしていない画面を指すボタンをクリックするとError404の画面が表示されます。そのため、ボタンは次のとおり整理してください。
・遷移先の画面が新しいアプリケーションにある場合：nameは②の置換でプロジェクト名になっているため、ボタンの表示名だけを変更する
・ほかのボタン：name=""とhalu-menu-item-blankクラスを指定した空きのボタンに置き換える
④動作を確認する
サーバーを起動し（「起動方法」を参照）、次のURLにアクセスします。
http://{サーバー}:{ポート}/Application/{プロジェクト名}/Html/Apps/Login/index.html
ログインID・パスワードを入力し、ログイン後にメニュー画面が表示されることを確認します。
1-3のバックアップに含まれるユーザー（ADMIN001・TEST001）でログインできます。
2-4. 画面を作成する
新しい画面は、Sampleアプリの画面のファイル一式をコピーして作成します。
①コピー元の画面を決める
コピー元には、Sampleアプリから、作成する画面と同じ画面タイプを使用する画面を選択します。画面タイプと、Sampleアプリでの実装例は「HaluProject詳細＞Html＞js」を参照してください。
②プログラムをコピーして置換する
コピー元の画面について、Sampleアプリの次のフォルダを、ルートフォルダの同じ位置にコピーします。
・Html\Apps\{コピー元の画面名}
・Json\Apps\{コピー元の画面名}
・Server\Apps\{コピー元の画面名}（ある場合）
コピーしたフォルダ名・ファイル名・ファイルの中の画面名を、新しい画面名に置換します。あわせて、ファイルの中のSampleと、Jsonフォルダ内の"dbname"の値も置換してください。大文字・小文字は区別します。
・画面名：フォルダ名・ファイル名と、ファイルの中の{コピー元の画面名}
・プロジェクト名：Html・Json・Server内のSample
・DB名：Json内のdbnameの値
※コピー元が、帳票やバッチなど別のフォルダを指定している場合は、そのフォルダも作成します（「2-6. バッチ・帳票を作成する」を参照）。
例：OrderListの{コピー元の画面名}_printH_sql.jsonは、帳票のフォルダOrderListPrintを指定しています。
③各プログラムを編集する
コピーしたプログラムを、新しい画面に合わせて編集します。
・HTML：index.htmlの画面のタイトル（title要素と、ヘッダー部品のprops-Title）と各項目を編集します。項目にはhalu-ds-id・halu-ds-fieldを指定して、Datasetと紐付けます。
・CSS：画面固有のスタイルはcss\program.cssに、全画面で共通のスタイルはHtml\css\project.cssに記述します。
・JSON：データ項目・入力チェック・リクエストとレスポンス・SQLを定義します。
・Appspec：使用するJSON・トランザクション・イベントなどを設定します。
・JavaScript：controller.js・model.js・view.jsに、画面固有の処理を記述します。画面タイプのMixinは、同じ名前のメソッドを定義した場合にオーバーライドできます。
・Python：JSONの定義だけでは実現できない処理がある場合に、Server\Apps\{画面名}\に記述します。
mainte（singleRecordForm）の画面では、画面のタイトルに半角スペースを使用できません。
モード付きのタイトル（例：「ユーザ詳細（訂正）」）を作成する場合に、最初の半角スペースより後ろが切り捨てられるためです。
Pythonでは、ファイル名と同じ名前のクラスを定義します。
クラスの__init__メソッドの引数は、ファイルの種類ごとに決まっています。
| ファイル | 呼び出される条件 | __init__の引数 |
|---|---|---|
{画面名}_controller.py | tran.jsonのrequestのprogが"yes" | mvclog・mvclogname・requestdict・validation_data |
{画面名}_model.py | sql.jsonのprogが"yes" | mvclog・mvclogname・database・sqldict・requestdict |
{画面名}_view.py | tran.jsonのresponseのprogが"yes" | mvclog・mvclogname・responsedict・sqldict・requestdict |
各キー・設定項目の詳細は「ドキュメント＞JSONキー一覧」および「ドキュメント＞Appspec項目一覧」を参照してください。
各ファイルの役割は、次のページを参照してください。
・HTML・JavaScript・Appspec：「HaluProject詳細＞Html＞Apps」
・CSS：「HaluProject詳細＞Html＞css」
・JSON：「HaluProject詳細＞Json＞Apps」
・Python：「HaluProject詳細＞Server＞Apps」
④画面遷移を追加する
呼び出し元の画面に、新しい画面へ遷移する処理を追加します。
・メニューから遷移する場合：
メニュー画面のindex.htmlの空きのボタンを使用します。
ボタンのnameに{プロジェクト名}/Html/Apps/{画面名}を指定し、表示名を変更します。手順は「2-3. ログインとメニューを作成する＞③メニューのボタンを整理する」を参照してください。
・画面から遷移する場合：
遷移元の画面の{画面名}.appspec.jsのnextnameに、遷移先の画面名（フォルダ名）を指定します。
2-5. Svelteコンポーネントを追加する
ヘッダー・フッターなどのSvelteコンポーネント（Html\SvelteComponent\）を追加・変更した場合は、ビルドが必要です。ビルドにはNode.jsを使用します。仕組みは「HaluProject詳細＞Html＞SvelteComponent」を参照してください。
①コンポーネントを作成する
Html\SvelteComponent\src\components\{コンポーネント名}\に、次の2つのファイルを作成します。
・{コンポーネント名}.svelte：コンポーネントの本体。値は$props()で受け取ります。
・{コンポーネント名}.main.js：画面にコンポーネントを表示する処理。componentID属性が{コンポーネント名}の要素に表示し、props-で始まる属性の値を渡します。
{コンポーネント名}.main.jsは、Header.main.js（値を渡す場合）またはFooter.main.jsを参考にして作成してください。
②コンポーネントを登録する
Html\SvelteComponent\src\components\AppComponents\AppComponents.main.jsに、{コンポーネント名}.main.jsのimportを追加します。
import '../{コンポーネント名}/{コンポーネント名}.main.js';③ビルドする
1. 初回のみ、次のコマンドを実行する
cd HaluProject\Halu\Application\{プロジェクト名}\Html\SvelteComponent
npm install2. 同じフォルダで、次のコマンドを実行する
npm run buildビルド後、build\AppComponents.jsが更新されます。.svelte・*.main.js・AppComponents.main.jsを追加・変更した場合は、そのつどビルドしてください。
④画面に記述する
コンポーネントを使用する画面のindex.htmlに、次の要素を記述します。
あわせて、AppComponents.jsを読み込む行の?var=の値を更新してください（古いファイルがキャッシュから使用されるのを防ぐため）。
<div componentID="{コンポーネント名}" props-{名前}="{値}"></div>2-6. バッチ・帳票を作成する
バッチと帳票も、画面と同じく、Sampleアプリのフォルダをコピーして作成します。コピーと置換の手順は「2-4. 画面を作成する」の②と同じです。
画面との違いは、作成するフォルダと、定義を作成する順です。
画面の作成例は「3. 実装例：取引先マスタを作成する」を参照してください。
◇バッチ
次のSampleアプリのフォルダ・ファイルをコピーして作成します。
ファイルの一覧は「HaluProject詳細＞必要なファイル一式＞バッチ」、使用するidは「HaluProject詳細＞バッチ＞バッチ処理で使用するid」、処理の流れは「HaluProject詳細＞バッチ＞処理の流れ」を参照してください。
・処理用の定義：Json\Apps\BatchOrderUploadProc・Server\Apps\BatchOrderUploadProc
・起動用の定義：Json\Apps\BatchOrderUploadStart
・起動プログラム：Server\BatchLoad\BatchOrderUploadStart.py
・起動画面：OrderUpload（バッチを起動するトランザクションのsql.json）
定義は、次の順に作成します。コピーした定義のSQLは、新しいアプリケーションのテーブルに合わせて書き換えてください。
- 処理用の定義を作成する。tran.jsonの
requestに、batchParam・batchKeyを定義する - 起動用の定義を作成する。sql.jsonの
batchControllに、1の処理用の定義（ロードパス名・処理モード）を指定する - 起動プログラムを、起動用の定義のフォルダ名と同じ名前で作成する。2のtran.jsonのパスと、実行結果の出力先（
Server\BatchLoadOut\）を指定する - 起動画面のsql.jsonに、
batchParam・batchStartupを定義する。batchStartupのバッチロードパス名に、3の起動プログラムを指定する - バッチサーバーを起動して、起動画面からバッチを実行する（「起動方法」を参照）
バッチ処理を使用するには、1-2のバッチ管理テーブルが必要です。batchControllのＤＢ名も、新しいDB名に置換してください。
◇帳票
次のSampleアプリのフォルダをコピーして作成します。
ファイルの一覧は「HaluProject詳細＞必要なファイル一式＞帳票」、使用するidは「HaluProject詳細＞帳票＞帳票で使用するid」、処理の流れは「HaluProject詳細＞帳票＞処理の流れ」を参照してください。
・帳票フォルダ：Json\Apps\OrderListPrint・Server\Apps\OrderListPrint・ExcelTemplate\Apps\OrderListPrint
・呼び出し元の画面：OrderList（印刷するトランザクションのsql.json）
定義は、次の順に作成します。コピーした定義のSQLは、新しいアプリケーションのテーブルに合わせて書き換えてください。
- Excelのテンプレート（
ExcelTemplate\Apps\{帳票名}\{テンプレート名}.xlsx）を作成する。書式はSheet1シートに作成する - 帳票フォルダのtran.jsonに、
requestのprintKey・printParamと、responseのexcelinfo（テンプレートの名前・出力するExcelの名前・各レコードのExcelへの書き込み）を定義する - 帳票フォルダのsql.jsonに、帳票に出力する値を取得するSQLを定義する
- 呼び出し元の画面のsql.jsonに、
printKey・printParamを定義する。printParamのhtmlに帳票フォルダを、modeに帳票のトランザクション名を指定する - 呼び出し元の画面のAppspecの
requestInfoに、帳票のtran.jsonのmode（printHまたはprintHM）を、先頭の要素にして登録する。
登録の書式は「ドキュメント＞Appspec項目一覧」を参照する - プリントサーバーを起動して、呼び出し元の画面から印刷し、PDFがダウンロードされることを確認する（「起動方法」を参照）
Pythonのファイルが必要な場合は、Server\Apps\{帳票名}\に次のファイルを作成します。クラス名は、ファイル名と同じにします。
| ファイル | 呼び出される条件 | __init__の引数 |
|---|---|---|
{帳票名}_model.py | sql.jsonのprogが"yes" | mvclog・mvclogname・database・sqldict・requestdict |
{帳票名}_view.py | tran.jsonのresponseのprogが"yes" | mvclog・mvclogname・responsedict・sqldict・requestdict |
{帳票名}_form.py | tran.jsonのresponse.excelinfoのprogが"yes" | excellog・excellogname・excelcreate・responsedict・sqldict・requestdict |
2-7. 既存画面に項目を追加する
既存の画面に項目を追加する場合は、次のファイルを修正します。データはidと項目名で受け渡されるため、追加する項目は、すべてのファイルで同じ項目名にします。項目の追加先は、dataset.json・validation.json・tran.jsonではレコードのid（header・detailなど）、sql.jsonではSQLごとのidで決まります。連携の詳細は「データ移送の仕組み＞画面処理の仕組み＞JSON定義の連携」を参照してください。
※DBのテーブルに、対応する列があることを前提とします。
- {画面名}_dataset.json：データ項目を追加する
- {画面名}_validation.json：入力チェックのルールを追加する
- {画面名}_{トランザクション名}_tran.json：リクエストに項目を追加する。レスポンスには、項目と値の取得元を追加する
- {画面名}_{トランザクション名}_sql.json：SQLに渡す項目・結果として受け取る項目に追加する。
freesqlを使用している場合は、SQL本文にも追加する - index.html：項目を表示・入力する要素を追加し、
halu-ds-id・halu-ds-fieldを指定する - Python（ある場合）：SQLの組み立てやレスポンスの編集に、項目を追加する
※tran.json・sql.jsonは、項目を使用するトランザクションごとに修正します。各キーの詳細は「ドキュメント＞JSONキー一覧」を参照してください。
3. 実装例：取引先マスタを作成する
ここまでの手順の例として、Sampleアプリの顧客一覧登録（CustomerListMainte）をコピーして、取引先マスタの一覧登録画面（PartnerListMainte）を作成します。
1-1〜2-3の手順が完了し、ログインとメニューを利用できることを前提とします。
3-1. 作成する画面
作成する画面は、取引先を一覧に表示し、一覧の上で登録・訂正・削除する画面です。
| 項目 | 内容 |
|---|---|
| 画面名 | PartnerListMainte（画面のタイトル：取引先一覧登録） |
| 画面タイプ | list-mainte（一覧＋行編集） |
| 項目 | 取引先ＩＤ（自動採番）・取引先名（必須）・備考 |
| コピー元 | Sampleアプリの顧客一覧登録（CustomerListMainte） |
コピー元には、同じ画面タイプで、項目が近い画面を選択します。
顧客一覧登録は、顧客ＩＤ・顧客氏名・備考を一覧で登録・訂正・削除する画面で、項目名を置き換えるだけで取引先マスタにできます。
コピー元の選び方は「2-4. 画面を作成する」の①を参照してください。
3-2. テーブルを作成する
取引先マスタのテーブル（取引先）を、1-3で構築したDBに作成します。次のSQLを実行してください。
create table "取引先" (
"取引先ＩＤ" serial not null
, "取引先名" character varying(100) not null
, "備考" character varying
, "登録日時" timestamp(6) without time zone
, "登録ユーザ" character varying
, "更新日時" timestamp(6) without time zone
, "更新ユーザ" character varying
, "削除フラグ" character varying(1) default '0'
, constraint "取引先_PKC" primary key ("取引先ＩＤ")
) ;登録日時・登録ユーザ・更新日時・更新ユーザ・削除フラグは、画面の登録・訂正・削除の処理で使用します。
3-3. 画面をコピーして置換する
「2-4. 画面を作成する」の②の手順で、顧客一覧登録をコピーして置換します。
Sampleアプリの次のフォルダを、ルートフォルダの同じ位置にコピーします。
・Html\Apps\CustomerListMainte
・Json\Apps\CustomerListMainte
・Server\Apps\CustomerListMainte
コピーしたフォルダ名・ファイル名・ファイルの中を、次のとおり置換します。
大文字・小文字は区別します。
| 置換の対象 | 置換前 | 置換後 |
|---|---|---|
| 画面名（フォルダ名・ファイル名・ファイルの中） | CustomerListMainte | PartnerListMainte |
| プロジェクト名（ファイルの中） | Sample | {プロジェクト名} |
| DB名（Jsonのファイルの中） | sample | {DB名} |
3-4. 項目名を変更する
コピーした画面の項目名・テーブル名・画面のタイトルを、「顧客」から「取引先」に置換します。「2-4. 画面を作成する」の③の編集は、この置換で行えます。
Html\Apps\PartnerListMainteとJson\Apps\PartnerListMainteのファイルの中を、次の順に置換します。
| 順 | 置換前 | 置換後 | 置換される箇所 |
|---|---|---|---|
| 1 | 顧客氏名 | 取引先名 | 項目名（Dataset・入力チェック・リクエストとレスポンス・SQLの項目、画面の列見出しと入力欄） |
| 2 | 顧客 | 取引先 | 項目名顧客ＩＤ、テーブル名顧客、画面のタイトル顧客一覧登録、コメント |
1を先に置換するのは、2を先に置換した場合、顧客氏名が取引先氏名になるためです。 Server\Apps\PartnerListMainteのPythonのファイルには「顧客」がないため、変更は不要です。
3-5. メニューに追加して確認する
「2-4. 画面を作成する」の④の手順で、メニュー画面に取引先一覧登録のボタンを追加します。
StartMenuとAdminMenuのindex.htmlには、「マスタ」タブ（タブ_2）に、顧客一覧登録のボタン（name="{プロジェクト名}/Html/Apps/CustomerListMainte"）が配置されています。
このボタンを、次のとおり変更します。
・name：{プロジェクト名}/Html/Apps/PartnerListMainte
・表示名：取引先一覧登録
サーバーを起動して、次の順に確認します。
- ログイン画面を開き、ログインする（「2-3. ログインとメニューを作成する」の④を参照）
- メニューの「マスタ」タブで、「取引先一覧登録」を選択する
- 「行追加」で行を追加し、取引先名を入力して、「登録」を押す。確認のダイアログが表示され、一覧に登録した取引先が表示される
- 削除する行にチェックを付けて、「削除」を押す。チェックを付けた行が一覧から消える