microCMS をさわってみる その5

日本製のHeadless CMS、microCMSをさわってみる。その5

f:id:jotaki:20200303155515j:plain

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

API連携(詳細ページ)

詳細ページを作成する。
Nuxtでは pages/_id.vue とすると pages/[ContentID]/ ページへと動的ルーティングできるので _id.vue を作成する。

<template lang="pug">
  div
    p id: {{ post.id }}
    p title: {{ post.title }}
    div(
      v-html="post.content"
    )
    p
      nuxt-link(to="/") index
</template>

<script>
import axios from 'axios'

export default {
  async asyncData( { params } ) {
    const { data } = await axios.get(
      `${process.env.API_URL}/${params.id}`,
      {
        headers: { 'X-API-KEY': process.env.API_KEY }
      }
    )
    return {
      post: data
    }
  }
};
</script>

一覧側のコンポーネント Post.vue には <nuxt-link> をつけてあげる。

<template lang="pug">
  li
    nuxt-link(:to="`/posts/${post.id}/`")
      p id: {{ post.id }}
      p title: {{ post.title }}
</template>

できあがった画面は、一覧

f:id:jotaki:20200304142212p:plain

詳細

f:id:jotaki:20200304142220p:plain

残りやること

  • generate設定
  • webhook設定(microCMSを更新したら自動ビルドが走るようにする)

microCMS をさわってみる その4

日本製のHeadless CMS、microCMSをさわってみる。その4

f:id:jotaki:20200303155515j:plain

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

API連携(一覧ページ)

.env設定

まず.envにAPIキーなど環境設定を行います。
下記の記事通りでいけます。
Nuxt.jsとmicroCMSで採用ページを作成してみよう!

nuxt.config.js

require("dotenv").config();
const { API_KEY, API_URL } = process.env;

export default {
  // ...
  env: {
    API_KEY,
    API_URL
  }
  // ...
}

.env
microCMSのAPIキーは「APIリファレンス」から取得したものを貼り付けます。

API_KEY=APIキー
API_URL=https://jtk.microcms.io/api/v1/demo

これで各.vueファイルで process.env.API_KEY のように process.env. を前につけて環境設定を読み込めます。

下ごしらえができたら、一覧ページのAPI連携をしてみます。

  • components/Posts.vue (リスト用)
  • components/Post.vue (アイテム用)

の.vueファイル2つ作ります。

index.vue

トップページの大元ファイルではPosts(リスト用コンポーネント)を読み込みします

<template lang="pug">
  div
    Logo
    Posts
</template>

<script>
import Logo from '~/components/Logo.vue'
import Posts from '~/components/Posts.vue'

export default {
  components: {
    Logo,
    Posts
  }
}
</script>

components/Posts.vue (リスト用)

一覧用コンポーネントファイルでは axios 使ってAPIを読み込みします。
また子コンポーネント Post に値を受け渡すので :bind しておきます。

<template lang="pug">
  ul
    Post(
      v-for="(post,index) in posts"
      :key="index"
      :post="post"
    )
</template>

<script>
import axios from 'axios'
import Post from '~/components/Post.vue'

export default {
  name: 'Posts',
  components: {
    Post
  },
  data() {
    return {
      posts: []
    }
  },
  mounted :function(){
    axios.get(
      process.env.API_URL,
      {
        headers: { "X-API-KEY": process.env.API_KEY }
      }
    )
    .then( response => {
      this.posts = response.data.contents
    })
    .catch( error => {
      console.log(error)
    })
  }
}
</script>

components/Post.vue (アイテム用)

アイテム用コンポーネントファイルでは props でデータを受け取って描画します。

<template lang="pug">
  li
    p id: {{ post.id }}
    p title: {{ post.title }}
</template>

<script>
export default {
  name: 'Post',
  props:{
    'post': {
      type: Object,
      default: ''
    }
  }
}
</script>

これで投稿の描画を実装できました。

f:id:jotaki:20200304130640p:plain

残りやること

  • API連携(詳細ページ)
  • generate設定
  • webhook設定(microCMSを更新したら自動ビルドが走るようにする)

microCMS をさわってみる その3

日本製のHeadless CMS、microCMSをさわってみる。その3

f:id:jotaki:20200303155515j:plain

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

モジュールのインストール

  • sass-loader node-sass (.scss)
  • @nuxtjs/style-resources (共通読み込み .scss 用)
  • pug (pug)
  • pug-loader(pug)
  • pug-plain-loader(pug)
  • ress(リセットcss

それぞれ $ npm i -D でインストール。
nuxt.config.js に設定が必要なものは追記する。
設定はだいたい以前の内容と同じ。

Netlify でサイト作成

これも 前回 通り。generate設定はまた後で行う(できるかな?)

まず New site from Git ボタン選択

f:id:jotaki:20200303181529p:plain

デプロイ対象サービスをGitHub

f:id:jotaki:20200303181543p:plain

リポジトリを選択

f:id:jotaki:20200303181555p:plain

ビルド設定(ブランチ、コマンド、対象フォルダ)を設定

f:id:jotaki:20200303181607p:plain

Nuxt側の動的ページ生成はできていませんが以上で設定完了
https://trusting-hawking-c6baee.netlify.com/

次回はgenerate設定 or API連携をします。

microCMS をさわってみる その2

日本製のHeadless CMS、microCMSをさわってみる。その2

f:id:jotaki:20200303155515j:plain

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

Nuxtのインストール

GitHubリポジトリ作ってNuxtプロジェクトを作成

$ npx create-nuxt-app [ProjectFolderName]

今回はこんな感じに初期設定
モジュールに DotEnv 入れるとかできたんですね

create-nuxt-app v2.14.0
✨  Generating Nuxt.js project in /PATH/[ProjectFolderName]
? Project name micro-cms-demo
? Project description My cat's meow Nuxt.js project
? Author name Yuhei Jotaki
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, DotEnv
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools 

🎉  Successfully created project micro-cms-demo

Nuxtの起動

$ cd [ProjectFolderName]
$ npm run dev

これで

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.11.0                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

となるはずなので、 http://localhost:3000/ でプレビューしながら構築する。

f:id:jotaki:20200303160519p:plain

次回はNuxtもろもろ設定をする。

microCMS をさわってみる その1

日本製のHeadless CMS、microCMSをさわってみる。その1

f:id:jotaki:20200303155515j:plain

GitHub: https://github.com/yuheijotaki/micro-cms-ramen
Netlify: https://ramen.yuheijotaki.dev/

やること

microCMSの登録

https://app.microcms.io
アカウント登録してとりあえず無料プランではじめる。

・ID、パスワード、認証コードなど入力。
・プロジェクト名、API、エンドポイントを入力。

APIの型はリスト形式に

f:id:jotaki:20200303155536p:plain

・ひとつスキーマを作成

フィールドID: title
表示名: タイトル
種類: テキストフィールド

f:id:jotaki:20200303155600p:plain

・ひとつコンテンツ入稿

タイトルに タイトル01 と仮で入れて公開。

f:id:jotaki:20200303155613p:plain

ざっくりこれでAPIが作れる。10分もかからないと思います。
次回はNuxtのインストールからやってみます。

API仕様書 API blueprint でつくってみる

f:id:jotaki:20200302175407p:plain

microCMS を使っているプロジェクトがあり、はじめてAPIというものをそれらしく作っているのですがドキュメント出力みたいな機能はなさげなのでサードパーティーのツールを調べて使ってみました。

まず有名どころとしては

があるらしいですね。Swaggerは他の案件でも使われているのは見ていて、API GatewayへもSwaggerで作ったファイルをインポートできるとかをデベロッパー資格の勉強の際に見たので知ってました。
ただSwaggerは高機能が故、複雑そうで学習コストも高いとのこと。
なので最初は API blueprint を使ってみることにしました。

API blueprint とは

APIの仕様書を簡単にかつ明確にドキュメントにできるツール(言語)

API Blueprint でAPI設計書を書く 超入門編 Part1 - Qiita

言語というのを知らなく単純なツールと勘違いしていたのですが、 sample.apib みたいな API blueprint 用のファイル(マークダウン形式のドキュメント)を用意して、それをhtmlに変換して共有なりをする流れで使うようです。

仕様書の作成

早速やってみました。

.apib ファイルの作成

今回は /docs/sample.apib というファイルで下記を書いてみます。

FORMAT: 1A
HOST: http://localhost/api

# Sample API
this is sample API document.

## データの説明 [GET /user]
ここにデータの説明が入ります。

+ Request
    + Headers
        ```
        Authorization: {token}
        ```

+ Response 200 (application/json)
    + Body
        ```
        {
            "id": 1,
            "name": "sample-name"
        }
        ```

ドキュメントのプレビュー

aglio というレンダラーを使うと、ローカルサーバーを立ててプレビューしたり、.htmlへの出力ができる。

aglio のインストール

$ npm install -g aglio

node.js のバージョン、12.x系 だとエラーになったので v10.15.0 でインストールしました。

$ cd docs
$ aglio -i sample.apib --server

とすると http://127.0.0.1:3000/ でプレビューできるので、 .apib を編集してプレビューしてを繰り返す。

ドキュメントのHTML生成

$ cd docs
$ aglio -i sample.apib -o sample.html

で (sample).html が生成される。 aglio -i [input file] -o [output file] の形式です。

f:id:jotaki:20200302182549p:plain

--theme-variables slate --theme-template triple のようにオプション付与すると、htmlテーマやレイアウトの変更が可能。

書き方

API Blueprintはとっつきやすい評があったものの、自分はちょいと試行錯誤しながらやりました。

公式 をちょろちょろ見ながらやりましたが、雛形分からないのでQiitaから拾ってきてそれベースに改良。

microCMSの場合下記を使いまわせばBodyとSchemaが構造通りになるかと

FORMAT: 1A
HOST: https://hoge.microcms.io/api/v1

# hoge
hoge

## 一覧 [GET /hoge]
一覧

+ Request
    + Headers
        ```
        X-API-KEY: `APIキー`
        ```

+ Response 200 (application/json)
    + Attributes
        + contents (array[object], fixed-type)
            + (object)
                + id: `XXXXX` (string) - ID
                + text: `XXXXX` (string) - テキストフィールド
                + img: (object) - 画像
                    + url: `XXXXX` (string)
                + multi: (array[object], fixed-type) - 複数コンテンツ参照
                    + (object)
                        + id: `XXXXX` (string) - コンテンツID

つまづきポイントとして type を array にしたときにうまく Body に反映されないみたいなことが起こったのですが、(array[object], fixed-type) と書けばいけました。(下記参照)
API Blueprint(aglio)で、生成されたSchemaのarrayにitemsがない - Qiita

変数とかいろいろ使えるみたいですが、全体の10%も理解できていなそう..なので引き続き機会あればいじってみようと思います。

ほか参考

【読書メモ】イラスト図解式 この一冊で全部わかるWeb技術の基本

AWSの資格取得通して、インフラ/サーバーに関してもそうですがそもそもWebの基本があんま分かっていないなということがあったので標題の本を読みました。

概要・ポイント

  • 第1章 Web技術とは
  • 第2章 Webとネットワーク技術
  • 第3章 HTTPでやりとりする仕組み
  • 第4章 Webのさまざまなデータ形式
  • 第5章 Webアプリケーションの基本
  • 第6章 Webのセキュリティと認証
  • 第7章 Webシステムの構築と運用

内容的には例えば「HTTPメッセージ」の項目を見開きで左ページに説明、右ページに図解の形式で各章10〜15項目くらいで構成されています

自分のイメージしていた技術でいえば2章〜5章くらいの範囲で、第1章はWebの成り立ち的なこと含めて書いており、第6章以降はセキュリティやインフラ周りとWebがどう絡むかがメインでした。
良くも悪くも広く浅く網羅されているので、そのような支える技術があって成り立っているということを理解できるのが良かったかなと思います。

特に自分は通信周りが弱いと思っているので、そういうところがカバーされている点が良かったです。

プロトコルとは

プロトコルとはネットワークに接続された機器同士が通信をするときの、あらかじめ決められた共通のルールや手順のことをいいます。

TCP/IPとは

TCP/IP(Transmission Control Protocol/Inteernet Protocol)とはインターネットにおけるさまざまなサービスを実現するためのプロトコルの集まりのことをいいます。

HTTPもTCP/IPの一部。その他FTP(ファイル送受信)、SMTP(メール送信)、POP(メール受信)など用途によってさまざまなプロトコルが存在する。

HTTPメッセージ

HTTP(HyperText Transfer Protocol)はその名の示すとおり、「Hyper Text」つまりHTMLなどのテキストファイルや、画像などのコンテンツをやりとりするときに使われるプロトコルです。

HTTPリクエスト/レスポンスの構成要素を初心者にも分かるように解説してみた - Qiita

2種類のHTTPメッセージ

Webeブラウザからの要求である「HTTPリクエスト」と、Webサーバーからの応答である「HTTPレスポンス」の2種類に分けることができます。

HTTPリクエス

HTTPリクエストは、「リクエスト行」「メッセージヘッダー」「メッセージボディ」の3つに分けることができます。

HTTPリクエストを用いてWebサーバーに具体的な要求内容を伝えているのは、HTTPリクエスト内に含まれる「HTTPメソッド」です。

HTTPレスポンス

HTTPレスポンスは、「ステータス行」「メッセージヘッダー」「メッセージボディ」の3つに分けることができます。

ステータスコード

HTTPレスポンス内にはHTTPリクエストに対するWebサーバー内での処理結果が含まれています。それが「ステータスコード」です。

HTTP レスポンスステータスコード - HTTP | MDN

良かった点

  • Webの成り立ち、通信、扱うデータ、セキュリティ、インフラまで浅くではあるが網羅できる内容だった。
  • 1項目見開き1ページなので合間時間でも読み切りやすい。
  • 図解がわかりやすかった。
  • サーバー周りはオンプレの内容も多く、自分はクラウドAWS)からそれらを知ったので興味深かった。(ロードバランサーなど)
  • 「SCOTT/TIGER」 のようなプラスワンがおもしろかった。

惜しかった点

  • 特になし

まとめ

結構ためになったことが多く、たまに見返すのにもいい本かなと思います。
同じシリーズで、サーバーの基本/ネットワークの基本/セキュリティの基本/クラウドの基本 が出ているので時間あるとき制覇したいなと思います。