〈GcComment〉コメントコンポーネントがさらに高機能に

チャットやフォーラム、会話アプリなどで見られるコメント機能のUI構築をサポートする「コメントコンポーネント(GcComment)」において多数の機能強化を実施し、より多様な要件に対応できるようになりました。

リンクのコピー

投稿済みのコメントへのリンクをコピーできるようになりました。コピーしたリンクにアクセスすると対象のコメントの位置に自動的に移動できるので、特定のコメントを別のメンバーに共有したり、重要なコメントへのリンクを保存してアクセスしやすくしたりといった使い方が可能です。

「リンクのコピー」のデモを見る

コピーしたリンクをペーストした際の表示形式や表示テキスト、URLの構成要素などは要件に合わせて柔軟なカスタマイズが可能です。表示形式はリンク形式、インライン形式、カード形式の3種類から選択可能です。

3つの表示形式

コメントのピン留め

特定のコメントを画面上部にピン留めして表示できるようになりました。ピン留めされたコメントをクリックすると、そのコメントの位置に移動できます。

「ピン留め」のデモを見る

コメント数とリアクション数の更新

ヘッダーに表示されているコメント数とリアクション数を更新するAPIを追加しました。AfterExecuteCommandイベントと組み合わせることでコメント数とリアクション数をリアルタイムで更新することが可能です。

「ヘッダー」のデモを見る

リアクションリストボタンを非表示可能に

リアクションリストボタンを非表示に設定できるようになりました。後述のリアクションの件数が0でもリアクションアイコンを表示できる機能と併用すれば、特定のリアクションのみ使用可能なように制限を加えることができます。

「カスタム表示」のデモを見る

リアクションリストボタンを非表示可能に

リアクションの数が0の場合の表示

リアクションの数が0の場合でもリアクションアイコンを表示できるようになりました。前述のリアクションリストボタンを非表示にする機能と併用すれば、特定のリアクションのみ使用可能なように制限を加えることができます。

「カスタム表示」のデモを見る

HTTPリクエスト時のコンテンツタイプを指定可能に

コメントコンポーネントと連携するAPIへPOST、およびPUTリクエストを送信する際のデータのコンテンツタイプとして、新たにJSON形式を指定できるようになりました。requestDataTypeプロパティに以下のGcCommentRequestDataType列挙体の値を設定することでコンテンツタイプを変更できます。

  • FormData(デフォルト):フォームデータ形式
  • JSON:JSON形式

「データソース」のデモを見る

コメントコンポーネントの実用サンプルを追加

コメントコンポーネントの実用例がわかるサンプルアプリケーションを3種追加しました。

チャットボット

コメントコンポーネントとタグボックスコントロールを組み合わせたチャットボット風のサンプルアプリケーションです。
コメントコンポーネントを利用して問い合わせ用の回答を表示し、質問に応じた回答をリンク、テーブル、画像、リストなどで表現しています。また、タグボックスコントロールを利用して問い合わせ用の既定の質問を表示しています。

「チャットボット」のデモを見る

ライブチャット

コメントコンポーネントを使用してリアルタイムチャット機能を実装したサンプルです。
チャット上でコメントを送信したり、リアクションを追加したりすると、別の画面にもリアルタイムに反映されます。

「ライブチャット」のデモを見る

課題管理ツール

リッチテキストエディタコントロールとコメントコンポーネントを使用した課題管理ツールのサンプルです。
リッチテキストエディタコントロールで課題の編集や新規投稿用のテンプレートの機能を実装し、コメントコンポーネントで課題に対するコメントの投稿機能を実装しています。

「課題管理ツール」のデモを見る

〈GcValidator〉検証結果のトースト通知

検証コントロールで使用可能な通知の種類としてトーストを追加しました。notifyプロパティ、またはdefaultNotifyプロパティにtoastを指定することで、検証結果に応じたトーストを表示できます。

「トースト通知」のデモを見る

トーストの表示時間や表示位置などはオプションで柔軟にカスタマイズ可能です。また、トーストの表示内容を定義するテンプレートを用意して表示をカスタマイズすることもできます。

トースト通知の表示をテンプレートでカスタマイズ

〈GcNumber〉スライダー入力でスライダーバーのみを表示する

数値コントロールでレンジスライダー入力を有効にした場合に、入力フィールドを非表示にしてスライダーバーのみを表示できるようになりました。INumberSliderConfigインターフェースに新しく追加されたreplaceEditorオプションを使用して入力フィールドを非表示にできます。

「入力フィールドの非表示」のデモを見る

スライダー入力で入力フィールドを非表示にする

スライダーバーのみを使用したUIは直感的に値を設定したい場合に有用です。評価/満足度の10段階での入力、色相/彩度/明度などの色の調整、拡大率の調整、音量や明るさの調整など、さまざまなUIの構築に活用できます。

スライダーバーのみで構築するUIの例

〈GcListBox、GcComboBox〉フィルタ演算子の追加

リストコントロールとコンボコントロールでフィルタ処理を行う際の条件指定に使えるフィルタ演算子として以下の演算子を追加しました。

  • GreaterThan:指定した値より大きいアイテムに合致
  • GreaterThanOrEqual:指定した値より大きいまたは等しいアイテムに合致
  • LessThan:指定した値より小さいアイテムに合致
  • LessThanOrEqual:指定した値より小さいまたは等しいアイテムに合致
  • Between:指定した範囲内にあるアイテムに合致
  • NotBetween:指定された範囲外にあるアイテムに合致

「フィルタ」のデモを見る

フィルタ演算子の追加

〈GcDateTime〉ドロップダウンカレンダーの幅と高さを変更するAPI

日付時刻コントロールのドロップダウンカレンダーの幅と高さをAPIで変更できるようになりました。

「ドロップダウンカレンダー」のデモを見る

ドロップダウンカレンダーの幅と高さを変更するAPI

〈GcTagBox〉ヘルプボタン・クリアボタン

タグボックスコントロールでヘルプボタンとクリアボタンが使用できるようになりました。

「ヘルプボタンの表示」のデモを見る

「クリアボタンの表示」のデモを見る

〈GcMultiLineTextBox〉クリアボタン

複数行テキストコントロールでクリアボタンが使用できるようになりました。

「クリアボタンの表示」のデモを見る

〈GcTextBox、GcMask、GcComboBox〉タブ文字をコピー&ペーストした際の制御

タブ文字を含む文字列をコピー&ペーストする際に、タブ文字をどのように処理するか制御できるようになりました。acceptsTabCharプロパティに以下のTabCharMode列挙体の値を指定することでタブ文字の処理方法を指定できます。

  • NoControl:文字列内にあるすべてのタブ文字を残す
  • Filter:文字列内にあるすべてのタブ文字を除去する
  • Cut:文字列内にある最初のタブ文字以降の文字列を切り捨てる

「入力の制御」のデモを見る

各種フレームワークへの対応を強化

InputManJSがサポートする各種フレームワークの以下のバージョンに対応しました。

  • React 19
  • Angular 19
  • Next.js 15

各種フレームワークへの対応を強化

その他の機能強化

  • getHostでコントロール要素を取得できるようになりました
  • destroyメソッドを追加しました