インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

12個のテンプレートでウェブアプリを高速デザインしよう(よくあるご質問解説)

こんにちは!ソリューションコンサルタントの田上です。

インフラジスティックス製の「App Builder」はWebアプリケーションのUIデザインをドラッグ&ドロップで作成することができるローコードツールです。

今回の記事では、App Builder の「デザインテンプレート」の全12パターンをご紹介します。テンプレートを活用することで、これまで1画面の開発に費やしていた「UIデザイン工数を大幅に削減すること」ができます。

本日の流れですが、

  • テンプレート」をもとに誰でもカンタンにUIデザインを作成することができます。
  • スクラッチでUIデザインするよりも「UIデザイン工数を大幅に削減」することができます。
  • 職人に依存せずに「汎用的なUIデザイン」を生産性高く作成することができます。

また、App Builder は「テンプレート」で作成したUIデザインから、1ピクセルのズレもなく「コード(HTML , CSS , Angular , Blazor , WebComponents)」を自動生成することができる「WYSIWYGエディタ」になっており、デザインからプログラミングの業務フローを効率化できるローコードツールになっています。

直ぐに使える「デザインテンプレート」を一覧にしていますので、早速見て行きましょう。

https://jp.infragistics.com/products/appbuilder

続きを読む

App Builder のデザインコードを GitHub で差分管理してアジャイル開発を実現しよう(よくあるご質問解説)

こんにちは!ソリューションコンサルタントの田上です。

インフラジスティックス製の「App Builder」はWebアプリケーションの画面デザインをドラッグアンドドロップで作成することができるローコードツールです。また、画面デザインを 3つのプログラミングコードに自動生成することができます。(Angular、Blazor、WebComponents コードの 3つ)

今回の記事では「App Builder から自動生成したデザインコード」を「GitHub で差分管理」することで、Webアプリケーションの「画面デザイン工程からプログラミングのアジャイル開発」へつなげるアプローチを見て行きましょう。

  • 「App Builder」で自動生成した画面デザインコードを 「GitHub」で差分管理する
  • 開発者はデザイン変更を「コードの差分」で確認することができる(プッシュ通知あり)
  • コードをZIPファイルで管理するよりも、GitHub の機能によるバージョン管理が行いやすい

App Builder は GitHub との連携をサポートしています。そのため、App Builder のデザインコードを GitHub でブランチ管理することができます。ぜひ開発現場の効率化になれば幸いです。

それでは、詳細をご説明させていただきます。

https://jp.infragistics.com/products/appbuilder

続きを読む

Figma のデザインを HTML コードへ自動変換する App Builder の操作手順(よくあるご質問解説)

https://jp.infragistics.com/products/appbuilder

こんにちは!ソリューションコンサルタントの田上です。

もしあなたが今、Figma のファイル(.fig)を持っていて、その Figma ファイルのデザインをソースコード(HTML、CSS、開発言語コード)へ変換したいプロセスを考えた場合に、この手順が役に立つはずです。

Figma のデザインファイルをインフラジスティックス製の「App Builder」に取り込むことで、「Figma のデザイン」を元に HTML コードや CSS コード、Angular 用の TypeScript コード、Blazor 用の Razor コード、Web Components の「コードを自動生成」することができます。

  • 「Figma」から 「HTML/CSS コード」への自動生成
  • 「Figma」から 「React コード」への自動生成
  • 「Figma」から 「Angular(スタンドアローン) の TypeScript コード」への自動生成
  • 「Figma」から 「Angular(モジュール) の TypeScript コード」への自動生成
  • 「Figma」から 「Blazor(Server) の C#、Razor コード」への自動生成
  • 「Figma」から 「Blazor(WebAssembly) の C#、Razor コード」への自動生成
  • 「Figma」から 「Web Components コード(ネイティブの TypeScript)」への自動生成

「Figma」のデザインファイルをコーディング開発工程に流すフローを採用している企業は年々増えてきています。ぜひ開発現場の効率化になれば幸いです。では、詳細をご説明させていただきます。

https://jp.infragistics.com/products/appbuilder

続きを読む

Next.js で Ignite UI for React の連携方法:動的インポートを徹底解説(よくあるご質問解説)

こんにちは!ソリューションコンサルタントの田上です。

今回の記事では、大手企業の「データ計測アプリケーション」にインフラジスティックス製のUIライブラリである「Ignite UI for React のチャート 」を使いたいというお話をお寄せいただきました。

複雑なチャートの機能要件(滑かで精度の高い曲線/ズームイン/ズームアウト/2段チャート/ラインの見せ方/etc...)を追求していく上で、React のためのレンダリングフレームワークである「Next.js」の環境を使いたいという内容でした。

お客様のご質問はこのような点でした。

  • Ignite for React のトライアル」を進める中で「Next.js プロジェクト」がうまく動作しません。
  • 「Ignite for React」は、SSRやCSRなどのレンダリング方法をサポートしていますか?
  • 「Next.js」フレームワークで動作させるための「コーディング方法」を知りたい。

Ignite UI for React」は、軽快でインタラクティブなソリューションを実現するUIコンポーネントですが、最初のトライアルでつまづくような場合の問題解決の Tips になれば幸いです。では、詳細をご説明させていただきます。

続きを読む

サンプルブラウザーの「サンプルアプリケーション」を上手く起動できない場合の解決方法(よくあるご質問解説)

https://jp.infragistics.com/products/windows-forms

こんにちは!ソリューションコンサルタントの田上です。

今回の記事では、大規模工場の業務システムでインフラジスティックス製のUIライブラリ(チャートやグリッド)が既に使われており、その「Ultimate UI for Windows Forms」の開発プロジェクトを引き継ぐことになられた開発者様からお寄せいただきました機能質問についてお答えします。

お客様のご質問はこのような点でした。

Ultimate UI for Windows Forms」は、軽快でインタラクティブなソリューションを実現するUIコンポーネントですが、最初のトライアルでつまづくような場合の問題解決の Tips になれば幸いです。では、詳細をご説明させていただきます。

続きを読む

App Builder リリース:新機能「ルートパラメーター」& 従属変数を使ったナビゲーション

App Builderに初めて触れる方々へ なぜこのツールがあなたの組織のアプリ開発プロセスにおいて重要なのかをまず簡潔にご説明します。

  • App Builderは、プロダクトマネージャー、デザイナー、開発者、関係者のための統合プラットフォームです。
  • クラウド上で動作するこのWYSIWYG(What You See Is What You Get)ドラッグ&ドロップツールを使うことで、企業は従来よりも80%高速にフルフレッジのビジネスアプリケーションを設計し、構築することが可能になります。
  • FigmaやSketchでのデザイン作業からスタートし、運用環境で活用できるBlazorAngularWebコンポーネントのコードを生成することができるローコードツールです。

App Builderが2月にリリースしたアップデートには、長い間期待されていた新機能が盛り込まれています。 このアップデートの中心にあるのは、アプリケーションの状態管理をより簡単にするための変数の使用です。 特に、「ルートパラメーター」という特別な種類の変数を使うことで、アプリケーション内でのナビゲーションが格段にスムーズになります。

このアップデートにより、App Builderは開発者だけでなく、デザインやプロダクト管理に携わる人々にとっても、これまで以上に魅力的な選択肢となりました。設計から実装までのプロセスが大幅に短縮され、アイデアを素早く形にすることが可能になるのです。App Builderを活用することで、あなたのチームは創造性を最大限に発揮し、市場に出す製品の質とスピードを同時に高めることができるでしょう。

続きを読む

カレンダーバー部品の色を変えて予約管理システムのUIカスタマイズを手早く実現!(よくあるご質問解説)

https://jp.infragistics.com/products/windows-forms

こんにちは!ソリューションコンサルタントの田上です。

今回の記事では、他社製のUIライブラリから「Ultimate UI for Windows Forms」に移行をし、カレンダー部品を使って予約管理システムの「本予約/仮予約/キャンセル」を実現したいという開発者様からお寄せいただきました機能質問についてお答えします。

お客様のご質問はこのような点でした。

  • カレンダー(WinMonthViewMulti)」の「バーの色を変更する方法」を知りたい。
  • カレンダーの「月表示」「週表示」を実現したい。
  • カレンダーのUI/UX表現方法を習得して「ユーザーエクスペリエンス」を向上したい。

Ultimate UI for Windows Forms」は、このような要件も気軽に実装いただくことができます。では、詳細をご説明させていただきます。

続きを読む

.NET Framework環境でカレンダー部品をWindows Formsデザイナーに配置する方法(よくあるご質問解説)

こんにちは!ソリューションコンサルタントの田上です。

今回の記事では、他社製のUIライブラリから「Ultimate UI for Windows Forms」に移行をし、カレンダー部品を使って予約管理システムの「本予約/仮予約/キャンセル」を実現したいという開発者様からお寄せいただきました機能質問についてお答えします。

お客様のご質問はこのような点でした。

  • Ultimate UI for Windows Forms のカレンダー部品をデザイナーにドラッグアンドドロップする方法を知りたい。
  • Ultimate UI for Windows Forms のトライアルをスタートしたばかりです。
  • フレームワークは「.NET Framework 4.8」を利用しています。

Ultimate UI for Windows Forms」は、軽快でインタラクティブなソリューションを実現するUIコンポーネントですが、最初のトライアルでつまづくような場合の問題解決の Tips になれば幸いです。では、詳細をご説明させていただきます。

続きを読む

Ignite UI for Angular 17.0 リリースノート

Ignite UI for Angularリリースノート

インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 17.0 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。

  • TypedocSass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。
続きを読む

Ignite UI for Angular 15.1 リリースノート

Ignite UI for Angularリリースノート

インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular  15.1 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。

  • TypedocSass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。
続きを読む

Angular v17 リリース:「組み込み構文」を使うことで開発スピードが向上します!

https://jp.infragistics.com/products/ignite-ui-angular

「Angular v17 リリース」により、最適化された「Angularの制御フロー」のための新しい「組み込み構文」を採用することで、Ignite UI for Angular コンポーネントでの Angular 開発プロセスを、さらに効率よく強化できる機能がリリースされました。

この強力な機能により、コードが簡素化され、型チェックが改善され、ファイルサイズが縮小され、パフォーマンスが向上します。それでは、いくつかのサンプルコードを作成しながら、構文の動作を確認しましょう。

続きを読む

Angularスタンドアロン・コンポーネントを徹底解説!

https://jp.infragistics.com/products/ignite-ui-angular

開発プロセスの変更と強化に関して、あらゆる手段を講じるフレームワークが 1 つあるとすれば、それは Angular フレームワークです。Angular 16.0.0 リリースでは、ツール、サーバーサイドレンダリング、リアクティブなどに大きな進歩が加えられています。開発者コミュニティにとって、AngularスタンドアロンAPIの導入は多大なるメリットをもたらします。特に「Schematics for Standalone Components」と呼ばれる新機能についてはチェックしてください。これは、再利用可能なUI要素とライブラリを構築する能力を刷新すると同時に、定型モジュールを排除しています。この特徴が、Angular 16.0.0 バージョンの最大の改善点の1つです。

続きを読む

App Builder の新機能を使ってマスター・ディテール アプリを実現する

App Builder は、最新の開発フレームワークをベースとした画面デザイン・レイアウトの作成に秀でたツールです。これまでも、実際のデータをバインドし、CRUD操作を実行するという機能が利用可能でしたが、最新リリースでは、よりインタラクティブなアプリケーションを構築するため「変数」、「状態管理」、「選択イベント」といった新しい概念を導入しています。これにより、マスター・ディテールなどのこれまでに実現できなかったパターンを実装出来るようになりました。

続きを読む

App Builder リリース:財務チャート、変数管理 UI など新機能をチェックしよう!

App Builder 開発チームの 2023年12 月のアップデートがリリースされました!このリリースには重要なアップデートが含まれていますのでチェックしてください!App Builder はチャートやグリッドといったUI部品を、ツールボックスからドラッグアンドドロップだけの簡単操作で、Webページの画面をデザインすることができるローコードツールです。

そのツールボックスに、今回新しく「財務チャート」が含まれるようになりました。これにより、ドラッグアンドドロップで財務チャートをデザインすることができるようになりました。複雑な財務チャートをよく使うプロジェクトであれば、開発工数を大きく削減することができます。

続きを読む

ローコード App Builder の2023年を振り返って

2023年は、ローコード App Builder プラットフォームにとって大きく飛躍した 1年だったと言えます!App Builder 開発チームは、新しいマイルストーンを定めて新しい機能をリリースし続けてきました。3年以上前に話した機能の 90% が実装されているという現在のリリース状況はとても喜ばしいことです。これは App Builder の進化と言っても良いと思います。

続きを読む