SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用(AD)

「Wijmo(ウィジモ)」のUI部品で、情報を一望できるダッシュボードページを作成しよう

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用 第5回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 メシウス(旧グレープシティ)のJavaScriptライブラリ「Wijmo(ウィジモ)」は、Webページ作成に利用できるさまざまな部品の詰め合わせです。前回までに、グリッドやチャート、タブパネル、ツリービューといったWijmoのコントロールを組み合わせて1つの画面を作成する方法をご紹介してきました。今回はそれらをさらに応用し、グリッド、チャート、ゲージの部品を組み合わせて、ダッシュボードのWebページを作成する例を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Wijmo(ウィジモ)は、メシウスがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現状の最新版は「2023J v2」です。

 Wijmoには、グリッドを表示するFlexGrid、チャートを表示するFlexChart、割合を円形ゲージで表示するRadialGaugeといった、データを見やすく表示できる部品が含まれています。本記事ではこれらの部品を組み合わせて、情報を分析して1ページで把握できるダッシュボードのWebページを作成していきます。

 前回までに、グリッドやチャート、タブパネル、ツリービューといったWijmoのコントロールを組み合わせて1つの画面を作成する方法をご紹介してきました。詳しくは「JavaScriptライブラリ『Wijmo』のさまざまな部品を徹底活用」をご覧ください。

対象読者

  • UI部品としてWijmoの利用を検討されている方
  • さまざまな情報を表示するダッシュボードページを作りたい方
  • UI部品を組み合わせて表現力を増す事例を探している方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 11
  • Wijmo 5.20232.939
  • Node.js 20.12.2 64bit版
  • Microsoft Edge 123.0.2420.97

 サンプルコードを実行するには、まずWijmoトライアル版ZIPファイルの「WijmoEntEval_<バージョン番号>/Dist」フォルダー内のcontrols、stylesフォルダーを、サンプルコードのwijmoフォルダーにコピーしてください。トライアル版は公式ページからダウンロードできます。コピー後、「npm install」コマンドでWebページ表示用の簡易Webサーバー(lite-server)をインストールして、「npm run start」コマンドを実行すると、Webブラウザーで「http://localhost:3000」としてWebページが表示されます。

作成するダッシュボードWebページ

 本記事では、図1のダッシュボードWebページを作成します。このページでは、架空のチェーン店における2024年3月の売上達成状況を表示します。本店、駅前店、空港店の3店舗について、日次の売上状況をグリッド(表)とチャート(棒グラフ)で表示し、各店舗および全体の目標達成度はゲージで表示します。「売上データを追加」ボタンをクリックすると、売上データが1日単位でランダムに追加され、追加されたデータが各表示に反映されます。

図1 本記事で作成するダッシュボードWebページ(p001-dashboard)
図1 本記事で作成するダッシュボードWebページ(p001-dashboard)

このWebページでは、表1に示すWijmoの部品を利用します。詳しい利用法は後述します。

表1 図1のサンプルで利用するWijmoの部品
No. 部品 機能 役割
1 FlexGrid グリッド 日次の売上をグリッド(表)で表示
2 FlexChart チャート 日次の売上をチャート(棒グラフ)で表示
3 RadialGauge 円形ゲージ 売上達成率を表示
4 CollectionView データ操作クラス 全店舗の売上合計を計算

HTMLファイルの基本的な構成

 まず、WebページでWijmoを利用するための、基本的なHTMLファイルの構成(リスト1)を説明します。

[リスト1]HTMLファイルの構成(p001-dashboard/index.html)
<head>
  <!-- WijmoのCSS ...(1)-->
  <link rel="stylesheet" href="wijmo/styles/wijmo.min.css">
  <!-- WijmoのJavaScript ...(2)-->
  <script src="wijmo/controls/wijmo.min.js"></script>
  <script src="wijmo/controls/wijmo.grid.min.js"></script>
  <script src="wijmo/controls/wijmo.chart.min.js"></script>
  <script src="wijmo/controls/wijmo.gauge.min.js"></script>
  <!-- WijmoのJavaScript(カルチャ指定) ...(3)-->
  <script src="wijmo/controls/cultures/wijmo.culture.ja.min.js"></script>
(略:metaタグ、titleタグ、CSS参照)
</head>
<body>
(略:Webページ内容の記述)
  <!-- JavaScript実装の参照 ...(4)-->
  <script src="index.js"></script>
</body>

 <head>要素内でWijmoのファイル群を参照します。(1)はCSSファイル、(2)はJavaScriptファイルです。JavaScriptファイルは、Wijmo全体の共通処理が含まれるwijmo.min.jsのほか、部品の種類ごとに分かれているJavaScriptファイルを個別に参照します。(3)は日本語カルチャが定義されたファイルです。

 <body>要素内には、Wijmoの部品を表示するWebページ内容を記述した後、末尾で(4)の通りJavaScriptファイルindex.jsを参照して、このファイル内に処理を記述します。

Webページで表示するデータの定義

 ダッシュボードWebページで表示するデータは、index.jsにリスト2の通り定義します。

[リスト2]Webページで表示するデータの定義(p001-dashboard/index.js)
// 売上目標 ...(1)
const salesTarget = {
  'store1': 3200000,  // 本店
  'store2': 3800000,  // 駅前店
  'store3': 4200000   // 空港店
};
// 売上データ ...(2)
const salesData = [
  {
    'date': '2024/03/01',
    'store1': 56323,  // 本店
    'store2': 173234, // 駅前店
    'store3': 143212  // 空港店
  },
(略)
];

 (1)は各店舗の売上目標です。store1、store2、store3は、それぞれ本店、駅前店、空港店に対応します。(2)は売上データで、dateに年月日、store1~store3に各店舗の売上を格納したJavaScriptオブジェクトを配列で保持します。

次のページ
Wijmoを活用したダッシュボードの実装

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

提供:メシウス株式会社

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/19341 2024/04/25 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング