株式会社コードリック株式会社コードリック
トップ
TOP
会社情報
COMPANY
請負開発
ORDER
自社開発
PRODUCT
開発実績
RECORD
お知らせ
NEWS
ブログ
BLOG
お問い合わせ
CONTACT
TOPトップCOMPANY会社情報ORDER請負開発PRODUCT自社サービスRECORD開発実績NEWSお知らせBLOGブログCONTACTお問い合わせ
BLOG
ブログ
  1. TOP > 
  2. BLOG
  3.  > プログラミング
  4.  > AstroとContentfulで自分のブログを作りたかった
2024/3/1

AstroとContentfulで自分のブログを作りたかった

プログラミング
こんにちは、アプリケーション開発部の岡田です。

自分は日頃Vueでの開発を行っているのですが、このVueに興味を持ったのはJavaScriptにはいくつもフレームワークがあり、その中で一番とっつきやすいものがVueだったからということが一つあります。
現在会社に入って2年近くが経とうとしていますが、その間にもいろいろなフレームワークが誕生しているように思います。
その中でも最近気になったAstroというフレームワークを触ってみたので、その内容について軽く触れつつ、自分が詰まったContentfulとの連携について備忘録として残しておきたいと思います。

Astroとは??

Astroとは、JavaScriptベースのフレームワークの一種なのですが、高速なページ表示が可能であり最近何やかんやとアツいそうです。
なんでも、ページ表示時にはコード内のJSを一切取り除くことで高速化を実現しているのだとか(取り除く取り除かないもコントロールできるらしい)
さらにこのAstroの特徴として、VueやReactで作ったコンポーネントをそのまま使用できるというものがあります。
そのため自分が業務で触ったVueのコンポーネントをそのまま使えるじゃないか!ということで興味を持ったのでした。

Contentfulとは??

ContentfulとはヘッドレスCMSの一つ。
乱暴な言い方をすればWordPressのフロントデザイン一切なしのデータベースのみのもの、フロント部分は自分で自由に作ってな!というものですね。
音楽ストリーミングサービスのSpotifyなんかはこのContentfulを用いて作られているそうです。
Contentfulは日本語対応していないので正直使いにくさがあります。じゃあなぜContentfulをって話なのですが、前の会社ではボスがECサイトを作成していた時にNext.jsとContentfulを用いてサイトを作成していたのです。
ですが、自分はそれの構造が何一つ理解できず、、、ただそれから3年経過している今なら理解できるのでは?という思いから触ってみたのでした。

何につまずいたのか?

一からAstroの使い方、Contentfulの使い方を書いていくと、とてもじゃないですが書き終えられないので要点だけをかい摘みますと、Contentfulのブログコンテンツ内に埋め込んだ画像がどうやっても表示されないという現象に出くわしました。

ちなみにAstroでcontentfulを使う、Contentfulでブログを作成するのドキュメントはこれです。
AstroとContentfulでブログを作成する

そしてドキュメントに沿って作られたContent modelがこちら。
contentful設定content

上記に沿って作られたContent内容。
表示されたembed画像

このAstroのドキュメント通りに進めればContentfulで書いた内容とトップ画(上の画像で言えば下の猫画像)は表示されます。
ただし、確実にContentfulでセットしたはずの埋め込み画像がどこにも表示されていません。
embedの猫画像がない


consoleで表示させてみるも。。。
consoleにも表示なし
どこにも存在していません。

ではどう対処したのか?

Contentfulからの情報をAstroで呼び込むための関数がありますが、その関数内にoptionsをセットすることで表示が可能になるようです。
今回はこんな感じで書きました。
astro img options
そしてこのoptionsを下記のように渡してあげることで。。
astro option渡し方
ページで表示されます。。!
embed猫画像表示

色々やってみたけれど。。

ブログっぽいものを作りたくて今回Contenfulで試行錯誤してみましたが、感想としては他の方の記事にもあったように、Contentfulはブログには向いていないのかなという印象でした。
それこそECサイトのようにどこどこにこれを表示し、あれあれにこれを表示するというふうにカチカチに固めるならまだしも、ブログはあげたい画像も数もそのブログ記事によって異なりますからね。

もし似たようなところでつまずいた方がいるようでしたら参考になればと書いてみました。
ちなみにAstroを使っての感想としてはreactに近いという印象を覚えました。
ではでは!
 
back
トップ
TOP
会社情報
COMPANY
請負開発
ORDER
自社サービス
PRODUCT
開発実績
RECORD
お知らせ
NEWS
ブログ
BLOG
お問い合わせ
CONTACT
トップ
TOP
会社情報
COMPANY
請負開発
ORDER
自社サービス
PRODUCT
開発実績
RECORD
お知らせ
NEWS
ブログ
BLOG
お問い合わせ
CONTACT
株式会社コードリック
〒920-0362 石川県金沢市古府3丁目45-2
TEL 076-249-8388 / FAX 076-203-0044
SDGsのロゴ
株式会社コードリック
〒920-0362 石川県金沢市古府3丁目45-2
TEL 076-249-8388 / FAX 076-203-0044
プライバシーポリシー
SDGsのロゴ
©株式会社コードリック. All Rights Reserved.プライバシーポリシー
©株式会社コードリック. All Rights Reserved.