検索
連載

イベントで「右クリック禁止」を禁止してみよう：初心者のためのJavaScript入門（2）（4/4 ページ）

JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず！？（編集部）

[小島尚基，有限会社インテレクトキューブ] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

ブックマークレットを理解しよう

　ブックマークレットについて少し詳しく見てみましょう。ブックマークレットはjavascript:で始めます。

　次のalert('〜');部分はもう分かりますね？

　この部分がなくても、右クリック禁止を禁止する動作には影響ありませんが、ブックマークレットが実行されたかどうかが分かりにくいので、ちゃんと実行されているかどうかを確認するために「右クリック禁止を禁止！」という警告ダイアログを表示させています。

　1行で複数のJavaScriptを書く場合は;（セミコロン）で区切ります。これはイベント内にJavaScriptを書くときと一緒です。

【注意】

ブックマークレットもイベントと同じように、「;」で区切ればどんどんJavaScriptをつないで書くことができますが、Internet Explorer 6の場合、500文字程度までのブックマークレットしか動かすことができません。そのため、Internet Explorer 6でも動くようにブックマークレットを作る場合は、あまり長いものは書けないという制限があります。

ブックマークレットの書ける文字数もWebブラウザによって違うため注意が必要です。Internet Explorer 7とInternet Explorer 8は2000文字程度まで書けます。


　次のdocument.body.oncontextmenu='';のdocumentというのはHTML全体を意味しています。document.bodyというのは、つまり「HTML全体のbody」という意味で、<body>タグのことです。

　document.body.oncontextmenu=''の部分は、<body>タグに書かれたoncontextmenuに''と書いています。''はクオーテーションの中に何も書かれていないので、何もしない空っぽのJavaScriptを意味します。

　つまり、空っぽのJavaScriptを上書きするというのは、もともと書かれていたJavaScriptを消すのと同じことになります。

　これで、<body>タグで表示されているところは、右クリックをしても何も起こらずに、本来の右クリックの動作である、コンテキストメニューが表示されるようになります。

　次のdocument.oncontextmenu=''は、タグにはJavaScriptを直接書かずに、後からJavaScriptでoncontextmenuのイベントを登録しているWebページ用の対策です。

　そこまでして右クリック禁止にされると、余計に右クリックしたくなっちゃいますが、後からJavaScriptで書かれたものでも、さらにブックマークレットで空っぽのJavaScriptを上書きしてしまえば右クリックを有効にできます。

　次のdocument.onmousedown=''はoncontextmenuではなく、先程ボタンにつけたonmousedownのイベントを使って右クリック禁止にしている場合の対策です。

　凝った作りになっているほど、「そんなに右クリック禁止にしたいのか！」と思いますが、あっさりクリアしてしまうとなんだか逆にかわいそうになりますね。

　最後のvoid(0)は、ページの移動をしないためのおまじないです。これを書かないと、真っ白のページに移動してしまいます。

　全部の画像やリンクに1個ずつ右クリック禁止のJavaScriptを書いているようなWebページには、このブックマークレットでも対処できません。

　もっと強力な右クリック禁止対策も書こうと思えば簡単に書けますが、そこまで右クリック禁止にしたいWebページなら、右クリックしないであげるやさしさも大切ではないでしょうか。

コピー＆ペーストを禁止してみる

　例えば、ネット通販や会員登録のWebページなどで、メールアドレスの入力間違いを防止するために、メールアドレス入力と確認用の2つの入力フィールドを用意していることがあります。

サンプル12

　しかし、メールアドレスをコピー＆ペーストされてしまうと確認の意味がなくなります。そんな時はイベントを使って、コピー＆ペーストを禁止してしまいましょう。

<html>
  <body>
    メールアドレス：<input type="text" oncopy="alert('コピー禁止！'); return false"
      oncut="alert('カットも禁止！'); return false"><br>
    メールアドレス（確認用）：<input type="text" onpaste="alert('ペースト禁止！'); return false">
  </body>
</html>

　テキストフィールドにoncopyと書くことで「コピーされたとき」というイベントが使えます。oncontextmenuのときと同じく、「コピーされたことをなかったことに」したいのでreturn falseもセットで使います。

　コピーだけ禁止しても、Control＋Xキーでカットされてしまうので、ついでにoncutイベントでカットも禁止にしています。

　確認用の入力フィールドにはonpasteと書くことで「ペーストされたとき」というイベントを使って、ペースト禁止にしています。

　しかし、これだけだと確認用フィールドからコピー＆ペーストできてしまうので、本当は両方にコピー禁止とペースト禁止を書いたほうがいいかもしれませんね。

　<body>タグにイベントを書いて、Webページ全体をコピー＆ペースト禁止にする方法もありますが、影響する範囲が大きいため、予想外なところでWebページの使い勝手の低下を招いてユーザーの反感を買うことがあります。

　<body>タグにイベントを書くときは、使い勝手に悪影響が出ないかよく検討しましょう！

イベントのまとめ

　今回はイベントについてをいろいろ試してみました。覚えることが多かったですね。

<HTMLタグ onclick="★">

クリックされるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ onmouseover="★">

マウスカーソルが重なるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ onmouseout="★">

マウスカーソルが外れるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ onmousedown="★">

マウスボタンが押されるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。マウスの左ボタンと右ボタンを区別しません。

<HTMLタグ onmouseup="★">

マウスボタンが離されるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。マウスの左ボタンと右ボタンを区別しません。

<HTMLタグ ondblclick="★">

ダブルクリックをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ onload="★">

Webページが読みこまれるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ onunload="★">

Webページを移動したり、閉じられたりするのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ oncontextmenu="★">

右クリックでコンテキストメニューが表示されるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ oncopy="★">

コピーされるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ oncut="★">

カットされるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

<HTMLタグ onpaste="★">

ペーストされるのをきっかけに「★」の部分に書かれたJavaScriptを実行します。

　また、「★」部分に

return false

を書くことで、起きたイベントを「なかったことに」することができます。

　実は今回やったイベントは、イベントの中のまだまだ一部です。ほかにも、イベントを使ってマウスカーソルの位置を調べたり、キーボードで押されたキーを調べたり、時間の経過を調べたりと、イベントは奥が深いです。

　JavaScriptを使う上で、イベントはかなり重要なポイントです。少しずつでもいいので理解を深めるようにしましょう。

次回までの課題

　今回は、<input>タグ、<body>タグ、<a>タグにイベントを使って動的なWebページを作ってみました。次回までの課題として、<img>タグを使ってマウスが重なると画像が変わり、マウス画像から離れると元の画像に戻るJavaScriptにチャレンジしてみてください。

【ヒント】イメージを表示するには、次のようなHTMLを使います。

<img src="1.gif">

　「1.gif」から「2.gif」に画像を変えるにはJavaScriptで「src="〜"」の内容を変更します（画像の名前は好きな画像のものに変更してください）。

　イベントとして書く場合、

<img src="1.gif" ●●●="src='2.gif'" ○○○="src='1.gif'">

●●●と○○○にはどんなイベントを書けばいいでしょうか？

　この課題ができたら、クリックしたら別の画像を表示するなど、ほかのイベントも使って色々と実験してみてください。

　次回は変数とfunctionを使って、より高度なJavaScriptをやってみましょう。

「次回」へ


「初心者のためのJavaScript入門」バックナンバー

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る