Webページの「コピペ禁止」を解除・回避するJavaScriptコード。スクリプト有効のまま,ブラウザ上で右クリック・テキスト選択の禁止タグを迂回する
Webページ上で,「コピペ禁止」を解除するJavaScriptコード。
ブラウザ上で,マウスで文章を選択して,右クリック→コピー
という操作は,HTML側で禁止できる。
Webサイトの内容が, コピペで無断転載されるのを防ぐためだ。
しかし,その禁止をかいくぐる方法もある。
たとえばブラウザの設定で「JavaScriptを無効にする」というのが一番簡単な方法。
もしJavaScriptを有効のまま,コピペ禁止だけを解除したい場合,
下記のJavaScriptコードを実行すればよい。
(Firefoxなら,Firebugのコンソール上で実行できる。)
// HTML5ではないページもあるし, // Arrayのイテレータがない場合もあるので // 古典的な記法を使う。 // 入れ替えるイベントリスナ var f = function(){ return true; }; // 書き換え対象のDOMイベント名 var evs = "beforecopy beforecut click contextmenu copy dragstart mousedown mouseup selectstart".split(" "); // 書き換え対象のCSS属性名 var props = "userSelect MozUserSelect MsUserSelect WebkitUserSelect".split(" "); // 1要素に対する書き換え操作 function replace_events( elem ){ // イベント for( var i = 0; i < evs.length; i ++ ){ elem[ "on" + evs[i] ] = f(); } // CSS属性 if(elem.style){ for( var i = 0; i < props.length; i ++ ){ elem.style[ props[i] ] = ""; } } } // 全要素に対し var elems = document.getElementsByTagName("*"); for(var i = 0; i < elems.length; i ++){ replace_events( elems[i] ); } replace_events( document );
これで,どんなページでも大概はコピペ可能。
サイト側が WordPress のプラグインでコピペ禁止処理を実装している場合なんかは,これで突破できる。
注意:悪用を禁ずる。
解除コードの解説
Webページ上でコピペを禁止する方法は2つあって,
(1)JavaScriptを使う手と
(2)CSSを使う手
がある。
これらの「コピペ防止」テクニックは,下記の記事にまとめられている。
HTML・CSS3・JSを使い,Webサイトを「コピペ禁止」にする方法のまとめ。右クリックや文字列選択・内容の複製をできなくする無効化テクニック集
http://computer-technology.hateblo.jp/entry/20150717/p1
- Webページを「コピペ不可能」にするためのテクニックまとめ。
- マウスで右クリックしてコピー,Ctrl + C で無断転載,などの行為を禁止できる。 CSSやJavaScriptでの手法を網羅した。
jQueryを使ったサクサクWebスクレイピングのサンプルコード (WSH/JScriptバッチでIEを自動操作する時の $ セレクタが柔軟すぎる!)
バッチでIEを自動操作する際に,jQuery を使ってスクレイピングする。
$() によるセレクタ機能をはじめ,
jQueryのDOM操作をフルに WSH バッチ上で活用できる。
下記のバッチをただ単にダブルクリックするだけで,全処理を実行できる。
jQueryをダウンロードする必要はない。
hoge.js
// ------------------ jQueryでスクレイピング ------------------ // 現在のページ内でjQueryを有効化する(スクレイピングしやすいように) function ie_inject_jquery( ie ){ // 既に$があるか //if( ie.document.$ ) return; // script要素を新規作成 var elem_head = ie.document.getElementsByTagName('head')[0]; var elem_script = ie.document.createElement('script'); elem_script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"; // https://developers.google.com/speed/libraries/devguide#jquery // ロード完了時のイベントを定義 var load_complete = false; elem_script.onload = function(){ load_complete = true; }; // HEADにscriptタグを追加 elem_head.appendChild( elem_script ); // scriptのロード完了まで待つ while( load_complete ){ WScript.Sleep( 500 ); } // $を評価可能になるまで待つ while( ! ie.document.parentWindow.$ ){ WScript.Sleep( 500 ); } // WSHのグローバルで参照を定義 $ = ie.document.parentWindow.$; //log("IEにjQuery注入完了"); return; } /* // IE上でjQueryを使う function $( s ){ return ie.document.parentWindow.$( s, ie.document ); } ↑ $.trim など様々な関数に対応したいので, この関数は不要。 */ // 遷移先の全ページ内でjQueryを有効化する always_enable_JQuery = false; function ie_enableJQuery(){ always_enable_JQuery = true; } // ------------------ IEの基本操作 ------------------ // IE起動 function getIE() { var ie = WScript.CreateObject("InternetExplorer.Application") ie.Visible = true; ie_goto_url( ie, "http://www.google.co.jp/" ); //log("ブラウザでのアクセスを開始します。"); return ie; } // IEがビジー状態の間待ちます function ie_wait_while_busy( ie, _url ) { var timeout_ms = 45 * 1000; var step_ms = 100; var total_waited_ms = 0; while( ( ie.Busy ) || ( ie.readystate != 4 ) ) { WScript.Sleep( step_ms ); // タイムアウトか? total_waited_ms += step_ms; if( total_waited_ms >= timeout_ms ) { /*log( "警告:タイムアウトのため,リロードします。(" + ie.LocationURL // http://blog.livedoor.jp/programlog/archives/298228.html + ")" );*/ // どこかに移動中なら,そこへの移動を再試行 if( _url ) { //log( _url + "への遷移を再試行"); ie_goto_url( ie, _url ); } else { log( "リロード中"); // 移動先が明示されていなければリロード ie.document.location.reload( true ); ie_wait_while_busy( ie ); } break; } } WScript.Sleep( 1000 ) } // http://language-and-engineering.hatenablog.jp/entry/20100310/p1 // http://language-and-engineering.hatenablog.jp/entry/20100403/p1 // ページを移動 function ie_goto_url( ie, url ){ //log("アクセスします:" + url); ie.Navigate( url ); ie_wait_while_busy( ie, url ); //log("ページを開きました。"); // IEで常にjQueryを使うか if( always_enable_JQuery ){ ie_inject_jquery( ie ); } } // デバッグ用 function log(s){ WScript.Echo(s); } // ------------------メイン処理 ------------------ // IE起動 var ie = getIE(); // 今後の遷移先の全ページ内でjQueryによるスクレイピングを有効化 ie_enableJQuery(); // 遷移 ie_goto_url( ie, "http://www.yahoo.co.jp/" ); // スクレイピング実行 log( $("div#topicsfb ul.emphasis li a") // jQueryセレクタが使える .map(function(){ return $(this).html(); }) .get() .join("\n") );続きを読む
最近5〜6年分の人気のある jQueryプラグインを,年別に全て把握するまとめ。定番プラグインの日本語解説付きページへのリンク集
さいきん5〜6年で人気のある jQueryプラグインを,
年ごとに全て把握するためのまとめ。
毎年,「今年のお勧めプラグイン」が
ランキング記事として幾つか発表される。
それらの記事へのリンク集。
目を通しておくだけで,最新のjQuery事情が把握できるし,
Webデザインの引き出しを増やせる。
2015年
[jQuery]WEB制作でよく使うjQueryプラグイン [2015年版] | EMiAC-Works
http://emiac-works.com/coding/jquery/...
- 2015/04/16
- WEB制作でよく使うjQueryプラグインをご紹介。色々使ってきた中で今のものに落ちついてきた。定番と呼ばれるものが多い
- スライダー系,モーダルウインドウ系,スクロールバー装飾,その他カスタマイズ
WEB制作の実務で本当につかえるjQueryプラグイン7選 | jQueryプラグインまとめサイト jQueryBox
http://jquery-box.com/jquery-best7/
- 2015年3月7日
- 日々のWEB制作業務の中で本当によく使うjQueryプラグインを激選してまとめ
- スライダー,ページ遷移,背景動画,画像の色判別,スマホのドロワーメニュー,キャプション,画像の遅延読み込み
jQueryを使いこなそう!便利すぎるプラグイン15選! | Code部
http://blog.codecamp.jp/jquery_plugin/
- 2015/06/17
- 「現在2,500以上のプラグインがリリースされており、多くの web サイトでプラグインが活用されています。」
- 初心者でも使ってみたい jQuery プラグイン 15選
- 写真・グラフ・スクロール・フォームなど
今っぽくなった!トレンドをおさえたjQuery プラグインまとめ | コムテブログ
http://commte.net/blog/archives/5137
- 2015年4月6日
- 視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめ
- マイクロインタラクション,レタリング,フルスクリーン
ECサイトを華やかに!楽天で使えるjQueryプラグイン5選。 [ BLOG / BILLIONPLAN JAPAN ]
http://www.billionplan.com/blog/ec/jq...
- 2015年6月19日
- 少ない面積で多くの情報を伝えたい. そんな店舗運営者のための便利なjQueryプラグインを5つご紹介
- ギャラリー,バナー,画像拡大,スライドショー,回転表示
ASCII.jp:こうめの“これから使える”jQueryプラグイン
http://ascii.jp/elem/000/000/818/818527/
- 2015年04月27日(2013年8月から)
- おすすめのプラグインと実装方法、実装例
- パララックス,アニメーション,背景動画,Facebook風ドロワーメニュー,日時選択,ドロップダウン,無限スクロール,レスポンシブな軽量カルーセル
2014年
jQueryベストプラグイン2014 使えるプラグイン50選をご紹介 | co-jin
http://co-jin.net/web/best-jqueryplug...
- 2014/12/22
- 2014年に登場したベストなjQueryプラグインを50個ご紹介します。
- レイアウト系のプラグインから、メニュー系、メディア系、スライダー系、イメージギャラリー系、テキストエフェクト系、フォーム系など、さまざまなjQueryプラグインがまとめられています。
2014年総まとめ、jQueryのプラグインとスクリプト100選 | コリス
http://coliss.com/articles/build-webs...
- 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプト
- 1カラムのレイアウトが流行っているためか背景関連も充実していました。
- それとSVGをより簡単に利用できるようになったのも大きな目玉
- また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになった
ジャンルの一覧:
背景,SVG,縦長ページ,スクロール連動・パララックス
レスポンシブ,ナビゲーション,レイアウト,
コンテンツ生成,コンテンツ紹介・ツアー
スライダー・カルーセル,画像拡大・・キャプション
アニメーション,エフェクト,テキスト,タブ・アコーディオン
テーブル・リスト・チャート,フォーム,パネル・ボックス
モーダルボックス・ツールチップ,プログレスバー・カウント
ユーザビリティ・Google Analytics
jQueryプラグイン・2014年下半期70選まとめ | bl6.jp
http://bl6.jp/web/javascript/jquery-p...
- 2014年の下半期(7〜12月)にご紹介したjQueryプラグイン・70選をまとめてみました。
スライダー、カルーセル系
画像、ギャラリー、Lightbox系
テキスト、エフェクト系
ナビゲーション、メニュー、リスト系
その他(スクロール、ティッカー、ツールチップ等)
2013年
2013年のベストjQueryプラグイン47 | co-jin
http://co-jin.net/web/2013best-jquery...
- 2013/12/19
- 2013年に発表されたjQueryプラグインのうち、海外のブログでも数多く取り上げられているプラグインをベスト47と題してご紹介
- どれも人気のあるプラグインばかりなので、今後のプロジェクトでも活用できるのは必至。
- また、これまで使っていたプラグインよりも、「使いやすい」「軽い」といったものもたくさんある
- 内容:スクロール系エフェクト,IE7対応タブ,GoogleMap, 複数コンテンツ整列,グリッドUI,フォントサイズ調整,モーダルウィンドウ,オフライン通知,カレンダー,チュートリアル実装など。
[JS]jQueryのプラグイン100選 -2013年総集編 | コリス
http://coliss.com/articles/build-webs...
- 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。
- スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。
- また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。
ジャンル一覧:
1ページコンテンツ用のスクロール,パララックス スクロール,スクロールで定位置
スクロールバー,レスポンシブ,エフェクト
ナビゲーション,レイアウト,画像ギャラリー画像拡大・配置・キャプション
コンテンツスライダー,カルーセル,アニメーション,フォーム
コンテンツのツアー,テキスト,タブ,テーブル・リスト・チャート
パネル・ボックス,モーダルボックス・ツールチップ,サウンド
ユーザー最適化・ABテスト
2013年下半期に紹介したjQueryプラグイン68選まとめ | bl6.jp
http://bl6.jp/web/javascript/jquery-p...
- 2013.12.26
スライダー、カルーセル系
画像、ギャラリー、Lightbox系
テキスト、エフェクト系
ナビゲーション、メニュー、リスト系
その他(スクロール、ティッカー、ツールチップ等)
2013年上半期に紹介したjQueryプラグイン50選まとめ | bl6.jp
http://bl6.jp/web/javascript/jquery-p...
- 2013.07.02
スライダー、カルーセル系
画像、ギャラリー、Lightbox系
テキスト、エフェクト系
ナビゲーション、メニュー、リスト系
その他(スクロール、ティッカー、ツールチップ等)
2012年
[JS]jQueryのプラグイン100選 -2012年総集編 | コリス
http://coliss.com/articles/build-webs...
- 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。
- スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。
ジャンル一覧:
動画,画像ギャラリー,画像拡大,画像配置・キャプション,背景画像
コンテンツスライダー・カルーセル,ナビゲーション
レイアウト,レスポンシブ,パネル・ボックス
ツールチップ・ティッカー,アニメーション,エフェクト
スクロール操作・スクロールコンテンツ
リスト,テーブル,フォーム,テキスト
見出し抽出,ローディング,エレメント・コンテンツ生成
Web Designing: 2012年6月号「特集1:定番jQueryプラグイン2012」詳細目次&リンク集
http://book.mynavi.jp/wd/backnumber/2...
- 2012年6月
メニュー
UI
画像
アニメーション・動画
SNS
スクロール
マルチデバイス
2011年
[JS]jQueryのプラグイン100選 -2011年総集編 | コリス
http://coliss.com/articles/build-webs...
- 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。
- また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。
ジャンル一覧:
動画,画像ギャラリー,画像拡大,画像配置・キャプション,背景画像
コンテンツスライダー・カルーセル,タブ,ナビゲーション
レイアウト,パネル・ボックス
ツールチップ・ティッカー,アニメーション,エフェクト
スクロール操作・スクロールコンテンツ
リスト,テーブル,フォーム,テキスト
見出し抽出,ローディング,エレメント・コンテンツ生成
テーブルを使ったいろいろなjQueryプラグイン26個まとめ | Web活メモ帳
http://blog.verygoodtown.com/2011/05/...
- 2011/05/17
- 料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など
2010年
[JS]jQueryのプラグイン100選 -2010年総集編 | コリス
http://coliss.com/articles/build-webs...
- 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。
ジャンル一覧:
コンテンツスライダー・カルーセル,ギャラリー・画像拡大
ナビゲーション,タブ,パネル・ボックス,ツールチップ
レイアウト,背景画像,アニメーション関連
スクロール・ドラッグなど操作,テーブル・リスト・データ
フォーム,コンテンツ生成
画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images ) - かちびと.net
http://kachibito.net/web-design/224-i...
- 2010.08.04
- 画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグイン
- Lightbox, スライド・ギャラリー・カルーセル,ツールチップ,マウスオーバーエフェクト,メニュー,CSS3
フォームで離脱させないためのjQueryプラグイン50選|designaholic -Creative Column-
http://designaholic.cc/2011/01/jquery...
- 2011年1月 5日
- ユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグイン
- ページや設置方法を制御,ユーザ入力補助,パスワード制御,入力チェック,フォーム要素デザイン
関連する記事:
jQuery Mobile と HTML5 で、Androidのネイティブアプリを作成する手順
http://language-and-engineering.hatenablog.jp/entry/20120717/CreateAndroidNat...
jQuery.jsのソースコードを読んで解析するための解説サイト集
http://computer-technology.hateblo.jp/entry/20131107/p1
jQueryの多数APIを解説するレッスン動画(英語)
http://computer-technology.hateblo.jp/entry/20140509/p4
あなたが,勝つことも引き分けることもできない三目並べ (jQueryプラグイン「jQuery.fakeTicTacToe.js」によるマルバツ・ゲーム)
http://language-and-engineering.hatenablog.jp/entry/20121204/jQueryFakeTicTac...
jQuery をSQLの「select文」のように使う方法
http://language-and-engineering.hatenablog.jp/entry/20081004/1223056859