年末の大型更新でした！（これまた表面上はわからない） これまではサイトのサムネイルのみWebpにしてましたが、今回の更新でサイト上の画像はほぼ全部Webpにしちゃいました。 過去の記事でも触れてましたが、Webpはpngと同等のクオリティでありながら画像サイズがとても軽いWeb特化の画像ファイル形式なのです。 いずれそうしたい…って思ってたのと、ついでにわかりづらくなっててバグの温床になってたとこの修正も兼ねてどうにか頑張って作り直してました！
年内まではサイトの更新はしますが年始からはサイトの更新は控えめになるかもです！ というのも、ぼくはWebクリエイターを仕事にしないと決めたからです。 これまではWebのお仕事を少しでもできるようにするという気持ちがあり、それでNextJSを導入したり、Webの新しいことを色々取り入れたりしてましたが、ぼく自身が本当にやりたいことってそういうことじゃない…って感じてた節がありました。
今後どうしたいかについてはX(旧Twitter)では既に宣言していますが、このブログでは年始の記事にて報告すると思います。 年始の更新をお楽しみに！🐏
今回も表面上ではわからないことになります！
かつてCloudflare Pagesというサーバーレス専用のホスティングサービスを活用しててここ一年ぐらいは自宅のラズパイでホスティングしてましたが、改めてサーバーレスを軸にするということでPagesに戻りました！ 稼働してた自宅のラズパイはシャットダウンしました、おつかれさま🖥 ドメインもCloudflareのものだし、上のことできたのもCloudflareのおかげでもある…色々遊べて楽しかった🐏
あとギャラリーの追加関数もDeno版から移植に成功したので、ギャラリーの追加もできるようになりました！ （Lint予測変換機能もあったとはいえ一発成功するとは思わなかった）
気になるところは他になくはないですが、これで自サイト魔改造は一区切りついたはず…！
Next.jsで色々作れないかなあとここ数十日作業してましたが、ふとある問題に気づいてしまいました。 「Node.jsを動かす環境ってあまりなくね…？」
最近になってようやく動かそうとする環境に合わないことが判明してしまい、せっかく作ったログインシステムも運用することが難しいことが判明してしまいました。 そこで、データベースやNodeのバックエンドに頼らない形に舵を切り替えました…！
まず、データベースシステムは全部消してしまいました。 そして、このブログはギャラリー同様にjsonで取得してクライアントサイドでレンダリングする仕組みを取り入れました！
OGP的にどうしようかと思ったけど、ぼくのブログはどっちかというとおまけ要素であまり重視してないところだしなあ…って思ったのでこの形でいいんや…ってなってました。 ついでにブログはデータベースではなくJSONファイルとして開発環境でのみ更新できるようにしました。 非公開のものはデプロイしないおまけつきで良い感じに運用できそうな見込みです🎶🐏
自サイトの方向性にずっと迷ってましたが、ようやく方向性が定められたのでやっと誕生日ウィークで色々やるんだ…！ってなってます！ おえかきしたい…！！！
追記： ギャラリーシステムはギャラリーリストに追加するシステムの移植が完成しない限りは追加できない感じなのです。 ここは後回しだけど1月までには…！
前回に続きブログシステムの写経を最後まで進めてました！
ローカルの環境だとうまくいったもののタブレットPCにクローンして実行してみたところ、環境が変化した影響でうまくいかなくなっちゃいました… もともとLinux環境へ移すつもりで書いていたけど、（バージョンは異なる）同じWindowsでもうまくいかなかったのは想定外なのでした…
環境によって異なるのはけっこう手間だなあって思ったので、仮想環境であるDockerをついに導入してみました。 Dockerは仮想環境でありながらOSを作らずに実行できる軽量仮想環境で、作るのは色々用意することはあれど消すのは簡単だから色々使い捨ても本番でも活躍が見込める優れものなのです！
百聞は一見に如かずなのでまずは公式が用意してるHelloWorldドッカーで挙動を確認しつつ、これまで使ってたローカルのエクスプレスで実行してるサーバーをDocker化してみました。 色々苦労したけど成功できて良い感じに導入できました！
Dockerfileはnodeのバージョンを指定してパッケージファイルをコピーし、yarnコマンドでインストール、ポート番号を指定してyarnの実行を最後に記述していました。
FROM node:20.9-alpine
# アプリケーションディレクトリを作成する
WORKDIR /app
# アプリケーションの依存関係をインストール(lockも含む)
COPY package*.json ./
RUN yarn install
# アプリケーションのソースをバンドルする（一部はコピーしない）
COPY . .
# 開放するポート番号
EXPOSE 80
CMD [ "yarn", "start" ]
.dockerignoreは主に頻繁に更新するデータのみ指定
node_modules
static
data
views
docker-compose.yml
services:
local:
build: .
ports:
- 8080:80
restart: always
volumes:
- ./static:/app/static
- ./data:/app/data
- ./views:/app/views
下部分の行は主にマウントというのをしてます。 これで中身を書き換えたり画像を入れたりするとすぐに反映されるのと、sqliteを使用していてマウントしてあるdataディレクトリの方に保存してるので、データベースもコンテナ再起動しても残るようになっています。 restart:alwaysを指定したことでパソコン起動時に自動で起動するdockerアプリと一緒にさっきのローカルサーバーが起動される、といった仕掛けができます。
これらのファイルを一番ディレクトリに置いたうえで以下を実行
docker compose up -d
docker composeが便利だったのでしれっと内容を変えました🐏 一発で作れるのはもちろんのこと、docker compose down で作ったやつ一発で止めれるからとても便利…
これまではtrayrunでコマンドを隠しながら実行するやつを使っていたので、それがdockerで管理できるようになったのは楽だなあって思いました！ マウントに依存してるのでdockerの長所を少しつぶしちゃってるけど、あくまでもローカル用だし…！
ついでにyarnも今回初めて導入してました。 yarnコマンドだけでnpmからすぐに移行できて便利～ってなってました
まだこのサイト自体はそのままなのですが、確実に次に移行する準備はできつつあります…まだ先は長いけど…🏔🐏 今度はさっき勉強したDockerを活用してデスクトップPCとタブレットPC両方で動くNextJSアプリを試します！（たぶん追記に続く）
ラズパイのNodeをLTSに更新して（nコマンドがとても便利だった）、NextJSアプリを実行しようとしたらOSの問題なのか存在しないファイルをDLしようとして実行できなかった… ラズパイで動かそうとする限りこういう調子かもしれない （ビルドできるかどうかはOS次第なので） Windows側のWSLでは普通にビルドできたし、そっちからもDockerイメージ生成できるのは知れたけど、ラズパイはカーネルが根本から違うから…！ バックエンドにNextはOSの問題もあって、Expressの方は動くからそっち使うにしても、フロントエンドは別のやーつ使う方向が良さそうかも…？ NextJS使うならラズパイ以外ならほぼ稼働できると思う（むしろそうすべき）けど、経済力的にラズパイ縛りはせざるを得ないので、とりあえず現状維持しつつ模索する🐏
ついでにNuxtも入れてみようとしたけど、ラズパイだとテンプレ生成ができなかったりDockerもカーネル違いでビルドできなかったりでこっちも想定したい環境だとダメそう…！
Dockerの異なる環境へのビルド方法を知ってラズパイのカーネルを対象にPCでビルドしてみてもエラーってなっちゃう… arm/v7でビルドできないけどarm64ならビルドできるという状態…！ ビルドは強いPCでするやり方は知ったけど、やっぱ環境の根本的な問題っぽい…
Nuxtはビルドできた！30分くらいかけてHello world的なやつできた！（ 現実的ではなさそうね…！ 副産物にdockerのpull時間がかなりかかることがわかって、そのためにNodeJSのalpineで軽量化することを学んだ、軽くするの大事だ…☁
追記 11/19 13時 Fastifyといった他の使うのも考えてたけどサーバー自体をどうにかしたいなあって思ってて色々調べてた！ Google Cloudでサーバー立てるサービス（Compute Engine）があるらしく、それもラズパイ超えるスペックで使っても無料枠を超えない見込みなのでそれ使ってみるか～ってなってる🖥
追記 11/20 12時頃 Compute Engineはサーバー自体は無料で立てれるけど、ウェブサーバーにすると通信に費用が掛かるみたい（無料枠もあるっぽいけど画像いっぱいなぼくのページだと絶対上限超える）なので、やめとこ…ってなってた でも実際に立ててみて色々な知見を得られたのでよし！ サーバーへの通信をうっかり壊しちゃって色々調べてよかった…（
本日コミケの当落の日でしたが、C103は抽選漏れになりました！
抽選漏れかあ…ってなりましたが、 よく考えるとぼくの活動方針的にはコミケよりもけもケット、コミティア、デザフェスに参加すべきだったなあって思っていたのと、年末に関東に行くと色々大変そう…って後になって思ってたので、結果オーライ！ということにします！
今後の活動方針についてですが、
まずは次のけもケットには応募したいと思ってます！！（できませんでした）
一週間後が応募締め切りなので、後であわてないようにこの土日のうちにけもケットの応募を終わらせるようにしたいです🐏
他にも先述していたイベントの方も出展したいです！ あと最近3Dを作っているので、メタバース関連にも出展できるようにしたいです！
これからも応援よろしくなのです！
今回は主にギャラリー部分の更新になります！ イラストは最新のものに更新しました！
また、今回からシーズンごとの自動処理を実装したので、ぼくがピックアップタグを設定せずとも特定のシーズンに自動的にピックアップしたイラストが載るようになりました！ （例：2月にバレンタインデー、10月にハロウィン）
地味ーに時間かかる部分でいつか自動化しよう…って思っていたところなので、これで次から楽になる！たぶん！ 今後のサイト更新の予定は制作してる3Dをお披露目できる場を設けたいなあって思ってます、あくまで予定なのでまったりお楽しみに🐏
（（ 6 - ヮ-)∂ すやすや
