
## 概要

[next/image で Masonry レイアウトを実現するのは難しい](/posts/2022-07-10-1) という記事を書いたがレベルが上がって実現できるようになったので訂正記事を書く

## 出来上がったもの
[https://tech-blog.homura10059.dev/posts](https://tech-blog.homura10059.dev/posts) 

## 実装

- 画像のURLとともに、アスペクト比を管理するようにした
- アスペクト比をもとに、 `next/image` で画像を表示するように変更
- `break-inside-avoid` をつけないと画像が column からはみ出すので注意

```tsx
import Image from 'next/image'  
import Link from 'next/link'  
  
import { customLoader } from '../../../lib/image-loader'  
import DateFormatter from '../../date-formatter'  
  
type PostCardProps = {  
  title: string  
  coverImage: {  
    url: string  
    aspectRatio?: string  
  }  
  date: string  
  slug: string  
  tags: string[]  
}  
  
const PostCard = ({ title, coverImage, date, slug, tags }: PostCardProps) => {  
  return (  
    <div className="break-inside-avoid block relative mb-4">  
      <Link as={`/posts/${slug}`} href="/posts/[slug]">  
        <a>  
          <figure  
            style={{  
              position: 'relative',  
              aspectRatio: coverImage.aspectRatio ?? '4/3'  
            }}  
            className="w-full rounded-md"  
          >  
            <Image  
              loader={customLoader}  
              src={coverImage.url}  
              alt={`Cover Image for ${title}`}  
              layout="fill"  
              objectFit="contain"  
            />  
          </figure>  
          <div className="flex absolute inset-0 flex-col p-2 bg-black/40">  
            <div className="">  
              <h1 className="mb-1 text-xl font-bold">{title}</h1>  
              <DateFormatter dateString={date} />  
            </div>  
            <div className="flex flex-wrap gap-1 mt-auto">  
              {tags.map((tag, index) => (  
                <span  
                  key={index}  
                  className="px-2 text-black bg-white/60 rounded-md"  
                >  
                  #{tag}  
                </span>  
              ))}  
            </div>  
          </div>  
        </a>  
      </Link>  
    </div>  
  )}  
  
type Props = {  
  posts: PostCardProps[]  
}  
  
const PostCards = ({ posts }: Props) => {  
  return (  
    <div className="columns-1 p-4 md:columns-2 lg:columns-3 xl:columns-4">  
      {posts.map(post => (  
        <PostCard {...post} key={post.slug} />  
      ))}  
    </div>  
  )}  
  
export default PostCards
```


next/image で Masonry レイアウトを実現する


## 概要

[https://coliss.com/articles/build-websites/operation/css/masonry-layout-only-with-tailwindcss.html](https://coliss.com/articles/build-websites/operation/css/masonry-layout-only-with-tailwindcss.html)

をみて、ブログの記事一覧を Masonry レイアウトにしようと思ったが next/image で実現するのは難しかったので img タグで普通に実装した

2022-08-15追記  
next/image でも実現できた -> [next/image で Masonry レイアウトを実現](/posts/2022-08-15-1) 

## 出来上がったもの
[https://tech-blog.homura10059.dev/posts](https://tech-blog.homura10059.dev/posts) 

## 調査結果

- tailwind で Masonry レイアウトを実現するのは簡単
	- 問題は `next/image`
- `next/image` は CLS を避けるために、`width` / `height` を事前に設定するのを推奨している
	- 今回のようにサイズがわからない画像を表示する場合に、`layout='fill'` と`objectFit='contain'` を設定する方法はある
	- ただその場合は親コンテナに `width` / `height` どちらか設定しておく必要があるため、Masonry レイアウト には向かなそう
- 結論： 誰か詳しい人実現方法を教えてください
	- 2022-08-15追記
		- next/image でも実現できた -> [next/image で Masonry レイアウトを実現](/posts/2022-08-15-1) 


## 参考

- [ウソみたいに簡単！ Tailwind CSSのみを使用してMasonryレイアウトを実装する方法](https://coliss.com/articles/build-websites/operation/css/masonry-layout-only-with-tailwindcss.html)
- [next/image](https://nextjs.org/docs/api-reference/next/image#layout)
- [next/imageでサイズがわからない画像を使用する & 正しく表示されない場合の対処法](https://zenn.dev/ruru/articles/bcb8323a519fe2)

[https://www.amazon.co.jp/dp/1680509403](https://www.amazon.co.jp/dp/1680509403)

next/image で Masonry レイアウトを実現するのは難しい


## 概要

[前回](/posts/2022-03-21-1) の続き  
blog-starter-typescript で作ったプロジェクトのUIをいじっていきたいが、その前に開発に必要なstorybookを導入する

## 作業ログ

### storybook の導入

基本は [Get started with Storybook and Next.js](https://storybook.js.org/blog/get-started-with-storybook-and-next-js/) を基に設定する

### storybook を導入する
```bash
npx sb init --builder webpack5
```

`.storybook/main.js` に `reactDocgen: false` を追加しておく
追加しないと`Cannot find module 'webpack/lib/util/makeSerializable.js`のエラーが発生する

```javascript
module.exports = {  
  "typescript" : { reactDocgen: false },  
// ...
}
```

静的ファイルを解決するために public を staticDirs に追加しておく
```js
module.exports = {  
  // ...
  "staticDirs": ["../public"],
}
```

### tailwindcss用の設定を追加する

tailwindcssのCSSを読み込むために `.storybook/preview.js` に以下のCSSを追加しておく
```js
import 'src/styles/index.css'
```

storybookコマンドは以下のように修正しておくとCSSが即時反映されて便利
```
  "storybook": "TAILWIND_MODE=watch start-storybook -p 6006",
```


### storybook-addon-next を導入する

`next.config.js` を空で作っておく
```
touch next.config.js
```
中身はこれでOK
```js
module.exports = {}
```

storybook-addon-next をinstallする

```bash
yarn add --dev storybook-addon-next
```

`.storybook/main.js`  の addons に追加する
```js
module.exports = {  
  "addons": [  
    // ...
    "storybook-addon-next"  
  ],
// ...
}
```

ここまできたら `yarn storybook` でstorybookが起動できる

### github-actions で storybook を自動でアップロードする

`.github/workflows/storybook.yml` ファイルを作り以下の内容を書く

```yaml
name: github pages  
  
on:  
  push:  
    branches:  
      - main  
  
jobs:  
  build-deploy:  
    runs-on: ubuntu-latest  
    steps:  
      - name: checkout  
        uses: actions/checkout@v2  
      - name: install deps  
        run: yarn  
      - name: run build storybook  
        run: yarn build-storybook -o ./dist/storybook  
      - name: Deploy  
        uses: peaceiris/actions-gh-pages@v3  
        with:  
          personal_token: ${{ secrets.ACTIONS_DEPLOY_KEY }}  
          publish_dir: ./dist
```

`ACTIONS_DEPLOY_KEY` はリポジトリの `settings/secrets/actions` に Repository secrets として登録しておく、中身は repo 系全てに権限をつけた Personal access token 

blog-starter-typescript で作ったプロジェクトにstorybookを導入する



## 概要

[前回](/posts/2022-03-18-1) の続き  
blog-starter-typescript で作った技術ブログのコードブロックにシンタックスハイライトを導入する

## 作業ログ

### `highlight.js` を導入
[Install via NPM package](https://github.com/highlightjs/highlight.js#install-via-npm-package) を参考に以下で導入
```bash
yarn add highlight.js
```

blog-starter-typescript で使われている [remark](https://github.com/remarkjs/remark) 用の plugin である [remark-highlight.js](https://github.com/remarkjs/remark-highlight.js) を入れようと思ったが 

> **Stability: Legacy**. This package is no longer recommended for use. It’s still covered by semantic-versioning guarantees and not yet deprecated, but use of this package should be avoided. Please use `remark-rehype` to move from remark (markdown) to rehype (HTML) and then replace `remark-highlight.js` with [`rehype-highlight`](https://github.com/rehypejs/rehype-highlight).

とのことなので [rehype](https://github.com/rehypejs/rehype) と [rehype-highlight](https://github.com/rehypejs/rehype-highlight) を使うように移行する

### remark -> rehype に移行してシンタックスハイライトを当てる

[rehype-highlightでmarkdownにシンタックスハイライトを適用する](https://tamalog.szmd.jp/rehype-highlight/) を参考に

`remark` と `remark-highlight` を導入する
```
yarn add remark-parse remark-rehype rehype-highlight rehype-stringify
```

`markdownToHtml.ts` を以下のように書き換える
```ts
import { rehype } from 'rehype'  
import rehypeHighlight from 'rehype-highlight'  
import rehypeStringify from 'rehype-stringify'  
import remarkParse from 'remark-parse'  
import remarkRehype from 'remark-rehype'  
  
export default async function markdownToHtml(markdown: string) {  
  const result = await rehype()  
    .use(remarkParse)  
    .use(remarkRehype)  
    .use(rehypeHighlight)  
    .use(rehypeStringify)  
    .process(markdown)  
  return result.toString()  
}
```

`_app.tsx` に シンタックスハイライト用のcssを読み込ませる
```tsx
//...
import 'highlight.js/styles/monokai.css'
//...
```

`highlight.js/styles` の下にいろんなスタイルがあるので好みのものを当てると良い( monokai なのは個人的な好み) 

ついでに remark 周りで使わなくなったものを依存から外しておく
```
yarn remove remark remark-html
```

技術ブログのコードフロックにシンタックスハイライトを導入する



## 概要

[前回](/posts/2022-03-12-1) の続き  
blog-starter-typescript で作った技術ブログの記事のスタイルが微妙なので、いい感じにStyleを当て直す

## 作業ログ

### 配色を決める
配色わからないので、 [coolors.co](https://coolors.co/) を使って良さげなものを探す。
今回は、Red/Black/White 三色ぐらいで締まった感じにしたかったのでその三色で検索をかけて選んだ。

選んだのは[これ](https://coolors.co/palette/2b2d42-8d99ae-edf2f4-ef233c-d90429)  


その後 `tailwind.config.js` のthemeに色設定を入れておく
```javascript
{
//...
  theme: {  
    extend: {  
      colors: {  
        background: {  
          dark: '#2B2D42',  
          light: '#8D99AE'  
        },  
        surface: '#EDF2F4',  
        primary: {  
          light: '#EF233C',  
          dark: '#D90429'  
        }  
      }  
    }  
  },  
//... 
}
```


### `@tailwindcss/typography` の導入

[公式の手順](https://tailwindcss.com/docs/typography-plugin) に沿って導入する

まず依存関係の追加
```bash
yarn add -D @tailwindcss/typography
```

その後 `tailwind.config.js` のpluginに追加する
```diff
- plugins: []
+ plugins: [require('@tailwindcss/typography')] 
```

### `markdown-styles.module.css` の変更

こんな感じでページ全体で使うコンポーネントに背景色とテキスト色を設定しておく
```tsx
// layout.tsx
<div className="min-h-screen bg-background-dark text-surface">
```

その上で、こんな感じで記事に反映されるCSSを変更する
```css
/* markdown-styles.module.css */
.markdown {
  @apply prose prose-invert tracking-wide;  
  
  /* Headings */  
  @apply prose-headings:mb-4 prose-headings:border-b prose-headings:border-background-light prose-headings:pb-1 prose-headings:font-normal prose-headings:leading-snug prose-headings:text-background-light;  
  @apply prose-h2:mt-12 prose-h2:text-2xl;  
  @apply prose-h3:mt-8 prose-h3:text-xl;  
  @apply prose-h4:mt-8;  
  
  /* a */  
  @apply prose-a:text-primary-light prose-a:no-underline hover:prose-a:underline prose-a:visited:text-primary-dark;  
  
  /* コード */  
  @apply prose-code:before:content-none prose-code:after:content-none;  
  @apply prose-pre:rounded-tl-none prose-pre:bg-[#0d1117] prose-pre:p-2 prose-pre:shadow-lg;  
  
  /* ul, li */  
  @apply marker:text-primary-dark prose-li:p-0 prose-li:m-1;  
}
```

技術ブログの記事Styleをいい感じにする



## 概要

[Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れる](https://panda-program.com/posts/from-gatsby-to-nextjs) を参考に技術ブログを作り直してみる

そのためにやったことをメモする

## まとめ

- 2.5時間くらいで最低限必要なことはできて vercel にデプロイできる
- デフォルトだといろいろデザインがイケてないので、ここからのいじりがいはありそう
- Next.js の勉強しながら、やったことを記事にすればブログのネタにも困らない

## 作業ログ

### blog-starter-typescript を実行

```console
npx create-next-app --example blog-starter-typescript blog-starter-typescript
```

生成されたものを `yarn dev` して問題なさそうだったので github に repository を作る

### 新しい記事を書いてみる

この記事を書いている。
デフォルトの実装だとカバー画像が必須みたいなので、[unsplash](https://unsplash.com/) から良さげな画像を探しカバー画像に設定してみる。

![](https://imgur.com/Lw3tH5Dh.jpg)

なんとなく気に入ったのでこれをデフォルトにしてみる

### vercel にデプロイしてみる

- [vercel](https://vercel.com/) に登録する(github 連携ですぐ登録できる)
- さっき作ったリポジトリをvercelにimportする
- nextjsのアプリだとデフォルトの設定から何も変えずにデプロイできる

ここまでで 1.5h (blog-starter-typescriptで作られたコードを読んでる時間が大半)

### `next lint` の導入

- [next lint](https://nextjs.org/docs/basic-features/eslint) のページに従って `next lint` を実行してeslintの設定を行う
- コマンド打つだけで自動で設定されるので便利
- `yarn add -D prettier eslint-config-prettier` で prettier もinstallしておく
- `.prettierrc.js` を作成する
```js
/** @type {import('prettier').Config} */

const config = {
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid"
};

module.exports = config
```
- `.eslintrc.json` の `extends` に`prettier` を追加しておく

### (必要ないけど) ディレクトリ構成の変更

- デフォルトだと、リポジトリ直下にappを構成するためのコードが入ってるディレクトリが直接置かれている
- 個人的な好みとしては `src` の下にあって欲しいので移動する

ここまでで約2h (ディレクトリ構成変えたのに合わせて設定変更してる時間が大半)

### google analytics の導入

- [Next.js(TypeScript) に Google Analytics を導入し、PV を計測する方法](https://fwywd.com/tech/next-ga-pv) を参考に google analytics を導入する
- 途中で設定する `NEXT_PUBLIC_GA_ID`  と同じものを vercel の Environment Variables にも設定しておく
- Next Scriptを使った方が良さそうだったので、 [Next Script for Google Analytics](https://nextjs.org/docs/messages/next-script-for-ga) を参考にScriptタグをNext Scriptタグに置き換える
- vercel にデプロイして、 google analytics のコンソールにデータが流れてきてるのを確認して完了

ここまでで約2.5h

tailwindcss

next/image で Masonry レイアウトを実現する

next/image で Masonry レイアウトを実現するのは難しい

blog-starter-typescript で作ったプロジェクトにstorybookを導入する

技術ブログのコードフロックにシンタックスハイライトを導入する

技術ブログの記事Styleをいい感じにする

blog-starter-typescript を使って技術ブログを作り直してみた