見出し画像

画像が要らないイケてる画像ギャラリーをVercelで爆速で作った

しらいはかせ(AI研究/Hacker作家)

このところ、1日1サービス開発してリリースしています。

講演を依頼されることがあり、講演概要とともに「写真はこのサイトから見繕ってください…」という感じでURLをお伝えすることも多いのですが、そんなこともあろうかと、「自分大好きすぎかよ！」と思うような営業写真もりもりのサイトを作ってみました。自分大好きじゃないとやってられないし、中途半端にダサいページにカッコいいアーティスト写真があっても微妙な気持ちになるし、カッコいい額装があってこそ映える写真というものもあるではないか。芸能事務所さんとかからお仕事くるといいな…。

で、出来たのがこれ。
https://gallery.shirai.as/

アー写の多くはデジハリ大学院で撮影いただいたものですね。感謝。

なおフロントエンドは Next.js で書かれており、Vercelにホストして独自ドメインで運用している。Vercelには（StorageとかDBといった追加機能としては存在するが）画像のようなどでかいファイルを置く機能がない。というか個人の履歴書サイトのようなものに維持費をかけるのはよろしくないという感覚がいつの頃から僕にはあって、メインの履歴書サイトのようなものは GitHub Pagesにこれでもかと移行しているし、なんならオープンソースプロジェクトとかだけなく、研究室とか自治会とか後援会とか同窓会とかいったノンプロフィットで公開することに価値があるWebサイトは全部GitHubでいいんじゃないかというポリシーすら持っている。

南極にアーカイブしてもらうほうがいいじゃない？

と思って GithubPages と Ruby on railsで書かれた Jekyll（ジキル）で長年問題なく運用していました。

単に Next.js を勉強したかった。


作り方については以下…


実はVercelには画像をおいていないんです。
クラウド、Next.jsならではの先進的な作りに感動しました。

使ったものはこちら

「Image Gallery Starter」

Next.jsとCloudinaryで構築された画像ギャラリー。

このサンプルアプリは、Next.jsカンファレンス2022での記念写真を公開しています。つまり非常に Next.js的な作りになっています。Cloudinary、Tailwindを使って画像ギャラリーサイトを作成する方法を示していますが、全くドキュメントらしいドキュメントはありません（がうまくいきました）。

まずはデプロイ

Vercelを使用してサンプルをデプロイするのが一番です。
アカウントを持っていない、全くやったことがない人は、詳細はNext.jsのデプロイドキュメントをご覧ください。


使用方法

npm、Yarn、またはpnpmで create-next-app を実行し、サンプルを起動します。

 npx create-next-app --example with-cloudinary nextjs-image-gallery
yarn create next-app --example with-cloudinary nextjs-image-gallery
pnpm create next-app --example with-cloudinary nextjs-image-gallery

自分は Windows上のVisual Studio Codeで yarn run dev しました。

Cloudinaryがすごい

Cloudinary APIについては使ったことがなかったのですが、まずはアカウント無料で作れるので作ってきてください。
 https://cloudinary.com/documentation/transformation_reference


本日株価総額10兆円を超えたニンテンドーさんも使っていらっしゃる

Cloudinaryのコンセプトは「プログラマブル・メディア」

まずは画像とかビデオのファイルをアップロードして…

こんなふうにコードを取得すればいい。

すぐ下にAPIキーとかか書かれている

アクセス状況もわかる。

料金はフリープランでこれだけ使える。

CloudflareなどのCDNと並列で使えばいいってわけだね。
あとは、動画とか生成AIとかまで扱えるのですが、今回はとりあえず自分大好き営業写真サイトを爆速で作るのが目的なので脇見振らない。


env.localを作ります

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_FOLDER=

Vercel上でも同じ値が入っているので vercel env pull とかでもいいのかもです。

next.config.js

以下のエラーが出るので、 ``next.config.js`` で ``domains`` を書き足すのを忘れないこと。これはどこにも書いてなかったんですが、ChatGPT4さんにエラーを伝えたら親切に教えて下さいました。

Server Error
Error: Invalid src prop (https://res.cloudinary.com/dxo2hh9s6/image/upload/c_scale,w_720/akihiko.shirai.as/zq4yefmwb222zewcsmdt.jpg) on `next/image`, hostname "res.cloudinary.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

Cloudinalyから引用できていない。いわゆるCORSっぽい感じの問題。

このエラーはページの生成中に発生しました。コンソールログはターミナルウィンドウに表示されます。

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    domains: ['res.cloudinary.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        port: '',
        pathname: '/my-account/**',
      },
    ],
  },
}

RTAとしては30分かかってないぐらい。

スマホ対応レスポンシブデザインですごく高速に動くのがいい…！
アニメーションもかっこいい。
大満足です。
フォルダに分けてアップロードするだけなので生成AIとか個別の案件でちょっとしたギャラリーを作るのに便利かも。

一番詰まったところは…… next.jsの基礎基本とかLinkとかですね。
Tailwindは理解しなくてもだいじょうぶだった。
https://tailwindcss.com/
アイコンとかグラフィックスが全部SVGとNext.jsの関数なのがすごかった。さすがNext.jsカンファレンス。

イベント告知です

上の話は自分が登壇する側の写真の話なんですが、この告知は逆で…

AICU社の初主催イベントになります！
生成AIでも尖ったクリエイター著者 サルドラさん（AITuberの開発者）と LangChainで未来を描く著者・西見さん（山梨県移住開発者） をお呼びして、ゲームクリエイターの世界イベント「Global Game Jam」で基調講演をする、という取り組みです。 しかも AIりんなちゃんも召喚成功しました… 熊本のクリエイターギルドみなさんともコラボです。 LT枠も有償で設定したのですが、既に1件AI製品サービスを持っている会社さんが買ってくれました。 このイベントはシリーズ化していきたいです。 みなさんの新年会に使ってください！



この記事が気に入ったらサポートをしてみませんか？