Canvaで色が反転？

はじめに

荒井 崇志です。
コロナ禍ですっかり定着した感のある「オンライン●●」。（●●には、講座とかセミナーとかミーティングが入る）
僕自身、初めは抵抗があったけれど、使い出すとすごく便利。手軽にできるというのもあるけれど、移動時間がなくなったというのはデカいですよ。

実際僕もオンライン講座を開催しているんだけれど、今回ちょっとしたトラブルに見舞われたので共有しておこうと思います。
というのは、これだ！という解決策がピンポイントで探せなかったから。まぁトラブルの内容が、マニアックすぎたというのはあるかもしれないけれど・・・。

トラブルの内容

どういうトラブルだったかというと、、、
Canvaのプレゼンタービューで、背景の色が反転してしまう事象です。

僕のオンライン講座で使う資料はCanvaで作っていて、下地は白色にしていました。「していた」というより、デフォルトの状態なので何もいじっていないです。

オンライン講座の参加者に画面を共有する際、プレゼンタービューという機能を使うんだけれど、いざやってみると資料の下地の色が白→黒に反転してしまうという。。。
実際どうなるかというと、文字とか矢印は黒色になっているので、黒に黒が重なってほとんど見えない状態になってしまったんです。目をこらしたら、うっすら見えるかなというくらい。これは困りますよね。

Canvaってなに？

念のため補足しておくと、Canvaというのはデザイン作成ツールのこと。Webブラウザ上で動かせて、デザインのテンプレートが豊富にあるので便利なツールです。

発祥はオーストラリア。2012年に創業して、日本では2017年からサービス展開が始まっています。
チラシやハガキなどのデザインだけかと思いきや、プレゼンテーションのテンプレートまで用意されていて、デザイナー顔負けの内容です。

今までは「プレゼン資料」といえば、PowerPoint（Microsoft社）もしくはKeynote（Apple社）が一般的だったけれど、そこにCanvaも台頭してきたという具合です。これからもっと増えてくると思いますね、なんたってデザインがイケてるもの。

今回起きた問題

話を元に戻しますね。今回起きた問題は、Canvaのプレゼンタービューを使おうとすると、資料の背景の色が白→黒へ反転してしまうという事象でした。
一発で解決しそうな気がする（実際そうだった）けれど、ググってもでてこない・・・。サービス開始からまだ数年しか経ってないがゆえの結果ですね。
問題を洗い出す

こうなると自力でやってみるしかないわけですが、まずどこに問題があるのかなと。考えられるのは、下記の3つでした。

（1）Canva側の問題
よくあるのはサーバー障がいなど、何らかの不具合が起きてちゃんと表示されないケース。

（2）ディスプレイの問題
画面を映すモニターが壊れちゃってるケース。これだとちゃんと表示されないのはあたりまえ。

（3）Webブラウザの問題
CanvaはWebブラウザ上で動かすので、ここに問題があっても正しく表示されない。
検証してみる

まずは（1）。最近ではよくある話なので、真っ先に疑いましたよ。「俺のせいじゃないよね？」ってずっと思ってました。
でも、公式ホームページでもTwitterなどのSNSでも、そんなニュースはどこにも出ていない。何度かログインし直してやってみても、他はまったく問題なし。そうなると（1）は除外ですね。

次に（2）ですが、これは考えにくいです。ディスプレイに何かがぶつかって破損したとかならともかく、いきなり色がちゃんと表示されなくなるというのは考えづらいですよ。
実際、他の画面はちゃんと映っていますからね。

そうなると、怪しいのは（3）のWebブラウザです。
僕は常時Google Chromeを使っているわけですが、試しにMicrosoft Edgeでやってみました。すると・・・ちゃんと映る！となると、これはもうChromeの何かが原因ですね。
問題を深掘りする

Canvaで使用しているWebブラウザ（Google Chrome）に問題があるのはわかりました。で、どうするか・・・？さらに検証をすすめます。
（その日の講座はEdgeを使ってしのぎました）

いろいろと調べた結果、下記の3つが浮かび上がりました。
（1）ブラウザのバージョン
最新バージョンでないと不具合が起きる場合がある。
（2）ブラウザのJavascriptの設定
JavascriptがオフになっているとCanvaが使えない。
（3）ブラウザの拡張機能が干渉
Chromeの拡張機能（カスタマイズ機能）のどれかが、Canvaと干渉を起こしている。

（1）については最新バージョンだったので問題なし。（2）もオンになっていたので大丈夫だし、そもそもCanva自体は問題なく使えていて、プレゼンタービューだけがおかしい。となると、疑わしいのは（3）のChromeの拡張機能です。

ふたたび検証

どうやらChromeの拡張機能に原因がありそうなので、そこを探ってみることに・・・ひさびさにのぞいてみたけど、気づかぬ間にあれやこれや入っていましたね～。
拡張機能の検証はWordPressのプラグイン検証と同じで、ON/OFFをしながらひとつひとつチェックしていきます。
機械的にやっても良いんだけれど、アタリは付けておきたいですよね。今回はプレゼンタービューの画面が黒に反転する、黒に変わる・・・あっ！ここで気づいたのが、拡張機能の「Dark Reader」でした。

すぐさまDark Readerをオフにして、Canvaのプレゼンタービューを立ち上げてみたところ、、、ちゃんと映りました！
なるほどなぁと思いながらも、いろんなサイトを行ったり来たりして時間がかかりましたね。

さらなる試練

でも、、、
不思議なのは、Dark Readerの除外サイトの中にCanvaを入れていたんですよね。（忘れていたけれど、チェックしていて思い出しました）
除外サイトに指定しておくと、そのサイトではDark Readerの機能がオフになるんですよ。それなのに・・・です。
解せなかったのは、Canva自体ではDark Readerの機能がちゃんとオフになるのに、プレゼンタービューではオンになってしまうということ。今回の事象の根本はこれですね。

使ってみるとわかるんだけれど、Canvaのプレゼンタービューは参加者用のブラウザが別で立ち上がる仕組みなんですよね。
立ち上がった方のブラウザの上部には「about:blank」と表示されています（コンテンツが存在しない空白のページという意味）。
エラーメッセージのように見えますが、これはこれでURLなんですよね、実は。

「about:blank」がURLなんだと認識できれば、後はカンタン。Dark Readerの除外サイトに「about:blank」を入れてやれば良い。入れてやってみると、正常に動くようになりました。めでたしめでたし。

結果

Canvaのプレゼンタービューで色が反転してしまう事象は、広く言えばブラウザの設定の問題でした。
ポイントは、プレゼンタービューでは参加者用の別ブラウザが立ち上がるということ、「about:blank」もURLということの2点ですね。
ひさしぶりに手強い相手でした。

そもそもDark Readerを入れていなければ起こらなかった問題ではあるんだけれど、ページが見やすいからDark Readerは手放せませんもの。

おわりに

ChromeもCanvaもDark Readerも、すごく便利なツール。アップデートされて、どんどん良くなる。反面、思わぬところで今回のような事象が起こったりするわけです。肝に命じておきましょう。