メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

トースト(Toasts) v4.2.1新設

軽量で簡単にカスタマイズ可能なアラートメッセージを表示するトーストで、訪問者にプッシュ通知を送る。

トーストは、モバイルおよびデスクトップオペレーティングシステムによって一般化されたプッシュ通知を模倣するように設計された軽量の通知である。Flexboxで作られているので、整列配置が簡単にできる。

概要(Overview)

トーストプラグインを使用するときに知っておくべきこと:

  • JavaScriptをソースから構築する場合は、util.jsが必要
  • トーストはパフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある(そのため実行コードが必要)。
  • トーストの位置取りは各自手動で行うこと(※位置の項目を参照)。
  • トーストは autohide: false を指定しなければ自動的に非表示になる。

 

実例(Example)

基本(Basic)

拡張性と予測可能なトーストを奨励するため、ヘッダとボディの設定を推奨。トーストのヘッダはdisplay:flex を使用しており、マージンとFlexboxユーティリティにより簡単にコンテンツを整列可能。

トーストは必要なだけの柔軟性があり、マークアップはほとんど必要ない。少なくとも、トーストされたコンテンツを含む単一の要素が必要であり、閉じるボタンの設定を強く推奨。

見本
設定例
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-header">
		<img src="..." alt="..." class="rounded mr-2">
		<strong class="mr-auto">Bootstrap</strong>
		<small>11分前</small>
		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。
	</div>
</div>

【設定】

  • div.toast > {div.toast-header > [button.close > <span> > &times;]《閉じるアイコンボタン》}《ヘッダ》 + div.toast-body《コンテンツ》
  • アイコンとなる × は、&times; と記述してエスケープ処理をする
  • プラグインを使ってトーストを閉じるため、閉じるアイコンボタンには data-dismiss="toast" を入れる

アクセシビリティの設定】

  • エラーのような重要なメッセージの場合は、div.toast に、role="alert"属性(支援技術にアラート(警告情報)の役割を伝える)と aria-live="assertive" 属性(内容が更新されたことをユーザーに即座に伝える)を入れる
  • それ以外の場合は、div.toast に、role="status"属性(支援技術にある種の更新された状態を伝える)と aria-live="polite" 属性(内容が更新されたことをユーザーに適切なタイミングで伝える)を入れる
  • さらにdiv.toast に、aria-atomic="true"属性(コンテンツ変更時の通知箇所が変更箇所を含むブロック単位であることを伝える)を入れる
  • トーストを閉じるボタンとなる <button> に、aria-label 属性(アイコンボタンのラベル)を入れる
  • 閉じるボタンアイコンの &times;span[aria-hidden="true"](スクリーンリーダー等での読み上げをスキップさせる)で囲む

ライブ(Live)v4.6.0新設

下のボタンをクリックして、デフォルトで .hide で非表示になっているトースト(見本ではユーティリティを使用して右下隅に配置)を表示。

見本
設定例
HTML<button type="button" class="btn btn-primary" id="liveToastBtn">トーストを表示</button>

<div class="position-fixed p-3" style="z-index: 5; right: 0; bottom: 0;">
	<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
		<div class="toast-header">
			<img src="..." alt="..." class="rounded mr-2">
			<strong class="mr-auto">Bootstrap</strong>
			<small>11分前</small>
			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。
		</div>
	</div>
</div>
JavaScript$('#liveToastBtn').click(function () {
	$('#liveToast').toast('show')
})

【設定】

  • .toast.hide を追加し、トースト全体を .position-fixed(固定位置ユーティリティクラス)で囲む(固定する位置は別途設定する必要あり)

半透明(Translucent)

トーストはやや半透明なので、背面との色合いが混ざり合う。

見本

●背景を bg-dark に設定した場合

●背景画像をパターン化した場合

※背景の設定をしない場合(参考)

設定例
<div class="bg-dark p-4">
	<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
		<div class="toast-header">
			<img src="..." alt="..." class="rounded mr-2">
			<strong class="mr-auto">Bootstrap</strong>
			<small class="text-muted">11分前</small>
			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。
		</div>
	</div>
</div>

【設定】

  • .toast の親要素に背景(色、画像)を設定すると、トーストの背景色が混ざり合って表示される(特に .toast-body 部分)

縦積み(Stacking)

トーストが複数ある場合は、デフォルトでは垂直方向に積み重なる。

見本
設定例
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-header">
		<img src="..." alt="..." class="rounded mr-2">
		<strong class="mr-auto">Bootstrap</strong>
		<small class="text-muted">たった今</small>
		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="toast-body">
		見る? ちょうどこのような。
	</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-header">
		<img src="..." alt="..." class="rounded mr-2">
		<strong class="mr-auto">Bootstrap</strong>
		<small class="text-muted">2秒前</small>
		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="toast-body">
		注意喚起、トーストは自動的に積み重なる
	</div>
</div>

 

位置(Placement)

必要とするカスタムCSSでトーストを配置。右上や上部中央は、通知のためによく使われる。一度にトーストを1つだけ表示する場合は、.toast の位置にスタイルを設定すること。

1. 単独のトーストを右上に表示

見本
Bootstrap 11分前
こんにちは! これはトーストのメッセージです。
設定例
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
	<div class="toast" style="position: absolute; top: 0; right: 0;">
		<div class="toast-header">
			<img src="..." alt="..." class="rounded mr-2">
			<strong class="mr-auto">Bootstrap</strong>
			<small>11分前</small>
			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。 
		</div>
	</div>
</div>

【設定】

  • トーストを囲むコンテナを相対位置(position: relative)に、.toast を絶対位置(position: absolute)に設定
  • [aria-live], [aria-atomic].toast ではなく、コンテナに設定

より多くの通知を生成するシステムでは、簡単に積み重なるようにラッピング要素を使用すること。

2. 複数のトーストを右上に表示

見本
設定例
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
	<!-- 配置する -->
	<div style="position: absolute; top: 0; right: 0;">

		<!-- その後、トーストを入れる -->
		<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
			<div class="toast-header">
				<img src="..." alt="..." class="rounded mr-2">
				<strong class="mr-auto">Bootstrap</strong>
				<small class="text-muted">たった今</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				見る? ちょうどこのような。
			</div>
		</div>

		<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
			<div class="toast-header">
				<img src="..." alt="..." class="rounded mr-2">
				<strong class="mr-auto">Bootstrap</strong>
				<small class="text-muted">2秒前</small>
				<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="toast-body">
				注意喚起、トーストは自動的に積み重なる 
			</div>
		</div>
	</div>
</div>

【設定】

  • トーストを囲むコンテナを相対位置(position: relative)> 絶対位置(position: absolute)の二重に設定(.toast には設定しない)

また、Flexboxユーティリティを使ってトーストを水平または垂直に配置させることも可能。

3. Flexユーティリティクラスを使って上下左右中央に表示

見本
設定例
<!-- トースト配置用のFlexboxコンテナ-->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

	<!-- その後、トーストを入れる -->
	<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
		<div class="toast-header">
			<img src="..." alt="..." class="rounded mr-2">
			<strong class="mr-auto">Bootstrap</strong>
			<small>11分前</small>
			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。 
		</div>
	</div>
</div>

【設定】

 

アクセシビリティ(Accessibility)

トーストは、訪問者やユーザーの中断が少ないように意図されているため、スクリーンリーダや同様の補助技術を持つ人を助けるために、トライアルを aria-live region で囲む必要がある。ライブリージョンの変更(トーストコンポーネントの挿入/更新など)は、ユーザーのフォーカスを移動したりユーザーを中断することなく、スクリーンリーダーによって自動的に通知される。さらに、aria-atomic="true" を組み込んでトースト全体が、変更内容を通知するだけでなく、常に単一の(アトミック)単位として通知されるようにする(トーストのコンテンツの一部のみを更新する場合や、後で同じトーストのコンテンツを表示する場合は問題が発生する可能性がある)。プロセスに必要な情報が重要な場合(フォーム内のエラーのリストなど)については、トーストの代わりにアラートコンポーネントを使用すること。

トーストが生成または更新されるに、ライブリージョンがマークアップ内に存在する必要があることに注意すること。両方を同時に動的に生成してページに挿入すると、一般的には補助技術によって通知されない。

また、コンテンツに応じて rolearia-live レベルを調整する必要がある。エラーのような重要なメッセージの場合は、role="alert" aria-live="assertive" を使用し、それ以外の場合は、role="status" aria-live="polite" 属性を使用する。

表示するコンテンツが変更されたら、delay タイムアウトを更新して、ユーザーがトーストを読むのに十分な時間を確保すること。

設定例(10秒後に非表示にする設定)
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000">
	...
</div>

autohide:false を使用する場合は、閉じるボタンを追加して、ユーザーがトーストを閉じられるようにする必要がある。

見本
設定例
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
	<div class="toast-header">
		<img src="..." alt="..." class="rounded mr-2">
		<strong class="mr-auto">Bootstrap</strong>
		<small>11分前</small>
		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。 
	</div>
</div>

技術的には、トーストにフォーカス可能/アクション可能なコントロール(追加のボタンやリンクなど)を追加できるが、トーストを自動非表示にするためにこれを行うことは避けて下さい。トーストに長いdelay タイムアウトを与えても、キーボードと支援技術のユーザーは、アクションを実行するのに間に合うようにトーストに到達するのが難しい場合がある(トーストが表示されたときにフォーカスが得られないため)。どうしてもさらにコントロールが必要な場合は、autohide:false でトーストを使用することを推奨。

 

JavaScriptの動作(JavaScript behavior)

使用方法(Usage)

JavaScriptでトーストを初期化する:

設定例
$('.toast').toast(option)

オプション(Options)

オプションは、データ属性またはJavaScriptを使用して渡すことが可能。データ属性の場合、data-animation="" のように、data- にオプション名を追加。

名前 タイプ デフォルト 説明
animation boolean true トーストにCSSフェード遷移を適用
true:有効/false:無効
autohide boolean true トーストを自動的に非表示
true:有効/false:無効
delay number 500(0.5秒) トーストの非表示の遅延時間(1000分の1秒単位)

メソッド(Methods)

$().toast(options)

要素コレクションにトーストのハンドラを付ける。

.toast('show')

要素のトーストを表示。トーストが実際に表示される前(つまり、show.bs.toast イベント発動前)に呼び出し元に戻る。手動でこのメソッドを呼び出す必要があるが、トーストは表示されない。

JavaScript$('#element').toast('show')

.toast('hide')

要素のトーストを非表示にする。トーストが実際に非表示になる前(つまり、hidden.bs.toast イベント発動前)に呼び出し元に戻るautohidefalse にした場合は、このメソッドを手動で呼び出す必要がある。

JavaScript$('#element').toast('hide')

.toast('dispose')

要素のトーストを非表示にする。トーストはDOMには残っているが、再表示できない。

JavaScript$('#element').toast('dispose')

イベント(Events)

イベントタイプ 説明
show.bs.toast このイベントは、show インスタンスメソッドが呼び出されるとすぐに発動。
shown.bs.toast このイベントは、トーストがユーザーに表示されたら発動。
hide.bs.toast このイベントは、hide インスタンスメソッドが呼び出されるとすぐに発動。
hidden.bs.toast このイベントは、トーストがユーザーから非表示になったら発動。
使用例
JavaScript$('#myToast').on('hidden.bs.toast', function () {
	// 何かをする...
})