ブログ

Shifter Gatsby Recipe が公式に Gatsby CLI の一部になりました！

HBT

今回は私たちにとって最初の Shifter Gatsby Recipe をご紹介します。
APIファーストの WordPress ホスティングソリューションである Shifter Headless のために作成されたこの Gatsby Recipe は、Web制作者の時間と労力を節約しながら、Jamstack サイトをコマンドラインからブートストラップできるようにします。
概要は以下のショートムービーでもご紹介していますのでぜひご覧ください。

このレシピは正式に Gatsby CLI の一部となり、テーマ、ライブラリ、プラグインの追加などの開発者のタスクの自動化に役立ちます。Gatsby Recipe API を使用すると、Gatsby で Shifter Headless を使用して WordPress サイトを構築するようなカスタムタスクやロジックを作成することができます。今回は主にこれについてご紹介します。

これは、Gatsby Recipes と Gatsby Cloud のためのエキサイティングな計画の初めのアクションです。
私たちは Gatsby の創設者 Kyle Mathews の推薦でこれらを使い始めましたが、さらに多くの機能が追加されていることを知りました。
例えば、Yeomanや Netlify CLI 、質問を促す他の CLI のようなインタラクティブなレシピのサポートなどです。
将来的には、現在のレシピからステップを削除できるようになり、Gatsby や Shifter で作業する際に、よりシンプルで迅速に使用できるようになりますのでぜひお楽しみに！

Shifter の Gatsby Recipe では、スタートアップの問題を解決することに重点を置いています。
WordPress を使って Gatsby サイトを作成し、Gatsby Cloud などにサイトをデプロイしたいと思っているのであれば、いくつかのコマンドを実行するだけでできるはずです。
Gatsby Cloud のようなプロバイダーとの統合をさらに発展させていく中で、レシピは今すぐにでも使える完璧な実験場となっています。
私たちは、お客様や Jamstack コミュニティの皆様には、できるだけセットアップの手間をかけずにビルドを開始していただきたいと願っています。

デジタルキューブ では、OSS コミュニティをサポートし、Five for the Future のようなソフトウェアプロジェクトへの還元を支援する取り組みにエールを送っています。私たちは、WordPress のみならず他の OSS に対しての貢献も忘れていません。

このレシピは、他の OSS のソフトウェアコミュニティの貢献なしには実現できませんでした。
私たちはお手本を見て学び、レシピはすでに公開されているものから調達してきました。
これを可能にした数え切れないほどの他の貢献者とともに Gatsby JS プロジェクトに貢献し、Gatsby の公式レシピのリストに加わることを楽しみにしています。

How to use the Shifter Gatsby Recipe

それではおまちかねのサンプルのご紹介です。
まず、ローカルの Gaadfaftsby NPM パッケージを更新します。最新のリリースされたバージョンを実行するよう心がけましょう。

$ npm install -g gatsby-cli@latest
$ npm install gatsby@latest

これで Gatsby Recipe コマンドを実行できるようになりました。公式のレシピリストに掲載されているお気に入りのレシピをいくつかご紹介します。

$ gatsby recipes
Select a recipe to run
>> Add Styled Components
     Add Sass
     Add Typescript
     Add React Helmet

あなたが既存のサイトを持っておらず、新規に始める場合は、Gatsby の公式スターターを使うことをお勧めします。
これは、よく文書化されており、頻繁に更新されるスターターテンプレートです。
そのまま WordPress に対応しているわけではありませんが、Shifter Gatsby Recipe ならうまくカバーしてくれます。

スターターテンプレートを使用して、次のコマンドで新しい Gatsby サイトを作成します。ここではフォルダ名を shifter-gatsby-recipe-demo としましたが、お好きなものを選んでください。

$ gatsby new shifter-gatsby-recipe-demo
$ cd ./shifter-gatsby-recipe-demo

Gatsby Recipe は、Gatsby CLI に同梱されているものに限定されません。
URL を指定してカスタムレシピを実行することができます。
ここでは、GitHub でホストされている Shifter Gatsby Recipe を実行する方法を紹介します。このコマンドを実行すると、新しく作成したGatsby サイト上でレシピの実行が始まります。

gatsby recipes https://raw.githubusercontent.com/getshifter/shifter-gatsby-recipe/master/shifter.mdx

このレシピはいくつかのことを行います。まず、プロジェクトに必要な NPM パッケージをインストールします。これには Gatsby 自体、WordPress のデータを取り込むための Gatsby Source WordPress プラグイン、画像処理のための Gatsby Image などが含まれています。

Install necessary NPM packages
<NPMPackage name="gatsby" />
<NPMPackage name="gatsby-image" />
<NPMPackage name="gatsby-source-wordpress" />
...

次に、レシピはインストールした NPM パッケージの1つでコマンドを実行します。これは Gatsby Source WordPress プラグインで、レシピの設定でいくつかのパラメータを受け入れることができます。
これらのパラメータを許可することで、レシピを書いている人がいくつかのデフォルト値を使ってレシピを起動するのに役立ちます。
インタラクティブなレシピ機能がリリースされたら、ユーザーがデフォルト値を必要なものに置き換えることができるように、このステップを更新していきましょう。

<GatsbyPlugin name="gatsby-source-wordpress" options={{
    baseUrl: `example.hl-b.getshifter.co`,
    protocol: `https`,
    hostingWPCOM: false,
    useACF: false,
    includedRoutes: [
        "**/posts",
        "**/pages",
        "**/users",
        "**/categories",
        "**/tags",
    ]
}} />

レシピのこの部分では、Gatsby サイトのテンプレートとコンフィグファイルのインポートを開始します。
テンプレートファイルは、GitHub から直接、WordPress のデータを問い合わせる gatsby-node.js ファイルとともに提供されています。

注: いくつかの理由から、Gatsby Source WordPress プラグインから始めることにしました。
Gatsby のチームはこのプラグインのためにいくつかのエキサイティングなアップデートに取り組んでおり、すでに利用可能であり、彼らはすぐにリリースする予定の新バージョンを持っています。
ベータ版は現在公開されており、タイラー・バーンズ と ジェイソン・バール が主催する最新機能のウォークスルーデモを見ることをお勧めします。

Shifter Gatsby Recipe が完成したので、いよいよ開発を開始します。
まずは gatsby develop を実行してみてください。
That’s it!

ここからどこへ行くのか？もちろん、WordPress サイトを静的化する広大な理想をすべて探求しに行きましょう。
Gatsby Recipe はあなたのお手伝いをするために設計されています。
前述したように、タスクを自動化してくれますが、すべての作業を代行してくれるわけではありません。新しいレシピを作成することでカバーできるギャップがもっとあるはずです。

私たちは、Gatsby Recipe API を使って何が可能かを探求し、WordPress powered by Shifter を使って Gatsby Cloud と完全に統合するという私たちの目標に近づきたいと思っています。

ぜひ今回のサンプルをお試しいただき、フィードバックをお寄せください。