リソース | コメントコンポーネント | InputManJSデモアプリケーション | Developer Tools〈開発支援ツール〉

コメントコンポーネントのリソース機能について解説します。リソースコメントコンポーネントでは、ResourceNames列挙体の次の値をリソースとしてカスタマイズできます。リソース名説明 Reply コメントに返信 ContinueReply 返信を続ける Edit コメントを編集 ContinueEdit 編集を続ける Delete コメントを削除 AddCommentHere コメントを追加 ContinueToAddCommentHere コメントを続けて追加 PostTime 投稿日時 UpdateTime 更新日時 RepliesCount 返信数 ReactionsCount リアクション数 Default デフォルト SortBy 並べ替え SearchAnyTextHere 検索テキストを入力 CommentIsEmptyAddYourFeedbackAndClickSave コメントが空です。コメントを追加し、[保存]をクリックします。 PleaseLogInBeforePostingAComment コメントを投稿する前にログインしてください。 LoadMore もっと読み込む AreYouSureYouWillStopEditingTheComment コメントの編集を終了します。よろしいですか？ Save 保存 Cancel キャンセル Anonymous 匿名 UpdateAt 更新日時（別名） PostAt 投稿日時（別名） SureToDeleteThisComment このコメントを削除してもよろしいですか？ Comments コメント Reactions リアクション設定方法コメントコンポーネントを初期化する前に、setResourceメソッドを使用して、リソースを設定できます。設定方法は、setResourceメソッドの第１引数に'ja'、第２引数を上記のリソース名、第３引数を上記のリソースのカスタム名を設定しています。設定例は以下の通りです。

import "./styles.css";
import "@mescius/inputman.comment/CSS/gc.inputman.comment.css";
import { InputMan } from "@mescius/inputman.comment";
import { postedComments } from './data';
InputMan.GcComment.setResource(
'ja',
InputMan.GcCommentResourceNames.Reply,
'リプライ'
);
InputMan.GcComment.setResource(
'ja',
InputMan.GcCommentResourceNames.Edit,
'編集'
);
InputMan.GcComment.setResource('ja', InputMan.GcCommentResourceNames.Delete, '消し');
InputMan.GcComment.setResource(
'ja',
InputMan.GcCommentResourceNames.SortBy,
'ソート'
);
InputMan.GcComment.setResource('ja', InputMan.GcCommentResourceNames.Save, 'ポスト');
const gcComment = new InputMan.GcComment(document.getElementById('gcComment'), {
editorConfig: {
editorType: InputMan.GcCommentEditorType.Common,
},
userInfo: {
id: '1',
name: '森上 偉久馬',
avatar: '$IMDEMOROOT$/ja/samples/comment/resource/img/avatar1.png',
},
loadComments: (args) => {
return {
comments: postedComments
};
},
});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="コメントコンポーネント 使い方" lang="ja" xml:lang="ja" />
<title>コメントコンポーネント - リソース</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<div id="gcComment"></div>
</body>
</html>

body {
box-sizing: content-box !important;
height: 551px !important;
}

export const postedComments = [
{
id: '1',
userInfo: {
id: '1',
name: '森上 偉久馬',
avatar: '$IMDEMOROOT$/ja/samples/comment/resource/img/avatar1.png',
},
content: `このサンプルではリソースをカスタマイズしています。`,
postTime: new Date(2024, 1, 1, 8, 0, 0),
updateTime: new Date(2024, 1, 1, 8, 0, 0),
},
{
id: '2',
userInfo: {
id: '5',
name: '松沢 誠一',
avatar: '$IMDEMOROOT$/ja/samples/comment/resource/img/avatar5.png',
},
content: 'コメントコンポーネントのボタンやツールチップ、ウォーターマークなどを設定できます。',
postTime: new Date(2024, 4, 20, 8, 1, 1),
updateTime: new Date(2024, 4, 20, 8, 1, 1),
},
{
id: '3',
userInfo: {
id: '3',
name: '加藤 泰江',
avatar: '$IMDEMOROOT$/ja/samples/comment/resource/img/avatar3.png',
},
content: 'リソースのカスタマイズは、コメントコンポーネントを初期化する前に設定する必要があります。',
postTime: new Date(2024, 4, 20, 8, 1, 1),
updateTime: new Date(2024, 4, 20, 8, 1, 1),
reactions: [
{
reactionChar: '👍',
count: 2,
},
],
}
];

System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
'@mescius/inputman.richtexteditor/CSS': 'npm:@mescius/inputman.richtexteditor/CSS',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});