以下は開発中のwebアプリです。コピペしてブラウザで開けば動きますよ！ 勉強しながら、必要なアプリ作りの勉強、続けています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>stress_check_7</title>
<link href="style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
<style>
.page {
display: none; /* 非表示に設定 */
}
.page.active {
display: block; /* 表示されるページ */
}
button {
margin: 10px;
padding: 10px 20px;
}
.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="page1" class="page active">
<header>
<h1>訪問介護事業所で働くあなたのストレスチェック</h1>
</header>
<h2>５分でできる職場のストレスチェック</h2>
<p><img src="image/921363.png" alt="image" width="30%" height="30%"></p>
<p class="small-text">本アプリケーションは、訪問介護事業所や訪問系の障害福祉サービス事業所で働く人の、ストレスを確認するためのものです。<br>「労働安全衛生法に基づくストレスチェック制度実施マニュアル」に基づき構成しています。</p>
<p><b>4つのステップによる簡単な57の質問から、あなたの事業所におけるストレスを判定します。<br>はじめに、お名前をフルネームで入力していただき、性別を選んでください。<br>入力いただきましたら「次へ」ボタンを押してください。</b></p>
<hr>
<div class="container">
<p style="font-size:18px;margin:30px;"><b>■ストレスチェックを受ける方のお名前と性別■</b></p>
<label for="f1"><b>名前</b></label>
<input type="text" id="f1"><br>
<p><b>性別 </b><label><input type="radio" name="gender" value="男性">男性 </label><label><input type="radio" name="gender" value="女性">女性</label></p>
<div id="error-page1" class="error-message"></div>
<hr>
<button onclick="validatePage1()">次へ</button>
</div>
</div>
<div id="page2" class="page">
<header>
<h3>ステップ1. 仕事についてお聞きします</h3>
</header>
<p style="font-size:18px;margin:30px;"><b>A あなたの仕事についてうかがいます。最もあてはまるものに ✓ してください。</b></p>
<p style="font-size:16px;margin:5px;"><b>1. 利用者やサービスが多すぎて大変だ</b></p>
<label><input type="radio" name="options_a1" value="そうだ">そ う だ</label><br>
<label><input type="radio" name="options_a1" value="まあそうだ">まあそうだ</label><br>
<label><input type="radio" name="options_a1" value="ややちがう">ややちがう</label><br>
<label><input type="radio" name="options_a1" value="ちがう">ち が う</label><br>
<p style="font-size:16px;margin:5px;"><b>2. サービス時間内に支援が終わらないことが多い</b></p>
<label><input type="radio" name="options_a2" value="そうだ">そ う だ</label><br>
<label><input type="radio" name="options_a2" value="まあそうだ">まあそうだ</label><br>
<label><input type="radio" name="options_a2" value="ややちがう">ややちがう</label><br>
<label><input type="radio" name="options_a2" value="ちがう">ち が う</label><br>
<p style="font-size:16px;margin:5px;"><b>3. かなり無理をして働かなければならない</b></p>
<label><input type="radio" name="options_a3" value="そうだ">そ う だ</label><br>
<label><input type="radio" name="options_a3" value="まあそうだ">まあそうだ</label><br>
<label><input type="radio" name="options_a3" value="ややちがう">ややちがう</label><br>
<label><input type="radio" name="options_a3" value="ちがう">ち が う</label><br>
<p style="font-size:16px;margin:5px;"><b>4. 神経をすり減らすほど集中しないといけない</b></p>
<label><input type="radio" name="options_a4" value="そうだ">そ う だ</label><br>
<label><input type="radio" name="options_a4" value="まあそうだ">まあそうだ</label><br>
<label><input type="radio" name="options_a4" value="ややちがう">ややちがう</label><br>
<label><input type="radio" name="options_a4" value="ちがう">ち が う</label><br>
<p style="font-size:16px;margin:5px;"><b>5. 仕事の内容が自分の技量を超えている</b></p>
<label><input type="radio" name="options_a5" value="そうだ">そ う だ</label><br>
<label><input type="radio" name="options_a5" value="まあそうだ">まあそうだ</label><br>
<label><input type="radio" name="options_a5" value="ややちがう">ややちがう</label><br>
<label><input type="radio" name="options_a5" value="ちがう">ち が う</label><br>
<p style="font-size:16px;margin:5px;"><b>6. 仕事中は気が休まる時がない</b></p>
<label><input type="radio" name="options_a6" value="そうだ">そ う だ</label><br>
<label><input type="radio" name="options_a6" value="まあそうだ">まあそうだ</label><br>
<label><input type="radio" name="options_a6" value="ややちがう">ややちがう</label><br>
<label><input type="radio" name="options_a6" value="ちがう">ち が う</label><br>
<div id="error-page2" class="error-message"></div>
<button onclick="showPage('page1')">戻る</button>
<button onclick="validatePage2()">次へ</button>
</div>
<div id="page3" class="page">
<header>
<h3>おつかれさまでした</h3>
</header>
<p style="font-size:18px;margin:30px;"><b>これでストレスチェックの質問は終わりです。<br>下記の確認ボタンを押すと、お答えいただいた結果の確認画面に移ります。<br>確認ボタンを押してください。</b></p>
<button onclick="showConfirmation()">確認する</button>
</div>
<div id="page4" class="page">
<div id="confirmation">
<header>
<h3>確認画面</h3>
</header>
<p style="font-size:18px;margin:30px;"><b>お答えいただい内容は以下の通りです。<br>変更したい項目がありましたら「戻る」ボタンを押してください。<br>変更したい部分の修正ができます。<br>内容がよろしければ「結果を見る」ボタンを押してください。</b></p>
<hr>
<p id="confirm-name">名前: 未入力</p>
<p id="confirm-gender">性別: 未選択</p>
<p id="confirm-a1">A1. 利用者やサービスが多すぎて大変だ: 未選択</p>
<p id="confirm-a2">A2. サービス時間内に支援が終わらないことが多い: 未選択</p>
<p id="confirm-a3">A3. かなり無理をして働かなければならない: 未選択</p>
<p id="confirm-a4">A4. 神経をすり減らすほど集中しないといけない: 未選択</p>
<p id="confirm-a5">A5. 仕事の内容が自分の技量を超えている: 未選択</p>
<p id="confirm-a6">A6. 仕事中は気が休まる時がない: 未選択</p>
<button onclick="showPage('page1')">戻る</button>
<button onclick="calculateStress()">結果を見る</button>
</div>
</div>
<div id="page5" class="page">
<div id="result">
<header>
<h3>あなたのストレスチェック結果</h3>
</header>
<p><img src="image/921363.png" alt="image" width="30%" height="30%"></p>
<hr>
<p style="font-size:20px;margin:30px;"><b>あなたの仕事におけるストレスは、以下の通りです。</b></p>
<p class="small-text" style="color: red;"><b>ストレスの度合いを「多い」「やや多い」「普通」「やや少ない」「少ない」の5段階で表示しています。</b></p>
<p id="stress-burden-quantity"></p>
<p id="stress-burden-quality"></p>
<hr>
<p style="font-size:20px;margin:30px;"><b>あなたの仕事におけるストレスの総合判定は、以下の通りです。</b></p>
<p>あなたの仕事におけるストレスの総合判定は「●●●」です。</p>
<hr>
<p>この結果をご自身の心の健康管理にお役立てください。<br>
「高ストレス」の判定が表示された場合には、医療機関への相談をお勧めします。<br>
メールアドレスを入力・送信していただいた方にはストレスチェックの結果を返信します。<br>
なお、ブラウザを閉じると結果が消えてしまいますのでご注意ください。<br>
参考に、働く人のメンタルヘルスのポータルサイトのリンクボタンを付けました。</p>
<hr>
<form action="submit_form.php" method="post">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<button type="submit">送信</button><br>
<hr>
<a href="https://kokoro.mhlw.go.jp/" style="display:inline-block;padding:10px 20px;background-color:blue;color:white;text-decoration:none;border-radius:5px;"><b>働く人のメンタルヘルス・ポータルサイト『こころの耳』</b></a>
</form>
</div>
<hr>
<p class="small-text">本アプリケーションは、厚生労働省の「労働安全衛生法に基づくストレスチェック制度実施マニュアル」に基づいて制作しています。設問は、職業性ストレス簡易調査票(57項目)を、訪問介護事業所向けに一部改変しています。<br>Copyright @2025 dx-mind.org All Rights Reserved.</p>
<script>
function showPage(pageId) {
const pages = document.querySelectorAll('.page');
pages.forEach(page => {
page.classList.remove('active');
});
document.getElementById(pageId).classList.add('active');
// エラーメッセージをクリア
const errorDiv = document.querySelector('.page.active .error-message');
if (errorDiv) {
errorDiv.textContent = '';
}
}
function validatePage1() {
const nameInput = document.querySelector("#f1");
const genderRadio = document.querySelector('input[name="gender"]:checked');
const errorDiv = document.querySelector("#error-page1");
if (!nameInput.value || !genderRadio) {
errorDiv.textContent = "未選択項目があります";
} else {
showPage('page2');
}
}
function validatePage2() {
const question1 = document.querySelector('input[name="options_a1"]:checked');
const question2 = document.querySelector('input[name="options_a2"]:checked');
const question3 = document.querySelector('input[name="options_a3"]:checked');
const question4 = document.querySelector('input[name="options_a4"]:checked');
const question5 = document.querySelector('input[name="options_a5"]:checked');
const question6 = document.querySelector('input[name="options_a6"]:checked');
const errorDiv = document.querySelector("#error-page2");
if (!question1 || !question2 || !question3 || !question4 || !question5 || !question6) {
errorDiv.textContent = "未選択項目があります";
} else {
showPage('page3');
}
}
function showConfirmation() {
// 名前を取得
let name = document.querySelector("#f1").value;
// 性別を取得
let gender = document.querySelector('input[name="gender"]:checked');
// ラジオボタンの選択値を取得
let question1 = document.querySelector('input[name="options_a1"]:checked');
let question2 = document.querySelector('input[name="options_a2"]:checked');
let question3 = document.querySelector('input[name="options_a3"]:checked');
let question4 = document.querySelector('input[name="options_a4"]:checked');
let question5 = document.querySelector('input[name="options_a5"]:checked');
let question6 = document.querySelector('input[name="options_a6"]:checked');
// 確認画面を更新
document.querySelector("#confirm-name").textContent = "名前: " + (name ? name : "未入力");
document.querySelector("#confirm-gender").textContent = "性別: " + (gender ? gender.value : "未選択");
document.querySelector("#confirm-a1").textContent = "A1. 利用者やサービスが多すぎて大変だ: " + (question1 ? question1.value : "未選択");
document.querySelector("#confirm-a2").textContent = "A2. サービス時間内に支援が終わらないことが多い: " + (question2 ? question2.value : "未選択");
document.querySelector("#confirm-a3").textContent = "A3. かなり無理をして働かなければならない: " + (question3 ? question3.value : "未選択");
document.querySelector("#confirm-a4").textContent = "A4. 神経をすり減らすほど集中しないといけない: " + (question4 ? question4.value : "未選択");
document.querySelector("#confirm-a5").textContent = "A5. 仕事の内容が自分の技量を超えている: " + (question5 ? question5.value : "未選択");
document.querySelector("#confirm-a6").textContent = "A6. 仕事中は気が休まる時がない: " + (question6 ? question6.value : "未選択");
// 確認ページを表示
showPage('page4');
}
function calculateStress() {
// 各質問の回答に対応する点数を取得
const getScore = (name) => {
const selectedOption = document.querySelector(`input[name="${name}"]:checked`);
if (selectedOption) {
switch (selectedOption.value) {
case 'そうだ':
return 1;
case 'まあそうだ':
return 2;
case 'ややちがう':
return 3;
case 'ちがう':
return 4;
default:
return 0;
}
}
return 0;
};
// 性別を取得
const gender = document.querySelector('input[name="gender"]:checked')?.value;
// 性別ごとのストレスレベル判定基準
const stressLevelCriteria = {
男性: {
quantity: [
{ min: 3, max: 5, level: '少ない' },
{ min: 6, max: 7, level: 'やや少ない' },
{ min: 8, max: 9, level: '普通' },
{ min: 10, max: 11, level: 'やや多い' },
{ min: 12, max: 15, level: '多い' },
],
quality: [
{ min: 3, max: 5, level: '少ない' },
{ min: 6, max: 7, level: 'やや少ない' },
{ min: 8, max: 9, level: '普通' },
{ min: 10, max: 11, level: 'やや多い' },
{ min: 12, max: 15, level: '多い' },
],
},
女性: {
quantity: [
{ min: 3, max: 4, level: '少ない' },
{ min: 5, max: 6, level: 'やや少ない' },
{ min: 7, max: 9, level: '普通' },
{ min: 10, max: 11, level: 'やや多い' },
{ min: 12, max: 15, level: '多い' },
],
quality: [
{ min: 3, max: 5, level: '少ない' },
{ min: 6, max: 7, level: 'やや少ない' },
{ min: 8, max: 9, level: '普通' },
{ min: 10, max: 11, level: 'やや多い' },
{ min: 12, max: 15, level: '多い' },
],
},
};
const getStressLevel = (score, type, gender) => {
const criteria = stressLevelCriteria[gender];
if (!criteria) {
return '判定不能';
}
const levels = criteria[type];
for (const level of levels) {
if (score >= level.min && score <= level.max) {
return level.level;
}
}
return '判定不能';
};
// 心理的な仕事の負担（量）のストレスを計算
const scoreBurdenQuantity = getScore('options_a1') + getScore('options_a2') + getScore('options_a3');
const stressScoreQuantity = 15 - scoreBurdenQuantity;
const stressLevelQuantity = getStressLevel(stressScoreQuantity, 'quantity', gender);
// 心理的な仕事の負担（質）のストレスを計算
const scoreBurdenQuality = getScore('options_a4') + getScore('options_a5') + getScore('options_a6');
const stressScoreQuality = 15 - scoreBurdenQuality;
const stressLevelQuality = getStressLevel(stressScoreQuality, 'quality', gender);
// 結果表示を更新
document.querySelector("#stress-burden-quantity").textContent = `仕事の量的負担からくるあなたのストレスは「${stressLevelQuantity}」です。`;
document.querySelector("#stress-burden-quality").textContent = `仕事の心理的負担からくるあなたのストレスは「${stressLevelQuality}」です。`;
// 結果ページを表示
showPage('page5');
}
</script>
</body>
</html>
ここまでAIが普及してゆくと、仕事に必要な簡単なアプリは内製化した方が、コスト的にも人材的にも良いように思います。
昔は、ワープロ（ワードプロセッサ）に文字を打つだけの最先端オシゴトがありました。上位者の手書きの資料をワードで打つだけの仕事がありました。今は、そんな仕事、ありませんね。音声入力のデータをAIで清書してもらうことだって今はできます。ほぼほぼ、人の手がいりません。
怠けるのは悪いことではありません。10時間かかっていた仕事が、1秒で終えられて後はプライベート。。。が、今の時代では可能なくらい技術が発達していますし、働く人も求めているものが明確だと感じます。
コメント