誤字について編集リクエストが来ておりましたので修正いたしました。ご指摘ありがとうございます。※20180210追記コメントで教えていただいたのですが、FirefoxではShiftキーを押しながら右クリックすると、スクリプトによる制御を無視して強制的にデフォルトのコンテキストメニューを表示できるようです。ブラウザ上での表示サイズでは簡単にダウンロードできてしまいます。そのため、Firefoxでは下記内容の効果を発揮できません。勉強不足でした、申し訳ございません。公開していたイラストが別のWebサイトに勝手に転載されていたり、SNSのアイコンで使われていたり。画像の無断利用に関して悩んだことのあるイラストレーターの方は少なくないと思います。相談を受けたことはありませんがTwitterで無断利用に関するツイートをよく目にするので、私も何か助けになれることは無いかと思い、画像の無断転載や無断利用を防ぐ方法を考えました。備忘録ですが、誰かの助けになれたら嬉しいので、Qiitaに記載いたします。他にも方法があれば、コメントなどで教えていただけると嬉しいです。※ライブラリではありません。ただのアイデアです無断利用を制限する一文を記載するまずはWebサイト中に「無断利用禁止」など、無断での利用を認めていないという旨の注意文を記載しておきます。閲覧者の良識に訴える作戦ですね。これだけでも無断利用しないようにする方が多いと思いますが、注意文に気づかない方、あえて無視する方も少なくないはずなので、効果は薄いかもしれません。そもそも画像をダウンロードさせないようにする無断利用禁止!と、いくら強く書いても聞く耳を持たない人はいますので、無断利用を防ぐには画像をダウンロードさせないことが一番有効です。調べていて思ったのですが、ダウンロードを100%防ぐことはできそうにありません......。いっても可能な限り難しくすることは可能です。昔からある方法も含め、ダウンロードの防止策を以下に記載します。右クリックでメニューを表示。画像保存ボタンをクリック。いう手順で行われることが多いため、右クリックを無効にすることで、そもそも画像保存ボタンを表示させないようにする方法です。ページ内のどこかをクリックすると、「右クリックは禁止しています」というダイアログボックスが出てくるWebサイトをよく目にします。あのような形式だと、OKボタンをクリックするまで操作ができなくなってしまうのでストレスを感じます。右クリックしたときにアラートを表示するのではなく、コンテキストメニューが出ないようにするだけでも十分だと私は考えています。その方が閲覧者のストレスは少なくなるかもしれません。以下のようなスクリプトで実現できます。})})※document.imagesには、ページ内に使われているimg要素が全て定義されています。画像のドラッグを禁止するドラッグして別タブで画像を表示すると、そこでは右クリックできるので、ページ内で右クリックを制限しても実はあまり意味が無いのです。加えて言うと、ドラッグさえ出来てしまえばfinderやExplorerに直接画像をコピーすることも可能です。右クリックだけでなくドラッグも禁止しておけば、かなりの割合でダウンロードを防ぐことができると考えました。右クリックを禁止するスクリプトを以下のように書き換えて実現できます。})})img要素のsrc属性値をJavaScriptで動的に書き換える右クリックとドラッグを禁止してしまえば、ダウンロード防止に非常に有効だと考えていますが、ソースコードを見られてしまうと画像のURLを見られてしまいます。画像に直接アクセスされてしまうと、これまでの対策は全くの無意味です。そのため、HTMLのソースコードだけでは画像のURLがわからないように、src属性値はJavaScriptを使ってセットすると無断転載防止に効果的かもしれません。})})例ではまず、ダウンロードさせたくない画像のimg要素からsrc属性を削除し、代わりにdata-img-index属性にユニークな値をセットしています。script側には、新しくオブジェクトを作成して、data-img-index属性値をプロパティ名に、画像のURLを値に定義しています。することでhtml上では画像のURLがわからなくなるので、JavaScriptを知らない方が画像をダウンロードすることは困難になります。右クリックとドラッグの禁止処理にはJavaScriptが動かない環境では動作しないという弱点があります。この方法を使うと、そういった環境ではそもそも画像が表示されないので、ユーザビリティは下がってしまいますが弱点をカバーすることも可能です。画像の描画にcanvas要素を使うここまでの対策でも十分に防げると思います。主要なブラウザについている開発者ツールでは、JavaScriptで書き換えた後のsrc属性値も見えてしまいます。img要素ではなくcanvas要素を使えば、属性値にURLを記載しなくても画像を表示できるので、画像のURLが見られないようにするために有効だと考えました。htmlはそのままで、JavaScriptを次のように書き換えると、img要素を削除して、代わりにcanvas要素を挿入します。})})※過度に縮小した画像をcanvas要素で表示すると、ジャギーが目立ってしまうようなのでご注意ください。画像のURLにアクセスするとbase64文字列を返すようにする。これまでの方法、実はjsファイルを見られてしまうと意味がなくなってしまいます。そのため画像のURLがわかっても簡単に保存できないように、もう少し踏み込んで対策を考えてみました。サーバサイドのスクリプトを使って画像をbase64の文字列に変換し、それをJavaScriptで取得するような仕組みにすれば、もっとダウンロードが難しくなるのではないでしょうか。画像のURLへのアクセスに対して、以下のようなPHPスクリプトを経由するようにすれば、base64に変換して返すようになります。※20180131追記はてなブックマークのコメントで教えていただきましたが、セキュリティの懸念があるとのことでした。次のスクリプトをそのまま使用するのはお控えくださいますようお願いいたします。可能性を探るのは面白いけど、画像に透かしを入れる、とかの方が健全だと思う。みたいな入力でディレクトリトラバーサル出来ちゃったりしないのかな。basename(),pathinfo()ファイル名だけを取り出せば問題ないと考えたのですが、甘かったです......。}?>この方法なら画像のURLに直接アクセスされても、文字列しか表示されないのでbase64のことを知らない方が画像をダウンロードしづらくなります。例)http://label841.com/sample1/img/01.jpghtaccessなどを使って、画像のURLにアクセスすると、上記のPHPスクリプトを経由させるようにすることで想定の動作になります。併せてこれまでのJavaScriptを下記のように変更すると、base64文字列を受け取ったあと、canvas要素で画像を描画するようになります。※base64のデータを非同期で取得するために、axiosというライブラリを使っています。})スクリーンショットの防止について画像をダウンロードしづらくしてもスクリーンショットは通常通り撮れますので、こちらもどうにかして防ぎたいです。Playerでは、保護されている動画のキャプチャを取ろうとすると、真っ黒なものしか撮れないらしいので参考に処理を考えてみました。以下の場合に画面が真っ黒になれば、MacとPCのどちらもほとんどの場合にスクリーンショットを撮りづらくなります。screenキーを押すため。ブラウザが非アクティブになったとき→スクリーンショットを撮るアプリケーションを起動したら、ブラウザが非アクティブになるため。これらの要件をクリアするために、CSSとスクリプトを追加しました。100;}上記のCSSを追加すると、bodyに.ovがついているとき、after擬似要素を追加し、画面全体を真っ黒にします。removeOverlay)上記のJavaScriptを追加すると、以下のような動作を行います。metaキー(Commandキー)が同時に押されていたらbodyに.ovを追加。PrtScーを押したときにbodyに.ovを追加、0.3秒後に、bodyの.ovを削除キーを離したときShiftキー、metaキーのどちらかが押されていなかったらbodyの.ovを削除windowが非アクティブのとき、bodyに.ovを追加windowがアクティブのとき、bodyの.ovを削除スマートフォンは解決策を見つけられませんでした......。今後の課題とまとめ最終的に次のリンク先の形になりました。画像をダウンロードさせないページのデモcanvasで画像を縮小表示するとどうしても荒くなってしまうので、スマートフォンなどでは気になってしまいます。ウィンドウをリサイズしたあとも画像サイズがそのままになってしまっているので、その点を改修すればもう少し使い勝手がよくなるかもしれません。それらの課題を解決して、一つのライブラリにまとめ、簡単に導入できるようにしたいと考えています。TwitterやPixivに掲載しているイラストにはこの方法は使えませんが、イラストレーターの方がご自身で運営しているWebサイトには適用できると思います!今回のファイルは次のリンクからダウンロード可能です。ライブラリとしては使えませんが、アイデアとしてお使いいただければ幸いでございます。今回使ったファイル(distディレクトリの中に入っているファイルがアップロードされています。設定ファイルの雑さはお目こぼしをお願いします。requestStockLike78@a_haruWebプログラミングの勉強をしています。upLoginユーザーは見つかりませんでした。