Daizen Ikehara

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

Archives

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種類のコンポーネントや、パターン、スタイルを提供します。
  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

      Distinct開催とIndigo.Design発表!

      先週、6/26に日本マイクロソフト株式会社セミナールームをお借りし、モダンアプリケーション開発セミナー、「Distinct」を開催しました。

      PRevent_banner1200_628

      当日は、大変多くの皆様にご参加いただくことができました。受付開始前から長蛇の列ができていたと担当からも報告を受けており、セミナー全体を通して、参加者の皆様の関心の高さをひしひしと感じられました。

      image

      セミナーでは、まず、弊社代表の東より、モダンアプリケーション開発セミナーを成功に導くための要素についてご紹介を行いました。

      image

      image

      更に、ゲストスピーカーをお招きし、第一、第二それぞれの成功要因について詳しくお話いただきました。

      モダンアプリケーション開発のチャレンジと、今押さえておきたい技術とツールの活用

      image

      日本マイクロソフト株式会社
      クラウド & ソリューション事業本部 グローバル ブラックベルト部
      テクノロジー ソリューション プロフェッショナル (App Innovation)
      井上 章 (@chack411) 氏

      セッションスライド

      なぜAngularなのか、2018年の答え

      image

      株式会社Kaizen Platform
      Angular日本ユーザー会 代表
      稲富 駿 (@laco2net) 氏

      セッションスライド

      Distinct: モダンアプリケーション開発において他者との差別化を実現する Indigo.Design

      image

      そして、前2つのセッションを受けて、他社との差別化要因となるUI/UXを実現するデザイナー・デベロッパー開発フローについて米国本社からシニアバイスプレジデントのJason Beresが来日し、全世界に先駆けてIndigo.Designをご紹介しました!

      セッションスライド

      このセミナー実施にあたりご協力いただいた皆様、また当日ご参加いただきた皆様、ありがとうございました。当日のレコーディングについはこちらで公開しております。

      イベント詳細

      さて、Indigo.Designはデータ起点ではなく、「画面デザイン起点」でアプリ開発を進めていくという点が他のツールと異なる点だと考えています。画面デザインをいかに再現するかという点について我々がこれまで提供してきたUIコンポーネントの知見や弊社デザイン、UXチームの総力を挙げて開発しました。一般提供開始は2018年7月19日を予定していますが、下記製品ページのフォームに登録いただくと製品リリースの際に情報をいち早くお届けすることができます。ぜひ、事前登録をお願いします!

        Indigo.Design  
      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 専用 エディターをお奨めします。

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