生成AI対策で実施したこと

こんにちは、ことよみですしょぼ笑
昨今生成AIが何かと問題になっていますが、個人サイトでも対策をするに越したことはないので、今回はことよみが取り入れた生成AI対策について、備忘録的にここに残させていただきますしょぼ笑2
とはいえ、いずれの事柄も「ないよりはマシ」の精神で設定しているものであり、生成AI学習を必ず防げるものではない、ということは念頭に入れておくべきことですね:syobon:

ここでは述べないが、回避方法は探せばいくらでもあるものだからな。
100％の確率で画像などの著作物を守りたい、という場合はネット上には公開しない、という選択肢のみだと思っておくことをオススメする。

かといって何も対策せずに易々と著作物をくれてやるわけにはいきません。
できることはやっておくに越したことはないので:warainasi:
検索避けも実施してるブログなので目を通す方は非常に少数だと思いますが、少しでも何処かの誰かの役に立てたら嬉しいです花丸

どんな対策を実施したのか？

今回、ことよみは大きく分けて以下の3つを実施しました。

・画面上での右クリックや長押しの禁止
・robots.txtの設置
・ウォーターマークの追加

いずれも既に実施している人が多くいる項目ですが、ことよみはまだサイト管理の経験や知識が浅いこともあり、実施できていなかった（調べるまで知らなかった）部分があったので、管理に慣れてきた&昨今問題になり始めてきた今このタイミングに導入しよう:wow-bikkuri:と思い至り行動した次第です:warainasi:

robots.txtってなに？

それはこの後詳しく解説するぞ。

ですです、焦らず急がず行きましょう:warai:
ということで、ことよみ的導入方法を1つずつ解説していこうと思います！！

右クリックや長押しの禁止

PCでの右クリックやスマホでの長押しによる画像保存や文章のコピー、便利な一方でこういうときは厄介ですよね:syobon:
ことよみのサイトではこれらを防ぐために、調べた結果良さそうだなと思った以下のコードを追加しています:syobowarai:

PCでの右クリック・ドラッグ&ドロップ禁止

  <body
    oncontextmenu="return false;"
    onselectstart="return false;"
    onmousedown="return false;"
  >

上記はCSSではなく、HTMLのbodyタグに追加するコードです。
oncontextmenu="return false;"で右クリックを禁止、onselectstart="return false;"とonmousedown="return false;"でドラッグ&ドロップを禁止にでき、実際こちらを追記した後、試しに右クリックやドラッグ&ドロップを試みましたが見事にできなくなっていました:warainasi:

スマホでの長押し禁止

main {
  pointer-events: none;   /* ←リンクも押せなくなるので注意 */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
}

上記はCSSに追加するコードです。
個人的に「文章コピーも防止したいな」と思ったのでpointer-events: none;も追加していますが、こちらはCSSを効かせた要素内にあるリンクボタンなどがクリックできなくなる点に注意が必要です:syobon:
例ではmainタグに設定していますが、画像の長押しのみを禁止する場合はimgタグに設定したり、任意のクラス名を指定すれば、クラス名がある箇所のみを長押しできいようにすることが可能です:syobowarai:
以下はimgタグへの設定例です（mainの部分をimgに変更すればOK:wow-bikkuri:）

/* 画像のみ長押し禁止 */
img {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
}

robots.txtの設置

冒頭できちゅねが

robots.txtってなに？

と言ってましたが、簡単にいうとrobots.txtとは、クロールするコンテンツを制御するためのファイルです:syobowarai:
言い換えれば、収集されたくないコンテンツをクロールされないように制御できる、ということになります。

「くろーる」って？

クローラーと呼ばれるロボットがサイトを見つけたり巡回したりして、ページ内のコンテンツを収集することだ。
一般的なサイトは、クロールを実施させることで検索エンジンにサイトを表示させているわけだが、今回の場合はその逆、「クロールさせないようにする」ことが目的だ。

です:warainasi:
とはいえ、この辺りはことよみも元々詳しいわけではなかったので、今回はDoさんの記事を参考に導入しました。
生成AIが学習データを集める際にもクロールを行っているからこそ、robots.txtの設置が有効になってくるというわけですね:syobowarai:
では、ここからは早速、robots.txtの設置方法について解説していきます！

1．robots.txtを作成

まずは、メインページとなるindex.htmlやindex.phpがあるフォルダ内に、「robots.txt」を作成しましょう！

:down:

2．robots.txtの内容を編集

その後、作成したファイルを開いて中身を編集していきます。
今は何も書かれていないファイルですが、そこに今回は、前述したDoさんの記事を参考にしつつ、以下の内容を書き込みました:syobowarai:

# すべてのクローラーに対して、サイト全体のクロールを禁止
User-agent: *
Disallow: /

# 以下 https://do.gt-gt.org/save-my-work-from-ai/ を参考
User-agent: CCBot
Disallow: /

# ChatGPTクローラーをブロック
User-agent: GPTBot
Disallow: /

User-agent: ChatGPT-User
Disallow: /

# Google-Extendedクローラーをブロック
User-agent: Google-Extended
Disallow: /

User-agent:でクローラーを指定し、Disallow:で拒否したいサイトのページを指定する仕組みです。
1番上のUser-agent: *は「全てのクローラー」を意味し、Disallow: /はサイト全体を意味していますが、全てのクローラーを拒否しているからと言って、指定してないクローラーをブロックできるとは限らないため、ブロックしたいクローラーを指定して記載しておくと安心です:syobowarai:
1番上の全てのクローラーに対しての拒否は「ないよりもマシ」の精神で設定しています:warai:

クローラーって今書いてあるものだけ？

いい質問だ。結論は「山ほどある」んだな、これが。

そうなんですよね、山ほどあるので全てのクローラーを確実にブロックすることはできません。
冒頭に言った通り、このrobots.txtの設置も「ないよりはマシ」なものに過ぎないので、絶対に学習されたくないし転載もされたくない！！と言うものはネット上への掲載を控えましょう。
その点を踏まえての対策ですが、こちらのページに結構な数のクローラーがまとめられています。
ここに記載があるものは一通りDisallow: /でrobots.txtに追記しておくと、クローラー拒否の範囲は広がるかもしれません:syobowarai:※ことよみも追加しました！

:down:

3．robots.txtをサーバーにアップロード

このようにrobots.txtの中身を編集したら保存し、FTPソフトで個人サイトのサーバー内にアップロードします。
その際、ファイル名は必ず「robots.txt」にし、index.htmlやindex.phpと同じ階層にアップロードするようにしましょう:wow-bikkuri:
アップロードが完了したら

robots.txtの設置は完了です:syakin:

なお、robots.txtをアップロード後、すぐに反映されるわけではない（反映には数日かかる）ようなので、設置してすぐに効果が出るわけではない、と言うことも念頭に入れておくと良いかもしれません:warainasi:

【補足】複数サイト運営している場合のrobots.txt

サイトが複数あるときはどうするの？

いい着眼点だな。
サイトの構造次第では1つのrobots.txtを設置すれば良い場合もあれば、それぞれにrobots.txtを設置する必要がある場合もあるぞ。

robots.txtの内容を編集するとき、Disallow: /はサイト全体を指すと述べましたが、この/はドメイン部分を省略した表記です。
設置先のドメインを省略しているので、ことよみが運営するkotoyomi.comのサイトに設置した場合、/＝https://kotoyomi.com/になると言うことです。
よって、複数サイトをひとつのドメインで運営している場合は1つのみの設置でOK、サイトごとに複数のドメインで運営している場合はドメインごとにrobots.txtを設置する必要があります。

ことよみの場合、このブログや創作サイトなど複数の個人サイトを持っていますが、ここで構造を書き出してみると以下のようになっています:syobowarai:

kotoyomi.com
kotoyomi.com/kotolog　　　　※このサイト
kotoyomi.com/hanahoozuki

と、上記のように全て同じドメインで構成しているので、robots.txtはひとつのみで良い、と言うことになります:warainasi:
これがもし、以下のようにサブドメインを含む異なるドメインで運営している場合は、それぞれのサイトにrobots.txtを設置する必要があります。

【必要】example.com
【不要】example.com/sample
　※example.comに設置のrobots.txtでOK
【必要】example.blog.com
　※サブドメインでもドメインが異なるためrobots.txtが必要

自分のサイト構成に合わせて、robots.txtを設置していきましょう:wow:
以上、robots.txtに関する補足でした:pekori:

ウォーターマークの追加

これまでHTMLやCSSへのコードの追加やrobots.txtの設置など、サイトファイルを編集する形での対策を導入しましたが、最後は画像に直接ウォーターマークを追加する対策も実施しました:kiriri:
ウォーターマークと言ってもいろいろな種類がありますが、今回はWordPressにアップロードする画像へ簡単にウォーターマークを追加できるプラグイン「Easy Watermark」を導入してみました:syobowarai:

例えば上記の画像の場合、斜線の透かしと右下にテキストが入っていますが、これはWordPressにアップロードすることで自動で追加される透かしです。
画像透かしは自分で透かし用の画像を用意する必要がありますが、「Easy Watermark」を使うことであらかじめ透かしの加工をする手間がなく、ボタンひとつで透かしを設定、または削除することができるのが便利でした:kiriri:
「Easy Watermark」の設定については、書いてみたらとても長くなってしまったので別途記事にまとめます:warainasi:

プラグイン活用のほか、自作で透かし用の画像を用意したり、サインを活用するようにしたり……
以下の画像は創作サイトに使用しているイラストですが、右上や左下にある透かしや右下のサインを入れてみています:syobowarai:

特に右上のマークはめちゃくちゃ拘ったものです！:syakin:
マーク単品での画像は掲載しませんが、QRコードも入れつつスタンプのようにもお札のようにも見える感じが個人的ポイントだと思ってます:warai:

ウォーターマークやサインなどはあくまでも「自分のものである」という意思表示にしかなりませんが、それでもちゃんと権利を主張することは大切だと思うので！！:syakin:
画像いっぱいに入れている透かしは一旦仮で使用してますが、もうちょっと変えたいなと思う部分があるので、これについてもゆくゆくちゃんと用意したいなと思っています:syobowarai:

まとめ

以上、ざっくりとですが、ことよみがやってみた対策についてここにまとめてみました:syobowarai:
最初にお伝えした通り、いずれの事柄も「ないよりはマシ」の精神で設定しているものであり、生成AI学習を必ず防げるものではないわけですが、自分の身は自分で守るのと同じように、自分の作品は自分で守らないといけないので、対策を考えること自体がとても大切だなと思います:kiriri:
今後追加した対策があれば、この記事に追記する形で記録を残そうかなと思っています:warainasi:

ここまでお読みいただきありがとうございました！:pekori:

送信中です

×

※コメントは最大500文字、5回まで送信できます

送信中です送信しました！
お問い合わせは
＼こちらから／
◆ Contact form ◆
＼お問い合わせはこちらから／
 ◆ Contact form ◆