はじめに
勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。
個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。
↓ これまでの内容 ↓
【Day0】アプリが完成するまで毎日投稿
【Day1】開発環境を考える
【Day2】開発環境を構築する、、、はずでした
【Day3】まずはフロントだけ開発環境を構築する
【Day4】バックエンドの開発環境を整えつつ、マルチコンテナ対応のDevcontainerにする
【Day5】お試し実装！ファイルをアップロードしてバックエンドで処理する
【Day6】Docker Desktopが起動しなくなり泣きながら原因調査する
前回のあらすじ
ようやく開発環境が構築できて、いよいよ機能実装だ！！！というところでDocker Desktopがうんともすんとも言わなくなってしまいました。
色々調査した結果、Docker Desktopを工場出荷状態にすることで何とか復旧できました。
コンテナは作成＆破棄してなんぼですからね、、、他の開発データに影響がなくてよかった。
今回やったこと
Chat GPT大先生にご指導ご鞭撻していただきながら、いったんフロントからアップロードした画像にフレームとExif情報を付与することができました！
インスタに投稿してみる
生成した画像をインスタに投稿してみたら、サムネイルも投稿も良い感じかも！
できていないこと
縦画像の対応
今のロジックだと縦画像も横向きにしてしまうんですよね。
縦画像も良い感じにしたいですね。
余白の調整
今は適当に余白を作ってしまいましたが、テキストと合わせてもうちょっと最適なレイアウトを見つけたいです。
あとは、余白の種類も白背景じゃなくて元画像のぼかしとかにしてもいいかも！
この辺りは全体が一通り開発出来たらオプションを作っていきたいですね。
気づいたこと
自分なりに開発環境は工夫してみたんですが、フロントとバックの両方を同時に開発するときは両方をコンテナ化するんじゃなくて、1つのコンテナに両方の言語の開発環境を整えた方が楽かもなぁ～と思ったり。
フロントのソースもいじりつつ、バックのソースもいじりたいときにちょっと不便だなと感じました
デプロイするときはそれぞれのコンテナをdocker composeで同時に起動して、開発するときは片方のコンテナに両方の開発環境を入れる、もしくは開発用のコンテナを別に作ってそっちで両方の言語の開発環境を入れる、とかがいいのかな。
開発用とデプロイ用でどっちでも使いやすいコンテナを作るのは難しいなぁ。
おわりに
実装フェーズになったらChat GPTの真価が発揮できますね。
逆に、頼りすぎてQiitaで書くことが全然ないぞ、、、泣
正直ロジックを全部理解して実装できてないのは否めないので、後ほどリファクタリングをしながらロジックを理解・整理していきます。
Chat GPTに頼りっきりですが、それでも実際に手を動かしてみると新しい気づきや学びが多いですね。
これからも手を動かすスピードは上げていきます！！
明日はフロント側をいじってみようかな。