惣島写真館ウェブサイト(実在) • Ishiyama Room

概要

Astroで作った写真館ウェブサイト。

写真掲載盛りだくさんながらも高速表示に特化。

2024年に、WordPressで動いていたサイトをAstroで作り直しました。写真の記事は、この時からMarkdownで管理しています。

ただし、公開当初はお問い合わせフォームのためにWordPressとContact Form 7を残していました。そこも連携を続ける意味がなくなったので、2026年9月に独自のフォームへ移行しました。

以前はWordPressで動いていてどうしても表示が遅かったのを、2024年のフルリニューアルで、とにかく意地になって高速化。

現在は写真の記事と画像をリポジトリ内で管理し、Astroでページを生成しています。ページを作るためにWordPressへ接続する必要もありません。

提供される写真はサイズも形式も様々なので、こちらの方法でサクッと同じサイズのWebp形式に変換しています。
画像ファイルをwebpに変換する(Mac)

新着情報はGoogleスプレッドシートの内容をfetchしてトップに表示する親切設計。
新着情報カテゴリページを設置しても更新がおっくうになっては意味がないし、結局伝えたいことは１行程度で済むので、これがベストと判断。

現在はビルド時に取得した内容を最初のHTMLに載せ、表示後にもスプレッドシートから最新情報を取得します。ビルド時に取得できないときは、手元に保存したお知らせを使います。

ウェブサイトに公開する情報としてのGoogleカレンダーは公開設定で良いとして、それをそのままウェブページに埋め込むのが普通なのでしょうが、これはとにかくダサい。

(ダサい)

そこで使わせてもらったのが FullCalendar というライブラリ。

React対応なのでAstroへの埋め込みも簡単。
カレンダーに加えて、Google Calendar APIから「直近の予定5件」もfetchして表示しています。ウェブサイト全体のデザインを損なわず、大変見やすくそれっぽい営業時間ページになったかなと思います。

公開当初は、裏にヘッドレスCMSとしてWordPressを用意し、Contact Form 7のフォームをAstroのページでレンダリングしていました。そのためにWordPress側のPHPをいじったりもした。

写真の記事はMarkdownで管理できているし、お問い合わせのためにWordPressとの連携を残し続ける意味もない。そこで、2026年9月にフォームを作り直し、WordPress・Contact Form 7に依存しない構成へ移行しました。

現在のフォーム画面はAstro上のReactで作り、送信はPHPのAPIで受け付けています。入力項目、文言、見た目も、サイト側のコードで管理します。

メール送信にはResendを使い、お問い合わせした方への自動返信と管理者宛てのメールを送ります。管理者のLINEグループへの通知はLINE Messaging API、迷惑送信対策はCloudflare Turnstileです。

惣島写真館 - 靖国神社での記念写真、承ります

2024年の公開当初、この記事を書いていたら当該ウェブサイト経由で撮影依頼のお問い合わせが来た模様。ありがたいことです。