ノーコードツールBubbleで作るアプリケーションで、特定のページのブラウザの戻るボタンをクリックしても前の画面へ戻れなくするいわゆるブラウザバック禁止の実装方法を紹介します。
実装時に、Bubbleの無料プラグイン「Toolbox」のRun javascriptアクションを使用するため、事前にインストールのご対応だけよろしくお願いいたします。
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装イメージ
上のサンプル動画は、ブラウザバックを禁止する前のページ＝＞ブラウザバック禁止ページの遷移イメージです。
遷移前のページの次の画面へボタンをクリックして、ブラウザバック禁止ページへ遷移し、ブラウザの戻るボタンをクリックしても前の画面へ戻れなくなる挙動が今回のゴールです。
※ブラウザの戻るボタンをクリックしたときに、一瞬前の画面がチラつくのはご愛嬌。
Bubbleでブラウザバック禁止を実装する手順
以下の手順でBubbleのWebアプリケーションにおいてブラウザバック禁止を実装します。
- ブラウザバック禁止ページの前の画面のPage is loadedイベントでRun javascriptを設定する
- ブラウザバック禁止ページのPage is loadedイベントでRun javascriptを設定する
今回の実装ではBubbleのプラグイン「Toolbox」のRun javascriptアクションを使い、ページロード時にjavascriptの処理を実行させます。
ブラウザバック禁止ページの前の画面のPage is loadedイベントでRun javascriptを設定する
ブラウザバックを禁止したいページに遷移する前の画面で、以下のJavaScriptコードを実行したいので、Bubbleの「Page is loaded」イベントのStep1で上の添付画像のようにRun javascriptアクションを選択肢、コード欄に下記をペーストします。
// ブラウザのナビゲーションが「戻る」や「進む」ボタンによるものであれば
if (window.performance.navigation.type == 2) {
// 履歴を一つ進める（ユーザーが「戻る」ボタンを押しても、元のページに留まる）
history.forward();
}
// ページがアンロードされるときのイベントリスナーを設定
// 何もしないが、ページがキャッシュされないようにするために必要
window.addEventListener("unload", function() {});
// ページが表示されたときのイベントリスナーを設定
window.addEventListener("pageshow", function evt(evt) {
// ページがキャッシュから読み込まれた場合
if (evt.persisted) {
// ページをリロードして最新の状態に更新
location.reload();
}
});１つずつコメントを入れてますが、無くても実行には影響ないのでペーストする際に消してもらって構いません。
ちなみに、window.performance.navigation.type は、Webページがどのようにして現在の状態になったかを示すプロパティです。このプロパティには以下３つのタイプがあり、上記サンプルコードではvalueが2のとき、つまりユーザーがブラウザの戻るボタンを押してページに戻ったことの判定をしています。
| value | 説明 |
|---|---|
| 0 | 以下の場合にこの値が設定される。 ・ユーザーがリンクをクリックする ・ブックマークから移動する ・他のページからリダイレクトされる |
| 1 | ユーザーがページをリロード（再読み込み）したときにこの値が設定される。 |
| 2 | ブラウザの戻る・進むボタンを押したときや、history.back() や history.forward() メソッドが呼ばれたときにこの値が設定される。 history.back() は、現在のページから一つ前のページに戻るためのメソッド。このメソッドは、ユーザーがブラウザの「戻る」ボタンをクリックするのと同じ効果を持つ。 history.forward() は、現在のページから一つ先のページに進むためのメソッド。このメソッドは、ユーザーがブラウザの「進む」ボタンをクリックするのと同じ効果を持つ。 |
ブラウザバック禁止ページのPage is loadedイベントでRun javascriptを設定する
次に、ブラウザバックを禁止したいページ自体で、以下のJavaScriptコードを実行したいので、Bubbleの「Page is loaded」イベントのStep1で上の添付画像のようにRun javascriptアクションを選択肢、コード欄に下記をペーストします。
// 現在のURLを履歴スタックに新しいエントリーとして追加
// これにより、ブラウザの「戻る」ボタンを押してもURLが変わらないようにする
window.history.pushState(null, null, window.location.href);
// ブラウザの「戻る」ボタンが押されたときに発生するイベントに対するリスナーを設定
window.addEventListener('popstate', (e) => {
// 履歴を一つ進める（ユーザーが「戻る」ボタンを押しても、元のページに留まる）
history.go(1);
});
