tobijibu/full.html Secret

## full.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style>
    .posi-zero {
        transition: 1.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation: bright 1s ease-in-out 1.5s 1 alternate;
    }
    @keyframes bright {
        0% {
            color: rgba(0, 191, 165, 0.8);
            text-shadow: 0px 0px 5px rgba(0, 191, 165, 0.3);
        }
    }
    .gucha {
        display: none;
    }

    #re {
        background-color: #fff;
        border: 1px solid #333;
        width: 10em;
        text-align: center;
        transition: .5s;
    }
    #re:hover {
        background-color: #333;
        color: #fff;
        cursor: pointer;
        transition: .5s;
    }
</style>
</head>
<body>
    <div class="gucha">
        <p><b>JavaScript</b>という言葉は狭義にはMozillaが仕様を策定し実装しているスクリプト言語を指す。このスクリプト言語はEcmaインターナショナルでECMAScript (ECMA-262) として標準化されており、多くのウェブブラウザ等はこの標準化されたECMAScriptを実装している。たとえば、マイクロソフトによる実装はJScriptと呼ぶ。</p>
        <p>一般的に<b>JavaScript</b>という言葉が使われるときはこのようなさまざまなECMAScriptの実装も含んだ幅広い意味でつかわれるので、どちらの意味でJavaScriptという言葉が使われているかは文脈で判断する必要がある。</p>
        <p>ECMAScriptは仕様自体に独自の拡張を条件付きで認める記述があり、現在主要なブラウザが実装しているスクリプト言語はすべてECMAScriptに準拠していることになる。広義の意味でこれをJavaScriptと呼ぶ場合、主要なブラウザが実装しているスクリプト言語はマイクロソフトやGoogle、アップルの実装も含めてJavaScriptである。</p>
        <p>なお、ウェブブラウザでよく実装されているAPIであるDOM (Document Object Model) はECMAScriptの仕様の一部ではないので、DOMの準拠の有無はECMAScriptの準拠の有無とは関係ない。</p>
    </div>
    <p id="re">ぐちゃぐちゃを戻す</p>
    <script src="gucha.js"></script>
    <script>
    document.getElementById('re').addEventListener('click', gc.returnPosition, false);
    </script>
</body>
</html>

## gucha.css
.posi-zero {
    transition: 1.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation: bright 1s ease-in-out 1.5s 1 alternate;
}
@keyframes bright {
    0% {
        color: rgba(0, 191, 165, 0.8);
        text-shadow: 0px 0px 5px rgba(0, 191, 165, 0.3);
    }
}
.gucha {
    display: none;
}

## gucha.js
class Guchax2 {
  /**
   * 文章をぐちゃぐちゃにする
   */
  setGuchax2() {
    let sentence  = document.querySelectorAll('.gucha'),
        character = new Object(),
        _sentence = '', _character = '',
        charType = 0, continueFlg = 0;
    for (const key of Object.keys(sentence)) {
      //文章内の特殊文字を16進数化して、文字を１文字ずつに分割する
      character[key] = this.replaceHexSpChar(sentence[key].innerHTML).split('');
      for (const k of Object.keys(character[key])) {
        //HTMLタグ、特殊文字は1塊にしたいので、「塊」かどうかの判定
        continueFlg += this.setContinueFlg(character[key][k]);
        if (continueFlg === 1) {
          //HTML、特殊文字は次の文字に繋げる
          _character += character[key][k];
          continue;
        } else if (continueFlg === 3) {
          //HTML、特殊文字の終わり文字
          _character += character[key][k];
        } else {
          //HTML、特殊文字どちらでもないので連結しない
          _character = character[key][k];
        }

        //文字を連結する
        //HTMLタグはそのまま連結、通常文字は位置を設定する
        _sentence += (this.setCharType(character[key][k]) === 2) ?
                      _character : this.setCharacterPosition(_character);

        //挿入対象文字、文字判定フラグをリセット
        _character = '';
        charType = continueFlg = 0;
      }
      //文章を原文の後ろの位置に挿入
      _sentence = '<div class="w_gucha">' + _sentence + '</div>';
      sentence[key].insertAdjacentHTML('afterend', _sentence);
      _sentence = '';
    }
    //原文を削除
    for (const key of Object.keys(sentence)) {
      sentence[key].parentNode.removeChild(sentence[key]);
    }
  }

  /**
   * 該当文字が特殊文字化、タグか、通常文字かを判定
   *
   * @param   {string}  [str] 判別対象文字
   * @return  {int}     1:特殊文字、2:HTMLタグ、0:通常文字
   */
  setCharType(str) {
    return (str === '&' || str === ';') ? 1 :
           (str === '<' || str === '>') ? 2 : 0;
  }

  /**
   * 該当文字が1塊の文字になるか判定
   *
   * @param   {string}  [str] 判別対象文字
   * @return  {int}     1:塊開始点、2:塊終了点、0:通常文字
   */
  setContinueFlg(str) {
    return (str === '&' || str === '<') ? 1 :
           (str === ';' || str === '>') ? 2 : 0;
  }

  /**
   * 特殊文字を16進表記に置換
   * 一般的な特殊文字を16進表記に置換する
   *
   * @param   {string}  [sentence] 置換対象文
   * @return  {string}  [sentence] 置換後の文章
   */
  replaceHexSpChar(sentence) {
    const replaceEntity = [
            ['(&quot;|&#34;)',  '&#x22;'], // クォーテーション
            ['(&amp;|&#38;)',   '&#x26;'], // アンパサンド
            ['(&lt;|&#60;)',    '&#x3C;'], // 小なり
            ['(&gt;|&#62;)',    '&#x3E;'], // 大なり
            ['(&nbsp;|&#160;)', '&#xA0;'], // 空白
            ['(&copy;|&#169;)', '&#xA9;'], // コピーライト
          ];
    let regExp = new Object();
    for (const k of Object.keys(replaceEntity)) {
      regExp = new RegExp(replaceEntity[k][0], 'ig');
      sentence = sentence.replace(regExp, replaceEntity[k][1]);
    }
    return sentence;
  }

  /**
   * 1文字毎の<span>を生成
   * <span>で文字の位置、角度を設定する
   *
   * @param   {string}  [character] 置換対象文
   * @return  {string}  <span>～</span>で生成されたHTML文
   */
  setCharacterPosition(character) {
    if (character.trim() == '') return character;
    let y_position = this.randPercentage() + 'px',
        x_position = this.randPercentage() + 'px',
        rotate     = this.randRotate() + 'deg';
    return '<span class="char-position" ' +
                'style="transform: translate(' + x_position + ',' + y_position + ')'+
                    'rotate(' + rotate + '); display:inline-block">' +
            character +
           '</span>';
  }

  /**
   * ランダムな距離を生成
   *
   * @return  {int}  ランダムな距離(px)
   */
  randPercentage() {
    return 180 * Math.cos(Math.random() * Math.PI * 2);
  }

  /**
   * ランダムな角度を生成
   *
   * @return  {int}  ランダムな角度(deg)
   */
  randRotate() {
    return 360 * Math.random();
  }

  /**
   * 文字を元の位置に戻す
   */
  returnPosition() {
    let character = document.querySelectorAll('.char-position');
    for (const k of Object.keys(character)) {
      character[k].className = 'posi-zero';
      character[k].style.transform = null;
    }
  }
}

//ぐちゃぐちゃにする
let gc = new Guchax2();
gc.setGuchax2();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8>
	<title></title>
	<style>
	.posi-zero {
	transition: 1.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
	animation: bright 1s ease-in-out 1.5s 1 alternate;
	}
	@keyframes bright {
	0% {
	color: rgba(0, 191, 165, 0.8);
	text-shadow: 0px 0px 5px rgba(0, 191, 165, 0.3);
	}
	}
	.gucha {
	display: none;
	}

	#re {
	background-color: #fff;
	border: 1px solid #333;
	width: 10em;
	text-align: center;
	transition: .5s;
	}
	#re:hover {
	background-color: #333;
	color: #fff;
	cursor: pointer;
	transition: .5s;
	}
	</style>
	</head>
	<body>
	<div class="gucha">
	<p><b>JavaScript</b>という言葉は狭義にはMozillaが仕様を策定し実装しているスクリプト言語を指す。このスクリプト言語はEcmaインターナショナルでECMAScript (ECMA-262) として標準化されており、多くのウェブブラウザ等はこの標準化されたECMAScriptを実装している。たとえば、マイクロソフトによる実装はJScriptと呼ぶ。</p>
	<p>一般的に<b>JavaScript</b>という言葉が使われるときはこのようなさまざまなECMAScriptの実装も含んだ幅広い意味でつかわれるので、どちらの意味でJavaScriptという言葉が使われているかは文脈で判断する必要がある。</p>
	<p>ECMAScriptは仕様自体に独自の拡張を条件付きで認める記述があり、現在主要なブラウザが実装しているスクリプト言語はすべてECMAScriptに準拠していることになる。広義の意味でこれをJavaScriptと呼ぶ場合、主要なブラウザが実装しているスクリプト言語はマイクロソフトやGoogle、アップルの実装も含めてJavaScriptである。</p>
	<p>なお、ウェブブラウザでよく実装されているAPIであるDOM (Document Object Model) はECMAScriptの仕様の一部ではないので、DOMの準拠の有無はECMAScriptの準拠の有無とは関係ない。</p>
	</div>
	<p id="re">ぐちゃぐちゃを戻す</p>
	<script src="gucha.js"></script>
	<script>
	document.getElementById('re').addEventListener('click', gc.returnPosition, false);
	</script>
	</body>
	</html>
	class Guchax2 {
	/**
	* 文章をぐちゃぐちゃにする
	*/
	setGuchax2() {
	let sentence = document.querySelectorAll('.gucha'),
	character = new Object(),
	_sentence = '', _character = '',
	charType = 0, continueFlg = 0;
	for (const key of Object.keys(sentence)) {
	//文章内の特殊文字を16進数化して、文字を１文字ずつに分割する
	character[key] = this.replaceHexSpChar(sentence[key].innerHTML).split('');
	for (const k of Object.keys(character[key])) {
	//HTMLタグ、特殊文字は1塊にしたいので、「塊」かどうかの判定
	continueFlg += this.setContinueFlg(character[key][k]);
	if (continueFlg === 1) {
	//HTML、特殊文字は次の文字に繋げる
	_character += character[key][k];
	continue;
	} else if (continueFlg === 3) {
	//HTML、特殊文字の終わり文字
	_character += character[key][k];
	} else {
	//HTML、特殊文字どちらでもないので連結しない
	_character = character[key][k];
	}

	//文字を連結する
	//HTMLタグはそのまま連結、通常文字は位置を設定する
	_sentence += (this.setCharType(character[key][k]) === 2) ?
	_character : this.setCharacterPosition(_character);

	//挿入対象文字、文字判定フラグをリセット
	_character = '';
	charType = continueFlg = 0;
	}
	//文章を原文の後ろの位置に挿入
	_sentence = '<div class="w_gucha">' + _sentence + '</div>';
	sentence[key].insertAdjacentHTML('afterend', _sentence);
	_sentence = '';
	}
	//原文を削除
	for (const key of Object.keys(sentence)) {
	sentence[key].parentNode.removeChild(sentence[key]);
	}
	}

	/**
	* 該当文字が特殊文字化、タグか、通常文字かを判定
	*
	* @param {string} [str] 判別対象文字
	* @return {int} 1:特殊文字、2:HTMLタグ、0:通常文字
	*/
	setCharType(str) {
	return (str === '&' \|\| str === ';') ? 1 :
	(str === '<' \|\| str === '>') ? 2 : 0;
	}

	/**
	* 該当文字が1塊の文字になるか判定
	*
	* @param {string} [str] 判別対象文字
	* @return {int} 1:塊開始点、2:塊終了点、0:通常文字
	*/
	setContinueFlg(str) {
	return (str === '&' \|\| str === '<') ? 1 :
	(str === ';' \|\| str === '>') ? 2 : 0;
	}

	/**
	* 特殊文字を16進表記に置換
	* 一般的な特殊文字を16進表記に置換する
	*
	* @param {string} [sentence] 置換対象文
	* @return {string} [sentence] 置換後の文章
	*/
	replaceHexSpChar(sentence) {
	const replaceEntity = [
	['("\|")', '"'], // クォーテーション
	['(&\|&)', '&'], // アンパサンド
	['(<\|<)', '<'], // 小なり
	['(>\|>)', '>'], // 大なり
	['( \| )', ' '], // 空白
	['(©\|©)', '©'], // コピーライト
	];
	let regExp = new Object();
	for (const k of Object.keys(replaceEntity)) {
	regExp = new RegExp(replaceEntity[k][0], 'ig');
	sentence = sentence.replace(regExp, replaceEntity[k][1]);
	}
	return sentence;
	}

	/**
	* 1文字毎の<span>を生成
	* <span>で文字の位置、角度を設定する
	*
	* @param {string} [character] 置換対象文
	* @return {string} <span>～</span>で生成されたHTML文
	*/
	setCharacterPosition(character) {
	if (character.trim() == '') return character;
	let y_position = this.randPercentage() + 'px',
	x_position = this.randPercentage() + 'px',
	rotate = this.randRotate() + 'deg';
	return '<span class="char-position" ' +
	'style="transform: translate(' + x_position + ',' + y_position + ')'+
	'rotate(' + rotate + '); display:inline-block">' +
	character +
	'</span>';
	}

	/**
	* ランダムな距離を生成
	*
	* @return {int} ランダムな距離(px)
	*/
	randPercentage() {
	return 180 * Math.cos(Math.random() * Math.PI * 2);
	}

	/**
	* ランダムな角度を生成
	*
	* @return {int} ランダムな角度(deg)
	*/
	randRotate() {
	return 360 * Math.random();
	}

	/**
	* 文字を元の位置に戻す
	*/
	returnPosition() {
	let character = document.querySelectorAll('.char-position');
	for (const k of Object.keys(character)) {
	character[k].className = 'posi-zero';
	character[k].style.transform = null;
	}
	}
	}

	//ぐちゃぐちゃにする
	let gc = new Guchax2();
	gc.setGuchax2();