みんなの画像変換
どんなツール?
ゲーム素材用の画像変換ツールです。
ネットの拾い物画像をゲームに使おうと思ったときに変換が必要になることが多く、そのどれも使いづらかったので、シンプルで反応がよいツールを作りました。
DBに変換元画像をアップロードしない作りなので、変換が比較的早いです。
・PSDやSVGなどの形式の画像をゲームで使用されるPNGに変換出来ます
・画像サイの変換も可能です。変換時に圧縮効率が良くなる4の倍数の解像度チェックもしてくれます。
開発に使用している技術
【フロントエンド】
・HTML/Javascript/CSS
・Bootstrap(CSSライブラリ、カンタンに見た目がなんとなく良くなる)
・配信サーバー:ConoHaWing
【バックエンド】
・Flask/Python
特にPillowという画像変換用ライブラリを使っています
・Google Cloud Run
【その他】
・Docker
デザインは全部自前。
CI/CDも実装、GitHubにプッシュしたらデプロイまで自動化出来るように作っています。
あとがき
始めてのWebアプリ制作ということもあり、講座を受けつつ作ったので、制作期間は30日。
詳しくはこちらにまとめました。
Steam レビュー Analytics
どんなツール?
Steamのレビューをよりグラフィカルに分析出来るツールです。
Steamでゲームをリリースして、超絶大ヒット作品を世に出したいので、Steamのゲーム分析をするために作りました。
開発に使用している技術
【フロントエンド】
・HTML/CSS
・React + TypeScript
・Tailwind CSS(CSSライブラリ、カンタンに見た目がなんとなく良くなる)
・配信サーバー:ConoHaWing
【バックエンド】
・FastAPI/Python
・Google Cloud Run
【その他】
・SteamWebAPI
・Docker
・Replit
・RooCline
デザインは全部自前。
GitHubにプッシュしたらデプロイまで自動化出来るように作っています。
あとがき
制作期間は10日。
一番頑張ったのはレスポンシブ対応。工数を掛けずに、スマホでもちゃんと崩れない見た目になるよう色々と工夫しました。
次点がReact + TypeScript。Reactを使えればWebもネイティブアプリも作れるし、メインで使っているUnityと考え方が近いこともあり、Reactの学習がてら制作。
コンポーネント思考や、ReactiveProgrammingな考え方がUnityと近しくて好きです。(Unityが好きとは言っていない)
流行りのViveコーディングで雰囲気開発をしたく、Replitで雛形を作り、途中までいい感じに出来たらGitHubにプッシュ。プルして、VSCodeのClineで修正するというワークフローで作っみた。
ただ、正直Clineは開発後半から全然機能しなかった。
ClineRulesを使って開発の前提条件は伝えているものの、認識を間違えたまま突っ走ることが多くあった。AutoApproveにしている自分が悪いのだが、なんどもチェックポイントからやり直しさせ、自分で書く羽目に。
もっと良いワークフローは探求したいところ。Clineはゼロからイチを作るのは強いけど、8を10にするのは苦手かなぁ。
ただ、ここはゼロをイチにするときのプロンプトの与え方が良くなかっただけかもしれない。
