デモ
複数行テキストコントロール
AI文章作成アシスタント
概要

概要

このサンプルでは、複数行テキストコントロールでAIサービスを利用し、文章の生成や校正、要約、拡張、短縮、翻訳などの機能を確認できます。

InputManJSでは、AIサービスを利用して文章の生成や校正、要約、翻訳など、さまざまなAI機能を手軽に使用することができます。 ここでは、AI機能を利用するための準備や主な設定方法について説明します。 事前準備 AI機能を利用するには、GcConfigurationManagerクラスのregisterAIServiceメソッドを使用してAIサービスを事前に登録する必要があります。 詳細は製品ヘルプをご参照ください。 AI文章作成アシスタント機能の表示 AI文章作成アシスタント機能の表示を有効にするには、コンストラクタのshowAITextAssistantButtonプロパティにtrueを設定します。 AITextAssistantConfigプロパティを利用することで、表示するAI機能のメニュー項目をカスタマイズすることができます。 組み込み機能 すべての組込みの機能は以下の通りです。GcTextAssistantBehaviorを指定して、表示メニューが変更できます。 製品側で用意したプロンプトと、ダイアログでユーザーが入力したプロンプトを組み合わせてAIサービスに送信できます。 GC.InputMan.AI.GcTextAssistantBehaviorの値 機能 説明 GenerateText 文章を生成 キーワードを入力して、生成ボタンをクリックすると文章を生成 ReviseText 文章を校正 文章を校正 SummarizeContent 内容を要約 文章の要約を生成 ExpandContent 内容を拡張 文章の内容を拡張 SimplifyContent 内容を短縮 文章の内容を短縮 ChangeToProfessionalTone プロフェッショナル 文章をプロフェッショナルなトーンに変更 ChangeToCasualTone カジュアル 文章をカジュアルなトーンに変更 ChangeToBusinessStyle ビジネス 文章をビジネススタイルに変更 ChangeToTechnicalStyle 技術 文章を技術スタイルに変更 TranslateToEnglish 英語に翻訳 文章を英語に翻訳 TranslateToJapanese 日本語に翻訳 文章を日本語に翻訳
import '@mescius/inputman/CSS/gc.inputman-js.css'; import { InputMan } from '@mescius/inputman'; import './styles.css'; InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern; const predefinedResponses = [ { keywords: ['生成', '作成', 'generate', 'GenerateText'], response: 'InputManJSを使用したWebアプリケーション開発について説明します。InputManJSは豊富な入力コントロールを提供し、開発者が効率的にユーザーフレンドリーな入力フォームを構築できる強力なライブラリです。テキスト入力、マスク入力、日付選択など、様々な用途に最適化されたコンポーネントが含まれています。' }, { keywords: ['校正', '修正', 'revise', 'ReviseText'], response: 'InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおいて、ユーザビリティの高い、細やかな入力フォームの開発を可能です。' }, { keywords: ['要約', 'まとめ', 'summarize', 'SummarizeContent'], response: 'InputManJS：多様な入力コントロールを提供するJavaScript製品。リッチテキスト、マスク、日付時刻、数値等の機能により、高品質な入力フォームを効率的に開発可能。' }, { keywords: ['拡張', '詳細', 'expand', 'ExpandContent'], response: 'InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおけるストレスフリーの細かい入力フォームを開発できます。さらに、InputManJSは入力検証機能、フォーマット機能、IME制御、豊富なUIテーマなど、Webアプリケーション開発に必要な高度な機能を包括的に提供します。これにより、開発者は短期間で高品質かつ使いやすい入力インターフェースを実装することができ、エンドユーザーの満足度向上とアプリケーションの品質向上を同時に実現できます。' }, { keywords: ['短縮', '簡潔', 'simplify', 'SimplifyContent'], response: 'InputManJS：JavaScript入力コントロール製品。リッチテキスト、マスク、日付等の機能でWebフォーム開発を効率化。' }, { keywords: ['プロフェッショナル', 'professional', 'ChangeToProfessionalTone'], response: 'InputManJSは、企業グレードのWebアプリケーション開発において、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボボックスなど、業務要件に特化した入力用コントロールを提供するJavaScript製品です。本製品により、エンタープライズレベルのユーザビリティを実現する高品質な入力フォームの構築が可能となります。' }, { keywords: ['カジュアル', 'casual', 'ChangeToCasualTone'], response: 'InputManJSって、すごく便利なJavaScript製品なんです！リッチテキストやマスク入力、日付選択とか、いろんな入力パーツが入ってて、Webアプリの入力フォームを簡単に作れちゃいます。使いやすくてストレスフリーなフォームが、あっという間にできますよ！' }, { keywords: ['ビジネス', 'business', 'ChangeToBusinessStyle'], response: 'InputManJSは、ビジネスアプリケーションの開発効率向上を目的とした、包括的なJavaScript入力コントロールスイートです。リッチテキスト、マスク、日付時刻、数値、コンボボックス等の多様なコンポーネントにより、生産性向上と開発コスト削減を実現し、競争力のあるWebアプリケーションの開発を支援いたします。' }, { keywords: ['技術', 'technical', 'ChangeToTechnicalStyle'], response: 'InputManJSは、DOM操作とイベントハンドリングを最適化したJavaScript入力コントロールライブラリです。GcRichTextEditor、GcMask、GcDateTime、GcNumber、GcComboBoxなどのコンポーネントを提供し、モダンブラウザ対応とパフォーマンス最適化により、高品質な入力フォームを効率的に開発できます。' }, { keywords: ['英語', 'english', 'TranslateToEnglish'], response: 'InputManJS is a JavaScript product that includes input controls optimized for specific purposes such as rich text, text, mask, date/time, numeric, and combo controls. It enables the development of stress-free, detailed input forms for web applications.' }, { keywords: ['日本語', 'japanese', 'TranslateToJapanese'], response: 'InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおけるストレスフリーのきめ細かい入力フォームを開発できます。' } ]; const defaultResponse = 'ご質問いただき、ありがとうございます。InputManJSに関するより詳細な情報については、公式ドキュメントをご参照ください。他にもご質問がございましたら、お気軽にお聞かせください。'; function simulateStreaming(text, streamWriter) { return new Promise((resolve) => { const words = text.split(''); let index = 0; const interval = setInterval(() => { if (index < words.length) { streamWriter(words[index]); index++; } else { clearInterval(interval); resolve(); } }, 20); }); } function getResponseForInput(input, behavior) { const lowerInput = input.toLowerCase(); const lowerBehavior = behavior ? behavior.toLowerCase() : ''; const suffix = '\n\n※実際にAIによる回答を利用する場合は、AIサービスのご登録が必要となります。'; if (!lowerInput.includes('inputmanjs')) { return defaultResponse + suffix; } for (const item of predefinedResponses) { if (lowerBehavior && item.keywords.some(keyword => lowerBehavior.includes(keyword.toLowerCase()))) { return item.response + suffix; } } return defaultResponse + suffix; } InputMan.ConfigurationManager.registerAIService(async (context) => { try { const response = getResponseForInput(context.input, context.behavior); await simulateStreaming(response, context.streamWriter); } catch (error) { throw error; } }); const gcMultiLineTextBox1 = new InputMan.GcMultiLineTextBox(document.getElementById('gcMultiLineTextBox1'), { width: 700, height: 200, showAITextAssistantButton: true, text: `InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおけるストレスフリーの細かい入力フォームを開発できます。`, });
<!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>複数行テキストコントロール - AI文章作成アシスタント - 概要</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="flexbox"> <div> <textarea id="gcMultiLineTextBox1"></textarea> </div> </div> </body> </html>
body { box-sizing: content-box !important; height: 551px!important; }
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.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js', '@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js', '@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js', '@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js', '@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles', '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' }, } });