惣島写真館ウェブサイト(実在) • 石山祐己のホームページ

概要

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

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

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

(速い)

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

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

そのうちちゃんとした新着情報更新用システムなど作ろうかなとは思っています。

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

(ダサい)

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

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

(大変見やすくそれっぽい)

Astroだと Web3Forms のようなSaas APIを使ってのフォーム実装が最近のスタンダードなのでしょうが、商用利用やらお問い合わせ数やらを何も気にせず済むよう、裏にヘッドレスCMSとしてのWordPressを用意。

そこにプラグインでインストールしたContact Form7をAstroでレンダリングしてお問い合わせフォームとして実装。WordPressでfunction.phpをいじったりもした。

(実体はContact Form7)

Contact Form7直のAPIも存在する、といった情報も散見されたので試したのですが、うまくいきませんでした。以下Postman結果。

{
    "code": "wpcf7_unit_tag_not_found",
    "message": "適正なユニットタグがありません。",
    "data": {
        "status": 400
    }
}

(※POSTリクエストHeaderにContent-Type:multipart/form-data、Bodyに「_wpcf7_unit_tag」は含めているのに、あとはパスワードが要るとかなんとか……。誰かContact Form7(ver.5.9.4)でAPIを叩けていたら教えてください)

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