バージョン

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

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

Ignite UI™ はきれいでモダンな Web アプリケーションを作成するための高度な HTML5 + ツールセットです。jQuery および jQuery UI をベースとしたチャート、データ視覚化マップ、(階層編集可能な) グリッド、ピボット グリッド、エンハンスト エディター (コンボボックス、マスクエ ディター、HTML エディター、日付ピッカー、など)、柔軟なデータソース コネクタなど、機能豊かで高性能な UI コントロールおよびウィジェットを提供します。

Ignite UI は 2 つのバージョンで提供します。

  • オープン ソース版 - 完全なツールセットのサブセットを含む無償版。グリッドおよびデータ ビジュアライゼーションのコントロールは含まれません。詳細については、GitHub™ の Ignite UI OSS プロジェクトを参照してください。
  • 完全版 - 完全なツールセットが含まれた有償版。

ダウンロードおよびインストール

Ignite UI はダウンロード ページからダウンロードできます。 お使いのオペレーティング システムにより、試用版およびライセンス版の両方の製品をインストールするためにいくつかのオプションがあります。

Windows の場合。

  • プラットフォーム インストーラー: プラットフォーム インストーラーは Windows のみのオンライン インストーラであり、Ignite UI をはじめとして、すべての Infragistics 開発ツール、そのヘルプとサンプルを管理 (インストール、更新、アンインストール) するためのウィザードのようなエクスペリエンスを提供します。

  • すべての製品のダウンロード: 製品、ヘルプ、およびサンプルを含む Windows のみのオフライン MSI インストーラー。

MacOs、Linux、Unix 、などの場合。

Ignite UI をプロジェクトにホストする

Ignite UI をプロジェクトにホストするために複数のオプションがあります。

NPM、JSPM、NuGet の使用

Ignite UI では、NPM,、JSPM、NuGet、複数のパッケージ マネージャーをサポートします。

NPM (Ignite UI オープン ソースをインストールします)

    npm install ignite-ui

完全ライセンス版を構成する方法については、Ignite UI npm パッケージの使用トピックを参照してください。

NuGet (Ignite UI トライアル版 をインストールします)

    Install-Package IgniteUI

ライセンス版を構成する方法については、Ignite UI NuGet パッケージの使用トピックを参照してください。

JSPM (Ignite UI オープン ソースをインストールします)

    jspm install npm:ignite-ui

完全ライセンス版を構成する方法については、Ignite UI コントロールで System.JS を使用トピックを参照してください。

CSS および JavaScript 参照の追加

Ignite UI がj Query および jQuery UI ライブラリに依存するため、Ignite UI スクリプトの前にそれへの参照を追加する必要があります。また、Ignite UI コントロールをページに追加するために複数のオプションがあります。

  • 結合されたバンドル ファイルおよび圧縮化されたバンドル ファイルの参照 - インストールには、タイプごとにコントロールがグループ化された、結合されたファイルおよび圧縮されたファイルが含まれています。infragistics.core.js (必須)、グリッドなどの Line of Business コントロールが含まれる infragistics.lob.js、チャートなどの Data Visualization コントロールが含まれる infragistics.dv.js、すべての Excel エクスポートに関連するロジックを含む infragistics.excel-bundled.js、スプレッドシート ユーザー インターフェイスの実装を含む infragistics.spreadsheet-bundled.js、およびすべてのスケジューラに関連するロジックを含む infragistics.scheduler-bundled.js があります。詳細については、必要なリソースの手動で追加するトピックを参照してください。
  • 個別のコントロール ファイルを参照する - 詳細については、Ignite UI での JavaScript ファイル トピックを参照してください。
  • Infragistics Loader の使用 - Infragistics Loader は Ignite UI などのファイルを自動的に読み込みます。コントロール ファイルを手動で参照する手間を省きます。詳細については、 Infragistics Loader による必要なリソースを自動で追加する トピックを参照してください。
  • AMD Loader の使用 - Ignite UI は AMD と互換性があるため、一般的な AMD ローダーで使用できます。

Ignite UI ボイラープレート HTML ページのサンプル (CDN リンクを使用)

次のコードは、Ignite UI の使用を開始するために必要な参照 (CDN リンク) を含むボイラープレート HTML ページのサンプルを表しています。

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

    <style>

        /* ----- CSS Goes Here ----- */

    </style>
</head>
<body>

    <!-- ----- HTML Goes Here ----- -->

    <table id="grid"></table>

    <!-- JavaScript Library Dependencies -->
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>    
    <script>

        $(function () {

            // ----- JavaScript Goes Here ----- //

        });

    </script>

</body>
</html>

最初のコントロールの追加

直接、またはページ デザイナーを使用する、という 2 つのオプションがあります。

igGrid を直接に追加

igGrid をページ デザイナーを使用して追加

Ignite UI ページ デザイナーは、マウスのみの使用で Ignite UI コントロールを構成する完全なデザイナー エクスペリエンスを提供します。 ツールボックス (右側) からページ デザイン エリア (左) に igGrid を追加するために、[リストおよびピッカー] セクションから Grid コントロールをドラッグアンドドロップします。それから、プロパティ エディターを使用してグリッドを構成します。構成後、生成されたページをコピーします。

必要最低限

Ignite UI のカスタム ダウンロード ページ には、プロジェクトで使用する Ignite UI コントロールと機能のみを選択し、最大のページ読み込みパフォーマンスのための、最適化された JavaScript ファイルおよび CSS ファイルをダウンロードするオプションがあります。

CDN リンクの使用

プロジェクトに Ignite UI スクリプト ファイルをホストする代わりに、Ignite UI CDN リンクを使用できます。インターネット アプリケーションの場合、通常 CDN は、社内でホストするよりすばやくエンド ユーザーにファイルを提供できます。

以下に、Ignite UI トライアル版のリンクをリストします。詳細については、Ignite UI 対応 Infragistics コンテンツ配信ネットワーク (CDN) トピックを参照してください。

    <!-- Ignite UI Required Combined CSS Files (Trial) -->
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />

    <!-- JavaScript Library Dependencies -->
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <!-- Ignite UI Required Combined JavaScript Files (Trial) -->
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>

TypeScript の定義

Ignite UI® は、強い型付け、コンパイル時間のチェック、intellisense 機能を利用できるようにTypeScript の型定義を提供します。詳細については、 TypeScript での Ignite UI の使用トピックを参照してください。

AngularJS 拡張子

Ignite UI AngularJS 拡張子は、AngularJS アプリケーションで使用されるコントロールの両方向のデータ バインディングおよび宣言的初期化を提供します。詳細については、 AngularJS での Ignite UI の使用トピックを参照してください。

Angular 2 拡張子

Ignite UI Angular 2 拡張子は、Angular 2 アプリケーションで使用されるコントロールの両方向のデータ バインディング、宣言的初期化、ネイティブ API を提供します。詳細については、GitHub で Ignite UI Angular 2 拡張子 (英語) を参照してください。

ReactJS 拡張子

Ignite UI ReactJS 拡張子は、JSX マークアップおよび React API の初期化を提供しします。詳細については、GitHub で Ignite UI React 拡張子 (英語) を参照してください。

ASP.NET MVC ラッパー

Ignite UI ASP.NET MVC ラッパーは、モデルおよびビューチャートの初期化およびサーバー側リモート要求の処理をサポートします。詳細については、「コントロールを MVC プロジェクトに追加」トピックを参照してください。

関連コンテンツ

トピック

オンラインで表示: GitHub