ActiveReportsJSやWijmoがデータを取得できるAPIを、PythonのDjango REST frameworkで作る

メシウスの「ActiveReportsJS」「Wijmo」と「React」「Django REST framework」を組み合わせた活用例 第1回

　本記事では、メシウスのライブラリ「ActiveReportsJS」や「Wijmo」をReactと組み合わせて構築したWebページを、Web APIと接続して活用する事例を紹介します。まず今回は、PythonベースのWebアプリケーションフレームワーク「Django」でWeb APIを開発できるライブラリ「Django REST framework」を利用してWeb APIを開発します。今回作成したWeb APIを、次回でActiveReportsJS／Wijmoと接続します。（※メシウス株式会社は2023年11月1日にグレープシティ株式会社から社名を変更しました）

はじめに

　メシウスはHTML/CSS、JavaScriptで実装するWebページ向けに複数のライブラリを提供しています。ActiveReportsJSは帳票ライブラリ、WijmoはさまざまなUI部品を提供するライブラリです。

図1　ActiveReportsJS、Wijmoの公式ページ

　Webアプリでは一般的に、Webページで表示するデータはWeb APIを利用してサーバーから取得します。そのためActiveReportsJSやWijmoも、Web APIを提供するサーバーと組み合わせることで、より実用的に活用できます。

　そこで本記事では、ActiveReportsJSやWijmoを、サーバー側のWeb APIと組み合わせて利用する方法を、2回に分けて説明していきます。初回となる今回は、PythonベースのWebアプリケーションフレームワーク「Django」でWeb APIを開発できるライブラリ「Django REST framework」を利用して、サーバー側のWeb APIを作成していきます。次回は、ActiveReportsJSやWijmoをReactと組み合わせて作成したWebページで、今回作成するWeb APIから取得したデータを表示します。

対象読者

• ActiveReportsJSやWijmoの、実利用により近いサンプルを必要としている方
• Web APIを手軽に実装したい方
• Pythonの環境構築や実装手順を体験してみたい方

必要な環境

　本記事のサンプルコードは、以下の環境で動作を確認しています。XAMPPは、MySQLデータベースを実行するために利用します。

• Windows 10 64bit版
• Python 3.11.5
• XAMPP 8.2.4

　サンプルコードを実行するには、必要なライブラリがインストールされた仮想環境を有効にした後、プロジェクトフォルダーで「python manage.py runserver」コマンドを実行して、Webブラウザーで「http://localhost:8000」を表示します。仮想環境やコマンドなど、実行方法の詳細は後述します。