サイト内検索
Translation here

2017/01/03(火)ソースコードを丸パクされたくない人のためのJavaScript~JQueryでCtrlキーとkeydownイベントを制御する

お疲れ様です、野村(@official_nomura)です。
年をまたいだから、というワケではないんですが新しい試みをブログに導入したので、その備忘録を残しておきます。

本日の対象者

  • JavaScript/JQueryエンジニア・デザイナー
  • コピペブロガーにお困りの方
  • 技術的な話もないのに結論ありきで語るブログに嫌気が差している技術者
太枠の方向けだったんですが、よく考えたら他の方にも需要があるな、と思いました。

本日の議題

ソース例(参考)

jQueryでクリック、右クリック、ドラッグ防止 | snippet

要約

【セレクタ】に対する【パラメータ】防止
例えば、パラメータにclickやcontextmenuを設定するとそれぞれのマウスアクションに対して制御ができる
$(【セレクタ】).on(【パラメータ】,
    function(e){
        // prイベントの場合
        e.preventDefault();
        // True/Falseの場合
        return false;
    }
);
ドラッグ防止の場合、mousedownとmouseupそれぞれののアクションを指定する
この時、mouseアクションを指定する時はonアクションと違ってパラメータを指定する必要はない

JavaScriptエンジニア向け

セレクタの概念はHTML5の話です。CSSのいじり方について理解を深めてもらえればと思います。

CSSサイトデザイナー向け

パラメーターはアクションです。
パラメーターは左クリック・右クリックのアクションを指定します。
mousedownとmouseupは左クリックボタンしかないのと、操作が決まっているのでパラメーターを入れる必要がない、という認識で概ね合っています。
なお、マウスジェスチャーはブラウザ側の機能なのでサイト側で制御する事は出来ません。

このようなスクリプトを入れているサイトを退治する方法

  1. JavaScriptをオフにする。
    jQueryも結局はスクリプトなので、JavaScriptをオフにするといいです。
    特に右クリックの禁止は相当悪質です。本懐はコピーの禁止だと思いますが、そんなもんユーザーにとっちゃどうでもいいです。
    利便性に大きく影響するので、必要に応じてON/OFFしてください。
  2. NOSCRIPTを使う
    よく使うサイトはホワイトリストに入れてしまえば、そのサイトが右クリックを禁止していようが無関係にスクリプトを禁止出来ますので、そもそもそういう挙動に気づかないでしょう。
    ホワイトリストに入れるのも、レイアウトが崩れた時ぐらいでいいと思いますよ。
    おすすめはwindowsユーザーならmicrosoftやamazon、rakutenですね。これらはサブドメインも使用しているので、設定しておかないと頻繁に崩れます。
  3. ソースコードを表示する
    アドレス欄にview-source:を入れると、ソースコードからコンテンツを閲覧する事が出来ますが、そこまでやるメリットは正直皆無でしょう……。
  4. セレクタの外にある要素をつかんでSHIFT+カーソルキーとかCtrl+Aキー
    上記サイトのソースコードをそのまま使う場合、これでコピーが出来ます。
    これを更に制限する場合はキーイベントを足してあげましょう。
$(function(){
  $(【セレクタ】).【発火イベント】(function(e){
    if(event.【キープロパティ】 && e.keyCode === 【キーコード】){
      return false;
    }
  });
});
技術者ならこの辺は大丈夫ですよね?
ヒントは上記の通り。

この辺も参考になると思います。
http://qiita.com/n0bisuke/items/8b2b0c700c8f5f5a4043

キーコードを調べるのはこっち
Bad Request

この方法からもソースコードを守る方法

一応、なくはないですが悪用も出来ちゃいますので……。
セキュリティ面の懸念から、この場では公開しません。
興味があれば各自の責任において調べてもらうか、何かしらのコミュニティで私を捕まえて聞いてもらえれば考えます。

最後に

正直、ユーザーの操作を阻害するような事をやるのは私は好きではありません。
右クリック~コンテクストメニューはユーザーにとって便利な機能ばかりです。
コピー機能を制限するためだけにコンテクストメニュー全てを制限するのはどうなんでしょうね。

明らかに必要のない操作について思うところがあるならまだしも、それ以外に干渉するのはいただけないです。
もし使うとしても、しっかりと用途を意識して使うべきでしょう。間違っても全体を指定する、というような事はしてはいけないと思います。


本日は野村ごろう(@official_nomura)の提供でお届けしました。

この記事を読んだ人は、以下の記事も読んでいます

2016/04/02(土)[adiary][JavaScript][JQuery]$functionと$(window).load(function)

お疲れ様です、野村です。
昨日はちょっと色々ありすぎまして、エイプリルフールネタにまで手が回ってなかったです。

っていうエイプリルフールネタ*1

*1 : そもそもエイプリルフールですらないのでネタもなにもないのは心苦しい…

本日のお話

続きを読む

【!】adiaryを無人管理する

なにやら物々しげなタイトルですが、実際に作ってみて実用できるレベルだったので公開します。
配布はどうだろうなぁ…ぶっちゃけ無償でサポートをしていたら手が回らないので出来ません。
出来ません、というのは簡単ですが何のために技術屋やってんの、と怒られそうなので条件付きでサポートを行う事も検討しています。

条件についてですが、あくまで私の狙いは技術研鑽を日曜大工的にやってもらってスキルを習得してもらうことにあります。
そういう意味の技術サポートですので、いわゆる電化製品店のサービスよろしくお金を払えば勝手にやってくれる、とかそういう事はありません。

ただ、こういうツールを作ろうとする心意気は買いたいので、参考にしてもらう分にはいいかな、と考えました。
アレな部分とかコレな部分にはすみませんがちょっとごにょごにょさせてもらいますが、それでも十分かなと。

checker.png

alert.png


ツールはこんな感じです。
やっている事は今までインストールしたadiaryのサイトの名前を一覧から取得して、なければ新規作成にチェックをつけて新規ブログを、
あればバージョン更新にチェックをつけて一致した名前のブログを最新のバージョンにします。

tool.png


さらに、ブログ作成と公開準備までボタン一発でできるツールを作りました。
そのツールで出来ることは書いてある通りです。
再生ボタンっぽいアイコンを押すとブログの新規作成→初期設定→基本設定その他まで全部やってくれます。
ヤバい生情報がいっぱいあるので見えないぞ!というレベルまでぼかしを入れてますけど、雰囲気は伝わるかな?


これらの作り方ですが、細かいことを言うとちょっとヒントを与えすぎてる感があるので、タグリストに並べるだけ並べました。
これぐらいの言語が分かる人なら自動化まで作れます。

自動化までしない場合はこんな技術は不要です。
最低限としてはshellscriptが組めるレベルぐらい。実際組まなくてもいいですが、そういうもんだと思ってください。

需要を見つつ、これらについても解説しましょう。
OK キャンセル 確認 その他