--- title: window.historyでアニメーションをつくってみた tags: JavaScript HistoryAPI author: canecco slide: false --- この記事は [J2complexed Advent Calendar 2017](http://qiita.com/advent-calendar/2017/j2complexed) の3日目です。 ## window.historyのこと、知ってますか? ブラウザの履歴を制御するhistoryオブジェクトです。 簡単に説明をします。 ### window.history.back() 履歴情報の前のページに戻ります。 `window.history.go(-1)` でも同じように戻ります。 ### window.history.forward() 履歴情報の次のページへ進みます。 `window.history.go(1)` でも同じように進みます。 ### window.history.pushState() 履歴情報を追加します。 ### windwos.history.replaceState() 履歴情報を書き換えます。 これを使ってアドレスバーにアニメーションを作ってみようと思います! ## 準備 ここらへんは普通なので、用意したファイルだけご紹介します。 ```package.json { "name": "browser_history_animate", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "build": "babel src -d dest", "dev": "lite-server" }, "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" }, "dependencies": { "lite-server": "^2.3.0" } } ``` ```.babelrc { "presets": ["es2015"] } ``` ```index.html Browser Histry Animation ``` ```src/index.js const christmasTree = '🎄' const smile = '😀' const sleep = '😴' const zzz = '💤' const santa = '🎅' const present = '🎁' const space = ' ' let _history = [''] _history.push (christmasTree + space + space + space + space + space + space + space + space + space + space + sleep + zzz) _history.push (christmasTree + santa + space + space + space + space + space + space + space + space + space + sleep + zzz) _history.push (christmasTree + space + santa + space + space + space + space + space + space + space + space + sleep + zzz) _history.push (christmasTree + space + space + santa + space + space + space + space + space + space + space + sleep + zzz) _history.push (christmasTree + space + space + space + santa + space + space + space + space + space + space + sleep + zzz) _history.push (christmasTree + space + space + space + space + santa + space + space + space + space + space + sleep + zzz) _history.push (christmasTree + space + space + space + space + space + santa + space + space + space + space + sleep + zzz) _history.push (christmasTree + space + space + space + space + space + space + santa + space + space + space + sleep + zzz) _history.push (christmasTree + space + space + space + space + space + space + space + santa + space + space + sleep + zzz) _history.push (christmasTree + space + space + space + space + space + space + space + space + santa + space + sleep + zzz) _history.push (christmasTree + space + space + space + space + space + space + space + space + santa + present + sleep + zzz) _history.push (christmasTree + space + space + space + space + space + space + space + space + space + present + sleep + zzz) _history.push (christmasTree + space + space + space + space + space + space + space + space + space + present + smile) let count = 0; window.history.replaceState (null, null, _history [count]) const intervalID = window.setInterval (animateBrowserHistory, 1000) function animateBrowserHistory () { count++ if (count > 13) { count = 0 } window.history.replaceState (null, null, _history [count]) } ``` chromeで見るとこんな感じです。 ![history_animate.gif](https://qiita-image-store.s3.amazonaws.com/0/109382/78821c83-417e-b1d8-cafa-d52bb9845702.gif) クリスマス気分が少しは出たでしょうか。 味気ないアドレスバーにちょっと遊び心を足したいときにどうぞ。