会社としてって感じじゃなく、個人の趣味サイト的なノリで恐竜図鑑みたいなサイトを作りました。
何かと話題のAstroを使って構築しているので、Astroで苦労した部分とかを追々書いていきたいなぁと思ったりしています。
そう言えば弊社は今年の1月で丸10年を迎えました。何とかやってきましたが今後10年も生き抜くために、コーディングやWebサイト制作のご依頼が有ればお気軽にお問い合わせください！
探そう！好きな恐竜の紹介
何はともあれ作ったサイトはこちらです。
コンセプトとして子供も楽しく恐竜を探せるようにしたいってのが有ったので、出来るだけ画像をメインで扱いつつ、タブレットなどでも操作しやすいサイトを目指しています。
実際に、自分の息子（2023年6月時点で5歳）にiPadで触ってもらっていますが、すぐに覚えて使いこなしてる感じするので、操作性はそこまで悪くはないのかな、と思ったりしています。
この記事を書いてる時点では、50種ちょいしか掲載して無くてまだまだ恐竜の数が圧倒的に少ないけど、徐々に増やしていければと思っています。
作ろうと思ったきっかけ
Web界隈で何かと話題の、Astro っていう静的サイトジェネレーター。
公式では、
速度を重視して設計されたオールインワン Web フレームワーク
って書かれてます。
存在自体は、Ver0.4くらいの頃から知ってはいたんですが、ReactやVueなどはほぼ触ったことがなかったので最初はハードルが高く感じてたり、Eleventy で十分かなって思ったり、弊社の案件ですぐに使うには難しいかなぁとか色々言い訳を作って触らずに居ました。
しかし、Astroは勢いも凄くて、さすがにそろそろちゃんと触りたいと思うようになってました。とは言え、なんとなく触ってても覚えないので、何かAstroでちゃんとしたサイトを作ってみたいと思っていたタイミングで、5歳になろうとしていた息子が恐竜にハマっているのを見てて「恐竜図鑑みたいなサイトをAstroで作ろう！」と思ったのがきっかけです。
技術スタック的なお話
静的サイトジェネレーターにAstroを使い、Jamstackなアプローチで制作。
エディタは VS Code で、ホスティングサービスは「Cloudflare Pages」を利用。恐竜さんのデータは、Markdownにて管理しています。
ヘッドレスCMSも色々検討はしましたが、有料版を使うのはきついので出来るだけランニングコストを抑える目的も有り、特に使わずにスタートしました。
ボクが一人で更新するので、Markdownで管理すること自体は問題なかったのですが、Astroに関して色々とググっていた時に、Front Matter CMS ってヘッドレスCMSを紹介してる記事を見つけ、その存在を知りました。
VS Codeの拡張機能で提供しているっていう普通のSaaS型のヘッドレスCMSとは違う点が面白かったり、完全無料で使えるので試しに使ってみたところ割といい感じでした。
簡単なブログ程度だとそこまで使うメリットは感じないヘッドレスCMSなんだけど、Front Matterで管理してるメタデータが多ければ多いほど恩恵を感じられるCMSです。
探そう！好きな恐竜では、25個くらいのデータをFront Matterで管理してるので、Front Matter CMS にけっこう助けられてます。
今回、SaaS型のヘッドレスCMSを使っていないので、画像は全てAstroのAssets機能を使ってローカルで管理しています。
ビルド時に圧縮もしてくれるのですごい便利なんですが、今回みたいな画像がわりと多いサイトだとビルド時間がちょっと不安です。
現在、最適化してる画像は430枚くらいあって、ビルドは3分ちょい掛かってます。デプロイされるまでのトータルだと4分近くに。Cloudflare Pagesって確か20分でタイムアウトだと思うので、掲載してる恐竜が今の10倍近くになったらどうなるんだろう…
後は、静的サイトで使えるサイト内検索ではかなり有名でよく見かける「Algolia」も使ってみたかったので、恐竜の検索に使っています。レスポンス良いし、無料で使える範囲も十分有るのでいい感じですね。
という事で
Astroを使って作ったサイトの紹介でした。
恐竜好きな方や恐竜好きな子供が居るご家庭で見て頂けると嬉しいです！
今回、Astroを使ってみて、コーポレートサイトやブログなら問題なく作れるだろうくらいの知見は得れたように感じます。
なのでAstroを使ったコーディングやサイト制作のご依頼もお気軽にお問い合わせください。