Daizen Ikehara

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

Archives

Indigo Design to Code (D2C) Studio #4 – Angular & Flutter対応UIコントロール & コンポーネント

またまた前回に引き続き、先日発表したIndigo Design to Code (D2C) Studioの構成要素をご紹介します。今回が構成要素としては最後になります。

Indigo D2C Studioの構成要素 - 参考エントリ(英語)

Indigo D2C Studioとは?

ビジュアルデザインからプロトタイプ作成、コード生成までをシームレスに実現するアプリケーションデザインプラットフォームです。

このアプリケーションデザインプラットフォームを用いることで、ビジュアルデザイナー、UXアーキテクト、プロダクトマネージャー、デベロッパーといったアプリケーション開発におけるさまざまな役割のプロジェクトメンバーが、SketchやVisual Studio Code、Angularといったそれぞれが得意とするツールを利用しながら、これまで以上により密接にソフトウェア設計および開発プロセスに携わることを可能にします。

Angular & Flutter 対応 UI コントロール & コンポーネント

Best Angular Grid Chart in the World

現在、我々は市場で最も高い性能を持つAngular用グリッド、チャートを提供しています。さらに、現在、Flutterにも対応するコンポーネントを開発と、Angularコンポーネントの改善に努めています。高い将来性や現時点で高機能なUIライブラリーなしには顧客やステークスホルダーが期待するマルチチャネルに渡る素晴らしい体験を提供することはできません。弊社は皆様が最も関心のあるプラットフォームに対して、最高かつ、高性能なUIコンポーネントを提供できると考えています。

image

Ignite UI for Angular は依存関係やスクリプトファイル、CSS自動で組み込めるコマンドラインツールをご用意しています。また、オンラインで各コンポーネントを確認できるサンプルページもご用意しています。Indigo D2C Studioのリリース前にぜひ提供されているコンポーネントをお試しください。

このIndigo Design to Code (D2C) Studioの詳細をご紹介するセミナー、「Distinct」を6/26に開催します。からプロトタイプ作成、コード生成までをシームレスに実現するその実力をぜひその目で確かめてみてください!

smaller_PRevent_banner1200_628

Indigo Design to Code (D2C) Studio #3 – コード生成可能なVisual Studio Codeプラグイン

前回に引き続き、先日発表したIndigo Design to Code (D2C) Studioの構成要素をご紹介します。

Indigo D2C Studioの構成要素 - 参考エントリ(英語)

Indigo D2C Studioとは?

ビジュアルデザインからプロトタイプ作成、コード生成までをシームレスに実現するアプリケーションデザインプラットフォームです。

このアプリケーションデザインプラットフォームを用いることで、ビジュアルデザイナー、UXアーキテクト、プロダクトマネージャー、デベロッパーといったアプリケーション開発におけるさまざまな役割のプロジェクトメンバーが、SketchやVisual Studio Code、Angularといったそれぞれが得意とするツールを利用しながら、これまで以上により密接にソフトウェア設計および開発プロセスに携わることを可能にします。

コード生成可能なVisual Studio Codeプラグイン

画面デザインに忠実なアプリケーションを構築する最重要コンポーネントが、新たに開発されているVisual Studio Codeプラグインです。このプラグインはSketchの描画情報とIndigo IBP(イメージベースプロトタイピング)のメタデータを利用しコードを生成するエンジンを提供します。コード生成において、デザイン段階で定義された詳細をできうる限り再現するため全力を尽くしています。Indigo IBPに保持されているファイルや情報を我々のコード生成モデルへのパースはかなりの労力が必要であると共に、間違いなく、このプロセスの最重要部分といえるでしょう。

我々の目標はピクセル単位でデザインに忠実な出力を得ることです。Sketch でデザインされた外観、データモデルやバインディング、Indigo IBPで追加されたナビゲーションとルーティング、これらがAngularやFlutterアプリケーションのコードとして出力される必要があります。

上のビデオの最後で動作しているアプリケーションはデザインと全く同じFlutterアプリケーションです。デザインプロセスをしっかり実施することで素晴らしいアプリケーションを迅速に構築できます。

さて、次回はこのIndigo D2C Studioで早い段階でサポートされるであろうAngular & Flutter UIコントロール & コンポーネントをご紹介します!

このIndigo Design to Code (D2C) Studioの詳細をご紹介するセミナー、「Distinct」を6/26に開催します。からプロトタイプ作成、コード生成までをシームレスに実現するその実力をぜひその目で確かめてみてください!

smaller_PRevent_banner1200_628

Indigo Design to Code (D2C) Studio #2 – イメージベースプロトタイピング

前回に引き続き、先日発表したIndigo Design to Code (D2C) Studioの構成要素をご紹介します。

Indigo D2C Studioの構成要素 - 参考エントリ(英語)

  • Atomic Design System
  • イメージベースプロトタイピング ← イマココ
  • コード生成可能なVisual Studio Codeプラグイン
  • Angular & Flutter 対応 UI コントロール & コンポーネント

Indigo D2C Studioとは?

ビジュアルデザインからプロトタイプ作成、コード生成までをシームレスに実現するアプリケーションデザインプラットフォームです。

このアプリケーションデザインプラットフォームを用いることで、ビジュアルデザイナー、UXアーキテクト、プロダクトマネージャー、デベロッパーといったアプリケーション開発におけるさまざまな役割のプロジェクトメンバーが、SketchやVisual Studio Code、Angularといったそれぞれが得意とするツールを利用しながら、これまで以上により密接にソフトウェア設計および開発プロセスに携わることを可能にします。

イメージベースプロトタイピング

本年4月に一部機能の無償化をアナウンスしたIndigo Studioで提供しているクラウドサービス、indigodesigned.comにイメージベースプロトタイピング(IBP)機能を追加します。このIBPは、indigodedesigned.comにSketchやAdobeデザインツールなどで作成した画面のビジュアルデザインをインポートし、プロトタイプを作成することができます。IBPではインポートした各画面間のナビゲーションの設定や、プロトタイプをエンドユーザーを含むプロジェクトの関係者に共有し、フィードバックを得ることができるようになります。また、動画レコーディング可能な参加人数無制限のユーザビリティテストを実施し、分析できます。

この際、前回ご紹介したAtomic Design Systemを用いて作成されたSketchデザインをインポートすることでIBPの機能を最大限に活用できます。Sketchで定義されたシンボルやアートボードの情報、事前に定義されたナビゲーション情報などインポートしたSketchファイルに保存されている重要なメタデータを保存し、我々のコード生成モデルとなるように解析します。

次回紹介するコード生成機能を利用するためには、Atomic Design Systemを用いて画面デザインを行う必要があります。これは、コード生成機能は前回解説した、Atom(UIウィジェット)とAngularツールキット、Flutter SDKとのマッピングを前提にしているため、それ以外のものを利用した場合には解析することができないためです。

コード生成機能を利用せず、任意の画像をインポートしイメージベースのプロトタイピング機能のみを利用する場合は、デザインシステムを利用する必要はありません。

次回はいよいよコード生成可能なVisual Studio Codeプラグインです!

このIndigo Design to Code (D2C) Studioの詳細をご紹介するセミナー、「Distinct」を6/26に開催します。からプロトタイプ作成、コード生成までをシームレスに実現するその実力をぜひその目で確かめてみてください!

smaller_PRevent_banner1200_628

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

先日発表したIndigo Design to Code (D2C) Studioはビジュアルデザインからプロトタイプ作成、コード生成までをシームレスに実現するアプリケーションデザインプラットフォームです。

このアプリケーションデザインプラットフォームを用いることで、ビジュアルデザイナー、UXアーキテクト、プロダクトマネージャー、デベロッパーといったアプリケーション開発におけるさまざまな役割のプロジェクトメンバーが、SketchやVisual Studio Code、Angularといったそれぞれが得意とするツールを利用しながら、これまで以上により密接にソフトウェア設計および開発プロセスに携わることを可能にします。

このエントリでは、こちらのエントリ(英語)を基にそれぞれの構成要素をご紹介します。

Atomic Design System

Indigo D2C StudioはAtomic Design Methodology (英語)をベースに新たなデザインシステムを提供します。デザインシステムのそれぞれのAtom(UI ウィジェット)は、マテリアルデザインに対応したIgnite UI for Angularの各コンポーネントや、Flutter SDKに直接マッピングされます。我々はそれぞれのコアウィジェットに対して名前やデータバインドなどの追加設定などオーバーライドできるSketchライブラリーを最新の注意を払い作成しました。さらに単一のAtomだけではなく、複数を組み合わせたMolecules、Organismsと呼ばれる複数のAtomを組み合わせたパターンや、テンプレート、ページを提供します。これらを活用することで、生産性とデザイン性を向上させることができ、さらにIndigo D2C Studioの他のツールに流し込むことができるようになります。

下記のスクリーンショットではSketch UIキットを用いたデザインシステムです。それぞれのコントロールがSketchのシンボルとして構成されおり、Ignite UI for Angularの各UIコンポーネントを忠実に表示しながら画面をデザインできます。

このデザインシステムには、一般的によく利用されるUIパターンや、全体の画面、さらには特定のビジネスシナリオを再現したアプリケーション全体のデザインを含んでおり、そのまま利用することもできます。

ここで作成したデザインを次の Image-Based Prototyping へと連携させます。

さて、このIndigo Design to Code (D2C) Studioの詳細をご紹介するセミナー、「Distinct」を6/26に開催します。からプロトタイプ作成、コード生成までをシームレスに実現するその実力をぜひその目で確かめてみてください!

smaller_PRevent_banner1200_628

ng-japan 2018 に協賛します!

2018 年 6 月 16 日 (土) に六本木ヒルズで開催される ng-japan にインフラジスティックス・ジャパン株式会社が協賛させていただくことになりました!

image

ng-japan 2018 イベントページ

昨年までも弊社から有志が参加させていだいていましたが、今回、正式に参画できることになり、担当者としてはうれしい限りです!

インフラジスティックスの Angular への取り組み

インフラジスティックスはモダンWebアプリ開発向けに JavaScript/HTML5 対応の Ignite UI for JavaScript を数年に渡って提供してきました。業務アプリケーションに必須ともいえる、データグリッドやチャート、スケジュールなどの UI コンポーネントを提供し、また、各種 Wrapper や型定義ファイルなどを提供することでAngular や React、TypeScript などに対応してきました。

その後、市場における Angular のニーズの高まりを受け、2017 年 11 月に Angular にネイティブで対応する Ignite UI for Angular の提供を開始しました。初期リリースはグリッドの機能が十分ではありませんでしたが、2-3 週間単位で機能が追加され、グリッドの仮想化機能や、金融向けチャート、その他さまざまな機能を提供するに至りました。さらに、2018 年 5 月 20 日には最新バージョンである Angular 6 に対応しました!

UI コンポーネント「だけ」ではなく、開発を支援する周辺ツール、サポートを充実

さらにここ数年の弊社の取り組みとして、UI コンポーネントを効率的に利用するためのツール群の提供に力を入れています。

image

この取り組みの結果、Ignite UI for Angular 向けに下記のツールをご利用いただけるようになっています。

未来への道、デザインからコード生成で他社との差別化を実現!

また、画面デザイン、プロトタイピング、コード生成までを一気通貫で実現するソリューション、Indigo D2C Studio でもこの Ignite UI for Angular は大きな位置を占めています。

今回の ng-japan 2018 開催後には Indigo D2C Studio を含めてモダンアプリケーション開発を成功に導くための進化とその方法についてお伝えさせていただくセミナー、「Distinct」を開催します。

Infragistics Ultimate

どちらのイベントにもぜひ、ご参加ください!

de:code 2018 出展とちょっと裏のお話

2018 年 5 月 22 日(火) – 23 日 (水) にかけてザ・プリンスパークタワー東京で開催されました de:code 2018 に CData Software Japan 合同会社様と出展しました。

ブースの様子や、企画、セッションの様子などは CData Software Japan 合同会社様の Blog エントリにて紹介いただいておりますのでぜひ、そちらをご覧ください。弊社製品のご紹介もありがとうございます!ブースでは、DB から Web API を高速生成できる API サーバーと Angular 用 UI コンポーネント Ignite UI for Angular を中心として、モダン API、モダン Web アプリ開発を支援するツールの展示を行いました。多くの皆様にブースにご来場いただき、非常に感謝しています。

このエントリではちょっと変化球として出展の裏話的なところをインフラジスティックスの目線からお届けします。

ブースでのいでだち、くばりものについて

今回は例年とは異なり、ブーススタッフのユニフォームを同一色ではなく、全員バラバラにする試みを行いました。統一感は失われましたが、非常に目立っていたので良しとしました!

カラーバリエーションはこちらです。昨年のキュウレンジャー並みのバリエーションで、個人的には IG レンジャーと名付けていました。

Tshirts-color

実際に着用した写真はこちら

image

また、開発者の皆さんの熱気がすごいだろうということで、今回はインフラジスティックスうちわを 1,000 本制作し、500 本は配るぞーと意気込んでいました。会場の「予想外」の寒さにも関わらず、来場者の皆様に快く受け取っていただき、500 本を配り切ることができました。

image

Tシャツとうちわの発案者であり、500 本を超えてドヤ顔のインサイド セールス高橋(右)と、ブースで大活躍のソリューションコンサルタント山口(左)

image

その他、帽子、ステッカー、USB、ハンドタオル、Angular っぽいフェルトなど、持ち込んでおりました。過去のイベントの余りもありますが、帽子 (ナイキ!)とフェルトはレア物です。ご取得された皆様、おめでとうございました。

image

ブース企画とアプリについて

5 月に入ってからの企画で準備期間が数週間となりましたが、ブースで開発ツール大喜利を実施しました。来場者の皆様やマイクロソフト社員さんにもご参加いただき、トータルの「いいね+リツイート数」が 2 日間で 2,000 を超える盛況ぶりとなりました!

全ツイートはこちらから

Togetter - de:code大喜利 2018 まとめ 「あなたにとっての開発ツールとは?」

ブースで途中経過を表示するために、アプリにするか、大喜利を印刷するかで議論になりましたが、最終的にアプリにすることに落ち着きました。

アプリでは Ignite UI for Angular の Card コンポーネントを利用しています。時間もなかったので、Ignite UI CLI を使用してサクッとプロジェクトのひな型を作成したのち、デモページに用意されている StackBlitz のリンクからデモとして実装されている HTML をベースにして実装しました。

image

機会があれば中身を解説しようかなと。(大したことはやってません)

image

また、CData さんは、Twitter ODBC ドライバーと Power BI を組み合わせて集計結果をデモされていました。(写真は 1 日目の様子)

最終順位はこちら

今回の商品は株式会社セカンドファクトリー様が経営されているナルトベース (THE NARUTO BASE)のお肉セットを上位 5 名 + 1 特別賞として、また、2 名の方に日本マイクロソフト株式会社様から T シャツをプレゼントさせていただきました!

続々と肉レポが上がっていたりします。

賞品のお肉を使った調理例: 実際にナルトベース併設レストランで提供されているらしいです。おいしそう…

阿波牛たたきリブロース味噌漬け阿波金時豚の焼豚盛り合わせ

この企画をご提案いただきました CData Software Japan 合同会社様、また、特別賞をご提供いただきました、セカンドファクトリー様、日本マイクロソフト株式会社様、そして、ご参加いただいた皆様、ありがとうございました!

本年もインフラジスティックスブースにご来場いただきましてありがとうございました!ぜひ次回の参加も検討したいと思います。

[18.1] Infragistics Ultimate UI for WPF 2018 Vol.1 新機能その1 – 和暦対応 [WPF]

今回から WPF 対応コントロールの最新版、Infragistics Ultimate UI for WPF 2018 Vol.1 の新機能をご紹介します。その他の新機能については下記をご覧ください。

Infragistics Ultimate 2018 Vol.1 関連エントリ

1 回目の新機能としてご紹介するのは、日本向けといっても過言ではない和暦の対応です。多くのお客様よりご要望いただいていました和暦表示機能を下記のコントロールに追加しました。

image

和暦を使用するためには、FormatProvider プロパティ、または、アプリケーションのスレッドの言語、カレンダーを設定します。

ヘルプ – 和暦サポート (xamDateTimeEditor)

参考 – [C#] CultureInfo で和暦・西暦を指定して時刻を表示する

更に、今回和暦に対応したコントロールには、EraDisplayMode プロパティが設定されており、カレンダーでの表示において、どこを起点に元号を表示するかを設定できます。

ActiveDate
現在の月にある場合、アクティブ日付の年号が表示されます。それ以外の場合、月の最初の日の年号が表示されます。また、年はその年号に相対して決定されます。

FirstDayOfMonth
月の最初の日の年号が表示されます。また、年はその年号に相対して決定されます。

LastDayOfMonth
月の最後の日の年号が表示されます。また、年はその年号に相対して決定されます。

ぜひ、ご活用ください!

Download

[18.1] Infragistics Ultimate 2018 Vol.1 をリリースしました!

本日、2018 年 4 月 26 日に、Web、モバイル、デスクトップアプリケーション開発を支援する UI コンポーネント スイート製品、Infragistics Ultimate の最新バージョン、2018 Vol.1 をリリースしました!

このエントリでは 2018 Vol.1 の大きな特長を紹介します。

金融サービス向けソリューションに適した高機能、高速 UI コンポーネント

インフラジスティックスが主要プラットフォーム向けに提供しているグリッドおよびチャートコントロールは、金融業界向けソリューションに最適となるように設計されています。また、金融アプリケーションの近代化ソリューションの一つであるOpenFin OS (英語) をサポートし、市場で求められる大量データの高速処理を可能にするアーキテクチャーを実装しています。

2018 Vol.1 では、JavaScriptAngularWPF 対応製品向けに新たにファイナンシャル チャート コントロールを追加しました。

image

このコントロールは株価データなどの特定の金融データをバインドすることで、自動的にデータを分析し、データ構造に最適なチャートの種類を定義することができます。アプリケーションの要件に合わせて開発者が、横棒、ローソク足、縦棒といったチャートの種類を独自に定義することや、あらかじめコントロールに実装されている金融セグメント向け視覚要素を追加することができます。

Angular 対応コンポーネントの拡充およびパフォーマンスの強化

Ignite UI for Angular はマテリアル デザインに準拠する Angular 対応コンポーネントを提供します。データ グリッドをはじめとして業務アプリケーションの構築に必要なコンポーネントが含まれており、高いパフォーマンスを実現するため、ファイルサイズの最小化、パフォーマンス チューニングが施されています。

2018 Vol.1 では、新規に約 20 種類のコンポーネントを追加し、合計で 50 種類以上のコンポーネントを収録しました。特に、今回、新規で追加された仮想化ディレクティブは、スクロール可能な領域において UI の仮想化機能を提供します。このディレクティブを利用することで、データグリッドにおいて、200 列 ×  10,000 行という通常の利用シナリオでは想定されないような大量のデータの表示を可能にし、更に、縦横のスクロールをストレスなく行えるようになりました。

image

また、データ グリッドに対しても、継続的デリバリーによる機能拡張の結果、2-4 週間という短い間隔で随時機能が追加されています。2017 年 11 月のリリースから約半年間の間に、ページング、ヘッダー、セル、フッター テンプレート、データの直接セル編集・ダイアログ編集、列の固定、列の非表示、列の移動、値の集計、データの Excel 形式、CSV 形式、TSV 形式での出力機能が追加されました。

加えて、上記でも言及されているファイナンシャル チャートに加えて、折れ線、エリア、縦棒、スプライン、ステップ、ウォーターフォールなど様々な種類のチャートを描画できるチャート コンポーネントを追加しました。

image

JavaScript / WPF / Windows Forms 向け Excel ライブラリー、スプレッドシート ソリューションの拡充

以前から JavaScriptWPFWindows Forms 対応製品において、Microsoft Excel 形式のファイルの読み込み、編集、保存をプログラミング コードにより行えるExcel ライブラリーと、このライブラリーを利用し、Excel ファイルの内容を視覚的に操作できるスプレッドシート コンポーネントを提供しています。これらを活用することで、クライアント端末に Microsoft Excel がインストールされていない場合においても Excel ファイルの読み込み、データの編集、保存が可能です。

image

2018 Vol.1 では既存 Excel ファイルの読み込み時の再現性、スプレッドシート コンポーネントの操作性を向上させるため、Excel ライブラリーがサポートする Excel 関数を 100 種類以上追加し、合計で 300 種類以上の Excel 関数をサポートしました。また、Excel の条件フォーマット、データのフィルタ、並び替えに対応しました。

他にも様々な機能が追加されていますが、それは別のエントリでご紹介したいと思います。トライアル版は下記よりダウンロードいただけます。ぜひ、お試しください!

  ダウンロード  

また、併せて今後の製品戦略の方向性についても今回言及しています。ぜひ、プレスリリースをご確認ください!

[UX] Indigo Studio 製品ラインアップの変更と、一部無償化を発表! [Free]

本日、プロジェクトの初期段階において、プロトタイプの作成、共有、検証を可能にするツール、Indigo Studio について、製品ラインアップの変更と一部無償化を発表しました!

Indigo Studoo とは?

Indigo Studio はプロトタイプを作成する Indigo Studio クライアント(ソフトウェア名: Indigo Studio)と作成したプロトタイプの共有、レビュー、検証を提供する indigodesigned.com により構成されています。

2018IndigoStudioProduct

Indigo Studio クライアントの特長

  • ラピッドプロトタイプイング - コードフリーでプロトタイプを作成
  • 再利用可能なライブラリー – Sketch で作成されたデザインのインポート
  • 様々なデバイス向けプロトタイプ - モバイル、Web、デスクトップ向けのプロトタイプの作成

indigodesigned.com の特長

  • プロトタイプの共有
  • プロトタイプの共同編集
  • リモートでのユーザビリティテストの実施

エディションと一部無償化について

今回、下記の 3 つのエディションを設定し、Essential 版については無償で利用いただけるようになりました。

製品名

用途

特長

Indigo Studio Essential 版

個人利用向け

Indigo Studio クライアントが提供するストーリーボード、プロトタイプ作成、アニメーション、画面遷移図、ローカル実行

Indigo Studio Professional 版

個人、小規模チーム向け

Indigo Studio クライアントが提供する全ての機能に加え、indigodesigned.com においてプロトタイプの共有、共同編集ワークスペース(最大 5)、レビュー、ユーザビリティ検証

Indigo Studio Enterprise 版

大規模向け

Indigo Studio Professional 版が提供する全ての機能に加え、無制限の共同編集ワークスペース

それぞれのエディションの違い、価格については下記をご覧ください。Let’s プロトタイピング!

FireFoxDownload

[Angular] Ignite UI for Angular のバージョニング [バージョン 5 以降]

Ignite UI for Angular は修正や機能追加を継続して実施する継続的デリバリー (Continuous Delivery) を採用しており、非常に短いスパンでアップデートを実施しています。セマンティック バージョンとは若干異なるバージョニングをこのエントリでは下記の Wiki を基に Ignite UI for Angular のバージョニングについて解説します。

GitHub – Ignite UI for Angular versioning

Ignite UI for Angular のバージョンは下記の規約によってバージョンが設定されます。また、このバージョニングは 5.x.x 以降が対象となります。

<Angular Major>.<Major>.<Minor>

<Angular Major>.<Major>.<Minor>

<Angular Major> は Ignite UI for Angular がサポートする Angular のバージョンを示しています。現在、Angular のメジャーバージョンが 5 となっているため、Ignite UI for Angular の最新バージョンも 5 から始まっています。Angular 6 がリリースされ、サポートが開始されると、Ignite UI for Angular のバージョンも 6 から始まります。

<Angular Major>.<Major>.<Minor>

<Major> は Ignite UI for Angular のメジャー バージョンを指し示します。このバージョンが上がる際には機能追加や重大な変更が含まれています。そのため、過去のバージョンとの互換性が失われている可能性があります。

例) Ignite UI for Angular 5.1.x と 5.2.x には互換性がない可能性があります。(5.2.0 リリースノート)

<Angular Major>.<Major>.<Minor>

<Minor> はマイナー アップデートやパッチ更新を含み、過去の同じメジャー バージョンとの互換性を保つように実装されています。

ベータ版の場合

ベータ版には –beta が付与されているため、一目で判別できるようになっています。また、正式版のリリースまでより細かくリリースを行う場合があるため、<Patch> が付与されます。(例: 5.2.0-beta.0)

<Angular Major>.<Major>.<Minor>-beta.<Patch>

シナリオ

5.y.z → 6.y.z : サポートする Angular のバージョンが変更された。重大な変更が含まれる可能性がある

x.1.z → x.2.z : Ignite UI for Angular の機能追加、向上が行われた。重大な変更が含まれる可能性がある

x.y.1 → x.y.2 : Ignite UI for Angular のマイナー更新、あるいはパッチ修正が行われた。y というメジャーバージョン内では互換性が保たれている。

x.y.z-beta.0 : x.y.z のベータ版。バージョン x.y.z が後日リリースされる。

通常のセマンティック バージョニングとは少し異なりますのでご注意を!

300_250

[WPF] XamDataGrid 対応コントロール コンフィギュレーター リリース!

インフラジスティックスが提供する WPF 対応 UI コンポーネントツールセット、Infragistics Ultimate UI for WPF にはコントロールの他にコントロールの設定を視覚的に行える、コントロール コンフィギュレーターを提供しています。

先日、このコントロール コンフィギュレーターが更新され、高機能 WPF データグリッド、XamDataGrid に対応しました!これで現在対応しているコントロールは下記の通りとなりました。

XamDataGrid は高機能かつ、高パフォーマンスなデータグリッドですが、その機能脳多さから構造が複雑なものとなっていました。下記のようにグリッドの中の構造が複雑化し、初めて使うための学習コストが無視できません。

images\WPF_ConfiguringDataGrid_2.png

今回、コントロール コンフィギュレーターを使用することで、XamDataGrid へのデータのバインドや、列設定、機能設定が可能になります。

image

このコンフィギュレーターで設定した内容が XAML として出力されます。

image

詳しい使用方法についてはドキュメントでご確認いただけます。また、今後実際に使用する際の動画を公開予定です!

製品ドキュメント - XamDataGrid でコントロール コンフィギュレーターを使用する 

入手方法

インストーラーを使用し、以前にこのツールをインストールされている場合は、下記のエントリを参考にツールのアップデートを実施することで、XamDataGrid に対応したバージョンをご利用いただけます。

Daizen Ikehara - [Xamarin] Productivity Pack を継続的にアップデート

あるいは、Visual Studio Marketplace から最新版をインストールいただくことも可能です。

コントロール コンフィギュレーターについて

現在、コントロール コンフィギュレーターの基本的な使用方法を解説した動画を YouTube チャンネルで公開中です。ぜひご活用ください!

xamDataGrid vs xamGrid: どちらのグリッドを使用すべきか

このエントリは、Infragistics Ultimate UI for WPF プロダクトオーナーである、Brian Lagunas の記事をもとに作成しています。原文は、Brian がプロダクトオーナーという立場からどちらのグリッドを使用すべきか、今後どうなっていくのか。という点を説明しています。これまで弊社 WPF 製品をご利用いただいている場合、あるいは、これから WPF アプリケーションを開発する予定があり、弊社コントロールにご興味がある場合、ぜひ、ご一読ください。

Brian Lagunas – XamDataGrid vs XamGrid: Which WPF Grid Should I Choose?

Infragistics Ultimate UI for WPF を利用する場合、xamDataGrid と xamGrid のどちらを利用するべきか。これまで明確な答えがなく、よくご質問いただきます。そのため、まず弊社としての回答をお伝えします。

xamDataGrid をご利用ください

ここからは、xamGrid について、これまでの背景や今回の表明に至った理由、今後の計画についてお伝えします。

xamGrid が登場した背景と現状

xamGrid は、WPF と Silverlight 双方で利用できるクロスプラットフォーム グリッドが必要であるという経緯のもと、それぞれの製品に収録されました。当時、既に xamDataGrid は WPF 対応製品に収録されていましたが、WPF のみに存在する API を最大限活用し、パフォーマンスの向上を図っていたため、Silverlight への移植を行うことができませんでした。そのため、クロスプラットフォーム グリッドとして xamGrid がそれぞれの対応製品に収録されるという形になりました。

また、この xamGrid と結びつきが強いエディター コントロールも併せて追加されました。

  • xamComboEditor (間違えやすいですが、こちらも同系列のコントロールです)
  • xamCurrencyInput
  • xamDateTimeInput
  • xamMaskedInput
  • xamNumericInput

Silvelright が隆盛であった時代は、Silverlight と WPF で開発を行う予定があるのであれば xamGrid を、WPF のみであれば xamDataGrid を使用する判断が適していたと考えることもできます。しかし、当時、我々からお客様に対して、どの場合においてどちらを使用すべきという明確なガイダンスがなかったため、今日に至るまでグリッドの選択に関して混乱を招く状態となってしまいました。

この結果、現在 Infragistics Ultimate UI for WPF は ふたつのグリッド、ふたつの date/time エディター、ふたつの マスク エディターなどが存在する状態となってしまい、グリッド以外のコントロールの選択にも混乱を招いてしまう結果となりました。

現在、Silverlight の新規開発を行いたいというお問い合わせは、はほぼないといえる状況です。そのため、非常に特別な理由がない限り、xamGrid と上記 input を継続して使用する必要がないと言えます。

それぞれのグリッドの機能差異について

xamGrid で提供している機能の 約 90% は xamDataGrid にも存在します。ただし、xamGrid でのみ提供されているいくつかの主要機能が存在します。

  • セル結合(垂直、縦方向)
  • 条件フォーマット
  • ページング

弊社は、この機能際について現在、差を埋めるための機能拡張を予定しています。

セル結合については、現在、2018 Vol.1 での提供に向けて開発を進めており、条件フォーマットについては 2018 Vol.2 での提供を計画しています。最後のページングについては、xamDataGrid で提供されている、非同期ページング データ ソースの仕組みを利用することで、全レコードの一部分のみをロードし、パフォーマンスを向上できるようになったため、必要ではないと判断しています。

もし、WPF のデータ グリッドにページングが必要であるというお考えをお持ちの場合は、 あるいは Brian Lagunas (blagunas@infragistics.com) に直接ご連絡ください。必要となる理由がどういったものであるかをお伺いさせていただければ幸いです。

xamGrid の今後

さて、xamGrid と関連する エディターコントロールについてですが、弊社は、多くのお客様がこれらのコントロールを現在もご利用いただいていることを認識しており、突然、すべてを移行するということは現実的ではないでしょう。

そのため、弊社は今後、今回の指針を皆様にお届けするように取り組んでいきます。

ここ数年、xamGrid および関連エディターについては、新規機能が追加されず、また、Visual Studio のツールボックスから表示されなくなりました。更に、サンプルブラウザーからも削除され、製品ページのコントロール一覧からも削除されました。現在、WPF アプリケーションにおいて、xamGrid および関連エディターが利用されているのは、2 年以上前のバージョンをご利用いただいているか、あるいは手動で参照を追加いただいた場合となるでしょう。

日本オフィスにおいても、既にご利用いただいているお客様よりお問い合わせをいただいた際や、新規に製品をご利用されることを計画されていらっしゃるお客様には、数年前より個別にご案内を差し上げさせていただいております。

そして、今回、公式に今後、xamGrid と関連エディターについては新規機能の実装を行わないことを表明いたします。この表明で何かが急に変わるということはありませんが、下記の通りとなります。

  • 今後、対象のコントロールの製品ドキュメントには xamDataGrid およびその関連エディターをご利用いただくことを推奨する文言が追加されます。
  • xamGrid と関連エディターで致命的な不具合が発生した場合は、引き続きご対応する予定です。
  • コントロールおよびアセンブリを直近で削除する予定はありません。

次のステップとして

繰り返しとなりますが、今回の表明で即座に対象のコントロールを製品から削除する予定はありません。おそらく全てのお客様に移行いただくには、数年を要すると考えています。

また、皆様に多くの時間とリソースを WPF において xamGrid を利用するために投入いただいたことについては、プロダクト オーナーである、Brian Lagunas も下記のように記しています。

I also understand that this may be frustrating for a lot of people using the xamGrid and have a lot of time and code invested in it.  As a fellow developer, I completely understand the position you are in and I sincerely empathize with you.  However, I cannot sit by and let you continue to use a control that we have no intention of moving forward.  That would not be fair to you, your customers, or the company you work for.

Our investments are in the xamDataGrid. That is the grid we are moving forward.  Every release there is a new feature, improvement, or productivity tool to support it (just wait until you see the upcoming xamDataGrid control configurator). That is where I want you to be.

If you use the xamGrid and are freaking out about this blog post, please contact me. I want to put together a guide to help you migrate your code over to the xamDataGrid.  I need to know what features you are using. How you are extending the grid or customizing it.  I want to know if there is anything blocking you from moving to the xamDataGrid (for example; paging).

彼のメッセージにもあるように、我々の xamDataGrid への投資は続いています。新機能や、近日リリース予定のコントロールコンフィギュレーターをご利用いただき、高機能なグリッドをぜひご活用ください。

まとめ

現時点で弊社は、今回対象となっているコントロールのアセンブリをコード上で非推奨としたり、製品から削除したりということは行っていません。xamGrid と関連エディターは製品に含まれています。

今回のエントリの目的は、製品に複数存在しているコントロールについてどのコントロールを使うべきかを明確にし、今後、弊社製品をご活用いただく際に混乱を生じさせないことです。

今後も xamGrid と関連エディターをご利用いただける状態ですが、新ためて、xamDataGrid および WPF 専用 エディターをお奨めします。

何卒、ご理解の程、よろしくお願いします。

[Ignite UI] パッケージおよび、リポジトリ名変更のお知らせ [npm]

あけましておめでとうございます。本年もよろしくお願いします。

Ignite UI は数年に渡り、jQuery UI を利用した UI ウィジェットライブラリーとして進化と続けてきました。このライブラリーは Angular、React、ASP.NET MVC、KnockoutJS など拡張機能を提供してきました。

また、ここ数年、市場からのニーズに応えるため、よりオープンな開発を進めていくために、一部のウィジェットに関してオープンソース化を行い、これらのパッケージを、npm などのパッケージマネージャーを使用してすぐにプロジェクトに適用できるような仕組みを整備してきました。

現在、下記に列挙するように数多くの npm パッケージを npmjs で公開しています。また、オープンソース化されているパッケージについては GitHub レポジトリでソースを確認することができます。

リポジトリ名 説明

ignite-ui

2010 年から開発を継続している、jQuery ベースウィジェット、Ignite UI for JavaScript のコア機能が含まれているパッケージ

ignite-ui-full

インフラジスティックスが提供するプライベート npm フィード (https://packages.infragistics.com/npm/js-licensed) で提供している、グリッドやチャートなど Ignite UI for JavaScript の全ての機能が含まれるパッケージ

igniteui-angularjs

ignite-ui および、ignite-ui-full を AngularJS (1.6 まで) で使用するための拡張機能.さらに以前は “igniteui-angular” というパッケージ名で公開

igniteui-angular2

ignite-ui および、ignite-ui-full を Angular (2,4,5) で使用するための拡張機能

igniteui-react

ignite-ui および、ignite-ui-full を ReactJS で使用するための拡張機能

igniteui-js-blocks

Angular 専用のコンポーネントとして開発された開発コードネーム (JS Blocks)、製品名 Ignite UI for Angular の各コンポーネントが含まれているパッケージ

igniteui-cli

Ignite UI for JavaScript、Ignite UI for Angular および、各種拡張機能を利用できるコマンド ライン インターフェース (CLI)



これらのパッケージは多くのエンジニアに利用いただいていましたが、下記の点が課題となりました。

  1. Google / Angular の開発チームが定義した Angular のバージョン表記の変更
  2. 開発コードネーム “JS Blocks” が製品版では “Ignite UI for Angular” と異なる呼称に

以前は、バージョン 1 系を表す ”AngularJS” が “Angular” と呼ばれており、バージョン 2 は ”Angular” ではなく、“Angular 2” を指していました。そのため、特に Angular 2 に対応した拡張機能をリリースする際に、”igniteui-angular2” と名前付けられた経緯があります。

現在は、バージョン 1 系を “AngularJS” 、バージョン 2 以降を “Angular” としているため、我々の npm パッケージを利用する際に混乱が生じる原因となっていました。

同じように、Angular 専用コンポーネントである、”Ignite UI for Angular” とそのパッケージ名 “igniteui-js-blocks” にも不統一が起きたことにより、今回、混乱を起こす原因となるそれぞれのパッケージ名、リポジトリ名を変更するという決定に至りました。

この変更は 2018 年 1 月 15 日 (月) を予定しており、影響を受けるパッケージ、リポジトリ名は下記の通りとなります。

リポジトリ名 変更後の
パッケージ名
説明

ignite-ui

変更なし

2010 年から開発を継続している、jQuery ベースウィジェット、Ignite UI for JavaScript のコア機能が含まれているパッケージ

ignite-ui-full

変更なし

インフラジスティックスが提供するプライベート npm フィード (https://packages.infragistics.com/npm/js-licensed) で提供している、グリッドやチャートなど Ignite UI for JavaScript の全ての機能が含まれるパッケージ

igniteui-angularjs

変更なし

ignite-ui および、ignite-ui-full を AngularJS (1.6 まで) で使用するための拡張機能

igniteui-angular2

igniteui-angular-wrappers

ignite-ui および、ignite-ui-full を Angular (2,4,5) で使用するための拡張機能

igniteui-react

変更なし

ignite-ui および、ignite-ui-full を ReactJS で使用するための拡張機能

igniteui-js-blocks

igniteui-angular

Angular 専用のコンポーネントとして開発された開発コードネーム (JS Blocks)、製品名 Ignite UI for Angular の各コンポーネントが含まれているパッケージ

igniteui-cli

変更なし

Ignite UI for JavaScript、Ignite UI for Angular および、各種拡張機能を利用できるコマンド ライン インターフェース (CLI)



今回の変更に際して下記が予定されています。[2018/1/22 追記しました]

  • 2018/1/12 現在 npmjs で公開されている igniteui-angular (igniteui-angularjs パッケージの前身) は非推奨となり、Angular 専用コンポーネントである、Ignite UI for Angular を含むパッケージに置換されます。
    • 過去にこの npm パッケージを利用している場合は、1/15 以降、igniteui-angularjs をご利用ください。
  • [2018/1/22 追記] これまで、igniteui-angular2 パッケージをご利用いただいている場合は、igniteu-angular-wrappers をご利用ください。v5.0.4、v5.0.5 には、下記の問題が確認されているため、v5.0.6 以降をご利用ください。
    https://github.com/IgniteUI/igniteui-angular-wrappers/issues/241
    • igniteui-js-blocks パッケージに非推奨のメッセージが追加されます。
    • 変更、非推奨となる全てのパッケージに注意を促すメッセージが追加されます。

    変更後のそれぞれのパッケージと対応する製品の関係は下記のようになります。

    products

    今回の変更により、今後、どの npm パッケージを使用したらよいかわからないという混乱を防ぐことができると考えています。

    また、これから Ignite UI for JavaScript、Ignite UI for Angular を用いて Web アプリケーションを開発する場合は、コマンド形式でライブラリーの参照設定やプロジェクトの構成などを自動化できる、Ignite UI CLI の利用をお勧めします。

    Ignite UI CLI については下記の GitHub リポジトリ、または Infragistics Ultimate 2017 Vol.2 オンラインセミナー動画をご覧ください。

    GitHub – Ignite UI CLI Installation

    [17.2] Infragistics Ultimate 2017 Vol.2 最新情報オンラインセミナーを開催しました。[Slide]

    先日、11/30 に Infragistics Ultimate 2017 Vol.2 の最新情報をご紹介するオンラインセミナーを開催しました。セミナーでは、下記のプロダクトについて最新情報をご紹介しました。

    スライド

    当日の動画

    また、来週 12/12 は業務 Web アプリ開発に特化したセミナー「Infragistics Web Day 2017」を開催します。Typescript、Visual Studio Code、テスト自動化、Angular など様々な手法やライブラリー、ツールの活用方法をご紹介させていただきます。ぜひ、ご参加ください!

    201712infragisticsday

    [17.2] Infragistics Ultimate 2017 Vol.2 リリース!

    本日、Web、モバイル、デスクトップ全ての開発を支援する開発コンポーネントスイート、Infragistics Ultimate の最新バージョン、Infragistics Ultimate 2017 Vol.2 をリリースしました!

    今回のリリースでは、多くのお客様からご要望をいただいた、Angular コンポーネントが正式にラインナップへ加わりました!このコンポーネントはモバイル、タブレット、デスクトップ向けアプリケーションを Angular で構築する際にご利用いただけるコンポーネントです。

    このエントリでは Ignite UI for Angular の紹介も含めて新機能のハイライトをご紹介します。

    新製品、Ignite UI for Angular を提供開始!

    アプリケーション フレームワークである、Angular を活用することでチーム開発への対応や、保守性、拡張性に優れたモダン Web アプリケーションを構築することが可能となります。今回のリリースでは Angular 専用コンポーネントとして開発した Ignite UI for Angular を新たに提供します。

    • データ グリッドを含む 30 種類以上の Angular 専用コンポーネントを収録。高いパフォーマンスと豊富な機能を提供
    • UI デザイン作成ツールである Sketch においてこの Ignite UI for Angular コントロールのスタイリングを行える Sketch ライブラリーの提供
    • シンプルな API かつ、軽量ライブラリー
    • GitHub でソースコードを公開、NPM を利用した組み込みにも対応
    • Apache 2.0 / 商用ライセンスのデュアル ライセンスでの提供

    などさまざまな特長があります。

    この Ignite UI for Angular は非営利目的の使用については無料で利用いただけます! 商用利用や、技術サポートを受けるためにはライセンスをご購入ください。

    また、2017 年 12 月 12 日 (火) に「フレームワークを活用した業務用 Web アプリ開発最新情報」をテーマに現在の Web を取り巻く最新情報や技術選定、開発体制、運用体制、環境やツール、よくありがちな落とし穴など業務システムへの適用について、さまざまな領域のエキスパートをお招きし考察するセミナーとして開催します。このセミナーでは体験ハンズオンへの申し込みも可能ですので、ぜひ、ご参加ください!

    image

    Ignite UI for JavaScript の新機能

    最初に、(恐らく)大多数の方に不評であった製品名が変更になりました!

    2017 Vol.1 の正式な製品名は…

    Ignite UI for JavaScript/HTML5 and ASP.NET MVC という非常に長い名前でしたが、社内ですら誰もこの名前で呼ばないという「なんでじゃ」という名前がついていましたが、Ignite UI for JavaScript とすっきりした名前となりました。何事もシンプルが 1 番です。今回のリリースでは、コントロールの機能拡張に加え、開発生産性を向上させる Productivity ツールの提供を開始しています。

    • プロジェクトの作成から必要な依存関係のロードまでを自動化できる Ignite UI コマンドライン インターフェース (CLI) の提供。開発前の面倒な設定を自動化します。
    • データグリッド (igGrid) の物理セル結合機能
    • スケジュール コントロールに日ビュー、週ビュー、繰り返しの予定機能のサポートが追加
    • ASP.NET Core 2.0 への対応

    そして、今後のロードマップも公開しました!大きな流れとして、将来的には jQuery への依存を取り除いたコントロールセットへと進化していく予定です。まだまだ開発と投資は続いていきます。

        

    Indigo Studio の新機能

    Indigo Studio には他ツールとの連携機能が強化されています。

    • デザインツール Sketch との連携。Sketch で作成したデザインをそのまま Indigo Studio にロードできるプラグインを提供します。このプラグインを利用することで、下記のような流れでプロジェクトの初期から開発を進めていくことができます。
      1. パーツのデザイン
      2. Indigo Studio へのロード
      3. プロトタイプの作成
      4. 実際の開発

    Infragistics Ultimate UI for Windows Forms の新機能

    他のプラットフォームで提供しているデータ可視化コントロールの拡充を Windows Forms では行いました。既存のデスクトップ向けアプリケーションの外観を近代化することができます。追加されたデータ可視化コントロールは下記の通りです。

    • カテゴリー チャート
    • ファンネル チャート
    • ブレット グラフ
    • リニア ゲージ
    • スパークライン

    Infragistics Ultimate UI for WPF の新機能

    Infragistics Ultimate for Xamarin で提供を開始したコントロール コンフィギュレーターが WPF にも対応しました。また、日本市場からの要望である、損益分岐点を表示するグラフも取り込まれています。

    • コントロールを視覚的に設定できるコントロール コンフィギュレーター
    • 損益分岐グラフを表現できるシェープ チャート
    • 散布データや等高線を表現するチャートを追加

    Infragistics Ultimate UI for Xamarin の新機能

    Xamarin.Forms 対応コントロールとしてコントロールが新たに追加されました。また、クロスプラットフォーム コントロールであるスケジュールにも他のプラットフォーム同様の拡張が加えられています。

    いかがでしたか?今回のリリースも非常に多くの機能拡張をおこなっています。

    そして、こらら全てを含んでいる Infragistics Ultimate ですが、年末までの期間限定で、

    Infragistics Ultimate プライオリティー サポート付きが 30% オフとなる特別キャンペーン

    を実施中です。非常にお得なキャンペーンですので、ぜひ、ご検討ください!