初めに
※先に言っておきますがこのウェブアプリは公開しておりません。詳細は後半に
reCAPTCHAの画像を選択する形式のやつってたびたびネタ画像が投稿されるじゃないですか。ジェネレーターみたいなのはあったのですが、それを共有できて実際に遊べる奴があれば面白いんじゃないかと思ったのが今回このウェブアプリを作ったきっかけです。意外といい感じにできたんじゃないんでしょうか,,,？
完成品
reCAPTCHA制作画面。パネルの数は2枚、4枚、9枚から選択できる。最大で3問作れる。
共有URLに飛ぶと遊べる
全部正解するとメッセージが見られる
主な使用技術
- Flask
- Vue.js
- MySQL
- Cloudinary
ほかにはBootstrapとかcropper.jsとか使ってたりもします。
制作について
そんな大きなアプリじゃないので普通にFlaskとVueで基本的なところ組んでMySQlに保存するって感じでしたが、画像を保存するためにCloudinaryを初めてちゃんと触りました。すごく手軽に使えるのに加えて無料プランもストレージが25Gも用意されていてこんなあっちゃっていいの？！って思います。Cloudinary、個人開発ならめっちゃおすすめです。
画像の保存
前述のとおりCloudinaryを使って画像の保存をしています。保存するまでの話ですが、まずユーザーが画像を挿入するときcropper.jsを使って画像をトリミングできるようにしています。これ結構便利だと思うんですよね。
また、Cloudinaryに保存する前で画像のサイズをできるだけ小さくするためpythonライブラリのPillowで300*300に画像をカットしたのちwebp形式で保存しています。はい、そうですね。画質はすんごい落ちます。今回のアプリで画質の高い低いはそんなに関係ないっていうのと、本家reCAPTCHAの画像の画質なんていつも粗いから画質なんてちょっと落ちても大丈夫やろっ！ていうスタンスです。
しかし今回のアプリの場合デプロイしなかったのでそんなにサイズ落とす意味もなかったような気がしますね,,,。
共有機能
画像や正解、タイトルなどを入力した後に共有ボタンを押すと共有URLが生成されるようになっていて、それに飛ぶとそのreCAPTCHAで遊べるようになっています。
URLは「/play?t=ランダムな20文字の文字列」って感じです。全部正解すると制作者のメッセージなどが見られますが、逆に何回か失敗すると「あなたはロボットと判断されました」というメッセージが出てくるようになっています。画像以外の情報は全部MySQLに入れています。
頑張り点
本家のreCAPTCHAになるべく近づけるようなアニメーションとUIを目指しました。
色々なアイコンを提供してくれるicooon mono様に感謝です,,,!!
意外とcropper.jsらへんのトリミングした後の画像をやり取りが難しかったですね。トリミングしないでそのまま送信するなら簡単なんですがトリミングしたとなると、cropper.jsのキャンパスから画像をbase64でエンコードされたものが渡されるのでpython側でデコードしたのち更にpillowでの処理とcoudinaryへの保存をするためバイトストリームに変換しないといけないので手間がかかりました。画像らへんは慣れていなかったので手間取りましたね,,,。
デプロイについて
どうせならとpythonanywhereでデプロイしようとしたんですが無料プランだと使えるAPIに制限があるらしく、cloudinaryが対象外だったため諦めました。renderはデータベースが一定期間後削除されてしまうので今回は見送りました。よってデプロイできていません！これら以外によい選択肢があれば教えてください(泣)。
最後に
結構思い付きの勢いで作り上げたものなんですが意外と凝ってしまって1週間半ほどかかっています(毎日一日中やってたわけではありませんが,,,。)。しかし想像以上に満足のいくものに仕上がってうれしいものがあります。特に実際に遊べるページのところでは本家に結構近い動きとUIになっているのではないでしょうか？また、本家にはない2枚パネルのreCAPTCHAが個人的に気に入っています。最大で３問用意できるので２問目までを4枚または9枚パネルで作っておいて、あと1問っ！てなった最後の問題で究極の2枚パネルってなんか熱くなりません,,,?w
私事ですが最近アイデアがストックしているのでこういうネタアプリでもどんどん作っていくかもしれません。それに対して、最近Vueを薄ーくしか理解していない気がして講座を購入したのでそっちのほうの勉強もやっていかなきゃでやりたいことが多すぎますね,,,w
ではまた次の機会に！