できるだけ画像をもっていきにくい個人サイトを作ってみよう#1
前説
前回の続きではありますが、先に、webブラウザやPCの仕組み、モニタの外にも世界がある関係上完全に画像を持っていけなくすることは不可能です。はい。悲しいことに。
なんで簡単にコピペポンができる仕様にしたんだ昔の偉い人（多分論文を参照しやすくするためだったんだろうけど）（調べてないから今度調べようかな。）
まあコピペがなくてもスクリーンショットがあるし。さらに言うなら画面を写真に撮ったら普通にデータにできるからね（きれいに撮るのはコツがいるけど）
まずNext.js公式から紹介されてるギャラリーテーマを使ってみる
まあこちらです。
Vercel公式だったわ（Next.jsの元締めだけど）
画像などのコンテンツ管理は
こちらにアカウントを作って管理するらしい。
ということでさっそくテンプレートデータを落としてきてpnpmでローカル環境立ち上げてみます。
pnpm devで表示してみるけど当然何の画像も出ない
それはそう。つなぐための接続情報何も設定してないもの。
とりあえず、テンプレートファイルの中の「.env.local」の中のにこんなコードがあるので埋めます。
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_FOLDER=上三つはログインして「Programmable Media（アイコンは3つの四角が重なったみたいなやつ）」から「Getting Start」に入って右側に「View API Keys」ってボタンがあるのでそこから見れます。
問題は四つ目。
「CLOUDINARY_FOLDER」（フォルダ名を入れるんだろうと思って入れはしたんだけど画像読まなくなっちゃったりした）これだけいくら探してもなくてなんだこれ？？？？ってなってたのでテンプレートファイルで全件検索した。ヒットした。
コードから察するにcloudinaryのAPIで使用していそう。searchAPIの機能を確認→expressionは検索条件。ほうなるほどということはやっぱりここにはフォルダ名を入れればいいんだな（cloudinaryにはフォルダを作成してそこにダミー画像を格納済み。（デフォルトで入ってるファイルも削除していいはずなんだけどなんか消せない（片付かない人の特徴つらい）））もっぺん入れた。取得できない。なんでやねん。
この後何度こねくり回しても読み込んでくれなかった+そもそも（いくら加工した画像をAPIで取得できるといっても）私の試そうとしている方法を外部サービスを利用した状態で試せるのか？と疑問に思ったため、一旦画像情報はローカル保存という普通の静的サイトとして構築する方向に舵を切ったのでした。べべん。
後日談
ちなみに、後で画像の取得をして、その画像に加工を掛けることが可能かを最終的に確認しようとした際、再度searchAPIで検索条件指定して取得を試してみたときは大変すんなり取得できました。
なんでやねん。
実際のコードを今見返してみました。ほとんど（というかフォルダーの部分は全て）同じコードで抽出してました。ほんまになんでやねん。
一つだけ仮説を立てるとするならば、最初に試した時はcloudinaryに登録した当日、もちろんフォルダ内に画像を登録したのも試す直前くらいのタイミングだったためラグがあったと考えることもできる（ないんじゃないかなと思いつつ）
この記事が気に入ったらサポートをしてみませんか？