SHOEISHA iD

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

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

最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用(AD)

JavaScriptライブラリ「Wijmo」のFlexGridをVue.js+ASP.NET Core環境で使ってみよう

最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「Wijmo」の活用

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

 本記事では、グレープシティのJavaScriptライブラリ「Wijmo(ウィジモ)」に含まれるグリッド部品FlexGridを、JavaScriptフレームワークVue.jsおよび、マイクロソフトのサーバー側フレームワークASP.NET Coreと組み合わせて利用する方法を説明します。Visual Studio 2022でVue.jsのプロジェクト環境を整備して、FlexGridを表示させます。ASP.NET Coreでサーバー側にWeb APIを作成して、FlexGridと連携させる方法も説明します。

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

はじめに

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

図1 Wijmoの製品ページ
図1 Wijmoの製品ページ

 Wijmoが提供するUI部品は、単体で利用する他に、Angular、React、Vue.jsといったJavaScriptライブラリ・フレームワークと組み合わせて利用することもできます。過去記事では、WijmoとReactを組み合わせた利用法を紹介しました。

 本記事では、Wijmoに含まれる高機能グリッド部品FlexGridを、Vue.jsと組み合わせて動作させる方法を説明します。今回はクライアント側にVue.jsとWijmoを利用し、サーバー側にはマイクロソフトのフレームワークASP.NET Coreを利用して組み合わせます。関連して、ASP.NET Coreで簡単なWeb APIを自作する方法も説明します。

対象読者

  • UI部品としてWijmoの利用を検討されている方
  • Vue.jsで利用できるUI部品を試したい方
  • ASP.NET CoreのWeb API実装について知りたい方

必要な環境

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

  • Windows 10 64bit版
  • Wijmo 5.20221.842
  • Vue.js 3.2.37
  • Microsoft Visual Studio Community 2022 17.2.6
  • Node.js 16.16.0 64bit版
  • Microsoft Edge 103.0.1264.77

 サンプルコードに含まれるソリューションファイル(*.sln)をVisual Studio 2022で開いて、ソースコードの確認や実行が行えます。

Visual StudioのプロジェクトでVue.jsが動作する環境を整備する

 Visual Studioには、クライアント側にAngularやReactを利用したプロジェクトのテンプレートがありますが、Vue.jsのテンプレートは現状ありません。そこでまず、Angularを利用するプロジェクトテンプレートをもとに、Vue.jsを実行させる環境を作成します。

図2 Visual Studioで実行したVue.jsアプリ(P001VueOnVS)
図2 Visual Studioで実行したVue.jsアプリ(P001VueOnVS)

 Visual Studioでプロジェクトを新規作成します。プロジェクトテンプレートは「Angular での ASP.NET Core」を選択します。

図3 Visual StudioでAngularアプリのテンプレートを選択してプロジェクトを作成
図3 Visual StudioでAngularアプリのテンプレートを選択してプロジェクトを作成

 プロジェクト名と生成先パスの設定を行った後、フレームワークの選択では「.NET 6.0」を選択し、それ以外はデフォルト設定のままで「作成」をクリックします。そのままプロジェクトを実行させて、表示されるWebページURLのポート番号(図4では「44433」)をメモしておきます。このポート番号は、Visual Studioでプロジェクトを生成する都度、異なる値が設定されます。

図4 Visual Studioで生成直後のAngularアプリを実行させてポート番号をメモ
図4 Visual Studioで生成直後のAngularアプリを実行させてポート番号をメモ

 生成されたVisual Studioプロジェクト内の「<プロジェクト名>\ClientApp」フォルダーがAngularのプロジェクトです。今回はこのプロジェクトをVue.jsのもので置き換えるので、もとのClientAppフォルダーを別の場所に移動しておきます。

図5 Visual Studioプロジェクトに含まれるClientAppフォルダー(P001VueOnVS)
図5 Visual Studioプロジェクトに含まれるClientAppフォルダー(P001VueOnVS)

 Visual Studioプロジェクト内の<プロジェクト名>フォルダーに移動して、「npm init vue@latest」コマンドでVue.jsのプロジェクトを生成します。プロジェクト名は元のVisual Studioプロジェクトと同じにします。プロジェクト生成後、フォルダー名をClientAppに変更します。

 Visual Studioから動作できるように、Vue.jsプロジェクトを設定します。まず、元のAngularプロジェクトからaspnetcore-https.jsをコピーして配置します。このファイルには、プロジェクト実行時に利用するSSL証明書を生成する処理が記述されています。

 次に、Vue.jsプロジェクトの設定ファイルvite.config.jsを調整します。設定を記述するdefineConfigメソッドの前に、パラメーターを生成するリスト1のコードを追加します。

[リスト1]Vueプロジェクトに設定するパラメーターを生成する処理(P001VueOnVS/P001VueOnVS/ClientApp/vite.config.js)
// 以下で利用するimportの追加
import fs from 'fs'
import path from 'path'
// SSL証明書パスの取得(aspnetcore-http.jsから移植)...(1)
// 証明書を配置するフォルダー ...(1a)
const baseFolder =
  process.env.APPDATA !== undefined && process.env.APPDATA !== ''
    ? `${process.env.APPDATA}/ASP.NET/https`
    : `${process.env.HOME}/.aspnet/https`;
// 証明書のファイル名 ...(1b)
const certificateArg = process.argv.map(arg => arg.match(/--name=(?.+)/i)).filter(Boolean)[0];
const certificateName = certificateArg ? certificateArg.groups.value : process.env.npm_package_name;
// ファイル名が生成できないときはエラー ...(1c)
if (!certificateName) {
  console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<> explicitly.')
  process.exit(-1);
}
// 証明書と秘密鍵のフルパス ...(1d)
const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
const keyFilePath = path.join(baseFolder, `${certificateName}.key`);

// プロキシー設定(Angularプロジェクトのproxy.conf.jsから移植)...(2)
const env = process.env; // proxy.conf.jsの記述と合わせるため
const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:23032';

 (1)は、aspnetcore-http.jsに記述されている、SSL証明書のパスを生成する処理をコピーしたものです。(1a)で証明書を配置するフォルダー、(1b)で証明書のファイル名を生成して、(1c)で証明書ファイル名が正しく生成されたことを確認後、(1d)で証明書(*.pemファイル)と秘密鍵(*.keyファイル)のフルパスを生成しています。

 (2)は、元のAngularプロジェクトのプロキシー設定ファイルproxy.conf.jsに記述されている、プロキシーのURLを生成する処理をコピーしたものです。プロキシーのターゲットとして、ASP.NET Coreがホストする「http://localhost:<ポート名>」を生成します。

 生成したパラメーターは、リスト2の通りdefineConfigメソッドに設定します。

[リスト2]Vueプロジェクトのパラメーターを設定する処理(P001VueOnVS/P001VueOnVS/ClientApp/vite.config.js)
export default defineConfig({
(略)
  // このserver部分を追加 ...(1)
  server: {
    // SSL証明書の設定 ...(2)
    https: {
      key: fs.readFileSync(keyFilePath),
      cert: fs.readFileSync(certFilePath)
    },
    // プロキシーの設定 ...(3)
    proxy: {
      '/weatherforecast': {
        target: target,
        secure: false,
        headers: {
          Connection: 'Keep-Alive'
        }
      }
    }
  }
})

 defineConfigメソッドの引数内に、(1)のserverを追加して、その中にSSL証明書(2)とプロキシー(3)の設定を記述します。SSL証明書の設定では、リスト1(1d)で取得した証明書と秘密鍵のパスを指定します。またプロキシーの設定では、ASP.NETのWeb API「/weatherforecast」に対して、リスト1(2)で取得したターゲットなどを指定します。このプロキシー設定は、Vue.jsクライアントからNode.jsのWebサーバーに送信されるWeb APIへのアクセスを、ASP.NET CoreのWebサーバーに中継するためのものです。プロキシー設定については、WijmoとReactを組み合わせて利用した過去記事も参考にしてください。

 最後に、package.jsonのscriptsに、Visual Studioから実行するためのコマンドを、リスト3(1)(2)の通り追加します。

[リスト3]Vue.jsアプリを実行するコマンドの追加(P001VueOnVS/P001VueOnVS/ClientApp/package.json)
"scripts": {
  "prestart": "node aspnetcore-https",  // プロジェクト実行前処理...(1)
  "start": "vite --port 44433",         // ポート番号を指定して実行...(2)
(略)
},

 (1)は、「start」の前に「pre」をつけて「prestart」と指定することで、startコマンドの前に実行される処理になります(この「pre」の機能はnpmが提供するものです)。ここではプロジェクト実行前にaspnetcore-https.jsを実行してSSL証明書を生成させます。(2)のstartは、Visual Studioから呼び出されるプロジェクト実行処理の設定で、ポート番号を指定してプロジェクトを実行させます。ここでポート番号は、Angularプロジェクト実行時(図4)にメモしておいた番号を指定します。

 以上の設定を行った後、Visual Studioでプロジェクトを実行すると、WebブラウザーにVue.jsの実行結果が図2の通り表示されます。

次のページ
Vue.js上でFlexGridを表示

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
最先端テクノロジーに対応した高速・軽量なJavaScript UIライブラリ「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/16365 2022/09/21 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング