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 モジュールと ModuleManagerindex.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 に移動します。最終結果には、インタラクティブなワールドマップが表示されます。