APIを使ってのブログの作り方」を解説していきます。Gatsbyてなに?髪の毛に塗るの?Gatsbyは静的サイトジェネレーターでreactベースで作られています。graphqlが簡単に使えるのでWordPressやContentfulなどのCMSからデータを引っ張ってこれます。JS)を生成してくれるので、それを好きなサーバーに置くだけで完成ですすでに生成された静的ページなので読み込みが早く、SPAで、Preloadingもしてくれるのでページ遷移も早いです。特徴はありますが、今回はブログの作り方の紹介なので割愛します。これからステップバイステップで解説していきます。APIからデータを引っ張ってくるにはgatsbyが提供するプラグイン「gatsby-source-wordpress」を入れます。gatsby-source-wordpresspackage.jsonに「gatsby-source-wordpress」が追加されているかと思います。Flywheelを使ってWordPressの環境を作って開発の練習をしてもいいかと思いますhttp://localhost:8000/___graphqlでちゃんとデータが取れているか確認できます。POINTallWordpressPost:全投稿記事allWordpressPage:全固定ページ再生ボタンを押すと取得できたデータが表示されます記事ページを作る記事ページのtemplateを作ります。srcディレクトリの中にtemplateディレクトリを作ります。templateディレクトリの中にBlogPost.jsを作ります。}`graphqlでのデータの取り方はhttp://localhost:8000/___graphqlを見るとだいたいわかります。このテンプレートにgraphqlでWordPressから引っ張ってきたデータが入り、記事のページが生成されていきます。pathgatsby-node.jsの設定をします。})}これで先ほど作ったBlogPostTemplateコンポーネントを使用して、記事が生成されます。BlogPost.jsやBlogPostTemplateの名前が違っているとうまく生成されないので注意です。ちなみに仮のWordPress環境ではこのように3つの記事を投稿しています。記事が生成されているかは存在しないページに行くとわかります。hello-world・test1・helloの3つの記事がちゃんと取れていますね/test1などに飛ぶと先ほど作ったBlogPost.jsの中のBlogPostTemplateコンポーネントを元にページが生成されているのがわかります。次に固定ページを作りますtemplateディレクトリの中にPage.jsを作ります。}`BlogPost.jsみたいな感じでこれが固定ページのテンプレートになります。次にgatsby-node.jsにpageを生成するコードを追加していきます。})}簡単ですね先ほどのBlogPostでやったことと同じなのですぐにできます。仮のWordPress環境ではこんな感じで「Sample」「test」の2つページが公開されています。存在しないページに飛ぶと、sampleページとtestページが生成されているのがわかります。/testに飛ぶと先ほど作ったPage.jsを元に固定ページが生成されているのがわかります。トップページに記事一覧を表示するpages/index.jsを編集していきます。}`これで記事の一覧が表示されるかと思います。*WordPress側でアイキャッチを設定していないと画像が取得できないのでエラーが出ます。}`上のように&&を使って条件分岐できますサイトのメタデータを編集gatsby-config.jsにサイトの基本情報を書くところがあります。}}これらの情報もWordPressで設定しちゃいましょうgraphqlでwordpressSiteMetadataのnameとdescriptionを引っ張ってきます。components/の中のheader.jsを編集していきます。ここでコンポーネント内でqueryを使うために作られたStaticQueryに書き換えます。APIでのデフォルトではメニューは利用できません。APIからmenuを引っ張ってこれるようになります。管理画面のプラグインから検索しても見つかりませんので、上のリンク先からプラグインをダウンロードして直接インストールしてください。Menus」の方を使います。Koga福岡を拠点のクリエイターチーム「Fump」として活動をしています。写真や動画の撮影やモノ作りが好きで、趣味は旅・カメラ・テニス・筋トレ・サウナ・レザークラフトです。APIではまだフル対応していなかった。APIではまだフル対応していなかった。APIでブログを作ろう【Netlifyの自動ビルド。