PHPのWebアプリケーションフレームワーク「Laravel」でWijmoを使う

業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリ「Wijmo(ウィジモ)」はフロントエンドで動作するので、言語を問わず様々なバックエンドのWebアプリケーションと連携が可能です。

今回はPHPで書かれたWebアプリケーションフレームワーク「Laravel(ララベル)」の最新バージョン「Laravel 11」のフロント部分にWijmoのデータグリッドコントロール「FlexGrid(フレックスグリッド)」を組み込み、データの生成(Create)、読込(Read)、更新(Update)、削除(Delete)を行うCRUDアプリケーションを作成する方法をご紹介します。

WijmoとLaravelを連携して使う

開発環境

  • PHP 8.1.12
  • Laravel 11.11.1

事前準備

今回はバックエンドとしてLaravel 11で作成したWeb APIと連携するアプリケーションを作成します。あらかじめ以下の記事の手順の通りにLaravelでWeb APIのアプリケーションを準備してください。

LaravelでCRUDアプリケーションの作成

ViteとWijmoのインストール

以前のバージョンのLaravelではJSファイルやCSSファイルなどのアセットのバンドルツールとして「Laravel Mix」が使用されていましたが、Laravel 11ではデフォルトのビルドツールとして「Vite」が使用されるようになりました。

プロジェクト作成時に自動で作成される「package.json」にはデフォルトでViteとLaravelプラグインの設定が記述されているので、こちらの記事で作成したプロジェクトのディレクトリ(laravel-web-api)配下で以下のコマンドを実行し、各パッケージのインストールを行います。
※ あらかじめNode.jsのインストールが必要です。

npm install

続けて以下のコマンドを実行し、Wijmoのパッケージのインストールも行います。

npm install @mescius/wijmo.purejs.all

上記のコマンドを実行することでWijmoの最新版がインストールされますが、以下のように「@」の後ろに製品バージョンを指定することで特定のバージョンをインストールすることもできます。以下は「2024J v1」を指定してインストールする場合の例です。

npm install @mescius/wijmo.purejs.all@5.20241.9

Bladeテンプレートの作成

各パッケージのインストールが完了したら「resources/views/wijmo.brade.php」を新たに追加し、ViewとなるBladeテンプレートを作成します。テンプレートの中ではFlexGridを表示する領域とデータ更新用のボタンを定義し、加えて@vite ディレクティブを使用してJSとCSSをインポートしています。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Wijmo x Laravel</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
    <div class="container">
        <button id="update" class="btn">データの更新</button><br/>
        <div id="flexGrid" class="grid"></div>
    </div>
    <script>

    </script>
</body>

</html>

「http://127.0.0.1:8000/wijmo」にアクセスしたときに上記のBladeテンプレートの内容が表示されるよう、「routes/web.php」にルーティングの設定を追加します。

・・・(中略)・・・
Route::get("/wijmo", function() {
	return view("wijmo"); 
});

Wijmoの組み込み

「resources/js」フォルダ配下に「crud.js」を追加し、以下のようにWijmoのライブラリのインポートやFlexGridの初期化処理、FlexGridへのデータの表示、登録、更新、削除の処理を記載します。urlにはこちらの記事で作成したAPIのURLを設定します。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

import '@mescius/wijmo.styles/wijmo.css';
import '@mescius/wijmo.cultures/wijmo.culture.ja';
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjCore from '@mescius//wijmo';

wjCore.setLicenseKey('ここにライセンスキーの文字列を設定します');
const url = 'http://127.0.0.1:8000/api/items/';

document.addEventListener("DOMContentLoaded", function () {
    let cv = new wjCore.CollectionView();
    cv.trackChanges = true;

    let columnsdata = [
        { binding: 'id', header: 'ID', width:80 },
        { binding: 'product', header: '商品名', width:250 },
        { binding: 'order_date', header: '受注日', dataType: 'Date', format: 'yyyy/M/d', width:120 },
        { binding: 'order_count', header: '受注数', width: 80 },
    ];

    let flexGrid = new wjGrid.FlexGrid('#flexGrid', {
        itemsSource: cv,
        autoGenerateColumns: false,
        columns: columnsdata,
        allowAddNew: true,
        allowDelete: true
    });

    //GET
    wjCore.httpRequest(url, {
        success: function (xhr) {
            cv.sourceCollection = JSON.parse(xhr.response, reviver);
        }
    });

    document.getElementById('update').addEventListener('click', function () {
        //PUT  
        for (var i = 0; i < cv.itemsEdited.length; i++) {
            wjCore.httpRequest(url + cv.itemsEdited[i].id, {
                method: 'PUT',
                data: cv.itemsEdited[i]
            });
        }

        //POST
        for (var i = 0; i < cv.itemsAdded.length; i++) {
            wjCore.httpRequest(url, {
                method: 'POST',
                data: cv.itemsAdded[i]
            });
        }

        //DELETE
        for (var i = 0; i < cv.itemsRemoved.length; i++) {
            wjCore.httpRequest(url + cv.itemsRemoved[i].id, {
                method: 'DELETE'
            });
        }

        cv.itemsEdited.length > 0 &&
            alert(cv.itemsEdited.length + "件のデータを更新しました。");
        cv.itemsAdded.length > 0 &&
            alert(cv.itemsAdded.length + "件のデータを登録しました。");
        cv.itemsRemoved.length > 0 &&
            alert(cv.itemsRemoved.length + "件のデータを削除しました。");
    });
}
);

function reviver(key, val) {
    // 先頭から"yyyy-mm-dd"の文字列を日付データと判断 
    if (typeof (val) == "string" &&
        val.match(/^\d{4}-\d{2}-\d{2}/)) {
        return new Date(Date.parse(val)); // Date型に変換
    } return val;
}

加えて、作成した「crud.js」をresources/js/app.jsにインポートします。

import './crud'

さらに「resources/css/app.css」でFlexGridやボタンに適用するスタイルの定義を追加します。

.grid {
    width: 575px !important;
    height: 450px;
}


.btn {
    margin-bottom: 10px;
}

以上の手順で、Wijmoの組み込みは完了です。以下のコマンドを実行しViteの開発サーバーを起動します。

npm run dev

Viteの開発サーバーが起動した状態で別のターミナルを開き、以下のコマンドを実行してLaravelのアプリケーションを起動します。

php artisan serve

「http://127.0.0.1:8000/wijmo」に接続すると、WijmoのFlexGrid上にAPIから取得したデータが表示されていることを確認できます。

FlexGridにデータの表示

登録、更新、削除処理の動作確認

データの登録(CREATE)

FlexGridの一番下の行にデータを入力することで新規データの登録が可能です。データの入力には既存データをコピー&ペーストして入力することも可能です。データ入力後[データの更新]ボタンを押下するとAPIに登録のリクエストを送信できます。

データの更新(UPDATE)

FlexGrid上で任意のデータを更新し、[データの更新]ボタンを押下するとAPIに更新のリクエストを送信できます。

データの削除(DELETE)

FlexGrid上で削除したい行を選択しDeleteキーを押下すると対象の行を削除できます。その後、[データの更新]ボタンを押下するとAPIに削除のリクエストを送信できます。

さいごに

以上がPHPのWebアプリケーションフレームワーク「Laravel」のフロント部分にWijmoのデータグリッドコントロール「FlexGrid」を組み込み、CRUD処理を行うアプリケーションを作成する方法でした。

製品サイトではWijmoを導入したばかりの方や、トライアル期間中の方向けに、Wijmoの概要や導入方法、基本的な使い方を紹介した「Wijmo利用ガイド」を公開しています。こちらも是非ご覧ください。

そのほか、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

\  この記事をシェアする  /