APIで対策!ブラウザの履歴情報を操作する。APIで対策!ブラウザの履歴情報を操作する。APIで対策!ブラウザの履歴情報を操作する。)こんにちは!ハムスターを愛している森です!Visualforceページの開発では、reRenderでページの一部を動的に書き換える方法を取ることが多いと思います。コンポーネントのIdを指定するだけなので、手軽で便利ですよね。便利なreRenderにも落とし穴があります。今回は以下の流れで、現象とその対策を紹介していきたいと思います。API・Javascript・実装例:Visualforce・Apex・まとめ・サンプルコードreRenderを使用したVisualforceページは多い下記は、reRenderを利用した典型的なVisualforce・Apexの例です。}}SamplePageには、押されるとCounterを+1するClickボタンが存在しています。ClickボタンのreRenderに、Counterを表示しているコンポーネントを指定しています。そのため、Clickボタンが押されると、指定の領域だけ書き換えられます。SamplePageはごく一般的なVisualforceページですが、一方である違和感を生むことになります。reRenderがもたらすユーザビリティの低下さて、実際にユーザがSamplePageを利用する場合、以下の手順が想定されます。1.Salesforceにログインして、ホーム画面が表示される。2.SamplePageに遷移する。3.Counterが0であることを確認する。4.Clickボタンを押して、Counterが1になることを確認する。「Counterを0に戻したい」と思った場合。ブラウザの戻るボタンを押すと、ホーム画面まで戻ってしまいます。単純に戻るボタンを押しても元に戻らないことは、開発者であればすぐに理解できるかと思います。ユーザの「0に戻したい」という意図からは外れた動作となります。SamplePageは単純な例ですが、検索画面で同様の実装を行うとこうなります。1.Saleaforceにログインして、ホーム画面が表示される。2.検索画面に遷移する。3.検索を実行して、検索結果を表示する。4.検索結果から1件選択し、詳細を表示する。「検索結果に戻したい」と思って戻るボタンを押すと、ホーム画面まで戻ってしまうので非常に不便です。APIを利用した解決策について紹介します。APIは、ブラウザの履歴情報をスクリプトで操作するために以前から用意されていましたが、HTML5からは、任意の履歴の追加などいくつかの新しい機能が追加されています。履歴情報を操作して戻るボタンの挙動を制御することができるようになっています。API・JavascriptSamplePageの例に戻って、問題を確認します。SamplePageでは、Clickボタンを押した際にページ遷移が行われていないため、戻るボタンが機能していないことが問題でした。そこで、Clickボタンが押された時に呼び出す、履歴を追加する関数を用意しておきます。history.pushState(null,null,'/result');}履歴の追加は、history.pushState()で行います。今回は、URLのみ指定しておきます。URLは相対パスでも絶対パスでも指定可能。URLを変えたくない場合はURLも未指定にします。これで、Clickボタンが押された時に履歴を残すようになり、Clickボタンの後に戻るボタンを押しても、ホームまで戻ることは無くなりました。書き換えていたCounterはカウントアップされたままです。そこで、戻るボタンのイベントを監視し、イベントが発生した時の処理を作成します。actFuncHistoryBack();},false);戻るボタンのイベントは、popstateです。呼び出す処理として、<apex:actionFunction>とApexのメソッドを用意しましょう。1;}これで、戻るボタンが押された時にCounterを1減らすという処理が作成できました。戻るボタンを押すと1つ前の履歴に戻りながらCounterを1減らす。いう処理を作成することができました。戻る際の処理を変えることで、検索画面などでの再検索なども対応可能になります。これによりユーザの想定通りの戻るボタンの挙動が実現でき、よりユーザビリティの高いVisualforceページを作り上げることが可能です。実際に運用が始まってから「戻るボタンが効かない!」という声が上がる前に、配慮しておきたいですね。最後に、動作確認用のVisualforceページとApexクラスを載せておきます。}}この記事を読んだ人はこの記事も見ています。