SHOEISHA iD

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

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

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

JavaScriptライブラリ「Wijmo」のさまざまな部品を徹底活用!~AutoCompleteコントロールで実装する多機能ドロップダウンリスト~

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

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

ドロップダウンリストによる都道府県の切り替え

 図3の実装をもとに今回の実装作業を行うと、図4のWebページが完成します。画面上部に都道府県のドロップダウンリストが追加されます。

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

 マウスの操作やキーボードの上下キーでドロップダウンリストから都道府県を選択すると、図5の通り、対応する都道府県のデータが表やチャートに表示されます。

図5 ドロップダウンリストで都道府県のデータを切り替え表示する様子(p001-wijmo)

図5 ドロップダウンリストで都道府県のデータを切り替え表示する様子(p001-wijmo)

 このドロップダウンリストに、都道府県の一部をひらがなやアルファベットで入力すると、その内容で部分一致検索が行われ、対応する都道府県がリストされます。

図6 入力文字列から都道府県を部分一致検索(p001-wijmo)
図6 入力文字列から都道府県を部分一致検索(p001-wijmo)

 この「選択も入力もできるドロップダウンリスト」は、WijmoがAutoCompleteコントロールとして提供します。AutoCompleteコントロールを利用した実装の手順を、以下で順に説明していきます。

都道府県の一覧データを準備

 AutoCompleteコントロールに表示する都道府県の一覧は、JavaScriptオブジェクトの配列として、JavaScriptファイル(index.js)にリスト1の通り記述します。

[リスト1]都道府県の一覧データ(p001-wijmo/index.js)
const prefData = [
  { id: 1, region: '北海道', name: '北海道', kana: 'ほっかいどう', alpha: 'Hokkaido' },
  { id: 2, region: '東北', name: '青森県', kana: 'あおもりけん', alpha: 'Aomori' },
(中略)
  { id: 47, region: '沖縄', name: '沖縄県', kana: 'おきなわけん', alpha: 'Okinawa' }
];

 配列要素のJavaScriptオブジェクトは、表1の属性を含むようにします。idは、都道府県に対して1~47の番号を設定します。regionには都道府県が属する地方(「東北」や「関東」など)、nameに都道府県名、kanaとalphaには都道府県名のかなとアルファベットを指定します。

表1 都道府県の一覧データに含まれる属性(p001-wijmo/index.js)
No. 項目名 内容
1 id 都道府県の番号
2 region 都道府県が含まれる地方
3 name 都道府県名(漢字)
4 kana 都道府県名(かな)
5 alpha 都道府県名(アルファベット)

regionの使い道

 都道府県が含まれる地方を格納する表1のNo.2「region」属性は、今回の実装では利用しません。次回記事で、都道府県を地方別にツリー表示するために利用する予定です。

各都道府県の気象データを準備

 前回までは、画面に表示する気象データはdata/data.csvファイルの1ファイルに(北海道のデータを)格納していました。今回は、ドロップダウンリストで指定された都道府県の気象データを表示するため、各都道府県の気象データをdata/<都道府県の番号>.csvファイルに格納するようにします。これらのCSVファイルは、気象庁の「過去の気象データ・ダウンロード」から、2022年10月のデータをダウンロードして、図7の状態に加工して利用します。

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

 各データの項目名と内容を、表2に示します。内容は前回記事で利用したdata.csvと同一です。このCSVファイルを、各都道府県の分、47ファイル(1.csv~47.csv)用意します。

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

AutoCompleteコントロールを表示するHTML・CSSファイルの記述

 以下では、AutoCompleteコントロールを表示できるよう、HTML・CSSファイルを調整していきます。まず、Webページのファイル(index.html)では、WijmoのJavaScriptを参照する記述を、リスト2の通り修正します。

[リスト2]index.htmlで参照するWijmoのJavaScript(p001-wijmo/index.html)
<script src="wijmo/controls/wijmo.min.js"></script>
<script src="wijmo/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="wijmo/controls/wijmo.chart.min.js"></script>
<script src="wijmo/controls/wijmo.grid.min.js"></script>
<script src="wijmo/controls/wijmo.nav.min.js"></script> <!-- 第2回で追加 -->
<script src="wijmo/controls/wijmo.input.min.js"></script> <!-- 今回追加 -->

 リスト2で参照しているWijmoのJavaScriptファイルを表3に示します。No.6が今回追加したファイルです。AutoCompleteコントロールが含まれるwijmo.inputモジュールのファイルwijmo.input.min.jsの参照を追加します。

表3 index.htmlから参照するWijmoのJavaScriptファイル(p001-wijmo/index.html)
No. ファイル名 役割
1 wijmo/controls/wijmo.min.js Wijmo本体
2 wijmo/controls/cultures/wijmo.culture.ja.min.js カルチャ(日本語)ファイル
3 wijmo/controls/wijmo.chart.min.js チャート(FlexChart)のファイル
4 wijmo/controls/wijmo.grid.min.js グリッド(FlexGrid)のファイル
5 wijmo/controls/wijmo.nav.min.js タブパネルなどナビゲーション部品のファイル
6 wijmo/controls/wijmo.input.min.js AutoCompleteなど入力部品のファイル

 index.htmlの<body>配下は、従来の表・チャート・タブパネルの上部にAutoCompleteコントロールを表示するため、リスト3の構造とします。

[リスト3]index.htmlの構造(p001-wijmo/index.html)
<body>
    <div id="vertical-container"><!-- 子要素を縦に並べる ...(1)-->
        <div id="select-area"><!-- 画面上部に対応 ...(2)-->
            <h3>AutoComplete</h3>
            選択:
            <div id="autoCompletePref"></div><!-- 都道府県リスト ...(3) -->
        </div>
        <div id="horizontal-container"><!-- 画面下部に対応 ...(4)-->
            <div id="grid-container">
                <!-- 表の記述 -->
            </div>
            <div id="chart-container">
                <!-- チャートとタブパネルの記述 -->
            </div>
        </div>
    </div>
(略)
</body>

 (1)の<div>要素の配下に画面上部の要素(2)と下部の要素(4)を配置します。画面上部(2)には、都道府県リストを表示する<div>要素(3)を配置します。画面下部(4)には、前回までに実装した表、チャート、タブパネルを配置します。

 リスト3のHTMLに対応して、CSS(index.css)にはリスト4の記述を追加します。(1)はリスト3(1)の<div>要素で子要素を縦に並べる指定、(2)は都道府県リストの空白調整です。

[リスト4]リスト3に対応するCSSの記述(p001-wijmo/index.css)
#vertical-container { /* (1) */
    display: flex;
    flex-direction: column;
    width: 100%;
}

#select-area { /* (2) */
    padding: 10px;
}

AutoCompleteコントロールを表示するJavaScriptの記述

 次にJavaScriptファイル(index.js)で、AutoCompleteコントロールの表示と挙動を実装していきます(リスト5)。

[リスト5]AutoCompleteコントロールを表示するJavaScriptの実装(p001-wijmo/index.js)
const autoCompletePref = new wijmo.input.AutoComplete('#autoCompletePref', {
  itemsSource: prefData,
  selectedValuePath: 'id',
  displayMemberPath: 'name',
  searchMemberPath: 'alpha,kana',
  // プルダウン変更時、データを再検索してグリッドとチャートに反映 ...(1)
  selectedIndexChanged: (comboBox, eventArgs) => {
    fetchAndApply(comboBox.selectedValue);
  }
});

 リスト3(1)の要素を選択するCSSセレクター「#autoCompletePref」を指定してwijmo.input.AutoCompleteクラスのコンストラクターを実行します。第2引数はオプション指定で、指定内容は表4の通りです。No.4でsearchMemberPathを指定することで、アルファベットとかなをAutoCompleteに直接入力して検索できるようになります。

表4 AutoCompleteコントロールに指定するオプション(p001-wijmo/index.js)
No. ファイル名 役割

設定値

1 itemsSource リストに表示するデータ prefData(リスト1の都道府県データ)
2 selectedValuePath 選択値として取得するデータ属性 id
3 displayMemberPath リストに表示するデータ属性 name
4 searchMemberPath 入力値の検索に使用するデータ属性 alpha,kana
5 selectedIndexChanged リストの選択が変更されたときの処理 (後述)

指定された都道府県のデータを取得・反映する処理

 リスト5(1)でAutoCompleteの選択が変更されたときに実行されるfetchAndApplyメソッドで、指定された都道府県のデータを取得して画面に反映します。処理内容をリスト6に示します。

[リスト6]表やチャートに表示するデータを取得する処理(p001-wijmo/index.js)
function fetchAndApply(prefId) {
  // CSVファイルを読み込み ...(1)
  fetch(`data/${prefId}.csv`)
    .then(res => res.text())
    .then(text => {
      // CSVファイルを解析
      csv_parse.parse(text, {
        columns: true,
        cast: true,
        cast_date: true
      }, (err, records) => {
        // 解析したデータをFlexGridとFlexChartのitemsSourceに設定
        grid1.itemsSource =
        chart1.itemsSource =
        chart2.itemsSource =
        chart3.itemsSource =
        chart4.itemsSource =
        chart5.itemsSource = records;
        // チャートのタイトルに都道府県名を設定 ...(2)
        chart1.header =
        chart2.header =
        chart3.header =
        chart4.header =
        chart5.header = autoCompletePref.selectedItem.name;
      })
    });
}

 前回記事の実装内容とほぼ同一ですが、CSVファイルの読み込み処理(1)は、fetchAndApplyメソッドの引数prefIdで与えられるIDの都道府県に対応するCSVファイル(data/<都道府県のID>.csv)を読み込むように修正します。また(2)では、各チャートのタイトルとして表示されるheader属性に、AutoCompleteで選択された都道府県名を指定します。

 以上の改造を行うと、AutoCompleteコントロールで都道府県を選択したり直接入力したりして、対応する都道府県のデータを表やチャートに表示できるWebページが実現できます。

まとめ

 本連載では、全4回にわたり、Wijmoが提供するUI部品を複数組み合わせて本格的なWebページを作成します。第3回となる今回は、AutoCompleteコントロールを利用して、各都道府県を選択して、対応するデータを表やチャートに表示できるようにしました。

 次回はいよいよ最終回です。図2①の都道府県ツリー表示を追加して、Webページを完成させます。

参考資料

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

  • 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/17291 2023/02/21 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング