Bootstrapは、Webサイトを簡単にスタイリッシュに作るためのCSSフレームワークです。
ボタンやモーダル、カード、トーストなどのUI部品があらかじめ用意されており、クラス名を付けるだけで手軽に使えます。
レスポンシブ対応もしていて、画面サイズの異なる様々な端末で表示してもデザインが崩れないようになっています。
KakuhanAppでも多用しています。

「トースト」とは、画面上に一時的にポップアップする通知のことです。
スマホアプリなどでよく見る「保存しました」「エラーが発生しました」といった小さなメッセージを想像すると分かりやすいと思います。

Bootstrapでは、このトーストを簡単に実装できます。
自動的に消える設定や、クリックで閉じる動作など、さまざまな調整が可能です。
今回は「新機能追加のお知らせ」を出す目的で使いました。

基本構造は次の通りです。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    通知メッセージをここに表示
  </div>
</div>

実際の表示画面：

属性の意味：

• role="alert"：スクリーンリーダーに「これは重要な通知です」と伝える。

• aria-live="assertive"：即座に通知内容を読み上げるよう指示。

• aria-atomic="true"：全体を1つの塊として扱う（部分的に更新されても全体を再読み上げする）。

こうしたアクセシビリティ設定は、直接見た目には影響しませんが、誰にとっても使いやすいWebを目指すうえで重要です。

実際にKakuhanAppで実装したHTMLコードは次の通りです。

<div id="featureToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" style="--bs-toast-max-width:none; width: auto">
 <div class="d-flex align-items-center">
  <div class="toast-body flex-grow-1 position-relative">
   <span class="badge text-bg-info">New</span>
    <a href="{% url 'matchup:board' %}" class="stretched-link text-reset text-decoration-none">「キャラ相性表」を実装しました！ぜひご覧ください！</a>
  </div>
  <button type="button" class="btn-close me-2" data-bs-dismiss="toast" aria-label="Close" title="Close"></button>
 </div>
</div> 

JavaScript 部分：

<script> document.addEventListener('DOMContentLoaded', function() { const toastEl = document.getElementById('featureToast'); const toast = new bootstrap.Toast(toastEl, { // option（必要に応じて autohide や delay を設定可能） }); toast.show(); }); </script>

このコードで以下のように表示されます。

各ポイントの解説

1. style="--bs-toast-max-width:none; width:auto"

デフォルトではトーストの幅は max-width: 350px に制限されています。
--bs-toast-max-width:none; でそれを解除し、width:auto にすることで、中のテキスト幅に応じて自動調整されます。
長すぎる場合は、width:100% にすれば親要素いっぱいに広げることも可能です。

2. data-bs-autohide="false"

通常のトーストは数秒で自動的に消えますが、この設定を付けると自動で消えません。
ユーザーが明示的に閉じるまで表示されるため、告知のような用途に向いています。

3. d-flex align-items-center

Bootstrap のフレックスユーティリティを使って、トースト内の要素を横並び（flex）にし、縦中央揃えにします。
これにより、テキストと閉じるボタンが自然に横に並びます。

4. .stretched-link の活用

.stretched-link クラスを使うことで、<a> タグのクリック領域を親要素全体（この場合は .toast-body 全体）に広げています。
これにより、見た目上は文字部分だけがリンクでも、どこをクリックしてもリンク先に飛べるようになります。
閉じるボタンはリンクの外にあるため、動作が干渉しないようにしています。

5. 閉じるボタンの配置

btn-close は Bootstrap 標準の閉じるボタンです。今回はトーストが自動で消えないように設定したため、配置しました。

6. JavaScript の挙動

DOMContentLoaded イベントで DOM が読み込まれたタイミングでトーストを初期化・表示しています。
bootstrap.Toast コンストラクタにオプションを渡すことで、動作を制御可能です。

例：

const toast = new bootstrap.Toast(toastEl, { delay: 8000 }); // 8秒で自動消去