HTMLソースを難読化する: tnSplit.js

v1.04  JSTNS-104J

tnSplit.js は、HTMLのソースコードを難読化する無料の Javascript です。難読化の対象は、ブラウザがソースコードを解析した後のソースコードです。具体的には、「デベロッパーツール (Elementsタブ)」や、ブラウザの「ページ保存機能 (ウェブページ、一つのファイル / ウェブページ、完全)」などで取得するソースコードです。

※「解析後のソースコード」ではなく、「元のソースコード」を難読化したい方は、こちらのHTMLソースの難読化ページをご利用ください。

設置の仕方
tnSplit.js をお持ちのウェブページに設置する方法を説明します。既に、tnSplit.js をお持ちのサイトのどこかにアップロードしたと仮定しています。

※ ダウンロードしたバッケージ ( JSTNS-104J.zip ) の中にデモ用のウェブページが入っています。最初にそのページのソースコードを眺めておくと理解が深まります。

1
スクリプトダグを挿入する
tnSplit.js をロードするスクリプトタグを、ウェブページに挿入してください。通常、<head>タグの間に入れるのが普通ですが、使用する箇所の前でしたら、どこでもかまいせん。

<script src="( tnSplit.jsまでのパス )/tnsplit.min.js"></script>
2
難読化したいタグを指定する
tnSplit.js を用いて難読化したいタグに、class="tns-apply" を追加してください。このタグの内部のソースが難読化されます。

<div class="tns-apply">

(...このタグの間が難読化される...)

</div>
【重要】 Javascriptアプリケーション (例:メニュー、スライドショーなど) の中には、HTMLソースの一部を読んで、データとして活用するものがあります。もしそのソースを tnSplit.js で難読化してしまった場合、それを必要としていたJavascriptアプリケーションはきちんと動作しなくなる可能性があるので気をつけてください。
3
tnSplit.js を実行する
準備が整いました。以下のコードをベージの一番下に挿入してください。(実際、前のステップで、難読化を指定したタグの下であるならば、どこでもかまいません。) このコードで難読化が実行されます。

<script>tnSplit.run();</script>
これで、tnSplit.js の設置が完了いたしました。