便利で快適な入力フォーム開発に特化したJavaScriptライブラリ「InputManJS（インプットマンJS）」の最新バージョン「V5J」では、チャットやフォーラム、会話アプリなどで見られる会話機能のUIが構築できる「コメントコンポーネント（GcComment）」を追加しました。
今回はこのコメントコンポーネントの概要やWebアプリケーションへの組み込み方法を解説していきたいと思います。
目次
コメントコンポーネントとは
InputManJSのコメントコンポーネントはWebアプリケーションにチャットのような会話機能のUIを組み込めるコンポーネントです。
用途に合わせて選べる3つの表示モード
コメントコンポーネントはコメントの表示モードとしてリストモード、スレッドモード、チャットモードの3種が利用可能です。
入力エディタにはInputManJSのコントロールが利用可能
コメントコンポーネントにおけるコメントの入力には標準HTML要素だけでなく、リッチテキストエディタコントロールなどのInputManJSの高機能なコントロールが使用できます。
投稿済みのコメントに対するさまざまなアクション
コメントコンポーネントでは投稿したコメントに対して返信、修正、削除といったアクションが可能なほか、絵文字を使ったリアクションにも対応します。また、独自の処理を実装したカスタムのアクションも追加できます。
サーバー連携用のインターフェースを用意
コメントコンポーネントはサーバー（データベース）側との連携のためのインターフェースを用意しています。APIを介してコメントコンポーネントとデータベースとの双方向のデータバインディングを実現します。
コメントコンポーネントを使ってみよう！
ここからは実際にコメントコンポーネントをWebアプリケーションに組み込む手順をご紹介します。
開発環境
今回は開発環境として以下を使用します。
事前準備
今回は以下の3つのファイルを用意してコメントコンポーネントの使い方を解説していきます。
| index.html | ページ本体。このページの要素としてInputManJSのコメントコンポーネントを組み込みます |
|---|---|
| app.js | InputManJSのコメントコンポーネントの初期化など各種設定を行うためのコードを記載します |
| data.js | InputManJSのコメントコンポーネントに表示するコメントデータを記載します |
また、InputManJSの使用にはInputManJSのモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接InputManJSのモジュールを配置していきます。あらかじめInputManJSの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。
製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。
- comment/scripts/gc.inputman.comment.ja.js
- comment/css/gc.inputman.comment.css
また、「img」フォルダを作成し、コメントを入力するユーザーのアイコン画像を配置します。今回の記事で使用するアイコン画像はこちらからダウンロード可能です。
コピーしたファイルはそれぞれ以下のように配置します。
コメントコンポーネントの参照
まずはコメントコンポーネントを使うのに必要なライブラリの参照設定をHTMLファイルに追加します。コメントコンポーネントのモジュールのほか、初期化などの各種処理を記載する「app.js」とコメントデータを記載した「data.js」への参照も追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>コメントコンポーネントサンプル</title>
<!-- ローカルのライブラリを参照する場合 -->
<link rel="stylesheet" href="css/gc.inputman.comment.css" />
<script src="scripts/gc.inputman.comment.ja.js"></script>
<!-- CDNからライブラリを参照する場合 -->
<!--
<link rel="stylesheet" href="https://cdn.mescius.com/inputmanjs/hosted/comment/css/gc.inputman.comment.css
" />
<script src="https://cdn.mescius.com/inputmanjs/hosted/comment/scripts/gc.inputman.comment.ja.js"></script>
-->
<script src="scripts/app.js"></script>
<script src="scripts/data.js"></script>
</head>
<body>
</body>
</html>コメントコンポーネントの組み込み
それでは早速コメントコンポーネントをWebページに組み込んでいきます。「index.html」の中で、タグボックスコントロールを表示する領域を<div>タグで定義します。
・・・（中略）・・・
<body>
<div id="gcComment"></div>
</body>
</html>続いて「scripts/app.js」にコメントコンポーネントの初期化処理を記載します。コメントコンポーネントは3つの表示モードに対応していますが、今回はcommentModeをThreadModeに設定し、スレッドモードで実行しています。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。
GC.InputMan.LicenseKey = 'ここにInputManJSのライセンスキーを設定します';
document.addEventListener('DOMContentLoaded', () => {
const gcComment = new GC.InputMan.GcComment(document.getElementById('gcComment'), {
editorConfig: {
height: 150,
},
commentMode: GC.InputMan.GcCommentMode.ThreadMode,
userInfo: {
id: '4',
name: '川村 匡',
avatar: 'img/avatar4.png',
avatarType: 'square',
},
});
});以上でコメントコンポーネントを使用する準備は完了です。Visual Studio Code上で「index.html」を右クリックして、「Open with Live Server」を実行します。
実行後、ブラウザ上にコメントコンポーネントが組み込まれたWebページが表示されます。
エディタからコメントを入力すると、入力欄上部の表示エリアに入力したコメントが表示されます。返信やリアクションを行うことも可能です。
コメントデータの読み込み
前述の通りコメントコンポーネントはサーバー連携用のインターフェースを用意しているので、通常はAPIと連携することでコメントデータの参照や登録や簡単にできるようになっていますが、今回は操作感の確認ということで、コメント情報を記載した固定のJSONデータを読み込んでコメントコンポーネントに表示してみます。「data.js」を以下のように記載します。
const postedComments = [
{
id: '1',
userInfo: {
id: '5',
name: '松沢 誠一',
avatar: 'img/avatar5.png',
},
content: `新入社員の松沢と申します。<br>1日でも早くみなさまのお役に立てるよう、努力してまいります。<br/>どうぞよろしくお願いいたします。`,
postedTime: new Date(2024, 3, 1, 9, 0, 0),
updateTime: new Date(2024, 3, 1, 9, 0, 0),
reactions: [
{
reactionChar: '👍',
count: 5,
currentUserReacted: true,
},
],
},
{
id: '2',
userInfo: {
id: '2',
name: '葛城 孝史',
avatar: 'img/avatar2.png',
},
content: '営業部の葛城です。入社おめでとうございます。<br/>分からないことがあれば気軽に声をかけてください。<br>よろしくお願いいたします。',
postedTime: new Date(2024, 3, 1, 9, 30, 0),
updateTime: new Date(2024, 3, 1, 9, 30, 0),
reactions: [
{
reactionChar: '👍',
count: 1,
currentUserReacted: true,
},
],
parentCommentId: '1',
},
{
id: '3',
userInfo: {
id: '5',
name: '松沢 誠一',
avatar: 'img/avatar5.png',
},
content: 'ありがとうございます。よろしくお願いします！',
postedTime: new Date(2024, 3, 1, 9, 31, 0),
updateTime: new Date(2024, 3, 1, 9, 31, 0),
parentCommentId: '2',
},
{
id: '4',
userInfo: {
id: '6',
name: '成宮 真紀',
avatar: 'img/avatar6.png',
},
content: '成宮です。分からないことがあれば気軽に聞いてくださいね！',
postedTime: new Date(2024, 3, 1, 9, 37, 0),
updateTime: new Date(2024, 3, 1, 9, 37, 0),
parentCommentId: '1',
},
{
id: '5',
userInfo: {
id: '5',
name: '松沢 誠一',
avatar: 'img/avatar5.png',
},
content: 'よろしくお願いします！',
postedTime: new Date(2024, 3, 1, 9, 39, 0),
updateTime: new Date(2024, 3, 1, 9, 39, 0),
parentCommentId: '4',
},
{
id: '6',
userInfo: {
id: '1',
name: '森上 偉久馬',
avatar: 'img/avatar1.png',
},
content: '森上です。よろしくお願いします。',
postedTime: new Date(2024, 6, 15, 8, 1, 59),
updateTime: new Date(2024, 6, 15, 8, 1, 59),
parentCommentId: '1',
}
];「app.js」に上記のコメントデータを読み込む処理を追記します。
・・・（中略）・・・
userInfo: {
id: '4',
name: '川村 匡',
avatar: 'img/avatar4.png',
avatarType: 'square',
},
loadComments: (args) => {
return {
comments: postedComments,
};
},
・・・（中略）・・・上記のコードを追加後に再度実行すると、以下のようにコメントデータを読み込んだ状態でコメントコンポーネントを表示できます。
既存のコメントに対しては、返信等のアクションを実施することが可能です。
今回ご紹介したコメントコンポーネントの機能は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。
さいごに
今回はWebアプリケーションにコメント機能を組み込むことができるInputManJSの「コメントコンポーネント（GcComment）」の導入方法をご紹介しました。次回はWeb APIと連携して使用する方法をご紹介しますので、そちらもご期待ください。
なお、今回ご紹介したコメントコンポーネントの機能はほんの一部です。製品サイトでは、InputManJSのコメントコンポーネントの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。