2018/12/15 追記:
反転できないパターンがあったため、修正版を作りました。
タイトルのものを試作してみました。
探せば既にあるかと思いますが、たまにはJavaScriptにも触ってみようとかブックマークレットを試してみようという勢いでもあります。
感想サイトや攻略サイト等では、重要なネタバレになる部分の文字色が背景色と同じ色にして、目に入らないように隠されている場面に遭遇することが少なくありません。PCを使っている場合は、マウスで該当箇所をドラッグするなりCtrl+Aして文字を反転すれば隠された文字を読むことができるという仕組みです。
ただ、AndroidやiPhoneといった携帯端末を使っている場合は、基本的に文字を選択することはできても反転表示させることはできません。該当箇所をコピーしてメモ帳に張り付けるような手段をとる必要があります。
ネタバレ箇所が多い場合に毎回コピーして貼り付けを繰り返すのは流石に面倒なので、ブックマークレットを試してみたらどうなのと雑に試作したものがこちらになります。
次のボタンを押すとたぶんネタバレ部分が見えます。
ネタバレここから→犯人は野洲に居る←ネタバレここまで
…うまく機能すれば、ネタバレ部分が黒字の黄色文字になるとともに他の余計な部分の色も変わったかと思います。ボタンを押しても元に戻すことはできないので、戻す場合はページをリロードしてください。
やっていることごく単純にspan要素とfont要素の色をまとめて変えているだけです。大体のネタバレ回避サイトはこの二つで十分なはず？流石にdiv要素まで含めると他の部分への被害が大きいので無しで。
雑な作りですがこれでもそれなりに使えそうではあります。
これをブックマークレットとして他のサイトでも使うためには、まず新しいブックマークを作成して、URLの部分に以下のテキストボックスの中身をコピーし、適当な名前を付けて保存します。
次に文字を反転したいサイトを開き、保存したブックマークを開けばスクリプトが走るかと思います。
テキストをコピーしづらいかも知れませんが、そこはなんとかこううまい具合にお願いします。
そしてこれを更新している時点ではまだスマートフォンでの実行をテストしていません。動かなかったら動かなかったで久しぶりにJavaScriptを触る経験ができたということで。
テキストボックスのcssをいじっていないので書体がサンセリフで違和感がありますね。思い出した時にこっそり修正します。しました
一往iOS10で動作するらしいことを確認しました。
以下PC用ブラウザで動作してiOSのsafariで動作しなかった部分があったのでメモ。
- iOSではdocument.getElementsByTagNameは使えないようだけれどもdocument.querySelectorAllは使える
- iOSではテキストボックスのonfocusイベントの動きが怪しいのでとりあえずonclick
- iOSではテキストボックスの選択にthis.selectを使えないようなのでthis.setSelectionRangeを使う