タスカールとかそういうネーミング、好きですよ
「TileLoop」というWebツールをつくった
たまにはWebなRuたん。
ということで、ちょっとしたWebツール「TileLoop」をつくりました。
上のページから使うことができます。
無茶してるので、たぶんChromeくらいしか動かないかもしれない。
1mmも説明がないストロングなページですが、
画像をいくつか入れたらタイルみたいに並んだ画像が出てくるツールです。
↑ こんな画像がつくれます。
どういうわけか？
プロフィール画像（の背景）とかで、よくゲームのスクショとかを並べた感じの画像をつくることがあります。
↑こういうやつ。
これ、最初のうちは作るたびに毎回手で並べたりしていたのですが、
明らかに面倒くさすぎるので、なんかいいツールとかサービスとかないかな～と探していました。
コラージュ系のサービスはいっぱいあるのですが、
僕がやりたいのは画像を大量にポイっとしたらポン！って出てくる程度のやつでいいのに
複雑な機能がいっぱいありすぎてなかなか使いづらい…！
どうせ加工はPhotoshopでやったほうが早いって。
最終的にはHTMLで並べてスクショ取ればいいのでは？？？とかやっていたのですが、
それはそれで毎回やるのも面倒なので、今回ツール化しました！
なかみのこと
最初、自力で canvas に並べようかなと思っていたのですが、
ドロップシャドウとか考えたくないし、うーん……
そんな中、ちょっと別件でSVGをつかってグリグリ動くものを作る機会があったので、
SVGでつくって最後に画像保存するときだけ canvas に転写すればいいな！というアプローチを採用しました。
引っ掛かりポイントとしては、SVGの中で <Image> タグを使っていたのですが、
URL.createObjectURL とかで作った blob URL を入れると canvas に転写するときに怒られてしまうので、
ぜんぶ data URL にしています。サイズがクソでかい！
なので4Kとかの画像を入れるとブラウザがやばいことになりますが、
まぁショボショボツールだしいいよね……
ところで、「TileLoop」という名前をテキトーにつけていたのですが、
この記事を書くタイミングで「あれ、別にループはしてなくない？」ということに気づきました。
まぁいっか！！！！！！！！！！！！！
