SHOEISHA iD

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

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

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

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用!~複数チャートをタブパネルで切り替え表示~

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

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

 本連載ではグレープシティのJavaScriptライブラリ「Wijmo(ウィジモ)」の部品を複数組み合わせて利用する例を、複数回にわたって紹介していきます。初回となる前回は、Webページの最終的な完成イメージを示し、プロジェクトの生成やWijmoの基本的な設定方法を説明するとともに、FlexGridの表とFlexChartのチャートにデータを表示させました。今回はデータの種類を増やして複数のチャートを作成し、タブパネルで切り替え表示できるようにしていきます。

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

はじめに

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

図1 Wijmoの製品ページ(https://www.grapecity.co.jp/developer/wijmo)
図1 Wijmoの製品ページ

 本連載では、Wijmoが提供するさまざまな部品を組み合わせて利用する例を、全4回に分けて紹介します。最終的な完成イメージは、都道府県ごとの気象データを表とチャートで表示する、図2のWebページです。

図2 本連載で作成する気象データWebページの完成イメージ
図2 本連載で作成する気象データWebページの完成イメージ

 前回記事は初回として、プロジェクトの生成方法やWijmoの基本的な設定方法を説明するとともに、図2③の表を表示するFlexGridと、④のチャートを表示するFlexChartを利用して、図3の状態まで実装しました。

図3 前回までに実装したWebページ
図3 前回までに実装したWebページ

 今回は図3の実装をもとに、図2⑤のタブパネルを導入して、複数のチャートを切り替え表示できるように実装していきます。

対象読者

  • UI部品としてWijmoの利用を検討されている方
  • Wijmoのさまざまな機能を使ってみたい方
  • 一部のUI部品しか使ったことのないWijmoユーザーの方

必要な環境

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

  • Windows 10 64bit版
  • Wijmo 5.20221.857
  • Node.js 18.12.1 64bit版
  • Microsoft Edge 108.0.1462.54

 サンプルコードでは、Webページを表示するため、Node.js上で動作する簡易Webサーバーlite-serverを利用しています。サンプルコードを実行するには、プロジェクトフォルダーにWijmoの配布物をコピーして、「npm install」コマンドでlite-serverなどをインストール後、「npm run start」コマンドを実行すると、Webブラウザーで「http://localhost:3000」がロードされてWebページが表示されます。

 プロジェクトの構成や、前回までの実装内容については、過去記事(第1回)を参照してください。

タブパネルによる切り替え表示を実装(1)

 図3の実装をもとに今回の実装作業を行うと、図4のWebページが完成します。チャートの上にタブパネルが表示されます。

図4 今回実装するWebページ(p001-wijmo)
図4 今回実装するWebページ(p001-wijmo)

 タブパネルをクリックすると、図5の通り、「気温」「降水量」「日照時間」「風速」「湿度」のチャートを切り替えて表示できます。

図5 タブパネルでチャートを切り替える様子(p001-wijmo)

図5 タブパネルでチャートを切り替える様子(p001-wijmo)

 このタブパネルを実装する手順を、以下で順に説明していきます。

データ項目の追加

 Webページで表示するデータは、data/data.csvファイルに記述されています。前回は気象庁の「過去の気象データ・ダウンロード」から、2022年10月の札幌の最高気温と最低気温データをダウンロードして利用しましたが、今回はさらに降水量、日照時間、風速、湿度のデータ項目を追加して、図6の状態に加工して利用します。

図6 Webページに表示するデータのCSV(p001-wijmo/data/data.csv)
図6 Webページに表示するデータのCSV(p001-wijmo/data/data.csv)

 各データの項目名と内容を、表1に示します。後述する表やチャートの実装では、表示するデータを表1の項目名で指定します。

表1 data.csvのデータ項目名と内容(p001-wijmo/data/data.csv)
No. 項目名 内容
1 date 日時
2 maxTemperature 最高気温(℃)
3 minTemperature 最低気温(℃)
4 precipitation 降水量(mm)
5 sunshineHours 日照時間(時間)
6 windSpeed 風速(m/s)
7 humidity 湿度(%)

次のページ
タブパネルによる切り替え表示を実装(2)

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

  • 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/17180 2023/02/14 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング