技術

## 概要

batファイル内でPowerShellのコマンドを実行する方法を説明します。

## コードの例

batファイルの例です。

```batch{3}:title=test.bat
@echo off
echo PowerShell処理：SJIS→UTF8
PowerShell.exe -Command "Get-Content SJIS.txt | Set-Content -Encoding UTF8 UTF8.txt"
echo PowerShell処理終了
echo.
pause
```

### コードの解説

`PowerShell.exe -Command` に続けて実行したいPowerShellのコマンドを`""`で囲って記載します。

## 追加の解説：PowerShellのコマンドを別ファイルに記載する

上の例ではPowerShellのコマンドをbatファイル内に直接記載していますが、別ファイルに分けることも可能です。

```powershell:title=ext-powershell.txt
Get-Content SJIS.txt | Set-Content -Encoding UTF8 UTF8.txt
```

```batch{3}:title=test.bat
@echo off
echo PowerShell処理：SJIS→UTF8
PowerShell.exe -Command "Invoke-Expression -Command ((Get-Content "ext-powershell.txt") -join \"`n\")"
echo PowerShell処理終了
echo.
pause
```

### 別ファイル記載版のコードの解説

`Get-Content`で、ext-powershell.txtの内容を読み取ります。

改行コードが取り除かれた状態で取得をするので、

```-join \"`n\"```

で改行コードを追加してあげます。

`Invoke-Expression`は引数に文字列を渡してあげると、渡した文字列がコマンドとして実行できるようになる命令です。

まとめると、

1. `Get-Content`で外部ファイルの内容を取得
2. `-join～`で改行コードを追加
3. `Invoke-Expression`で読み取った文字列をコマンドに変換

## 参考

コードの例と解説は下記サイトを参考にさせていただきました。

[バッチファイルにPowerShellスクリプトを埋め込む - Programming Field](https://www.pg-fl.jp/program/tips/ps1bat.htm)


batファイル内でPowerShellのコマンドを実行する方法を説明します。

batファイル内でPowerShellのコマンドを実行したい

## 概要

yarn.lockファイルに記載されている依存関係の更新方法を説明します。

## 起こったこと

yarnでpackage管理しているプロジェクトで、下記メッセージが表示されました。

```shell
next-pwa > workbox-webpack-plugin > workbox-build > rollup > fsevents@2.1.3: "Please update to latest v2.3 
or v2.2"
```

workbox-webpack-plugin以下はnext-pwaが依存しているpackageで、直接package.jsonには指定していない=**yarn.lockファイルのみに依存関係が指定されている**状態です。

## 解決方法

1. yarn.lockファイルを削除
2. node_modulesフォルダを削除
3. 下記コマンドを実行

```shell
yarn install
```

package.jsonの内容でyarn.lockファイルの再作成が行われて無事解決しました。


yarn.lockファイルに記載されている依存関係の更新方法を説明します。

yarn.lockファイルの依存関係を更新する

2021年はPythonの年にしたいなと個人的には思っています。

Pythonの学習を進めるため、まずはインストールを行います。

## 環境

インストールする環境は下記の通りです。

- インストール先：Ubuntu 20.04.1 LTS
- Pythonのバージョン：3.9.1

デフォルトではPython3.8.2がインストールされていました。

今回は2021/1/19時点の最新でPython3.9.1をインストールします。

## インストール方法

- 参考ページ１：[Ubuntu環境のPython](https://www.python.jp/install/ubuntu/index.html)
- 参考ページ２：[非公式Pythonダウンロードリンク](https://pythonlinks.python.jp/ja/index.html)

下記のコマンドを順番に実行していきます。

### パッケージ一覧の更新

```shell
sudo apt update
```

### 必要なツール類のダウンロード

```shell
sudo apt install build-essential libbz2-dev libdb-dev \
libreadline-dev libffi-dev libgdbm-dev liblzma-dev \
libncursesw5-dev libsqlite3-dev libssl-dev \
zlib1g-dev uuid-dev tk-dev
```

### Pythonのソースコードのダウンロード・展開

```shell
wget https://www.python.org/ftp/python/3.9.1/Python-3.9.1.tar.xz
tar xJf Python-3.x.y.tar.xz
```

### ビルド

UbuntuにはPythonを複数バージョンインストールすることができます。

`python3`コマンドと、`python3.x`コマンドでバージョンの使い分けができます。

この使い分けは、ビルド時の設定で決まります。

下記はデフォルトのバージョンを崩さないための指定です（今回の場合は、python3を実行すると、デフォルトでインストールされている3.8.2が実行されるようにする）。

```shell
cd Python-3.9.1
./configure
make
sudo make altinstall
```

今回インストールしたバージョンを使用したい場合は、`python3.9`コマンドを実行します。

このときに、

```shell
cd Python-3.9.1
./configure
make
sudo make install
```

と指定すると、`python3`コマンドを実行したときにバージョン3.9.1が実行されるようになります。

### 動作確認

最後に、今回インストールしたpython3.9.1が動くか確認します。

```shell
python3.9
```

下記のような表示が出てくればOK（表示は`sudo make install`でデフォルトでインストールした場合）。

```shell
Python 3.9.1 (default, Jan 19 2021, 23:36:47) 
[GCC 9.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> 
```

`ctrl+D`で抜けることができます。

今回は以上です。

Ubuntu20.04.1にPython3.9.1をインストールしました。方法をまとめます。

PythonをUbuntuにインストールする方法(ver 3.9.1)

## データベーススペシャリストに受かった

2020/10/18のデータベーススペシャリスト試験に合格しました。

![database-specialist-how-to_1](//images.ctfassets.net/8fdt4k4c3spd/2Xdp5s4huquvse4aIv4Ktv/724033c52036ff28a2a1c2917756d459/database-specialist-how-to_1.png)

正直午後Ⅱで爆死したと思っていました。ぎりぎりではありますが、なんとか合格できました。

記憶が残っているうちにデータベーススペシャリスト合格に向けて何を勉強したのかをまとめてみたいと思います。

## 前提

- 今回が２回目の受験です。前回は午後Ⅱまでいって落ちました。
- 午前Ⅰは免除済み。
- OracleマスターBronze取得済み。
- 業務でデータベース設計はあまりやらない。SQLはそれなりに書く。

## 勉強の仕方

### 参考書

翔泳社の『データベーススペシャリスト 情報処理技術者試験学習書２０２１年版』を使っていました。

いわゆるみよちゃん本ですね。

<div class="cstmreba"><div class="kaerebalink-box"><div class="kaerebalink-image"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_20210105010431679?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2f86dd35ea1521f07501b93000996ae9%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2f86dd35ea1521f07501b93000996ae9%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/798/167/770/20010009784798167770_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info"><div class="kaerebalink-name"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_20210105010431679?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2f86dd35ea1521f07501b93000996ae9%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2f86dd35ea1521f07501b93000996ae9%2F" target="_blank" rel="nofollow" >うかる！データベーススペシャリスト 情報処理技術者試験学習書 ２０２１年版 /翔泳社/ＩＴのプロ４６</a><div class="kaerebalink-powered-date">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail"></div><div class="kaerebalink-link1"><div class="shoplinkrakuten"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_20210105010431679?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2f86dd35ea1521f07501b93000996ae9%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2f86dd35ea1521f07501b93000996ae9%2F" target="_blank" rel="nofollow" >楽天市場</a></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/gp/search?keywords=%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AA%E3%82%B9%E3%83%88&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=sakelog-22" target="_blank" rel="nofollow" >Amazon</a></div></div></div><div class="booklink-footer"></div></div></div>

この本は参考書というよりは、過去問集に近いかもしれません。

おまけとして過去20年近くの過去問とその解説PDFがダウンロードでき、そっちがむしろメイン。

私はKindle版を購入し、iPadの画面上で左に参考書もしくは過去問PDF、右にノートというスタイルで学習していました。

参考：[iPadを使った勉強法](/ipad-study)

### ひたすらノートにまとめる

前回の試験やJava silverの試験で知識の整理が足りていないなぁと感じたので、今回は**知識を整理して身につけること**を第一目標とするスタイルにしました。

（前回、直前に知識をがっと詰め込みすぎて、多対多の連関エンティティの矢印逆に書いたんですよね…。それがなかったら一発で受かってたかも…とほほ）

参考書を読みながら、わからない箇所をネットでググって補足したり、過去問解いてここは弱いポイントだなと感じたところをまとめたり……自分専用の参考書をつくるつもりでノートにまとめていきました。

作ったノートは3つ

1. 詳細情報をまとめたノート
2. マインドマップ（用語のつながり整理用）
3. 過去問ノート（過去問の問題と回答、自分なりの解説、確認したほうが良い項目を記載）

### 午前Ⅱはそこまで対策しないことにした

午前Ⅱは過去問道場１周したのと、3回分ぐらい時間はかって過去問といてみて8割近く取れていたので、それ以上は対策しないことにしました。

正直午前Ⅱは問題数が少ないので、運も大きいかなぁと思っています。

## モチベーションの保ち方

次に、試験を受けるまでのモチベーションの保ち方についてまとめます。

よっぽど勉強が好きな人以外はここが一番のネックですね。

### ガッキーと結婚できる

データベーススペシャリストといえば……ガッキーと結婚できる資格として有名ですね（ごめんなさい、逃げ恥ネタです）。

この資格を取ればガッキーと結婚できるんや…わいは平匡さんになるんや…という謎の根性でモチベーションを保ちました（知らんけど）。

個人的に資格試験のモチベーションの保ち方は思い込みが大事だと思っています。

どうせ期間が決まっているので、変な思い込みでもとりあえず熱が冷めなければOK。

ま、結局試験１ヶ月前ぐらいはほぼノー勉だったりしましたが……。

### 業務でSQL使う機会が増えた

元々は汎用機でCOBOLとJCLをいじったり、要件定義やら人の作ったもののレビューやらしていたわけで。

SQLはWordpressで個人サイト作っていた時代に何回かいじったかな〜程度。あと、OracleマスターBronzeの試験勉強でMySQLたたいて確認したりしてた。

COBOLでもSQL扱えるんですけどね。単純に業務の領域的に機会がなかった。

それが最近は業務でもSQLを使う機会が増えました。

単純に業務で使っている知識ってモチベーション上がりますよね。

## こうすれば受かりやすいんじゃないかなぁ〜

最後にこうすれば受かりやすくなるかも？なポイントをまとめておきます。

### 午後Ⅱは問2に絞る

午後Ⅱは問2(概念データモデル)一択が安定すると思います。

傾向は徐々に変わってきているらしいですが、みよちゃん本の対策方法が通用しやすいかなぁと思います。

ひたすらお絵かきの練習しましょう。

実際に午後Ⅱ解く前に、E-R図と正規化の知識までは身につけておいた方が良いです。

時間はかかるかもしれないですが自力で解ける度があがります。

正規化は第3正規化まででOK。

### 午後Ⅰ・Ⅱはみよちゃん本で最重要問題として紹介されている問題に絞って解く

午後Ⅰと午後Ⅱは最重要問題として紹介されている問題に絞って過去問を解いていくと良いと思います。

ちなみに午後Ⅱの問１はやる気と時間が足らず解きませんでした。

午後Ⅱは何周もするというよりは、解説を読み込んで、なんでその答えになるのかを理解する、今足りてない知識がなんなのかを確認して整理するというようにした方が良いかも。

午後Ⅱは解くのに時間かかりますしね。

午後Ⅰは2周ずつぐらい解きました。

### 試験本番は定規があった方が良い

データベーススペシャリストはかなり「作図」を求められる試験なので定規があった方が良いです。

いや、普通は持っていくもんなのかもしれないですが、私は１回目の試験フリーハンドで特攻してなかなかストレスだったので……。

なんとなく図のきれいさも合否に関係しているんじゃ…？なんて気もします（IPA様のみぞ知る）。

## まとめ

今回のデータベーススペシャリストに受かった要因を一言でまとめると、**解いた問題数よりちゃんと理解できてることが大事**ということです。

あとは運もやっぱり大事。

試験である以上、受験までの時間は限られているので限られた時間の中でできるだけのことやって後は祈るだけ！ ですね。

この記事がこれからデータベーススペシャリスト受ける人の参考になればうれしいです。

2020年10月のデータベーススペシャリストに合格したので、受かるまでにやった勉強をまとめあす。

データベーススペシャリスト合格　受かるまでの勉強方法をまとめた

この記事では文字の横に線がびよーんと伸びる見出しスタイルの作成の仕方について説明します。

![head-style-sideline 1](//images.ctfassets.net/8fdt4k4c3spd/50UQpegFZ0u6Mf7G7dF4zg/5c450499117fa00ee94c3552b2872324/head-style-sideline_1.png)

画像のようなスタイルです。

## 指定するタグ

```html:title=html
<h1 class="sideLine">見出し</h1>
```

```css:title=css
.sideLine {
  display: flex;
  align-items: center;
}
.sideLine:before,
.sideLine:after {
  content: '';
  height: 1px;
  flex-grow: 1;
  background-color: #000000;
}
.sideLine:before {
  margin-right: 20px;
}
.sideLine:after {
  margin-left: 20px;
}
```

## タグの解説

```css
.sideLine {
  display: flex;
  align-items: center;
}
```

見出しを`display:flex`にすることで、要素を横並びにしています。

`align-items: center;`で縦の位置が中央にそろうように設定。

```css
.sideLine:before,
.sideLine:after {
  content: '';
  height: 1px;
  flex-grow: 1;
  background-color: #000000;
}
```

見出しの前後に空の要素を作ります。

`flex-grow: 1;`で自動的に親要素全体に線が伸びるように設定。

`height`を変えると線の太さが、`background-color`を変えると線の色が変わります。

```css
.sideLine:before {
  margin-right: 20px;
}
.sideLine:after {
  margin-left: 20px;
}
```

それぞれに`margin`を設定して、文字との間の隙間を設定しています。

## おまけ：scssでの指定方法

最近はスタイルをscssで作成することが多いので、scssでの指定方法も記載しておきます。

```scss
.sideLine {
  display: flex;
  align-items: center;
  &:before,
  &:after {
    content: '';
    height: 1px;
    flex-grow: 1;
    background-color: #000000;
  }
  &:before {
    margin-right: 20px;
  }
  &:after {
    margin-left: 20px;
  }
}
```

文字の横に線がびよーんと伸びる見出しスタイルをCSSで実現する方法について説明します

CSSで文字の横に線がびよーんと伸びる見出しを作成する

## 概要

GatsbyJSで現在のページを含めて指定のページ数を表示するペジネーションの作り方です。

１ページ目と最終ページは常に表示されるようにしています。

## ペジネーション部分のソースコード

ペジネーションはコンポーネント化しています。

```typescript:title=pagination.tsx
import * as React from 'react'
import { Link } from 'gatsby'

interface PaginationProps {
  numPages: number
  currentPage: number
  pathBase?: string
}

const Pagination = ({ numPages, currentPage, pathBase }: PaginationProps) => {
  const isFirst = currentPage === 1
  const isLast = currentPage === numPages
  const pageLimit = 3
  const omitFirst = currentPage - 1 > pageLimit
  const omitLast = numPages - currentPage > pageLimit
  const prevPage =
    currentPage - 1 === 1 ? pathBase : pathBase + (currentPage - 1).toString()
  const nextPage = pathBase + (currentPage + 1).toString()

  const prevText = '前へ'
  const nextText = '次へ'
  const paginationTag =
    numPages !== 1 ? (
      <nav className="pagination">
        <div>
          {!isFirst ? (
            <Link to={prevPage} rel="prev">
              {prevText}
            </Link>
          ) : (
            <span>{prevText}</span>
          )}
        </div>

        <div>
          <ul>
            {
              /*FirstPage*/
              !isFirst && (
                <div>
                  <li className="number--firstlast">
                    <Link to={pathBase}>1</Link>
                    {omitFirst && <span>…</span>}
                  </li>
                </div>
              )
            }
            {Array.from({ length: numPages }, (_, i) =>
              i + 1 === currentPage ? (
                <li
                  key={`pagination-number${i + 1}`}
                  className="number--current"
                >
                  <span>{i + 1}</span>
                </li>
              ) : (
                i > 0 &&
                i < numPages - 1 &&
                currentPage - pageLimit < i + 1 &&
                i + 1 < currentPage + pageLimit && (
                  <li
                    key={`pagination-number${i + 1}`}
                    className="number--link"
                  >
                    <Link to={pathBase + (i === 0 ? '' : i + 1)}>{i + 1}</Link>
                  </li>
                )
              )
            )}
            {
              /*LastPage*/
              !isLast && (
                <li className="number--firstlast">
                  {omitLast && <span>…</span>}
                  <Link to={pathBase + numPages}>{numPages}</Link>
                </li>
              )
            }
          </ul>
        </div>

        <div>
          {!isLast ? (
            <Link to={nextPage} rel="next">
              {nextText}
            </Link>
          ) : (
            <span>{nextText}</span>
          )}
        </div>
      </nav>
    ) : null

  return paginationTag
}

export default Pagination

```

`const pageLimit = 3`の部分の数字を変えると表示する範囲を変えられます。

## 使い方

**gatsby-node.js** に下記のようにコンテキストを持たせます。

```typescript{9-14}:title=gatsby-node.js
  // Contentful Post List
  const cflPostsPerPage = 5
  const cflNumPages = Math.ceil(cflPosts.length / cflPostsPerPage)

  Array.from({ length: cflNumPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/` : `/${i + 1}`,
      component: blogPostListTemplate,
      context: {
        limit: cflPostsPerPage,
        skip: i * cflPostsPerPage,
        numPages: cflNumPages,
        currentPage: i + 1,
      },
    })
  })
```

記事一覧など、ペジネーションを呼び出したい箇所で、作成したペジネーションコンポーネントを呼び出します。

```typescript
import * as React from 'react'
import { graphql, Link } from 'gatsby'

//Component
import Layout from '../components/layout'
import Pagination from '../components/pagination'

const _ = require('lodash')

interface BlogListType {
  pageContext: {
    currentPage: number
    numPages: number
  }
  data: TempblogListQuery
}

const BlogList = ({ pageContext, data }: BlogListType) => {
  const posts = data.cfPosts.edges
  const { currentPage, numPages } = pageContext
・
・
・
  return (
    <Layout>
・
・
・
      <Pagination numPages={numPages} currentPage={currentPage} pathBase="/" />
    </Layout>
  )
}

export default BlogList
・
・
・
```

ペジネーションのスタイル指定はお好みでどうぞ。


GatsbyJSで表示範囲指定ありのペジネーションを作成するためのソースコードを紹介しています。

GatsbyJSで表示範囲指定ありのペジネーションを作成する方法

## iPadでノートとペン、参考書がひとまとまりに
iPadを購入して、資格試験（データベーススペシャリスト）に向けた勉強をiPadのみで行ってみました。

購入したのが6月、データベーススペシャリストの試験が10月なので、4ヶ月使ったことになります。

自分の中でも使い方がかなり固まってきたので、ご紹介していきたいと思います。

## 使っているデバイスの紹介
まずは使用しているiPad本体と周辺機器から紹介していきます。

### 11インチのiPad Pro(2020年版)
本体は[iPad Pro 2020年版](https://www.apple.com/jp/ipad-pro/)。
画面サイズは11インチ、容量は128GBです。

本体の大きさはB5サイズとほぼ同じぐらいですね。

iPad Proを選んだ理由は、Apple Pencilの第2世代が使えるから。

2020年10月現在、Apple Pencil第2世代はiPad Proのみに対応しています。

その他のiPadシリーズでも第1世代のApple Pencilなら使えます。

第1世代と第2世代の大きな違いは充電の仕方です。

第1世代はおしりのところが外れるようになっていて、ライトニング端子がついています。
ライトニング端子をiPad本体につなげて、充電をします。

一方、第2世代はiPad本体にマグネットでぱっとくっつける。これだけで充電ができます。

私はずぼらな性格なので、昔から電子機器のこまめな充電というものが苦手で……。

第2世代であれば、iPad本体の充電さえして、Apple Pencilは常に本体にくっつけておけば充電の心配はないな、と感じたわけです。

そして見事に大当たりでした。

4ヶ月使う中で、Apple Pencilの充電が足りずに困った！という事態は起きていません。

### Apple Pencil第2世代
iPad Proのところで大分語ってしまっていますが、そもそもiPadが使いたいというより、Apple Pencilが使いたかったというのが大きいです。

[Apple Pencil第2世代](https://www.apple.com/jp/shop/product/MU8F2J/A/apple-pencil%E7%AC%AC2%E4%B8%96%E4%BB%A3)

Java Silver合格までにやったことのまとめ記事でも書いているのですが、元々資格試験に向けた勉強を紙の問題集とペンでやっていて、持ち歩きがかなり重たかった……。

[Oracle認定Java Silver合格！合格のためにやったことまとめ](/study-for-java-silver/)

Apple Pencilで問題を解くところを電子化できれば、問題集を持ち歩く必要がなくなるなと思ったわけです。

元々参考書はKindle版で購入して、スマホで見ることが多かったので、「書く」というところが電子化できるというのが大きかった。

現状、一番ストレスなく使えそうなタブレットとペンの組み合わせがiPad ProとApple Pencilかなと思います。

### 本体カバー
本体カバーはマグネットでくっつくやつを使っています。

純正品ではなく、Amazonで売っている安いものです。

本体を保護するというよりは、Apple Pencilがはずれてどこかに行ってしまうというのを防止するために使っています。

<div class="cstmreba"><div class="kaerebalink-box"><div class="kaerebalink-image"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_202010250105255856?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/ran/img/1001/0004/589/753/078/598/10010004589753078598_1.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info"><div class="kaerebalink-name"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_202010250105255856?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F" target="_blank" rel="nofollow" >ESR 11インチiPad Pro 第2世代/第1世代 用ケース Smart Folio ブラック ES18859</a><div class="kaerebalink-powered-date">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail"></div><div class="kaerebalink-link1"><div class="shoplinkrakuten"><a href="https://hb.afl.rakuten.co.jp/hgc/g0000016.d5yy4620.g0000016.d5yy5001/kaereba_main_202010250105255856?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F&m=http%3A%2F%2Fm.product.rakuten.co.jp%2Fproduct%2F2a2ca568f8f4adf2bf091ee0f0e9f299%2F" target="_blank" rel="nofollow" >楽天市場</a></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/gp/search?keywords=ESR%20iPad%20Pro%2011%20%E3%82%B1%E3%83%BC%E3%82%B9&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=sakelog-22" target="_blank" rel="nofollow" >Amazon</a></div></div></div><div class="booklink-footer"></div></div></div>

### ペーパーライクフィルム

画面にはペーパーライクフィルムを貼っています。

ペーパーライクフィルムとは表面がざらざらしている液晶フィルムのこと。Apple Pencilが引っかかることで、紙のような書き心地になります。

何もないとつるっとしすぎてペンが滑っていってしまうので、iPadをノートのように使うなら必須だと思います。

<div class="cstmreba"><div class="kaerebalink-box"><div class="kaerebalink-image"><a href="https://hb.afl.rakuten.co.jp/hgc/g00tm716.d5yy4646.g00tm716.d5yy5d6c/kaereba_main_202010250922365007?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Ftszshop%2F4919600864757%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Ftszshop%2Fi%2F10018308%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/tszshop/cabinet/r_1583407016/4919600864757.jpg?_ex=320x320" style="border: none;" /></a></div><div class="kaerebalink-info"><div class="kaerebalink-name"><a href="https://hb.afl.rakuten.co.jp/hgc/g00tm716.d5yy4646.g00tm716.d5yy5d6c/kaereba_main_202010250922365007?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Ftszshop%2F4919600864757%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Ftszshop%2Fi%2F10018308%2F" target="_blank" rel="nofollow" >「JPフィルター専門製造所」iPad Pro 12.9 2018-2020年モデル用 ペーパーライク フィルム 紙のような描き心地 反射低減 非光沢 アン</a><div class="kaerebalink-powered-date">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail"></div><div class="kaerebalink-link1"><div class="shoplinkrakuten"><a href="https://hb.afl.rakuten.co.jp/hgc/16f1452c.e6258d90.16f1452d.b13f27e1/kaereba_main_202010250922365007?pc=https%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FJP%25E3%2583%2595%25E3%2582%25A3%25E3%2583%25AB%25E3%2582%25BF%25E3%2583%25BC%25E5%25B0%2582%25E9%2596%2580%25E8%25A3%25BD%25E9%2580%25A0%25E6%2589%2580%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt&m=http%3A%2F%2Fm.rakuten.co.jp%2F" target="_blank" rel="nofollow" >楽天市場</a></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/gp/search?keywords=JP%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E5%B0%82%E9%96%80%E8%A3%BD%E9%80%A0%E6%89%80&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=sakelog-22" target="_blank" rel="nofollow" >Amazon</a></div></div></div><div class="booklink-footer"></div></div></div>

## 使っているアプリの紹介

ここからは具体的に使っているアプリについてご紹介していきます。

### ノート編１：GoodNotes 5

<div class="appreach"><img src="https://is2-ssl.mzstatic.com/image/thumb/Purple114/v4/eb/d9/b0/ebd9b0b5-c457-d234-2612-21873fdf5418/source/512x512bb.jpg" alt="GoodNotes 5" class="appreach__icon"><div class="appreach__detail"><p class="appreach__name">GoodNotes 5</p><p class="appreach__info"><span class="appreach__developper">Time Base Technology Limited</span><span class="appreach__price">¥980</span><span class="appreach__posted">posted with<a href="https://mama-hack.com/app-reach/" title="アプリーチ" target="_blank" rel="nofollow">アプリーチ</a></span></p></div><div class="appreach__links"><a href="https://apps.apple.com/jp/app/goodnotes-5/id1444383602?uo=4" rel="nofollow" class="appreach__aslink"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg"></a></div></div>

iPadではかなり有名な手書きノートアプリです。

これはそのまま、手書きのノートの代わりになります。

有名アプリなので、使い方説明の動画がたくさんYouTubeにアップされているのもうれしいところ。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/xIJHYI6VEGs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

手書きノートの代わりになるだけでなく、PDFを取り込んで、そのまま書き込みもできます。

この機能は過去問演習をする上でかなり役に立ちました。

私は主に過去問の問題PDFを取り込んで、解きながらメモを書き込んだり、解答用紙のPDFを取り込むのに使っていました。

### ノート編２：MapNote2

<div class="appreach"><img src="https://is1-ssl.mzstatic.com/image/thumb/Purple114/v4/1b/39/a4/1b39a48d-7b22-ef22-c6e2-1814d3f399b7/source/512x512bb.jpg" alt="MapNote2 - 無限に広がるアイデアノート -" class="appreach__icon"><div class="appreach__detail"><p class="appreach__name">MapNote2 - 無限に広がるアイデアノート -</p><p class="appreach__info"><span class="appreach__developper">Naoya Enokida</span><span class="appreach__price">¥610</span><span class="appreach__posted">posted with<a href="https://mama-hack.com/app-reach/" title="アプリーチ" target="_blank" rel="nofollow">アプリーチ</a></span></p></div><div class="appreach__links"><a href="https://apps.apple.com/jp/app/mapnote2-%25E7%2584%25A1%25E9%2599%2590%25E3%2581%25AB%25E5%25BA%2583%25E3%2581%258C%25E3%2582%258B%25E3%2582%25A2%25E3%2582%25A4%25E3%2583%2587%25E3%2582%25A2%25E3%2583%258E%25E3%2583%25BC%25E3%2583%2588/id1488198559?uo=4" rel="nofollow" class="appreach__aslink"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg"></a></div></div>

このアプリを一言で表せば**大きな模造紙**です。

手書きができるアプリなのですが、自分が書いた範囲に応じてどんどん書ける範囲が無限に広がっていってくれます。

マインドマップを作るときに便利です。

iPadには他にもマインドマップ用のアプリがそろっているのですが、文字を打つ必要があるものが多いです。

ざっくりと知識を整理したいときにはやはり手書きの方が早いですね。

GoodNotes 5で細かい部分をまとめつつ、用語のつながりはMapNote2で整理するというように使っています。

### 参考書編１：Kindle

<div class="appreach"><img src="https://is1-ssl.mzstatic.com/image/thumb/Purple124/v4/1f/b1/e5/1fb1e520-3d70-6107-5e07-8352f4845d65/source/512x512bb.jpg" alt="Kindle" class="appreach__icon"><div class="appreach__detail"><p class="appreach__name">Kindle</p><p class="appreach__info"><span class="appreach__developper">AMZN Mobile LLC</span><span class="appreach__price">無料</span><span class="appreach__posted">posted with<a href="https://mama-hack.com/app-reach/" title="アプリーチ" target="_blank" rel="nofollow">アプリーチ</a></span></p></div><div class="appreach__links"><a href="https://apps.apple.com/jp/app/kindle/id302584613?uo=4" rel="nofollow" class="appreach__aslink"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg"></a><a href="https://play.google.com/store/apps/details?id=com.amazon.kindle" rel="nofollow" class="appreach__gplink"><img src="https://nabettu.github.io/appreach/img/gplay_ja.png"></a></div></div>

参考書、問題集は基本的にKindle版を購入しています。

KindleではApple Pencilの手書き書き込みはまだできないので、それができるようになったら最高ですね。

Kindle版で何か書き込みしたいときは、スクリーンショットを取って、Good Notes5に取り込んでから書き込みをしています。

### 参考書編２：Documents by Readdle

<div class="appreach"><img src="https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/3c/09/f5/3c09f530-ac27-b98b-4743-72c6b4855aea/source/512x512bb.jpg" alt="Documents by Readdle" class="appreach__icon"><div class="appreach__detail"><p class="appreach__name">Documents by Readdle</p><p class="appreach__info"><span class="appreach__developper">Readdle Inc.</span><span class="appreach__price">無料</span><span class="appreach__posted">posted with<a href="https://mama-hack.com/app-reach/" title="アプリーチ" target="_blank" rel="nofollow">アプリーチ</a></span></p></div><div class="appreach__links"><a href="https://apps.apple.com/jp/app/documents-by-readdle/id364901807?uo=4" rel="nofollow" class="appreach__aslink"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg"></a><a href="https://play.google.com/store/apps/details?id=com.documents.byreaddle.filemanager_mediaplayer" rel="nofollow" class="appreach__gplink"><img src="https://nabettu.github.io/appreach/img/gplay_ja.png"></a></div></div>

PDFの資料はDocuments by Readdleで参照。

特に私が使っていた参考書、翔泳社の『情報処理教科書 データベーススペシャリスト』は大量の過去問解説を読者特典でPDF配布…という本なので、解説のビューアーとして大活躍でした。

2ページを1画面に表示する機能が付いているのが他にはなかなかないので使っています。

他にはGoogle Driveなど、各種クラウドストレージと連携できるのが嬉しいですね。

## 便利機能を使いこなす

iPadを使って勉強をする上で欠かせない便利機能を2つ紹介します。

### Split View

いわゆる画面分割です。この機能を使うことで、参考書とノートを横に並べて開くということが可能になります。

Split Viewの具体的なやり方は下記の動画がわかりやすいです。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/l4HJctDlCMQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

ただし、Split View対応アプリでないと2画面表示ができないので注意です。

上で紹介したアプリはすべてSplit View対応です。

### Apple Pencilで瞬時にスクリーンショット

スクリーンショットはApple Pencilを使うとかなり素早く行うことができます。

画面の端からApple Pencilをすべらせるだけです。

こちらも具体的なやり方は動画で紹介されています。

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/aB3XqPx1siw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 文字入力はまだまだしにくい

ここまで紹介してきたiPadでの勉強法ですが、文字を打って整理するという部分はまだやりにくいかな、という印象です。

勿論、純正でもキーボードが出ているので、そういったものを使えばすらすら打ち込めると思います。

ただ、持ち運んで使いたい！　ということを考えると、キーボードをつけると重くなってしまうのがネックです。

最近のiPadOSアップデートで、手書きの文字を瞬時に変換してくれるScribbleという機能が搭載されたのですが、まだ日本語には対応していないです。

この機能が日本語対応になったら大分文字入力は楽できそうですね。

最初にあげたように、紙とペン、参考書の代わりと割り切ってしまえば、iPadとApple Pencilはかなり使えるツールだと思います。

この機会に、電子での勉強に切り替えてみるのはいかがでしょうか。

iPadを使っての勉強法がかなり固まってきたのでまとめます。iPadの購入を迷っている方、iPadをもっとうまく活用したいという方はぜひ参考にしてください。

iPadを使った勉強法まとめ【2020年10月最新版】

このブログの一番最初の投稿は2020/1/12。

[GatsbyJSでブログを作ってみた][1]が記念すべき最初の投稿です。

どんなブログでも一番最初の投稿って後から見返すと、こっ恥ずかしいですね。

気づいたらブログを始めて半年近く経っていました。

最初の頃から色々と変わったこともあるので、この機会にブログの構成について振り返ってみたいと思います。

## ブログの仕組み部分を初期と比べてみる

まずはこのブログがどうやって作られているのかです。

### 初期

![初期のブログ作成システム][2]

初期は[gatsby-source-filesystem][3]を使って、ローカルのmarkdownファイルを記事データとして読み込んでいました。

1. ローカルでソースコード、記事データの作り込み
2. ローカルで作り込んだものをGitHubにpush
3. GitHubにpushされるとNetlifyで自動的にbuild

の流れです。

思い返すと、かなりGatsbyJS公式のチュートリアルに沿った形でソースも記事の取得方法も設定していましたね。

[Gatsby.js Tutorials | GatsbyJS][4]

GatsbyJS? GraphQL? git?

……全部わからん！ 状態からスタートしたので、まぁこんなもんかな……。

今思い返すとこんな右も左も分からない状態からGatsbyJS×GitHubでブログを作ろうと思い立ったもんです……。

元々WordPressに嫌気が指していた時期なので、代わりになる技術を探していたんですよね。

静的サイトジェネレータがいいらしい！ → GatsbyJSが人気らしい！ という結構安直な理由でした。

### 現在

今の仕組みとしてはこんな感じです。

![現在のブログ作成システム][5]

今はHeadless CMSのContentfulを導入して記事の管理をしています。

1. ソースコードはローカルで作り込み
2. ソースコード修正をGitHubにpush
3. GitHubにpushされるとNetlifyで自動的にbuild
4. 記事はContentful上で作成
5. 作成が完了したらApp機能を使ってNetlifyのbuildを走らせる

の流れです。

Headless CMSを導入した理由は、記事が増えてくるにつれて、「あの記事書き直したいけどどこだっけなぁ……」となっていたため。

ファイル名=記事のURLなので、なんとなくファイル名から予測して、1個1個開いたり、自分のサイト見てファイル名見てきたり……とちょっと手間でした。

100記事とかいってしまうと移行も大変になるだろうし、早めに移行してしまおう！ということで移行してしまいました。

NetlifyCMS → microCMS → Contentfulの順に試してContentfulに決めました。

Contentfulに決めたのはMarkdown連携のしやすさです。

フィールドタイプをtext → Markdownに設定すると、[gatsby-transformer-remark][6]系のプラグインがそのまま使えるのが大きかった。

## ソースコードの構成について

このブログのソースコードに関わる部分を抜き出すとこんな感じになります。

実際のソースコードはGitHubにアップしていますので、そちらをご参照ください。

[ソースコード][7]

```text
├ src
│  ├ components
│  ├ img
│  ├ pages
│  ├ styles
│  │　├ css
│  │　└ scss
│  ├ templates
│  └ utils
│
├ gatsby-node.js
├ gatsby-node
│ └ index.tsx
│
├ codegen.yml
├ types
│ └ graphql-types.tsx
│
└ gatsby-config.js
```

それぞれをざっくり説明。

### src

| ファイル・フォルダ | 説明              |
| ----------------- | ----------------- |
| components        | 細かいパーツ       |
| img               | 素材として使う画像 |
| pages             | ページとして読み込むファイル。問い合わせページやタグ一覧など、Contentfulだけでは管理しきれないもの|
| styles            | スタイルシート。SCSSで開発して、CSSにコンパイル|
| templates         | ページ作成用のテンプレート |
| utils             | ユーティリティ     |

### gatsby-node

ts-nodeを使用してTypeScript化をしています。

実際のソースはgatsby-node内のindex.tsx内に記述。

gatsby-nodeのTypeScript化については、下記記事を参考にさせていただきました。

* [Gatsby.js を完全TypeScript化する - Qiita][8]
* [Gatsby + ContentfulをTypeScript化する - Qiita][9]

### GraphQL Code Generator

下記はGraphQL Code Generator周りです。

TypeScriptの型指定に使っています。

```text
├ codegen.yml
├ types
│ └ graphql-types.tsx
```

GraphQL Code Generatorについては紹介記事を書いているので、そちらを参考に。

[GraphQL Code Generatorのススメ！GatsbyJSのTypeScript化][10]

### gatsby-config

gatsby-config.jsは主にプラグインの設定用です。

今インストールしているプラグインを洗い出してみました。

| プラグイン | 説明 |
| --------- | ----- |
|[gatsby-plugin-react-helmet][11]|メタ情報作成用|
|[gatsby-plugin-sitemap][12]|Googleに送るsitemap作成用|
|[gatsby-plugin-google-tagmanager][13]|GoogleTagManager導入用|
|[gatsby-plugin-lodash][14]|ビルド時のlodashサイズ削減|
|[gatsby-plugin-typescript][15]|TypeScriptファイルを読み込めるようにする|
|[gatsby-plugin-offline][16]|PWA化|
|[gatsby-plugin-manifest][17]|gatsby-plugin-offlineと組み合わせて使う。manifestファイルの作成|
|[gatsby-source-filesystem][18]|ファイル読込|
|[gatsby-plugin-sharp][19]|gatsby-transformer-sharpと組み合わせて使う。画像最適化|
|[gatsby-transformer-sharp][20]|gatsby-plugin-sharpと組み合わせて使う|
|[gatsby-source-contentful][21]|Contentfulのコンテンツ取得|
|[gatsby-transformer-remark][22]|markdown変換|
|[gatsby-remark-autolink-headers][23]|見出し部分に自動でアンカーリンクをつける|
|[gatsby-remark-code-titles][24]|gatsby-remark-prismjsと組み合わせて使う。コードブロックに見出しをつける|
|[gatsby-remark-prismjs][25]|コードブロックのシンタックスハイライト|
|[gatsby-remark-custom-blocks][26]|markdown中に特定の記法でカスタムブロックを埋め込める|
|[gatsby-remark-external-links][27]|外部リンクを別画面で開く|
|[gatsby-plugin-catch-links][28]|markdown中の内部リンクをLinkタグに置き換える|
|[gatsby-plugin-prefetch-google-fonts][29]|Googleフォントの読込用|

今回はここまでです。

[1]: /first-gatsby/
[2]: //images.ctfassets.net/8fdt4k4c3spd/2DNFThyTKdOuukOGIdPXAP/719b6a0c6dedf78140bc6647649e742f/lookback-structure_01.png "lookback-structure 01"
[3]: https://www.gatsbyjs.org/packages/gatsby-source-filesystem
[4]: https://www.gatsbyjs.org/tutorial/
[5]: //images.ctfassets.net/8fdt4k4c3spd/1vFKDChK0E6cR4CTV5ZdZO/0fc42e19eb0a5bfeffe3b369d398c6f2/lookback-structure_02.png "lookback-structure 01"
[6]: https://www.gatsbyjs.org/packages/gatsby-transformer-remark/?=gatsby-transformer-remark
[7]: https://github.com/sakelog/sake_log_source
[8]: https://qiita.com/Takepepe/items/144209f860fbe4d5e9bb
[9]: https://qiita.com/akashixi/items/c3acb4bcc616bc40e0f2
[10]: /intoroduce_graphql_code_gen/
[11]: https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet
[12]: https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap
[13]: https://www.gatsbyjs.org/packages/gatsby-plugin-google-tagmanager
[14]: https://www.gatsbyjs.org/packages/gatsby-plugin-lodash
[15]: https://www.gatsbyjs.org/packages/gatsby-plugin-typescript
[16]: https://www.gatsbyjs.org/packages/gatsby-plugin-offline/
[17]: https://www.gatsbyjs.org/packages/gatsby-plugin-manifest/
[18]: https://www.gatsbyjs.org/packages/gatsby-source-filesystem/
[19]: https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/
[20]: https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/
[21]: https://www.gatsbyjs.org/packages/gatsby-source-contentful/
[22]: https://www.gatsbyjs.org/packages/gatsby-transformer-remark/
[23]: https://www.gatsbyjs.org/packages/gatsby-remark-autolink-headers/
[24]: https://www.gatsbyjs.org/packages/gatsby-remark-code-titles/
[25]: https://www.gatsbyjs.org/packages/gatsby-remark-prismjs
[26]: https://www.gatsbyjs.org/packages/gatsby-remark-custom-blocks
[27]: https://www.gatsbyjs.org/packages/gatsby-remark-external-links
[28]: https://www.gatsbyjs.org/packages/gatsby-plugin-catch-links/
[29]: https://www.gatsbyjs.org/packages/gatsby-plugin-prefetch-google-fonts/

このブログを始めてから半年が経ちました。この機会にブログの構成について振り返ります。

ブログ開始から半年経ったので構成について振り返る

最近Gitでブランチを分けるということを覚えました。

masterブランチから枝分かれして開発を進められるので、ミスした場合も影響が抑えられ助かります。

ブランチを分けて開発する際に便利なブランチを表示・削除するコマンドについて、今回まとめました。

## ローカル編

### ブランチの一覧を表示する

```shell
git branch
```

### ブランチを削除する

```shell
git branch --delete <ブランチ名>
```

`-d`もしくは`--delete`オプションを使う。

## リモート編

### ブランチの一覧を表示する

```shell
git remote show <リモート名>
```

**2020/12/26追記**

リモート名は下記で確認可能。

```shell
git remote show
```

### ブランチを削除する

```shell
git push <リモート名> --delete <ブランチ名>
```

こちらも`-d`もしくは`--delete`オプションを使用。

### ブランチが消えない場合の対処法

**2020/12/26追記**

履歴をいじくっているとremote側のブランチ参照がうまくできなくなって消せない場合があります。

こんなメッセージが表示されるケースです。

```shell
error: src refspec <ブランチ名> does not match any
error: failed to push some refs to <リモートリポジトリ>
```

その場合はこっちのコマンドで削除可能

```shell
git push <リモート名> :<ブランチ名>
```

Gitでブランチを分けて開発するときに便利な、ブランチ一覧の表示・削除のコマンドをまとめました

Gitでブランチを表示・削除するコマンド

[[note | 2020.06.21追記]]
|config.ymlの誤りを修正しました

静的ジェネレータでサイトを作って維持していくと、その内、中身のコンテンツの管理が問題になると思います。

コンテンツ管理問題を解決するためにはCMSの導入という手段があります。

GatsbyJSの場合、startarで簡単に導入できる**Netlify CMS**が有名です。

ただ、Web検索しても出てくるのは、startarを使って導入する方法ばかり……。

そうじゃないんだよ！　私が知りたいのはサイトを作った**後からNetlify CMSを導入する方法なんだ！**

ということで、今回は実際に、startarを使わずにGatsbyJSにNetlify CMSを導入したので、その方法を解説していきます。

* 参考サイト：[Add to Your Site | Netlify CMS | Open-Source Content Management System](https://www.netlifycms.org/docs/add-to-your-site/)

[[note]]
| 今回はGitHub連携をしている前提での記事になります。
|
| 公式サイトでは他にもBitbucket・GitLabと連携する方法が記載されています。参考にしてください。

## Netlifyの認証機能を有効にする

実際にNetlify CMSの設定に必要なファイルを作っていく前に、Netlify側で認証機能を有効にしましょう。

[[note]]
|ここでの作業はNetlify Identity widgetを使って認証する場合に必要です。
|
|Githubだけでログインできればいい！　という方は、ここは飛ばして、[config.ymlの作成方法](#configymlの作成方法)の[backendの指定](#backendの指定)のところを参考にしてください。

Netlifyにログインします。

### Git Gatewayを有効にする

NetlifyのSettings ＞ Identity ＞ Git Gatewayで、**Enable Git Gateway**をクリック。

![NetlifyでGit Gatewayの有効化](//images.ctfassets.net/8fdt4k4c3spd/57QNFxfLM1RisRkcY0vjfk/10e60d74324a68b72b386c22df0db7db/gatsbyjs_netlifycms_01.png "gatsbyjs_netlifycms_01")

### 招待した人しかログイン出来ないようにする

**Registration Settings**のEdit settingsから、**Invite only**を選択しましょう。

![招待した人しか管理画面にログインできないようにする](//images.ctfassets.net/8fdt4k4c3spd/2rwbJEPhF9fEY0Z2837j8/7732e2ee54d6540e4cb6008810a924a2/gatsbyjs_netlifycms_02.png "gatsbyjs netlifycms 02")

**Netlify Identity widget**を埋め込みます。

Netlifyで、認証制にしたいサイトを選択 ＞ Settings ＞ Build & Deploy ＞Snippet Injectionから**Add Snippet**

下記コードを`</head>`の前に挿入します。

```html
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
```

![headタグ内にNetlify Identity Widgetのスニペットを追加する](//images.ctfassets.net/8fdt4k4c3spd/6O9mFUJvk7pM7QuaPcZjkO/1c3a5c987f380b28cf01228f79c95fcd/gatsbyjs_netlifycms_03.png "gatsbyjs netlifycms 03")

### CMSにログインするユーザーを招待する

Netlifyで、認証制にしたいサイトを選択 ＞ Identityから**Invite users**

招待したいユーザーのメールアドレスを入力してSend

メールが届くので、**Accept the Invite**をクリック

![届いたメールから招待を受ける](//images.ctfassets.net/8fdt4k4c3spd/4FPGLAoHiUW2WOxh0KRkpl/9c11fbe8b43dabc846c0304fd9ced340/gatsbyjs_netlifycms_04.png "gatsbyjs netlifycms 04")

パスワードを入力してSign Up

![パスワードを入力してSign Up](//images.ctfassets.net/8fdt4k4c3spd/7mayrDIvll2ORgDOme2LOL/236858af93b90c9013db35306bb0ffc2/gatsbyjs_netlifycms_05.png "gatsbyjs netlifycms 05")

ログインできました！

![Netlifyログイン完了](//images.ctfassets.net/8fdt4k4c3spd/6ufNRmUHQnwBuMWxBu6uW4/8c2bd5324e810401e0ca36b85b363cf6/gatsbyjs_netlifycms_06.png "gatsbyjs netlifycms 06")

次は、Netlify CMSの設定に必要なファイルを作っていきましょう。

## /static の下に設定ファイルを作成する

GatsbyJSの場合は、**/static**フォルダの下に、Netlify CMS設定用のファイルを追加します。

```text
/static
 └ admin
 　 ├ index.html
 　 └ config.yml
```

/staticフォルダの下に**admin**フォルダ、その下に**index.html**と**config.yml**を作成します。

| ファイル名      | 説明                    |
| ---------- | --------------------- |
| index.html | 管理ページを表示するのに必要なファイル   |
| config.yml | 管理ページ内の設定をするのに必要なファイル |

## index.htmlの作成方法

index.htmlは公式サイト記載の内容をコピーして作ります。

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
```

## config.ymlの作成方法

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

config.ymlを作成する前に、GatsbyJSのリポジトリにNetlify CMSのnpmモジュールをインストールします。

```powershell
npm install netlify-cms --save-dev
```

もしくは

```powershell
yarn add netlify-cms --dev
```

このサイトの場合、config.ymlの中身はこんな感じになっています。

```yaml
backend:
  name: git-gateway
publish_mode: editorial_workflow
media_folder: 'content/post/img/upload'
public_folder: '/img/upload'
locale: 'ja'
collections:
  - name: 'post'
    label: 'Post'
    folder: 'content/post'
    create: true
    extension: 'md'
    slug: '{{fields.slug}}'
    fields:
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
        }
      - {
          label: 'Update',
          name: 'update',
          default: '',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
          required: false,
        }
      - {
          label: 'Description',
          name: 'description',
          widget: 'text',
          required: false,
        }
      - {
          label: 'Category',
          name: 'category',
          widget: 'relation',
          collection: 'categorylist',
          searchFields: ['name'],
          valueField: 'name',
        }
      - {
          label: 'Tags',
          name: 'tags',
          widget: 'list',
          allow_add: true,
          minimize_collapsed: true,
          summary: '{{fields.tag}}',
          field: { label: Tag, name: tag, widget: 'string' },
        }
      - { label: 'Body', name: 'body', widget: 'markdown' }
  - name: 'page'
    label: 'Page'
    folder: 'content/page'
    create: true
    extension: 'md'
    slug: '{{fields.slug}}'
    fields:
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
        }
      - {
          label: 'Update',
          name: 'update',
          default: '',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
          required: false,
        }
      - {
          label: 'Description',
          name: 'description',
          widget: 'text',
          required: false,
        }
      - { label: 'Body', name: 'body', widget: 'markdown' }
  - name: 'categorylist'
    label: 'Category'
    identifier_field: name
    create: true
    extension: 'yml'
    folder: 'content/category'
    fields:
      - { label: 'Name', name: 'name', widget: 'string' }
      - { label: 'Description', name: 'description', widget: 'text', required: false}
```

順を追って説明していきます。

### backendの指定

```powershell
backend:
  name: git-gateway
```

backendを指定します。

指定方法によって、認証の仕方が変わってきます。

Netlify Identity widgetを使用する場合は、`name:git-gateway`を指定します。

GitHubでログインできれば良い場合は、下記のように指定します。

```yaml
backend:
name: github
repo: ユーザー名/レポジトリ名
```

### publish modeの指定(editorial_workflow)

```yaml
publish_mode: editorial_workflow
```

下書きを有効にするかの指定です。

**editorial_workflow**を指定すると、下の画像のように、かんばん方式で記事の状態を管理できます。

記事を公開できる状態になったら「準備完了」へステータスを移して公開しましょう。

![Netlify CMSのワークフロー画面 下書きの管理を行う](//images.ctfassets.net/8fdt4k4c3spd/1JyUuBIXMX0bJYB1t7E4T3/9aa5142a9051f4cff0bba7e63e9a524c/gatsbyjs_netlifycms_07.png "gatsbyjs netlifycms 07")

### 画像フォルダの指定

```yaml
media_folder: 'content/post/img/upload'
public_folder: '/img/upload'
```

画像フォルダの指定は、`media_folder`と`public_folder`で行います。

* media_folder：実際に画像を保管するフォルダを指定（プロジェクトのルートフォルダからの相対パス）
* public_folder：記事中で画像を取得するときの相対パス

### collectionの指定(コンテンツ管理の単位)

collectionで、コンテンツ管理の単位を指定します。

記事やページを分けて管理したい場合や、カテゴリー一覧を管理する場合に使えます。

```yaml
collections:
  - name: 'post'
    label: 'Post'
    folder: 'content/post'
    create: true
    extension: 'md'
    slug: '{{fields.slug}}'
    fields:
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
        }
      - {
          label: 'Update',
          name: 'update',
          default: '',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
          required: false,
        }
      - {
          label: 'Description',
          name: 'description',
          widget: 'text',
          required: false,
        }
      - {
          label: 'Category',
          name: 'category',
          widget: 'relation',
          collection: 'categorylist',
          searchFields: 'name',
          valueField: 'name',
        }
      - {
          label: 'Tags',
          name: 'tags',
          widget: 'list',
          allow_add: true,
          minimize_collapsed: true,
          summary: '{{fields.tag}}',
          field: { label: Tag, name: tag, widget: 'string' },
        }
      - { label: 'Body', name: 'body', widget: 'markdown' }
```

それぞれの項目の詳細は下記の通り。

| 項目        | 説明                                                                                             |
| --------- | ---------------------------------------------------------------------------------------------- |
| name      | collectionの名前。他のcollectionからrelationで紐付けるときにも使う                                                |
| label     | 管理画面に表示する名前                                                                                    |
| folder    | collectionのファイルを格納するフォルダを指定。例えば、postのfolderを`content/post`で指定すると、content/postフォルダの中身をpostとして扱う |
| create    | `true`にすると、管理画面上で新しいファイルが作成できる                                                                 |
| extension | ファイルの保存形式。`yaml`、`toml`、`json`、`md`、`markdown`、`html`が指定できる                                    |
| slug      | ファイル名の指定                                                                                       |
| fields    | collectionの各ファイル編集ページに持たせるフィールド。詳しくは後述                                                         |

詳しくは[Configuration Options | Netlify CMS | Open-Source Content Management System](https://www.netlifycms.org/docs/configuration-options/)を参照

### fieldsの指定

fields部分を抜き出すとこんな感じになっています。

```yaml
    fields:
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - {
          label: 'Date',
          name: 'date',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
        }
      - {
          label: 'Update',
          name: 'update',
          default: '',
          widget: 'datetime',
          format: 'YYYY-MM-DD HH:mm',
          required: false,
        }
      - {
          label: 'Description',
          name: 'description',
          widget: 'text',
          required: false,
        }
      - {
          label: 'Category',
          name: 'category',
          widget: 'relation',
          collection: 'categorylist',
          searchFields: 'name',
          valueField: 'name',
        }
      - {
          label: 'Tags',
          name: 'tags',
          widget: 'list',
          allow_add: true,
          minimize_collapsed: true,
          summary: '{{fields.tag}}',
          field: { label: Tag, name: tag, widget: 'string' },
        }
      - { label: 'Body', name: 'body', widget: 'markdown' }
```

基本的な項目は下記のとおりです。

| 項目       | 説明                                     |
| -------- | -------------------------------------- |
| label    | 管理画面上に表示するフィールド名                       |
| name     | フィールドの値を判別する名前。GraphQLで指定するfieldsと合わせる |
| widget   | フィールドの種類を指定する                          |
| required | `false`を指定すると、入力を任意にできる。               |

widgetによって、何を指定しなければいけないかが変わります。

詳しくは[Widgets | Netlify CMS | Open-Source Content Management System](https://www.netlifycms.org/docs/widgets/)を参照してください。

投稿のマークダウン部分を取得するには、下記の通り指定します。

```yaml
- { label: 'Body', name: 'body', widget: 'markdown' }
```

この指定をすると、今までの投稿内容も取得されます。

## 作成できたら開発環境で確認しよう

ファイルが作成できたら、開発環境で確認します。

adminフォルダ内のindex.htmlが**サイトURL/admin**になるので、`develop`ではなく、`build`と`serve`を使います。

```powershell
gatsby build
```

してから、

```powershell
gatsby serve -H 0.0.0.0
```

してください。

※`-H`以降はPC以外でローカルホストを表示させるためのオプションなので、なくても大丈夫です。

* 参考：[GatsbyJSのローカル環境をスマホやタブレットから確認する方法](./gatsbyjs-local-other-device)

**<http://localhost:9000/admin>**を開いて反映されていることを確認しましょう。

## pushして反映させる

開発環境でうまく表示ができていたら、ローカルリポジトリにpushして反映させます。

buildが完了したら、**サイトURL/admin**にアクセスして管理画面を確認しましょう。

GatsbyJSとNetlify   CMS。ネットでもよく見る組み合わせですが、意外とスターターを使わず後から追加する方法の説明って見当たらないですよね。今回、スターターを使わず後から手動でNetlifyCMSを導入したので、その方法を説明します。

カテゴリー：技術

batファイル内でPowerShellのコマンドを実行したい

bat

PowerShell

yarn.lockファイルの依存関係を更新する

yarn

PythonをUbuntuにインストールする方法(ver 3.9.1)

Python

データベーススペシャリスト合格　受かるまでの勉強方法をまとめた

資格試験

CSSで文字の横に線がびよーんと伸びる見出しを作成する

CSS

GatsbyJSで表示範囲指定ありのペジネーションを作成する方法

Gatsby

iPadを使った勉強法まとめ【2020年10月最新版】

iPad

勉強

ブログ開始から半年経ったので構成について振り返る

Gatsby

Gitでブランチを表示・削除するコマンド

Git

GatsbyJSで作成したサイトに後からNetlify CMSを導入する方法

Gatsby

NetlifyCMS

カテゴリー：技術

batファイル内でPowerShellのコマンドを実行したい

bat

PowerShell

yarn.lockファイルの依存関係を更新する

yarn

PythonをUbuntuにインストールする方法(ver 3.9.1)

Python

データベーススペシャリスト合格 受かるまでの勉強方法をまとめた

資格試験

CSSで文字の横に線がびよーんと伸びる見出しを作成する

CSS

GatsbyJSで表示範囲指定ありのペジネーションを作成する方法

Gatsby

iPadを使った勉強法まとめ【2020年10月最新版】

iPad

勉強

ブログ開始から半年経ったので構成について振り返る

Gatsby

Gitでブランチを表示・削除するコマンド

Git

GatsbyJSで作成したサイトに後からNetlify CMSを導入する方法

Gatsby

NetlifyCMS

データベーススペシャリスト合格　受かるまでの勉強方法をまとめた