画像アップローダ

ようやく画像をアップできるようになった。
いろんな部分でつまづいたけど、ChatGPTに相談したら割と答えてくれて助かった。ぼっちプログラマの強い味方ChatGPT。せっかくなので、特につまづいたところを残しておこう。

画像のwebpエンコード

画像をアップするとリサイズ、圧縮、webp化の処理をするようにした。
Goではwebpのデコードはできるけど、エンコードができないため、pixiv/go-libwebp/webpを使用。
このライブラリはlibwebpが必要なんだけど、2023年10月現在では必要バージョンのlibwebp（1.3以上）がaptでインストールできないため、手動で入れてやる必要がある。
ちなみにhomebrewだと1.3が入るので、しばらくエラーの原因に悩んだ。
apt以外でのインストールをしたことがなかったので正しいかわからないが、Dockerfileにはこんな感じで書いている。

RUN wget -O /tmp/libwebp.tar.gz https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.3.2-linux-x86-64.tar.gz \
  && tar -xzvf /tmp/libwebp.tar.gz -C /tmp/ \
  && cp -r /tmp/libwebp-1.3.2-linux-x86-64/lib/* /usr/local/lib/ \
  && cp -r /tmp/libwebp-1.3.2-linux-x86-64/include/* /usr/local/include/ \
  && rm -rf /tmp/libwebp.tar.gz /tmp/libwebp-1.3.2-linux-x86-64

そのうちaptで1.3以降が落とせるようになるだろうから、このメモもすぐに必要なくなるだろうけども。

Base64のやり取り

API経由でBase64でエンコードした画像をアップする仕組みにしているのだけど、フロント側でエンコードした画像がサーバー側で読み込めなかった。
jsで画像をエンコードすると先頭にdata:image/png;base64, のようなMIMEタイプがつくため、そのままencoding/base64のbase64.StdEncoding.DecodeStringで読み込んでもエラーが出る。
フロント側で処理するならこんな感じで対応する。

const contents = [base64のデータ]
const offset = contents.indexOf(", ") + 1;
contents.slice(offset)

ひとまず記事を書く準備はできたかな？

画像削除とか作ってないけど、とりあえず記事を書くのに必要な機能は揃ったと思う。
見た目がひどい状態だから、次からは少しフロント側を整えていくかな。

Qroon BLog