MZ Platform工程管理作成チュートリアルⅠ

このチュートリアルは工程管理チュートリアル1.mzax ファイル を基に説明しています。

＜事前準備＞

１．MySQLデータベースの準備

工程管理システム簡易版アプリケーションは、外部のデータベースと連携し、そこへデータを格納しています。
使用しているデータベース管理システムはMySQL というフリーのソフトウェアです。
工程管理システム簡易版を使用するには、まず、MySQL を導入する必要があります。
次のページを参考に、MySQLデータベースサーバーをインストールしてください。

参考：MZ Platform データベース接続＞データベースの準備

２．MySQL Connector のインストール

MZ PlatformからはJDBC（データベースへアクセスするためのJava標準API)ドライバーを介してデータベースに接続します。
MySQLインストール時にJDBCドライバも一緒にダウンロードし、設定します。

３．MySQL内のデータの準備

  1. 作成するデータベース
    1. MySQLサーバー内に互いに関連性を持つ複数のテーブルを作成することができます。
      そのデータベースを「production」という名前を付けて作成します。
    2. 「production」の中に２つの「project」と「task」というテーブルを作成します。
      • 「primary Key （主キー）」とはテーブル内で行（レコード）を一意に特定するための項目です。
        重複データは許容されません。
      • 「auto_increment」はデータを追加すると自動的に採番され、一意のデータを割り当てることができま す。
      1. 「project」テーブル
        2. 列名 データ型 MZでのデータ型 NULLの許容 特記
        id int java.lang.Integer（整数） NO Primary Key, auto_increment
        label text 文字列 YES
        product text 文字列 YES
        delivery datetime 日付 YES
      2. 「task」テーブル
        3. 列名 データ型 MZでのデータ型 NULLの許容 特記
        isCompleted tinyint(1) 論理 YES
        dateEnd datetime 日付 YES
        dateStart datetime 日付 YES
        workingTime int java.lang.Integer（整数） YES
        projectLabel text 文字列 YES
        id int java.lang.Integer（整数） NO Primary Key, auto_increment
        process text 文字列 YES
  2. 設定されるデータ
    3. projectテーブルとtaskテーブルは受注番号（labelと projectLabel）において関係性があり、projectテーブルに登録された受注の工程の内容をtaskテーブルに格納します。
    1. projectテーブルのデータ例
      2. id label product delivery
      1 A01 A01 2023/11/11
      2 A02 A02 2023/12/12
    2. taskテーブルのデータ例
      3. isCompleated dateEnd dateStart workingTime projectLabel id process
      0 2023/11/08 12:00:00 2023/11/08 13:00:00 90 A01 1 めっき
      １ 2023/12/05: 15:30:00 2023/12/05 18:00:00 150
      		 A02 2 検査
      ※「isCompleate」列はMySQL内に格納されるデータは「1」か「0」ですが、MZ Platfromでは「true」「false」のboolean型として取得できます。
      またデータ更新・挿入SQLも「””」で囲まない「true」「false」値で実行することができます。
  3. 設定方法
    4. MySQLコマンドラインから createコマンドでデータベースやテーブルを作成できますが、このチュートリアルでは幾つかのデータと共にデータベーステーブルを作成するbatファイルを実行しま す。
    ※「production」というデータベースが既に存在する場合上書きされてしまうので、注意してください。
    1. MZPlatform\4.0\AP_DATA\Production内の「dbsetup80.bat」ファイルをダブル クリックします。
    2. コマンドプロンプト画面が立ち上がります。
      パスワードを入力し、<Enter>キーを押します。
      「続行するには何かキーを押してください」というメッセージが表示されます。
      何かキーを押すと終了します。

    3. データベースとテーブルが作成され、データが追加されます。
  4. MySQLコマンドラインでの確認
    1. Windowsスタートメニュー＞MySQL>MySQL 8.0 Command Line Clientを立ち上げます。
    2. パスワードを入力します。
    3. 「mysql>」と表示されている後ろに「use production;」と入力して[Enter]キーを押します。
    4. 「select * from project;」と入力して、[Enter]キーを押します。
    5. テーブルの内容が表示されれば、データが設定されています。

１．この章での完成画面

  1. 接続ボタン　
    ボタンを押すとデータベースに接続し、taskテーブルの内容を検索して工程テーブルに表示します。
  2. 切断ボタン　
    データベースとの接続を切断します。
  3. ガントチャート表示ボタン　
    ボタンを押すとtaskテーブルの内容を検索して、ガントチャートグラフとして表示します。
  4. 工程表　
    taskテーブルの内容が表示されます。
  5. ガントチャート　
    taskテーブルの内容がグラフ化して表示されます。

１．データベース接続部の複合コンポーネント化

１．１接続機能の作成

１．接続情報画面の作成

データベースへの接続設定を保存し、他のアプリ ケーション作成でも応用できるように、最初に接続情報画面を複合コンポーネント内に作成します。
参考：基本のコンポーネント＞複合コン ポーネント
コンポーネント追加
  1. ビルダー編集画面上で右クリック＞［複合コンポーネント作成］＞［コンポーネント］を選択し、複合コンポーネントを追加しま す。
  2. 複合コンポーネントをダブルリックして階層内に入り、以下のコンポーネントを追加します。
    3. コンポーネント名 必要数 カテゴリー ｺﾝﾎﾟｰﾈﾝﾄｷｰ／テキスト
    フレーム 1 画面構成部品＞フレーム 接続情報画面
    ラベル 5 画面構成部品＞テキスト ドライバ名
    サーバ名
    ユーザ名
    パスワード
    データベース名
    テキストフィールド 4 画面構成部品＞テキスト ドライバ
    サーバ
    ユーザ
    データベース
    パスワード入力フィールド 1 画面構成部品＞テキスト パスワード
    ボタン 2 画面構成部品＞ボタン 接続
    切断
  3. 複合コンポーネントのコンポーネント名称を「データベース接続部」に変更します。
画面編集
  1. 右のDB接続情報画面図を参考にコンポーネントを画面配置し、ラベル名を変更します。
    テキストフィールドのコンポーネントキーもそれに合わせて変更 します。
  2. ［フレーム］のタイトルを［接続情報画面］に設定します。

  3. デー タベース接続＞MySQLへの接続文字列を参考に、ドライバー名、サーバ名を入力します。
    • ドライバー名：com.mysql.cj.jdbc.Driver
    • サーバー名：jdbc:mysql://localhost/
    • ユーザー名：root　
    • パスワード：（MySQLインストール時に設定したもの）
    • データベース名：production　
      （後でサーバ名と結合し「jdbc:mysql://localhost/production」となります。 ）
DB接続情報画面例

１．データベース接続機能の作成

コンポーネント追加
  1. 複合コンポーネント内に以下のコンポーネントを追加し、コンポーネントキーを変更します。
    2. コンポーネント名 必要数 カテゴリー コンポーネントキー
    データベースアクセス 1 入出力＞データベース
    サブルーチン １ 処理部品＞サブルーチン DB接続
    文字列格納変数 １ 処理部品＞変数 DBURL

接続処理設定
    上位の階層からも呼び出せるよう［サブルーチン］を先頭に処理を作成します。

  1. 文字列同士を結合する
    2. 文字列格納変数には２つの文字列を1つに結合する機能があります。
    画面ではデータベースのURLとデータベース名を別々の［テキス トフィールド］に記入しています。
    これを1つの「jdbc:/mysql//localhost/production」という文字列として利用できるようにします。
    1. 【接続1-1】文字列格納変数に文字列を設定します。
      サーバー名のテキストフィールドからテキストを取得します。
      テキストフィールドには「jdbc:/mysql//localhost/」という接続文字列を設定しておきます。

    2. 【接続1-2】文字列に二つ目の文字列を連結します。
      データベース名のテキストフィールドからテキストを取得します。

  2. データベースに接続する
    1. 【接続1-3】接続文字列を指定してMySQLデータベースに接続します。

    ［編集画面図1］ ※右側の接続先コンポーネントをクリックすると、起動メソッド情報の画像が表示されます。

  1. ボタンを押してデータベースに接続する
    2. メソッドを公開し外部階層からサブルーチンを呼び出すことで接続ができますが、他にも応用が利くように、複合コンポーネント内のボタ ンとも接続をしておきま す。
    1. 【接続2-1】ボタンを押したらデータベースに接続します。
  2. ボタンを押してデータベースとの接続を切断する
    3. 外部階層から公開メソッドを呼び出すことで切断ができますが、他にも応用が利くように、複合コンポーネント内のボタ ンとも接続をしておきま す。
    1. 【接続3-1】ボタンを押したらデータベースとの接続を切断します。

    ［編集画面図2］

  3. メソッドを公開する　（メソッド公開方法：複合コンポ ーネント＞メソッドの公開）
    4. 以下のメソッドを公開します。

    コンポーネント メソッド 変更メソッド名
    サブルーチン（DB接続） 処理を呼び出す（） データベースに接続する
    データベースアクセス データベースとの接続を切断する（） ー
    フレーム フレームを表示する（） 接続情報フレームを表示する
    フレーム フレームを閉じる（） 接続情報フレームを閉じる

１．２データベース検索・更新機能の追加

１．SQL実行機能

検索や更新はSQL文を実行して行いますが、実行結果が返ってくるものと、実行完了しても結果は戻らないものがあります。
２つに分けて機能を作成します。

SELECT文：テーブル型のデータが取得される
UPDATE文・INSERT文・DELETE文：データは取得しない　（更新された行数やエラー情報の取得はできる）

２．検索機能の作成

上位階層から引数にSQL文を設定して処理を呼び出せるように［ファンクション］を使用します。
ファンクションからは処理要求イベントが発生します。
処理要求イベントに繋がる処理の最後に戻り値のある処理を設定すると、メソッド「ファンクションの呼び出し」の実行結果としてその戻り値を利 用 できます。

コンポーネント追加
  1. ［データベース接続部］複合コンポーネント内に以下の必要なコンポーネントを追加し、コンポーネントキーを変更します。
    2. コンポーネント名 必要数 カテゴリー コンポーネントキー
    ファンクション 1 処理部品＞サブルーチン 検索SQL実行
    テーブル格納変数 １ 処理部品＞変数
接続処理設定
  1. 検索SQL 文を実行する
    2. SQL文は後で上位階層から［ファンクション］を呼び出すときに引数に設定します。
    1. 【接続4-1】ファンクションの引数に設定されたSQL文を実行します。
      ファンクションの第一引数を取得します。

  2. 検索結果を変数に格納する
    3. 検索SQLの処理が行われると、［データベースアクセス］コンポーネントからデータ生成イベントが発生します。
    ［テーブル格納変数］をデータ生成イベントに接続し、 検索処理の結果を設定します。
    1. 【接続5-1】検索結果を変数に格納します。
  3. 検索結果を取得する
    4. ファンクションの接続処理の最後尾にデータ（戻り値）を取得する処理を設定しておくと、ファンクション呼び出し箇所でそのデータの利用が可能 にな ります 。
    （後の項の上位階層での呼び出し処理でデータを利用します。）
    1. 【接続4-2】テーブルデータを取得します。

    ［編集画面図3］

１．メソッドの公開および結果を返さない更新機能の追加

以下の2つのメソッドを公開します。
結果を返さない更新機能（Update等）は、［データベースアクセス］のメソッドを公開することで設定します。
  1. 複合コンポーネント内のメソッドを公開します。
    2. コンポーネント メソッド 変更メソッド名
    データベースアクセス SQL文を実行する（String） 更新SQLを実行する（結果取得無し）
    ファンクション（検索SQL実行） ファンクションの呼び出し（1引数）（Object） 検索SQLを実行する

２．上位階層でのデータベース接続／検索結果の確認

１．検索結果テーブルの表示画面作成

上位の階層で検索結果表示の確認をします。

コンポーネント追加
  1. アプリケーションビルダー上位階層（黄色）の編集画面で以下のコンポーネントを追加し、コンポーネントキーを変更します。
    2. コンポーネント名 必要数 カテゴリー ｺﾝﾎﾟｰﾈﾝﾄｷｰ／テキスト
    フレーム 1 画面構成部品＞ウィンドウ 工程管理
    テーブル １ 画面構成部品＞テーブル 工程
    ボタン 2 画面構成部品＞ボタン 接続
    切断

画面編集 画面編集画面に入り、配置方法：「手動配置」でコンポーネントを配置します。
  1. ［フレーム］上に［テーブル］を配置します。
  2. ［ボタン］２つ配置し、テキストを『接続』『切断』に変更します。
検索結果表示画面例

１．検索結果の設定

接続処理設定
  1. フレームを表示する【接続0-1-1】
  2. フレームを閉じたときにアプリケーションを終了する【接続 0-2-1】

  3. データベースに接続する
    4. ［データベース接続部］複合コンポーネントを使ってデータベースに接続します。
    1. 【接続1-1】データベースに接続します。
      ［ボタン（接続）］を押したとき、データベースに接続します。
    2. 【接続1-2】taskテーブルの検索を実行します。
      SQL文「select id,  process, projectLabel, workingTime, dateStart, dateEnd, isCompleted from task」を引数に設定して実行します。
  4. 結果をテーブルに設定する
    1. 【接続1-3】検索結果を取得し、テーブルに設定します。
      Select文の実行結果は、取得方法「メソッド処理結果」で戻り値として取得できます。
  5. データベースとの接続を切断する
    6. ボタンを押してデータベースの接続を切断します。
    1. 【接続2-1】データベースとの接続を切断します。

    ［編集画面図4］

１．列名の変更

    列名の変更は、一度実行し［テーブル］にデータが設定されている状態で行います。
  1. テーブルの列名を変更する
    2. taskテーブルの英語の列名を分かりやすいように日本語名に変更表示します。
    ［実行（設定可）］ボタンで実行し、「接続」ボタンを押して［テーブル］にテーブルデータが設定されている状態にします。
    各列の上で右クリック＞［列］＞［列名...］を選び、それぞれ「id」→「ID」、「process」→「工程」、 「projectLabel」→「受注番号」、「workingTime」→「作業時間」, dateStart→「開始予定日時」、dateEnd→「終了予定日時」、 isCompleted →「完了」 に変更します。
注意!!! 　列名を設定したら、「接続」ボ タンは押さないでください。
押すと列名が上書きされてしまいます。

２．テーブルデータ設定方法の変更

接続処理の変更・作成
    接続ボタンを押してテーブルデータを設定する都度、列名も上書きされてしまうので、列名部分を残し行を追加する処理に変更します。
    メソッド「テーブルデータを設定する(PFObjectTable)」を「全行を削除する（）」「行を追加する (PFObjectTable)」に変更します。

  1. 全部の行を削除する
    2. テーブルに列名部分を残して新規のテーブルデータを追加できるように、一旦全行を削除します。
    1. 【接続1-4】テーブルの全行を削除します。
  2. テーブルデータを追加する
    3. テーブルデータを行として追加します。
    「テーブルデータを設定する（PFObjectTable）」の処理は不要になります。
    1. 【接続1-5】検索結果を取得し、テーブルに追加します。
      2. ※【接続1-3】の処理をそのまま利用し、メソッド名だけ変更すると簡単です。

    ［編集画面図5］

確認 ここまで設定すると、工程表が表示されます。

３．終了処理

  1. 終了処理
    2. アプリーケーション終了イベントに処理を繋げ、テーブルの行をクリアし、データベースの切断を行います。
    1. 【接続3-1】終了時にテーブルデータ（テーブル行）を削除します。
    2. 【接続3-2】終了時にデータベースの接続を切断します。

    ［編集画面図6］

３．複合コンポーネントを使ったガントチャート表示

１．ガントチャート表示画面の作成

コンポーネント追加
  1. 以下のコンポーネントを追加し、コンポーネントキーを変更します。
    2. コンポーネント名 必要数 カテゴリー ｺﾝﾎﾟｰﾈﾝﾄｷｰ／テキスト
    グラフ作成複合コンポーネント １ 複合コンポーネント追加＞グラフ
    ガントチャート １ 画面構成部品＞グラフ 計画一覧
    ボタン １ 画面構成部品＞ボタン ガントチャート表示

画面編集
  1. ［フレーム］上に［ガントチャート］を配置します。
  2. ［ボタン］を配置し、テキストを『ガントチャート表示』に変更します。

ガントチャート表示画面例

１．グラフデータ作成複合コンポーネントを使ったデータ設定

グラフを表示するときには、ガントチャート用のテーブ ルデータを用意しなければなりませんが、［グラフデータ作成］複合コン ポーネントを使うと簡単に テーブルデータを整理して、グラフ表示ができます。
詳しくは『グラフ作成複 合コ ンポーネントチュートリアル』を参考にしてください。

コ ンポーネント追加
アプリケーションビルダーの編集領域で右クリック＞複合コンポーネント追加＞グラフ＞グラフ化モジュール.mzcxを選択し、 ［グラフデータ作成］複合コンポーネントを追加します。

接続処理設定
  1. ガントチャート用データの作成
    2. ［グラフデータ作成］に引数としてテーブル データを設定し、「項 目、系列、開始日時、終了日時」に列 名または列番号を指定することでガントチャート用に整理したテーブルデータを作成できます。
    1. 【接続4-1】ガントチャート用テーブルデータを複合コンポーネント内で作成します。

      2. （引数設定例）

      		説明 取得方法 コンポーネント メソッド／値
      引数０ テーブルデータ メソッド戻り値 テーブル（工程） テーブルデータを取得する
      引数１ 系列列 固定値 ー
      		 受注番号または2
      引数２ 項目列 固定値 ー
      		 工程または1
      引数３ 開始日時列 固定値 ー
      		 開始予定日時または4
      引数４ 終了日時列 固定値 ー
      		 終了予定日時または5
    2. 【接続4-2】タスク名用のテーブル デー タを複合コンポーネント内で作成します。
      タスク名はテーブル型のデータによって一括で設定することができます。
      先にガントチャート用データ作成を行っていることが必要です。
  2. ガントチャートへデータ設定
    1. 【接続4-3】作成されたテーブルデータをガントチャートに設定します。
    2. 【接続4-4】作成されたタスク名データをガントチャートに設定します。
  3. 全系列の色を設定する
    4. 同系列は同じ色で 表示されるように色のリストを設定します。
    1. 【接続4-5】系列色のリストを設定します。

    ［編集画面図7］

  4. 初期化・終了処理
    1. 【接続0-1-2】アプリーケーション開始時に複合コンポ―ネントを初期化します。
    2. 【接続3-3】アプリーケーション終了時にガントチャートデータをクリアします。
    3. 【接続3-4】アプリーケーション終了時に複合コンポ―ネントの終了処理を行います。

    ［編集画面図8］ 【接続3-1】~【接続3-2】、【接続0-1-1】の起動メソッド情報設定画面図は省略します。

2．ガントチャート属性設定の変更

  1. 表示開始日、表示期間、時間軸の大目盛間隔、小目盛間隔などを変更します。
    （変更例）表示期間：1か月　大目盛間隔：1週間　小目盛間隔：1日
    1. ガントチャート上で右クリック＞［ガントチャート］＞［時間軸］＞［表示期間...］を選択します。
      設定窓で１月を入力し、「適用」ボタンを押します。
    2. ガントチャート上で右クリック＞［ガントチャート］＞［時間軸］＞［大目盛間隔..］を選択します。
      設定窓で１週を入力し、「適用」ボタンを押します。
    3. ガントチャート上で右クリック＞［ガントチャート］＞［時間軸］＞［小目盛間隔...］を選択します。
      設定窓で１日を入力し、「適用」ボタンを押します。
  2. タスク名を表示できるようにします。
    ガントチャート上で右クリック＞［ガントチャート］＞［タスク］＞［タスク名］＞［表示する］を選択します。

工程管理アプリケーション作成チュートリアルⅡへ