Note初級・中級のエンジニアやデザイナー向けに技術情報と英語学習情報を提供中。APIを連携させて、バックエンドはWordPressで管理しつつ、フロントエンドをGatsbyJSで簡単に構築する方法を紹介します。APIを連携させることで、WordPressの管理画面の使い勝手を維持したまま、フロントエンドをモダンに書き換えることが可能です。CMSを構築する上で今最も暑い組み合わせです。今回はJWT認証の設定までさらっと完成させます。APIを連携させて動かしてみましょう。GatsbyJSとは?GatsbyJSとは、ReactとGraphQLを前提とした静的サイトジェネレーターです。静的サイトなので、ページの表示の際にGraphQLで必要な情報を1回取得し、静的ページを生成して表示する仕組みです。開発はReactで行うことになります。以下の準備が完了している必要があります。APIを使う開発環境をDocker上に構築する方法(JWT認証編)」を参照してください。)詳しくは「環境」を参照してください。APIを連携していきましょう。APIを使う開発環境をDocker上に構築する方法(JWT認証編)」から持ってきて使います。0.0.0.0:8080->8080/tcp以前の記事のWordPressの設定がすべて完了している前提で進めますが、一応補足しておくと、以下の2つのプラグインのインストールと設定が必要です。MenusWordPressにテストデータを入れる今回用の固定ページおよびヘッダーメニューのテストデータを準備します。Page"WordPressの管理画面にログインして確認してみましょう。APIの連携GatsbyJSプロジェクトを作成するGatsbyJSのプロジェクトを生成し、必要なプラグインをインストールします。page.jsGatsbyJSとWordPressを連携するために「gatsby-source-wordpress」というプラグインをインストールしています。GatsbyJSにWordPress連携の設定を追加するGatsbyJSにWordPress連携の設定を追加しましょう。],};GatsbyJSのGraphiQL画面でWordPress連携を確認するGatsbyJSを起動します。developブラウザで「http://localhost:8000/___graphql」にアクセスし、GraphQLでWordPressのページ情報「allWordpressPage」とヘッダーメニュー情報「allWordpressWpApiMenusMenusItems」を取得できるか確認します。}}GatsbyJSとWordPressとの連携が確認できました。GatsbyJSの画面を少し作るWordPressから取得したデータを表示させるだけの簡単なフロントエンドをGatsbyJSで作ります。Header;簡単ですが完成です。最後にGatsbyJSを起動してWordPressから取得した情報が表示されることを確認しましょう。GatsbyJSを起動します。developブラウザで「http://localhost:8000/」にアクセスすると、「http://localhost:8000/welcome」にリダイレクトされ、WordPressから取得したWelcomeページが表示されました。Page」のリンクをクリックすると、「http://localhost:8000/test」に遷移し、WordPressから取得したTestページが表示されました。APIを連携させることができるようになったと思います。今回は取得まででしたが、JWT認証も設定しているので、記事の作成や更新もできます。試してみると面白いと思います。最新の記事Keid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。CM...[t[tips][Tumblr]umblrでソースコードをシンタックスハイライトする方法プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ...Springプロジェクトをマルチモジュールで構成する方法(Maven編)マルチモジュール化は機能のまとまりを明確化し、プロジェクト再利用性やメンテナンス性を高める良い方法です。今回は、Mave...[t[tips][Windows][SSH]indows版OpenSSHでSSHサーバを構築する方法Windowsを使うエンジニアは誰もがこう考えます。LinuxのようにWindowsを使いたいと。LinuxサーバにSS...[t[tips][Perl]LEを使ってPerlからOutlookのメールを送信する方法WindowsにはOLEオートメーションというWindowsのアプリケーションにアクセスするインターフェースがあります。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。AuthorKeid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。バッチで明日の日付を計算する。0.0010このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。最新の記事Keid自由で楽しい世界を目指すフルスタックWebデベロッパー。大学でコンピュータサイエンスを真面目に学び、日本の大手IT企業に就職後、新しい技術やスケールするビジネスが北米にある事に気づき、海外への挑戦を決意。英語ができなかっため、フィリピン留学およびカナダ留学を経て強制的に英語を上達させた。このブログでは海外に挑戦したいエンジニアやデザイナーに少しでも有益な情報を提供していきたいと思う。Tumblrでソースコードをシンタックスハイライトする方法プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ...Springプロジェクトをマルチモジュールで構成する方法(Maven編)マルチモジュール化は機能のまとまりを明確化し、プロジェクト再利用性やメンテナンス性を高める良い方法です。Windows版OpenSSHでSSHサーバを構築する方法Windowsを使うエンジニアは誰もがこう考えます。LinuxのようにWindowsを使いたいと。OLEを使ってPerlからOutlookのメールを送信する方法WindowsにはOLEオートメーションというWindowsのアプリケーションにアクセスするインターフェースがあります。