FF14雑記：おはララジェネレータのIEおよびEdge対応！但し注意点と言い訳と今後の予定

まずは要点だけ。以前、FF14のスクリーンショットをPCでおはララロゴを簡単に入れれるようにおはララジェネレータを作成していました。ただ、このジェネレータはChrome、Safari、Firefoxなどの対応のみでした。そこでバージョンアップ。今回、Edge、InternetExproler対応しました！

gelehrtecrest.github.io

ただし、ちょっと機能制限しています。本記事ではその話をします。

今までのユーザの方へのお話

基本的に今まで通り使用できます。特に機能制限はありません。ただし、UIが少し変更され、ダウンロードボタンが追加されました。

ダウンロードボタン

このボタンは説明文通りですが、「ロゴを自分のPCからアップロードした場合」にのみ使用可能です。「URLでロゴを指定」(デフォルト状態) ではボタンは使用できません。 (警告が出ます) 何故このような仕様にしたかについては後述します。ただちょっと小難しい話になります。

右クリックによるダウンロード

いつもの通りできます。

IE/Edgeユーザの方へのお話

機能制限の話になりますが、ロゴを自分のPCからアップロードする必要があります。 UI上でも、URLでロゴ画像を指定する部分を消してあります。紛らわしいので。

ダウンロードボタン

IE/Edgeユーザの場合は、ダウンロードボタンによるダウンロードのみ対応します。

なぜこのような仕様にしたのか

プログラムに関することなので使用する分には関係ない話になるのですが、自分用のメモのため。

ダウンロードボタンを設置した理由

IEやEdgeでは画像加工して表示したCanvasを右クリックダウンロードすることができません。そのためダウンロードボタンを設置する必要があります。

なぜURLによるロゴ指定の時はダウンロードボタンが使えないのか

これはどのブラウザでも同じ話なのですが、このアプリが公開されている場所のドメインとロゴ画像の場所のドメインが異なるとブラウザがセキュリティ違反と判断します。これはクロスドメインによる問題です(CORS制限)。

なぜIE/Edgeは機能制限するのか

IE/Edgeではそもそも外部URLのロゴを使うことができず、一度使おうと初期設定に書きこんでおくと(drawImageなどを内部実行してしまうと)、そのアプリはもう動かなくなります。Security Errorになります。理由は謎です！なので私は、ユーザの使用しているブラウザを判定してIEやEdgeの時はURLによる画像ロゴ指定ができないようにしました。判定はこちらのサイトを参考にしました。

qiita.com

今後の予定

まだ、モバイルには対応していないという問題があります。ただこの問題は、合成などのボタンが押せない問題だけなので、比較的簡単に解決できるんじゃないかなぁ・・・・って想像。時間があったらモバイル対応もやりたいと思います。

今回はここまで。それではー