打線ったー公開

うっかりIntelliJライセンスを自動更新してしまい、アプリのひとつも作らないと勿体ないので
SNS共有のための「○○で打線組んだ」画像やテキストを作成するWebアプリ「打線ったー」を公開しました。

SNS共有のための「○○で打線組んでみた」の画像やテキストを作成するWebアプリです。打順並び替え、ランダム守備位置などの支援機能あり。 ...

2022-06-22 00:22

似たような打線メーカー的な既存アプリは幾つかあるようなのですが、なんかどれも手軽に使えない感じだったのと
守備位置の自動指定や打順並び替え機能が欲しかったので作成。
何かあったらTwitterまでお願いいたします。

覚えているうちにメモ。
開発ハマリポイントとしては、canvas要素をjqueryで指定すると何故かtoBlobメソッドが
Uncaught TypeError: canvas.toBlob is not a function
みたいなエラーを吐いて動かなかった点。

// OK
const canvas = document.getElementById("output_canvas");
canvas.toBlob(function(blob) {
    // progress
}, 'image/png');

// NG
const canvas = $("#output_canvas");
canvas.toBlob(function(blob) { // ERROR!
    // progress
}, 'image/png');

理由はよくわかりません…。型の問題？
でもほかのcanvasメソッドは叩けるんですよね…。

あ。あと、PCだとcanvasの右クリックで画像保存できるけど、スマホ・タブレットだとcanvas要素のロングタップではダメで
BLOBを画像URLで表示したうえでロングタップする必要がありそうでした。Android, iPhone, iPadのchromeで確認。
画像をクリップボードにコピーする navigator.clipboard.write(blob) みたいな処理もスマホでは何故か動かなかった…。

しかも画像URL指定では直接Twitterに投稿できないようなので何かと面倒