ホームページ作ったよ
始めに
今まで自分の業績や、双翅目の標本画像等を保存・公開するためのホームページをGoogleサイトを利用して作成・運営していたのですが、運営が簡易な代わりに制約が多く新規ページ作成や画像の追加等行うのに非常に手間がかかるため、Googleサイトでの作成をやめて別の方法を利用してホームページを作成し直しました。
実現したかったこと(実現できたこと)
- ホームページ内でのブログ運営
- カテゴリの付与
- カテゴリによるフィルター
- 月別アーカイブの追加
- 記事はmicroCMSで追加する
- 更新履歴の自動更新
- ブログや標本画像を追加したら更新履歴に反映。
- microCMSでお知らせコンテンツを追加したら、更新履歴に反映。
- 標本画像(種のページ)を追加したら、ホームページ内に存在しない科や属のコンテンツを自動で生成する
- microCMSで種のコンテンツを追加する。
技術スタック
レイヤー | 技術名 | 用途 |
|---|---|---|
フロントエンド | Astro | サイト全体の設計図・HTMLビルド。静的サイトジェネレーションによるクライアントJSの極小化(Zero-JS)と圧倒的な表示速度(TTFB)の実現 |
ヘッドレスCMS | microCMS | データマネジメント（コンテンツ管理）。 「目＞科＞属＞種」のリレーショナルなスキーマのノーコードAPI化、および内蔵CDN(imgix)による画像最適化。 他。 |
インフラ | Cloudflare Pages | グローバルエッジサーバーへの静的配信。GitHubと連携したCI/CD環境、及び無料枠内での無制限ビルド・商用利用リスクなしの運用。 |
生成AI(Gemini)に選定してもらいました。
Wordpressなどでも実現したいことの実装は可能なようですが、以下理由より利用しませんでした。
- Wordpressの場合
- サーバーレンタル料が必要となる。
- ページの構成を自由にはカスタマイズできない。
- 本技術スタックの場合
- コンテンツ(API)の利用可能量やデータ転送量の上限値等を増やす必要がない限り無料枠で利用できる。
- 無料枠でも、十分容量に余裕がある。
- ※独自ドメインを付与する場合は課金が必要。
- 現在、独自ドメインの付与はしていない。
- コーディングが必要となるが、ページの構成を自由にカスタマイズできる。
最新の技術に触れたり、生成AIを利用したコーディングでどこまでできるのか試したかったのも、選定理由の一つ。
利用したエディタや生成AIなど
- エディタ
Cursor
無料枠内でAI機能利用する予定だったが不要だった。
- 生成AI
Gemini
3.5 Flash
3.1 Pro
基本的に3.5 Flashを利用し、エラー発生時や複雑なコード生成時等はProを利用した。
※個人契約です
作成期間
1週間程度. 平日の夜にちまちま行い、休日に仕上げました。
感想
開発の知識や経験が非常に乏しい自分でも、生成AIに頼ることで最新の技術を利用して作りたいモノを作成できることがわかりうれしかったです。 環境構築→開発→公開(デプロイ)の一連の流れも経験できたのもよかったです。
ホームページのカスタマイズはもちろん、今後何か別のサービス作りたくなったら生成AI頼りに挑戦してみようかと思います。
生成AI駆動開発をして主に感じたことは、指示の精度が大事なことと、利用枠に制限がある場合はモデルの使い分けが大事ということでしょうか。
指示の精度が低ければ成果物の精度も低くなり、逆もまた然りです。また、生成AIの使用量については高度なモデルなほどコストが大きいので、見出し[利用したエディタや生成AIなど]に記載した通り、用途によって使い分けるべきですね。
終わり。