なんとなく気分が乗らない，なんとなく疲れている，と感じることはありませんか。
原因がはっきりしない心のモヤモヤ．仕事のプレッシャー
人間関係のいざこざや将来への漠然とした不安など
私たちは日々，さまざまなストレスにさらされています。
多くの人はその正体を深く掘り下げることなく
そういうものだと受け流したり
うまく向き合えずに悩んだりしているのではないでしょうか。
僕もストレスに悩まされることはあります。
どうにかしてこの状況を変えたいと，様々な本を読んだり
試行錯誤を繰り返す道のりで，仏教の古くからの教えにも関心を持っています。
昔には始業前に毎日，般若心経をレポート用紙に書き出してから
仕事に取り組んでいたこともありました（笑）
仏教は単なる信仰ではなく，私たちが抱える心の「苦」を体系的に捉えるための
極めて論理的なツールなのではないか，と。
そして，その中で人生の根本的な苦しみを説く「四苦八苦」について俄かに勉強してみました。
だからこれは自身の備忘録的な内容でもあります。
「四苦八苦」は，私たちが生きる上で避けられない8つの苦しみを指します。
具体的には以下の四苦（根本的な苦しみ）と
そこから派生する八苦（人間関係や欲望から生じる苦しみ）で構成されているそうです。
| 四苦 | 八苦 |
|---|---|
| 生苦（しょうく）生まれることの苦しみ | 愛別離苦（あいべつりく）愛する人と別れる苦しみ |
| 老苦（ろうく）老いることの苦しみ | 怨憎会苦（おんぞうえく）憎い人と会う苦しみ |
| 病苦（びょうく）病気になることの苦しみ | 求不得苦（ぐふとっく）求めるものが手に入らない苦しみ |
| 死苦（しく）死ぬことの苦しみ | 五蘊盛苦（ごうんじょうく）精神や肉体の活動そのものから生じる苦しみ |
心のモヤモヤを言語化し，客観的に捉えることはストレスと向き合う第一歩だと考え
四苦八苦の各要素をスライドバーで調整し，それぞれの配分を可視化できるツールを作ってみようと思いました。
- このツールを使うメリットは以下の通りです。
- 自己理解の深化
- どの苦しみの割合が高いかを視覚的に把握することで、漠然としたストレスの正体を具体的に認識できます。
- 対処法の発見
- 苦しみの原因が明確になれば、それに対する具体的な対策を立てやすくなります。
- 心の状態の変化を記録
- 定期的に使用することで、自分の心のバランスがどのように変化しているかを知ることができます。
という事で，自分自身の無自覚なストレスを自覚し
心の状態を客観的に見つめるための手助けとなればと作ってみました。
- 各スライドバーは左右に動かせますが，下の「合計100%」以上には動かせません。
- 「Reset」ボタンですべて0%に戻せます。
- また「Clipboard」ボタンで設定内容のコピーをするので，事ある毎に記録すれば，気付いていない”自分”を知ることも….
いかがですか，たとえ全てでなくとも自己理解につながるヒントになればいいですよね。
下がメインのソースです。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>四苦八苦バランス調整</title> <link rel="stylesheet" href="style.css"><body>
<h1>四苦八苦バランス</h1>
四苦八苦とは、人が生きる上で避けては通れない〈苦〉の種類を表しています。
仏教では、この四苦八苦は人間が生きている上で避けては通れない、根源的な〈苦〉として表します。
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<h2>四苦</h2>
<div class="slider-item">
<label for="birth"><em>生</em></label>
<input type="range" id="birth" min="0" max="100" value="12" data-name="生"><span id="birth-value" class="value">0%</span>
人は生まれる場所、条件を選べません。
</div>
<div class="slider-item">
<label for="aging"><em>老</em></label>
<input type="range" id="aging" min="0" max="100" value="13" data-name="老"><span id="aging-value" class="value">0%</span>
人は必ず歳を取り老います。
</div>
<div class="slider-item">
<label for="illness"><em>病</em></label>
<input type="range" id="illness" min="0" max="100" value="13" data-name="病"><span id="illness-value" class="value">0%</span>
そして病気にもなります。
</div>
<div class="slider-item">
<label for="death"><em>死</em></label>
<input type="range" id="death" min="0" max="100" value="12" data-name="死"><span id="death-value" class="value">0%</span>
やがて寿命がくれば死に至ります。
</div>
</div>
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<div class="slider-group">
<h2>残りの四苦</h2>
<div class="slider-item">
<label for="aibetsuriku"><em>愛別離苦</em></label>
<input type="range" id="aibetsuriku" min="0" max="100" value="12" data-name="愛別離苦"><span id="aibetsuriku-value" class="value">0%</span>
大切な人や大好きな人であっても、いつかは離れなければならない苦しみ。
</div>
<div class="slider-item">
<label for="onjyoueku"><em>怨憎会苦</em></label>
<input type="range" id="onjyoueku" min="0" max="100" value="12" data-name="怨憎会苦"><span id="onjyoueku-value" class="value">0%</span>
逆に大嫌いな人、顔も見たくない人でも出会ってしまう苦しみ。
</div>
<div class="slider-item">
<label for="gumetokku"><em>求不得苦</em></label>
<input type="range" id="gumetokku" min="0" max="100" value="13" data-name="求不得苦"><span id="gumetokku-value" class="value">0%</span>
求めるモノゴトが手に入らない苦しみ。
</div>
<div class="slider-item">
<label for="goonjyouku"><em>五蘊盛苦</em></label>
<input type="range" id="goonjyouku" min="0" max="100" value="13" data-name="五蘊盛苦"><span id="goonjyouku-value" class="value">0%</span>
自分の心や、自分の身体すら思い通りにならない苦しみ。
</div>
</div>
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
<div class="total-area">
合計: <span id="total-percentage">0%</span>
</div>
<div class="button-container">
<button id="resetButton"><em>Reset</em></button>
<button id="copyButton"><em>ClipBoard</em></button>
</div>
<script>
const sliders = document.querySelectorAll('input[type="range"]');
const totalPercentageSpan = document.getElementById('total-percentage');
const messageSpan = document.getElementById('message');
const resetButton = document.getElementById('resetButton');
const copyButton = document.getElementById('copyButton');
const copyMessageSpan = document.getElementById('copyMessage');
const maxTotal = 100; // 合計の最大値
// 各スライダーの表示値を更新する関数
function updateSliderDisplay(slider) {
document.getElementById(<code>{{EJS0}}</code>).textContent = <code>{{EJS1}}</code>;
}
// 全体の合計を更新する関数
function updateTotal() {
let currentTotal = 0;
sliders.forEach(slider =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
currentTotal += parseInt(slider.value);
updateSliderDisplay(slider); // 各スライダーの表示もここで更新
});
totalPercentageSpan.textContent = <code>{{EJS2}}</code>;
if (currentTotal &amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; maxTotal) {
messageSpan.textContent = <code>{{EJS3}}</code>;
messageSpan.style.color = 'red';
} else {
messageSpan.textContent = '';
messageSpan.style.color = 'black'; // メッセージがないときは色をリセット
}
}
// スライダーの初期値を設定し、合計を計算
// 初期合計が100%を超える場合の調整も含む
let initialTotal = 0;
sliders.forEach(slider =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
initialTotal += parseInt(slider.value);
});
if (initialTotal &amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; maxTotal) {
const factor = maxTotal / initialTotal;
sliders.forEach(slider =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
const newValue = Math.round(parseInt(slider.value) * factor);
slider.value = newValue;
});
}
updateTotal(); // 初期表示を更新
// スライダー操作時のイベントリスナー
sliders.forEach(slider =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
slider.addEventListener('input', (event) =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
const changedSlider = event.target;
let currentTotal = 0;
sliders.forEach(s =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
currentTotal += parseInt(s.value);
});
if (currentTotal &amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; maxTotal) {
const diff = currentTotal - maxTotal;
changedSlider.value = parseInt(changedSlider.value) - diff;
if (parseInt(changedSlider.value) &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; 0) { changedSlider.value = 0; } } updateTotal(); // 合計と個別の表示を更新 }); }); // --- リセットボタン --- resetButton.addEventListener('click', () =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
sliders.forEach(slider =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
slider.value = 0; // スライダーの値を0に設定
});
updateTotal(); // 全体の表示を更新
copyMessageSpan.textContent = ''; // コピーメッセージもクリア
});
// --- クリップボードコピーボタン ---
copyButton.addEventListener('click', () =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
// 現在の日付と時刻を取得
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月は0から始まるため+1
const day = now.getDate().toString().padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const timestamp = <code>{{EJS4}}</code>;
let resultText = <code>{{EJS5}}</code>; // タイムスタンプを先頭に追加
resultText += "四苦八苦バランス:\n\n"; // その後に元々の内容を続ける
sliders.forEach(slider =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
// data-name属性から「生」などの名前を取得
const name = slider.getAttribute('data-name');
resultText += <code>{{EJS6}}</code>;
});
resultText += <code>{{EJS7}}</code>;
// クリップボードにコピー
navigator.clipboard.writeText(resultText).then(() =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
copyMessageSpan.textContent = '結果がクリップボードにコピーされました！';
copyMessageSpan.style.color = 'green';
setTimeout(() =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
copyMessageSpan.textContent = ''; // 3秒後にメッセージを消す
}, 3000);
}).catch(err =&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; {
console.error('クリップボードへのコピーに失敗しました', err);
copyMessageSpan.textContent = 'コピーに失敗しました。';
copyMessageSpan.style.color = 'red';
});
});
</script>
</div>
CSSは省略します。
<img src="https://www.appusu.net/wp-content/uploads/2025/06/2e54cd52-78a5-4792-aa5f-4c4f818d3534-400x600.png" alt="リラックス" width="400" height="600" class="alignnone size-medium wp-image-11678">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>