Help us understand the problem. What is going on with this article?

Gridsomeを試してみる

More than 1 year has passed since last update.

Gridsomeって何ぞや

image.png
GridsomeはReact製の静的サイトジェネレータのGatsbyを参考に作られた、Vue.jsの静的サイトジェネレータ。今までだとNuxt.jsのgenerateを使うことが多かったけど、今後Gridsomeも台頭してくるかもなということで、書いてみました。ちなみに、ロゴがめっちゃGraphQLを意識してるよね。

概要

Gridsomeは2018/12/03現在ver0.3.4で絶賛ver1.0に向けて開発中。今のところこんな感じで、実用的なプロダクトを作るにはまだ機能が足りていない部分もあるので、ぶっちゃけまだNuxt.js使うしかないって感じ。
ビルドコマンドを走らせたタイミングでGraphQLでデータを取得して、静的サイトを書き出してくれる。運用するときには、CMSの更新に同期してbuildコマンドが走るようにすることになる。

image.png


Gridsomeの大きな特徴としてGraphQLでのデータ取得がある。
Gridsomeのプロジェクト作るだけでAPI周りを自由にできちゃう。WordPressとかContentfulのプラグインをインストールするだけでAPIの構築が終わる。
image.png


書き方としてはこんな感じで<template>, <script>, <style>とかと同じように<page-query>を書ける。

sample.vue
<template>
  <div>
    <h2>Latest blog posts</h2>
    <ul>
      <li v-for="edge in $page.posts.edges" :key="edge.node.id">
        {{ edge.node.title }}
      </li>
    </ul>
  </div>
</template>

<page-query>
query Blog {
  posts: allWordPressPost (limit: 5) {
    edges {
      node {
        id
        title
      }
    }
  }
}
</page-query>

Gridsome, Netlify, Gridsomeでサイトを作ってみる。

アセット 1@2x-100.jpg
こんな感じ、よくある感じのやつ。ソースコードかContentfulのデータが更新されたら、Netlifyが自動的にデプロイをしてくれる。便利。15分くらいでサクサク作ろう。

とりあえずGridsomeから

先に注意、まだGridsomeが開発中で、APIの変更もあり得るので、動かないときは公式を見てみるのがいいかも。

Gridsome CLIをインストール

yarn global add @gridsome/cli
gridsome create gridsome-blog
cd gridsome-blog

image.png

こんな感じのができる。とりあえず、サーバーを起動。

yarn run develop

localhost:8080にアクセス。おっけー。

image.png

一応、バージョンによって不安定だったのでpackage.jsonを上げておく。

package.json
{
  "name": "gridsome-blog",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@gridsome/source-contentful": "0.0.3",
    "gridsome": "0.2.5"
  }
}

Netlifyにアップロード

とりあえず、テキトーにGithubにリポジトリ作ってPush。
Netlify

ログインしてNewSite from Gitからさっき作ったリポジトリ選択してテキトーにポチポチ。
buildコマンドのところは下のやつ。

image.png

はいできた。URLにアクセスすると見れるね。

image.png

Settings -> Build & Deployの一番下にSlackと連携するところがある。他の記事探してみて、連携するといい。

image.png

Contentfulの準備

Contentfulをやっていく。
ログインして左メニューの+Add spaceからプロジェクトを作成、空プロジェクトで開始。(初回だと導線違うかも)、こんな感じ。

image.png

Content model -> +Add contenttypeで、スキーマを作る。とりあえず、下の感じで。Saveしてね。

image.png

次はContentからBlogのデータを作る。テキストそこら辺から拾ってきて入れておこう。

image.png

で、Netlifyと連携する。Settings -> Webhooksに行くと、Netlifyのアプリ追加あるじゃん、やるね。Netlify build hook URLはNetlifyで作ったやつのSettings -> Build & Deployの真ん中くらいで作れる。Build hook nameはContentfulとでもしておこう。出てきたURLを入力して連携完了。

image.png

いろいろ設定あるけど、とりあえず、Triggersだけ設定してSave。これで記事投稿したら自動的に更新される。

image.png

また、Gridsomeに戻ってブログを仕上げる。

Contentfulのデータ取得してみる

GridsomeにContentfulを有効化するモジュールも追加する、gridsome.config.jsで有効化する。まだContentfulを作ってな
いので、トークンは後で入力します。

yarn add @gridsome/source-contentful
gridsome.config.js
module.exports = {
  plugins: [
    {
      use: '@gridsome/source-contentful',
      options: {
        space: 'YOUR_SPACE', // required
        accessToken: 'YOUR_ACCESS_TOKEN', // required
        host: 'cdn.contentful.com',
        environment: 'master',
        typeName: 'Contentful'
      }
    }
  ]
}

optionsの中身はContentfulのSettings -> API Keysから作成できるので、作った値に書き換えておく。spaceはspaceIDを入れる。

image.png

これで、ようやくコードを書ける。
src/pages/Index.vueを書き換えてブログを表示していくことにする。まずはデータの取得をする。
サーバーを起動して、localhost:8080/__exploreを開く

yarn run develop

image.png

なんか、開いた。ここでGraphQLを試せる。下のやつコピペして貼り付けてみる。
それで、三角のやつ押してみる。

query Index {
  allContentfulBlog {
    totalCount
    edges {
      node {
        fields {
          title
          article
        }
      }
    }
  }
}

表示できた、いい感じ。

image.png

じゃあ、最後にIndex.vueで表示してみる。
<page-query>ってところにさっきのGraphQLのスキーマを書き込む。このデータは$pageでアクセスして使うことができる。

src/pages/Index.vue
<template>
  <Layout>
    <g-image alt="Example image" src="~/favicon.png" width="135" />
    <article>
      <h1>Articles ({{ $page.allContentfulBlog.totalCount }})</h1>
      <section v-for="edge of $page.allContentfulBlog.edges">
        <h2>{{ edge.node.fields.title }}</h2>
        <p>{{ edge.node.fields.article }}</p>
      </section>
    </article>
  </Layout>
</template>

<page-query>
query Index {
  allContentfulBlog {
    totalCount
    edges {
      node {
        fields {
          title
          article
        }
      }
    }
  }
}
</page-query>

じゃあ、localhost:8080にアクセスしてみる。多分動かない。リロードしたら動くはず。
page-queryはgridsome developの最初にスキーマをもとにデータを取得してくるので、データがないって怒られる。

image.png

あらためて、リロードしてlocalhost:8080にアクセスするとページが表示される。完成。

image.png

Gridsomeの今後について

今回、とりあえず作ってみたものの、現状だとGridsomeの実装がまだ実用レベルに足りてないので、Contentfulからの画像の表示とかができなかったりします。(できるのか...?)まあ、絶賛開発中なので長い目で見てみるといいかも。Gatsbyの勢いを見ると今後GridsomeもVueで使えるフレームワークとして結構いい感じになってくれると思います。楽しみ。

個人的には、Nuxt.jsってVue.js, JavaScriptの基礎力めっちゃいると思っていて、それに比べるとGridsomeは比較的ライトな仕組みだと思っています。今後Gridsomeを使ってJAMStackなサイトを作れるようになったらありがたいですね。

kokorau
渋家でニートをやっています
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした