
css で長い文章を省略するときに `text-overflow: ellipsis` を使用して省略部分に「…」（三点リーダー）などを表示することができます。

省略されているときのみツールチップで全文が表示されるようにしたいといった場合に、JavaScript で `text-overflow: ellipsis` が適用されているかどうかを判定する必要があります。

1行の場合は [HTML text-overflow ellipsis detection](https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection#answers) の回答にある方法で実現できますが、テキストが複数行になる場合は少し変更が必要です。

作成済みのデモはこちらです。ソースコードの全体はこちらでご確認ください。  
[デモ（CodePen）](https://codepen.io/chocolat5/pen/BaxQgEM)

## 実現したいこと

- テキストが指定より長い場合は省略して、末尾に省略記号「…」が表示される
- テキストが省略されている場合のみツールチップが表示される

## html を用意する

中にテキストを持つカードが並ぶレイアウトです。  
テキストは2行以下と3行（省略あり・なし）の3種類を用意しました。

```html
<div class="card-list">
  <div class="block">
    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間</p>
  </div>

  <div class="block">
    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
  </div>

  <div class="block">
    <p class="text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文</p>
  </div>
</div>
```

## css でテキストが指定より長い場合は省略する

1行のみで省略する場合は以下の指定で省略できます。

```css
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
```

複数行の場合は以下のように指定します（ `-webkit-line-clamp` の数字が行数になります）。

```css
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
```

## JavaScript で text-overflow: ellipsis が適用されているか判定する

`text-overflow: ellipsis` が適用されるのは、要素の中身が指定よりも大きい場合です。  
要素の中身（テキスト全体）が、要素を表示する領域（cssで指定した3行分の高さ）よりも大きい場合は `true` を返すようにします。

要素の中身の高さを `Element.scrollHeight` 、要素を表示する領域の高さを `Element.offsetHeight` でそれぞれ取得して比較します。

テキスト要素を受け取り、 `text-overflow: ellipsis` が適用されているかを判定して `true` か `false` を返す関数を作成します。

```jsx
const isEllipsisActive = (el) => {
  return (el.offsetHeight < el.scrollHeight);
}
```

この関数をテキスト要素（サンプルの `.text` ）をひとつずつ渡して実行します。

```jsx
const elements = document.querySelectorAll('.text');

elements.forEach((el) => isEllipsisActive(el));
```

## text-overflow: ellipsis が適用されている場合はツールチップを表示する

ツールチップは `HTMLElement.title` を使用します。 html 要素に `title="このテキストがツールチップとして表示されます。"` のように指定します。

> 通常、テキストは、マウスがノード上にあるときに「ツールチップ」ポップアップに表示されます。  
ー [HTMLElement.title - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title)より引用
> 

先ほどの関数で `true` が返る場合のみ、html に title 要素を追加します。

```jsx
elements.forEach((el) => {
  if(isEllipsisActive(el)) {
    // テキスト全文を取得
    const text = el.textContent;
    // テキスト全文を title と共に追加
    el.setAttribute('title', text);
  }
});
```

## デモ

デモでは `text-overflow: ellipsis` の判定の関数の結果を Console に書き出すようにしているので、Console を開いて正しく判定されているか確認してみてください。

[CodePen で「テキスト省略時の text-overflow: ellipsis の適用を判定する方法（複数行）」のデモを見る](https://codepen.io/chocolat5/pen/BaxQgEM)

## 参照

- javascript - HTML text-overflow ellipsis detection - Stack Overflow [https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection/10017343#10017343](https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection/10017343#10017343)（2022-9-15参照）
- Element.scrollHeight - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight](https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight) （2022-9-15参照）
- HTMLElement.offsetHeight - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight) （2022-9-15参照）
- HTMLElement.title - Web API | MDN [https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title) （2022-9-15参照）

テキスト省略時の text-overflow: ellipsis の適用を判定する方法（複数行）


emotion の `Global` コンポーネントを使用するとサイト全体に共通のcssを適用することができます。

`@emotion/react` はインストール済みとします。

## 導入方法

### 全体に適用する css を用意する

```jsx
const global = css`
  body {
    color: #333;
  }
`
```

### _app.tsx で Global コンポーネントを import する

```jsx
import { Global, css } from '@emotion/react'
```

### Global コンポーネントにスタイルを適用する

```jsx
<Global styles={global} />
```

### _app.tsx の全体

```jsx
// _app.tsx

import type { AppProps } from 'next/app'
import { Global, css } from '@emotion/react'

export default function MyApp({ Component, pageProps }: AppProps) {
  const global = css`
    body {
      color: #333;
    }
  `

  return (
    <>
      <Global styles={global} />
      <Component {...pageProps} />
    </>
  )
}
```

## グローバル css を別ファイルにする場合

### global.ts を作成してスタイルを記述する

※ css は Next.js のデフォルトのスタイルです。

```jsx
// global.ts

import { css } from '@emotion/react'

export const global = css`
  html,
  body {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  * {
    box-sizing: border-box;
  }

  @media (prefers-color-scheme: dark) {
    html {
      color-scheme: dark;
    }
    body {
      color: white;
      background: black;
    }
  }

`
```

### _app.tsx で読み込み、Global コンポーネントに適用する

```jsx
// _app.tsx

import type { AppProps } from 'next/app'
import { Global } from '@emotion/react'

import { global } from '@styles/globals'

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Global styles={global} />
      <Component {...pageProps} />
    </>
  )
}
```

## normalize.css を併用する場合

### ****normalize.css をインストールする****

```bash
npm install --save normalize.css
```

### global.ts で読み込む

```jsx
// global.ts

import 'normalize.css'
```

## 参照

- Emotion – Global Styles [https://emotion.sh/docs/globals](https://emotion.sh/docs/globals)（2022-9-11参照）

[Next.js] emotionのGlobal Stylesでサイト全体のCSSを指定する


当サイトでは記事は全てMarkdownファイルで作成・管理しています。Markdown ファイルをサイトで表示させるためにはHTMLに変換する必要があります。Markdown を解析してHTMLに変換する軽量のコンパイラ [marked](https://marked.js.org/) を使用しています。

[marked 公式ドキュメント](https://marked.js.org/)  
[marked GitHub](https://github.com/markedjs/marked)

marked を使用した Next.js での Markdown のカスタマイズ方法を紹介します。（記事内のコードはTypeScriptで記述しています。）


## インストール

```bash
npm install marked
```

## sanitize（XSS攻撃対策）

sanitize （サニタイズ・サニタイジング）とは

> 《消毒の意》インターネット上で、掲示板（BBS）などの入力フォームに入力されたテキストデータから、HTMLのタグやスクリプト言語などを検出し、別の安全な文字列に置き換えること。悪意あるプログラムなどが実行されるのを防ぐためのもの。無害化。サニタイズ。サニタイゼーション。  
引用: [サニタイジングとは何？わかりやすく解説 Weblio辞書](https://www.weblio.jp/content/%E3%82%B5%E3%83%8B%E3%82%BF%E3%82%A4%E3%82%B8%E3%83%B3%E3%82%B0)
> 

marked は出力するHTMLを sanitize しないため、sanitize 用のライブラリで別途対応する必要があります。[公式ドキュメント](https://marked.js.org/#usage)では sanitize 用のライブラリとして、[DOMPurify](https://github.com/cure53/DOMPurify) が推奨されており、ほかに [js-xss](https://github.com/leizongmin/js-xss) や [sanitize-html](https://github.com/apostrophecms/sanitize-html) 、 [insane](https://github.com/bevacqua/insane) が紹介されています。

当サイトでは公式推奨の DOMPurify を使用しますが、Next.js の SSG や ISR を使用しているためか公式サイトの記述そのままでは機能しませんでした。

「[DOMPurify.sanitize is not a function](https://github.com/cure53/DOMPurify/issues/526)」 の issue を参考に [isomorphic-dompurify](https://github.com/kkomelin/isomorphic-dompurify) を使用することでエラーが解消され、Markdownが表示されるようになりました。

### インストール

```bash
npm i isomorphic-dompurify
```

### 導入例

```jsx
import DOMPurify from 'isomorphic-dompurify';
import { marked } from 'marked';

const Post = ({ post }) => {
  const dirty = marked(post);
  return (
    <article dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dirty) }} />
  );
}
```

## シンタックスハイライト（Prism.js）

記事内のコードブロックのシンタックスハイライトには [Prism.js](https://prismjs.com/) を使用しています。

marked のThe parse function を使用して設定します。

### インストール

```bash
npm i prismjs
```

### 導入例

```jsx
import Prism from 'prismjs';
import { marked } from 'marked';

const Post = ({ post }) => {
  const renderer = new marked.Renderer();
  
  // Set options
  marked.setOptions({
    renderer,
    highlight: function (code, lang) {
      if (Prism.languages[lang]) {
        return Prism.highlight(code, Prism.languages[lang], lang)
      } else {
        return code
      }
    }
  });

  return (
    <article dangerouslySetInnerHTML={{ __html: marked.parse(post) }} />
  );
}

```

## 目次（Table of Contents）

parser に渡されるトークンの配列を構築する `lexer` を使用します。

```jsx
marked.lexer(post)
```

以下のようなMarkdown本文のトークン配列が取得できます。

```jsx
[
  {
    type: 'heading',
    raw: '## Headline Text',
    depth: 2,
    text: 'Headline Text',
    tokens: Array(1)
  },
  {
    type: 'paragraph',
    raw: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te'
  },
  {
    type: 'heading',
    raw: '### Headline Text',
    depth: 3,
    text: 'Headline Text',
    tokens: Array(1)
  },
  {
    type: 'paragraph',
    raw: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te'
  },
  {
    type: 'paragraph',
    raw: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod te'
  },
]
```

取得したトークン配列にフィルターをかけて、見出しに当たる `heading` のみを取得して、 `map()` でhtmlタグなどを適宜追加して整えます。

h2, h3 などの見出しのレベルは `depth` で取得できるので、当サイトではカスタムデータ属性の `data-*` に `depth` を設定して見出しのレベルによってCSSを変えられるようにしています。

### 導入例

```jsx
import { marked } from 'marked';

const Post = ({ post }) => {
  let toc;
  // トークン配列を取得
  const tokens = marked.lexer(post);
  // フィルターをかけて見出しのみを取得
  const headings = tokens.filter(token => token.type === "heading");
  // map()で整える
  toc = headings.map((heading: any, index: any) => {
    let target = heading.text.replace(/ /g, "-").replace(".", "").toLowerCase()
    return (
      <li key={index} data-depth={heading.depth}>
        <Link href={`#${target}`}>
          <a>{heading.text}</a>
        </Link>
      </li>
    )
  });

  return (
    <ul>{toc}</ul>
  );
}

```

## 出力されるhtmlタグのカスタマイズ

`renderer` を使用して特定の html 出力を定義することができます。

カスタマイズできるタグ例

- code(string code, string infostring, boolean escaped)
- list(string body, boolean ordered, number start)
- paragraph(string text)
- link(string href, string title, string text)
- image(string href, string title, string text)　など

その他のオプション等は[公式ドキュメント](https://marked.js.org/using_pro#renderer)でご確認ください。

### 導入例: link（aタグ）

```jsx
import { marked } from 'marked';

const Post = ({ post }) => {
  const renderer = new marked.Renderer();

  renderer.link = function (href: string, title: string, text: string) {
    return `<a href="${href}" target="_blank" rel="noopener noreferrer">${text}</a>`
  }

  marked.setOptions({
    renderer,
  });

  return (
    <article dangerouslySetInnerHTML={{ __html: marked.parse(post) }} />
  );
}
```

## Reference 参照

- Better solution for TOC · Issue #1489 · markedjs/marked · GitHub [https://github.com/markedjs/marked/issues/1489](https://github.com/markedjs/marked/issues/1489)（2022-8-20参照）
- Use marked and prism.js to parse markdown and add syntax highlighting in Node.js [https://gist.github.com/lightpohl/f7786afa86ff2901ef40b1b1febf14e0](https://gist.github.com/lightpohl/f7786afa86ff2901ef40b1b1febf14e0)（2022-8-23参照）
- Add support for NextJS Image - bytemeta [https://bytemeta.vip/repo/markedjs/marked/issues/2252](https://bytemeta.vip/repo/markedjs/marked/issues/2252%EF%BC%882022-8-23%E5%8F%82%E7%85%A7%EF%BC%89)（2022-8-23参照）

Next.js + Markdown (marked) で作るブログサイト


勉強をかねてGatsbyから同じReact.jsベースで開発されたJavaScriptフレームワークの [Next.js](https://nextjs.org/) へ移行しました。

パフォーマンスの観点ではGatsbyのほうが良いという記事をいくつか読みましたが、移行を決めた理由は主に次の3つです。

- 更新の度にNetlify上でのデプロイのエラーが頻発
- GatsbyJSは便利なプラグインを多く利用できる反面、依存関係の脆弱性の問題がある
- Next.js と TypeScript でサイトを構築してみたかった


## Next.jsについて

[Next.js](https://nextjs.org/)はReactベースで開発されたJavaScriptフレームワークです。

> Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

## 環境について

|                      | 移行前   | 移行後     |
|----------------------|----------|------------|
| フレームワーク       | GatsbyJS | Next.js    |
| 言語                 | React    | TypeScript |
| ホスティングサービス | Netlify  | Vercel     |


## 移行作業

サイトの構成などによって必要な移行作業は変わりますが、まずは Next.js の公式サイトで公開されている「[Migrating from Gatsby](https://nextjs.org/docs/migrating/from-gatsby)」ページの作業を行います。

当サイトで上記のページの手順以外に必要になった作業は主に次の4つです。

- 各記事のパーマネントリンクおよびディレクトリ構成を維持する
- 記事内の画像の読み込み
- 記事内のマークダウンにシンタックスハイライトを適用する
- 目次（Table of Contents）の表示
- カテゴリー、タグ一覧ページの作成
- Google Analytics, Google Adsens などの設定
- Netlify から Vercel への変更

### 各記事のパーマネントリンクおよびディレクトリ構成を維持する

CMSは未導入のため各記事のデータは `src` 内の markdown ファイルを読み込んでいます。  
Gatsbyでサイトを作成した際に他のサイトを参考にしながら以下のようなルールを決めてファイル管理を行っていました。

- 記事のファイルも投稿日順で管理できるようにするためファイル名を「 `日付-スラッグ.md` 」とする
- ただし、パーマネントリンクはスラッグのみ
- 記事内に画像がある場合は `日付-スラッグ` というフォルダを作成し、その中に `index.md` を作成する
- about, policy などのページもマークダウンで管理する

```md
src
├──contents
│   ├── pagegs
│   │   ├── about.md
│   │   └── policy.md
│   │
│   ├── posts
│   │   ├── blog
│   │   │    └── 日付-スラッグ.md
│   │   └── tips
│   │   │    ├── 日付-スラッグ.md
│   │   │    └── 日付-スラッグ
│   │   │          ├── index.md
│   │   │          └── image.jpg
```


上記を Next.js 移行後も維持したかったので、「[Migrating from Gatsby](https://nextjs.org/docs/migrating/from-gatsby)」の「Data Fetching」の項目の `getPostBySlug` にあたる部分でディレクトリ構造にあわせた修正が必要でした。

### 記事内の画像の読み込み

Next.js では静的ファイルは `public` フォルダで管理します。

当サイトでは、記事内の画像は記事の markdown ファイルと同じフォルダ内で管理しています。そうすることで記事内の画像の読み込みは以下のパスを書くだけで読み込むことができていました。

```markdown
![](./image.jpg)
```

方法を探る中で `next-optimized-images` ライブラリや loader を使用した方法などいくつか試しましたが上手く読み込めなかったため、正しいかどうかはわかりませんが、最終的に次の方法で、パスの書き換えなどをせずに記事内の画像が読み込まれるようにできました。

1. `copy-webpack-plugin` をインストール

2. `next.config.js` で記事内の画像データをビルド後に静的ファイルが置かれる `.next/static/media/` にコピーする。

```js
/** next.config.js */
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: './src/contents/posts/**/**/*', // コピー元のファイルを指定
            to: './static/media/img/[path][name][ext]', // コピー先のフォルダを指定
            globOptions: {
              ignore: ['./**/*.md'], // 記事の markdown ファイルは除外
            }
          },
        ]
      })
    )
    return config
  }
}

```

Webpack プラグインの使用やカスタマイズについては、Next.js 公式サイトの「[Custom Webpack Config](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config)」に説明がありますが、

> Note: changes to webpack config are not covered by semver so proceed at your own risk

という注意書きがありますので、ご使用はご自身の判断になります。


### 記事内のマークダウンにシンタックスハイライトを適用する

Gatsby では `gatsby-remark-prismjs` プラグインをインストールして使用していたので、Next.js でも同じ [Prism.js](https://prismjs.com/) を使用することにしました。

markdown への適用は、 markdown ファイルの変換方法によって変わりますが、おおまかな導入の流れとしては次の手順になります。

1. Gatsby用のプラグインの代わりに `prismjs` と `babel-plugin-prismjs` をインストール

2. `_app.tsx` で `prism.css` と使用したいテーマのCSSファイルを読み込む

```js
/** _app.tsx */
import '@(パス)/prism.css'
import '@(パス)/prism-tomorrow.css'
```

3. 記事コンポーネントで Prism.js を markdown に適用させる

4. Babel の設定ファイル `.babelrc` に使用言語やオプション等を記述する

```json
/** .babelrc */
{
  "plugins": [
    "@emotion/babel-plugin",
    [
      "prismjs",
      {
        "languages": [
          "javascript", 
          "typescript",
          "jsx",
          "css",
          "markup",
          "json",
        ],
        "plugins": ["show-language"], // 言語名のラベルを表示
        "css": true
      }
    ]
  ]
}

```

### 目次（Table of Contents）の表示

Gatsby では `gatsby-transformer-remark` プラグインを使用して `GraphQL` で目次を取得していました。

Next.js への移行にあたり、 markdown の変換に使用しているnpmパッケージ [marked](https://github.com/markedjs/marked) で目次を取得して表示させるようにしました。  
'marked` を使用したTable of Contents の作成方法の詳細は別記事としてまとめる予定です。

### Netlify から Vercel への変更

Next.js へ移行するにあたり、デプロイ先もNext.js を開発している [Vercel](https://vercel.com/) 社が提供するホスティングサービスに変更するほうが都合が良さそうだったため、あわせて変更しました。

Netlify へのデプロイはGitHubのリポジトリと連携させていたため、Vercelへの移行はとても簡単にできました。

デプロイ先の変更のほかに当サイトは独自ドメインを設定しているため、以下の手順でドメインの設定変更を行いました。

1. Netlify で独自ドメインの登録を削除する
2. Vercel でデプロイ後に独自ドメインを登録する
3. ドメイン契約会社の管理画面でネームサーバーの設定を変更する


## 追加した主なパッケージ

- **next**
- **gray-matter** : markdown ファイルのfront-matter解析
- **marked** : markdown 変換
- **prismjs** : シンタックスハイライト


## 最後に

Lighthouseで移行前と移行後に計測した結果です。  
事前に記事で読んでいた通り、パフォーマンスはGatsbyよりも数値が下がりましたが、これから改善していこうと思います。
（Accessibility の数値が少し上がっているのは背景と文字色のコントラストを少し変更したので、Next.jsへの移行によるものではありません。）

**移行前**
![](./migrating-from-gatsby-to-nextjs01.jpg)

**移行後**
![](./migrating-from-gatsby-to-nextjs02.jpg)


## Reference 参照
- Migrating from Gatsby | Next.js [https://nextjs.org/docs/migrating/from-gatsby](https://nextjs.org/docs/migrating/from-gatsby)（2022-8-15参照）
- Next.jsを利用した初めての本格的Markdownブログサイトの構築 [https://reffect.co.jp/react/nextjs-markdown-blog](https://reffect.co.jp/react/nextjs-markdown-blog)（2022-8-19参照）
- Build the static blog with Next.js and Markdown [https://medium.com/nextjs/build-the-static-blog-with-next-js-and-markdown-d438c2f74297](https://medium.com/nextjs/build-the-static-blog-with-next-js-and-markdown-d438c2f74297)（2022-8-19参照）
- Next.jsでmarkdownのコードブロックをPrismJSでシンタックスハイライトする [https://www.ibulog.com/posts/2021/08/nextjs-prismjs](https://www.ibulog.com/posts/2021/08/nextjs-prismjs)（2022-8-23参照）

GatsbyJS から Next.js へ移行


React/Next.js + TypeScript + Emotion + Netlify の環境構築およびデプロイまでの手順です。

[デモ](https://nextjs-typescript-netlify-starter.netlify.app/)  
[GitHubリポジトリ](https://github.com/chocolat5/nextjs-typescript-netlify-starter)

バージョン  
- Next.js : 12.1.5
- TypeScript : 4.7.4
- ESLint : 8.21.0
- Emotion : 11.10.0

## 実現したいこと

- React/Next.js + TypeScript + Emotion + Netlify でwebサイトを公開する

## 導入手順・環境設定

### Next.js のインストール

Netlify の公式サイトのスターターを使用します。

以下のリポジトリにアクセスして、Use this template ボタンからご自身のGitHubにリポジトリを作成します。リポジトリが作成できたらローカル環境にクローンします。  
[https://github.com/netlify-templates/next-netlify-starter](https://github.com/netlify-templates/next-netlify-starter)

### TypeScript のインストール

TypeScript をインストールします。

```bash
npm install typescript @types/node @types/react @types/react-dom --save-dev
```

`tsconfig.json` ファイルを作成する

```bash
touch tsconfig.json
```

`npx create-next-app@latest --ts` を実行した際に生成される場合と同じ内容を記述します。

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
```

`next-env.d.ts` ファイルを作成します。

```bash
touch next-env.d.ts
```

`npx create-next-app@latest --ts` を実行した際に生成される場合と同じ内容を記述します。

```js
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
```

`.gitignore` に追記します。

```gitignore
# typescript
next-env.d.ts
```

`next.config.js` ファイルを作成する。

```bash
touch next.config.js
```

こちらも `npx create-next-app@latest --ts` を実行した際に生成される場合と同じ内容を記述します。

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig
```

### ESLint のインストール

ESLint をインストールします。

```bash
npm install eslint eslint-config-next --save-dev
```

`.eslintrc.json` ファイルを作成します。

```bash
touch .eslintrc.json
```

こちらも `npx create-next-app@latest --ts` を実行した際に生成される場合と同じ内容を記述します。

```json
{
  "extends": "next/core-web-vitals"
}
```

`_app.js` ファイルを `_app.tsx` に変更して、以下のように書き換えます。

```jsx
import type { AppProps } from 'next/app'

import '@styles/globals.css'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
```

ここで一度 `npm run dev` を実行して、ブラウザで [http://localhost:3000](http://localhost:3000/) にアクセスしてみます。以下の画面が表示されれば問題ありません。

![](./nextjs-typescript-emotion-netlify-01.png)

### Emotion のインストール

Emotion をインストールします。Next.js で TypeScript と一緒に使用するために必要な `@emotion/babel-plugin` もあわせてインストールします。

```bash
npm install @emotion/react @emotion/babel-plugin --save-dev 
```

`.babelrc` を作成して、以下のように記述します。

```babelrc
{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}
```

`tsconfig.json` に `"types": ["@emotion/react/types/css-prop"]` を追記します。

```json
	"compilerOptions": {
		"types": ["@emotion/react/types/css-prop"],
```

`index.js` のファイル名を `index.tsx` に変更して、Emotion でスタイルを変更してみます。

```jsx
import Head from 'next/head'
import Header from '@components/Header'
import Footer from '@components/Footer'
import { css } from '@emotion/react'

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Next.js Starter!</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <Header title="Welcome to my app!" />
        <p css={desc}>
          Get started by editing <code>pages/index.js</code>
        </p>
      </main>

      <Footer />
    </div>
  )
}

const desc = css`
  color: green;
`
```

もう一度 `npm run dev` を実行して、ブラウザで [http://localhost:3000](http://localhost:3000/) にアクセスします。以下のように、テキストがcssで指定した色に変更されていれば問題ありません。

![](./nextjs-typescript-emotion-netlify-02.png)

### ファイルを src フォルダにまとめる場合

`src` フォルダを作成して、 `components` `pages` `styles` フォルダを移動します。

`tsconfig.json` に `baseUrl` と `paths` を追記します。

```json
{
  "compilerOptions": {
		// 省略
    "baseUrl": ".",
    "paths": {
      "@*": [
        "./src/*"
      ]
    },
  },
	// 省略
}
```

## Netlify にデプロイする

インストール・環境設定が完了したら、GitHubのリポジトリに作業内容をpushします。

[Netlify](https://www.netlify.com/) にログインして、 「Add new site」 > 「Import exising project」を選択します。

「Connect to Git provider」でGitHubを選択します。

![](./nextjs-typescript-emotion-netlify-03.png)

「Pick a repository from GitHub」に切り替わり、リポジトリの一覧が表示されるので、先ほどpushしたリポジトリを選択します。

「Basic build settings」はデフォルトのままで問題ありません。確認できたら「Deploy site」をクリックしてデプロイします。

![](./nextjs-typescript-emotion-netlify-04.png)

デプロイが完了してステータスが「Publihed」になったら、Netlifyで自動生成されたURLにアクセスします。以下の画面が表示されれば完了です。

![](./nextjs-typescript-emotion-netlify-05.png)

## デモ

[https://nextjs-typescript-netlify-starter.netlify.app/](https://nextjs-typescript-netlify-starter.netlify.app/)

## 参照

- Basic Features: TypeScript | Next.js [https://nextjs.org/docs/basic-features/typescript](https://nextjs.org/docs/basic-features/typescript)（2022-8-13参照）
- Reactでの開発力UPのため色々試してみたまとめ [https://zenn.dev/panyoriokome/scraps/3cf82075af96ed](https://zenn.dev/panyoriokome/scraps/3cf82075af96ed)（2022-8-14参照）
- next.js/examples/with-emotion at canary · vercel/next.js · GitHub [https://github.com/vercel/next.js/tree/canary/examples/with-emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion)（2022-8-14参照）

React/Next.js + TypeScript + Emotion + Netlify の環境構築


slickプラグインで作成するスライダーに、次のスライドに切り替わるまでの進捗がわかるプログレスバーを実装する方法です。

## 実現したいこと

- プログレスバー付きのslickスライダーを実装する


## htmlを用意する

スライドする画像を用意します。

```html
<div class="slider">
  <img src="https://source.unsplash.com/LEpfefQf4rU" alt="">
  <img src="https://source.unsplash.com/dQ5G0h7sLno" alt="">
  <img src="https://source.unsplash.com/uy5t-CJuIK4" alt="">
  <img src="https://source.unsplash.com/hQPoYovqWR0" alt="">
</div>
```

## slickプラグインを動作させる

[slickの公式サイト](http://kenwheeler.github.io/slick/)からファイルをダウンロードして読み込みます。jQueryも読み込みます。

```html
<link rel="stylesheet" href="slick.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="slick.min.js"></script>
```


slickのオプションで必要な設定です。次のスライドが切り替わるまでの進捗を表するため `autoplay: true` で自動切り替えを有効にします。  
dotsの部分をプログレスバーとして使用するため `dots: true` と `dotsClass: 'slider-dots'` 、CSSのアニメーションでプログレスバーの進捗を実装するため `pauseOnHover: false` `pauseOnFocus: false` にします。

```js
$('.slider').slick({
  pauseOnHover: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 5000,
  dots: true,
  arrows: false,
  dotsClass: 'slider-dots',
});
```

## CSSでプログレスバーを実装する

slickプラグインのオプションで設定したclass名 `slider-dots` に対してスタイルを設定していきます。

slickプラグインで生成されるdotsをバーのような見た目にしたいので、横長になるようCSSで設定します。  
プログレスバーは `button` の `:after` を使用して実装します。

```css
.slider-dots {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
  
  li {
    display: inline-block;
    width: calc(25% - 8px); /* プログレスバーの横幅はスライドの枚数に合わせて調整してください */
    margin: 0 2px;
  }
  
  button {
    position: relative;
    width: 100%;
    height: 4px;
    border: 0;
    background-color: #ccc;
    font-size: 0;
    
    &:after {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      display: block;
      width: 0%;
      height: 100%;
    }
  }
}
```



slickでは現在表示されいてるスライドと対応するdotsに `slick-active` というclass名が付与されます。  
`slick-active` が付与されている場合に、プログレスバー（ `button:after` ）の `width` が0%から100%になるようにアニメーションを作成します。

アニメーションのdurationはslickのオプション `autoplaySpeed` に合わせて適宜調整してください。

```css
.slider-dots {
  /* 省略 */

  /* 追加 */
  .slick-active {
    button:after {
      background-color: #000;
      animation: progress 5.5s linear forwards;
    }
  }
}

@keyframes progress {
  from {
    width: 0%;
  }
  
  to {
    width: 100%;
  }
}
```


## デモ

<iframe height="550" style="width: 100%;" scrolling="no" title="Slick slider with progress bar" src="https://codepen.io/chocolat5/embed/preview/WNdEzeN?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/WNdEzeN">
  Slick slider with progress bar</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


slickスライダーにプログレスバーを実装する


PCやスマートフォンなどのデバイスの外観の設定でダークモード（またはダークテーマ）を有効にすると、ユーザーインターフェースや対応されているWebサイトが暗い色で表示されます。

このダークモードはCSSの[カスタムプロパティ（Custom Properties）](https://developer.mozilla.org/ja/docs/Web/CSS/--*)や[メディアクエリ（media queries）](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)を使用することで簡単に実装することができます。

デバイスの設定に応じてWebサイトのテーマを切り替える方法に加えて、[Google Fonts](https://fonts.google.com/)のようにWebサイト独自でライトモード/ダークモードの切り替えを可能にするボタンの設置方法を紹介します。


## デバイスの設定に応じてWebサイトのテーマを切り替える

CSSの[カスタムプロパティ（Custom Properties）](https://developer.mozilla.org/ja/docs/Web/CSS/--*)とSCSSの `@mixin` を使用してライトモード/ダークモードそれぞれの場合のカラーコードを設定します。

```css
@mixin  light-theme {
  --color-primary: #bae8e8;
  --color-secondary: #e3f6f5;
  --color-text: #2d334a;
  --color-surface: #e3f6f5;
  --color-stroke: ##272343;
  --color-bg: #fffffe;
}

@mixin dark-theme {
  --color-primary: #bae8e8;
  --color-secondary: #72757e;
  --color-text: #fffffe;
  --color-surface: #121212;
  --color-stroke: #010101;
  --color-bg: #242629;
}
```

デバイスの設定に応じたCSSの切り替えには [メディアクエリ（media queries）](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)の `prefers-color-scheme` を使用します。 （ `prefers-color-scheme` のブラウザ対応状況は[こちら](https://caniuse.com/?search=prefers-color-scheme)です。）

```css
@media (prefers-color-scheme: dark) {
  /* ダークモード（ダークテーマ）を有効にしている場合に反映されます */
}

@media (prefers-color-scheme: light) {
  /* ライトモードを有効にしている場合または設定がデフォルトの場合に反映されます */
}
```

先ほど作成した `@mixin` を `@include` で呼び出します。

```css
@media (prefers-color-scheme: dark) {
  :root {
    @include dark-theme;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    @include light-theme;
  }
}
```

### デモ

デバイスの外観の設定が反映されるようになりました。

<iframe height="400" style="width: 100%;" scrolling="no" title="Dark Mode with Custom Properties" src="https://codepen.io/chocolat5/embed/preview/dyZrRgx?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/dyZrRgx">
  Dark Mode with Custom Properties</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

実際に切り替えた際の見え方です。  
![](./sample.gif)


## Webサイト独自のダークモード切り替えボタンを設置する

各テーマのCSSの設定は[デバイスの設定に応じてWebサイトのテーマを切り替える](#%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B)と同じですが、 `@include` での呼び出し場所が変わります。 `body` タグの `class` 名によってライトテーマ/ダークテーマが切り替わるようにします。

```css
.light {
  @include light-theme;
}

.dark {
  @include dark-theme;
}
```

htmlに切り替え用のボタンを設置します。  
JavaScriptで切り替えの処理を行うためにボタンに `id="toggleTheme"` を付与しています。

```html
<button id="toggleTheme">
  <span>Dark</span> Mode
</button>
```

JavaScriptで切り替えの処理を記述していきます。  
デフォルトではライトテーマが設定されている（ `<body class="light"></body>` ）ことを前提としています。

切り替えボタンとテキストを変数として宣言します。

```js
const btn = document.getElementById('toggleTheme');
const btnText = document.querySelector('#toggleTheme span');
let theme;
```

クリックしたときに実行する処理を `toggleTheme` として宣言します。  
ボタンをクリックするたびに宣言した処理を実行したいので、 `addEventListener` で `click` イベントを指定します。

```js
const toggleTheme = () => {
  // ここにクリックした時の処理を記述する
}

btn.addEventListener('click', () => {
  toggleTheme();
});
```

`toggleTheme` の処理は、実行される度にbodyタグのclass名が `light <-> dark` となるようにします。  
class名は `element.classList.replace('現在のclass名', '変更後のclass名')` で付け替えます。

bodyタグのclass名を `element.classList.contains('class名')` で取得し、現在のclass名に応じて付け替えを行います。  
ボタン名は `element.innerHTML` で書き換えます。

```js
const toggleTheme = () => {
  if (document.body.classList.contains('light')) {
    document.body.classList.replace('light', 'dark');
    btnText.innerHTML = 'Light';
  } else {
    document.body.classList.replace('dark', 'light');
    btnText.innerHTML = 'Dark';
  }
}
```

ボタンをクリックする度にテーマが切り替わるようになりましたが、ブラウザを更新したりサイトを離れてしまうとデフォルトテーマに戻ってしまいます。  
`localStorage` を使用してユーザーが選択したテーマをWebサイトに覚えさせておくようにします。

適用するテーマを保存するための変数を宣言します。

```js
let theme;
```

`localStorage` に保存されているテーマを `localStorage.getItem('名前')` で取得し `currentTheme` として宣言します。  
保存されているテーマがない場合はデフォルトテーマ（`light`）が現在のテーマとして宣言されるようにします。

```js
const currentTheme = localStorage.getItem('theme') || 'light';
```

Webサイトが読み込まれた際の最初の見え方（表示テーマ）を、 `currentTheme` に応じてbodyタグのclass名およびボタン名を切り替えて設定します。

```js
if (currentTheme === 'dark') {
  document.body.classList.add('dark');
  btnText.innerHTML = 'Light';
} else if (currentTheme === 'light') {
  document.body.classList.add('light');
  btnText.innerHTML = 'Dark';
}
```

ボタンがクリックされる度に最初に宣言した `theme` の値が `light <-> dark` となるようにし、 `localStorage` に  `localStorage.setItem('名前', 値)`  で保存します。

```js
const toggleTheme = () => {
  if (document.body.classList.contains('light')) {
    document.body.classList.replace('light', 'dark');
    theme = 'dark';
    btnText.innerHTML = 'Light';
  } else {
    document.body.classList.replace('dark', 'light');
    theme = 'light';
    btnText.innerHTML = 'Dark';
  }
  localStorage.setItem('theme', theme);
}
```

### デモ

<iframe height="400" style="width: 100%;" scrolling="no" title="Dark Mode with Toggle Button" src="https://codepen.io/chocolat5/embed/preview/OJOqdqY?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/OJOqdqY">
  Dark Mode with Toggle Button</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


## デバイスの設定とWebサイト独自の切り替えの両方に対応する

デバイスはダークモード（ダークテーマ）を有効にしていても、Webサイトはライトテーマで見たいという場合もあるかもしれません。  
紹介した2つの方法を組み合わせることで、Webサイトを最初に訪問した際はデバイスの設定に準じたテーマで表示され、ボタンによってユーザーが任意でテーマを切り替えることができるようになります。

デバイスの外観の設定をJavaScriptで取得するには `window.matchMedia('(prefers-color-scheme: dark)')` を使用します。    
デバイスの設定がダークモード（ダークテーマ）になっている場合は `true` を返します。  
この値を `prefersDarkTheme` として宣言します。

Webサイト訪問時に使用するテーマを判定する箇所に追記します。

```js
if (currentTheme === 'dark' || prefersDarkTheme.matches) {
  document.body.classList.add('dark');
  btnText.innerHTML = 'Light';
} else if (currentTheme === 'light' || !prefersDarkTheme.matches) {
  document.body.classList.add('light');
  btnText.innerHTML = 'Dark';
}
```

### デモ

<iframe height="400" style="width: 100%;" scrolling="no" title="Dark Mode with media queries and Toggle Button" src="https://codepen.io/chocolat5/embed/preview/WNXmdZJ?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/WNXmdZJ">
  Dark Mode with media queries and Toggle Button</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


## Reference 参照

- prefers-color-scheme [https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme](https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme) （2022-3-7参照）  
- Window.localStorage [https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage) （2022-3-7参照）  
- window.matchMedia [https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia](https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia) （2022-3-7参照）  

CSSメディアクエリを使用したダークモードの実装方法


テキストにマウスhoverすると、画像が切り替わるスライドの作り方です。  
完成形は[こちら](#%E3%83%87%E3%83%A2)です。

## 実現したいこと

- テキストにマウスhoverすると画像が切り替わる


## 1. htmlを用意する

切り替わる画像エリア `slide-image` と、マウスhoverするテキストエリア `slide-text` の2つを用意します。

```html
<div class="slide-wrap">
  <ul class="slide-image">
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="">
    </li>
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/3esjG-nlgyk/640x360" alt="">
    </li>
    <li class="slide-image__item">
      <img src="https://source.unsplash.com/9HnSQn4TVEg/640x360" alt="">
    </li>
  </ul>
  <div class="slide-text">
    <p class="slide-text__text">
      <span>Iron Man</span>
    </p>
    <p class="slide-text__text">
      <span>Thor</span>
    </p>
    <p class="slide-text__text">
      <span>Captain America</span>
    </p>
  </div>
</div>
```

## 2. cssでスタイルを設定する

画像エリアはマウスhoverで切り替わるようにするため、1枚だけ見える状態にします。  
1で作成したhtmlの1つ目の画像に `current` というclassを追加します。

```html
<li class="slide-image__item current">
  <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="">
</li>
```

画像群は ` display: grid;` で重なるようにします。

後ほどJavaScriptでマウスhoverと連動して `current` の付け替えをしますが、
その際に `current` の場合に `opacity: 1;` および `visibility: visible;` 、
そうでないときは `opacity: 0;` および `visibility: hidden;` になるように設定します。
`transition` で切り替わるときの状態の変化も設定します。

```css
.slide-image {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  
  &__item {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity .45s cubic-bezier(0.65, 0, 0.35, 1),
      visibility .45s cubic-bezier(0.65, 0, 0.35, 1);
    
    &.current {
      opacity: 1;
      visibility: visible;
      transition:
        opacity .45s cubic-bezier(0.65, 0, 0.35, 1),
        visibility .45s cubic-bezier(0.65, 0, 0.35, 1);
    }
  }
}

```


## 3. JavaScriptでclassの付け替えをする

テキストにマウスhoverした場合にどの画像を `current` にするか、  
カスタムデータ属性の `data-*` と `id` を使用して対応するようにします。

また、JavaScriptから操作する時のために、  
画像に `js-target` テキストに `js-trigger` とそれぞれclassを追加します。

```html
<div class="slide-wrap">
  <ul class="slide-image">
    <li id="item-01" class="slide-image__item js-target current">
      <img src="https://source.unsplash.com/rkaahInFlBg/640x360" alt="">
    </li>
    <li id="item-02" class="slide-image__item js-target">
      <img src="https://source.unsplash.com/3esjG-nlgyk/640x360" alt="">
    </li>
    <li id="item-03" class="slide-image__item js-target">
      <img src="https://source.unsplash.com/9HnSQn4TVEg/640x360" alt="">
    </li>
  </ul>
  <div class="slide-text">
    <p data-target="item-01" class="slide-text__text js-trigger">
      <span>Iron Man</span>
    </p>
    <p data-target="item-02" class="slide-text__text js-trigger">
      <span>Thor</span>
    </p>
    <p data-target="item-03" class="slide-text__text js-trigger">
      <span>Captain America</span>
    </p>
  </div>
</div>
```

JavaScriptではまず画像群とテキスト群を変数として宣言します。

```js
const triggers = document.querySelectorAll('.js-trigger'); 
const images = document.querySelectorAll('.js-target');
```

テキストそれぞれにマウスhoverする度に処理を実行したいので、  
`triggers` に対して `forEach` を使用します。

カーソルが要素の上を移動したときにイベントが発生する `mouseover` を使用して、  
マウスhoverした際に処理が実行されるようにします。

```js
triggers.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    // ここに処理を記述
  });
}
```

ここからは画像の切り替えに必要な `current` classの付け替え処理についてです。

マウスhoverされているテキストを取得して `item` に格納します。  
そのテキストに対応する画像idを取得して `target` に格納します。
取得したidをもとに表示させたい画像を取得して `current` に格納します。
```js
const item = e.currentTarget;
const target = item.getAttribute('data-target');
const current = document.getElementById(target);
```

現在 `current` になっている画像を非アクティブにするために
一旦、画像群に付与されている `current` classを削除します。

```js
images.forEach(image => {
  image.classList.remove('current');
});
```

最後に先ほど取得した `current` に class `current` を追加します。
```js
current.classList.add('current');
```

最終的なJavaScriptのソースコードです。

```js
const triggers = document.querySelectorAll('.js-trigger'); 
const images = document.querySelectorAll('.js-target');

triggers.forEach(trigger => {
  trigger.addEventListener('mouseover', (e) => {
    const item = e.currentTarget;
    const target = item.getAttribute('data-target');
    const current = document.getElementById(target);
    images.forEach(image => {
      image.classList.remove('current');
    });
    current.classList.add('current')；
  });
});

```


## デモ

テキストにマウスhoverすると画像が切り替わります。

<iframe height="350" style="width: 100%;" scrolling="no" title="Hover Slide" src="https://codepen.io/chocolat5/embed/JjOwVVJ?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/JjOwVVJ">
  Hover Slide</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


## Reference 参照

- Array.prototype.forEach() [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) （2022-3-4参照）  
- Element: mouseover イベント [https://developer.mozilla.org/ja/docs/Web/API/Element/mouseover_event](https://developer.mozilla.org/ja/docs/Web/API/Element/mouseover_event) （2022-3-4参照）

マウスhoverで画像が切り替わるスライド [jQuery不要]


278言語に対応しながら軽量で拡張可能なシンタックスハイライトライブラリ [PrismJS](https://prismjs.com/) を使用して、Gatsby JS製のブログの本文内のソースコード（コードブロック）をシンタックスハイライト表示する方法です。

シンタックスハイライトに加えて、当ブログのようにコードブロックにファイル名や言語名などタイトルを表示する方法もあわせてご紹介します。

## 実現したいこと

- Gatsby JS製のブログの本文内のソースコード（コードブロック）をシンタックスハイライト表示させる
- コードブロックにタイトルを表示させる


## 要件

- Gatsby JS製ブログ
- 本文記事をMarkdownで作成している


## 1. プラグインをインストールする

 [PrismJS](https://prismjs.com/) とGatsby JSでPrismJSを使用するためのプラグインをインストールします。

※ MarkdownファイルをHTMLに変換するためのプラグイン `gatsby-transformer-remark` はインストール済みとします。

```bash
npm install --save gatsby-remark-prismjs prismjs
```

インストールしたプラグインを有効にするため `gatsby-config.js` に記述し、必要に応じてオプションを設定します。

```js
/** gatsby-config.js */

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-prismjs`,
          options: {
            // <pre>タグのclass名のプレフィックス名を設定
            // 例 : <pre class="language-js">
            classPrefix: "language-",
            // セパレーターを使用して、
            // シングルバックティックなどのインラインコードに言語を設定できる
            inlineCodeMarker: null,
            // 言語の別名を設定できる
            // 例 : { sh: "bash" }
            aliases: {},
            // 行番号の表示・非表示
            showLineNumbers: false,
            // true にするとインラインコードをハイライトしない
            noInlineHighlight: false,
          },
        }
      ]
    }
  }
]
```

上記以外に、新しい言語定義を追加したりすでに存在する言語定義を拡張するオプションなどもありますが、ここでは省略します。その他のオプションに関しての詳細は [gatsby-remark-prismjs（English）](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/) をご覧ください。


## 2. シンタックスハイライトのテーマ用CSSを読み込む

 [PrismJS](https://prismjs.com/) に用意されている[8種類のテーマ](#prismjs%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E)から好きなものを選んでCSSを読み込みます。

Gatsby JSにグローバルCSSファイルを追加する方法は「[レイアウトコンポーネントを使用する](#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%ABcss%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)」ものと「[レイアウトコンポーネントなしで追加する](#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AA%E3%81%97%E3%81%A7%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%ABcss%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)」方法の2種類があります。


### レイアウトコンポーネントを使用してグローバルCSSファイルを追加する

ヘッダーやスタイルなどのサイト全体で共有されるレイアウトコンポーネント（ `Layout.js` など）でテーマ用のCSSを読み込みます。

 [PrismJS](https://prismjs.com/) から好きなテーマのCSSをダウンロードして、 `Layout.js` と同じ階層に配置します。（ `Layout.js` は `src/pages/index.js` で使用されているものとします。）


```md
src/
  │───components/
  │   │─ Layout.js
  │   └─ prism.css
  │
  └───pages/
        └─  index.js
```

`Layout.js`でテーマ用のCSSを読み込みます。

```jsx
/** src/components/Layout.js */

import React from "react"
/* DEFAULTテーマを読み込む場合の例です */
import "./prism.css"

const Layout = ({ children }) => {
  return <div>{children}</div>
}

export default Layout
```

### レイアウトコンポーネントなしでグローバルCSSファイルを追加する

Gatsby JSのテーマフォルダ直下に `gatsby-browser.js` を作成して、使用したい [PrismJS](https://prismjs.com/) のテーマCSSを読み込む。

```jsx
/** gatsby-browser.js */

/* DARKテーマを読み込む場合の例です */
import "prismjs/themes/prism-dark.css"

// または
// require("prismjs/themes/prism-dark.css")
```

### PrismJSのテーマ

**DEFAULT** `prism.css`  
![](./prism-default.jpg)

**DARK** `prism-dark.css`  
![](./prism-dark.jpg)

**FUNKY** `prism-funky.css`  
![](./prism-funky.jpg)

**OKAIDIA** `prism-okaidia.css`  
![](./prism-okaidia.jpg)

**TWILIGHT** `prism-twilight.css`  
![](./prism-twilight.jpg)

**COY** `prism-coy.css`  
![](./prism-coy.jpg)

**SOLARIZED LIGHT** `prism-solarizedlight.css`  
![](./prism-solarized.jpg)

**TOMORROW NIGHT** `prism-tomorrow.css`  
![](./prism-tomorrow.jpg)


そのほかの言語の例は [PrismJS](https://prismjs.com/) 公式サイトでご確認ください。

## 3. コードブロックにタイトルを表示する

プラグイン `gatsby-remark-prismjs-add-title` をインストールします。

```bash
npm install gatsby-remark-prismjs-add-title --save-dev
```

`gatsby-config.js` にインストールしたプラグインを設定します。

*※重要 コードブロックを使用する他のプラグインより前に定義する必要があります。*

```js
/** gatsby-config.js */

plugins: [
  {
    resolve: 'gatsby-transformer-remark',
    options: {
      plugins: [
        {
          resolve: 'gatsby-remark-prismjs-title',
          options: {
            className: 'your-custom-class-name'
          }
        }
      ]
    }
  }
]
```

タイトル部分のタグには `gatsby-code-title` クラスが設定されます。  
必要に応じてスタイルを設定してください。

本文記事内での使い方は、Markdownに `:title=表示するタイトル` と記述します。  
以下の例では `example-file.js` の部分がタイトルとしてコードブロックに表示されます。

```md
```js:title=example-file.js
alert('how cool is this!');
```js
```



## Reference 参照

- PrismJS [https://prismjs.com/](https://prismjs.com/) （2022-3-3参照）  
- gatsby-remark-prismjs [https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs/) （2022-3-3参照）  
- gatsby-remark-prismjs-add-title [https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs-title/](https://www.gatsbyjs.com/plugins/gatsby-remark-prismjs-title/) （2022-3-3参照）  
- Standard Styling with Global CSS Files [https://www.gatsbyjs.com/docs/how-to/styling/global-css/](https://www.gatsbyjs.com/docs/how-to/styling/global-css/) （2022-3-3参照）


[GatsbyJS] Prism.jsを使用してソースコードをハイライト表示する


マウスのカーソルを追従するマウスストーカーの作り方です。


## CSSでマウスストーカーのスタイルを設定する

マウスストーカーの色は `background` 、大きさは `width` `height` で変更できます。

マウスのカーソルを動かしたときに少し遅れて付いてくるようにしますが、  
そのときの遅延具合を `transition` の `transform` の数値で調整できます。  
数値を大きくすると追従する速度がより遅く、小さくするとより速くなります。

```scss
.mouse-stalker {
  background: rgba(green, 0.4);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  transition:
    transform 0.6s,
    width .5s, height .5s,
    background-color .5s;
  transition-timing-function: ease-out;
  z-index: 999;

  @media screen and ( max-width: 599px ) {
    display: none;
  }
}
```

スマホでは非表示になるようにしています。class名は適宜変更してください。


## JavaScriptでマウスストーカーを作成する

`div` を作成して `body` に追加します。  
CSSでマウスストーカーのスタイルを設定するために `class` も付与しています。

```js
  const stalker = document.createElement('div');
  stalker.setAttribute('class', 'mouse-stalker');

  document.body.appendChild(stalker);
```

画面の左上に先ほど設定した色とサイズのマウスストーカーが表示されます。  
この時点ではまだマウスを追従しません。


## マウスのカーソルを追従させるfunctionを作成して実行する

`clientX` `clientY` でマウスのカーソルの位置（ウィンドウの左端と上からの距離）を取得します。  
CSSの `translate` に取得したマウスの座標を設定し、  
マウスストーカーの位置をマウスのカーソルの位置と同じ位置に移動させます。

`mousemove` でマウスが動くたびにfuntionが実行され、  
マウスのカーソルの位置 = マウスストーカーの位置が更新されます。

このとき最初にCSSで `transform` の値を遅延させるように設定しているので、  
マウスストーカーが少し遅れてカーソルを追従するような動きになります。

```js
const mouseMove = (e) => {
  stalker.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
}

document.addEventListener('mousemove', mouseMove);
```

## デモ

サンプルとソースはこちら

<iframe height="300" style="width: 100%;" scrolling="no" title="Mouse Stalker" src="https://codepen.io/chocolat5/embed/NWaqdQo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/chocolat5/pen/NWaqdQo">
  Mouse Stalker</a> by chocolat5 (<a href="https://codepen.io/chocolat5">@chocolat5</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


マウスのカーソルを追従するマウスストーカーの作り方


[GatsbyJS](https://www.gatsbyjs.com/)と[Netlify CMS](https://www.netlifycms.org/)を使用したブログの作り方です。

## 実現したいこと

- Gatsby JSでブログサイトを作成
- Netlify CMSを使用して記事を投稿できるようにする


## Gatsby JSでサイトを作成する

Gatsby JSに予め用意されているStarterの中から、Netlify CMSに対応済みの「gatsby-advanced-starter」を使用します。

[Gatsby JS Sterter](https://www.gatsbyjs.com/starters/Vagr9K/gatsby-advanced-starter)  
[GitHub](https://github.com/Vagr9K/gatsby-advanced-starter)

Starterをローカルにインストールします。

```shell
gatsby new <PROJECT_NAME> https://github.com/Vagr9K/gatsby-advanced-starter
```

インストールしたフォルダに移動してローカル環境で実行します。

```shell
cd <PROJECT_NAME>
gatsby develop
```

ブラウザで[http://localhost:8000/](http://localhost:8000/)にアクセスして下記の画面が表示されればインストールは完了です。

![](./netlify-cms-01.jpg)


## Netlify CMSをセットアップする

※ 本記事で使用しているStarter「gatsby-advanced-starter」はNetlify CMSのセットアップ済みのためこの手順は不要ですが、設定ファイル `config.yml` の内容を適宜書き換える必要があります。

Netlify CMSとGatsbyのプラグインをインストールします。

```shell
npm install netlify-cms-app gatsby-plugin-netlify-cms  --save
```

`gatsby-config.js` ファイルにNetlify CMSプラグインを記述します。

```js
/** gatsby-config.js */

module.exports = {
  plugins: [`gatsby-plugin-netlify-cms`],
}
```

Netlify CMSの構成ファイル `config.yml` を `static/admin/` フォルダに作成します。  
※ 下記は「gatsby-advanced-starter」インストール時に予め用意されているファイルに記述されている内容です。

```yml
## config.yml

backend:
  name: git-gateway
  branch: master
  repo: vagr9k/gatsby-advanced-starter 

media_folder: static/assets
public_folder: assets

collections:
  - name: blog
    label: "Post"
    folder: "content"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}.md"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Cover Image", name: "cover", widget: "image" }
      - { label: "Slug", name: "slug", widget: "string" }
      - { label: "Category", name: "category", widget: "string" }
      - { label: "Tags", name: "tags", widget: "list" }
      - { label: "Body", name: "body", widget: "markdown" }

```

サイトはGitHubのリポジトリにアップしてNetlifyにデプロイするため、 `backend` 部分は下記のように記述します。

```yml
backend:
  name: git-gateway
  branch: master # または main
  repo: vagr9k/gatsby-advanced-starter # ご自身のユーザー名とリポジトリ名
```


## Netlifyへデプロイしてサイトを公開する

Netlify CMSのコンテンツをGitリポジトリに保存するためにサイトのデータをGitHubのリポジトリにpushします。

Netlifyにログインし（初めて利用する場合はSign upしてください）、「[New site from Git](https://app.netlify.com/start)」をクリックし、画面の指示に従いながら先ほどpushしたGitHubのリポジトリからデプロイします。

デプロイが完了するとURLが生成され、先ほどローカル環境で閲覧したページが公開されているのを確認できます。

## GitHubで認証する/Git GatewayでサイトをGitHub APIに接続する

Netlifyのページ（[Use OAuth provider tokens on your site](https://docs.netlify.com/visitor-access/oauth-provider-tokens/#using-an-authentication-provider)/[Use OAuth provider tokens on your site](https://docs.netlify.com/visitor-access/git-gateway/) ）の手順通りに認証を進めます。

① GitHubのアカウントページ `Settings > Developper settings > OAuth Apps` に移動して、Netlify CMSを追加します。

![](./netlify-cms-02.jpg)


② Client secrets を生成します。  
③ Netlifyの管理画面にアクセスし、 `Site settings > Access control > OAuth` に移動してプロバイダーをインストールします。  
④ GitHubを選択し、Client IDとClient secretsを入力します。

![](./netlify-cms-03.jpg)

⑤ 引き続きNetlifyの管理画面で `Site settings > Identity` に移動し、「Enable Identity」をクリックします。

![](./netlify-cms-04.jpg)

⑥ `Services > Git Gateway` に移動し「Enable Git Gateway」をクリックします。



## Netlify CMSで記事を投稿する

デプロイして生成されたサイトURLに「/admin」を追加して、Netlify CMSの管理画面にアクセスします。

![](./netlify-cms-05.jpg)

「Login with Netlify Identity」をクリックし、Sign upします。

![](./netlify-cms-06.jpg)

入力したメールアドレスに届くメールに従い登録を完了させます。  
再度、管理画面に移動し登録したメールアドレスとパスワードでログインします。

ログインに成功するとNetlify CMSのダッシュボードが表示されます。記事一覧にはStarterに用意されていたサンプル記事が読み込まれています。

![](./netlify-cms-07.jpg)

テスト投稿をしてみます。入力が終わり右上の「Publish > Publish now」をクリックすると記事が保存され、自動的にNetlifyでデプロイが開始されます。

![](./netlify-cms-08.jpg)

デプロイ完了後、サイトのURLにアクセスして一番上にテスト投稿した記事のタイトルが追加されていれば設定は完了です。

以上で、Gatsby JSで作成したサイトにNetlify CMSから記事を投稿できるようになりました 🎉


[GatsbyJS] Netlify CMSを使用したブログの作り方


記事の公開日とは別に最終更新日を表示する方法です。


## 実現したいこと

* 記事の公開日とは別に更新日を表示する


## 記事のMarkdownファイルに最終更新日のフィールドを追加する

`modifieddate` の部分は好きな文字列に変えても問題ありません。

```json
/** post.md */

date: "2019-06-02"
modifieddate: "2019-10-02" /* 追加 */
```

## 表示させたいページのテンプレートのGraphQLに追加する

Markdownファイルに追加した `modifieddate` をGraphQLで取得します。

```jsx
query {
  markdownRemark {
    edges {
      node {
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          modifieddate(formatString: "MMMM DD, YYYY") /* 追加 */
        }
      }
    }
  }
}
```

`(formatString: "MMMM DD, YYYY")` の部分は日付の形式のフォーマット用の記述です。  
通常 `2019-10-02` と表示されるところを下記の場合、 `October 02, 2019` と表示されます。


## 表示させたいページのテンプレート（コンポーネント）で読み込む

以下は当ブログの記事詳細ページでの表示の例です。
日付表示以外の部分は省略しています。

```jsx
/** post.js（記事ページテンプレート） */

import React from "react";
import PostDetail from "../components/PostDetail";

const PostTemplate = props => {
  return (
    <PostDetail {...props} />
  );
}
```

```jsx
/** PostDetail.js（記事詳細ページ） */

import React from "react";

const PostDetail = props => {
  const postNode = props.data.markdownRemark;
  const post = postNode.frontmatter;

  return (
    <p>公開日 : {post.date}</p>
    <p>最終更新日 : {post.modifieddate}</p>
  );
}

export default PostDetail;
```

## 参照

- How to get 'Last Update Date' of a blog post in GATSBY.js [https://stackoverflow.com/questions/56025679/how-to-get-last-update-date-of-a-blog-post-in-gatsby-js](https://stackoverflow.com/questions/56025679/how-to-get-last-update-date-of-a-blog-post-in-gatsby-js) （2021-1-5参照）


[GatsbyJS] 最終更新日を表示する


WordPressやコンポーネントの概念があるReactなどのように、htmlでもヘッダーやフッターなど共通部分をテンプレート化して効率的にコーディングをすることが可能です。


## 実現したいこと

* ヘッダーやフッターなどの共通部分をテンプレート化する
* WordPressやReactなどを使用せずHTMLのみでコーディング


## 事前準備

### npmパッケージのインストール

Webpackのプラグイン [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) と [html-loader](https://github.com/webpack-contrib/html-loader) をインストールします。

```bash
npm i --save-dev html-webpack-plugin html-loader
```

プラグインの基本的な使用方法の説明は省略します。

### サンプルサイトの構成

例としてトップページと下層ページの2ページのサイトを作成します。JavaScriptのファイルは `common.js` と `index.js` の2種作成し、 `index.js` はトップページでのみ読み込むようにします。


## htmlの作成

テンプレートの `header.html` を作成します。単純に共通化したい部分のhtmlを抜き出しただけのファイルです。 `src/template/` に保存します。

```html
/** header.html */

<header>
  <nav>
    <ul>
      <li><a href="./index.html">Home</a></li>
      <li><a href="./page.html">Page A</a></li>
    </ul>
  </nav>
</header>
```


テンプレートを読み込む側の `index.html` と `page.html` を作成します。テンプレートのhtmlを読み込むには `html-loader` を使用します。テンプレートを読み込みたい場所に `<%= require('html-loader!ここに読み込みたいhtmlを記述') %>` と記述します。JavaScriptファイルの読み込みは、Webpackのプラグインを使用してbuild後に出力されるhtmlに記述されるようにするため、ここでは記述しません。

`page.html` は `<title></title>` と `<h1></h1>` を変えるだけです。

```html
/** index.html */

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>
<%= require('html-loader!./template/header.html') %>

<main>
  <h1>This page is Home</h1>
</main>

</body>
</html>
```

##  JavaScriptファイルの作成

`src/js/` に `common.js` と `index.js` も作成します。ファイルの中身は何でも構いません。サンプルでは意図した通りに読み込まれるかを確認するため、以下のようにしています。

```js
/** common.js */

console.log('index.htmlとpage.htmlの両方で読み込まれる');
```

```js
/** index.js */
console.log('index.htmlでのみ読み込まれる');
```


## webpack configの設定

`html-webpack-plugin` を使用して、build後にdistフォルダにhtmlファイルが出力されるように設定します。`index.html` と `page.html` の2ページ分を記述します。

`plugins` に `new HtmlWebpackPlugin()` と記述するだけでデフォルトのindex.htmlファイルが出力されますが、プラグインに用意されているオプションでカスタマイズしていきます。

`template` には先ほど作成したhtmlファイル（コーディング時に編集するファイル）を記述します。 `filename` は記述しない場合デフォルトの `index.html` になるため、 `index.html` 以外のページは必ず記述するようにします。

```js
/** webpack.config.js */

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    common: './src/js/common.js',
    index: './src/js/index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new HtmlWebpackPlugin({
      template: './src/page.html',
      filename: 'page.html'
    })
  ]
}
```

次に `index.js (index.min.js)` が `index.html` でのみ読み込まれるようにします。

指定したchunkのみを含める `chunks: ['含めるentryの名前を記述']` か 指定したchunkを除外する `excludeChunks: ['除外するentryの名前を記述']` のどちらかをオプションに記述します。

サンプルサイトでは以下のように、`page.html` では`common.js (common.min.js)` のみを読み込まれるようにします。

```js
/** webpack.config.js */

new HtmlWebpackPlugin({
  template: './src/page.html',
  filename: 'page.html',
  chunks: ['common']
})
```

ここまでで `npm run build` を実行すると `dist` フォルダにJavaScriptを読み込む `<script>` タグを含んだhtmlファイルが生成されます。

## html-webpack-pluginのその他のオプション

### ページタイトルをwebpackのconfigで管理する

webpackのconfigで `title` オプションを使用して、ページタイトルを記述します。例えば `index.html` のページタイトルを「Home | サイト名」にする場合は以下のように記述します。


```js
/** webpack.config.js */

new HtmlWebpackPlugin({
  title: 'Home | サイト名',
  template: './src/index.html'
}),
```

### キャッシュ対策

build後のhtmlで読み込まれるJavaScriptファイルにユニークなhashを付与することができます。オプションの `hash` を `true` にするだけです。

```js
/** webpack.config.js */

new HtmlWebpackPlugin({
  title: 'Home | サイト名',
  template: './src/index.html',
  hash: true
}),
```

### JavaScriptファイルの読み込む位置を指定する

`inject` オプションを使用することで、build後のhtmlでJavaScriptファイルを読み込む `<script>` タグの位置を変更できます。指定できるのは `true || 'head' || 'body' || false` の4つで、それぞれ以下のようになります。

|  値  |  説明  |
| ---- | ---- |
|  true  |  body終了タグの直前（bodyを指定した場合と同じ）  |
|  head  |  head終了タグの直前  |
|  body  |  body終了タグの直前（trueを指定した場合と同じ）  |
|  false  |  `<script>` タグの記述なし  |


## デモ・ソース

[Source](https://github.com/chocolat5/webpack-html-template)  
[「Webpackを使用してhtmlの共通部分をテンプレート化」のデモ](https://demos.chocolat5.com/webpack-html-template/)


## 最後に

記事内で作成したサンプルサイトのように、テンプレートのhtmlを読み込む側と異なるディレクトリに設置する場合は、画像やリンクのパスの記述に注意が必要です。


## 参照

- HTML Webpack Plugin [https://github.com/jantimon/html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) （2020-2-18参照）  
- html-loader [https://github.com/webpack-contrib/html-loader](https://github.com/webpack-contrib/html-loader) （2020-2-18参照）

Webpackを使用してhtmlの共通部分をテンプレート化


[React Hook](https://ja.reactjs.org/docs/hooks-intro.html)を使用して[GraphQL](https://graphql.org/)をクエリする新機能 `useStaticQuery`が[Gatsby](https://www.gatsbyjs.org/) v2.1.0から導入されました。

ヘッダーやフッターコンポーネント内でGraphQLから取得したデータを使用するためには、Layoutやページコンポーネントから `props` を通してデータを渡す必要がありましたが、Gatsby v2から導入された新しいAPI `StaticQuery` を使用することで、ヘッダーやフッターコンポーネント内で直接GraphQLのデータを取得できるようになりました。

`useStaticQuery` はReact Hooksを使用するバージョンです。


## 実現したいこと

* `useStaticQuery` を使用して任意のコンポーネントでGraphQLのデータを取得する
* `useStaticQuery` で取得したデータでナビゲーションにカテゴリーリストを表示する


## 事前準備

動作にはReactとReactDOM 16.8.0以降が必要です。

```bash
npm install react@^16.8.0 react-dom@^16.8.0
```


## 基本的な使い方



使用したいコンポーネントで `useStaticQuery` と `graohql` をgatsbyからインポートします。

```jsx
/** header.js */

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
```



`useStaticQuery` でGraphQLのデータを取得するクエリを記述し、任意の名前をつけた変数として定義します。

```jsx
/** header.js */

const data = useStaticQuery(graphql`
	query HeaderQuery {
		site {
			siteMetadata {
				siteUrl
			}
		}
	}
`);

console.log(data); // https://xxxxx.com
```

JSXで `a` タグのhrefに`data` を指定したりなど、GraphQLをデータを任意のコンポーネント内で使用できるようになりました。



## ナビゲーションにカテゴリーリストを表示する

サイトのカテゴリーを取得するには、GraphQLの `group(field: xxxxx)` を利用して絞り込みを行います。 

```jsx
const data = useStaticQuery(graphql`
  query CategoryQuery {
    allMarkdownRemark {
      group(field: frontmatter___category) {
        fieldValue
      }
    }
  }
`);
```



`field` に絞り込みの対象となるキーを指定します。サイト内の全カテゴリーを取得したいので `frontmatter___category` としています。Markdownファイルの先頭の `---` で囲まれたエリアにcategoryが指定されている必要があります。

`fieldValue` はMarkdownファイルの `category: "blog"` の `"blog"` にあたります。



取得されるデータの一例です。当サイトでは下記のデータが取得できます。

```json
{
  "data": {
    "allMarkdownRemark": {
      "group": [
        {
          "fieldValue": "blog"
        },
        {
          "fieldValue": "css"
        },
        {
          "fieldValue": "gatsby"
        },
        {
          "fieldValue": "javascript"
        },
        {
          "fieldValue": "react"
        }
      ]
    }
  }
}
```



カテゴリーリストが取得できたら、ナビゲーションコンポーネント内で、 `map` メソッドを使用してリンク付きのリストを作成します。

`gist:chocolat5/f9235751628d1f8e341b4e71e7e0844f#Navigation.js`


カテゴリーのリンクリストが表示されました。🎉

```html
<ul>
  <li><a href="/categories/css">css</a></li>
  <li><a href="/categories/gatsby">gatsby</a></li>
  <li><a href="/categories/javascript">javascript</a></li>
  <li><a href="/categories/react">react</a></li>
</ul>
```





## 参照

- Querying Data in Components with the useStaticQuery Hook [https://www.gatsbyjs.org/docs/use-static-query/](https://www.gatsbyjs.org/docs/use-static-query/) （2020-1-12参照）

[GatsbyJS] React Hookを使用してGraphQLでナビゲーションにカテゴリーリストを表示する

テキストなどをワンクリックでクリップボードへコピー可能にする「[clipboard.js](https://clipboardjs.com/)」の使い方です。

[clipboard.js 公式サイト](https://clipboardjs.com/)  
[clipboard.js GitHub](https://github.com/zenorocha/clipboard.js/)

jQueryなどのフレームワークに依存しない、シンプルな機能のみを提供するたった3KBのパッケージです。

公式サイトにも書いてる基本的な使い方と、コピーされたことがわかるアクションの追加方法、HTMLに記述するテキスト以外をコピー対象とする実装方法です。


## 実現したいこと

* ワンクリックで対象をクリップボードにコピーする
* コピーされたことを知らせるテキストを表示
* コピー対象をJavaScriptで管理する


## 基本的な使い方

clipboard.jsファイルを読み込みます。npmパッケージをインストールまたはダウンロードして該当のファイルを読み込むか、CDNから読み込みます。ここではCDNから読み込む方法で作成します。

```html
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
```


HTMLではコピー対象となるターゲットとトリガーとなるボタンを設置します。  
トリガーの `data-clipboard-target="xxx"` に、コピー対象に付与したidを指定します。

```html

<input id="text" value="ボタンをクリックするとこのテキストがクリップボードにコピーされます。" readonly>


<button class="btn" data-clipboard-target="#text">
  Click to Copy
</button>
```



JavaScriptで、トリガーとなる要素を指定してインスタンス化します。

```js
new ClipboardJS(".btn");
```

ボタンをクリックすると、`input` の `value` のテキストがクリップボードにコピーされます。



トリガーとなるボタンに直接コピー対象のテキストを指定することも可能です。

```html
<button class="btn" data-clipboard-text="この部分がクリップボードにコピーされます。">
  Copy Text2
</button>
```



### デモ

[clipboard.jsの基本的な使い方デモ](https://5uyg4.csb.app/)  
[Source](https://codesandbox.io/s/clipboard-basic-5uyg4)



## コピーされたことを通知する

デモページではボタンをクリックすると、画面下部あたりに「Copied!」というテキストが表示されます。

公式サイトによると、

> Each application has different design needs, ...

との理由からツールチップが標準では組み込まれていないため、コピーされたことを通知するには自分で追加する必要があります。

組み込みのツールチップがない代わりに、コピーが成功または失敗したあとに別の処理を実装できるカスタムイベントが用意されています。

```js
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
  // 成功したときに実行する処理を記述
});

clipboard.on('error', function(e) {
  // エラー時に実行する処理を記述
});
```


このカスタムイベントを利用して通知を実装します。先ほどのJavaScriptを変更します。

```js
const clipboard = new ClipboardJS('.btn');

clipboard.on("success", function(e) {
  showNotification();
  e.clearSelection();
});
```


コピーが成功した場合に実行される関数 `showNotification()` を作成します。ここではHTMLにあらかじめ通知用のテキストを用意して非表示にしておき、コピーが成功したらclass名を付与して表示されるようにしています。
```js
const notification = document.getElementById("notification");
function showNotification() {
  notification.classList.add("active");
  setTimeout(() => {
    notification.classList.remove("active");
  }, 1500);
}
```



## さまざまな対象をコピーする

基本的な使い方ではどちらもHTML内にコピーの対象となるテキストを記述しています。単純なテキストだけでなくさまざまなデータをコピーできるようにします。公式サイトの「Advanced Usage」のAPIを利用して実装します。


JavaScriptにコピー対象となるデータを用意します。

```js
const data = {
  text: 'このテキストがコピーされます。'
};
```


トリガーとなるボタンがクリックされたら、HTML要素に独自に設定したカスタムデータ属性の値を読み込み、JavaScriptで定義したdataから一致するデータをコピー対象として返します。

```js
new ClipboardJS(btn, {
  text: function(trigger) {
    const id = trigger.getAttribute("data-id");
    return data[id];
  }
});
```


トリガーとなるボタンのカスタムデータ属性を正しく設定します。ここでは `data.text` の値がコピーされるようにしたいので、 `data-id="text"` をボタン要素に設定します。

```html
<button class="btn" data-id="text">
  Copy Text
</button>
```



JavaScriptの `data` オブジェクトを以下のような配列やテンプレート文字列にしても問題なく動作します。（テンプレート文字列はIE未対応）

```js
const sample = '変数';
const data = {
  text: "このテキストがコピーされます。",
  array: ["Apple", "Orange", "Grape", "Banana"],
  literal: `テンプレート文字列をコピーする。
改行も適用されます。
${sample}の埋め込みも可能です。`
};
```



最後に、別ファイルの内容をテキストとして取得し、コピー対象とする方法です。webpackのローダーを使用するため、コンパイルが必要になります。サンプルとして、CSSファイルのスタイルをテキストとしてコピーできるようにします。

別ファイルの内容を文字列として取得できる [**[raw-loader](https://github.com/webpack-contrib/raw-loader)**] を使用します。CSSファイルを読み込むためcss-loaderもあわせて使用します。

```shell
npm install raw-loader css-loader --save-dev
```



```js
/** webpack.config.js */

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["raw-loader", "css-loader"]
      }
    ]
  }
};
```



コピー対象となるCSSファイルを用意します。

```css
/** button.css */

.button {
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
  background: #444;
  border-radius: 4px;
}

.button:hover {
  opacity: 0.7;
}
```



raw-loaderで先ほど作成したCSSファイルを取得します。取得したデータをコピー対象のオブジェクトに指定します。

```js
const buttonStyle = require("!!raw-loader!./button.css");

const data = {
  省略,
  css: buttonStyle
};
```
HTMLに `data-id="css"` を設定したトリガーを設置すれば、button.css内の記述がテキストとしてコピーされるようになります。


### デモ

[clipboard.jsでさまざまな対象をコピーするデモ](https://djl90.csb.app/)  
[Source](https://codesandbox.io/s/clipboard-sample-djl90)

clipboard.jsでクリップボードにワンクリックでコピーする


ウィンドウを下へスクロールすると隠れ、上にスクロールすると表示されるヘッダーの作り方です。下へスクロールすると隠れる仕様の場合、ウィンドウがページの最下部に到達したときもヘッダーが隠れたままになるため、最後までページ内のコンテンツを見終えた時点で再度ヘッダーを表示させるようにします。

※ CSSは動作に必要な部分のみを記述しています。  
※ CSSのベンダープレフィックスは最新2バージョンを対象としています。


## 実現したいこと

* スクロールするとヘッダーが画面上部に固定される
* 下へスクロールするとヘッダーが隠れる
* 上へスクロールするとヘッダーが表示される
* 画面最下部に到達したらヘッダーを表示する


## ヘッダーを画面上部に固定する

htmlにヘッダーを作成します。

```HTML
<header id="header" class="header">
  <h1>Header</h1>
</header>
```

CSSの`position: fixed` で画面上部に固定します。

```CSS
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
```



## ヘッダー表示・非表示の設定（CSS）

ヘッダーの表示・非表示はclass名の追加・削除で行います。非表示にする場合は`transform: translateY(数値);`でヘッダーを画面外に移動し、表示する場合は `transform: trasnlateY(0)` で画面の最上部の位置に戻します。

```CSS
.header {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.header--unpinned {
  -webkit-transform: translateY(-150%);
  transform: translateY(-150%);
}
```



動きにアニメーションを付ける場合は `header` に `transition` プロパティで指定します。

```CSS
.header {
  -webkit-transition: -webkit-transform .4s ease;
  transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  transition: transform .4s ease, -webkit-transform .4s ease;
}
```



## JavaScriptでウィンドウをスクロールしたら実行する関数を作成

ウィンドウがスクロールされたときに何かを実行したい場合は `window.addEventListener`メソッドを `scroll`を対象にして設定し、実行したい関数を指定します。

```js
const onScroll = () => {
  console.log('scroll');
};

window.addEventListener("scroll", () => {
  onScroll();
});
```

上下どちらにスクロールした場合も、コンソールに「scroll」と表示されます。



## スクロール時に実行する関数を作成

指定量スクロールしたらヘッダーを隠すようにします。どのくらいスクロールしたかどうかは `window.scrollY`で取得します。ここではheaderの高さ分より多くスクロールした場合にヘッダーが隠れるようにしたいので、` スクロール量 > ヘッダーの高さ`  の場合にclass名を追加します。

```js
// ヘッダーを取得
const header = document.getElementById("header");

// ヘッダーの高さを取得
const hH = header.clientHeight;

// 現在地を示す変数を定義
let pos = 0;

const onScroll = () => {
  // スクロール位置がヘッダーの高さ分より大きい場合にclass名を追加し、そうでない場合にclass名を削除
  if(pos > hH) {
    header.classList.add('header--unpinned');
  } else {
    header.classList.remove('header--unpinned');
  }
};

window.addEventListener("scroll", () => {
  // スクロールするごとにpos（現在地）の値を更新
  pos = window.scrollY;
  onScroll();
});
```

ヘッダーの高さあたりをスクロールすると、classが付いたり取れたりします。



上へスクロールした場合に再びヘッダーが表示されるようにするには、`現在地 < 最後（直前）のスクロール位置`  の場合にclass名の追加を行います。最後のスクロール位置の値の保存は、`onScroll();` 関数内で行います。

ここで先ほど `if/else` で記述した部分を変更します。 class名の追加は「スクロール位置がヘッダーの高さ分より大きく且つ最後のスクロール位置より大きい」場合に行うので問題ありませんが、class名の削除をelseで行おうとすると「スクロール位置がヘッダーの高さ分より小さい」ことも必須条件になるため、class名の削除を行う条件を別のif文として記述します。

```js
// スクロール直前の位置を示す変数を定義
let lastPos = 0;
```

```js
const onScroll = () => {
  if(pos > hH && pos > lastPos) {
    header.classList.add('header--unpinned');
  }
  // スクロール位置がヘッダーの高さ分より小さいか
  // またはスクロール位置が最後のスクロール位置より小さい場合はclass名を削除
  if(pos < hH || pos < lastPos) {
    header.classList.remove('header--unpinned');
  }

	// 最後のスクロール位置を保存
	lastPos = pos;
};
```

ヘッダーの高さ分より下の範囲ではどの位置でも、下へスクロールするとヘッダーが隠れ、上へスクロールするとヘッダーが表示されるようになりました。



## ページの最下部に到達したらヘッダーを表示する

ページ最下部に到達したかどうかを調べるには、ページ全体の高さからウィンドウの高さを引くとウィンドウが最下部に達した場合のウィンドウ上部の位置が得られます。スクロール量（`window.scrollY`）がこの位置に到達したらヘッダーを表示するようにします。

![](./how-to-hide-header-on-scroll.jpg)


```js
// ウィンドウの高さを取得
const winH = window.innerHeight;

// ページの高さを取得
const docH = document.documentElement.scrollHeight;

// ウィンドウが最下部達した場合のウィンドウ上部の位置を取得
const windBtm = docH - winH;
```



class名の削除を行うif文の条件に、スクロール量がウィンドウ下部に達した場合  `windBtm <= pos`を追記します。

```js
if(pos < hH || pos < lastPos || windBtm <= pos) {
  header.classList.remove('header--unpinned');
}
```

スクロールがページの最下部まで到達した際に、ヘッダーが再び表示されるようになりました。



## デモ

[下へスクロールすると隠れて、上にスクロールすると表示されるヘッダー](https://nk58w.csb.app/)  
[Source](https://codesandbox.io/s/header-nk58w)



## 参考サイト

[Akira「下スクロールで消える・上スクロールで現れる素の JavaScript」](https://firstlayout.net/scroll-down-and-scroll-up-with-javascript/)（参照2019-11-15）

下へスクロールすると隠れて、上にスクロールすると表示されるヘッダー


webpackでの開発にwebpack-dev-serverを使用してサーバーを立ち上げている場合、サーバーを起動しているパソコンでは `http://localhost:8080` にブラウザでアクセスすれば確認できますが、Android端末などからアクセスしたい場合の設定方法です。

## 実現したいこと

* パソコンで起動しているwebpack-dev-serverのサーバーに、別の端末からアクセスする


## IPアドレスからアクセスできるようにする

ローカルホスト以外からアクセスするにはIPアドレスからアクセスできるようにします。IPアドレスからアクセスするには `--host 0.0.0.0` でwebpack-dev-serverを起動する必要があります。

2通りの方法があります。1つ目はpackage.jsonの `scripts` に追記する方法。2つ目はwebpack.config.jsの `devServer` に追記する方法です。

```json
/** package.json */

"scripts": {
  "start": "webpack-dev-server --host 0.0.0.0",
}
```

または

```js
/** webpack.config.js */

devServer: {
  host: '0.0.0.0',
}
```

### セキュリティの問題に対処する

ローカルのwebpack-dev-serverであっても悪意のある攻撃者からアクセスされる可能性があるため、 `headers: { Access-Control-Allow-Origin: * }` と `disableHostCheck: true` の設定はしないようにとのことです。

`Access-Control-Allow-Origin: *` は誰でもアクセス可能になり、コンパイルされたソースコードをリークするためです。

`disableHostCheck` を `true` にするとHOSTチェックをしなくなり、DNSリバインディング攻撃に脆弱となるため、公式サイトにも `true` の設定は推奨しないと記載があります。（webpack公式サイト : [devServer.disableHostCheck](https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck)）

詳しくはwebpackの公式ブログの記事「[webpack-dev-server/middleware security issues](https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a)」にありますが、記事が書かれた2017/4/25の時点でパッチバージョンとしてリリースすると記載があるため、現在のバージョンでは既に対応済みかもしれません。


## 別の端末からアクセスする

設定ファイルの変更が終わったら、 `npm run start` でサーバーを起動します。

サーバーを起動しているパソコンのIPアドレスを調べ、Androidなど開発サーバーにアクセスしたい端末のブラウザで `http://ご自身のパソコンのIPアドレス:8080` にアクセスすると、 `http://localhost:8080/` と同じ画面が表示されます。


## 参照

- webpack-dev-server/middleware security issues[https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a](https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a)（2019-10-19参照）

webpack-dev-serverにIPアドレスからアクセスする



※ Babel 7.4.0で `@babel/polyfill` が非推奨となり、その修正とあわせて記事全体を加筆・修正いたしました。（2019/10/2）


ES6で開発を行うにあたりwebpackやBabelを使用した環境を、公式サイトやブログを参考にしながら整理しました。普段ボイラープレートとして使用しています。


## 対応するもの

- ES6をES5に変換
- jQueryなどを使用する場合はプロジェクトのJSファイルとは別にバンドル
- SASSを使用
- CSSファイルはJSファイルとは別に出力
- CSSのベンダープレフィックスを自動で付与
- 開発時はローカルサーバーを起動してホッとリロードさせる



## 環境・ツール

- [webpack](https://webpack.js.org/)
- [Babel](https://babeljs.io/)
- [Sass](https://sass-lang.com/)
- [ESLint](https://eslint.org/)



## 設定方法

```js
/** package.json */

{
  //...省略

  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "autoprefixer": "^9.6.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^2.1.1",
    "eslint": "^6.5.1",
    "file-loader": "^4.0.0",
    "gsap": "^2.1.3",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "path": "^0.12.7",
    "postcss-cli": "^6.1.2",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  },
  "dependencies": {
    "core-js": "^3.2.1",
    "jquery": "^3.4.1"
  }
}
```


```js
/** .babelrc */

{
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          ie: 11,
          esmodules: true
        },
        useBuiltIns: 'usage',
        corejs: 3
      }
    ]
  ],
}
```

非推奨となった `@babel/polyfill` に代わる設定は、[こちらのブログ](https://aloerina01.github.io/blog/2019-06-21-1)を参考にしました。


```js
/** webpack.config.js */

const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const AutoPrefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const IS_DEV = (process.env.NODE_ENV === 'dev');

module.exports = env => {
  return {
    entry: {
      common: './src/js/common.js',
      index: './src/js/index.js'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'assets/js/[name].min.js'
    },
    devServer: {
      historyApiFallback: true,
      compress: true,
      contentBase: './dist',
      hot: true,
      port: 8080
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.(css|scss)$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                url: false,
                sourceMap: IS_DEV,
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  AutoPrefixer(
                    {
                      overrideBrowserslist: ['last 4 versions'],
                      grid: 'autoplace'
                    }
                  )
                ]
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: IS_DEV
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        IS_DEV: IS_DEV
      }),
      new MiniCssExtractPlugin({
        filename: 'assets/css/style.css'
      }),
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      })
    ]
  }
}
```

[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)は、CSSファイルをJSファイルとは別に出力するためのプラグインです。

|  コマンド  |
| ---- | ---- |
|  `npm run watch`    |  ファイルの更新を監視して自動でコンパイル  |
|  `npm run dev`      |  developmentモードでのビルド  |
|  `npm run build`    |  productionモードでのビルド  |
|  `npm run start`    |  ローカルサーバー[http://localhost:8000](http://localhost:8000)を起動  |


## 参考

- 株式会社ICS 池田 泰延「[最新版で学ぶwebpack 4入門 - Babel 7でES2019環境の構築（React, Vue, Three.js, jQueryのサンプル付き）](https://ics.media/entry/16028/)」（参照2019-06-02）
- webpack 「[SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/)」（参照2019-08-09）
- aloerina「[Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法](https://aloerina01.github.io/blog/2019-06-21-1)」（参照2019-10-01）


ES6開発環境（webpack+Babel, SASS, IE11対応）


ブログの記事や商品の一覧ページなどに、日付順、タイトル順、カテゴリー順など特定の基準に従って並べ替えができる機能が実装されている場合があります。配列の要素を、あるプロパティを基準に昇順または降順に並べ替えをするには `sort()` メソッドを使用します。

本記事ではReactでリストを表示し、ボタンをクリックすると特定のプロパティでソート（並べ替え）ができるページを作成します。ソートするプロパティ名のボタンを用意し、一度目のクリックで昇順に、続けて同じボタンをクリックすると降順になるようにします。

※ 本記事はReactでコードを書ける環境が整っていることを前提とします。  
※ CSSは省略します。適宜スタイルを追加してください。


## 環境

- webpack
- Babel
- React
- SCSS


## 実現したいこと

* Reactでリストを表示するページを作成
* ボタンを設置し、特定のプロパティを基準にソート
* ボタンをクリックする度に昇順・降順を切り替える


## 配列のリストを表示するReactコンポーネントを作成

### Listコンポーネントを作成

`List.js` を作成して、配列の項目を表示するための `List` コンポーネントを作成します。

```js
/** List.js */
import React from 'react';

const List = () => (
  <li>
    <p>ID : 1</p>
    <p>The Dark Knight（2008）</p>
    <p>Category : Action</p>
  </li>
);

export default List;
```

`App` コンポーネントに `List` コンポーネントをimportして表示します。

```js
/** App.js */

import List from './List';

const App = () => {
  return (
    <ul>
      <List />
    </ul>
 );
}

export default App;
```

ローカルのwebサーバーを起動するとListコンポーネントの内容が表示されます。

![](./how-to-sort-items-with-react_01.png)


### propsを通してリストにデータを表示させる

配列を用意して`App` コンポーネントから `props` を通して `List` コンポーネントに渡します。配列の要素をそれぞれ表示するには `map()` メソッドを使用します。

```js
/** App.js */

const DATA = {
  movies: [
    {
      id: 1,
      title: 'Dunkirk',
      category: 'Action',
      year: '2017'
    },
    {
      id: 2,
      title: 'Interstellar',
      category: 'Sci-Fi',
      year: '2014'
    },
  ]
};

const App = () => {
  return (
    <div className="app">
      <ul className="list">
        {
          DATA.movies.map((data, index) => (
            <List
              key={index}
              data={data} />
          ))
        }
      </ul>
    </div>
  );
}
```

`List` コンポーネントでは、受け取った値を表示するように書き換えます。 `{data}` を `props` として、表示する部分を `{props.data.id}` などとしても同じ表示結果になります。

```js
/** List.js */

const List = ({data}) => (
  <li>
    <p className="list_id"><span>ID :</span> {data.id}</p>
    <p>{data.title}（{data.year}）</p>
    <p className="list_cat"><span>Category :</span> {data.category}</p>
  </li>
);
```

配列の各要素がリストになって表示されました。

![](./how-to-sort-items-with-react_02.png)



## ソート用のボタンを表示するReactコンポーネントを作成

`Button.js` を作成し、 `Button` コンポーネントを作成します。

```js
/** Button.js */

import React from 'react';

const Button = () => (
  <button>ID</button>
);

export default Button;
```

Appコンポーネントでimportして `button` を表示します。

```js
/** App.js */

import Button from './Button';

const App = () => {
  return(
    <div className="app">
      <Button />
    </div>
  );
}
```

ソートに使用するプロパティをボタンに渡すために、データの配列から基準になるプロパティ名のみを抽出します。指定したオブジェクトのプロパティ名の配列を取得できる `Object.keys()` メソッドを使用します。

```js
/** App.js */

const KEYS = Object.keys(DATA.movies[0]);
```

取得したプロパティ名の配列をリストと同様に `props` として `map()` メソッドを使用して `Button` コンポーネントに渡します。

```js
/** App.js */

{
  KEYS.map((key, index) => (
    <Button
      key={index}
      button={key} />
  ))
}
```

`Button` コンポーネントを `props` を通して受け取った内容を表示するように書き換えます。

```js
/** Button.js */

const Button = ({button}) => (
  <button>
    {button.toUpperCase()}
  </button>
);

```

配列の各オブジェクトのプロパティ名になっている「id」「title」「category」「year」の名前のボタンが表示されました。

![](./how-to-sort-items-with-react_03.png)


## ソート機能の追加

ボタンをクリックする度にソートされるようにしたいので、`App.js` にボタンをクリックした際に実行される関数を作成します。ソートに使用するプロパティ名を引数に指定します。関数は `props` として `Button` コンポーネントに渡します。

```js
/** App.js */

const handleSort = (key) => {
  console.log('click : ' + key);
};
```

```js
/** App.js */

<Button
  key={index}
  button={key}
  handleSort={handleSort} />
```

`Button` コンポーネントでは、 `props` として渡された関数を `onclick` イベントに指定します。画面上のボタンをクリックすると `console` に「click : プロパティ名」と表示されるのが確認できます。

```js
/** Button.js */

const Button = ({button, handleSort}) => (
  <button onClick={() => handleSort(button)}>
    {button.toUpperCase()}
  </button>
);
```

`handleSort` の中身を実際の処理に書き換えます。ボタンをクリックした際に「どのプロパティ名」を基準に「昇順 or 降順」に並び替えるか、ソートの条件を保有するための `state` を設定します。 `state` の設定・更新には `hook` の `useState` を使用します。 `state` の初期値は空にします。ソート用の `state` の更新は `setSort` で行います。

```js
/** App.js */

import React, { useState } from 'react';

const App = () => {
  const [sort, setSort] = useState({});
  
  return(
    ...
  );
};
```

同じボタンを続けてクリックしたか、直前とは異なるボタンをクリックしたかで処理を分けるため `if/else` で条件分岐します。同じボタンを続けてクリックした場合は、ソートの並びを反転させたいので `state` の `order: 1` の数値にマイナスを付与します。直前とは異なるボタンをクリックした場合は、ソートの基準になるプロパティ名( `key` )の値を更新して、昇順になるよう `order: 1` を設定します。

```js
/** App.js */

const handleSort = (key) => {
  if (sort.key === key) {
    setSort({ ...sort, order: -sort.order });
  } else {
    setSort({
      key: key,
      order: 1
    })
  }
};
```

並び替えには `sort()` メソッドを使用します。昇順・降順に並べ替えるには、戻り値の数値の大小によって順番を決める比較関数を指定します。ソート後のデータを格納する変数 `sortedMovies` を宣言して、 `sort()` メソッドの返り値が格納されるようにします。このとき配列に変更があった場合にのみ、 `sortedMovies` の値を更新したいので、`hook` の ` useMemo` を使用します。`useMemo` はメモ化された値を返す機能で、指定した配列の要素に変化があった場合にのみ値を更新します。


```js
/** App.js */
s
import React, { useState, useMemo } from 'react';

const App = () => {
  const [sort, setSort] = useState({});

  let sortedMovies = useMemo(() => {
    let _sortedMovies = DATA.movies;
    if (sort.key) {
      _sortedMovies = _sortedMovies.sort((a, b) => {
        a = a[sort.key];
        b = b[sort.key];

        if(a === b) {
          return 0;
        }
        if(a > b) {
          return 1 * sort.order;
        }
        if(a < b) {
          return -1 * sort.order;
        }
      });
    }
    return _sortedMovies;
  }, [sort, movies]);

  ...

  return (
    ...
  );
}
```

## デモ

デモページではボタンに昇順・降順かわかる矢印を付け、アクティブ/非アクティブかで色が変わるようにしています。

[Reactで配列の要素をソートする機能](https://chocolat5.github.io/react-sort-demo/)  
[Source](https://github.com/chocolat5/react-sort-demo)



## 参考サイト

[k.ishiwata「React Hooks でリストの絞り込み検索と並び替え機能のサンプル」](https://www.webopixel.net/javascript/1533.html)（参照2019-09-15）

Reactで配列の要素をソートする機能



一列に並んだ要素が右から左あるいは上から下など、画面の端から端へ流れるように動く無限ループアニメーションを3パターン作成します。画像は途切れることなく無限にループします。記事内のコード、デモサイトはいずれも右から左へ動くように作成しています。

※ 記事内のコードはベンダープレフィックスを省略しています。


## 実現したいこと

- 画像が画面の端から端へ流れるように動く無限ループアニメーション
- [CSS animationで作る無限ループアニメーション](#cssアニメーションで作る無限ループアニメーション)  
- [CSS animationで作る無限ループアニメーション（複数要素）](#cssアニメーションで作る無限ループアニメーション（複数要素）)  
- [CSS animationで作る無限ループアニメーション（テキスト要素）](#cssアニメーションで作る無限ループアニメーション（テキスト要素）)  
- [jQueryプラグイン「TweenMax」](#tweenmaxで作る無限ループアニメーション)


## CSS animationで作る無限ループアニメーション

動かしたい要素（画像群）を一列に並べた横長（あるいは縦長）の1枚の画像を作成します。用意した画像をhtmlで2回続けて読み込み、それらをひとつの `div` で囲みます。

```html
<div class="loop_wrap">
  <img src="img.jpg"><img src="img.jpg">
</div>
```

ウィンドウ幅いっぱいに画像を表示させたいので、全体を囲う `div` に `width: 100vw;` と `overflow: hidden;` を指定します。画像を横並びにしたいので `display: flex;` も指定します。高さは任意の高さを設定してください。


```css
.loop_wrap {
  display: flex;
  width: 100vw;
  height: 300px;
  overflow: hidden;
}

.loop_wrap img {
  width: auto;
  height: 100%;
}
```

画面の端から端へと流れる動きは `transform` プロパティの `translateX` でX軸方向の移動距離を変えることで横にスライドして流れるような動きを実現します。開始と終了地点の異なるアニメーションを2つ用意します。

```css
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
```

作成したアニメーションを動かしたい要素に指定します。作成した2種類のアニメーションをhtmlで2回読み込んだ画像それぞれに設定します。このとき `animation-duration` を同じ数値にして片方の画像にdurationの半分の時間の `animation-delay` を設定します。無限にループさせたいので `animation` プロパティに `infinite`を指定します。　`animation-timing-function` は一定に変化する `linear` を指定します。


```css
.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}
```

### 画像を2回読み込む理由

スタート地点の異なるアニメーションを2つ用意し、片方の画像にdelayを設定しましたが、2つの画像の動きを分けて図解してみます。画像1(緑)はX軸方向100%から-100%へ移動し100%に戻り再び-100%へ移動するという動きを繰り返し、画像2(黄)はX軸方向を0から-200%へ移動し、0に戻り再び-200%へ移動するという動きを繰り返します。これにより画像が途切れることなく横に流れているように見せています。

※ ウィンドウサイズを変更した際に画像がウィンドウ幅より小さくなると、ループの繰り返しのなかで余白が生じるため、ウィンドウ幅いっぱいに表示する可変レイアウトの場合は対処が必要です。

![](./sample.jpg)


### デモ

[CSSアニメーションで作る無限ループアニメーション](https://demos.chocolat5.com/loop-image-animation/)



## CSS animationで作る無限ループアニメーション（複数要素）

ギャラリーのように画像やリンク要素などひとつひとつが独立した要素を並べてループさせることも可能です。ここではリンク要素にもなっている画像+テキストの集まりをループさせてみます。

ループさせたい要素群を2グループに分けます。以下では同じものを2回読み込んでいますが、要素のグループが2つあれば中身は同じでなくても構いません。要素のグループをひとつの `div` で囲みます。

```html
<div class="loop_wrap">
  <ul>
    <li><a href="#"><img src="img_01.jpg" alt="">CAR</a></li>
    <li><a href="#"><img src="img_02.jpg" alt="">CITY</a></li>
    <li><a href="#"><img src="img_03.jpg" alt="">TAXI</a></li>
    <li><a href="#"><img src="img_04.jpg" alt="">NEON</a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="img_01.jpg" alt="">CAR</a></li>
    <li><a href="#"><img src="img_02.jpg" alt="">CITY</a></li>
    <li><a href="#"><img src="img_03.jpg" alt="">TAXI</a></li>
    <li><a href="#"><img src="img_04.jpg" alt="">NEON</a></li>
  </ul>
</div>
```

CSSのアニメーションは最初の例と同じです。`img` タグの部分を `ul` に変えてください。 `ul` 内の横並びなどのスタイルの設定の詳細は省きます。適宜調整してください。

リンク要素を並べてループさせる場合、このままでは流しそうめんのようになってしまうので、クリックしやすいようにマウスをのせたときにアニメーションが一時停止するようにします。

`animation-play-state` プロパティを使用します。一時停止の `paused` を指定するのですが、全体を囲う `div` の `hover` 時のプロパティに指定します。グループを囲う `ul` に指定しまうと、マウスが乗っていないもう片方のグループは一時停止せず動き続けてしまうためです。

```css
.loop_wrap:hover ul {
  animation-play-state: paused;
}
```


### デモ

[CSSアニメーションで作る無限ループアニメーション（複数要素）](https://demos.chocolat5.com/loop-image-animation/)




## CSS animationで作る無限ループアニメーション（テキスト要素）

テキストのみでもアニメーションさせることは可能です。ループさせたいテキストをdiv要素の中にいくつか記述します。

```html
<div class="loop_wrap">
  <div>How to make a loop animation.</div><div>How to make a loop animation.</div><div>How to make a loop animation.</div><div>How to make a loop animation.</div><div>How to make a loop animation.</div>
</div>
```

テキストを囲うdvd要素に `flex: 0 0 auto` と 改行を防ぐ `white-space: nowrap;` を設定します。  
テキストサイズやテキスト間の余白は適宜調整してください。

```css
.loop_wrap div {
  flex: 0 0 auto;
  white-space: nowrap;
}
```

アニメーションは画像の場合と同じです。2つの異なる動きが交互に適用されるように `:nth-child(odd)` と　`:nth-child(even)` を使用します。

```css
.loop_wrap div:nth-child(odd) {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap div:nth-child(even) {
  animation: loop2 50s linear infinite;
}
```


### デモ

[CSSアニメーションで作る無限ループアニメーション（テキスト要素）](https://demos.chocolat5.com/loop-image-animation/)


## TweenMaxで作る無限ループアニメーション

JavaScriptのアニメーションライブラリ「[TweenMax](https://greensock.com/tweenmax/)」を利用してループを作成します。

ループさせたい画像を横に並べた1枚の画像を用意して、htmlで読み込みます。

```html
<div id="loop" class="loop_wrap">
  <img src="img.jpg" alt="">
</div>
```

後ほどJavaScriptで画像を複製して横に並べてループさせるので、CSSでは画像を囲む全体の幅と横並びの指定をします。基本的にはCSSアニメーションで作る場合と同じ設定で問題ありません。

アニメーションの設定は、TimeLineMaxでタイムラインを作成して、オプションで`repeat: -1`（繰り返し＝無制限）を設定します。横に流れるアニメーション部分は、TweenMaxでX軸の移動を設定します。

TimeLineMaxのオプションの`paused: true/false`を使用すると、CSSと同様にマウスをのせた場合/はずれた場合でアニメーションの一時停止/再開を設定することもできます。


```js
$(function () {
  const loop = document.getElementById('loop_js');

  //タイムラインを作成
  const loopAnim = new TimelineMax({
    repeat: -1 //繰り返し無制限
  });

  //画像を複製してdiv内に挿入
  let loopItem = (window.innerWidth, loop.children[0]);
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));

  //アニメーションの設定
  loopAnim
    .to(loop, 50, { ease: Power0.easeNone, xPercent: -66.66666 })
    .to(loop, 0, { ease: Power0.easeNone, x: 0 });
});
```

### デモ

[TweenMaxで作る無限ループアニメーション](https://demos.chocolat5.com/loop-image-animation/)

写真が画面の端から端へ流れる無限ループするアニメーション



外部サイトのデータを二次利用することができる「API」。APIはApplication Programming Interfaceの略で、

> 広義の意味ではソフトウェアコンポーネントが互いにやりとりするのに使用するインタフェースの仕様（[フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9)）

です。Webサービスやアプリの開発においても、HTTP通信によってWebサーバーのAPIを取り扱う「WebAPI」を利用した新たなサービスが生み出されています。データの二次利用の例では、インスタグラムの投稿を自分のサイトに表示させるための「Instagram API」、Twitterが提供しているAPIを利用した「Togetterまとめ」などがあります。

本記事ではAPIのデータベースから取得した情報を表示するページを作成します。APIは映画やTV作品のデータベースを提供する「[TMDb](https://www.themoviedb.org/)」を使用します。TMDbは作品のタイトルやポスター画像、出演者、スタッフ以外に、ユーザーによる評価やレビューなどもサイト上で公開しており、それらもAPIとして利用することが可能です。また、一部日本語でも提供されています。利用するにはアカウントの作成が必要ですが無料です。


## 実現したいこと

* APIのデータを取得しページ上に表示する


## 事前準備

TMDbのAPIを利用するにはTMDbのアカウントが必要です。[アカウント作成ページ](https://www.themoviedb.org/account/signup)で登録を行います。アカウント作成後、`Profile and Settings > Settings` を開きます。サイドメニューにある「API」をクリックして、一番下の「Request an API Key」からAPIの利用申請を行います。承認後、API Keyが付与され、利用申請を行なったページで確認できるようになります。

![TMDb](./tmdb-api_01.png)


## JavaScriptで表示するページを作成

JavaScriptでAPIを取得する際に、以前まではXMLHttpRequestを使用していましたが、Fetch APIの `fetch()` メソッドでより簡単に取得することが可能になりました。[各ブラウザの対応状況はこちら](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)でご確認ください。

`fetch()` の基本的な書き方です。

```js
fetch('http://sample.com/sample.json')
.then(response => {
  return response.json();
})
.then(data => {
  //取得したJSONデータの処理
  console.log(data);
})
.catch(error => {
  //エラー発生時の処理
  console.log('error');
})
```

サンプルとして[現在上映中の映画](https://developers.themoviedb.org/3/movies/get-now-playing)のリストを表示してみます。

index.htmlに情報を表示するための `div` を記述します。

```html
<div id="app"></div>
```

TMDbのAPIとAPI Keyを組み合わせたURLを、先ほどの基本的な書き方にあてはめてみて、情報が取得できるかどうかコンソールに出力してみます。

```js
fetch('https://api.themoviedb.org/3/movie/now_playing?api_key=ここにAPI Key入れる&language=en-US&page=1')
  .then(response => {
    return response.json();
  })
  .then(data => {
    //取得したJSONデータの処理
    console.log(data);
  })
  .catch(error => {
    //エラー発生時の処理
    console.log('error');
});
```

問題なければコンソールにデータが表示されます。
![TMDb](./tmdb-api_02.png)


取得したJSONデータを見てみると作品群は `results` キーの値として定義されていますので、 `data.results` とすると作品の一覧のみがコンソールに表示されます。

データが取得できたら、 `map()` メソッドで表示したい情報をさらに細かく取得していきます。ここではタイトルとポスター画像を表示します。それぞれに適したタグを生成して、テキストやURLを設定し、各アイテム用のdivに順番に挿入していきます。

```js
data.results.map(movie => {
  const row = document.createElement('div');
  row.setAttribute('class', 'item');

  const title = document.createElement('p');
  title.setAttribute('class', 'title');
  title.textContent = movie.title;

  const poster = document.createElement('img');
  poster.src = `https://image.tmdb.org/t/p/w300_and_h450_bestv2/${movie.poster_path}`;

  container.appendChild(row);
  row.appendChild(poster);
  row.appendChild(title);
});
```

画像とタイトルが表示されていれば完成です。
![TMDb](./tmdb-api_03.png)



## 最後に

[TMDbのAPIドキュメントページ](https://developers.themoviedb.org/3/getting-started/introduction)では、取得したい情報ごとにコードジェネレーターが用意されています。左のサイドバーから利用したい情報を選び、「Try it out」のタブをクリックしてAPI Keyなど必要項目を入力すると「Response」のエリアに取得できるJSONが表示されます。「language」を `ja` とすると日本語になります（日本語訳が登録されている作品のみ）。さらに下の「Code Generation」では各言語ごとのコードのサンプルも表示されます。


### 参考サイト

[Tania Rascia「How to Use the JavaScript Fetch API to Get JSON Data」](https://www.taniarascia.com/how-to-use-the-javascript-fetch-api-to-get-json-data/)（参照2019-08-23）  
[Tania Rascia「How to Connect to an API with JavaScript」](https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/)（参照2019-08-23）  
[クロジ「映画ブログ作りました」, &lt;https://nanokamo.com/kinematos&gt;](https://nanokamo.com/kinematos)（参照2017-09-30）  
[mmmatch「戦争映画のサイトを作った話・その３」, &lt;https://medium.com/@mmmatch/%E6%88%A6%E4%BA%89%E6%98%A0%E7%94%BB%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E8%A9%B1-%E3%81%9D%E3%81%AE%EF%BC%93-62511b7541df&gt;](https://medium.com/@mmmatch/%E6%88%A6%E4%BA%89%E6%98%A0%E7%94%BB%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F%E8%A9%B1-%E3%81%9D%E3%81%AE%EF%BC%93-62511b7541df)（参照2017-09-30）

Web APIを利用して映画のポスターやあらすじを自分のサイトに表示する



Webサイトの訪問者に対して、重要なお知らせや注意を引くために設置されることの多い「ポップアップウィンドウ」。モーダルウィンドウと呼ばれることもあります。一般的なデザインは画面全体を覆うように透過した背景色を敷き、画面サイズよりも幅と高さが小さな枠を画面の中央に設置し、その中にコンテンツを表示しています。ポップアップウィンドウを閉じるには、ポップアップ内の閉じるボタンをクリックします。透過した背景のどこかをクリックすると閉じる場合もあります。

本記事では、サイト訪問時に自動で開くポップアップウィンドウを作ります。ポップアップのコンテンツには動画を埋め込みます。ポップアップの動作にはjQueryのプラグインを使用します。


## 実現したいこと

* サイト訪問時にポップアップウィンドウが開く
* ポップアップウィンドウでは動画を再生できる


## ファイルの準備

必要なファイルをダウンロードしてindex.htmlで読み込みます。  
ポップアップウィンドウの動作には、手軽に導入できるjQueryのプラグインを使用します。jQueryとは  

> ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリ

です。該当のファイルを読み込むことで、少ない記述でプログラムを実行することができます。プラグインの利用にはjQueryの本体の読み込みが必要です。[jQueryの公式サイト](https://jquery.com/)からダウンロードして読み込む方法と[CDN](https://code.jquery.com/)や[Google Hosted Libraries](https://developers.google.com/speed/libraries/)などのファイルを読み込む方法があります。jQueryの基本的な使い方については[公式サイトの解説](https://learn.jquery.com/about-jquery/how-jquery-works/)をご覧ください。


ポップアップウィンドウのライブラリはいくつかありますが、今回は[Colorbox](http://www.jacklmoore.com/colorbox/)を使用します。リンク先からデータ一式をダウンロードして解凍したら、フォルダ内の「jquery.colorbox-min.js」と「colorbox.css」を読み込みます。CSSはデザイン違いで5種類用意されていますので、好きなものを使用してください。そのCSSと対応するimagesファイルもプロジェクトのフォルダに移動またはコピーしてください。

index.htmlのファイルの読み込みは以下のようになります。jQueryのファイルは必ず本体のあとにプラグインを読み込むようにしてください。

```html
<link rel="stylesheet" href="colorbox.css">

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
```


## ポップアップの設定

index.htmlにaタグを記述し、href属性に再生したい動画の埋め込み用コードを設定します。

```html
<a href="https://www.youtube.com/embed/mCFAAPoaUbc?rel=0" target="_blank" class="colorbox">動画を見る</a>
```

まだポップアップウィンドウは開きません。ポップアップを開くためにプラグインColorboxの設定をします。Colorboxは `$(selector).colorbox();` と記述するだけでポップアップが開きます。さらに `{key:value}` の形でオプションを追記することで、ポップアップの大きさや開く速度などカスタマイズすることができます。Youtubeはiframeなので「 `iframe: true` 」にし、訪問時に自動で開くには「 `open: true` 」とします。ポップアップのサイズは任意の数字を入れてください。


```js
$(function(){
  jQuery('.colorbox').colorbox({
    open: true,
    iframe: true,
    innerWidth: 650,
    innerHeight: 350,
  });
});
```

### デモ

[「サイト訪問時に自動で開くポップアップウィンドウ」のデモ](https://demos.chocolat5.com/autoplay-movie-popup/)



## 最後に

ポップアップウィンドウは訪問時に強制的に開くことが多く、ユーザーが操作するまで閉じない場合はメインコンテンツを見ることを遮られているように感じるかもしれません。ページを更新する度に開いたり、何度も繰り返し同じ情報が表示されたりすることにうんざりしたユーザーがWebサイトから離れてしまわないように使い方にはちょっとした注意や工夫が必要です。

ポップアップウィンドウの適切な使い方についてはこちらの記事が詳しいです。  
[ポップアップは悪か？ ポップアップを適切に使うためのポイント | UX MILK](https://uxmilk.jp/58208)


サイト訪問時に自動で開くポップアップウィンドウ


CSS Gridでレスポンシブ対応のレイアウトのサンプルをいくつか作成してみました。仕組みやプロパティなどの基本的な説明は省きます。レイアウトのサンプル5種それぞれデモページを用意しています。

今回CSS Gridの導入に伴い実際のWebサイトではどのような使われかたをしているかを調べたことをきっかけに、自分用のメモも兼ねていくつかサンプルを作成しました。よく紹介されている「ヘッダー、フッター、サイドバー、メインコンテンツに分割してそれぞれの幅や位置を指定する」といったものではなく、より実践的なサンプルを作成してみたいと思いました。

※ 記事内のCSSはGridに関係する部分のみを記述しています。テキストや画像などは適宜調整してください。  
※ IE対応はベンダープレフィックスを付与するといった単純なものだけではないため省略します。（自動でベンダープレフィックスを付与するオンラインツール[Autoprefixer CSS online
](https://autoprefixer.github.io/)またはNode.jsのツール[Autoprefixer](https://github.com/postcss/autoprefixer)があります）

## メインビジュアルにキャッチコピーを重ねる

ファーストビューのメインビジュアルでよく見られる、画像をウィンドウ幅よりやや狭めてキャッチコピーを重ねるレイアウトです。スマホでは重ねずキャッチコピーを上、画像を下にします。

![](./css-grid-responsive_01.jpg)

```HTML
<section class="container">
  <h3 class="main_copy">Lorem ipsum dolor<br>sit amet,<br>consectetur adipisicin</h3>
  <div class="main_img">
    <img src="img/image.jpg" alt="">
  </div>
</section>
```

```CSS
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 32px 0;
}

@media screen and ( min-width: 600px ) {
  .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 32px 3.125vw;
  }

  .main_copy {
    grid-column: 2 / 8;
    grid-row: 1;
    align-self: center;
    z-index: 2;
  }

  .main_img {
    grid-column: 3 / -1;
    grid-row: 1;
    z-index: 1;
  }
}
```

[MDN グリッドレイアウトの基本 z-index による項目のレイヤー化](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Layering_items_with_z-index)に「グリッドアイテムは、同じセルを占有できます。」とある通り、グリッドアイテムを重ねることができます。重なりあった要素には `z-index` を指定することで重なりの順序を調整することができます。 `position` プロパティは使用しません。

サンプルではキャッチコピーを画像の上下中央位置に配置するため、キャッチコピーに `align-self: center;` を指定します。

[「メインビジュアルにキャッチコピーを重ねる」デモはこちら](https://demos.chocolat5.com/css-grid-responsive/index.html#sample01)


## 見出しとテキストと補助的な写真のセット

片側に写真があり、もう片側に見出しや本文、リンクボタンなどがあるというレイアウトです。名前付きのグリッド領域を指定する `grid-template-areas` を使用します（[IE未対応](https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-areas#Browser_compatibility)）。スマホではテキスト類が上、画像が下になるようにします。


![](./css-grid-responsive_02.jpg)

```HTML
<section class="container">
  <h3 class="head">Lorem ipsum dolor sit amet,<br>consectetur adipisicin</h3>
  <div class="txt">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </p>
    <a href="" class="btn">More Detail</a>
  </div>
  <figure class="img">
    <img src="img/image.jpg" alt="">
  </figure>
</section>
```

```CSS
.container {
  display: grid;
  grid-template-areas:
    "head"
    "txt"
    "img";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-gap: 1em 32px;
}

.head {
  grid-area: head;
}

.img {
  grid-area: img;
}

.txt {
  grid-area: txt;
}

@media screen and ( min-width: 900px ) {
  .container {
    grid-template-areas:
      "img head"
      "img txt";
    grid-template-columns: calc(55% - 25px) calc(45% - 25px);
    grid-template-rows: auto 1fr;
    grid-gap: 1em 56px;
  }
}
```


`grid-template-areas` で作成する場合、HTML上でのグリッドアイテムの順番に関わらず自由に配置することができます。サンプルでは画像を左にしていますが、 `grid-template-areas` の指定を変えるだけで、HTMLはそのままに位置を簡単に入れ替えることができます。


[「見出しとテキストと補助的な写真のセット」デモはこちら](https://demos.chocolat5.com/css-grid-responsive/index.html#sample02)




## サムネイル付きのブログやニュース一覧

トップページなどに数件の最新記事を表示するような場合のレイアウトです。サンプルはアイキャッチありで作成します。記事の表示数は4つ、レイアウトはスマホ2列、タブレット・PC4列とします。

![](./css-grid-responsive_03.jpg)

```HTML
<section class="articles_wrap">
  <h3 class="articles_head">News</h3>
  <a href="" class="article">
    <div style="background-image: url(img/image.jpg)"></div>
    <p>News</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
    <p>2019.06.07</p>
  </a>
  <a href="" class="article">
    <div style="background-image: url(img/image.jpg)"></div>
    <p>News</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
    <p>2019.06.07</p>
  </a>
  <a href="" class="article">
    <div style="background-image: url(img/image.jpg)"></div>
    <p>News</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
    <p>2019.06.07</p>
  </a>
  <a href="" class="article">
    <div style="background-image: url(img/image.jpg)"></div>
    <p>Column</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
    <p>2019.06.07</p>
  </a>
</section>
```

```CSS
.articles_wrap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto 1fr;
  grid-gap: 32px 5vw;
}

.articles_head {
  grid-column: 1 / -1;
  grid-row: 1;
}

.article {
  grid-column: span 6;
}

@media screen and ( min-width: 600px ) {
  .articles_wrap {
    grid-gap: 32px 3.125vw;
  }

  .article {
    grid-column: span 3;
  }
}

```

コンテナの列を12分割します。スマホでは1行に記事を2つ並べたいので、12トラックの半分6トラックにまたがるように指定します。PCでは1行に4つ並べるので、3トラックにまたがるようにします。  
コンテナの列の分割数はレイアウトにあわせて適宜調整してください。

[「サムネイル付きのブログやニュース一覧」デモはこちら](https://demos.chocolat5.com/css-grid-responsive/index.html#sample03)



## ブロークングリッドレイアウト

縦軸や要素同士の間隔を完全には揃えず少し崩したブロークングリッドレイアウトです。スマホでは1列に並べます。

![](./css-grid-responsive_04.jpg)


```HTML
<section class="container">
  <div href="#" class="item1">
    <div><img src="img/grid_sample2.jpg" alt=""></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
  </div>
  <div href="#" class="item2">
    <div><img src="img/grid_sample.jpg" alt=""></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
  </div>
  <div href="#" class="item3">
    <div><img src="img/grid_sample2.jpg" alt=""></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicin</p>
  </div>
</section>
```

```CSS
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 32px 0;
}

@media screen and ( min-width: 600px ) {
  .container {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 32px 3.125vw;
  }

  .item1 {
    grid-column: 2 / span 4;
    align-self: center;
  }

  .item2 {
    grid-column: 8 / -1;
    align-self: center;
  }

  .item3 {
    grid-column: 7 / span 4;
    align-self: center;
  }
}
```

PCではコンテナの列を12分割します。アイテムごとに、トラックいくつ分の幅にするか、どのグリッド線の位置に配置するかを自由に指定してください。

[「ブロークングリッドレイアウト」デモはこちら](https://demos.chocolat5.com/css-grid-responsive/index.html#sample04)


## フッター

フッターの内部のロゴやリンクリスト、コピーライトなどのレイアウトです。リンクリストの3つのブロック部分はFlexboxを使用しています。

![](./css-grid-responsive_05.jpg)

```HTML
<footer class="footer">
  <div class="footer_logo_wrap">
    <p class="footer_logo">Logo</p>
    <address>〒000-0000 ■■都■■区■■町00-00-00</address>
  </div>
  <div class="footer_nav">
    <ul class="footer_nav_list">
      <li><span>Footer Nav</span></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
    </ul>
    <ul class="footer_nav_list">
      <li><span>Footer Nav</span></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
    </ul>
    <ul class="footer_nav_list">
      <li><span>Footer Nav</span></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
      <li><a href="">Footer Link</a></li>
    </ul>
    </div>
    <ul class="footer_legal">
      <li class="footer_legal_item"><a href="">品質方針・環境方針</a></li>
      <li class="footer_legal_item"><a href="">個人情報保護方針</a></li>
      <li class="footer_legal_item"><a href="">個人情報の取り扱いについて</a></li>
      <li class="footer_legal_item"><a href="">サイトマップ</a></li>
    </ul>
  <p class="footer_copyright">&copy; 2019 chocolat All Rights Reserved.</p>
</footer>
```

```CSS
.footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 24px 24px;
}

.footer_logo_wrap,
.footer_legal,
.footer_copyright,
.footer_nav {
  grid-column: 1 / -1;
}

@media screen and ( min-width: 960px ) {
  .footer {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 32px 3.125vw;
  }

  .footer_logo_wrap {
    grid-column: 1 / span 4;
  }

  .footer_nav {
    grid-column: 6 / -1;
  }

  .footer_legal {
    grid-row: -1;
  }

  .footer_copyright {
    grid-row: -1;
    justify-self: end;
    align-self: end;
  }
}
```

PCではフッターの上段にロゴやリンクリスト、下段にその他のリンクとコピーライトが配置されるようにしています。下段はその他のリンク類とコピーライトが同じ行になるように `grid-row` を指定します。

[「フッター」デモはこちら](https://demos.chocolat5.com/css-grid-responsive/index.html#sample05)


参考 : [MDN Web Docs 「CSS グリッドレイアウト」, &lt;https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout&gt;](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout)（参照2019-06-07）

CSS Gridで作るレスポンシブ対応のレイアウト5種



Reactの勉強の指針として参考になる、Webエンジニアが次に何を学ぶべきかを示したロードマップです。

最初のWeb Developerの図に記載の通り、黄色は「作成者のおすすめ（Personal Recommendation）」、肌色は「選択肢としてあり（Available Options）」です。


## Web Developer in 2019

![Web Developer in 2019](./developer_roadmap_2019_01.png)  
Web Developer in 2019（[https://github.com/kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap)）より

sitmkさんのブログで詳しく解説されています。  
[WebエンジニアになるためのDeveloper roadmap](https://qiita.com/sitmk/items/2e7e2644fcf1b4216e53)



## Frontend Developer

![Web Developer in 2019](./developer_roadmap_2019_02.png)  
Roadmaps for Developers（[https://roadmap.sh/frontend](https://roadmap.sh/frontend)）より

「CSS」のGridはIEへの対応を考えて使用を避けていましたが、基本的な機能はサポートされるようになりました。「CSS Pre-processors」はLessの使用もまだ少し見られるけど、これから始めるのであれば主流のSASSが良さそうです。

少し進んで「Pick a Framework」では、フレームワークを始める前に「SPA（Single Page Applications）」とは何か、そのメリット・デメリットについてを理解するべきと書かれています。

「Testing your Apps」はテストツールで、「[Jest](https://jestjs.io/)」はFacebook製のBabel、TypeScript、Node、React、Angular、Vueなどに対応したJavaScriptのテストフレームワーク。「[Enzyme](https://github.com/airbnb/enzyme)」はairbnb製のReact向けのテストユーティリティ。「[Cypress](https://www.cypress.io/)」はブラウザテストツール。これらの3つを使用することで、全てのニーズを満たすことができるとのことです。

また、上記のテストに関連して、「単体テスト（Unit）」「結合テスト（Integration）」「機能テスト（Functional）」について理解し、これらの書き方を学びましょうとあります。

フレームワークやサーバーサイド、モバイルアプリは全てReact.js（+ Next.js）ですね。Static Site Generatorsのおすすめ「GatsbyJS」もReactがベースになっています。



## React Developer in 2019

![React Developer in 2019](./developer_roadmap_2019_03.png)  
React Developer in 2019（[https://github.com/adam-golab/react-developer-roadmap](https://github.com/adam-golab/react-developer-roadmap)）より

Adam Golabさんが作成したReact版のロードマップです。

HTML、CSS、JS Basics、General Development SkillsはWeb開発/フロントエンドのロードマップと重なる部分が多いです。「CSS Preprocessors」はSASSに加えてPostCSSも必須になっています。

「状態管理（State Management）」は「[Redux](https://redux.js.org/)」が挙げられています。

APIクライアントは必須として「REST」、覚えておくと良いものとして「[GraphQL](https://graphql.org/)」が挙げられています。「GraphQL」はAPI用のクエリ言語で、先ほども名前が出た「GatsbyJS」でも採用されています。

ユーティリティライブラリーには主に配列を処理する「[Loadash](https://lodash.com/)」、日付や時刻を操作する「[Moment](https://momentjs.com/)」、条件付きでclassNamesを結合するライブラリ「[Classnames](https://github.com/JedWatson/classnames)」の3つが必須として挙げられています。

テストツールはフロントエンドにあった「Cypress」がなく「[Sinon](https://github.com/sinonjs/sinon)」が入っています。「Sinon」はテストダブルを行うツールです。ダブルは代役や影武者といった意味もあり、映画の撮影などで演奏シーンやプロの技術を要するシーンの撮影に使用されるボディダブルという役割があります。Web制作においては、テストダブルがある状況を作り出し、それをもとにプロジェクトやアプリの検証を行います。

同じくテストから線が伸びている「E2E Testing」。E2Eは「End to End」の略でアプリなどを実際にサーバーやブラウザを立ち上げて初めから終わりまで一通り操作を行うテストです。


web開発/フロントエンド/React開発を学ぶためのロードマップ



[Google Adsense](https://www.google.com/intl/ja_jp/adsense/start/)は、

> 自分のウェブサイトに広告を掲載するだけで収益が得られる無料のサービスです。（Google AdSense – Google）

です。利用にはGoogleアカウントが必要です。広告の表示によって発生する収益は銀行口座で受け取ることができます。リンク先のサイトでGoogle Adsenseに登録後、広告を表示したいサイトのURLや表示する広告の種類などを設定し、生成されたコードを自分のサイトに記述すると広告が表示されるようになります。

当サイトは[Gatsby](https://www.gatsbyjs.org/)で作成しているので、Gatsby製のサイトやブログで表示する方法を調べました。広告は2018年に導入された「[自動広告](https://support.google.com/adsense/answer/7478040?hl=ja)」を利用します（以前は「react-adsense」というパッケージを利用して表示していましたが、「自動広告」の表示に切り替えました）。

以前までは広告を表示させたい場所にコードを記述していましたが、「自動広告」では最適な場所に自動で広告が表示されます。詳しくは[自動広告について](https://support.google.com/adsense/answer/7478040?hl=jas)のページをご覧ください。


## 実現したいこと

* Gatsbyで作成したサイトにGoogle Adsenseを導入して広告を表示する
（Google Adsenseへの登録手順の説明は省きます）


## 事前準備

Gatsbyのプラグイン「gatsby-plugin-google-adsense」をインストール

```shell
npm install --save gatsby-plugin-google-adsense
```


## gatsby-config.jsにIDを指定

インストールしたプラグインをconfigに記述します。 `publisherId` の「xxxxxxxxxx」は、Google Adsenseで発行されたご自身のIDの数字に変更してください。IDは「Google Adsense > アカウント > 設定 > アカウント情報」で確認できます。

```js
plugins: [
  {
    resolve: `gatsby-plugin-google-adsense`,
    options: {
      publisherId: `ca-pub-xxxxxxxxxx`
    },
  },
]
```


## Google Adsenseで自動広告を設定する

「[自動広告の設定方法](https://support.google.com/adsense/answer/7480616)」ページの手順1〜6までを行います。先にインストールしたプラグインで「gatsby-config.js」にIDを設定したことで、自動的に `<head>` タグ内にコードが挿入されるため、7〜8の手順は不要です。


## 最後に

自動広告の設定では表示する広告の種類を選ぶことができますが、全てをオンにしてしまうとページ内が広告だらけになってしまうことがあるようです。適度に広告を表示させたい場合「[Googleアドセンス自動広告の設定を自在に操るテクニック](https://kagesai.net/google-adsense-automatic-ad-technique/)」で解説されているような設定を行うことをおすすめします。

GatsbyにGoogle Adsenseを追加する



Reactの勉強中に静的サイトジェレネーターのことを知り、勉強をかねてWordPressからReact.jsベースの[Gatsby](https://www.gatsbyjs.org/)へ移行することにしました。

## Gatsbyについて

[Gatsby](https://www.gatsbyjs.org/)はReact.jsをベースとしたフレームワークです。非常に高速なWebサイトの構築が可能です。扱えるデータソースはCMS、マークダウン、API、JSONなど様々です。

スターターと呼ばれるテンプレートのようなソースが用意されているためすぐにサイトを始めることができます。スターターを元にカスタマイズすることで好きなデザインや構成のサイトを作ることも可能です。


## 移行作業

### Gatsbyの開発環境を整える

公式サイトの[Tutorials](https://www.gatsbyjs.org/tutorial/part-zero/)を見ながら進めました。

### Starterを基にサイトを作成する

公式サイトにある[Starter](https://www.gatsbyjs.org/starters/?v=2)から、今回は[Gatsby Advanced Starter](https://vagr9k.github.io/gatsby-advanced-starter/)を選びました。トップ（記事一覧）と記事詳細ページのみのシンプルな構成ですが、カテゴリーやタグ、シェアボタンなど必要な機能が揃っています。このStarterをベースにページの追加やCSS・レイアウトの調整などを行いました。

### WordPressの記事データをダウンロードしてMarkdown形式に変換する

Gatsbyはブログの記事はマークダウン形式です。WordPressの記事のHTMLをツールを使用してマークダウン形式に変換しました。

### サーバーへアップロード

ビルド後に生成されるソース一式をFTPにアップする方法でも問題ありませんが、記事やサイトの更新時の利便性を考慮して[Netlify](https://www.gatsbyjs.org/docs/hosting-on-netlify/)を使用することにしました。利用にはGitHubのアカウントも必要になりますが、GitHubのリポジトリに差分データをプルすると、自動的にNetlifyがビルドを始めます。コードに問題がなければサイトが更新されます。


## 最後に

Lighthouseで移行前と移行後に計測した結果です。  
どの数値も上がりました。一番数値の低かったPerformanceはほぼ100に近くなり、SEOは満点です。

**移行前**  
![移行前](./wordpress_move_to_gatsby_before.jpg)

**移行後**  
![移行後](./wordpress_move_to_gatsby_after.jpg)



### 参考サイト

[Tania Rascia「The End of an Era: Migrating from WordPress to Gatsby」](https://www.taniarascia.com/migrating-from-wordpress-to-gatsby/)（参照2019-05-20）

WordPressから静的サイトジェレネーターGatsbyへ移行


JavScript製の画像ビューワー「[Viewer.js](https://fengyuanchen.github.io/viewerjs/)」では複数画像のポップアップギャラリーが簡単に作成できます。レスポンシブ対応、jQueryの読み込み不要で動作します。ポップアップした画像はオプションボタンやマウスホイール、ピンチイン・ピンチアウト、キーボードによる操作で拡大・縮小が可能で、さらに拡大した画像をドラッグ&ドロップで移動させることができます。

## 事前準備

[Viewer.js公式サイト](https://github.com/fengyuanchen/viewerjs)よりファイルをダウンロードして読み込みます。通常のファイルと圧縮版が用意されているので適宜読み込んでください。


```html
<link rel="stylesheet" href="viewer.min.css">
<script src="viewer.min.js"></script>
```

## プラグインの設定

1枚の画像を拡大・縮小するサンプルを作成します。HTMLで画像を読み込み、任意のidを指定します。


```html
<img id="zoomImg" src="map.jpg" alt="map">
```

プラグインの動作は下記の記述のみです。


```js
const img = document.getElementById('zoomImg');
const viewer = new Viewer(img);
```

オプションを設定しない場合のデフォルトの表示です。  
![Option Sample](./popup_viewer_options.jpg)

オプションはエレメントに続いて記述します。下記はオプションの一部です。そのほかに設定できるオプションやメソッドなどは[Viewer.jsのGitHub](https://github.com/fengyuanchen/viewerjs#options)でご確認ください。


```js
const viewer = new Viewer(img, {
  backdrop: true, //背景オーバーレイの表示
  button: true, //閉じるボタンの表示
  navbar: false, //画像のサムネイルの表示
  title: false, //画像のタイトルの表示
  toolbar: true, //拡大・縮小などの操作ボタンの表示
  className: 'img-popup', //ビューワーへ任意のclass名を付与
  container: '#wrapper', //ビューワーの生成位置。デフォルトはbody直下
  fullscreen: true, //全画面表示を可能にするかどうか
  keyboard: true, //キーボードによる操作を有効に
  movable: true, //画像の移動可能にするかどうか
  zoomable: true, //画像の拡大・縮小を可能にするかどうか
  rotatable: false, //画像の回転を可能にするかどうか
  toggleOnDblclick: false, //ダブルクリックで等倍の操作を有効にするかどうか
  tooltip: false, //拡大率・縮小率の表示
  transition: true, //ポップアップ時のアニメーション有無
});
```


## デモ

[「拡大縮小も自由自在なレスポンシブ対応の画像ギャラリーViewer.js」のデモはこちら](https://demos.chocolat5.com/popup-viewer-js/)

拡大縮小も自由自在なレスポンシブ対応の画像ギャラリーViewer.js[jQuery不要]


複数の画像やテキストを同じ位置で一定時間ごとに切り替えて表示するアニメーションの作り方です。jQueryを使用する方法と使用しない脱jQueryの2パターン作成しました。ページの最後にデモを用意しています。

- [jQueryで作る切り替えアニメーション](#jQueryで作る切り替えアニメーション)
- [jQueryを使用しないJavaScriptで作る切り替えアニメーション](#jQueryを使用しないJavaScriptで作る切り替えアニメーション)


## jQueryで作る切り替えアニメーション

### 事前準備

jQuery本体を読み込みます。

```html
<script src="jquery-3.3.1.min.js"></script></div>
```

### 切り替える要素をhtmlに記述

画像でもできますが、サンプルではテキストを切り替えます。切り替えたいテキスト全てにアニメーション用のclass名を付与します。


```html
<ul>
  <li class="text">テキスト1</li>
  <li class="text">テキスト2</li>
  <li class="text">テキスト3</li>
  <li class="text">テキスト4</li>
</ul>
```

### JavaScriptで切り替える処理を作成

テキストを順番に表示させたいのでインデックス番号の変数を宣言し、`-1`を代入します。テキストが表示されるところからアニメーションを始めるので、`hide()`で一旦非表示にします。

```js
const txts = $('.text');
let txtIndex = -1;
txts.hide()
```

テキストを切り替える関数の中身は「インデックス番号を1ずつ増やす」「`eq()`で表示したいテキストを指定」「指定したテキストをフェードイン、フェードアウト」になります。

先ほどインデックス番号を`-1`としたのは関数の最初にインデックス番号を1増やすという処理をするため、テキストの1つ目が最初に表示されるようにするためです。アニメーションではフェードインのあとにすぐフェードアウトをしてしまうと表示されているテキストを読む時間がなくなってしまうので`delay()`をはさみます。フェードアウトのあと、同じ処理を繰り返すために`showNextTxt`を実行します。あとは、読み込み後に`showNextTxt`を一度実行するだけです。


```js
function showNextTxt() {
  txtIndex++;
  txts.eq(txtIndex % txts.length).fadeIn(2000).delay(3000).fadeOut(2000, showNextTxt);
}
showNextTxt();
```

## jQueryを使用しないJavaScriptで作る切り替えアニメーション

### 切り替える要素をhtmlに記述

切り替えたいテキスト全てにアニメーション用のclass名を付与します。さらに1つめのテキストに`is-active`を付与します（class名は何でも構いません）。

```html
<ul>
  <li class="text is-active">テキスト1</li>
  <li class="text">テキスト2</li>
  <li class="text">テキスト3</li>
  <li class="text">テキスト4</li>
</ul>
```

### CSSで切り替わりのアニメーションを作成

CSSで通常は`opacity: 0;`、`is-active`が付与されたときに`opacity: 1;`となるよう指定し、jQueryでの「fadeIn」「fadeOut」にあたる部分は`transition`で設定します。サンプルでは2秒かけて「0から1」「1から0」になるようにしました。


```css
.text {
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
}
.text.is-active {
  opacity: 1;
  -webkit-transition: opacity 2s ease;
  transition: opacity 2s ease;
}
```

### JavaScriptで切り替える処理を作成

JavaScriptでは、先ほどと同様にテキストのインデックス番号`txtIndex`に`-1`を代入します。


```js
const txts = document.getElementsByClassName('text');
let txtIndex = -1;
```

テキストを切り替える関数では「表示されているテキストをフェードアウトさせて、次のテキストをフェードインさせる」という処理を繰り返します。

関数の具体的な中身は「インデックス番号を1ずつ増やす」「現在表示中のテキストと次に表示するテキストを取得」「現在表示中のテキストから`is-active`を取って`display: none;`に」、「次に表示するテキストを`display: block;`にしてから`is-active`を付与」です。

jQueryのような`fadeIn`を実現するために`opacity: 0;`のまま一旦`display: block;`にします。`fadeOut`はその逆です。


```js
function changeTxt() {
  txtIndex++;

  let currentNum = txtIndex % txts.length;
  let nextNum = (txtIndex + 1) % txts.length;
  let current = txts[currentNum];
  let next = txts[nextNum];

  setTimeout(function () {
    current.classList.remove('is-active');
  }, 3000);
  setTimeout(function () {
    current.style.display = 'none';
    next.style.display = 'block';
  }, 5100);

  setTimeout(function () {
    next.classList.add('is-active');
  }, 5200);
}
```

アニメーションを繰り返す関数を作成します。ここでは、テキスト切り替えの関数を`setInterval`で一定時間ごとに繰り返す処理をします。


```js
function showNextTxt() {
  setInterval(changeTxt, 7200);
}
```

最後に、`setInterval`は指定した時間ごとに処理を繰り返しますが、最初の1回も指定時間待たなければ実行されません。そこで繰り返しの関数の実行の前に、読み込み後1度だけテキスト切り替えの関数（`changeTxt`）を実行することで、最初の1回だけ切り替えまで長く時間がかかってしまうということがないようにします。


```js
changeTxt();
document.addEventListener('DOMContentLoaded', showNextTxt, false);
```

## デモ

[「jQUery/JavaScriptで作る一定時間ごとに切り替えて表示するアニメーション」のデモはこちら](https://demos.chocolat5.com/setinterval-animation/)

## 参考

- [Qiita「javascript で fadeOut() したい」, &lt;https://qiita.com/snjssk/items/1ae5308f3a26f15f697f&gt;](https://qiita.com/snjssk/items/1ae5308f3a26f15f697f)（参照2019-3-24）  
- [森のコーディング「javascriptでsetIntervalの最初の1回はまたずにすぐに実行したい時」, &lt;http://mori-coding.blog.jp/archives/7211359.html&gt;](http://mori-coding.blog.jp/archives/7211359.html)（参照2019-3-24）

jQUery/JavaScriptで作る一定時間ごとに切り替えて表示するアニメーション


マウスの位置や動きに合わせて背景の画像が動くパララックスの作り方です。スクロールではなくマウスの位置に反応して上下左右に動きます。実際の動きはページ最後のデモをご覧ください。

## 事前準備

CDNからparallax.min.jsを読み込みます。（[公式サイト](http://matthew.wagerfield.com/parallax/)にもデータがありますが、こちらは更新されていないためかエラーが出て動作しませんでした。）

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
```

## JavaScriptファイルで画像の読み込みと動きを設定する

重ねたい背景画像を、レイヤーの奥から順に読み込みます。一番上にしたい画像はHTMLでは一番下になります。動きの大小はカスタムデータ属性の「data-depth」で設定します。数値が大きいほど画像の動きも大きく、数値が小さいほど画像の動きも小さくなります。


```html
<div id="layer">
  <div data-depth="0.1" class="layer layer1"><img src="bg.jpg" alt=""></div>
  <div data-depth="0.4" class="layer layer2"><img src="cloud_02.png" alt=""></div>
  <div data-depth="0.8" class="layer layer3"><img src="cloud_01.png" alt=""></div>
</div>
```

パララックスを動作させます。CSSでレイヤーの重なりを指定する必要もなくこれだけで完成します。


```js
var layer = document.getElementById('layer');
var parallax = new Parallax(layer);
```

デモページのようにウィンドウ幅いっぱいの背景画像に使用する場合、画像の動きが大きいと、画像と画面に余白が生じてしまうため、画像をやや大きくするなどCSSでの調整が必要です。

そのほかオプションで動く速度や動きの反転、カーソルの初期位置などを調整できます。ここにないオプションは[公式のGitHubページ](https://github.com/wagerfield/parallax)でご確認ください。


```js
var layer = document.getElementById('layer');
var parallax = new Parallax(layer, {
  clipRelativeInput: true, //要素の端にカーソルが達したら動きを止める
  hoverOnly: true, //カーソルが要素の上にある場合のみ有効
  invertX: true, //X軸の動きを反転。falseにするとマウスと同じ方向に動く
  invertY: true, //Y軸の動きを反転。falseにするとマウスと同じ方向に動く
  limitX: false, //X軸の動きを制限する
  limitY: false, //Y軸の動きを制限する
  scalarX: 10.0, //X軸の移動速度と範囲を増減
  scalarY: 10.0, //Y軸の移動速度と範囲を増減
  frictionX: .1, //X軸のレイヤーの速度。0.00〜1.00の範囲内で指定可能
  frictionY: .1, //Y軸のレイヤーの速度。0.00〜1.00の範囲内で指定可能
  originX: .5, //X軸のマウスの初期位置。デフォルトの0.5は画面または要素の中心
  originY: .8, //Y軸マウスの初期位置。デフォルトの0.5は画面または要素の中心
});
```

## デモ

[「jQueryで作るマウスに合わせて背景が動くパララックス」のデモはこちら](https://demos.chocolat5.com/mouse-parallax/)

## 参考

- [Gimmick log「マウスやジャイロセンサーの動きに合わせてパララックス効果を出す parallax.js」, &lt;http://gimmicklog.main.jp/javascript/465/&gt;](http://gimmicklog.main.jp/javascript/465/)（参照2019-3-18）

jQueryで作るマウスに合わせて背景が動くパララックス


レスポンシブ対応でオプションで細かくカスタマイズができて便利なスライダーのjQueryプラグイン「slick」。公式サイトのサンプルにはない実装例を3パターンご紹介します。

- [矢印をオリジナルデザインに変更する](#矢印をオリジナルデザインに変更する)
- [左右の両端に前後のスライダー画像を見せる](#左右の両端に前後のスライダー画像を見せる)
- [スライダー画像をアニメーションさせる](#スライダー画像をアニメーションさせる)


## 事前準備

[slickの公式サイト](http://kenwheeler.github.io/slick/)からファイルをダウンロードして読み込みます。jQueryも読み込みます。


```html
<link rel="stylesheet" href="slick.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="slick.min.js"></script>
```

HTMLは下記のものを使用します。全パターン同じです。


```html
<div id="slider">
  <img src="imgs/slide01.jpg" alt="">
  <img src="imgs/slide02.jpg" alt="">
  <img src="imgs/slide03.jpg" alt="">
</div>
```


## 矢印をオリジナルデザインに変更する

slickのオプション「prevArrow」「nextArrow」で矢印のHTMLを設定します。例ではimgタグで矢印の画像を表示させます。矢印が生成される位置を変更したい場合はオプション「appendArrows」で設定します。公式サイトによるとSelector, htmlString, Array, Element, jQuery objectのいずれかで指定できます。矢印の表示位置はCSSで調整してください。


```js
$('#slider01').slick({
  prevArrow: '<div class="slider-arrow slider-prev"><img src="imgs/arrow_prev.svg" alt="＜"></div>',
  nextArrow: '<div class="slider-arrow slider-next"><img src="imgs/arrow_next.svg" alt="＞"></div>'
});
```

## 左右の両端に前後のスライダー画像を見せる

公式サイトのサンプルに中央に3つ表示させてその前後を少し見せるようなレイアウトがありますが、サイトのメインビジュアルなどにあるようなウィンドウ幅いっぱいに表示する方法です。

slickのオプション「centerMode」をtrueにすると、左右の両端に前後の画像が見える状態になります。両端に見えている画像の幅を変更したい場合は、オプション「centerPadding」でpxか%で指定できます。


```js
$('#slider02').slick({
  centerMode: true
});
```

## スライダー画像をアニメーションさせる

例では画像が表示されている間は徐々に拡大し続けるというアニメーションを作成します。アニメーション自体はCSSで設定し、アニメーションと調和するようにスライダーの動きを自動でフェードしながら切り替わるよう設定します。

アニメーションの設定は、現在表示中のスライダー画像（slick-current）にのみアニメーションを適用します。animation-durationの時間を自動での切り替え時間よりも少し長めに設定することで、より滑らかになります。animation-delayをマイナス値にするのは、スライダー画像が表示されるときにはすでにアニメーションが始まっているようにするためです。


```css
.slider03 .slick-current {
  -webkit-animation: increase 6s ease -.1s infinite;
  animation: increase 6s ease -.1s infinite;
}
@-webkit-keyframes increase {
  0% {-webkit-transform: scale(1, 1);}
  100% {-webkit-transform: scale(1.2, 1.2);}
}
@keyframes increase {
  0% { transform: scale(1, 1);}
  100% { transform: scale(1.2, 1.2);}
}
```

プラグインの設定は、自動切り替えのオプション「autoplay」をtrueに、フェード効果のオプション「fade」をtrueにします。切り替えの時間は「autoplaySpeed」で、フェードの時間は「speed」でそれぞれ調整してください。


```js
$('#slider03').slick({
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 500,
  fade: true,
  arrows: false
});
```

## デモ

[「slickプラグインで作るスライダー3種」のデモはこちら](https://demos.chocolat5.com/slick-slider/)

slickプラグインで作るスライダー3種


映画の公式サイトで見かけたナビゲーションをスマートフォン限定で集めました。

## モーダルウィンドウ

メニューボタンをタップすると画面全体にモーダルウィンドウが開きます。縦の長さに制限がないため、メニュー項目が多い場合にも対応することが可能です。ウィンドウ全面を使用できるため、デザインの自由度も高くなります。

多くはJavaScriptやjQueryを用いて実装されますが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。

![モーダルウィンドウ例1](./modal_01.png)  
映画「Lady Bird」アメリカ公式サイト


![モーダルウィンドウ例2](./modal_02.png)  
映画「否定と肯定」日本公式サイト


![モーダルウィンドウ例3](./modal_03.png)  
映画「ポリーナ、私を踊る」日本公式サイト


## ドロップダウン

メニューボタンをタップすると画面の上からスライドしながらメニューが表示されます。モーダルウィンドウと同じくらいの頻度で見かけることが多いメニューです。メニューの幅はサイトによって様々で、メニュー項目が改行しない最低限の幅のサイトもあれば、モーダルのように画面幅いっぱいのサイトもあります。

モーダルメニューと同様に、多くはJavaScriptやjQueryを用いて実装されることが多いメニューですが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。

![ドロップダウンメニュー例1](./dropdown_01.png)  
[映画「ロダン　カミーユと永遠のアトリエ」日本公式サイト](http://rodin100.com/)

![](./dropdown_02.png)  
映画「ネルーダ」日本公式サイト

![ドロップダウンメニュー例3](./dropdown_03.png)  
[映画「スマーフ スマーフェットと秘密の大冒険」日本公式サイト](http://bd-dvd.sonypictures.jp/smurfsthelostvillage/)


## スライドメニュー


メニューボタンをタップすると画面の右または左からスライドしながら、画面の高さいっぱいのメニューが表示されます。モーダルメニュー、ドロップダウンメニューに次いで、映画の公式サイトでよく見かけます。

モーダルメニューと同様に、多くはJavaScriptやjQueryを用いて実装されることが多いメニューですが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。

![スライドメニュー例1](./slidemenu_01.png)  
映画「Woodshock」アメリカ公式サイト

![スライドメニュー例2](./slidemenu_02.png)  
映画「Flatliners」アメリカ公式サイト

![](./slidemenu_03.png)  
映画「The Circle」アメリカ公式サイト


## ヘッダーメニュー

メニュー項目が画面上部に水平に一列に並ぶ形です。デスクトップやノートパソコンなどウィンドウ幅が広い場合によく用いられる形で、各コンテンツに容易にアクセスすることができます。ウィンドウ幅の狭いスマートフォンでこの形を用いるにはメニューの項目数に限界があります。映画の公式サイトでの利用は少ない印象です。

シンプルに横一列に並べる場合はCSSのみで実装可能です。

![ヘッダーメニュー例1](./headermenu_01.png)  
映画「All the Money in the World」アメリカ公式サイト

![ヘッダーメニュー例2](./headermenu_02.png)  
[映画「American Pastoral」アメリカ公式サイト 紹介ページ](/gallery/american-pastoral/)


## リストメニュー

メニュー項目をリスト形式で並べたナビゲーションです。初めから画面上にメニュー項目が見えているため、各ページへのアクセスは容易ですが、メニュー自体へのアクセスはボタンをタップして表示されるタイプと比べるとやや劣ります。

CSSのみで実装可能な一番シンプルなナビゲーションメニューです。

![リストメニュー例1](./listmenu_01.png)  
[映画「gifted／ギフテッド」日本公式サイト](http://www.foxmovies-jp.com/gifted/)

![リストメニュー例2](./listmenu_02.png)  
[映画「IT イット “それ”が見えたら、終わり。」日本公式サイト](http://wwws.warnerbros.co.jp/itthemovie/)

![リストメニュー例3](./listmenu_03.png)  
[映画「ノクターナル・アニマルズ」日本公式サイト](http://www.nocturnalanimals.jp/)

![リストメニュー例4](./listmenu_04.png)  
映画「ミックス。」日本公式サイト

映画公式サイトのスマホナビゲーションデザイン5種


HTML5のaudio要素を使用して、プラグインなしでwebサイト上で簡単に音楽を再生する方法です。再生中の音声のON/OFFを制御するためのボタンも設置します。


## htmlのaudioタグを使用した音声の再生方法

音声を再生するだけであれば、audioタグで音声ファイルを読み込むだけです。音声ファイルの指定はaudioタグにsrc属性として記述するか、audioタグ内に入れたsourceタグのsrc属性で指定するかの2種類の方法があります。audioタグにオプションを追記することで、自動再生やループが可能になります。以下の例では音声は、音声ファイルが読み込まれると自動再生され、ループします。

音声の再生に対応していない場合は、代替コンテンツが表示されます。以下の例では「あなたのブラウザーは `audio`要素をサポートしていません。」の部分が表示されます。


```html
<audio src="ファイル名.mp3" autoplay loop>
  あなたのブラウザーは <code>audio</code>要素をサポートしていません。
</audio>
```

または


```html
<audio autoplay loop>
  <source src="ファイル名.mp3">
  あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
</audio>
```


## JavScriptで音楽のON/OFFを制御するボタンを設置する

次に音声のON/OFFを制御するボタンを設置します。webサイトで音声を再生する場合、サイトの訪問者がどんな環境で閲覧するかわからないので、ON/OFFの切り替えができるボタンなどを用意しておいたほうが、ユーザーにとっても親切です。

音声の再生/一時停止はJavaScriptで行います。再生/一時停止を制御するためにaudioタグに任意のidを指定します。


```js
//音声の再生
document.getElementById('audio').play();

//音声の一時停止
document.getElementById('audio').pause();
```

音声のON/OFF用のボタンの見た目もCSSで扱いやすくするために、ボタンとaudioタグを同じdivで囲みます。ボタンをクリックすることでdivに任意のclass名が追加/削除されるようにし、このclass名の有無によって音声の再生のON/OFFを切り替えます。


```html
<div class="audio_wrap">
  <div class="audio_button"></div>
  <audio id="audio" src="7971.mp3" loop>
    あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
  </audio>
</div>
```


```js
$(function () {
  var audioBtn = $('.audio_button'),
  audioWrap = $('.audio_wrap'),
  audio = document.getElementById('audio');

  audioBtn.on('click', function () {
    if( audioWrap.hasClass('play') ) {
      audio.pause();
      audioWrap.removeClass('play');
    } else {
      audio.play();
      audioWrap.addClass('play');
    }
  });
});
```

## デモ

[「htmlのaudioを使用してサイト上でBGM音楽を流す」のデモはこちら](https://demos.chocolat5.com/html-audio-play/)


## 参考

- [「audio 要素」, &lt;https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio&gt;](https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio) （参照2017-10-24）  
- [「フリーBGM（音楽素材）無料ダウンロード｜DOVA-SYNDROME」, &lt;https://dova-s.jp&gt;](https://dova-s.jp) （参照2017-10-24）

htmlのaudioを使用してサイト上でBGM音楽を流す


マウスのカーソル（ポインター）の変更方法です。CSSとjQueryのいずれかで変更することができます。


## CSSで変更する


まずはカーソルに使用したい画像を用意します。画像の形式は「png」などでも表示されるブラウザもあるようですが、IEまで含めたブラウザに対応しているのは「.cur」または「.ani」になります。そのため作成した画像を変換する必要があります。今回は様々な形式に変換が行える便利なオンラインサービス「[Convertio](https://convertio.co/ja/)」を利用しました。

続いて、マウスのカーソルを変更したいエリアを対象にCSSを設定します。サイト全体であれば「body」に指定してください。マウスのカーソルは「cursor」プロパティの値を画像のURLにすることで変更が可能です。画像のカンマの後の指定は画像が表示されない場合に備えたものですので、任意の値を指定してください。


```css
.change {
  cursor: url(original.cur), auto;
}
```


デモはページの最後のほうに設置していますのでそちらでご覧ください。

## jQueryで変更する

[映画「Free Fire」の公式サイト](http://freefire-movie.com/)では、この方法でカーソルがオリジナルの画像に変更されています。トップページの両端にあるグレーのエリアにマウスを置いてみてください。このエリアにマウスがある時だけカーソルの画像が変わります。

それでは実装方法ですが、jQueryの場合は、まずカーソルを変更したいエリアの中に変更後のカーソルの画像を「img」タグで読み込みます。CSSではエリア内ではカーソルを非表示にし、class名の有無によって画像の表示/非表示が切り替わるようにします。

次にJavaScriptでの設定ですが、「エリアにマウスを置いたら画像を表示/エリアからマウスが外れたら画像を非表示」と「カーソルの画像をマウスに追従させる」の2つを設定します。画像の表示/非表示は「addClass/removeClass」で行います。マウスの追従は、マウスの位置を取得し、その値を画像のCSSとして設定します。マウスと同じ位置に画像が表示され、マウスが動くと画像も一緒に動くため、マウスのカーソルが変わったように見えます。


```html
<div class="change">
  <img src="original.png" alt="">
</div>
```

```css
.change {
  position: relative;
  cursor: none;
}

.change img {
  position: fixed;
  visibility: hidden;
  opacity: 0;
}

.change.on_mouse img {
  visibility: visible;
  opacity: 1;
}
```

```js
$(function(){
  //マウスが置かれたらclass「on_mouse」を追加、外れたら「on_mouse」を削除
  $('.change2').on('mouseover', function() {
    $(this).addClass('on_mouse');
  }).on('mouseout', function() {
    $(this).removeClass('on_mouse');
  });

  //マウスの位置にあわせて画像のCSSを指定
  function mouseMove(e) {
    $('.change2 img').css({
      'top': e.clientY,
      'left': e.clientX
    });
  }
  $('.change2').on('mousemove', mouseMove);
});
```

## デモ

[「マウスのカーソルを好きな画像に変更する」のデモはこちら](https://demos.chocolat5.com/cursor-change/)

## 参考

- [「カーソルの形を変更する」, &lt;http://www.tagindex.com/stylesheet/page/cursor.html&gt;](http://www.tagindex.com/stylesheet/page/cursor.html)（参照2017-10-8）


マウスのカーソルを好きな画像に変更する


映画の公式サイトで見かけたローディングを集めました。


## 一定の動きを繰り返す「スピナー」

![the circle](./loading_thecircle.gif)  
「The Circle（[http://thecircle.movie/](http://thecircle.movie/)）」より

読み込み中は画像やアニメーションが一定の速度で同じ動きを繰り返し、読み込みが終わるとコンテンツが表示されます。スピナータイプのローディングは、読み込みの進行具合がわからないため、読み込み時間が短い場合に向いています。  
「The Circle」のローディングでは、読み込み中はロゴの「C」が回転を続け、読み込みが終わると映画のタイトルの「THE CIRCLE」がフェードインしながら表示されます。回転するアニメーションはCSSアニメーションのkeyframeで作成されています。



## 「%」で読み込みの進捗を表示

![Free Fire](./loading_freefire.gif)  
「Free Fire Official Movie Site（http://freefire-movie.com/）」より

読み込みの進行具合にあわせて、数字が0%から100%まで増えていきます。数字のカウントはJavaScriptで作成されています。%表示は読み込みがどの程度完了しているか一目でわかりやすく、「読み込み完了まで残りどれくらいかかるのか」の目安になります。


## 「プログレスバー」で読み込みの進捗を表示

![It](./loading_it.gif)  
「IT – Official Movie Site –（[http://itthemovie.com/](http://itthemovie.com/)）」より

読み込みの進行具合にあわせて画面に水平に引かれた白いラインが、画面の左から右へ濃くなっていきます。プログレスバーのアニメーションはTweenMaxで作成されています。前述の％表示と同様に読み込みの進捗が一目でわかります。


![gifted](./loading_gifted.gif)  
「Gifted | Fox Searchlight（[http://www.foxsearchlight.com/gifted/](http://www.foxsearchlight.com/gifted/)）」より


プログレスバーとは少し形が違いますが、読み込みの進捗に合わせて画面上の要素が変化していく部分は同じです。例ではロゴの色が左から徐々に塗られていきます。ロゴの画像を色違いで2つ用意し、CSSで徐々に色が変化するように見せています。ローディング画面の表示・非表示はプラグイン「pace.js」が使用されています。


## 「プログレスバー」と「%」を組み合わせたローディング

![It](./loading_johnwick2.gif)  
「JOHN WICK 2 | Official Site（[http://www.johnwick.movie/](http://www.johnwick.movie/)）」より

前述の「%」表示と「プログレスバー」を組み合わせて進捗がよりわかりやすくなっています。この映画では主人公のビジュアルとロゴも組み合わせてデザインされたローディング画面になっています。



## SVGアニメーション

![It](./loading_jakie.gif)  
「Jackie | Fox Searchlight（[http://www.foxsearchlight.com/jackie/](http://www.foxsearchlight.com/jackie/)）」より

読み込みの進捗にあわせてアルファベットが描画されるアニメーションを使用したローディングです。映画のロゴの「J」はSVGで作成されています。Jの字が完成すると残りの「ackie」のpng画像がフェードインするアニメーションです。


![Frolida Project](./loading_frolidaproject.gif)  
「Frolida Project（[http://floridaproject.movie/](http://floridaproject.movie/)）」より

こちらも前述の映画と同様にSVGアニメーションを使用したローディングです。アニメーションする対象も同様にロゴですが、文字の枠線が描画されてから、白く塗られるというアニメーションになっています。

Tips