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

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

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

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

Ignite UI for Angularリリースノート

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

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

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

Ignite UI for Angularリリースノート

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

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

Angularデータグリッドでの国際化とローカライゼーションの対応方法!

世界中のユーザーに対応したソフトウェアを作成するためには、インターナショナリゼーション『 i18n 』とローカリゼーション『 l10n 』という2つの重要なプロセスが関わります。これらの用語はしばしば同じ意味で使われることがありますが、実際には異なるプロセスを指します。

この記事では、国際化とローカリゼーションの基本を解説し、ローカライズされた Angular アプリケーションのセットアップ手順を段階的に説明します。また、『Ignite UI for Angular』を活用して多言語対応のデータグリッドを作成するための実践的なアプローチもご紹介します。

それでは、始めましょう!

続きを読む

【2024年】プライオリティサポートの費用対効果は? 導入メリットを解説!

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

プライオリティサポート(※以下、PS)の導入を検討する際、多くの企業が直面するのが社内承認プロセスの壁です。特に、予算に関する制約や決済に必要な手続きが複雑であるため、PSの導入が後回しにされがちです。

しかし、PSがもたらす利益を理解し、その価値を社内で効果的に伝えることができれば、プロジェクトの成功率を大きく高めることができます。本記事では、PSの導入をスムーズに進めるための重要なポイントと具体的なメリットを詳しく解説します。

続きを読む

ナレッジベースのコンテンツご紹介 - Ignite UI for Blazor チャート編

こんにちは!ディベロッパーサポートチームの Mori です。

今回は弊社で育てているナレッジベースより Ignite UI for Blazor に関するコンテンツをいくつかご紹介したいと思います。

Ignite UI for Blazor のコンポーネントでもお問合せが多いのが IgbDataChart です。

その中でも X軸、Y軸のラベルに関する内容は特に多く、プロットするチャートと同じくらい重要な情報ですので、さまざまなご要望を頂きます。

今回は特にお問合せの多い3つのケースをご紹介したいと思います。

ではいってみましょう!

軸ラベルの文字列を全て表示したい!

ご紹介するナレッジベースはこちら

kb.jp.infragistics.com

こちらでは長~い長~いラベルが重なってしまい、途中から「…」になってしまうので、全体を表示させたい!けどチャート全体は間延びさせたくない!というご要望に対応する方法をご紹介しています。

長いラベルが途中から「...」になってしまう

このように、識別したい日付部分が見えない状態になってしまっているときの対策になります。

 

こちらの方法を使うことで、以下のような見た目にすることが可能となっております。

角度は調整することができますので、斜めにするなどの工夫もできますね。

ラベルに角度をつけて、表示領域を確保しました

コンテンツのページからサンプルもダウンロードできますので、是非お試しください!

軸ラベルのフォーマットを変えたい!

ご紹介するナレッジベースはこちら

kb.jp.infragistics.com

ここではありがちな長~い長~い少数値を、桁数をしぼってぴしっとわかりやすく表示したい。というご要望に対応する方法をご紹介しています。

長い長い少数値はとっても読みづらい!

上の図は X 軸ラベルの Interval プロパティ1.255 と中途半端な設定にしております。軸のラベルが見づらいですね。。(KB のサンプルでは 1.25 に設定してありますが、長~い長~い少数値を表示するため、冗長な値にして試してみました。)

またツールチップはチャートの Value 値をそのまま出力しているので、長~い長~い少数値が気になり僕のようなめんどくさがりには見てももらえないことでしょう。(ひどい!)

 

こちらでご紹介の方法を使うことで、X 軸ラベルとツールチップ表示の桁数をすっきりとしたフォーマットに変更することができます。

読みやすい!「...」も解消!

こちらもサンプルをダウンロードできますので、是非お試しください!

数値軸のラベルをカンマで区切りたい!

ご紹介するナレッジベースはこちら

kb.jp.infragistics.com

ここではありがちな長~い長~い売り上げ数値を、カンマで区切ってバリっとわかりやすく表示したい。というご要望に対応する方法をご紹介しています。

売上どころじゃない読みづらさ!もういや!

この場合は、Y 軸ラベルに “売上” として商品価格を表示していますが、お気づきのとおり、こんな長い長い数ではもう売り上げどころではありませんね。儲かりまへん!(?)

 

こちらでご紹介する方法で、Y 軸ラベルを金額らしく 3 桁ごとに区切って表示することができます。

売上額も把握しやすくなり、儲かりそうな気がしますね!(Yes!)

調子が一目瞭然です!

こちらもサンプルをダウンロードできますので、是非お試しください!

まとめ

いかがでしたでしょうか。今回は  Ignite UI for Blazor でもお問合せの多いチャートについて、特にお問合せの多い以下3つについて、参考記事のご紹介をさせていただきました。

  • 軸ラベルの文字列を全て表示したい!
  • 軸ラベルのフォーマットを変えたい!
  • 数値軸のラベルをカンマで区切りたい!

是非お役立ていただけますと幸いです。

Reactで作成したアメリカ大統領選2024の結果可視化チャートのご紹介

こんにちはインフラジスティックス・ジャパンです。 アメリカ大統領選挙が数時間後に控えている状況ですが、豊富なデータ可視化コンポーネントを開発する弊社インフラジスティックスでは、開票結果を視覚化し、さらにインタラクティブに結果を切り替える事ができる、以下のようなサンプルアプリケーションをReactを使って作成しました。

続きを読む

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

Ignite UI for Angularリリースノート

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

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

App Builder でレスポンシブデザインを作成しよう!

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

現代のWeb開発において、レスポンシブデザインは欠かせない要素です。スマートフォンやタブレット、デスクトップといった様々なデバイスで、同じサイトを快適に閲覧できることは、ユーザー体験の向上やビジネス成功の鍵となります。特に画面サイズや解像度が多様化する中で、柔軟なレイアウトが求められています。

App Builder を活用することで、このようなレスポンシブデザインを簡単かつ効率的に実現できます。App Builder はドラッグ&ドロップの直感的なインターフェースで、Webアプリケーションを構築できるローコードツールです。

複雑なレイアウトも手軽に構築でき、コード自動生成により開発時間を大幅に短縮します。特に Flex レイアウトを使えば、解像度に応じた動的なレイアウト変更を容易に行えるため、様々なデバイスに対応したUIデザインが可能です。

この記事では、App Builder で「Flex レイアウト」と「Wrap(折り返し)機能」を活用して、効率的なレスポンシブデザインを構築する具体的な手順をご紹介します。

続きを読む

【Ultimate UI for WPF、Windows Forms、ASP.NET MVC】インストーラーか NuGet フィードを利用するのか

こんにちは! テクニカルコンサルティングチームの石橋です。

弊社の Ultimate UI for WPF、Ultimate UI for Windows Forms、Ultimate UI for ASP.NET MVC のインストールは、NuGet パッケージ を NuGet フィードから取得して利用するものもあれば、インフラジスティックスの製品インストーラーを利用できるものもあります。この記事では、インストーラーが利用できるのかあるいは NuGet フィードを利用するのか、判断の分岐点となるような観点をまず説明したあとに、プラットフォームごとに具体的にどちらを選択することになるのかをまとめたいと思います。

続きを読む

『 Ignite UI for Angular 』 ニーズに最適なライブラリである理由トップ 10

興味深いことに、Ignite UI for Angular はもともと、現在の App Builder としてのSaaSアプリケーションを強化するために始まったプロジェクトです。当初は、アプリのフレームワークとして使用され、ツールボックスからコンポーネントをドロップしてアプリを構築する体験を提供することが目的でした。最終的には、ローコードツールとしての役割を超え、完全なコンポーネントライブラリへと進化しました。

では、他のUIライブラリと比較して、どこが際立っているのでしょうか?主な違いは次の通りです。

続きを読む

新機能: Ignite UI for Angular 24.1 リリース

ここ数ヶ月間の Ignite UI for Angular の最新アップデートでは、Web 開発者のアプリ構築エクスペリエンスを合理化し改善するように設計された、広範な新機能と拡張機能を導入しました。

この継続的なアップデートには、ユーザーがデータを視覚化する方法の大幅な機能強化から、パフォーマンスの最適化、新しいコンポーネントなど、さまざまなものが含まれています。主なハイライトは何でしょうか? すべて見ていきましょう。

続きを読む

新機能: Ignite UI for React 24.1 リリース

Ignite UI for React に大幅な改善が多数施され、継続的なリリースの一環として機能性とパフォーマンスを強化する新機能が導入されたことをお知らせします。主な更新内容には、Hierarchical Grid、Button Group、データの視覚化を向上させるゲージなどのコンポーネントが含まれています。これらはすべて、開発者が高品質でレスポンシブな Web アプリケーションを簡単に作成できるように調整されています。では、詳しく見ていきましょう。

続きを読む

新機能: Ignite UI for Web Components 24.1 リリース

ここ数か月間、Ignite UI for Web Components に大幅な改善を加えてきました。これらの機能強化は、ビジネス グレードの Web アプリを作成するための、さらに強力で機能満載のツールを開発者に提供することを目的としています。最新リリースでは、パフォーマンス、アクセシビリティ、全体的な UX を強化する新機能と最適化を導入しています。

これらの更新について詳しく見ていきましょう。

続きを読む

新機能: Ignite UI for Blazor 24.1 リリース

Ignite UI for Blazor は、最新のレスポンシブ Web アプリケーションの作成を目指す開発者向けに、堅牢で高性能なソリューションを提供し続けます。 ここ数か月間、当社は継続的な改善に注力し、より優れた UX と UI を構築するために必要なツールと機能を提供してきました。最新の機能強化には、.NET 8.0、チャート ハイライト表示フィルター、状態保持、およびいくつかの新しいコンポーネントのサポートが含まれます。

新しい機能をすべて詳しく見てみましょう。

続きを読む

【App Builder 活用術】デザインとコードをGitHubでブランチ管理!仕様変更に強いマージ戦略を考える

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

近年のWebアプリケーション開発においては、効率と柔軟性を両立させることが求められています。特に、開発プロセスにおいてデザインとコードの仕様変更が頻繁に発生する場合、それらをシームレスに管理できることはプロジェクトの成功に不可欠です。

そんな中で注目されているのが App Builder です。このツールは、ビジュアルデザインから自動的にコードを生成する画期的な機能を備え、デザインと開発の一体化を強力にサポートします。

しかし、一部の開発現場からは「App Builder は一次開発のみに適しているのでは?」という懸念が挙がっていることも事実です。具体的には、一度自動生成されたコードにカスタマイズを施した後、App Builder へ再インポートできない仕様が課題とされています。

このため、「デザインの仕様変更」や「二次開発で新たなデザインを反映したい」場合に、App Builderが使えなくなるのではないかというご心配の声をお聞きします。

この記事では、GitHub を活用したブランチ構成(main-dev-feature)を導入することで、こうした課題をクリアでき、App Builder をプロジェクトの全てのフェーズで適用してデザインを反映できる解決策を紹介します。これにより、App Builder の利用者は何度でもデザインの仕様変更に対応することができ、二次開発の新たなデザインを取り込むことができるようになります。

App Builder を使用してWebアプリケーションを開発する際には、デザインの変更とカスタマイズしたコードを効果的に管理するためのマージ戦略がとても重要です。それでは早速見て行きましょう。

続きを読む