Daizen Ikehara

インフラジスティックス・ジャパン株式会社の元デベロッパー エバンジェリスト、現製品担当の Blog

Archives

[WPF] Microsoft Connect(); を終えてInfragistics WPFコントロールと.NET Core 3

昨晩(というか、本日未明)、Microsoft Connect (); が開催されました!私は夢の中でしたが、日本からご覧になったかたが多かった模様です。

その中でも、.NET Core 3 Preview 1がリリースされたというニュースとインフラジスティックスのWPFコントロールについて取り上げてみたいと思います。

.NET Core 3 Preview 1

Announcing .NET Core 3 Preview 1 and Open Sourcing Windows Desktop Frameworks

.NET Core 3では、Windowsデスクトップ向けのフレームワークである、Windows FormsやWPFがサポートされることになります。(注:MacOSなどで動くというわけではありません

このため、Windows FormsやWPFでEntity Framework 6や、.NET Core 3に含まれるさまざまな新機能を利用することができます。

個人的には、Windows以外で上記のフレームワークを完全には動作させる・サポートするのは難しいのではないかなー?と思っていますが、もしかしたら将来的には可能になるのかもしれません。現時点では、.NET Coreを用いてWindowsデスクトップアプリを作れると考えておいた方が良いでしょう。

さらに、Windows Forms、WPF、WinUIがオープンソース化されました。どんな実装になっているのかとても興味深々ですね!

インフラジスティックスコントロールと.NET Core3

さて、インフラジスティックスは10年以上WPFに対応するUIコントロールを提供してきました。.NET Core 3の正式リリースを待ったうえで我々のコントロールもWPF・Windows Forms共にサポートを開始する予定です。

また、先月、XAML製品のプロダクトオーナーである、Brian Lagunasから下記のエントリが公開されていますが、既存のインフラジスティックスWPFコントロールを.NET Core 3で動作させるということも確認しています。

Brian Lagunas - Building .NET Core 3 Apps with Infragistics Ultimate UI for WPF

.NET Core 3 WPFアプリ上でxamBusyIndicatorと、xamDiagramを動作させた模様

  

デザイナーがサポートされていない、あるいはビルド時にエラーになってしまうなど既知の問題もあるようですが、.NET Core 3側、弊社コントロール側の修正が今後行われていくことになります。

IGOutlook on .NET Core 3

我々は、WPF対応UIコントロールをはじめとして多くのサンプルアプリケーションをご用意していますが、その中でもリボン、グリッド、カード、ツリー、スケジュールなど数多くのコントロールを利用しOutlookを模したサンプル、IGOutlookをご用意しています。

このIGOutlookを.NET Core 3に実験的に対応させたソースコードがGitHub上で公開されています。

GitHub – Infragistics/IgOutlook-NetCore3

次の手順でローカル環境で動かすことができました。試してみたいという方はぜひ

  1. .NET Core 3 SDK (Preview) をインストール
    image
  2. VS2017を使っていたので、最新に更新したのち、オプションのプロジェクトおよびソリューションから [.NET Core SDKのプレビューを使用する]にチェック。
    これを入れないとプロジェクトが読み込めませんでした。
    image
  3. GitHubからソースをダウンロード・VSで開く
    image
  4. ソリューションを開き、Nugetパッケージの復元を実施
    インフラジスティックスWPFコントロールについてはNuGetパッケージを使用しているため、こちらのドキュメントを基にプライベートNuGetフィードを設定 (注:プライベートNuGetフィードへのアクセスには製品サブスクリプションを持っている必要があります。ここらへん何とかならんかな?)
    Infragistics NuGetパッケージソース
  5. ソリューション全体をビルドし、IGOutlookプロジェクトを実行
    日本語化されていました。Brianは日本語を勉強しているとのことだったので自分で日本語化したんでしょうか?
    image

今後も.NET Core 3関連については情報を出していこうと思いますのでご期待ください!

[18.2] Ultimate UI for Windows Forms 2018 Vol.2新機能


安定のWindows Formsですが、まだまだ新機能が追加されています!今回のリリースでは他のプラットフォームでも追加されて機能が提供されました!

まずは共通部分はこちらです。詳細はそれぞれWPFの新機能エントリでご説明していますのでご覧ください。

さらに、Windows FormsのExcelスプレッドシートにはセルの書式設定ダイアログが追加されました。

    Windows Forms Excelスプレッドシートコントロール

    いわるゆるExcelのセルで右クリックなやつです。Excelかと思えるほどです。説明不要だと思いますのでスクリーンショットをご覧ください!

    表示形式タブ

    image33

    配置タブ

    image34

    フォントタブ

    image35

    罫線タブ

    image36

    塗りつぶしタブ

    image

    保護タブ

    image37

    このようにデスクトップ向けコントロール製品では多くの機能が共通化され進化を続けています。ぜひ、トライアルでお試しください!

    Screen Shot 2018-11-08 at 14.52.20

    まとめ

    2018 Vol.2 の新機能の詳細は製品ヘルプでも確認いただけます。

    キャンペーン情報

    Ultimate UI for Windows Formsを収録しているInfragistics Ultimateやその他の製品を特価でご購入いただけるキャンペーンを実施中です。お見逃しなく!

    [18.2] Ultimate UI for WPF新機能その3 – Excelスプレッドシート + NuGetフィード

    前回はExcelファイルの作成や読み込みを行えるライブラリの新機能をご紹介しましたが、今回のそのライブラリを基盤として構築されているExcelライクなスプレッドシートコントロールの機能強化ポイントと、最新ビルドを利用可能になったNuGetフィードについてご紹介します。Ultimate UI for WPF 2018 Vol.2の新機能のご紹介としては一区切りとなります。

    XamSpreadsheetコントロール

    XamSpreadsheetコントロールは、Microsoft Excelが提供するUIや機能を模したスプレッドシートコントロールです。前述の通り、Excelライブラリと連動するため、カスタムアプリケーションにExcelの一部機能を埋め込むことができるようになります。報告書や見積もりなどのテンプレートをExcelファイルとして既に有している場合、そちらをアプリケーション上で読み込みカスタマイズするというった用途で利用できます。

    今回のアップデートでは、ユーザーの並び替え、絞り込みといった操作をサポートするUIや機能を主に拡張しました。

    カスタムソートダイアログ

    Excelでは入力されたデータを並び替えるというシナリオが必ず出てきます。その際にソートの優先度を複数列にまたがって設定できるように並び替えのダイアログが用意されていますが、XamSpreadsheetでも同様のダイアログを追加しました。

    image

    Top10フィルターダイアログ

    データをフィルタリングする際に任意の上位、下位項目、あるいは、パーセントで絞り込むことができるようになりました。これもExcelで実装されている機能の再現ですね。

    image

    フィルターとソートの機能向上

    さらに、2018 Vol.1で追加されたオートフィルタでは対応できていなかった、前景色や塗りつぶしの色、アイコンを基にした絞り込みと並び替えにも対応しました!

    image

    image

    選択の解除

    複数のセルや行を一度に選択した際に一部の選択を会場する、というExcelでよく使われるオペレーションに対応しました。

    下記のように範囲を選択している場合は矩形が表示されます。

    image

    チェリー、レッド、オレンジ、オレンジのセルを選択範囲から外したい場合は、CTRLキーを押したまま該当するセルをクリックすることで選択を解除できるようになりました。

    image

    このように、XamSpreadsheetコントロールにおけるExcel機能の再現性が向上しています。

    NuGetフィードからCIビルドを取得

    最後にご紹介するのは、CIビルドの提供開始についてです。

    通常、年2回のバージョンアップに合わせて新機能をご提供し、さらに約3カ月に1回の頻度で不具合の修正を含むサービスリリースを提供してきました。この2018 Vol.2リリースに合わせて、CIビルドの提供を開始しました。

    これは現在実装中の新機能やご報告いただいた不具合修正を取り込んだ開発中のビルドを先行公開することで新機能を公開前に試用したり、不具合の修正をご確認いただけるようになります。

    正式リリースとしては、バージョンアップ、そしてサービスリリースのタイミングとなるため、本番環境での利用はサポートしていませんが、一刻もはやく確認したい、という場合には最適です。

    CIビルドを利用する場合は、Visual Studioのオプションからインフラジスティックスが提供するWPF用のプライベートNuGetフィード(https://packages.infragistics.com/nuget/licensed)を登録いただく必要があります。

    image

    [プレリリースを含める]をチェックすることでプレリリース版のビルドを取得できます。CIビルドは末尾に “ci”と記載されています。

    image

    まとめ

    今回のアップデートではExcelが提供する機能をスプレッドシートコントロールで再現しています。完全にExcelを置き換える、というわけではありませんが、前述のようにテンプレートの編集などの業務用途にぜひ、ご検討ください。

    今回ご紹介した新機能の詳細はこちらから確認いただけます。

    30日間無料のトライアルもご用意していますのでご活用ください。

    Screen Shot 2018-11-08 at 14.52.20

    キャンペーン情報

    Ultimate UI for WPFを収録しているInfragistics Ultimateやその他の製品を特価でご購入いただけるキャンペーンは12月一杯までとなっています。お見逃しなく!

    [18.2] Ultimate UI for WPF新機能その2 – Excelライブラリのアップデート

    Ultimate UI for WPF 2018 Vol.2ではExcel関連の機能がさらに充実しています。今回のエントリではそちらをご紹介します。

    以前からWPFに限らず、Windows Forms, Ignite UI for JvaScriptなどさまざまプラットフォームでMicrosoft Excelファイルの操作を可能にするライブラリやExcelそのもののUI/機能を再現するUIコントロールを提供してきました。

    今回のアップデートでは、Excelライブラリにおいてスパークラインとチャートをサポートしました。
    特にチャート機能に関しては、Excelでよく使われている表示形式ということもあり、多くのご要望を数年に渡っていただいていましたので東京オフィスの製品担当としてはうれしい限りです。それでは新機能をご覧ください。

    スパークライン

    スパークラインはセルの中に小さなチャートを描画し、時系列の変動データを表現することに長けています。例えば季節変動や景気循環の値を1セル内で表現することができます。

    今回のリリースでは、シンプルなコードでスパークラインをドキュメントに追加できるようになりました。

    worksheet.SparklineGroups.Add( SparklineType.Line, "G2", "A2:F2");
    

    上記コードはワークシートのコレクションにスパークラインの種類と、表示セル、そして表示するデータが格納されているセルの範囲を指定します。すると下記のようなチャートが1セル内に描画されます。

    さらにExcelライブラリではスパークラインのスタイルを変更するためのAPIを提供しています。

    これらは、日本語版のExcelでスパークラインを編集する際に設定できる項目を再現しています。

    image

    チャート

    データを可視化させるチャートオブジェクトをExcelライブラリでサポートしました。Excelで提供されている約70種類のチャートを描画することができるようになりました。また、主補助線やマーカー、チャートの色など外観要素をカスタマイズすることができます。

    ワークシートのShapeコレクションに対して、AddChartメソッドでチャートの種類や表示位置、データなどを設定できます。

    worksheet.Shapes.AddChart(
        ChartType.BarStacked,
        new Rect(5000, 100, 10000, 5000),
        (c) =>
        {
            c.SetSourceData("A1:E8");
            c.ChartTitle = new ChartTitle {
                Text = new FormattedString("My Chart Data") };
            c.Legend = new Legend { Position = LegendPosition.Bottom };
        });
    

    こちらも下記のような出力になります。

    スパークラインと同様にExcelの外観設定にマッチングするようになっています。

    まとめ

    今回のアップデートでExcelファイルの作成、読み込みの幅が広がりました。こんなふうに使えないかな?あるいはこんなふうに活用しているよというものがあれば、ぜひ、dikehara@infragistics.com までお聞かせください!

    今回ご紹介した新機能の詳細はこちらから確認いただけます。

    30日間無料のトライアルもご用意していますのでご活用ください。

    Screen Shot 2018-11-08 at 14.52.20

    キャンペーン情報

    Ultimate UI for WPFを収録しているInfragistics Ultimateやその他の製品を特価でご購入いただけるキャンペーンは12月一杯までとなっています。お見逃しなく!

    [18.2] Ignite UI for Angular 2018 Vol.2新機能その2 - グリッドの新機能

    Angularグリッドの新機能

    今回は2018 Vol.2で追加されたAngularグリッドの新機能をご紹介します。とはいえIgnite UI for Angularは継続的デリバリー(CD)で短期間に少しずつ機能を追加しているため、いくつかは既にご覧いただいたことがあるかもしれません。

    それでは行ってみましょう!Angularで業務アプリケーションを構築する際に有用な機能ばかりです。

    Outlookスタイルグループ化

    他のプラットフォームでもサポートしているOutlookライクなグループ化機能をAngularグリッドにも追加しました。日付や種別、会社名などグリッドで表示しているデータの任意の列を選択しグループにまとめて階層表示を行えます。また、地域、都道府県、市区町村の順で多段でグループ化させることもできます。

    Angular Grid Grouping

    複数列ヘッダー

    郵便番号、都道府県、市区町村といったデータは、一言でいうと住所情報にあたります。Angularグリッドで複数列ヘッダーを使用することで、複数の列が特定のグループに属していることを表示できます。上記の階層表示とはまた違ったグループ表示を行えます。

    Angular Grid Multi-Column Headers Column Groups

    列フィルタリング

    Angularグリッドはグリッドにバインドされているデータを管理するデータコンテナーに対してフィルタリング処理を行えるAPIを提供しており、標準機能としてフィルタリングUIが提供されています。このAPIを利用し任意のフィルタリング機能を実装することもできます。

    image

    セル編集

    Angularグリッドにはいくつかの編集方法を提供しています。セル編集は1つ1つのセルを編集していくオーソドックスな編集方法です。列のデータタイプに合わせて最適なエディターがセルテンプレートに定義されており、編集状態に入った段階で表示されます。標準のエディター設定をオーバーライドすることもできるようになっています。

    image

    行編集

    Angularグリッドで提供している編集機能の一つに行編集があります。セル編集とはことなり、1行ずつ値を編集していくという方式です。こちらもおなじみですね。

    Grid Row Editing

    一括編集(一括更新)

    データを編集した後は、サーバーサイド、あるいはDBに変更した値を更新するという作業が必要になります。一般的に更新直後に逐次で更新を行う方法と、ある程度更新データを保持し、ユーザーの操作、あるいは一定時間等で更新する一括更新の2種類が考えられますが、Angularグリッドの一括編集(一括更新)機能は後者をサポートしています。TransactionServiceというトランザクションを管理するクラスを提供しており、先ほどのセル編集、行編集双方に対応します。

    Grid Edit Transactions

    テキスト検索

    ブラウザーで提供されている検索機能と同等の機能をAngularグリッドに追加しました。AngularグリッドはDOMの仮想化機能を使用しているため、ブラウザーの検索機能では表示領域以外のデータを検索できません。そのため、我々は、検索APIを別途提供することで仮想化されている部分に関しても検索できるようにしました。

    Angular Grid Text Search

    条件付きセルスタイリング

    セルの値にあわせて外観を変えることができる条件付きセルスタイリング機能を追加しました。

    Angular Grid Conditional Styling

    表示密度の設定

    マテリアルデザインガイドラインでは密度について定義がありますが、Angularグリッドでもこのコンセプトに準拠しました。COMPACT/COSY/COMFORTABLEという3つの表示密度を切り替えることができます。

    Angular Grid Display Styling

    ツールバー

    今回ご紹介するAngularグリッド新機能の最後は、ツールボックス機能です。このツールボックスはグリッドのメインの領域とは別に配置し、ソートやフィルタリング、データのエクスポートなどユーザーがグリッドの機能を利用するためのUIを提供できます。

    Angular Grid Toolbar

    いかがでしょうか?今回のアップデートによって業務アプリケーションに必要な機能をひと通り揃えるに至ったといっても過言ではないと考えています。いよいAngularでモダンWeb業務アプリケーションを誰もが構築する時代になってきたと言えるのではないでしょうか?ぜひ、お試しください。

    image

    現在、最上位エディションが20%お得なキャンペーンを12月末まで実施中です。キャンペーン対象の全ての製品にIgnite UI for Angularが含まれています。この機会にどうぞ!

    [18.2] Indigo.Design新機能その3 – Indigo.Design Cloud

    Indigo.Design Cloud

    さて、Indigo.Designの新機能紹介もこれで一区切りです。それでは行ってみましょう!今回のアップデートでは、チーム開発をサポートする機能を強化しました。

    バージョン履歴のサポート

    旧Indigo.Studioで作成されたプロトタイプでサポーされていた機能ですが、イメージベースのプロトタイプでも過去のデザインのバージョンを保持して置けるようになりました。

    image

    Indigo.Designでコード生成を行う場合は、最新バージョンのデザインが利用されます。

    プロトタイプに関してどのような変更が行われたかについては、アクティビティメニューから確認しすることができます。

    image

    カスタム表示領域

    あああIndigo.Design Cloudでは表示領域をこれまでモバイル、タブレット、デスクトップ、ブラウザーでそれぞれでよく使用されている表示サイズをプリセットとして提供していましたが、今回、新たなに任意のサイズを指定できるようになりました。要件に合わせて現実の解像度に即したプロトタイプを作成できます。

    image

    新しいデバイスクローム

    iPhone Xでこれまでとは異なる画面表示が求められるようになったため、プロトタイプの実行画面でも新しいデバイスクロームに対応しました。ご覧いただいているように、このアプリをiPhone X以降に対応するようにデザインする場合は、もう少し改良が必要なようなです。

        image   image

    いかがでしょうか?デザインの妥当性を検証でき、かつ、複数人でレビューすることが可能なIndigo.Design Cloudをぜひ、お試しください。

    Screen Shot 2018-11-12 at 14.56.11

    現在、最上位エディションが20%お得なキャンペーンを12月末まで実施中です。このIndigo.Design Cloudへのアクセス権も含まれていますので、この機会にどうぞ!

    [Indigo.Design] Indigo Design System v2を利用する場合の注意点 [サポート情報]

    image

    前回のエントリでご紹介したIndigo Design System v2ですが、直近のSketchのバージョンアップに対応しています。そのため、下記の環境にアップデートいただきご利用ください。

    • Sketch 52.3 を使用
      52.1/52.2と最新のIndigo.Design Sketch UIキットで提供されているパターンを使用した場合、Sketchがクラッシュする可能性があります。
      Sketch のダウンロード

      既存のSketch UIキットのアンインストール方法
      1. Sketchを開き、PreferencesダイアログでLibrariesを選択
        こちらの動画の1:41からダイアログの表示方法をご確認いただけます


      2. 削除するLibraryを選択し、コンテキストメニューを表示し、Remove Libraryを選択
        スクリーンショット 2018-11-09 15.07.52



    • Indigo Design System v2に対応したIndigo.Design コードジェネレーター
      最新のSketch UIキットに対応したコードジェネレーターのインストールをお願いします。
      11/09 時点の最新版は、1.0.5です。

      VS Codeプラグインのアンインストール方法
      1. VS Codeの拡張機能パネルで右上の […] をクリックし、インストール済みの拡張機能表示を選択
        image
      2. 一覧からInfragistics Indigo.Design Code Generatorを選択し、アンインストールを実行。その後、再読み込みして非アクティブ化するを選択
        image
        Indigo.Design Code Generatorのダウンロードとインストール方法はこちらをご覧ください。
    [18.2] Indigo.Design新機能その2 – Indigo Design System v2 (Sketch UIキット)

    Indigo

    前回は、Sketch Syncプラグインをご紹介しましたが、今回のリリースではSketchでUIデザインを行うために提供しているSketch UIキットもアップデートされています。

    Indigo Design System v2

    Indigo Design Systemは、UIデザインから忠実にアプリケーションコードを生成するための根幹をなすデザインシステムです。この仕組みのもとで画面をデザインすることで、コードの生成を担保しています。以前にご紹介していますので、そちらもご覧ください。

    Indigo Design to Code (D2C) Studio – Atomic Design System

    Indigo Design Systemは、Sketch UIキットとしてSketchの追加ライブラリーという形で提供されています。

    さて、今回のデザインシステムのアップデートには下記のような背景がありました。

    1. 5月にアップデートされたマテリアルデザインのType SystemガイドラインにIgnite UI for Angularのテーマ機能が準拠
    2. 7月にリリースされたSketch 51で提供されたライブラリの新機能(ライブラリ内のテキスト、スタイル機能)が追加された。

    これらを受けて、今回、最新のSketch (v52.3)にも対応するようにアップデートを行い、上記に対応するだけでなく、テキストスタイルの拡充も行っています。

    新たに追加されたコンポーネント

    あたらしいSketch UIキットにはデータ可視化や入力用の多くのコンポーネントが追加されています。

    • Linear gauge
    • Bullet graph
    • Radial Gauge
    • Chips
    • Combo
    • Dropdown

    以前のバージョンをダウンロードされている場合は、差し替えが必要ですが、ぜひ、新しい Indigo Design Systemをお試しください。

    Screen Shot 2018-11-09 at 14.23.03

    [18.2] Indigo.Design新機能その1 – Sketch Syncプラグイン

    Indigo.DesignはUIデザインからAngularコードを自動で生成できるアプリケーションデザインプラットフォームです。以前、Indigo.Designのロードマップを紹介しましたが、今回のInfragistics Ultimate 2018 Vol.2のリリース合わせて新たな機能が実施されました。

    Indigo.Design ロードマップ - 2018

    それでは新機能をご紹介します。

    Sketch用Indigo.Design Syncプラグイン

    これまでIndigo.DesignはSketchを用いてUIをデザインし、そのデザインファイルをIndigo.Design Cloudにアップロードすることでイメージベースのプロトタイプを作成していました。そのため、コード生成をまでは下記のようなステップを踏んでいます。

    Indigo.Design

    今年の7月に提供を開始したのち、ユーザーから、Indigo.Design Cloudをブラウザーで開いて作業するのは煩雑だというフィードバックをいただいたため、今回、Sketchから直接プロトタイプの作成、更新を行えるプラグインを提供しました。ただし、実際のステップそのものには変更はありません。

    このプラグインを利用することで、中間のステップをSketchから作業し、見かけ上2ステップにすることができます。

    Sketchのメニューから[Plugins] – [Indigo Sync] – [Publish] を選択すると、サインインダイアログが表示されます。

    スクリーンショット 2018-11-08 16.27.37

    プロトタイプのサイズ(モバイル、タブレット、PC)を選択し、[公開]ボタンをクリックします。

    スクリーンショット 2018-11-08 16.28.08

    プロトタイプが公開されました。

    スクリーンショット 2018-11-08 16.28.40

    プロトタイプのホーム画面の設定やインタラクション設定はIndigo.Design Cloudで行う必要がありますが、かなりお手軽になりました。この画面からIndigo.Design Cloudを開いたり、ユーザビリティテストの作成を開始することができます。

    作成されたプロトタイプ (designed by 山口 慧, ソリューションコンサルタント)

    かなりお手軽になりました!

    ぜひこちらよりお試しください!

    Screen Shot 2018-11-08 at 17.44.43

    現在、最上位エディションが20%お得なキャンペーンを12月末まで実施中です。キャンペーン期間が残り少なくなってきましたので、この機会にぜひ、ご検討ください!

    [18.2] Ultimate UI for WPF 2018 Vol.2 新機能その1 - チャート

    先日提供を開始した、Infragistics Ultimate 2018 Vol.2ですが、インフラジスティックスが進めているクロスプラットフォーム戦略に則り、WPFコントロールセットにも新機能が組み込まれています。

    その1はチャートコントロールの機能拡張です。

    xamFinancialChart

    今回のリリースでは、2018 Vol.1で提供を開始した金融向けチャートのxamFinancialChartにおいてお客様から頂戴したフィードバックをもとに、コールアウトや十字線、最終の値表示やツールチップなど、表示データを強調し、ユーザーの意思決定を支援できる機能を拡張しました。それぞれを別個のレイヤーで実装しているため、重ね合わせて使用することができます。

    コールアウトレイヤー

    コールアウトレイヤーではチャートに表示するデータ点のうち、任意の点に吹き出し注釈を表示できます。例えば株式分割や配当など、重要だと考えられるタイミングのデータ値を表示することができます。

    image

    十字線レイヤー

    十字線レイヤーでは、マウスカーソルの座標位置に合わせて水平、垂直方向の線を表示し、X軸、Y軸の値を表示できます。最大値を示した日付や、とある日の値など、ユーザーのインタラクションをサポートします。
    両方向、あるいは一方のみの表示など用途に合わせて変更できます。

    image

    最終値レイヤー

    最終値レイヤーでは、連続したチャートの「最後」の値を強調表示できる注釈機能です。例えばとある上場企業の一年間の株価推移を見ながら、「ああ…結果として上昇したな」なのか、「下がってしまった…」など一定期間における最終値を確認できます。

    image

    ツールチップレイヤー

    おなじみのツールチップですが、今回のリリースで、項目ごと、シリーズごとなど表示方法を設定できるようになりました。

          image      image

    表示日付のカスタマイズ

    さらに、日付・時間軸の機能を拡張し、土日や祝日、設立記念日など、データが変動しない日付を排除することもできるようになりました。

    image

    凡例プリセットの追加

    凡例についてもこれまでの通常のシンプルな凡例に加え、領域を有効活用できる金融向けの凡例プリセットを追加しました。どこかで見たことあるような構成ですね!

    シンプルな凡例

    image

    金融向けの凡例

    image

    これらを組み合わせて高機能な金融ソリューショをすばやく構築できます。

    xamCategoryChart、xamDataChart

    カテゴリーデータを最小限の設定で素早く折れ線、縦棒、横棒、スプラインチャートとして表現できるxamCategoryChartと、チャートの各機能を詳細に設定できるxamDataChartコントロールにもxamFinancialChartでご紹介した機能が追加されています。xamCategoryChartのスクリーンショットでご紹介します。

    コールアウトレイヤー

    十字線レイヤー

    最終値レイヤー

    ツールチップレイヤー

    強調表示レイヤー

    上記の機能に加えて、マウスカーソルの位置に最も近いシリーズカテゴリーあるいは、個別の項目を強調できるレイヤーが新たに追加されました。

    • カテゴリーのハイライト
      チャートに含まれているシリーズカテゴリーをまとめて強調表示します。例えばとある月の予実績をまとめて強調するという場合に最適です。
    image
    • 項目のハイライト
      チャートに含まれているシリーズカテゴリーの個々の項目を強調表示します。先ほどの例でいうと、とある月の予実績を個々にハイライトしたい場合に最適です。


    • image

    ご覧いただいたように、単にデータを表示するだけでなくユーザーにとってわかりやすい、見やすいデータの表示を支援する機能を2018 Vol.2 では追加しています。ぜひ、お試しください。

    Screen Shot 2018-11-08 at 14.52.20

    現在、今だけお得なキャンペーンを実施中です。こちらも併せてご検討ください!

    [18.2] Ignite UI for Angular 2018 Vol.2新機能その1 - 新コンポーネント

    Ignite UI for AngularはAngular専用コンポーネントとして、2017年11月にリリースされました。それから約1年、コントロール数、機能数が初期リリースとは比べ物にはならないほど充実してきました。今回のリリースでも様々な新機能が追加されていますので、まずは新しく追加されたコンポーネントから見ていきましょう。

    新コンポーネント

    Tree Grid

    Tree Gridは同じ列構造を持つ階層データを表示できます。製造業などでよく用いられる部品表(BOM)や、貸借対照表などが階層データの例となるでしょう。今回、AngularコンポーネントにこのTree Gridが追加されました。Tree Gridでは通常のグリッドと同様に並び替え、フィルタリング、編集、列固定、列移動、列の非表示、ページングなどの機能をサポートしています。

    Angular Tree Grid

    Combo Box

    Angular Combo BoxコンポーネントはHTML Input、HTML SelectとIgnite UI for Angularのigx-drop-downコンポーネントが提供する機能が組み込まれています。リスト項目の絞り込みや複数項目の選択、更にはカスタム値をリスト項目に追加することができます。また、項目、ヘッダー、フッターにそれぞれ個別にテンプレートを設定することもできます。さらにCombo Boxは、AngularのTemplate DrivenとReactive Formsと共に利用できます。このほかにも、キーボードナビゲーションや、リスト項目の仮想化もサポートしています。

    Angular ComboBox

    Dropdown

    Combo boxに比べるとシンプルなリスト項目表示、および選択が可能なコンポーネントです。項目をグループ化し表示することもできます。

    Expansion Panel

    Expansion Panel は縮小・展開という2つの状態をもつ軽量なパネルコンポーネントです。ヘッダ部分に概要を表示し、マウスやキーボード操作で状態を切り替えることができます。

    Angular Expansion Panel Control

    Tooltip

    igxTooltipとigxTooltipTarget ディレクティブを用いて任意の要素にツールチップを追加することができます。通常、ツールチップの表示位置は制限されていることが多いのですが、このTooltipコンポーネントを利用することで、igxTooltipTargetディレクティブで設定した対象エレメントを中心としてより自由な位置に配置することができます。

    Chips

    Chipコンポーネントは、タグの絞り込みや、グループの設定、オプションの選択など、複数の項目の表示と選択を視覚的に表現できます。

    Angular Chips Control

    Drag and Drop

    Drag and Dropディレクティブを利用することで、ページ内の要素を動かすことができるようになりました。

    Text Highlighting

    Text Highlightingは文章の中から任意の条件にあった文字列を強調表示することができます。Wordの検索結果をイメージするとわかりやすいですね。
    Angular Text Highlighting Control

    ご覧いただいたように、多くの新コンポーネントが追加されました。まだまだ新機能、新コンポーネントがありますので、ぜひ、お試しください。


    image

    さらに、今だけお得なキャンペーンを実施中です。こちらも併せてご検討ください!

    [18.2] Infragistics Ultimate 2018 Vol.2リリース!

    おまたせしました!Web、モバイル、デスクトップ全てに対応するInfragistics Ultimate 2018 Vol.2を本日リリースしました!

    今回のリリースでは、主にAngularに対応する高速グリッド、チャートの機能強化、Microsoft Excelエクスペリエンスの機能向上、Indigo.Designにおけるデザインフローの改善が含まれています。このエントリではそれぞれについてご紹介します。

    • Angular対応高速グリッド、チャートの機能強化
      Ignite UI for Angularはマテリアルデザインをサポートし、データグリッドやチャートをはじめとした軽量かつ、高パフォーマンスな50種類以上のAngularコンポーネントを含んでいます。このツールセットは、特に日本のユーザーからリクエストが多かった大量データやリアルタイムデータの表示や更新に対応し、ミッションクリティカルなアプリケーションで性能を発揮できるように設計されています。

      今回、データグリッドにグループ化や複数列ヘッダー、列移動、列フィルタリング機能の拡張、セルの条件付き書式機能など、幅広い業務要件を満たす機能を強化したほか、Angular Material 6で提供開始された、タイポグラフィやスタイルのサポートを実現しました。

      複数列ヘッダー

      image


      セルの条件付き書式

      image

      加えて、チャートタイプの追加や、十字線、強調表示、注釈機能など、チャートの強化を行いました。      
           
      チャートのインタラクティブ機能
            image
      ぜひ、サンプルをご覧ください。
      image


          

    • Microsoft Excelエクスペリエンスの機能向上
      弊社は、Microsoft Excelが持つ体験を再現できるExcelライブラリとスプレッドシートコントロールをAngularJavaScriptWPFWindows Forms向けに提供しています。Microsoft Excelに依存しないため、別途ソフトウエアをインストールする必要がなく、300種類以上の数式をサポートし、既存Excelファイルの読み込み、保存、新規ファイル作成機能をアプリケーションに組み込むことができます。

      今回のリリースでは、これらの機能に加え、ExcelライブラリでExcelチャートオブジェクトやスパークラインの追加が可能になりました。

      Excelチャートオブジェクト

      image
      スパークライン

      imageまた、スプレッドシートコントロールでは、並び替えダイアログや、トップテンフィルター、セルの書式ダイアログなど、Microsoft Excelが提供するUIや体験の再現度を向上させました。

      並び替えダイアログ

      image
      セルの書式設定ダイアログ
       
      image


    • Indigo.Designにおけるデザイン・デベロップメントプロセスの改善
      Indigo.DesignはUIデザインからアプリケーションコードを生成できるアプリケーションデザインプラットフォームです。このプラットフォームでは、UIキットやコードジェネレーターをデザイナー、デベロッパーにとって親しみのあるSketch、Visual Studio Code、それぞれのツールに対応するプラグインとして提供すると共に、プロトタイプの作成、ユーザビリティテストを実施できるIndigo.Cloudへのアクセスを提供します。これらの各種プラグイン、サービスを用いて、UIデザイン、プロトタイピング、Angularコードの自動生成を実現できます。

      今回、新たにSketch Syncプラグインを提供し、デザイナーが、Sketch上から直接UIデザインをクラウド上のIndigo.Design Cloudに追加、更新できるようになりました。 

      Sketch Syncプラグイン

      スクリーンショット 2018-10-15 11.31.29     
           
      また、Indigo.Design Cloudにアップロードしたデザインを、複数ユーザーでの編集機能、デザインのバージョニングなど、さまざまなチーム開発支援機能を追加し、全体のデザイン・デベロップメントプロセスを改善しました。

    今回ご紹介させていただいた機能を含め、2018 Vol.2の新機能をご紹介するオンラインセミナーを2018年11月28日に開催します。

    Infragistics Ultimate

    また、引き続き最上位エディションが20%お得なキャンペーンを12月末まで実施中です。キャンペーン期間が残り少なくなってきましたので、この機会にぜひ、ご検討ください!

    [Angular] Ignite UI for Angular サンプルの実行方法

    マテリアルデザインに準拠した50種類以上のAngularコンポーネントである、Ignite UI for Angularをローカル開発環境で実行できるサンプルを先日公開しました。

    sampledownload

    パッケージをダウンロードし、npm install, npm startコマンドで実行できます。また、下記のビデオでも解説しています。

    このサンプルは各コンポーネントの細かな機能を動作させながら確認できます。

    例えば、グリッドの基本機能が実装されたサンプルを表示する下記のようになります。

    image

    この画面のメイン部分(右側)を構成するソースコードを確認することができます。

    src – app – grid – grid.component.html:

    image

    src – app – grid – grid.component.scss:

    image

    src – app – grid – grid.component.ts:

    image

    ぜひ、お試しください!

    sampledownload

    Indigo.Designロードマップ – 2018

    Indigo.Designロードマップ – 2018

    このエントリでは下記の原文を基にしつつ、私見を交えて今後のロードマップをご紹介します。

    原文 – Jason Beres: Indigo.Design 2018 Roadmap

    先のエントリでもご紹介しましたIndigo.Designですが、4つの主要コンポーネントから成り立っています。

    Indigo.Design Overview

    1. Indigo.Design Sketch UIキット - Indigo Design Systemに沿って作成されているSketch向け追加ライブラリー。約50種類のコンポーネントや、パターン、スタイルを提供します。
      (注: Sketchは、Mac向けに提供されているデザインツールです。現在、Indigo.Designでコード生成を可能にするデザインを作成する場合にはあらかじめ導入が必要になります。)

    2. Indigo.Design Cloud – Sketch UIキットや、画像をインポートし、イメージベースのプロトタイプを生成するクラウドサービス。作成したプロトタイプの共有や、ユーザビリティテストが可能になります。

    3. Indigo.DesignコードジェネレーターVisual Studio Codeの拡張機能として提供され、AngularプロジェクトにIndigo.Design Cloudで作成されたイメージベースのプロトタイプからコードを生成できます。なお、デザインからコードを生成するためには、Sketch UIキットを利用する必要があります。

    4. Ignite UI for Angular – Sketch UIキットで提供されているコンポーネントはAngular用コンポーネント、Ignite UI for Angularにマッピングされています。このコンポーネントを独自に使用し、アプリケーションを開発することも可能です。

    それぞれのコンポーネントについて下記の観点からロードマップが策定されています。

    • ツール連携の中で開発チームのコラボレーションと生産性向上に寄与できる価値をどのように提供するのか
    • それぞれのコンポーネントにおいて、対応するツールの数をどのように拡張していくのか

    2018年後半にかけては、グラフィック/ビジュアルデザイナー、UXデザイナー/アーキテクト、デベロッパーそれぞれの役割向けの機能拡張を予定しています。

    グラフィック/ビジュアルデザイナー向けの拡張

    現在、Sketchをビジュアルデザインツールのコアとし、Indigo.DesignはこのツールをサポートするSketch UIキットを中心に据えています。Sketchは我々が提供するさまざまなシンボルに対してカスタムオーバーライドを用いてカスタマイズできる機能を提供しており、この機能を活用することでデザインに忠実なコードを生成するための詳細な設定を可能にします。今後も現在提供しているライブラリーに含まれるSketchシンボルの機能拡張を継続していきます。

    2018年第三四半期にかけては次の機能強化を予定しています。

    • UIパターンの追加 - アプリケーションでよく使用されるであろう共通的なUIパターンを活用することで、デザイン時の繰り返し作業を削減することができます。このUIパターンの提供数を今後も増やしていきます。

    • タイポグラフィ、シェープ、より細かな機能 – Sketchの重要な特徴の一つである柔軟性を活かし、最新のMaterial Designに準拠するようにSketch UIキットを拡張します。フォントや形状をより自由にデザインすることができるようになるため、Material & Indigo.Designを用いてよりクリエイティブなデザインを作成できます。

    • ステンシル - 洗練されたUI、スタイル化されたステンシル(テンプレート、アイコン等)、グラフィックや画像を用いることで情報をわかりやすく提示するだけでなく、アプリケーションの完成度を高めることができます。今後、金融向け、医療向け、製造業向けなど各業種向けのステンシルライブラリーの出荷を予定しています。

    • Sketchプラグイン - 次の2つに関しては可能な限り早く改善を試みたいと考えています。
      1. SketchアートボードとIndigo.Designワークスペースとの自動同期。現在はファイルをアップロードすることでプロトタイプを作成していますが、Sketchでアートボードに変更を加えることで自動的にIndigo.Design Cloudにその変更が反映されビジュアルデザイナーとUXデザイナーが常に同じデザインに対して作業ができるようになります。
      2. プラグインからダイアログを呼び出し、その中でグリッドやチャートを視覚的に設定できるようにします。結果、リッチなコントロールをすばやくデザインに追加でき、コード生成へと進めることができます。

      UXデザイナー/アーキテクト向けの拡張

      Indigo.Design Cloudは重要かつ非常にエキサイティングなアップデートを予定しています。2018年第三四半期から2019年にかけて、現在MacやWindowsクライアント版で提供しているプロトタイピングツールをHTML、Webベースのものに移行させることを計画しています。結果、ハイパフォーマンスなスクリーンデザイナーをWeb経由で使用し、プロトタイプの作成と共有をこれまで以上に簡単に実現できると考えています。

      • [2018年第四四半期] クラウドベースのスクリーンデザイナー(プレビュー版) - 現在、Indigo.Designはイメージをアップロードし、ナビゲーションやフローを追加することでプロトタイプを作成できます。ここに、スクリーンデザイナーを提供しクラウド上の同じUIで直接スクリーンやUIパーツなどを追加することができるようにすることを計画しています。このデザイナーには、WYSIWYGデザイン画面と共にSketch UIキットで提供されているコンポーネントやUIパターンが列挙されているツールボックスやプロパティエディターが提供され、Indigo Design Systemに沿った画面をSketchを用いずともデザインできるようになります。

      このアプローチは、ビジュアルデザイナー、UXアーキテクトに留まらず、デベロッパーもCloud.Indigo.Design上で画面をデザインでき、かつそのデザインのコードが生成できるようになることを意味しています。

      日本においてはデザインチームを持たない、あるいはデザイナーが参加しないプロジェクト、またはWindows PCのみを使用しているというプロジェクトが一定数存在していると考えていますので、この機能はプラスになるのではないでしょうか。

      デベロッパー向けの拡張

      Visual Studio Code拡張機能は、Indigo.Design上のデザインとAngularコードベースを繋ぐ接着剤の役割を担っています。現在の拡張機能はIndigo.Design上のプロトタイプから各画面に必要なパーツを選択し、HTML, CSS,Angularコードを生成する機能を持っていますが、今後数カ月でこの機能を更に拡張する予定です。

      • Visual Studio Code拡張機能にCloud.Indigo.Designへのログイン機能を追加し、プロトタイプやワークスペースをより簡単に選択できるような機能を追加します。
      • Flutterコード生成機能 - 本年5月にGoogle I/OでアナウンスしたFlutterコード生成機能を追加します。そのため、Flutter用のSketch UIキットの追加や、Flutterをサポートするための機能追加を行います。Flutterサポートについては5月にプレビューという形でビデオを公開していましたが、本年中の提供に向けて開発を行っています。
      • テンプレートとスターターアプリの追加 – Indigo.Designの大きな特長は、誰もがデザインシステムに沿って統一された画面、UIパターン、アプリケーションを作成し、コードを生成できるという点です。我々はSketch用により多くのコンポーネント、UIパターン、サンプルデザインを追加することでデザインのエキスパートであるかそうでないかに関わらず画面デザインを行えるようにしていきたいと考えています。

      Ignite UI for AngularについてもスプレッドシートやExcelライブラリーの機能追加やクラウドベースのやWYSIWYG Angularスタイリングツールなどの追加を予定しており、更にReactグリッド、チャートなども予定しています。

      ぜひ、ご期待ください!

      IndigoProductPage

        Indigo.Design提供開始しました!

        以前からご紹介をしてきましたアプリケーションデザインプラットフォーム、「Indigo.Design」を2017年7月26日に提供を開始しました!

        Indigo.Design関連の過去のエントリはこちらからご覧いただけます。

        この「Indigo.Design」は3つのステップを経ることでデザインに忠実な画面コードを生成することができ、これまで、これまでアプリケーション開発時にPhotoshopやIllustrator、あるいはPowerPoint、Excelなどで
        画面イメージや、外部設計書を作成したものの、画面実装において当初のデザインから逸脱する、あるいは、デザインの実現に工数がかかってしまうというような課題を解決することをねらいとしています。

        IndigoDesignHeader

        概要:Indigo.Designを用いた画面構築の流れ

        ステップ1:Indigo Design Systemに沿った画面デザイン

        Sketch Design

        一貫性のある画面群を効率よくデザインするには、レイアウト、スタイル、UIパターンなどをまとめた画面規約が必須です。Indigo.Designはデザインに沿って自動的にコードを生成するための規約をまとめたIndigo Design Systemを提供します。このIndigo.Design Systemに沿ったUIライブラリーを多くのデザイナーが利用するSketch向けに提供しており、Indigo.Design Sketch UIキットを用いて画面をデザインすることでコード生成時に画面デザインを忠実に再現できます。

        ステップ2:クラウド上でプロトタイピング

        2-Prototyping

        ステップ1で作成したデザインをクラウドサービスである、「cloud.indigo.design」にアップロードすることで自動的にプロトタイプを作成します。このプロトタイプを用いて顧客から フィードバックを得ることや、ユーザビリティテストを実施し、プロジェクト関係者間で 達成すべきゴールを明確にできます。結果として画面実装時の手戻りの抑制や満足度の向上を実現できます。

        ステップ3:コードジェネレーターで画面コードを生成

        3-CodeGen

        Visual Studio Codeエクステンションとして提供されるIndigo.Designコードジェネレーターを用いて、ステップ2で作成されたプロトタイプからデザインに忠実にHTML、CSS、Angular アプリケーションコードを生成します。ステップ1で使用するSketch UIキットは、弊社が 提供するAngular UIコンポーネントのIgnite UI for Angularにマッピングされているため、 デザインを忠実に再現することができます。

        このようにデザインを起点としたアプリケーションコード生成を支援するのがIndigo.Designです。

        Indigo.Designの主要コンポーネント

        あらためて、Indigo.Designに含まれる主要コンポーネントは下記の通りです。

        Indigo.Design Overview

        1. Indigo.Design Sketch UIキット – Indigo Design Systemに沿って作成されているSketch向け追加ライブラリー。約50種類のコンポーネントや、パターン、スタイルを提供します。Sketch UIキットは無料でトライアル期間以降も利用いただけます!
        2. Indigo.Design Cloud – Sketch UIキットや、画像をインポートし、イメージベースのプロトタイプを生成するクラウドサービス。作成したプロトタイプの共有や、ユーザビリティテストが可能になります。
        3. Indigo.Designコードジェネレーター – Visual Studio Codeの拡張機能として提供され、AngularプロジェクトにIndigo.Design Cloudで作成されたイメージベースのプロトタイプからコードを生成できます。なお、デザインからコードを生成するためには、Sketch UIキットを利用する必要があります。
        4. Ignite UI for Angular – Sketch UIキットで提供されているコンポーネントはAngular用コンポーネント、Ignite UI for Angularにマッピングされています。このコンポーネントを独自に使用し、アプリケーションを開発することも可能です。

        Indigo.Designのターゲットユーザー

        Indigo.Designは開発チームの様々なメンバーが恩恵を受けられると考えています。

        image

        • デザイナー - Sketchという使い慣れたツールをそのまま利用できます。また、Indigo Design Systemに沿って作成されたSketch UIキットを用いて作成することで、「絵に描いた餅」にならないような画面デザインをすばやく構築できます。また、自社のブランドに合致するようにSketch UIキットを拡張することで専用の標準デザインパーツを作成することもできます。
        • UXアーキテクト – 作成されたデザインからすばやくプロトタイプを作成でき、参加人数無制限かつ、リモートから参加可能なユーザビリティテストを実施できます。また、テスト結果のレコーディングを閲覧することで実装前にUIの改善を検討することが容易になります。  
        • プロジェクト/プロダクトマネージャー - 開発の初期段階からプロトタイプを用いてプロジェクト全体のゴールを改めて明確化すると共に、開発チーム、エンドユーザーの認識を統一させることで、画面開発時の手戻りを抑制できます。また、Ignite UI for Angularは高機能グリッド、ハイパフォーマンスチャートなど、業務アプリ向けのAngularコンポーネントを提供するため、実装時の生産性を向上させるとこで、最終成果物の質の向上、全体の開発コストの低減を期待できます。
        • デベロッパー - これまで渡されたデザインの実現に多くの工数がかかってしまったり、あるいは、技術的制約により、実現そのものをあきらめてしまうという工数増大、手戻りのリスクを低減することができます。また、Visual Studio Codeというこちらも開発者が使い慣れたツールをそのまま利用できます。また、Ignite UI for Angularを利用できるため、新たな工具・武器を手に入れ、より効率的に画面実装を行えます。

        Indigo.Designの今後について

        別のエントリでも詳しくご紹介しますが、Indigo.Designは日々進化していきます。初期バージョンではAngularコードを生成する形になりましたが、過去のエントリでご紹介していたFlutterへの対応を現在進めています。Flutterコード生成のベータ版は2018年第三四半期(7-9月)を目標としており、さらに第四四半期(10-12月)にかけてはReactへの対応を開始することも予定しています。ご期待ください!

           IndigoProductPage