ここではInputManJSのGcRichTextEditorコントロールと、WijmoのTabPanelコントロールを利用して、議事録を想定したノートアプリケーションを作成します。このサンプルでは、次のシナリオを確認することができます。
GcRichTextEditorコントロール：フォント、リンク、リスト、テーブルなど活用し議事録のメモを作成しています。また、オートセーブ機能が有効になっているため、ブラウザのリロード等が発生した後でも、ツールバーの復元ボタンから編集中のコンテンツを復元することができます。
TabPanelコントロール：ノートのページを切り替えることに利用しています。また、TabPanelの表示位置を左側になるようにCSSで変更を加えています。
import "@mescius/wijmo.styles/wijmo.css";
import "./styles.css";
import "./license";
import * as wjNav from "@mescius/wijmo.nav";
import * as wjCore from "@mescius/wijmo";
import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css";
import { InputMan } from "@mescius/inputman.richtexteditor";
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
let theTabPanel = new wjNav.TabPanel("#theTabPanel");
let host = theTabPanel.hostElement;
let clsName = "tabs-Left".toLowerCase();
wjCore.toggleClass(host, clsName, true);
theTabPanel.isAnimated = true;
let setting = {
menubar: null,
plugins: [InputMan.GcRichTextEditorPluginItem.All],
toolbar: [
"fontfamily",
"fontsize",
"bold",
"italic",
"underline",
"strikethrough",
"forecolor",
"backcolor",
,
"|",
"bullist",
"numlist",
"outdent",
"indent",
"|",
"blocks",
"|",
"link",
"Table",
"restoredraft",
],
baseUrl:
'$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
height: 500,
toolbarMode: InputMan.GcRichTextEditorToolbarMode.Floating,
};
let gcRichTextEditor1 = new InputMan.GcRichTextEditor(
document.getElementById("textarea1"),
setting
);
let gcRichTextEditor2 = new InputMan.GcRichTextEditor(
document.getElementById("textarea2"),
setting
);
let gcRichTextEditor3 = new InputMan.GcRichTextEditor(
document.getElementById("textarea3"),
setting
);
<!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">
<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 class="container-fluid">
<div id="theTabPanel" class="custom-tab">
<div>
<a>2023/04/24</a>
<div>
<textarea id="textarea1"><h2><span style="text-decoration: underline;">2023/04/24 キックオフミーティング</span> </h2>
<ul style="list-style-type: square;">
<li>会議の目的
<ul style="list-style-type: square;">
<li>キックオフMTGを行い、メンバー間で認識を揃える </li>
</ul>
</li>
<li>日時
<ul style="list-style-type: square;">
<li>2023/4/24(火) 10:00~11:00 </li>
</ul>
</li>
<li>参加者
<ul style="list-style-type: square;">
<li>佐藤（PJリーダー）、田中、鈴木、高橋、山田(議事) </li>
</ul>
</li>
<li>会議資料
<ul style="list-style-type: square;">
<li><a href="https://developer.mescius.jp/inputmanjs">PJキックオフ資料.pptx </a></li>
</ul>
</li>
<li>議事内容
<ul style="list-style-type: square;">
<li>佐藤よりプロジェクトの目的やゴールについて共有</li>
<li>詳細は会議資料を参照</li>
</ul>
</li>
<li>質問事項
<ul style="list-style-type: square;">
<li>Q.予定される終了時期はいつ頃になるか？（鈴木）
<ul style="list-style-type: square;">
<li>A.おそらく今年度いっぱいを想定。場合によっては短くなる可能性もある （佐藤）</li>
</ul>
</li>
<li>Q. メンバーの増員はあるか？（高橋）
<ul style="list-style-type: square;">
<li>現在は検討していないが、状況を加味し補充は可能（佐藤）</li>
</ul>
</li>
</ul>
</li>
<li>次回スケジュール
<ul style="list-style-type: square;">
<li>2023/05/17（水） 10:00~11:00</li>
</ul>
</li>
</ul>
</textarea>
</div>
</div>
<div>
<a>2023/05/17</a>
<div>
<textarea id="textarea2"><h2><span style="text-decoration: underline;">2023/05/17 進捗確認ミーティング 1回目</span></h2>
<ul style="list-style-type: square;">
<li>会議の目的
<ul style="list-style-type: square;">
<li>各進捗および課題を共有する</li>
</ul>
</li>
<li>日時
<ul style="list-style-type: square;">
<li>2023/05/17（水） 10:00~11:00</li>
</ul>
</li>
<li>参加者
<ul style="list-style-type: square;">
<li>佐藤（PJリーダー）、田中、鈴木、高橋、山田(議事) </li>
</ul>
</li>
<li>会議資料
<ul style="list-style-type: square;">
<li><a href="https://developer.mescius.jp/inputmanjs">調査事項一覧_phase1.xlsx</a></li>
</ul>
</li>
<li>議事内容
<ul style="list-style-type: square;">
<li>各進捗状況は次の通り</li>
<li>
<table style="border-collapse: collapse; width: 100%;" border="1"><colgroup><col style="width: 33.4025%;"><col style="width: 33.4025%;"><col style="width: 33.4025%;"></colgroup>
<tbody>
<tr>
<td style="background-color: rgb(194, 224, 244);">担当者</td>
<td style="background-color: rgb(194, 224, 244);">対応状況</td>
<td style="background-color: rgb(194, 224, 244);">備考</td>
</tr>
<tr>
<td>田中</td>
<td>対応中</td>
<td>80％ほど完了</td>
</tr>
<tr>
<td>鈴木</td>
<td>対応中</td>
<td>50％ほど完了</td>
</tr>
<tr>
<td>高橋</td>
<td>対応完了</td>
<td>レビュー待ち</td>
</tr>
<tr>
<td>山田</td>
<td><span style="color: rgb(224, 62, 45);">未着手</span></td>
<td> </td>
</tr>
</tbody>
</table>
</li>
<li>山田は他PJのため作業時間が確保できていない
<ul style="list-style-type: square;">
<li>高橋がフォロー予定</li>
</ul>
</li>
</ul>
</li>
<li>次回スケジュール
<ul style="list-style-type: square;">
<li>2023/05/31（水） 10:00~11:00</li>
</ul>
</li>
</ul></textarea>
</div>
</div>
<div>
<a>2023/05/31</a>
<div>
<textarea id="textarea3"><h2><span style="text-decoration: underline;">2023/05/31 進捗確認ミーティング 2回目</span></h2>
<ul style="list-style-type: square;">
<li>会議の目的
<ul style="list-style-type: square;">
<li>各進捗および課題を共有する</li>
</ul>
</li>
<li>日時
<ul style="list-style-type: square;">
<li>2023/05/31（水） 10:00~11:00</li>
</ul>
</li>
<li>参加者
<ul style="list-style-type: square;">
<li>佐藤（PJリーダー）、田中、鈴木、高橋、山田(議事) </li>
</ul>
</li>
<li>会議資料
<ul style="list-style-type: square;">
<li><a href="https://developer.mescius.jp/inputmanjs">調査事項一覧_phase1.xlsx</a></li>
</ul>
</li>
<li>議事内容
<ul style="list-style-type: square;">
<li>各進捗状況は次の通りで、ほとんど調査完了もしくはレビュー待ちの状況</li>
<li>
<table style="border-collapse: collapse; width: 100%; height: 120px;" border="1"><colgroup><col style="width: 33.3333%;"><col style="width: 33.3333%;"><col style="width: 33.1183%;"></colgroup>
<tbody>
<tr style="height: 24px;">
<td style="background-color: rgb(194, 224, 244); height: 24px;">担当者</td>
<td style="background-color: rgb(194, 224, 244); height: 24px;">対応状況</td>
<td style="background-color: rgb(194, 224, 244); height: 24px;">備考</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">田中</td>
<td style="height: 24px;">対応完了</td>
<td style="height: 24px;">レビュー済</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">鈴木</td>
<td style="height: 24px;">対応完了</td>
<td style="height: 24px;">レビュー待ち</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">高橋</td>
<td style="height: 24px;">対応完了</td>
<td style="height: 24px;">レビュー済</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">山田</td>
<td style="height: 24px;">対応完了</td>
<td style="height: 24px;">レビュー待ち</td>
</tr>
</tbody>
</table>
</li>
<li>佐藤が調査状況をまとめ、一度部内向けに共有会を実施</li>
<li>各メンバーはフェーズ2の調査を開始する</li>
</ul>
</li>
<li>次回スケジュール
<ul style="list-style-type: square;">
<li>別途連絡予定</li>
</ul>
</li>
</ul></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
/* custom-headers */
.wj-tabpanel .wj-tabpanes {
border: none;
}
.wj-tabpanel>div>.wj-tabheaders {
border: none;
width: 150px;
}
.wj-tabpanel>div>.wj-tabheaders>.wj-tabheader.wj-state-active {
background: lightgray;
color: black;
border: none;
font-weight: normal;
}
.wj-tabpanel .wj-tabheaders .wj-tabheader:not(.wj-state-active) {
font-weight: normal;
}
.wj-tabpanel.tabs-left .wj-tabheaders .wj-tabheader {
text-align: center;
}
.wj-tabpanel .wj-tabheaders .wj-tabheader.wj-state-active:after {
display: none;
/* hide underline */
}
/* tabs on the left */
.wj-tabpanel.tabs-left>div {
display: flex;
align-items: center;
}
.wj-tabpanel.tabs-left .wj-tabheaders {
display: flex;
flex-direction: column;
min-width: 8em;
border-right: 1px solid #ddd;
margin-top: -320px;
}
.wj-tabpanel.tabs-left .wj-tabpanes {
display: flex;
flex-grow: 1;
border-top: none;
overflow-x: hidden;
margin-top: 60px;
}
div.wj-tabpanes>div.wj-tabpane.wj-state-active {
width: 100%;
}
.gcim__richtexteditor-editor-container .gcim__richtexteditor-editor-header {
position: fixed;
left: 10px;
top: 15px;
background: rgb(245, 245, 245);
}
.gcim__richtexteditor-tbtn.gcim__richtexteditor-tbtn--select.gcim__richtexteditor-tbtn--bespoke{
width: 80px
}
.custom-tab{
background: rgb(245, 245, 245);
}
/* custom-headers */
[gcim-control-appearance="modern"] .wj-tabpanel .wj-tabpanes {
border: none;
}
[gcim-control-appearance="modern"] .wj-tabpanel>div>.wj-tabheaders {
border: none;
width: 150px;
}
[gcim-control-appearance="modern"] .wj-tabpanel>div>.wj-tabheaders>.wj-tabheader.wj-state-active {
background: lightgray;
color: black;
border: none;
font-weight: normal;
}
[gcim-control-appearance="modern"] .wj-tabpanel .wj-tabheaders .wj-tabheader:not(.wj-state-active) {
font-weight: normal;
}
[gcim-control-appearance="modern"] .wj-tabpanel.tabs-left .wj-tabheaders .wj-tabheader {
text-align: center;
}
[gcim-control-appearance="modern"] .wj-tabpanel .wj-tabheaders .wj-tabheader.wj-state-active:after {
display: none;
/* hide underline */
}
/* tabs on the left */
[gcim-control-appearance="modern"] .wj-tabpanel.tabs-left>div {
display: flex;
align-items: center;
}
[gcim-control-appearance="modern"] .wj-tabpanel.tabs-left .wj-tabheaders {
display: flex;
flex-direction: column;
min-width: 8em;
border-right: 1px solid #ddd;
margin-top: -320px;
}
[gcim-control-appearance="modern"] .wj-tabpanel.tabs-left .wj-tabpanes {
display: flex;
flex-grow: 1;
border-top: none;
overflow-x: hidden;
margin-top: 60px;
}
[gcim-control-appearance="modern"] div.wj-tabpanes>div.wj-tabpane.wj-state-active {
width: 100%;
}
[gcim-control-appearance="modern"] .gcim__richtexteditor-editor-container .gcim__richtexteditor-editor-header {
position: fixed;
left: 10px;
top: 15px;
background: rgb(245, 245, 245);
}
[gcim-control-appearance="modern"] .gcim__richtexteditor-tbtn.gcim__richtexteditor-tbtn--select.gcim__richtexteditor-tbtn--bespoke {
width: 80px;
}
[gcim-control-appearance="modern"] .custom-tab {
background: rgb(245, 245, 245);
}
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/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'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'
},
}
});
