こんにちは!ご用件は何ですか?
この要望にはセキュリティ上の問題がなく、実装は比較的単純です。以下は、HTML、CSS、JavaScriptを組み合わせたアプリケーションの例です。
index.html:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LINE風アプリ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat">
<div class="chat-messages">
<div class="chat-message">
<div class="message-text">
こんにちは!ご用件は何ですか?
</div>
</div>
</div>
<div class="chat-input">
<input id="message-input" type="text" placeholder="メッセージを入力してください">
</div>
</div>
<script src="app.js"></script>
</body>
</html>
```
style.css:
```css
body {
background-color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
}
.chat {
max-width: 600px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 10px;
}
.chat-messages {
max-height: 400px;
overflow-y: scroll;
padding: 10px;
}
.chat-message {
margin-bottom: 10px;
}
.message-text {
background-color: #fff;
border-radius: 10px;
padding: 10px;
box-shadow: 2px 2px 5px #ccc;
}
.chat-input {
padding: 10px;
background-color: #fff;
border-top: 1px solid #ccc;
}
.chat-input input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 10px;
border: none;
font-size: 16px;
box-shadow: 2px 2px 5px #ccc;
}
```
app.js:
```javascript
const chatMessages = document.querySelector('.chat-messages');
const messageInput = document.getElementById('message-input');
// 送信されたメッセージを追加する関数
function addMessage(message, isReply = false) {
const messageElement = document.createElement('div');
messageElement.classList.add('chat-message');
const messageText = document.createElement('div');
messageText.classList.add('message-text');
messageText.textContent = message;
if (isReply) {
messageText.style.backgroundColor = '#def';
}
messageElement.appendChild(messageText);
chatMessages.appendChild(messageElement);
chatMessages.scrollTo(0, chatMessages.scrollHeight);
}
// 受け取ったメッセージに応じて返信を生成する関数
function generateReply(message) {
if (message.match(/(?:悲|かな)しい|寂しい|つらい/)) {
const messages = [
'がんばって!',
'明日はきっといい日になるよ!',
'少し休憩して気分転換するといいよ!'
];
return messages[Math.floor(Math.random() * messages.length)];
} else if (message.match(/(?:諦|あき)らめ/)) {
return '少し休憩してからまた頑張ろう!';
} else if (message.match(/(?:ダメ|つまらない)/)) {
return 'そんなことないよ!あなたは素晴らしい人だよ!';
} else if (message.match(/(?:嫌|いや|苦手)/)) {
return '大丈夫!あなたは自分に向き合っているから成長しているよ!';
} else {
return 'わかるよ~';
}
}
// メッセージを送信した時に呼ばれる関数
function sendMessage() {
const message = messageInput.value.trim();
if (message) {
addMessage(message, false);
const reply = generateReply(message);
if (reply) {
setTimeout(() => {
addMessage(reply, true);
}, 500);
}
messageInput.value = '';
}
}
// Enterキーが押されたらメッセージを送信する
messageInput.addEventListener('keyup', (event) => {
if (event.key === 'Enter') {
sendMessage();
}
});
// 最初のメッセージを追加する
addMessage('こんにちは!ご用件は何ですか?');
```
このアプリケーションは、LINEのような外観を持ち、テキストメッセージを送受信できます。受信したメッセージが特定のキーワードを含んでいる場合、ランダムな肯定的な返信が生成され、それが表示されます。このアプリケーションは、JavaScriptのevalを使用せず、他のサイトに遷移させたり、リダイレクトさせたりすることはありません。アラートダイアログも使用していません。