見出し画像

オンラインメセカサービスを構築したかった(1) [fabric.js+GAS]

7_kosho

はじめに

技術的な内容がけっこう含まれています。個人的な忘備録という位置づけ。

コロナ下で劇場も握手会場も開かれないから、メセカを集めるのが今までより難しくなったなあと思ったのがきっかけ。
代筆フォームも設けているところは多いものの、何十枚、何百枚も書くのは結構大変。スマホを持っている方も多いので、Web上で自分の筆跡で記入できる仕組みがあると面白いなあと思って空き時間に作り始めてみました。

お絵描き

HP上でお絵描きできる機能を結構簡単に作ることができます。

HTML5の<canvas>をJavaScriptというプログラミング言語で自由自在に操ることで、お絵描きできるようになります。
詳細はこちらとか見ていただくのがいいかと思います。

今回は、もっと簡単に実装するための道具としてfabric.jsなるライブラリを使います。以下のコードをコピペするだけでfabric.jsを使った簡単なお絵描き画面ができちゃう。文明の利器ってすごい。

<!DOCTYPE html>
<html>
 <head>
   <title>test</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.js"></script>
 </head>
 <body>
     <canvas id="canvas" style="border:solid 3px #000 " width="1075" height="600"></canvas>
     <script>
       var canvas = new fabric.Canvas('canvas');
       canvas.isDrawingMode = true;
       canvas.freeDrawingBrush.color = "black";
       canvas.freeDrawingBrush.width = 5;
     </script>
 </body>
</html>

※このコードをご自身のパソコンのメモ帳にコピペして、拡張子をhtmlにして保存し、保存したファイルをクリックしてみてください。細かな手順はここ。

とりあえず、あとは追加で、背景にメセカイラストを置いて、「戻る」ボタンおいて誤操作を改められるようにして、最後はDLなりどこかに保存できるようにすればいいかな・・といった感じの機能を付けたしておこうと思っている。

サーバ立てたくない

このコードをどこに置くかという問題。

Webアプリケーションを作る際は、サーバを立てることが多い。さくらのレンタルサーバとか、最近某議員の発言で話題になったクラウドで準備をすることが多いのだが、そもそもインフラ知識が薄いので避けたい。あとシンプルにお金がかかるのでやりたくない。

そのため、サーバレスで、無料で実装する方法をいろいろ調べてみた。
良さそうなものがあった。Google Apps Script (GAS)を使う方法だ。

細かな話になるが、JavaScriptとCSSを外部ファイル化する際はこちらを参考にした。


ダウンロード機能がエラーを吐く・・

そんなこんなで、ちょこちょこ実装していた。
背後にメセカのイラストを置く機能はこちら、

「戻る」機能はこちらを参考にした。

JavaScriptを書いた経験がほぼ０なので苦戦はしているが、なんとかここまでは実装できた。

１点、かなり躓いてしまった。最後の画像DL機能である。
どのサイトも簡単そうに実装しているが、どうもうまく作動しない。ログを見るとなんかこんな出てる。

DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

調べるとこちらにたどり着いた。

曰く、外部から取得した画像をもとにつくったcanvasはセキュリティ上保存させませんよ、ということらしい。
メセカイラストをGoogle Driveからデータ引っ張ってね、という設定を入れていたのだが、それが良くなかったらしい。

たしかに外部サイトから取得した画像がウィルス入りだった場合に、DLを行うことでPCをウイルスに感染させてしまうため、その観点から制限をかけているということなのだと思う。

ではどう対策しようか・・
同サイトによれば、以下記載されていた。

>最初に必要なものは、画像をホスティングし、画像ファイルに対するオリジン間のアクセスを許可するために、 Access-Control-Allow-Origin ヘッダーが構成されたサーバーが必要です。

悲報、今のサーバレス環境では画像DL機能を使う手段がなさそう・・

結論

DL機能は必須なので、１から環境構築しなおしです。がんばります。
一応こちらがサーバレスでできる限りやってみたバージョンです。遊んでみてね！

画像1






この記事が気に入ったらサポートをしてみませんか？