Ignite UI for Web Components パッケージの概要

Ignite UI for Web Components は、UI ウィジェット、コンポーネント、デザインツール用の UI キット、および Web コンポーネント用のサポートサービスの完全なセットです。開発者が、最新のデスクトップブラウザー、モバイルエクスペリエンス、およびブラウザーの Web コンポーネント API をターゲットとするプログレッシブ Web アプリ (PWA) 向けの最新の高性能 HTML5 および JavaScript アプリを構築できるように設計されています。

チャートおよびグラフ

Ignite UI for Web Components には、チャートとグラフのライブラリが含まれており、65 種類以上のチャートシリーズと組み合わせを通じて、あらゆる種類のデータを魅力的でインタラクティブなグラフとダッシュボードに視覚化できるライブラリです。速度と美しさを追求し、すべてのモダンブラウザーで動作するように設計されており、完全なタッチ操作とインタラクティブ機能により、あらゆるデバイスでレスポンシブなビジュアルをすばやく構築できます。

ゲージ

Ignite UI for Web Components は、簡単かつ直感的な方法でデータを示すために使用されるラジアルゲージ、リニアゲージとバレットグラフコンポーネントを提供します。ラジアルゲージには、定義済みの形状とスケールを作成するためのさまざまなカスタマイズオプションがあります。リニアゲージは、スケールおよび 1 つ以上の範囲と比較した値の単純なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。バレットグラフコンポーネントを使用すると、ダッシュボードで使用されるメーターとゲージを単純な棒チャートに置き換えて、データの視覚化を作成できます。

マップ

Ignite UI for Web Components 地理マップは、アプリケーションで地理データを視覚化する機能を提供します。マーカー、線、多角形、さらにはインタラクティブなビットマップの形状で、多くの地理的位置で構成されるデータセットを描画できます。複数のマップレイヤーを地理データでオーバーレイし、特定の地理的位置をマークし、カスタムマーカーと色を使用して情報を表示できます。

グリッドと入力

Ignite UI for Web Components は、データグリッド、リスト、ツリー、さらにはスプレッドシートの形式で、わずかな設定でデータをバインドおよび表示できるいくつかのグリッドコンポーネントを提供します。また、フィルタリング、ソート、グループ化、ピン固定などの機能も提供します。

ボタン、入力、レイアウト、メニュー

Ignite UI for Web Components は、依存関係のないアプローチでカプセル化と再利用可能なコンポーネントの概念を使用して、最新の Web アプリケーションを構築できるようにするさまざまなタイプのボタン、入力、メニュー、レイアウトを提供します。ストーリーブックはこちらをご覧ください!これらのコンポーネントは Indigo Design System に基づいており、App Builder によって完全にサポートされており、Sketch、Adobe XD、および Figma 用のすぐに使用できる UI キットによって支えられています。

Ignite UI for Web Components を使用した作業の開始

このセクションでは、Ignite UI for Web Components を使用して Web コンポーネントアプリケーションを作成するための手順を説明します。

IgniteUI CLI をインストールする

アプリケーションを最初から作成し、Ignite UI Web Components を使用するように構成するには、Ignite UI CLI を使用できます。最初の手順には、以下のように各パッケージをグローバルにインストールします。

npm install -g igniteui-cli

使用可能なオプションをガイド付きで体験したい場合は、新しいアプリケーションの作成とセットアップに役立つ手順モードを初期化できます。ガイドを開始するには、ig コマンドを実行するだけです。

ig

次に、フレームワークとして Web Components を選択し、Base プロジェクトテンプレートを選択し、特定のコンポーネント / ビューを追加するか、Complete & Run を選択します。さらに、Ignite UI CLI の詳細についてはこちらを参照してください。

ポリフィルをインストールする

次のコマンドを実行して、Web コンポーネントのポリフィルをインストールします。

次に、Web コンポーネントのポリフィルを index.js にインポートします。

import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';

Ignite UI for Web Components のインストール

アプリケーションで Ignite UI Web Components を使用するには、igniteui-webcomponents パッケージをインストールする必要があります。

npm install igniteui-webcomponents

次に、index.ts ファイルで使用するコンポーネントをインポートする必要があります。次のように defineComponents 関数を使用して 1 つ以上のコンポーネントをインポートできます:

import { defineComponents, IgcAvatarComponent, IgcBadgeComponent } from 'igniteui-webcomponents';

defineComponents(IgcAvatarComponent, IgcBadgeComponent);

defineAllComponents 関数を使用して、すべてのコンポーネントをインポートすることもできます。

import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

[!Note] すべてのコンポーネントをインポートすると、アプリケーションのバンドルサイズが大きくなります。そのため、実際に使用しているコンポーネントのみをインポートすることをお勧めします。

最後の手順は、コンポーネントが適切にスタイル設定されるように、コンポーネントに必要な CSS をインポートすることです。

import 'igniteui-webcomponents/themes/light/bootstrap.css';

コンポーネントをインポートしたら、html で使用できます。

<igc-avatar initials="AZ"></igc-avatar>
<igc-badge></igc-badge>

Charts および Map Web コンポーネントパッケージをインストールする

手順 1 - Web コンポーネントプロジェクトの作成

1 - コマンドラインを開き、wc-html という名前のディレクトリを作成します。

mkdir wc-html

2 - コマンドラインパスを新しく作成したディレクトリに変更します。

cd wc-html

3 - ディレクトリで npm を初期化します。

npm init -y

4 - webpack バンドラーおよび webpack cli を developer dependency としてインストールします。

npm install webpack webpack-cli --save-dev

[!Note] Webpack はモジュールバンドラーです。主な目的は、ブラウザーで使用するために JavaScript ファイルをバンドルすることですが、あらゆるリソースやアセットを変換、バンドル、またはパッケージ化することもできます。

5 - VS Code でプロジェクトを開きます。

code .

6 - 以下のコードを使用して index.html という名前の新しいファイルを作成します。

7 - src という名前の新しいフォルダーを作成し、そのフォルダー内に index.js という名前の新しいファイルを作成します。プロジェクト構造は以下のようになります。

8 - package.json ファイルを、webpack を使用してビルドスクリプトを含めるよう変更します。

  "scripts": {
    "build": "webpack ./src/index.js -o ./dist/ --output-filename index.bundle.js"
  },

[!Note] このスクリプトは webpack を使用して index.js ファイルを index.bundle.js と呼ばれる別のファイルにバンドルし、dist という名前のフォルダーに配置します。

ビルド中に javaScript のメモリ不足 の問題が発生した場合、代わりに以下のビルドコマンドを使用してヒープサイズを増やすことができます。

"scripts": {
    "build": "node --max_old_space_size=8192 node_modules/webpack/bin/webpack src/index.js -o dist/index.bundle.js"
},

手順 2 - ポリフィルのインストール

1 - VS Code でターミナルを開きます ([表示] -> [ターミナル] メニューまたは CTRL + ` キーを押します)

2 - Web コンポーネントのポリフィルで以下のコマンドを入力します。

npm install @webcomponents/custom-elements

3 - Web コンポーネントのポリフィルを index.js にインポートします。

import '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim.js';

手順 3 - Ignite UI for Web Components と lit-html をインストール

1 - npm を使用して Ignite UI for Web コンポーネントをインストールします。この例では、Map Web コンポーネントをインストールします。

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts
npm install --save igniteui-webcomponents-maps
npm install lit-html

2 - Geographic Map モジュールと ModuleManager を index.js ファイルにインポートします。

import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
// module manager for registering the modules
import { ModuleManager } from 'igniteui-webcomponents-core';

3 - ModuleManager で Geographic Map モジュールを登録します。

ModuleManager.register(
    IgcGeographicMapModule,
    IgcDataChartInteractivityModule
);

4 - index.html ファイルの本文に Geographic Map Web コンポーネントを追加します。

<body>
    <igc-geographic-map id="map" height="500px" width="100%">
    </igc-geographic-map>
</body>

手順 4 - Web コンポーネントプロジェクトのビルドと実行

1 - VS Code でターミナルを開き、build スクリプトを実行します。

npm run build

[!Note] このコマンドは、前に作成したビルドスクリプトを実行します。ビルドスクリプトは、dist という名前のフォルダーに index.bundle.js という名前のファイルを生成します。

2 - index.html ファイルの body 要素の最後に index.bundle.js スクリプトを追加します。

<body>
    <igc-geographic-map id="map" height="500px" width="100%">
    </igc-geographic-map>

    <script src="dist/index.bundle.js"></script>
</body>

3 - プロジェクトを実行するには、ローカル開発サーバーを起動します。この例では、Live Server を使用しています。index.html のエディター内で右クリックし、[Live Server で開く] を選択します。

[!Note] Live Server は Visual Studio Code の拡張機能で、静的および動的ページの自動更新機能を備えたローカル開発サーバーを起動できます。この拡張機能は、Visual Studio Code の [拡張機能] タブから、または Visual Studio Marketplace からダウンロードしてインストールできます。

4 - ローカルサーバー上の Web ブラウザーを使用して index.html に移動します。最終結果には、インタラクティブなワールドマップが表示されます。