JQUERY


画像ファイルを持っていかれないようにする方法

インターネットで公開している以上、絶対に画像を持っていかれない方法はない。

ここで紹介するのは、画像を持っていきにくくして、知識の乏しい人なら画像の持ち出しを諦めるだろう方法。そして簡単な実装できる方法を選んだ。

1.baseタグで基準となるURLを設定する

baseタグは、相対パスで書かれたURLの基準を指定するもの。

もしページのソースを見られたら画像の場所がわかってしまう。

絶対パス
----------------------------
<img src="http://example.com/image2001/image01.jpg">
----------------------------

相対パス
----------------------------
<img src="image2001/image01.jpg">
----------------------------

上の二つどちらも、画像ファイルは「http://example.com/image2001/」の中にあると読める。

そこでbeseタグを使うと画像ファイルの場所を少し分かりにくくできる。

headタグの間にbaseタグを記述する
----------------------------
<base href="http://example.com/image2001/">
----------------------------

すると「image2001フォルダ」までが基準になるのでimgタグへの記述は下記のようになる。

相対パスで
----------------------------
<img src="image01.jpg">
----------------------------

「image2001」の記述を省略できるのでimgタグ内だけを見ても画像の場所が分からなくなる。

2.baseタグはjavascriptで隠す。

imgタグだけを見ても画像ファイルの場所は分からないが、headタグ間に記述したbaseタグを見ると分かってしまう。
そこでbaseタグはheadタグ間に書かずに、外部ファイルとしてjavascriptで書くとよりいい。

外部ファイルとして読み込む
----------------------------
document.write('<base href="http://example.com/image2001/">');
----------------------------

参考

http://www.broadband-xp.com/hidesource/base.html

3.右クリックを無効にする

これまでの実装でソースを見ても画像ファイルの場所をわかりにくくすることは出来るが、画像自体を右クリックすれば画像のURLも分かるし、保存も出来てしまう。

そこで右クリックを禁止する。

bodyタグ内に記述
----------------------------
<body onContextmenu="return false">
----------------------------

これだと右クリックは防げるがデスクトップへドラッグすれば保存できてしまう。
そこでjquery.dwImageProtector.jsというjqueryのプラグインを使う。

使い方はこちらこちらが分かりやすい。

http://www.css-lecture.com/log/javascript/dwimageprotector.html

jquery.dwImageProtector.jsのソースはこんな感じ
---------------------------------------------------------
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
border: '1px solid #f00',
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('#content')
});
};
---------------------------------------------------------

head内のソースはこう
---------------------------------------------------------
<script src="http://example.com/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://example.com/js/jquery.dwImageProtector.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('load', function() {
$('img.protect').protectImage();
});
</script>
---------------------------------------------------------

保護するイメージには class を設定する
---------------------------------------------------------
<img src="image01.jpg" alt="" width="500" height="500" class="protect" />
---------------------------------------------------------

画像を囲む枠がずれる場合は「.appendTo('body')」の部分をbodyでなく任意の場所に変更すればうまくいく。

【jquery】masonryがスマホ画面で横並びしない場合の解決方法

javascript プラグインの masonry を使ったページでウインドウが横並びしない場合の対処法。

対処法 → columnWidth オプションを設定する。

------------------------------------------------------
<div class="js-masonry">

↓↓↓↓

<div class="js-masonry"
data-masonry-options='{
"columnWidth": 50,
"itemSelector": ".item",
"transitionDuration": "1.5s"
}'
>
------------------------------------------------------

columnWidth は、ボックスの横幅を指定するオプション。
masonry のデフォルトでは、スマホの画面幅にに二つ以上ウインドウを並べることはサイズ的に無理らしい。
そこで、50pxとかボックスのサイズを小さく指定する必要がある。

jqueryで文字列を置換するreplace関数【javascript】

jquery で文字列を置換するには、javascript のreplace関数を使う。
--------------------------------------------
new_text = text.replace(/探す文字列/g, '置換後の文字列');
--------------------------------------------

第一引数は正規表現で。g 修飾子はマッチするものすべてを見つける。

【jquery】配列内の重複を削除する【javascript】

jquery に unique() という関数があるが、これはDOM要素の配列の重複を削除するもの。文字列が入った配列の重複を解消するものでない。

jquery(javascript)で配列の内容をユニークにするには少し手間を掛ける必要がある。

//配列内の文字列の重複を削除する自作関数。
---------------------------------------------------------
function uniqueArray(array) {
var storage = {};
var resultAry = [];
var value;
for ( var i=0; i

【JQUERY】チェックボックスの状態が取得できない【attr】【checked】

$(this).attr("checked"); ← これが効かない

次のいずれかにして解決。

$(this).prop("checked");
$(this).get(0).checked;

3 / 3123