1. canecco

    Posted

    canecco
Changes in title
+window.historyでアニメーションをつくってみた
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,109 @@
+この記事は [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
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+ <meta charset="UTF-8">
+ <title>Browser Histry Animation</title>
+</head>
+<body>
+<script src="./dest/index.js"></script>
+</body>
+</html>
+```
+
+```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)
+
+クリスマス気分が少しは出たでしょうか。
+味気ないアドレスバーにちょっと遊び心を足したいときにどうぞ。