ローコードでハンバーガーメニューを作ろう！App Builder のルーティング機能（よくあるご質問解説）

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

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

Webアプリケーション開発において、ハンバーガーメニューを実装したいというご要望は、よく耳にすることがある機能の１つだと思います。今回の記事では、App Builder を活用して「ハンバーガーメニュー」を簡単に実装する方法をご紹介します。

App Builder には「テンプレート」が豊富に準備されており、テンプレートからハンバーガーメニューを作成することができます。

本日の流れは下記です。

• ローコード App Builder で「ハンバーガーメニュー」を作成する。
• ハンバーガーメニューに「新しいメニュー」を新規追加する。
• 追加したメニューに「ルーティング」を設定する。

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

また、作成したデザインは、レスポンシブ機能（PC・スマホ）を対応しています。それでは、早速見て行きましょう。

カレンダー予約入力フォームを「カスタムコンポーネント」で実装する方法（よくあるご質問解説）

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

今回の記事では、他社製のUIライブラリからインフラジスティックス製「Ultimate UI for Windows Forms」に移行をし、カレンダーのフォームを「カスタムコンポーネント」で実装して、予約管理システムを実現したいという開発者様からお寄せいただきました機能質問についてお答えします。

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

• カレンダーの「予約入力フォーム」に「標準以外の項目を追加」したい。
• 自社独自の項目を追加した「カスタムコンポーネント」を使って機能拡張したい。

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

Webアプリケーションの色やフォントをカンタンに統一する方法（よくあるご質問）

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

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

今回の記事では、App Builder の「テーマ機能（色・フォント）」を使用することで、Webアプリケーション全体の「色やフォントをカンタンに統一すること」ができます。Webアプリ開発に関わるメンバー数が多くなるにつれて、色やフォントといった「外観を統一させる仕組み」は重要になります。

また、Webアプリケーションのテーマを統一しつつ、エンドユーザー企業のコーポレートカラーに合わせて「それぞれ個別のテーマに切り替えたい」といった需要も多くあると思います。このような場合にも、カスタムテーマを作成することができるため「A社向けのテーマ」「B社向けのテーマ」「C社向けのテーマ」といった様に、Webアプリケーションのビジュアルに視覚的な特徴を持たせることができます。

App Builder のテーマ機能の特徴としては、

• デフォルトで 6パターンの「テーマ（色・フォント）」を使用できます。
• さらに「カスタムテーマ（色・フォント）」を作成することが可能です。
• 「エンドユーザー別」にカスタムテーマの切り替えるといったことが可能です。

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

それでは、早速見て行きましょう。

【2024最新】最適なBlazorコンポーネントライブラリ：厳選 TOP 7

Blazor は、Web開発を行う .NET 開発者にとって、最もホットなトピックです。Web 開発の世界が日々進化する中、Microsoft の Blazor フレームワークは、革新的な方法で対話型Webアプリケーションの開発を可能にしました。このフレームワークを利用することで、開発者はC#と.NETの機能を最大限に活用しながら、複雑なJavaScriptの使用を避け、より広範な.NETエコシステムとシームレスに融合した魅力的なWeb体験を提供できます。ただし、現在市場には多種多様なBlazorコンポーネントライブラリが存在しており、最適なライブラリを選ぶことはやや困難になりがちです。

そこで、開発者が効率的に優れたユーザーインターフェースを構築できるよう、特におすすめのBlazorコンポーネントライブラリTOP7を厳選しました。

Blazor アプリ上で Excel ライクなスプレッドシートを実現する

Blazor アプリケーションの開発時に、Excel ライクなスプレッドシートを実現したい、ということはありませんか? インフラジスティックスが提供するクライアント Web アプリケーション向けコンポーネント製品 Ignite UI for jQuery を活用すると、Blazor アプリケーション上でも Excel ライクなスプレッドシートを実装できます!

Web開発で欠かせないモックアップやプロトタイプをローコードで手早く作成する（よくあるご質問解説）

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

「上流工程でのモックアップやプロトタイプの作成」はWeb開発において欠かせない重要なプロセスです。しかし、開発現場ではタイトなスケジュールで進めなければならないことも多く、モックアップやプロトタイプを作成する時間が、なかなか取れないことも多くあるのではないでしょうか。

そこで登場するのが、モックアップやプロトタイプよりもさらに高度な「実際に動作するプロダクションコード」までを手早く作成することができる「ローコードツール App Builder」です。

モックアップ、プロトタイプ、プロダクションコードは、似ていますが下記のような意味があります。

• モックアップ・・・低コストで作成する画面デザインの紙芝居（動的処理の実装なし）
• プロトタイプ・・・機能や画面を実際にインタラクション操作可能なプログラム（動的処理の実装あり）
• プロダクションコード・・・リリース本番環境に配置して動作可能な本番コード

インフラジスティックスの「App Builder」はWebアプリケーションのUIデザインをドラッグ＆ドロップで作成することができるローコードツールです。App Builder で作成したUIデザインから、1ピクセルのズレもなく「コード（HTML , CSS , Angular , Blazor , WebComponents）」を自動生成することができる「WYSIWYGエディタ」になっています。

今回の記事では、App Builder を使って「Webアプリケーション（プロジェクトファイル一式）」を作成して、完成したWebアプリケーションを「プレビュー（URL共有）」するところまでを解説します。

本日の流れですが、

• 画面の「デザインレイアウト」を決めます。
• UI部品を「ドラッグ＆ドロップ」で配置します。
• 完成したWebアプリケーションを「URLで共有」します。

UIデザインからプログラミングの業務フローを効率化できるローコードツール App Builder について、早速見て行きましょう。

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

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

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

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

本日の流れですが、

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

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

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

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 でブランチ管理することができます。ぜひ開発現場の効率化になれば幸いです。

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

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

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

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

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 になれば幸いです。では、詳細をご説明させていただきます。

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

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

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

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

• 「Ultimate for Windows Forms のトライアル」をスタートしたばかりです。
• 「Infragistics のサンプルブラウザー」の利用は初めてです。
• 「Visual Studio 2022 のDLL参照設定」について知りたい。

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

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

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

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

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

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

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

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

今回の記事では、他社製の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 17.0 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。

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