最近アメブロのカスタマイズぐるっぽや、無料でCSSテンプレートを配布している方からの【無断使用】や、使用するに当たってのルールを守らない人が出てきているようです。
具体的には
・著作権表記を消去して使用
・再配布・改変禁止のテンプレートの改造・再配布
・画像ファイルの直リンク・・・など等
完全な盗用を防ぐことは出来ませんが、ある程度の無断改変やクレジット消去などの対策になると思いますので、ご参考までに。
jsとcssの圧縮・難読化
java scriptの圧縮・難読化java scriptの難読化には、盗用を防ぐ他に、圧縮してファイルサイズを軽くする効果もあります。
ひとつのファイルにまとめてやる事で、HTTPリクエストの回数が少なくなり転送量が削減されるので、いくつものjava scriptファイルを分けて読み込ませるより、1つにまとめて圧縮した方が、ページ表示速度の向上になります。
ｊｓの圧縮・難読化はツールを使い簡単に行えます。
何種類かツールはありますが、今回はpackerを使い解説します。
難読化を綺麗に元に戻す方法はありますが、長いコードだと完全な元通りにはならないので、バックアップはとっておく事。
下記のscriptを難読化してみます。
$(function(){
var bkuma=$('div.subContents,#recent_entries').find("a").get();
for(var i=0;i<bkuma.length;i++){
var hatenabk=document.createElement("img");
hatenabk.border=0;
hatenabk.src="http://b.hatena.ne.jp/entry/image/"+bkuma[i].href;
(bkuma[i].appendChild(hatenabk));};
});
var bkuma=$('div.subContents,#recent_entries').find("a").get();
for(var i=0;i<bkuma.length;i++){
var hatenabk=document.createElement("img");
hatenabk.border=0;
hatenabk.src="http://b.hatena.ne.jp/entry/image/"+bkuma[i].href;
(bkuma[i].appendChild(hatenabk));};
});
上記コードをpackerの上のテキストエリアにコピペ。
Base62 encode にチェックを入れ、【Pack】をクリック。
すると下のテキストエリアに難読化されたコードが表示されます。
難読化後のコード↓
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(5(){3 1=$(\'9.d,#4\').8("a").6();7(3 i=0;i<1.c;i++){3 2=e.f("g");2.h=0;2.j="k://b.l.m.n/o/p/"+1[i].q;(1[i].r(2))}});',28,28,'|bkuma|hatenabk|var|recent_entries|function|get|for|find|div|||length|subContents|document|createElement|img|border||src|http|hatena|ne|jp|entry|image|href|appendChild'.split('|'),0,{}))
この様に難読化されます。
CSSの圧縮・難読化
CSSには、packerの様にコード自体を難読化するツールはありません。
代わりに圧縮する事で大分読みにくくする事ができます。
あと、アメブロのデフォルトCSSの様に、無駄に同じセレクタを分割して書く方法もあります。
例としてYUI Compressorを使用します。
ページ上部のテキストエリアにCSSをコピペする。
次にFile TypeをCSSに変更。
【Compress】をクリック！
【Compress】の下部に圧縮されたCSSが出来上がります。
下記に色々なリンクがあるので自分が使いやすいモノを使用するといいです。
使い方はほぼ全部同じですけど。
jsの圧縮・難読化ツール
■/packer/
■JavaScript Compression - Compress JavaScript Code Free with this JavaScript Compressor (CSS Too) - from Creativyst
■BrainJar.com: JavaScript Crunchinator Demo
■Compress javascript and css. Amazing code compression. Quick,easy and free!
■JavaScript-Compressor - JavaScript Compression - CSS-Compressor - JS, jQuery, Ajax and PHP
■JS Minifier
■DHTML JavaScript File Size Compressor
■LZ77 JavaScript Compressor
■Javascript Compressor - compress code online for free
■Design215 Javascript Compressor
■Javacript Compressor
CSSの圧縮ツール
■Online YUI Compressor
■Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
■Code Beautifier: CSS Formatter and Optimiser
■Online CSS Optimiser / Optimizer
■CSS Drive Gallery- CSS Compressor
■Robson ≫ CSS Compressor
■Cascading Style Sheets formatter / compressor v1.925
■Tools - CSS Compressor - Arantius.com
■Format CSS Online
java scriptを使い改変・盗用を防ぐ
ここではjava scriptがテンプレートに含まれている場合、クレジット表記の排除や無断改変を防ぐ為の方法を書いてみました。また、詳しい説明を書いてしまえば、ルールを違反する人に突破されやすくなるので詳しい説明は書いていません。
もし使う場合はソースを解読して使ってください。
これで難読化もすれば、大抵の人は改変やクレジット排除する気力も起きなくなるはず。
1、URLに指定文字列がある場合に実行
ページurlに指定の文字列が存在する場合に、java scriptを動作する様にします。
アメブロの場合、どのページにもユーザーIDがurlに含まれているので
指定する文字列を、テンプレートを渡すユーザーのIDに指定したら
そのユーザーのみが使えるので、ソースを丸ごとコピーされてもOK。
jQuery(function($){
var url=location.href;
if (url.match(/amebloger-s*/)) {
}
else{
jQuery("html").remove();
}
});
var url=location.href;
if (url.match(/amebloger-s*/)) {
}
else{
jQuery("html").remove();
}
});
上の記述では、指定ユーザーのブログ以外で使えば、ページが消えるようにしています。
2、ページ内に指定URLや文字列がある場合に実行
これはクレジットの表記やバナーを消されたくない場合に使えます。
指定URLがページ内に存在している場合に、java script実行。
下記の例では、falseの場合、ページを消します。
バナーURLを指定したり、クレジット表記の文字列を指定すればいいでしょう。
jQuery(function($){
var links=document.documentElement.innerHTML;
if (links.match(/http:\/\/ameblo.jp\/amebloger-s\/entry-10760140456.html*/)) {
}
else{
jQuery("html").remove();
}
});
var links=document.documentElement.innerHTML;
if (links.match(/http:\/\/ameblo.jp\/amebloger-s\/entry-10760140456.html*/)) {
}
else{
jQuery("html").remove();
}
});
3、java scriptを組み込み外部から呼び出す
1と2で書いた記述を組み合わせてtureの時に、外部jsファイルを呼び出すようにします。
フリープラグイン側も難読化して、呼び出すjsファイルの中身も難読化。
これで大抵は、改変・盗用を防げます。
下記のscriptを1と2を組み合わせて使う。
var src = "jsファイルのurl",
d=document,
s = d.createElement('sc'+'ript');
s.setAttribute('type', 'text/javasc'+'ript');
s.setAttribute('charset', 'utf-8');
s.setAttribute('src', src);
d.getElementsByTagName('head')[0].appendChild(s);
d=document,
s = d.createElement('sc'+'ript');
s.setAttribute('type', 'text/javasc'+'ript');
s.setAttribute('charset', 'utf-8');
s.setAttribute('src', src);
d.getElementsByTagName('head')[0].appendChild(s);
例えばこんな使い方も出来ます。
jQuery(function($){
var links=document.documentElement.innerHTML;
if (links.match(/http:\/\/ameblo.jp\/amebloger-s\/entry-10760140456.html*/)) {
var src = "jsファイルのurl",
d=document,
s = d.createElement('sc'+'ript');
s.setAttribute('type', 'text/javasc'+'ript');
s.setAttribute('charset', 'utf-8');
s.setAttribute('src', src);
d.getElementsByTagName('head')[0].appendChild(s);
}
else{
jQuery("html").remove();
}
});
var links=document.documentElement.innerHTML;
if (links.match(/http:\/\/ameblo.jp\/amebloger-s\/entry-10760140456.html*/)) {
var src = "jsファイルのurl",
d=document,
s = d.createElement('sc'+'ript');
s.setAttribute('type', 'text/javasc'+'ript');
s.setAttribute('charset', 'utf-8');
s.setAttribute('src', src);
d.getElementsByTagName('head')[0].appendChild(s);
}
else{
jQuery("html").remove();
}
});
この様に記述し、更に呼びだし先のjsファイルにもこの記述を応用すればOK。
上記の記述を少し弄ればCSSファイルの呼び出しにも応用出来るので、CSSファイルを配布せずに自分のサーバーで管理する場合に効果的だと思います。
完全な防止策はないのか？
残念ながら今回の方法ではjava scriptをOFFにしているユーザーには対処出来ません。しかしjava script をOFFにしているユーザーは約2割らしいので、大分防御出来ると思います。
完全な防止策にはなりませんが、この対策を突破出来る知識を持っている人なら、自分でデザイン作った方が早いと思います。
本当はこんな事考えなくても、全ての人が良識を持ってテンプレートを使えばいい話だったりするんですけどね。