森美樹ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。au公式ショップを見るショーケース・ティービーではいくつかのASPサービスをご提供させていただいているわけですが、ウェブサイトのトレンドに合わせて、各商品で大小様々なアップデートを実施し、そしてその時々のカスタマイズ対応を繰り返してご活用いただいております。今回は久々に個人的に結構手こずった印象のあるカスタマイズ内容についてご紹介させていただきます。要望はJavascriptだけで、ブラウザバックボタンを押した時に確認メッセージを表示させ、ユーザが了承することで初めて、本来のブラウザバックを起動させたいというものです。ユーザにブラウザバックを思いとどまらせるための機能実装を要望されているということですね。今回のカスタマイズ対象にしたのはAndroid端末、かつChromeブラウザです。対象の識別はユーザエージェントで判断しました。ちなみに標準ブラウザでは確認メッセージを表示させなくとも良いとのこと。調査したところ、標準ブラウザとして判断できるトリガーは以下の3点でした。いう文字列が入っていました。そのため、標準ブラウザとして判断できるトリガーで、さらにユーザエージェントを絞り込む必要が出てきたわけです。U;」が入っていると「Version」の識別ができない端末があったためです。当初は「Version」と「SamsungBrowser」だけで判断できると高をくくっていたのですが......。ちなみにこの原因は未だに不明です。誰かご存知の方がいらっしゃるのであれば教えて欲しいです......。私は読み込みタイミングの問題なのかと予想はしているのですが。U;」「Version」「SamsungBrowser」の3点で判断するようにしました。大文字小文字が混在していることもあったので、最終的に以下のような書き方になりました。-1){ここに実行したい内容を記載}ユーザエージェントの切り分けに悩まされるのは毎度のことなのですが、まさかここまで手こずるとは...。気を取り直して次に進めます。「戻る」ボタンのカスタマイズって簡単なの?下記のページを参考に、ブラウザの「history操作」と「pushState」と「WindowEventHandlers.onbeforeunload」の組み合わせでなんとかできるんじゃないかな、というイメージで考えました。NETWORK『WindowEventHandlers.onbeforeunload』>なお、手順は以下のようなフローで対処していこうと思います。APIのメソッドであり、ブラウザ履歴に指定したURLを追加できるというものです。「pushState」の引数を指定して使用することになります。ここで引数のご説明も併せてご紹介いたします。・state履歴に関連付けする任意のオブジェクトを渡すことができ、そのオブジェクトは「popstate」イベントハンドラから参照することができます。......とは書いたものの、かなり分かりづらい。カンタンに説明すると、ユーザがブラウザ「戻る」ボタンなどを使用すると、履歴のスタックがpop(「popstate」イベント発動)されます。この時、イベントハンドラに渡される「state」プロパティに入ってくるのが、この引数になります。この引数を利用することで、以前の状態を復元させることができるようになる、というものです。・title履歴のタイトルを指定できるというものです。現在どのブラウザでも使用されていないです。・url履歴に指定したURLを追加するものです。これの特徴としては、現在のURLと異なるURLを指定しても、ページのリロードは発生しません。nullを入れた場合は自分自身のurlが入ります。null);」のように記述すれば、ブラウザの「戻る」ボタンは本来の機能を失います。自分自身を現在の1つ前のページ(履歴)にストックするという仕組みです。「戻る」ボタンを押した時にイベントを発動させる方法では、本来のブラウザバック機能を失った「戻る」ボタンに新たな機能を負荷していきましょう。「戻る」ボタンを押した時にイベントを発動させるには、「popState」を使います。「addEventListener」を用いてイベントハンドラを登録します。NETWORK『popstate』>なお、記述をする場合は以下のような感じになります。{ここにイベント内容を記述}確認メッセージを表示するイベント次は「このページを離れますか?」というあのメッセージをダイアログで表示させていきましょう。NETWORK『WindowEventHandlers.onbeforeunload』>ちなみに、Chromeの仕様でバージョン51以降はこの文言で統一されており、「return」の後に出したい文言を入れても変わりません。書き方は以下のような感じになります。'このページから離れますか?';};今回はAndroid端末のChromeブラウザのみの対応が大前提ですが、IEに限りこの「return」内の文言が反映されます。仮にChromeであったとしても、バージョンが51以前の場合、「return」で空っぽを返したとしてもダイアログ自体が表示されませんでした。そのため、「return」の中には古いバージョン対策のために、表示したい文言を入れています。了承したら前のページに移動させるここまでで1つ前の履歴を追加して、「戻る」ボタンを無効化させています。1つ前の履歴には、本来「戻る」ボタンを押した時に表示されるページがストックされています。よって、了承したら「history」をさらに1つ戻すという記述を追加してあげればいいわけです。history.go(-1);これだけです。思って記述したら、どういう理由でかうまくいかなかったのです。null);});}}なんとなく腑に落ちない疑問点がいくつかありましたが、未だ分からずモヤモヤ中。いえ、上記記述で挙動に問題がなく、要件をすべて満たせていることを確認しましたので、今回はこれで実装完了としました。カスタマイズや調査で個人的に大変だったことを共有していければと思います。それでは、また!ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。au公式ショップを見る【週刊bitWave】(メルマガ)始めました!登録はこちらからメールアドレスを入力してお申込みください。【週刊bitWave】の更新情報の配信にのみ使用します。個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。