バックエンドの

進捗ダメ
でした

きりモザとは

きりばんモザイク
略してきりモザ

主な機能

サイトのアクセス数のカウントをする
サイトにアクセスするたびにモザイクアートが出来上がる
モザイクアートの総ブロック数 = キリ番になると完成する
匿名でコメントが残せる
コメントが見れる掲示板がある

開発技術

フロントエンド

React
TypeScript

バックエンド

FastAPI
Python
Twitter API v2

インフラ

Web App for Containers
Container Registry
Static Web Apps

システム構成図

モザイクアートについて

ここを参考にしました

生成するまでの大まかな手順

モザイクアートの元画像を 100 x 100 に分割
分割したブロックをランダムで1つ選択
ブロック画像と置き換える画像の類似度を計算する
類似度の色差が一番小さいものを実際に置き換える画像とする
2 ~ 4 を 10000 回繰り返すとモザイクアートが出来がる

類似度について

比べる2つ画像のひとつひとつの画素に対して、L*a*b* 色空間の色差を求める
すべての色差の合計を計算する

という方法で類似度を計算しています。

数式で表すと以下のようになります。

N を画像の縦の長さ、M を横の長さ、L, L' を L* a* b* 空間の L* 成分、a, a' を a* 成分、b, b' を b* 成分とします。

サンプル

バックエンドの進捗ダメだった言い訳

Azure のデプロイに 1 日目の 2 / 3 ぐらいを費やした
Docker に苦しまされた
Python わからん
バックエンドができる人がいなくて勉強しながら開発をしていた

　　　　　　　　*'``・* 。　　　　　　　　|　　　　 `*。　　　　　　,｡∩　　　　　* 　　　もうどうにでもな～れ　　　　　　+　(´･ω･`)　*｡+ﾟ　　　　　　`*｡ヽ、　つ *ﾟ* 　　　　　　　`・+｡*・' ﾟ⊃ +ﾟ　　　　　　　☆　　 ∪~ ｡*ﾟ　　　　　　　`・+｡*・ﾟ

きりモザ

サイトにアクセスする度にモザイクアートが出来上がる（予定だった）

推しアイデア

作った背景

推し技術

プロジェクト詳細