YouTube

The music video for Arcade Fire's "Afterlife" written and directed by Emily Kai Bock off the album Reflektor. http://www.arcadefire.com"Reflektor" on iTunes:...

Arcade Fire - Afterlife (Official Video) - YouTube


import { Video } from 'src/components/Video'
import { IFrame } from 'src/components/IFrame'

あついね…

さっきバス乗りながら YouTube みてたら Vampire Weekend の Step のリリックビデオ出てきた。

この動画大好きでノリなしで 100 回くらいみてるんだけどマジどうやったらこんな歌詞書けるようになるん？

俺もエズラ（VW のヴォーカル）みたいにコロンビア大学出ればいいの？（無理）

<IFrame
  width={560}
  height={315}
  src="https://www.youtube.com/embed/_mDxcDjg9P4"
/>

(2020 anyone? みたいな YouTube にありがちなコメントあるけどめっちゃいいねついてて笑った)

Music Video 全体では多分[Afterlife](https://youtu.be/EcKinnMXuKg)が一番好きだけど Lyrics Video の類では間違いなくこの動画が一番好きだー

多分この曲の歌詞の和訳とか検索するとちょくちょくやってる人出てくるんだけどマジすごいと思う。むず過ぎでしょ笑

という話でした。このブログの YouTube の埋め込みもどうやらバッチリ動いてますね。

これは 2018 年のフジロックで撮った動画。（これもちゃんと貼れてるわね）

<Video
  width={1280}
  height={720}
  src={'/videos/blog/trim.602F8DE5-38B6-4D3E-BE22-E5CE7C009C56.mov'}
/>

Dirty Projectors が直前までレッドでやっててめっちゃ走ったなあ…笑

てかてかてかフジロック行きたくね


どうやったらこんな歌詞書けるん？


フジロック配信みた？

今も 2 日目の配信見ながらだらだら書いている。

なんか昨日配信されてたジャックホワイトのギターアンプがめっちゃ渋くて僕もアンプの話がしたくなってしまいました。

## そもそも AMP とは？

Accelerated Mobile Pages の略です。

最近スマホで Google 検索するとやたら表示が速いページがインデックスされていますよね？

あれです。

⚡️ マークが目印！

<img
  width={1125}
  height={1881}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620382980/titanicrising.jp/about-amp/IMG_1551_lqanm9.jpg`}
/>

期待できる効果はまあ単純に SEO とかかな？

UX もかなり高いし。

スムーズの記事ページも一応 AMP に対応している。

## Notion Blog を AMP に対応させる

まあ Notion Blog をと言うよりは Next をだね。

next/amp と言うすんばらしい物がデフォルトで用意されているのでこれを使っていく。

[next/amp | Next.js](https://nextjs.org/docs/api-reference/next/amp)

使うのは本当に簡単で、config という named export を NextPage コンポーネントに足すだけ！

```tsx
// pages/[slug].tsx

export const config = {
  amp: true
}

const RenderPost: NextPage = () => {
  return <div>view here</div>
}

export default RenderPost
```

するとコンパイラが AMP Validation をして怒ってくれるのでこれを潰していく。

AMP 対応は基本こんな作業になる。

いや、めんどいわ…

<img
  width={966}
  height={414}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620382979/titanicrising.jp/about-amp/_2020-08-22_23.51.30_f5k8qo.png`}
/>

引っ掛かりポイントとしては styled-components のサーバースタイルシートを\_document に記述するやつ。

amp のスタイルシートは amp-cuctom 属性を持っていなければならないので書き換えが必要。

```tsx
import React from 'react'
import NextDocument, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps
} from 'next/document'
import { ServerStyleSheet } from 'styled-components'

type Props = {
  // eslint-disable-next-line @typescript-eslint/ban-types
  styles: Array<React.ReactElement<{}>>
}

class MyDocument extends NextDocument<Props> {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await NextDocument.getInitialProps(ctx)
      const initialStyles =
        initialProps.styles instanceof Array ? initialProps.styles : []
      // ここでガッチャンこ！！！
      const styles = [...initialStyles, ...sheet.getStyleElement()]
      return {
        ...initialProps,
        styles
      }
    } finally {
      sheet.seal()
    }
  }

  render(): JSX.Element {
    return (
      <Html lang="ja" prefix="og: http://ogp.me/ns#">
        <Head />
        <body>
          <noscript>You need to enable JavaScript to run this app.</noscript>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
```

これで styles を自動的に amp-custom 属性をつけて一個のスタイルタグで出力してくれる。賢い…

## Render 部分

いやーここがまじでめんどい。

特に amp-img。

width と height でアス比固定しなきゃいけないんだよね。

とりあえず amp かどうかは以下のフックで判断できる。

```tsx
import { useAmp } from 'next/amp'

// ampの場合はtrue
const isAmp = useAmp()
```

レンダラーには amp の場合は amp-img を出すように条件分岐させる。

てかまあ amp-img に限らず全部。

amp-html の型定義めんどかったので react-amphtml 使ったけどイマイチなので本当は amp.d.ts とか作って書いた方がいい。

```tsx
// components/Post.tsx

// 略
import * as Amp from 'react-amphtml'

if (isAmp) {
  child = isImage ? (
    <div className="fixed-container">
      <Amp.AmpImg
        specName="default"
        key={!useWrapper ? id : undefined}
        layout="responsive"
        width="400"
        height="400"
        src={`/api/asset?assetUrl=${encodeURIComponent(
          display_source
        )}&blockId=${id}`}
      />
    </div>
  ) : (
    <div className="fixed-container">
      <Amp.AmpVideo
        specName="default"
        key={!useWrapper ? id : undefined}
        src={`/api/asset?assetUrl=${encodeURIComponent(
          display_source
        )}&blockId=${id}`}
        controls={!isImage}
        alt={`An ${isImage ? 'image' : 'video'} from Notion`}
        loop={!isImage}
        muted={!isImage}
        autoPlay={!isImage}
        // style={childStyle}
        width="400"
        height="400"
      />
    </div>
  )
}
```

いや大変すぎる。もしかしたら数ページバリデーション通ってないかも笑笑

とりあえず画像が多いきんぐの記事は OK 頂けたわね！

<img
  width={2536}
  height={1262}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620382979/titanicrising.jp/about-amp/_2020-08-22_23.27.17_bugeon.png`}
/>

プレビューはこんな感じ！

<img
  width={690}
  height={370}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620382979/titanicrising.jp/about-amp/_2020-08-22_23.27.27_xzeh9m.png`}
/>

## 好きなアンプは？

JC-120。操作簡単だから。

以上。

<img
  width={399}
  height={330}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620382979/titanicrising.jp/about-amp/jc_120_front_main_drxmlu.jpg`}
/>

[Roland - JC-120 | Jazz Chorus](https://www.roland.com/jp/products/JC-120/)


アンプの話


最近、Zenn というサイトがエンジニア界隈で話題になっている。

[!!BOOKMARK!!Zenn ｜プログラマーのための情報共有コミュニティ](https://zenn.dev/)

日本のエンジニアがよく使う情報サイトだと[Qiita](https://qiita.com/)とかがメジャーだと思うんだけど、Zenn は Qiita とは少し違って、記事と本のどちらを書くか選べる。

本に関しては値段を設定して販売できたり、記事を読んで良いと思ったらそのユーザーに対して投げ銭形式でのサポートも行えるようになっている。

Note のように情報に対して対価が支払える仕組みはすごい良いと思うし、技術系界隈に必要とされてきたサービスだと思う。

何より UX がすごい考慮されている。当たり前のように SPA で作られている（Next.js 使っているらしい！🤗）し、デザインもすごい良い。自分は ROM 専なので記事を書いたりはしないけどエディタも Note とかと違ってマークダウンで書けるらしい。なんか抜かりない感じがすごい。

さらに驚きなのが個人で作っているらしくてデザイン、バックエンド、フロントエンド全部一人でやっているらしい。作者の[Catnose さん](https://twitter.com/catnose99?s=20)はサルワカとか Resume とか他にもすごい良いサービスを作っててすげえ…しかもはや出てこない。なんか投資を募っていたけどこの調子だったら興味ある出資者はたくさんいるのではなかろうか。（もはや寄付だけでいけそうなレベル）

[!!BOOKMARK!!Zenn needs help](https://catnose99.com/zenn-needs-help/)

コンテンツが充実して SEO 周りが強くなってきたら日本の技術情報系サイトで天下取れるのでは！？

もう感謝と尊敬マックスという感じです…🙇‍♂️


Zennというサービスについて


フジロックの配信、2 日目の LCD Soundsystem を一番楽しみにしてたんだけどやっぱカッコ良かったですな。

おそらく今まで自分がみたフジロックのライブの中でもダントツで良かった。

LCD Soundsystem の一組前からホワイトステージ入りして前の方取ろうかなと思って早めにホワイトステージ行って、その一組前がオザケンだったんだけど信じられないくらい混んでて、ホワイトステージのトイレの上からライブみてる人までいてビビった記憶。

配信されたのは Daft Punk Is Playing At My House でしたな。

いやいい曲というか LCD の曲の中ではキャッチーな方なんだけどもっといい曲はたくさんあって。

その中でも自分が推したいのは All My Friends で、再結成してからは毎回ライブでラストにやっている曲なんだけど本当にすごい曲だと思う。

とりあえずこの 2016 年のグラストンベリーのライブ映像に全てが詰まっている。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/ObvLGOE-_Qk"
/>

まあ曲については書くと長くなるから書かないけど本当に好き。特にラスト。そこまで長いんだけどね…笑

最近流行りの The 1975 の 1st に入っている Sex という曲もこの曲をベースに作られている。歌い出しとか一緒だしね笑。

[!!BOOKMARK!!ザ・1975 のマット・ヒーリー、これまでで一番のお気に入りの楽曲を明かす | NME Japan](https://nme-jp.com/news/29653/)

最初ライブ映像みたときはそのピアノは打ち込みじゃないのね！！って驚いた。

ちなみにさっきのフジロックのライブ、僕はテンション上がりすぎて携帯を落として水没させて友達と連絡が取れなくなってしまいました。

## グラストンベリー 2016 といえば

チャーチズのローレンが白い衣装で登場してあまりの可愛さに話題になってましたが LCD Soundsystem のジェームスマーフィーもそれに対抗して白衣装だったのかな？？

[!!BOOKMARK!!BBC Music - Glastonbury, 2016 - CHVRCHΞS in Pictures](https://www.bbc.co.uk/programmes/articles/m1LCMVxxzXmGZt7nLZ8KWR/chvrch-s-in-pictures)

てかグラストンベリー 2016 のラインナップえぐ過ぎ。ぼくのかんがえたさいきょうのらいんなっぷ状態。

これ ↓ タイムテーブルなんだけどもう逆に困るわね。

[!!BOOKMARK!!](https://www.glastonburyfestivals.co.uk/line-up/line-up-2016/)

2 日目とかアデルとニューオーダーとジェイムスブレイクと M83 がタイムテーブル被っちゃってるんだけどもうこれどれみても後悔するだろ…

LCD Soundsystem は Coldplay の真裏。本当に贅沢ですな…

まじで日本にまた来て欲しい。

ジェームスマーフィーも日本気に入ってくれたみたいだし！

という話でした。

以上。


All My Friends


import { MusicLink } from 'src/components/MusicLink'

今年ももう大詰め！

そこまでライブも行かなかったし色々忙しかったので例年ほど新譜も追えてなかったけどせっかくブログがあるので…

それでは 10 位から！

## 10. The 1975 - Notes On A Conditional Form

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383428/titanicrising.jp/best-album-2020/noacf_eapxwz.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/0o5xjCboti8vXhdoUG9LYi?si=I6yWzXl0TfGRJJaJLF42UA'
  }
  appleMusicSrc={
    'https://music.apple.com/jp/album/notes-on-a-conditional-form/1473599936'
  }
  youtubeSrc={
    'https://youtube.com/playlist?list=OLAK5uy_lGgAKSKiAp1df3seyJhGzfXaoHVX5QjbU'
  }
/>

スパソニで来日予定だった 1975 の 4 枚目。前作の評価が異常に高く期待値もかなり高かったがメディア評価は賛否両論な結果に。

個人的には前作よりハマる曲多くてかなり好きだが 22 曲は少し多かったかな…？

Tonight とか本当に好きだし Frail State Of Mind は 2020 年に自分が Spotify で一番聴いた曲だったらしい。

Too Shy みたいな古参ファンが好きな王道ポップロックも入っているが意欲的なサウンドの曲も多く収録されていて、(主にジョージが作ったやつ)曲数は多いが音的には飽きない。

フィーチャー曲もすごい良かった。特にフィービーが参加した 2 曲。

今や現代ロックを牽引する存在になってしまったが気にせずやりたいように曲作り続けてほしい。

あと是非来年のスパソニに…！

## 9. Taylor Swift - folklore

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383428/titanicrising.jp/best-album-2020/folklore_men5vm.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/0xS0iOtxQRoJvfcFcJA5Gv?si=KltsVbSXTt2wdGbFJcpD0A'
  }
  appleMusicSrc={'https://music.apple.com/jp/album/folklore/1524801260'}
  youtubeSrc={
    'https://youtube.com/playlist?list=OLAK5uy_nWgO-2lNMsx90439Yx0xTWCGIktUc74e8'
  }
/>

テイラースウィフトがサプライズでリリースした 8th アルバム。
テイラーは前作も前々作もあまり好きではなかったので聴いていなかったが今作かなり好きだった。

ナショナルのアーロンデスナーやボンイヴェールが参加していて、自分みたいなインディーロックファンからすると 🤤 案件な布陣。

ポップスのメロディーのキャッチーさとカントリーの暖かさとインディーロックのリズミカルな曲展開を全ていいとこ取りしたみたいな感じで、聴きやすいのに重みがある独特なサウンド。ロックファンの心もがっちり掴んだ素晴らしいアルバム。

これだけでお腹おっぱいなのにまたサプライズで 9th の「evermore」もリリースされてしまった笑

このアルバムのツアーやってほしいけど難しいかな…？

## 8. 冥丁 - 古風

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383428/titanicrising.jp/best-album-2020/kofu_zamucy.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/6up103j3F99vuOxqx9ye83?si=D5Xf_7nvT2yB8MRv4B3dxg'
  }
  appleMusicSrc={
    'https://music.apple.com/jp/album/%E5%8F%A4%E9%A2%A8/1530925057'
  }
  youtubeSrc={
    'https://youtube.com/playlist?list=OLAK5uy_kJvunp1I2IxIDOwVlqkjaAmjPPSA-99aE'
  }
/>

広島県出身の冥丁さんのおそらく 3 作目？かな。
民謡等の古い日本のサウンドピースが心地よくミックスされていて幻想的な音を生み出している。

全体的にアンビエント寄りのサウンドだけど「花魁 Ⅱ」みたいな聴きやすい曲もあって緩急も絶妙。

今年の FRUE にも出ていて引きがかなり強かったけど結局不参加。チケット持ってたし行けばよかったなあ…

こちらも是非ライブで聴いてみたいです。

## 7. clipping. - Visions of Bodies Being Burned

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383429/titanicrising.jp/best-album-2020/visions-of-bodies_xsbaty.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/0b1q9se93BEqBl3kiltn33?si=JoJJIK6BRq6g2CBQo2Gs9A'
  }
  appleMusicSrc={
    'https://music.apple.com/us/album/visions-of-bodies-being-burned/1526395070'
  }
  youtubeSrc={
    'https://youtube.com/playlist?list=OLAK5uy_nClROyXYQZxylEhyQz8GtoDW3Jm7lSchQ'
  }
/>

猛烈に完成度の高いインダストリアル・ヒップホップアルバム。

頭 2 曲を聴いた時点で痺れた。

インダストリアルにカテゴライズされるような破壊的な激しさの中に鮮やかさがある感じのすごい不思議なサウンドがめちゃんこ魅力的。リリックもかっこいい。
てかレーベルサブポップだったんだね。

今年聴いたヒップホップ盤の中ではおそらくベスト。

## 6. Porridge Radio - Every Bad

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383429/titanicrising.jp/best-album-2020/every-bad_e07moy.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/4DN3XbB33kHTJA7HhI0RFI?si=1EHC8KGlS9SsuAWAcFzSgw'
  }
  appleMusicSrc={'https://music.apple.com/us/album/every-bad/1491371467'}
  youtubeSrc={
    'https://www.youtube.com/playlist?list=OLAK5uy_lWxIAIhr2SeBzgl7_vi-Uby0DzOaHSR3k'
  }
/>

ダナマーゴリン率いるポリッジ・レディオの 2 枚目のスタジオアルバム。

メディア評価が全体的にかなり高かったので聴いてみたらなるほどという感じ。

サウンド的にはかなり激しくて緩急もすごいんだけど聴き心地は全然よくてめちゃくちゃ好き。ギターの音とか普通に最高。なんか分かりやすいところで言うとピクシーズやニルヴァーナみを感じた。

歌詞が全体的に強いんだけど分かりやすくて程よく皮肉っぽい。ダナのヴォーカルの表現力もすごい高い。

ロック付きの自分としてはこういうアルバムはたまらん。

## 5. The Flaming Lips - American Head

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383428/titanicrising.jp/best-album-2020/american-head_h1kdo9.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/4H8NX3ovAZdY2iJmwSNqlw?si=WI8kcy7CSniwS12PKEBP3g'
  }
  appleMusicSrc={'https://music.apple.com/us/album/american-head/1516243970'}
  youtubeSrc={
    'https://www.youtube.com/playlist?list=OLAK5uy_mBogL9JXdFa6z_vs6-ikPs1C55DmJfsCA'
  }
/>

Flaming Lips というとヨシミや Soft Bulletin を真っ先に思い浮かべるが、今作もそれに負けないくらい名盤だと思う。

全体的に漂うメランコリックな雰囲気をウェインコインのヴォーカルが増長させていて、油断すると涙が溢れてくるような切なくも温かいアルバム。

彼らの持つ独特なサイケデリックはそのままで、楽曲の美しさが倍増したような感じ。先行でリリースされた「Flowers of Neptune 6」や「God and the Policeman」を始め、いい曲しか入っていないので美しいサイケロックが聴きたい人は必聴。

## 4. Fontaines D.C. - A Hero's Death

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383429/titanicrising.jp/best-album-2020/herosdeath_d0tis4.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/1TG1jA82COlOCK63DjmiT3?si=wSho3p1wRda_JuXL8xYVQw'
  }
  appleMusicSrc={'https://music.apple.com/us/album/a-heros-death/1510024907'}
  youtubeSrc={
    'https://youtube.com/playlist?list=OLAK5uy_nGZVDEsNI_3DfnCWteRyrA9YaaurQcSnE'
  }
/>

ダブリンのポストパンクバンドの 2nd。1st の頃からすごい好きだったけど今作の完成度は異常。最近のイギリスのポストパンクは Shame やアイドルズみたいなかなりいいバンドが沢山出てきていたけど Fontains D.C.は今作で頭一つ抜けた感がある。

前作よりも雰囲気がかなり一貫されていて、「I Don't Belong」や「A Hero's Death」のサビで同じフレーズを連呼するヴォーカルスタイルも物凄いハマっている。

ギターの音とリフもすごい良い。先行シングルの「Televised Mind」のギターの音とかすごい好き。

ラスト曲の「No」とかもポストパンクアルバムの締めのトラックとしてはお手本のような完成度だしまさに死角なし。今年めちゃめちゃ聴いた 1 枚。

## 3. SAULT - Untitled (Black Is)

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383429/titanicrising.jp/best-album-2020/visions-of-bodies_xsbaty.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/0GPmuVuCdC5hCsiuy1wXle?si=H6tRb30gT3KMmYdnNRz8zQ'
  }
  appleMusicSrc={
    'https://music.apple.com/jp/album/untitled-black-is/1518680087'
  }
  youtubeSrc={
    'https://youtube.com/playlist?list=OLAK5uy_mPQ1zX6FZ2noGfGMWXN9cnVkoqD18R-OM'
  }
/>

ロンドンの正体不明のアーティストによる「5」、「7」に続くスタジオアルバム。テーマは BLM。

あんまソウルとかは普段聴かないけどこれは本当に良いと思った。今年聴いたアルバムの中でも衝撃度は随一。ソウルっぽさもありつつポストパンクのエッセンスもめちゃめちゃあって幅広い層が楽しんで聴けるはず。ただしメッセージ性はかなりつよし。

楽曲のメッセージ性の強さにメロディーの良さとサウンドプロダクションの良さがしっかりと伴っている。女性ヴォーカルはおそらく同レーベルの Cleo Sol かな？

歌詞も全体的に分かりやすいワードを選んでいて、正に我々のような非英語圏の人々にも BLM の運動を広めようという意図が伝わってくる。

まあ仮にテーマへの関心がゼロだったとしても楽しめるくらい楽曲が強い。2020 年ならではの名盤。

## 2. The Microphones - Microphones in 2020

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383428/titanicrising.jp/best-album-2020/mf2020_qrmmf2.jpg`}
  youtubeSrc={'https://youtu.be/A7BkabF31ak'}
/>

フィルエルヴラムが The Microphones 名義でリリースした超大作。アルバムというよりは 44 分に及ぶ長い曲。

正直フィルエルヴラムはマウントイアリの方が全然好きで Microphones 名義の作品はあまり聴けていなかった。マウントイアリ名義でリリースした「A Crow Looked at Me」は本当に凄いアルバムだったしあまり期待せずに聴いたんだけど結果から言えば最高。

イントロのアコギの音から一気に引き込まれた。シンプルなんだけど物凄い深みがあって、単調なはずなんだけど単調に聴こえない。歌詞の内容はフィル本人の人生を振り返るみたいな内容で、歌っている内容に合わせて演奏される楽器も変化する。

使っているコードもほとんど変化しないしメロディーに大きな変化があるわけでもなく淡々と 44 分間ノンストップで演奏されていくんだけどこれが凄い不思議な感覚で、何か本を読んでるみたいな感覚になる。あと歌詞は本当にかっこいい。

アコギのフレーズはルーパーでも使ってるのかと思いきやしっかり弾いているらしい。凄い。

おそらく自分が好きなタイプの音楽ドンピシャだし改めてフィルエルヴラムの才能を思い知らされた 1 枚（というか 1 曲）。

## 1. Phoebe Bridgers - Punisher

<MusicLink
  imageSrc={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383428/titanicrising.jp/best-album-2020/punisher_gdoobz.jpg`}
  spotifySrc={
    'https://open.spotify.com/album/2xECuqnvvmVktV7UO8Dd3s?si=UirgvaNXQo6o1Zhv5fiGOg'
  }
  appleMusicSrc={'https://music.apple.com/us/album/punisher/1504699857'}
  youtubeSrc={
    'https://youtube.com/playlist?list=OLAK5uy_nCKbA26LZEUYWMJ8Ig11r1uDalG3zvCTo'
  }
/>

まあベタだけどこれが一番よかった。

先行シングルの時点で「Kyoto」とか「Garden Song」とか良い曲が揃っていたので期待値も当然高かったけどアルバムは期待の 5000 倍くらいよかった。

フィービーの作品はメロディーが良いのはもちろんなんだけど何より歌詞が本当に凄い。うまく言葉で表現できないけど確実に楽曲の魅力は歌詞から来ていると思う。

ちなみに自分は前作収録の「Funeral」の歌詞が一番好き。

今作は前作よりもメロディーも音も全然良くなっていてまだ少し荒削りっぽさもありつつ名盤の雰囲気も持っていて、凄い好きだった。

本当はナショナルの前座で来日予定だったんだよね…絶対来てよね！


2020年好きだったアルバムTOP10


映画館でブックスマート観てきた。

これ ↓

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Uhd3lo_IWJc"
/>

## 感想

ネタバレなしで。

最高。めちゃ面白かった。てか好き。

コメディとシリアスのバランスがめちゃんこちょうど良くて心地よく観れた。

ジャンバジュースのくだりクソ笑った。

あと BGM というかサントラの選曲が最高だった。

DJ Shadow の流れるタイミングとか 100 点。

[!!BOOKMARK!!Booksmart Official Playlist](https://open.spotify.com/playlist/37i9dQZF1DX45IaRNSIdzv?si=eMTlnjrzR6qD1RO9EiPvSA)

## oh baby

中終盤あたりで LCD Soundsystem の oh baby が流れるシーンがあったんだけどそこもすごい良かった。

最近 LCD Soundsystem がバーチャルフェスの影響もあって自分の中で再びブームなのでかかった瞬間はテンション上がったなあ。

ちなみに oh baby のミュージックビデオまじで心にくるというか感動するのでみんな観て欲しい。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/5gIhrPGyu6U"
/>

まあとにかくブックスマート面白かった！


ブックスマート


いや、藤くん結婚おめでとうございます。

おめでたいニュースとともにバンプを再びちゃんと聴き始めた。

## Viva La Vida？

まあ、自分よりバンプ好きな人なんて死ぬほどいるのでおっかなくて多くは語らないけど一時期バンプがコールドプレイを意識したサウンドやプロモーションに寄ってて物議を醸してましたね。

2014 年のアルバムの「RAY」とそのツアーの WILLPOLIS シリーズからかな？[ザイロバンド](http://www.vainqueur-corp.com/xylobands/)をライブに導入したりして客席がわちゃわちゃ光ってたわね。

衣装とかも Viva La Vida ツアーのクリスの衣装に似てるし笑

アルバムのタイトルトラックも初音ミクとコラボしたり M ステに出たりとバンドの殻を破りに行ってる感じも印象的だった。

ちなみに ray、自分はめちゃんこ好き。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/whdFuBF1EA8"
  allowFullScreen
/>

WILLPOLIS のライブも行ったけど ray 出たばかりなのに多分一番盛り上がってた。ノリやすいしね。

## A Sky Full Of Stars？

RAY の次に出たのが Butterflies かな。

パレードとか入ってるやつよね。アルバムのリード曲の Butterfly なんだけど、これはちょっとやり過ぎた感あるよね。

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/whdFuBF1EA8"
  allowFullScreen
/>

明らかにアヴィーチーがプロデュースしてそうなサウンドで流石に笑っちゃう。

ちなみに自分はめちゃくちゃ好きです。ライブで紙吹雪舞っててこれがコールドプレイのライブか〜ってなった記憶。

バンプのライブはザイロバンドがそのまま記念でもらえて、腕にいっぱい巻いてる人＝経験値高めみたいな風潮ある。俺は 3 つしか持ってない…

ちなみにそのあとコールドプレイのライブも行ったんだけどその時はライブ後にザイロバンド回収されてしまった。世界的バンドのクセにケチですな。

## Smile

バンプ、好きな曲いくらでもあるんだけど中でも一番好きなのはバンドバージョンの方の Smile。

震災時にシングルとして弾き語りバージョンがリリースされた後にゼロのカップリングとしてバンドバージョンが収録されたんだけどこれが本当に好き。

長いんだけど…

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/CIaM_rPeyK0"
  allowFullScreen
/>

後に RAY にも収録されて WILLPOLIS でも披露されたけど流石に感動したな。

WILLPOLIS2014 のファイナルの東京ドーム公演ではスクリーンに蜷川実花の植物の VJ が映し出されて演奏してたけどそれもすごいよかった。

昔の曲も全然好きだけど自分はコスモノートからの 3 枚が一番好きかなー

ミーハーですまんね。


バンプ、いい


ドメインを[titanicrising.work](https://titanicrising.work)から[titanicrising.jp](https://titanicrising.jp)に変更しました。

まあつまり.jp を買いました。

結構適当に決めて取ったドメインだったんだけど割と気に入ったので。

それだけ…

最近更新が滞ってるというか書いた記事がイマイチすぎて全然出せないな…


ブログのドメイン変えたよ！


今回は引き分けでしたね！

まあ色々と感想はあるけど全体的にすごい高度な試合でした。

スタメンでフィルミーノとジョタ同時起用を目の当たりにした時はかなりしんどい試合になるかなと思ったけどシティの守備陣がしっかり集中しててよかった。

特にカンセロすごい良かったよ。もう左サイドバックは彼で決まりなのでは。イケメンだし。

途中デブライネが PK 失敗してしまったのは残念だったけどやはり相手 GK がアリソンだとそれだけのプレッシャーがかかるのかなと。リヴァプールはファンダイクとファビーニョいなくてあんな堅いの普通に凄い。

シティは今回起用した 4 バックがしばらくは守備陣のベストメンバーになりそう。メンディも好きだけどもう彼は広報担当という事で…

攻撃陣はやはりマフレズとアグエロいないのは大きかった。でもまあジェズスが頑張ってくれたからよし。ジェズスの眉毛相変わらず可愛かった。

てか去年だったか一昨年だったかのリーグ戦でもマフレズが PK 決められずにドローだったのを思い出したので次 PK 取れたらちゃんと決めて欲しいですね…

以上！


シティvsリヴァプール


結果はシティ 1-3 リヨン

いやー負けましたね。

正直去年のグループステージでリヨンに一回も勝てなかった事もあって組み合わせ決まった瞬間からかなりビビってた。

デブライネの同点ゴール決まった時はいけるかな？？って思ったんだけどリヨン素晴らしく良かったしチャンスをものの見事に決められてしまいましたな。

リヨンの 8 番のアワールうま過ぎてビビった。

シティはかつて CL でモナコのベルナルドにけちょんけちょんにやられ、その直後の移籍市場でベルナルドを金積んでぶっこぬいてきた前科があるので今回もやってくれんかな…笑笑

結果としてこれがシルバのラストマッチになったけどシルバがいる間に CL 優勝は叶わなかった。切ない。

来シーズンに向けて補強も進んでるみたいだし来年は頼むよシティ！

これは 3 年前にマンチェスター行った時に撮ったエティハド・スタジアム。

<img
  width={1536}
  height={2048}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383430/titanicrising.jp/city-lyon/D2CBC8C1-AEDB-40D5-8406-C2D86253EEC4_xcv9as.jpg`}
  alt={`etihad`}
/>

そろそろイギリス行きたい。

シティの試合も現地観戦したいね。


リヨン戦


前回の更新から大分開いてしまった…  
社内の業務がまあまあ忙しかったのであまりブログを更新する時間が取れませんでした。

スムーズのサイトには実はメディアコンテンツが内蔵されていて、その改善の一環でやった


Contentfulでカスタムエディタを使いたい！


ロンドン発祥のコーヒーチェーンであるコスタコーヒーが日本に上陸&期間限定で銀座にオープンしたらしいのでこれはマスト案件だと思い行ってきた。

コスタコーヒー、知っているチェーンの中では一番味が好きだし飲むとイギリス！って感じがするから好き。

あと全然関係ないけどセブンイレブンの生チョコアイス美味しくない！？

## ザギン

コスタコーヒーが期間限定で展開されているという銀座ロフトにきた。

銀座とか久々にきたわ…

<img
  width={2016}
  height={1512}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383953/titanicrising.jp/costa-coffee/3579206E-5D4A-440B-A69F-0FC7E799999A_uexcmg.jpg`}
/>

自分はソイキャラメルラテを注文。

スタバとかと比べると飲みやすい系の味のコーヒー。まあスタバは毎回ブラックの豆が変わってたりするからあんま指標としては適切じゃないんだけど。

まあ美味しい。それ以上の感想がない。本当はチャイが一番好きだったからチャイを飲みたかったんだけどなかった。ガチオープンが待たれますな。

<img
  width={1512}
  height={2016}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383430/titanicrising.jp/costa-coffee/61C660A9-DCB2-4316-9776-C96BEC38DFFC_eb4gmr.jpg`}
/>

## コスタコーヒーといえば

あれは 3 年前にイギリスに友達と行った時の事…

スコットランドからリヴァプールに移動し、その後ロンドンに 3 日くらい滞在して帰る流れになっていた。（ゴーゴーグラスゴー聖地巡礼）

リヴァプールのホテルチェックアウトする前日に気づいてしまった。

「ロンドンのエアビのチェックイン明後日じゃね？」

そう。

宿無しの一日が生まれてしまったのである。

とりあえずリヴァプールのホテルをチェックアウトし暗い気持ちでロンドンに移動。

とりあえずロンドンについた後ヒースロー空港に向かい、一夜を明かせそうな場所を探す。

そして辿り着いたのが察しの通りコスタコーヒー。

<img
  width={3024}
  height={2774}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383430/titanicrising.jp/costa-coffee/IMG_0973_iik8sg.jpg`}
/>

空港は寒かったけどチャイが暖かかった…

〜完〜


コスタコーヒー

ブログを作ったはいいが書くことがないのでこの話題。技術ブログではないのでご容赦。

成果物？このブログそのものです。

## Notion Blog とは？

Notion を Headless CMS にして NextJS で SSR するやつ。

Notion については書かないけど Notion はかなりいい。

## Notion セットアップ

Notion で新しいページ作ってこういうインラインテーブルを作るだけ。以上。インラインであることが重要。

<img
  width={2982}
  height={1242}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383431/titanicrising.jp/created-notion-blog/_2020-08-11_0.00.48_umbj5d.png`}
  alt="_2020-08-11_0.00.48.png"
/>

Notion 使ってるとインラインじゃなくて普通のテーブルでつくっちゃって後で気付くとかよくアルゥー

エディタはもう普通に Notion なので最高に使いやすい

ここは Contentful とか Strapi とかよりベター。

<img
  width={2538}
  height={1674}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383430/titanicrising.jp/created-notion-blog/_2020-08-11_0.05.19_te7gcq.png`}
  alt="_2020-08-11_0.05.19.png"
/>

## Next.js セットアップ

[Notion Blog のリポジトリ](https://github.com/ijjk/notion-blog)にいけばワンパンで Vercel にデプロイしてスタート出来るけどここはフロントエンドエンジニアのプライドが許さない。

リポジトリをクローンしてチュートリアル通りに環境変数を入れて yarn dev だ！

環境変数に Notion のトークンを入れてローカルで無事投稿見れた。



こりゃいいなと思ってコードみてみるとかなり複雑。

```tsx
// src/pages/blog/[slug].tsx

import Link from 'next/link'
import fetch from 'node-fetch'
import { useRouter } from 'next/router'
import Header from 'src/components/shared/header'
import Heading from 'src/components/shared/heading'
import components from 'src/components/shared/dynamic'
import ReactJSXParser from '@zeit/react-jsx-parser'
import blogStyles from '../../styles/blog.module.css'
import { textBlock } from '../../lib/notion/renderers'
import getPageData from '../../lib/notion/getPageData'
import React, { CSSProperties, useEffect } from 'react'
import getBlogIndex from '../../lib/notion/getBlogIndex'
import getNotionUsers from '../../lib/notion/getNotionUsers'
import { getBlogLink, getDateStr } from '../../lib/blog-helpers'

// Get the data for each blog post
export async function getStaticProps({ params: { slug }, preview }) {
  // load the postsTable so that we can get the page's ID
  const postsTable = await getBlogIndex()
  const post = postsTable[slug]

  // if we can't find the post or if it is unpublished and
  // viewed without preview mode then we just redirect to /blog
  if (!post || (post.Published !== 'Yes' && !preview)) {
    console.log(`Failed to find post for slug: ${slug}`)
    return {
      props: {
        redirect: '/blog',
        preview: false
      },
      unstable_revalidate: 5
    }
  }
  const postData = await getPageData(post.id)
  post.content = postData.blocks

  for (let i = 0; i < postData.blocks.length; i++) {
    const { value } = postData.blocks[i]
    const { type, properties } = value
    if (type == 'tweet') {
      const src = properties.source[0][0]
      // parse id from https://twitter.com/_ijjk/status/TWEET_ID format
      const tweetId = src.split('/')[5].split('?')[0]
      if (!tweetId) continue

      try {
        const res = await fetch(
          `https://api.twitter.com/1/statuses/oembed.json?id=${tweetId}`
        )
        const json = await res.json()
        properties.html = json.html.split('<script')[0]
        post.hasTweet = true
      } catch (_) {
        console.log(`Failed to get tweet embed for ${src}`)
      }
    }
  }

  const { users } = await getNotionUsers(post.Authors || [])
  post.Authors = Object.keys(users).map((id) => users[id].full_name)

  return {
    props: {
      post,
      preview: preview || false
    },
    unstable_revalidate: 10
  }
}

// Return our list of blog posts to prerender
export async function getStaticPaths() {
  const postsTable = await getBlogIndex()
  // we fallback for any unpublished posts to save build time
  // for actually published ones
  return {
    paths: Object.keys(postsTable)
      .filter((post) => postsTable[post].Published === 'Yes')
      .map((slug) => getBlogLink(slug)),
    fallback: true
  }
}

const listTypes = new Set(['bulleted_list', 'numbered_list'])

const RenderPost = ({ post, redirect, preview }) => {
  const router = useRouter()

  let listTagName: string | null = null
  let listLastId: string | null = null
  let listMap: {
    [id: string]: {
      key: string
      isNested?: boolean
      nested: string[]
      children: React.ReactFragment
    }
  } = {}

  useEffect(() => {
    const twitterSrc = 'https://platform.twitter.com/widgets.js'
    // make sure to initialize any new widgets loading on
    // client navigation
    if (post && post.hasTweet) {
      if ((window as any)?.twttr?.widgets) {
        ;(window as any).twttr.widgets.load()
      } else if (!document.querySelector(`script[src="${twitterSrc}"]`)) {
        const script = document.createElement('script')
        script.async = true
        script.src = twitterSrc
        document.querySelector('body').appendChild(script)
      }
    }
  }, [])

  useEffect(() => {
    if (redirect && !post) {
      router.replace(redirect)
    }
  }, [redirect, post])

  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (router.isFallback) {
    return <div>Loading...</div>
  }

  // if you don't have a post at this point, and are not
  // loading one from fallback then  redirect back to the index
  if (!post) {
    return (
      <div className={blogStyles.post}>
        <p>
          Woops! didn't find that post, redirecting you back to the blog index
        </p>
      </div>
    )
  }

  return <>// ここにクソ長いviewが書かれている</>
}

export default RenderPost
```

一旦はあまり触らないとして投稿の型定義がいくらなんでも緩すぎるのと /pages ディレクトリのファイルに全部書かれすぎている。

自分は CSS in JS が好みだが pages 配下のファイルにスタイル書くのはなんか気が引ける&モジュール分割クソ野郎なので 200 行以上のファイルは直視出来ず Post 用のコンポーネントを切ることにした。

まずは Post の型定義

```tsx
// types/blog.ts

type PostContentValue = {
  alive: boolean
  created_by_id: string
  created_by_table: string
  created_time: number
  id: string
  last_edited_by_id: string
  last_edited_by_table: string
  last_edited_time: number
  parent_id: string
  parent_table: string
  properties: {
    title: string[]
    language?: string[][]
    html?: string
  }
  shard_id: number
  space_id: string
  type: string
  version: number
  format?: {
    block_width?: number
    block_height?: number
    display_source?: string
    block_aspect_ratio?: number
    page_icon?: string
  }
  file_ids: string[]
}

type PostContent = {
  role: string
  value: PostContentValue
}

export type Post = {
  id: string
  Authors: string[]
  Slug: string
  Published: 'Yes' | 'No'
  Date: number
  Page: string
  preview: unknown[][]
  content: PostContent[]
  hasTweet: boolean
}

export type Posts = Post[]
```

Hook と View をコンポーネント層に移して let 宣言根絶（window の global 宣言とかは後回し）

```tsx
// src/components/Post.tsx

import React, { useEffect, CSSProperties } from 'react'
import components from 'src/components/shared/dynamic'
import { useRouter } from 'next/router'
import Header from 'src/components/shared/header'
import Link from 'next/link'
import { getDateStr } from 'src/lib/blog-helpers'
import Heading from 'src/components/shared/heading'
import ReactJSXParser from '@zeit/react-jsx-parser'
import { textBlock } from 'src/lib/notion/renderers'
import { Post as PostType } from 'types/blog'

type Props = {
  post: PostType
  redirect: string
  preview: boolean
}

interface IListItems {
  listTagName: string | null
  listLastId: string | null
  listMap: {
    [id: string]: {
      key: string
      isNested?: boolean
      nested: string[]
      children: React.ReactFragment
    }
  }
}

const Post: React.FCX<Props> = (props) => {
  const { post, redirect, preview, className } = props
  const listTypes = new Set(['bulleted_list', 'numbered_list'])
  const router = useRouter()
  const listItems: IListItems = {
    listTagName: null,
    listLastId: null,
    listMap: {}
  }

  useEffect(() => {
    const twitterSrc = 'https://platform.twitter.com/widgets.js'
    if (post && post.hasTweet) {
      if ((window as any)?.twttr?.widgets) {
        ;(window as any).twttr.widgets.load()
      } else if (!document.querySelector(`script[src="${twitterSrc}"]`)) {
        const script = document.createElement('script')
        script.async = true
        script.src = twitterSrc
        document.querySelector('body').appendChild(script)
      }
    }
  }, [post])

  useEffect(() => {
    if (redirect && !post) {
      router.replace(redirect)
    }
  }, [redirect, post, router])

  if (router.isFallback) {
    return <div>Loading...</div>
  }

  if (!post) {
    return (
      <div className={className}>
        <p>
          Woops! did not find that post, redirecting you back to the blog index
        </p>
      </div>
    )
  }

  return <>// view</>
}

export default Post
```

でこのコンポーネントを/pages 配下の親コンポーネントから呼んであげるとビューティー（だと思う…）

後自分は見た目が好みだからコンポーネントも const アロー関数で定義するけど function の方が良いみたいなのと default export は pages 配下意外とかでは使わない方がいいらしい。

```tsx
// src/pages/blog/[slug].tsx

import React from 'react'
import fetch from 'node-fetch'
import getPageData from 'src/lib/notion/getPageData'
import getBlogIndex from 'src/lib/notion/getBlogIndex'
import getNotionUsers from 'src/lib/notion/getNotionUsers'
import { getBlogLink } from 'src/lib/blog-helpers'
import Layout from 'src/components/layouts/Layout'
import Post from 'src/components/pages/Blog/Post'
import { GetStaticProps, NextPage, GetStaticPaths } from 'next'
import { Post as PostType } from 'types/blog'

type StaticProps = {
  post?: PostType
  redirect?: string
  preview: boolean
}

export const getStaticProps: GetStaticProps<StaticProps> = async ({
  params: { slug },
  preview
}) => {
  //　変更なし
}

export const getStaticPaths: GetStaticPaths = async () => {
  //　変更なし
}

const RenderPost: NextPage<StaticProps> = (props) => {
  return (
    <Layout>
      <Post
        post={props.post}
        preview={props.preview}
        redirect={props.redirect}
      />
    </Layout>
  )
}

export default RenderPost
```

めっちゃきれいになったけどブログの見た目なんも変わらん

デプロイ？SSR？？知りもはんなあ…

そのうちスタイリング編やるかなあ…デフォルトの CSS は消してちょっと見た目整えたけどスタイル書くのちょっとめんどくさくて怠けているしシンプルなサイトも悪くなくね？

とりあえず AMP と PWA 対応やりたいけどこのサイトをそれらに対応させる時間マジで無駄感は否めないですね

以上

Notion Blogでブログを作った


最近おすすめされたドラマをみるために FOD プレミアム契約したんだけど、UI が使いにくくて結構ストレスたまる。

これが実際の画面なんだけどなんかこのちゃっちい標準モードかフルスクリーンにするかの二択しかない。

<img
  width={1781}
  height={915}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383431/titanicrising.jp/fix-uiself/_2020-09-02_13.03.24_uhme06.png`}
/>

自分は職場でサブモニターを縦で使っているのでフルスクリーンで視聴出来ない。

となるとこの標準モード 1 択なんだけど画面がちっさくて全然快適じゃない。

こういう時は自分で直すしかないですね！

## Amino を使う

[!!BOOKMARK!!Amino: Live CSS Editor](https://chrome.google.com/webstore/detail/amino-live-css-editor/pbcpfbcibpcbfbmddogfhcijfpboeaaf)

Amino は自分でサイト毎にスタイルシートを上書きできる拡張機能。

会社のプロダクトの管理画面もこれで上書きしたりして快適に使ってます。

まずはデベロッパーツールで要素を取得していく。

#video_container という div に video 要素がラップされているようだ。

<img
  width={1426}
  height={722}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/fix-uiself/_2020-09-02_13.08.56_y9gpzc.png`}
/>

コードをみてみると width と height が決め打ちされてますね。

ここで Amino を開いて配下要素ごと important で倍の大きさを指定します。

<img
  width={974}
  height={796}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/fix-uiself/_2020-09-02_13.15.01_kahnvv.png`}
/>

いい感じにくっそでかくなったけどなんか寄ってる

<img
  width={1134}
  height={594}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383431/titanicrising.jp/fix-uiself/_2020-09-02_13.16.15_aieizt.png`}
/>

追加でビデオコンテナの Wrapper 要素である#fod_player の width を固定ではなく自動にしてあげます。

<img
  width={986}
  height={682}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383431/titanicrising.jp/fix-uiself/_2020-09-02_13.19.26_lqoxhn.png`}
/>

いい感じになりましたね。

<img
  width={3578}
  height={1880}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/fix-uiself/_2020-09-02_13.19.02_kqutsn.png`}
/>

これで問題なく画面下段に TweetDeck、上段に FOD という盤石の体勢で挑めます。

仕事中何みてんだよみたいなツッコミは無しで…

まあ今回思ったけど Netflix とか Amazon プライムとか自分が普段利用している動画系サブスクサービスの UI は流石にしっかりしてるなあ。

あと FOD の字幕の出し方全然わかんないんだけどもしかしてないの？


そのUI、自分で直せない？


import { IFrame } from 'src/components/IFrame'

ゴーストオブツシマ話題になってたから買ってみたんだけど想像以上に面白い。

単純に対馬に蒙古が攻めて来た時に神風は吹かなかったけど宇宙人みたいに強い主人公が無双して蒙古を倒す！みたいなストーリー。

ストーリーの話したけど正直ストーリーは全然面白いと思っていない。

肝はアクションなんだけど敵を日本刀でサクサク斬る爽快感が半端ない。

サムライになりたくなるレベルで気持ち良い。

そういえば弟者も実況してましたね。相変わらず良い声。

<IFrame
  width={560}
  height={315}
  src="https://www.youtube.com/embed/3ndpjcW21rA?start=13"
  frameBorder={0}
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
/>

## 弟者といえば

昔自分の高校で選ばれし 3 年生 4 人がフィリピンに飛ばされて 1 ヶ月英語をひたすら勉強するみたいな企画があった。

俺もフィリピン送りになり、4 人で共同生活するんだけどそのうちの 1 人がやたら弟者のモノマネにハマっていた。

ハマっているだけなら良いんだけどそいつはそれを四六時中やっていて、「はいどうもみなさんおはこんばんにちは弟者です！（バリトン）」が耳について離れなくなってしまった。

ついには俺らまでモノマネにハマってしまい、英語のスコアは全く伸びなかったけど弟者のモノマネをマスターし帰国した。

最近会社で披露したら「似てる！！！」って一人弟者を知っている先輩から言われたので俺のフィリピン短期留学は無駄じゃなかった。

以上！

[!!BOOKMARK!!【PS4】Ghost of Tsushima (ゴースト オブ ツシマ)](https://www.amazon.co.jp/dp/B085K45JDB/ref=cm_sw_em_r_mt_dp_oxmqFb1ZS3R86)


ゴーストオブツシマやばーい


import { Video } from 'src/components/Video'

皆さん今日も音楽レビューサイトみてますか？

僕は多分あまりみない方なんですがなぜかピッチフォークだけはチェックしてしまいます。

なんかあの文章ちょっとうざいけどクセになるんですよね。

しかしデメリットがあって、ピッチフォークはレビューの一番上にアルバムの点数がどーんと出てしまっているんですよね。

こんな感じ ↓ 点数は 10 点満点。ちなみに 10 点は 10 年に 1 回くらいのレアさ。

<img
  width={760}
  height={1384}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/gmb-pichfork/_2020-08-25_22.52.05_ntneoj.png`}
/>

なんかこう点数みちゃうとなんかその後の文章が点数のインパクトに負けちゃうというかなんというかさ…

まあ点数ありきなのでそういうもんなんだけどさ…

## 点数、いらなくね？

というわけで今回はいつもの TypeScript を使ってピッチフォークの全アルバムの点数を消す Chrome プラグインを作っていきましょう。

でもまあただ消すだけじゃつまんないので全部 10 点にしましょう。

適当にググったらちょうど良さそうなスターターあったのでこれ使っていく。

[!!BOOKMARK!!chibat/chrome-extension-typescript-starter](https://github.com/chibat/chrome-extension-typescript-starter)

本当はトグルとかつけて運用しやすくしようと思ったけどクソアプリに時間かけたくないので却下。

content_script にクソコード書き殴って終了。

本当は manifest.json にしっかり設定書いて特定サイトでのみ動くようにしなきゃだめですね…

```tsx
// src/content_script.ts

const currentLocation = window.location.href
const isPitchFork: boolean = currentLocation.includes('pitchfork')

if (isPitchFork) {
  const pitchforkScore = document.querySelector('.score')
  pitchforkScore.innerHTML = pitchforkScore && '10'
}
```

## 動けばええんや

Extension 有効にすると一応クソコードが動いているのがわかる。

<img
  width={748}
  height={1080}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/gmb-pichfork/_2020-08-26_0.59.53_n1an9d.png`}
/>

動画だとこんな感じ。

え？「一瞬マジの点数が見えちゃってる？」だって？

<Video width={296} height={640} src={`/videos/blog/m5axc-hxys1.mp4`} />

拡張機能クソなのだったら 2 分で作れて最高。

ピッチフォーク、React なんだよね。好きよ。

[Pitchfork](https://pitchfork.com/)


返してよ！私のピッチフォークの点数！


この一週間色々あり過ぎて心労がすごい。

でもリリースはやはり嬉しい！

Smooth のバージョン 1.5 がリリースされた。

引越しの初期費用分割払いできるサービスのプロダクトアップデートそんな大変なのか？って話だと思うんだけど細部までこだわると意外とアップデートするところは無限にあって。

リリースしようと思ったらバグ見つかって直してみたいなの繰り返して。

Smooth のフロント、React で書いてるんだけど自分が大好きな技術使わせてくれてすごいありがたい。まあぶっ壊れたら自分以外直せないんだけど…

ホスティングとかも全部選ばせてくれて、自分でやってる感がとにかくすごいので、リリース一発一発がかなり達成感ある。

それだけです

みんな使ってね

[!!BOOKMARK!!賃貸初期費用の分割払いで、引越しを自由に。 | 株式会社スムーズ](https://smooth.jp)

あと全然関係ないけど The xx の On Hold、最高にエモい。

<iframe
  width={560}
  height={315}
  src="https://www.youtube.com/embed/blJKoXWlqJk"
/>


本番反映ダァァ


ブログ下部に人気記事ランキングを持たせるコンポーネントを追加したが、local state の値に内容を持たせているためコンポーネントがアンマウントする度に内容を忘れてしまうというデメリットがあった。

一回読み込んだはずなのに他の記事でもう一回読み込むのは流石にアホなので State を Global で管理する事にした。

## なぜ Recoil？

使った事がなかったから。

React の Global State のライブラリで Context API と Redux はかなり慣れ親しんでいたが、Recoil は最近できたばかりなのもあってなかなか触れずにいた。

あと Facebook が出しているというのもなかなか大きい。

まあ自分は Redux 大好き人間だがたまには気分を変える意味でもね…許せ…Redux…

[!!BOOKMARK!!Recoil](https://recoiljs.org/)

## 導入していく〜

最新バージョンは標準で TypeScript に対応しているので npm install なり yarn add で追加

```tsx
yarn add recoil
```

まずは Redux の Provider と同じ要領で外側を RecoilRoot で囲む。next.js の場合は pages/\_app.tsx に置くのがいいかな。

```tsx
import React from 'react'
import Footer from 'src/components/shared/footer'
import { AppProps } from 'next/app'
import { NextPage } from 'next'
// 追加
import { RecoilRoot } from 'recoil'

const App: NextPage<AppProps> = ({ Component, pageProps }) => {
  return (
    // 追加
    <RecoilRoot>
      <Component {...pageProps} />
      <Footer />
    </RecoilRoot>
  )
}

export default App
```

これで配下で Recoil のステートにアクセスできるようになる。

## atom の作成

recoil では state の生成に atom という関数を使う。

内容はめちゃめちゃシンプル。

```tsx
// src/atoms/blog.ts
import { atom } from 'recoil'
import { TopArticles } from 'types/data/top_articles'

export type BlogState = {
  topArticles: TopArticles
}

const initialState: BlogState = {
  topArticles: null
}

export const blogState = atom({
  key: 'blog',
  default: initialState
})
```

これで定義が完了。topArticles という配列を格納した blogState というステートが定義された。

## 呼び出し

useRecoilState という Hook を使えば標準の useState と全く同じ要領で State を取り回す事ができる。

```tsx
// useTopArticles.ts
import { useEffect, useMemo } from 'react'
import { TopArticles } from 'types/data/top_articles'
// 追加
import { useRecoilState } from 'recoil'
import { blogState } from 'src/atoms/blog'

export const useTopArticles = () => {
  // 生成したStateの呼び出し
  const [blog, setblog] = useRecoilState(blogState)
  const topArticles = useMemo(() => blog.topArticles, [blog.topArticles])

  useEffect(() => {
    const getter = async () => {
      const res = await fetch('/api/analytics/top_article').catch((err) => {
        console.error(err)
        throw new Error(err)
      })
      const data: TopArticles = await res.json()
      setblog((state) => ({
        ...state,
        topArticles: data
      }))
    }

    // まだランキングが未取得だったらgetter関数を呼び出す
    if (!topArticles) {
      getter()
    }
  }, [setblog, topArticles])

  return {
    topArticles
  }
}
```

これで完成。

クッソ楽。

一回取得してしまえば内容が Recoil で作成した Global State に格納されるので 2 回目以降は取得する必要がなくなった。

いい話。

## まとめ

今回は useState 的に呼び出すやり方で試したけど他にもいろいろやり方があるらしい。

今回は非同期処理を Hooks で行ったけど Recoil の中でも出来る。

Redux のように action を書いて reducer を書いて…みたいな事をやらなくて良いのは楽だけど管理する State が大きければ大きい程 Redux を使いたくなりそう。

あと dev tools が充実してくれれば最高ですね。

以上。


Recoil使ってみた


個人的に気になったことをただ書き殴っただけのメモ

## LIFF v3 について

現在の課題

・安定性の欠如

・メンテナンスが大変

・革新的な新機能出しにくい

これらを解決するためにコア部分以外を開発者に対して公開し、開発者は LIFF のプラグインを API に沿って自由に開発するというアプローチを取ることが出来る。

サンプル

```tsx
const plugin = new Plugin()

liff.use(pligin)

liff.init({ liffId }).then(() => {
  liff.$plugin.hogehoge()
})
```

liff.use API を使用してプラグインを差込む。

見たやつを記憶を頼りに起こしただけだから合ってるかはわからん。

## LIFF の npm パッケージ化

・型がついたので使える API や使えない API、必要な値等を静的解析することができるようになった。

→ てかこれに尽きるよね。初期の CDN 読み込みオンリーの時期はまともにデバッグできないし静的解析できないしきつすぎた。

・セキュアな処理を行う部分をサーバーに、残りをフロント側に。

→SSR するフレームワークでエラー出るのいつ治るん？

## Web 指向

中国人エンジニアの方の鈍り英語むずい…

・Web と iOS と Android を並列的概念として扱いたい。

例としてはシェアターゲットピッカーが挙げられる。

LUI(LIFF UI)という LIFF チームで開発している共通の UI ライブラリもある。

→ シェアターゲットピッカー使ってねー

・Modal LIFF

<img
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/ldd-liff/_2020-11-26_15.28.41_j4vwrd.png`}
  width={1172}
  height={666}
/>

LIFF 上で動作するシンプル UI を開発中（イベントとか）

→ うーんと思ったけど Cal UI とか強いかもな

## UI Framework

前のセッションの LUI 周りのやつの続き

<img
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/ldd-liff/_2020-11-26_15.31.35_smddns.png`}
  width={1154}
  height={690}
/>

今後簡単に導入できるようにする

React とかに簡単に入れられるようにする。Material-ui みたいなインポートして簡単に dom に落とせるライブラリになるかも。

ヘッダー等、通常スタイルシートが触らないスコープの部分とかも改造できるようになる？？？？

ユーザーのプラットフォームに合わせて表示される UI が変化する。

→ これはめちゃいいね

プレーンでも使えるし React でも Vue でも超簡単に行ける。

→ 詳細わからんけど型定義を頼む…

## 感想

ワクワクする機能は特になし。

今後もメンテされていくことを LIFF 開発チームの方々に感謝しながら祈るのみ。


Line Developer Day参加した(LIFF周りまとめ)

今までブログは Notion を CMS として使ってたんだけど色々な理由で剥がすことにしました。
主要な理由としては

- そもそも Notion Blog が全然メンテされてなくて怖い
- 公式の Notion API がもうすぐ来るので Notion Blog で使う非公式 API が使えなくなりそうで怖い
- 数週間の単位で Cookie の有効期限が切れて記事が見れなくなる
- 謎にデプロイがコケまくるのでメンテがめんどくさい
- 普通に Notion 自体にドキュメント公開機能があるのにブログにする意味があまりない
- 画像アップしまくってるとすぐ Notion が課金を要求してくる

等が挙げられる。
今現状このブログも Notion Blog ではなく MDX から SSG している。  
Notion はどっかのサービスと違ってしっかりとドキュメントをマークダウンでエクスポート出来る機能があるので移行もそこまで手間じゃない。

## そもそも MDX とは

マークダウン(.md)の拡張版。拡張子は.mdx。
通常のマークダウンに加えて、中に JSX やスタイルを書く事ができる。
詳しくは以下！

[!!BOOKMARK!!](https://mdxjs.com/)

サンプルコードはこんな感じ  
これは実際の先日の記事のもの。

```planetext



---
title: "2020年好きだったアルバムTOP10"
published: true
draft: false
date: 20201213
ogp: "https://titanicrising.jp/images/ogp/best-album-2020.jpg"
tag:
  - Music
---


import { MusicLink } from 'src/components/a/MusicLink'

今年ももう大詰め！

そこまでライブも行かなかったし色々忙しかったので例年ほど新譜も追えてなかったけどせっかくブログがあるので…

それでは10位から！

## 10. The 1975 - Notes On A Conditional Form


<MusicLink
  imageSrc={require('../images/best-album-2020/noacf.jpg')}
  spotifySrc={'https://open.spotify.com/album/0o5xjCboti8vXhdoUG9LYi?si=I6yWzXl0TfGRJJaJLF42UA'}
  appleMusicSrc={'https://music.apple.com/jp/album/notes-on-a-conditional-form/1473599936'}
  youtubeSrc={'https://youtube.com/playlist?list=OLAK5uy_lGgAKSKiAp1df3seyJhGzfXaoHVX5QjbU'}
/>

スパソニで来日予定だった1975の4枚目。前作の評価が異常に高く期待値もかなり高かったがメディア評価は賛否両論な結果に。

個人的には前作よりハマる曲多くてかなり好きだが22曲は少し多かったかな…？
```

## 必要な機能

ざっくりまとめると、

- メタ情報を簡単に入れられるように（Frontmatter）
- ファイルの数だけ自動でページ生成
- AMP 対応
- 画像の最適化（next-optimized-images + next/image）
- コードのシンタックスハイライト

これらを満たすように書いていく。

## まずは MDX 対応

必要なパッケージをインストールする。

```markdown
yarn add @mdx-js/loader @next/mdx babel-loader gray-matter
```

次に.mdx ファイルを扱うために webpack の設定を弄っていく。
ここで同時に Frontmatter の設定もいれる。
まずは適当なディレクトリに webpack に噛ます loader を書いておく。

```javascript
// src/lib/loader/fm-loader.js
const matter = require('gray-matter')
const stringifyObject = require('stringify-object')

module.exports = async function (src) {
  const callback = this.async()
  const { content, data } = matter(src)
  const code = `export const frontMatter = ${stringifyObject(data)}
${content}`
  return callback(null, code)
}
```

次に webpack 側。
Next は webpack の設定も良い感じに隠蔽してくれている。実際に自分でチューニングしたい場合は nextconfig を書き換える必要がある。

```javascript
// next.config.js

// 追加
webpack(config, { webpack }) {
  config.resolve.extensions.push('.mdx')
  config.module.rules.push({
    test: /\.mdx?/,
    use: [
      'babel-loader',
      '@mdx-js/loader',
      // さっきのfm-loader
      path.join(__dirname, './src/lib/loader/fm-loader')
    ]
  })
  return config
}
```

これで.mdx ファイルを.tsx ファイル内で import 出来るようになった。

## Next.js の API 達を使用してファイルから SSG する

まずは特定のディレクトリの MDX ファイル達を読み取ってファイル名とコンテンツを返す関数をそれぞれ作成する。

```typescript
// src/lib/blog/getMarkdownPosts.ts
import path from 'path'
import fs from 'fs'
import matter from 'gray-matter'

// <root>/posts/docs/配下の.mdxファイルを指定。
const postDir = path.join(process.cwd(), 'posts/docs/')

// 全ての.mdxのファイル名の配列を返す
export const getMarkdownPostsPaths = async () => {
  const postList = fs.readdirSync(postDir).map((path) => path.split(/\.mdx/)[0])
  return postList
}

// 全ての.mdxのメタデータとコンテンツを返す
export const getMarkDownPosts = async () => {
  const pathList = fs.readdirSync(postDir)
  const contentsPromise = pathList.map(async (p) => {
    const fullPath = path.join(postDir, p)
    const filePath = fs.readFileSync(fullPath, 'utf8')
    const { data, content } = matter(filePath)
    const slug = p.split(/\.mdx/)[0]

    return {
      data,
      slug,
      content
    }
  })

  const contents = await Promise.all(contentsPromise)

  return contents
}
```

そしたらこの関数を pages 配下のダイナミックルーティングファイル内で呼ぶ。  
まずは path を getStaticPaths で返してあげる。  
後に AMP 対応をするので fallback は blocking を指定してあげるのがミソ！

```typescript
// src/pages/blog/[post]/index.tsx

// 略
export const getStaticPaths: GetStaticPaths = async () => {
  // さっきの関数
  const mdxPaths = await getMarkdownPostsPaths()
  const paths = mdxPaths.map((path) => ({ params: { post: path } }))

  return {
    paths,
    fallback: 'blocking'
  }
}
```

次はデータを getStaticProps で返す。  
全然関係ないけどこの辺の Next.js が提供している API 名も全部手打ちなのちょい怖いね。  
せっかくなので ISR 使っていきましょう。再評価は 10 秒毎で！

```typescript
// src/pages/blog/[post]/index.tsx

// 略

// .ampがパスに入ってしまうのを弾く雑なスクリプト
const getPostSlug = (ctx: GetStaticPropsContext) => {
  const cutAmp = (slug: string) => {
    if (slug.includes('.amp')) {
      return slug.split('.amp')[0]
    }
    return slug
  }
  if (ctx.params.post instanceof Array) {
    return cutAmp(ctx.params.post[0])
  }
  return cutAmp(ctx.params.post)
}

export const getStaticProps: GetStaticProps<StaticProps> = async (ctx) => {
  const postSlug = getPostSlug(ctx)
  // さっきの関数
  const mdxPosts = await getMarkDownPosts()

  const posts = mdxPosts.map((target) => ({
    title: target.data.title,
    slug: target.slug,
    published: target.data.published || false,
    draft: target.data.draft || false,
    date: target.data.date,
    ogp: target.data.ogp || BASE_URL + '/images/tr.jpg',
    tag: target.data.tag,
    content: target.content
  }))

  const post = posts.find((p) => p.slug === postSlug)

  return {
    props: {
      post,
      posts
    },
    revalidate: 10
  }
}
```

一覧ページのコードは省略してますが同じ関数を応用して getStaticProps すれば書けます。
詳しくはソースコード参照。  
あとは config で hybrid amp を指定してあげれば下準備は完了。  
View に落としていく。

```typescript
// src/pages/blog/[post]/index.tsx

// 略
export const config = {
  amp: 'hybrid'
}
```

## View 部分の作成

肝は AMP 対応をどうするか。  
これは Next.js の isAmp フックと@mdx-js/react の提供する MDX Provider を使用して出し分ける事が出来る。

### MDX Provider とは

MDX から特定のエレメントを受け取った時に独自のコンポーネントを当てられる Wrapper Component。
以下のように使用する。

```tsx
import { MDXProvider } from '@mdx-js/react'
import SomeMdx from 'path/to/some.mdx'

const components = {
  a: (props) => <a className="custom-anchor">{props.children}</a>
}

const Component: React.FC = () => {
  return (
    <MDXProvider components={components}>
      <SomeMdx />
    </MDXProvider>
  )
}
```

上記の場合、import した mdx ファイルにリンクが含まれていたら通常はインラインの a タグが出力されるところで、
"custom-anchor"クラスを付与した a タグを吐かせられる。

これと useAmp フックを応用して通常は next/image、amp 時には amp-img を出す事も可能。(width と height の指定は少し工夫する必要アリ)。

```tsx
import { MDXProvider } from '@mdx-js/react'
import SomeMdx from 'path/to/some.mdx'
import { useAmp } from 'next/amp'
import Image from 'next/image'

const components = {
  img: (props) => {
    if (isAmp) {
      return (
        <amp-img
          className={props.className}
          src={props.src}
          alt={props.alt}
          width={props.width}
          height={props.height}
          layout={props.layout || 'responsive'}
        />
      )
    }

    return (
      <div className="next-image-container">
        <Image
          className={props.className}
          src={props.src}
          alt={props.alt}
          width={props.width}
          height={props.height}
          loading={props.loading || 'lazy'}
          layout="responsive"
        />
      </div>
    )
  }
}

const Component: React.FC = () => {
  return (
    <MDXProvider components={components}>
      <SomeMdx />
    </MDXProvider>
  )
}
```

コードの場合はこんな感じ

```tsx
// 略
const components = {
  code: (props) => {
    const language = props.className.includes('language-')
      ? props.className.split('language-')[1]
      : props.className

    const grammar: Prism.Grammar =
      Prism.languages[language.toLowerCase()] || Prism.languages.tsx

    return (
      <code
        key={props.children}
        data-language={language}
        dangerouslySetInnerHTML={{
          __html: Prism.highlight(String(props.children), grammar, language)
        }}
      />
    )
  }
}
```

こんな感じで地道に出しわけつつ必要に応じてカスタムコンポーネントを当てていけば完成する。

## dynamic import

ページによって読み込む mdx ファイルを指定し分ける為に next/dynamic を使用する。
[!!BOOKMARK!!](https://nextjs.org/docs/advanced-features/dynamic-import)

next/dynamicはトップレベルでの使用が推奨されているので事前に全てのmdxのdynamic importを記述し、
ページ毎にそれぞれimportする必要がある。

以下のように getStaticProps で取得した slug をパスしてあげる。 
これを実現するため、next.jsのビルド時に全てのdynamic-importを含むファイルを自動で生成する。 
具体的には以下のようなファイルを書いた。
```typescript
// src/assets/scripts/createMdxImport.ts
import { join } from 'path'
import { getMarkDownPosts } from '../../lib/blog/getMarkdownPosts'
import { writeFile } from '../../lib/fs-helpers'

// Next.js固有のLogger
import * as Log from 'next/dist/build/output/log'

export const createMdxImport = () => {
  // blogのgetStaticPropsと共通の関数
  getMarkDownPosts().then((mdxPosts) => {
    const slugs = mdxPosts.map((post) => post.slug)
    const targetPath = `${join(process.cwd(), 'posts')}/mdx-list.ts`
    const stringifiedImports = slugs
      .map((s) => `'${s}': dynamic(() => import('posts/docs/${s}.mdx'))`)
      .join(',')

    const stringifiedFileContent = `
      import dynamic from 'next/dynamic'
      type MDXPostsType = { [key: string]: React.ComponentType }
      export const MDXPosts: MDXPostsType = {${stringifiedImports}}
    `
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    const formatted = require('prettier').format(stringifiedFileContent, {
      singleQuote: true,
      semi: false,
      trailingComma: 'none',
      parser: 'typescript'
    })

    writeFile(targetPath, formatted)

    Log.info(
      `\u001b[32m[Titanic Rising MDX Processor]: Successfully created import references for ${slugs.length} paths.`
    )
    Log.info(`\u001b[32mSee '${targetPath}' \u001b[32mfor details.\u001b[37m`)
  })
}

```

next.config.jsはJavaScriptで記述されているので上記のスクリプトを実行するにはts-nodeを使用する必要がある。
```javascript
'use strict'
require('ts-node').register({
  compilerOptions: {
    module: 'commonjs',
    target: 'esnext'
  },
})
exports.createMdxImport = require('./createMdxImport.ts').createMdxImport
```

上のmain.jsをnext.coonfig.js上で実行する
```javascript
// next.config.js

// 追加
const { createMdxImport } = require('./src/assets/scripts/main')
createMdxImport()

const nextConfig = {
  // nextConfig
}

module.exports = nextConfig
```

この状態でnext、あるいはnext buildコマンドを走らせると以下のようにファイルを生成したぜ！とログが表示される
<img
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620895670/titanicrising.jp/nextjs-mdx/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2021-05-13_17.46.22_mk9yio.png`}
  width={745}
  height={116}
  alt="log"
/>

posts/docs上に以下のようなファイルが生成されている
```typescript
import dynamic from 'next/dynamic'
type MDXPostsType = { [key: string]: React.ComponentType }
export const MDXPosts: MDXPostsType = {
  'about-amp': dynamic(() => import('posts/docs/about-amp.mdx')),
  'about-zenn-dev': dynamic(() => import('posts/docs/about-zenn-dev.mdx')),
  'all-my-friends': dynamic(() => import('posts/docs/all-my-friends.mdx')),
  'best-album-2020': dynamic(() => import('posts/docs/best-album-2020.mdx')),
  'book-smart': dynamic(() => import('posts/docs/book-smart.mdx')),
  'bump-is-good': dynamic(() => import('posts/docs/bump-is-good.mdx')),
  'changed-blog-domain': dynamic(
    () => import('posts/docs/changed-blog-domain.mdx')
  )
  // 略
}

```

あとはダイナミックルーティング上でこのMDXPostsオブジェクトをインポートし、staticPathを使用するなどして参照すればOK
勿論Ampなどでも問題なく表示される。

```tsx
import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import dynamic from 'next/dynamic'

// 追加
import { MDXPosts } from 'posts/mdx-list'

const Component: React.FC = (props) => {
  // post.slugにキーが入ってる想定
  const MDX = MDXPosts[post.slug]

  const components = {
    // hogehoge
  }

  return (
    <MDXProvider components={components}>
      <MDX />
    </MDXProvider>
  )
}
```

工夫したところは以上。
タグとか細かい部分に関してはそのうちまとめる。
途中部分までのソースコードは以下。  
自分の名前とかがハードコードされているのでその辺は…

[!!BOOKMARK!!https://github.com/Kaisa55275/titanic-rising](https://github.com/Kaisa55275/titanic-rising)

Next.js + MDXでブログを作った


最近ブログのコンセプトというか内容がブレブレでなんでもありな感じになってきたのでタグ機能をつけて整理していきたいと思う。

成果物は例の如くこのブログそのものです。

## Notion 側の設定

とりあえずタグを定義するための新しいテーブルを作ります。

まあこの辺のデータはなんでもいい。

<img
  width={1518}
  height={572}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383433/titanicrising.jp/notion-blog-tag/_2020-09-01_13.37.41_vcmt0p.png`}
/>

そしたらメインの記事テーブルにさっきの Tag テーブルのリレーションを作ります。

<img
  width={2242}
  height={372}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383433/titanicrising.jp/notion-blog-tag/_2020-09-01_13.38.46_xvzfd7.png`}
/>

あとは記事テーブル側からさっき作成したタグテーブルのアイテムを選択するだけ。

<img
  width={1300}
  height={530}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383432/titanicrising.jp/notion-blog-tag/_2020-09-01_13.39.02_lm1f7m.png`}
/>

## Next.js 側の設定

とりあえず一覧表示にタグを出したい。出させてください。

ソースコードをみると Notion のデータの呼び出しは getTableData 関数を使っているようなのでここをいじってみる。

```tsx
// src/lib/notion/getTableData.ts

//　略
schemaKeys.forEach(async (key) => {
  // might be undefined
  let val = props[key] && props[key][0][0]

  // authors and blocks are centralized
  if (val && props[key][0][1]) {
    const type = props[key][0][1][0]

    switch (type[0]) {
      case 'a': // link
        val = type[1]
        break
      case 'u': // user
        val = props[key]
          .filter((arr: any[]) => arr.length > 1)
          .map((arr: any[]) => arr[1][0][1])
        break
      case 'p': // page (block)
        const page = col.recordMap.block[type[1]]
          row.id = page.value.id
          val = page.value.properties.title[0][0]
        }

        break
      case 'd': // date
        // start_date: 2019-06-18
        // start_time: 07:00
        // time_zone: Europe/Berlin, America/Los_Angeles

        if (!type[1].start_date) {
          break
        }
        // initial with provided date
        const providedDate = new Date(
          type[1].start_date + ' ' + (type[1].start_time || '')
        ).getTime()

        // calculate offset from provided time zone
        const timezoneOffset =
          new Date(
            new Date().toLocaleString('en-US', {
              timeZone: type[1].time_zone
            })
          ).getTime() - new Date().getTime()

        // initialize subtracting time zone offset
        val = new Date(providedDate - timezoneOffset).getTime()
        break
      default:
        console.error('unknown type', type[0], type)
        break
    }
  }
```

リレーションの type は case でいう'p'に引っかかるのでここの条件分岐を編集する。

次に複数のタグが入ってきた場合に対応するため、上記の const type = の部分を以下のように書き換える。

もうこれは説明できないけどこれで動く。

```tsx
// src/lib/notion/getTableData.ts

const type =
  props[key].length < 2
    ? props[key][0][1][0]
    : [
        props[key][0][1][0][0],
        ...props[key]
          .map((p) => p[1])
          .filter((f) => !!f)
          .map((fp) => fp[0][1])
      ]
```

次に Notion_id からタグのデータを取得する getTagData 関数を新たに作成する。

```tsx
// src/lib/notion/getTagData.ts

import rpc, { values } from './rpc'

export default async function getTagData(pageId: string) {
  const obj = {
    Color: null,
    Title: null,
    Slug: null
  }

  try {
    const data = await loadPageChunk({ pageId })
    const blocks = values(data.recordMap.block)

    if (blocks[0].value?.properties) {
      const props = blocks[0].value?.properties
      obj.Color = props['n<}n'][0]
      obj.Title = props['title'][0]
      obj.Slug = props['e;z{'][0]
    }
  } catch (err) {
    console.error(`Failed to load pageData for ${pageId}`, err)
  }

  if (obj.Title && obj.Slug && obj.Color) {
    return obj
  }
}

export function loadPageChunk({
  pageId,
  limit = 100,
  cursor = { stack: [] },
  chunkNumber = 0,
  verticalColumns = false
}: any): any {
  return rpc('loadPageChunk', {
    pageId,
    limit,
    cursor,
    chunkNumber,
    verticalColumns
  })
}
```

これをさっきの Switch 文の中で呼び出してあげる。

```tsx
// src/lib/notion/getTableData.ts

// 略
case 'p':
  const page = col.recordMap.block[type[1]]
  if (page) {
    row.id = page.value.id
    val = page.value.properties.title[0][0]
  }

	//追加！！！
  if (!page) {
    const tagsPromise = type
      .map(async (t) => {
        const tag = await getTagData(t)
        return tag
      })
      .filter((_, i) => i !== 0)

    const tags = await Promise.all(tagsPromise)
    val = tags
  }
  break
```

新たに作成した Tag を Post の型定義に追加する。

```tsx
// types/post.ts

export type Post = {
  id: string
  Authors: string[]
  Slug: string
  Published: 'Yes' | 'No'
  Date: number
  Page: string
  preview: unknown[][]
  content: PostContent[]
  hasTweet: boolean
  Ogp: string
  Tag: {
    Color: string
    Title: string
    Slug: string
  }[]
}
```

あとは見た目に反映するだけ！

こんな感じで呼び出せば一覧ページに表示できる！

```tsx
// src/components/Blog.tsx

//タグの背景色算出する
const getBlackOrWhite = (hexcolor: string) => {
  const r = parseInt(hexcolor.substr(1, 2), 16)
  const g = parseInt(hexcolor.substr(3, 2), 16)
  const b = parseInt(hexcolor.substr(5, 2), 16)

  return (r * 299 + g * 587 + b * 114) / 1000 < 128 ? 'white' : 'black'
}

//略
{
  post.Tag.map((t) => (
    <Link key={t.Slug} href={{ pathname: 'blog', query: { tag: t.Slug } }}>
      <a
        className="post-tags__item"
        style={{
          backgroundColor: t.Color,
          color: `${getBlackOrWhite(t.Color || '#ffffff')}`
        }}
      >
        {t.Title}
      </a>
    </Link>
  ))
}
```

一覧ページこんな感じ！

<img
  width={1150}
  height={422}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383433/titanicrising.jp/notion-blog-tag/_2020-09-02_14.39.20_yvwxqh.png`}
/>

自分の選色のセンスが絶望的すぎて微妙…

やっぱ白黒だけでいいのかなあ…🤔


Notion Blogにタグ機能を追加する


ブログの終わりが唐突という貴重な意見をいただいたので下にコンテンツを追加していこうと思う。

まあ著者情報とかがベタだけど著者俺しかいないしちょっと実装コストかかるの何が良いかなって考えたときにやっぱ人気記事ランキングかなという結論にいたった。

流れとしては

1. Google Analytics でページビューを計測

2. Google Analytics Reporting Api をサーバーサイドで叩いてそのデータを取得

3. そのサーバーの Api をクライアントで叩いて多い順に表示

という感じになる

## アナリティクスのビュー ID をメモる

Reporting Api を叩くためにはアナリティクスのビュー ID が必須なのでアナリティクスの管理画面でこれをメモっておく

<img
  width={1344}
  height={1472}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383434/titanicrising.jp/popular-article/_2020-09-19_11.13.49_xaubek.png`}
/>

次に Google Cloud Platform から Analytics Reporting Api を導入し、サービスアカウントの認証情報をダウンロードしておく。

形式は無難に json を選択しておく。TypeScript でしっかりと型が入ってくるので。

<img
  width={1560}
  height={1058}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383434/titanicrising.jp/popular-article/_2020-09-19_11.24.38_txcxqc.png`}
/>

これでアナリティクスからデータを取得する準備は整った。

## API 作るよ

アナリティクスの Reporting API からデータを引っ張ってきて加工してクライアントに返す所までサーバーで行う。

api ディレクトリに以下のようなファイルを作成。

例外処理とかは割愛…

```tsx
// pages/api/top_article.ts

import { NextApiRequest, NextApiResponse } from 'next'
import { google } from 'googleapis'
// さっき保存したJSON
import credentials from './keys.json'
import getBlogIndex from 'src/lib/notion/getBlogIndex'
import { postIsPublished } from 'src/lib/blog-helpers'
import getNotionUsers from 'src/lib/notion/getNotionUsers'
import { Posts } from 'types/data/notion_blog'

// さっきメモしたビューID
const VIEW_ID = 'XXXXXXX'

const getClient = async () =>
  google.auth.getClient({
    credentials,
    scopes: 'https://www.googleapis.com/auth/analytics.readonly'
  })

const getTopArticles = async () => {
  const client = await getClient()
  const analyticsreporting = google.analyticsreporting({
    version: 'v4',
    auth: client
  })

  // 欲しいデータのクエリ
  const res = await analyticsreporting.reports.batchGet({
    requestBody: {
      reportRequests: [
        {
          viewId: VIEW_ID,
          dateRanges: [
            {
              startDate: '30daysAgo',
              endDate: 'today'
            }
          ],
          dimensions: [
            {
              name: 'ga:pagePath'
            }
          ],
          metrics: [
            {
              expression: 'ga:pageviews'
            }
          ]
        }
      ]
    }
  })
  return res.data
}

// 記事データの取得
const getAricles = async () => {
  const postsTable = await getBlogIndex()

  const authorsToGet = new Set()
  const posts: Posts = Object.keys(postsTable)
    .map((slug) => {
      const post = postsTable[slug]
      if (!postIsPublished(post)) {
        return null
      }
      post.Authors = post.Authors || []
      for (const author of post.Authors) {
        authorsToGet.add(author)
      }
      return post
    })
    .filter(Boolean)

  const { users } = await getNotionUsers([...authorsToGet])

  posts.map((post) => {
    post.Authors = post.Authors.map((id) => users[id].full_name)
  })

  return posts
}

const topArticle = async (
  _req: NextApiRequest,
  res: NextApiResponse
): Promise<void> => {
  // クエリと記事データの取得を同時に行う
  const [topArticles, articles] = await Promise.all([
    getTopArticles(),
    getAricles()
  ]).catch((err) => {
    throw new Error(err)
  })

  if (topArticles && articles) {
    const targetRows = topArticles.reports?.[0].data.rows

    const topArticlesObj = targetRows
      // オブジェクトの型を決める
      .map((val) => ({
        article: articles.find((article) =>
          val.dimensions[0].includes(article.Slug)
        ),
        path: val.dimensions[0],
        count: Number(val.metrics[0].values[0])
      }))
      // ブログの記事だけにしぼる
      .filter((val) => val.path.includes('/blog/') && !val.path.includes('__'))
      // 人気順でソート
      .sort((a, b) => b.count - a.count)

    // 長さを3つにする
    topArticlesObj.length = 3

    res.status(200).send(topArticlesObj)

    return
  }

  res.send(204)
}

export default topArticle
```

これをクライアントから叩いてあげる。

## フロントの実装

楽なので React Hooks を使ってコンポーネントに流し込む実装にする。

まずは API を叩く useTopArticles フックを作成。

```tsx
// useTopArticle.ts
import { useEffect, useState } from 'react'
import { TopArticles } from 'types/data/top_articles'

export const useTopArticles = () => {
  const [topArticles, setTopArticles] = useState<TopArticles>([])

  useEffect(() => {
    const getter = async () => {
      const res = await fetch('/api/analytics/top_article').catch((err) => {
        console.error(err)
        throw new Error(err)
      })
      const data: TopArticles = await res.json()
      setTopArticles(data)
    }

    getter()
  }, [])

  return {
    topArticles
  }
}
```

このフックをコンポーネント側で呼び出してあげる。

ゴミみたいなスタイリングは許して…

```tsx
// TopArticles.tsx
import dayjs from 'dayjs'
import Link from 'next/link'
import React from 'react'
import styled from 'styled-components'
import { useTopArticles } from './useTopArticles'

const TopArticles: React.FCX = (props) => {
  const { topArticles } = useTopArticles()
  return (
    <ul className={props.className}>
      {topArticles.map((topArticle) => (
        <li key={topArticle.path}>
          <Link href={topArticle.path}>
            <a className={`${props.className}-link`}>
              <div className={`${props.className}-link__thumb`}>
                <img
                  src={
                    topArticle.article.Ogp || require('assets/images/tr.jpg')
                  }
                  alt={topArticle.article.Page}
                />
              </div>
              <span className={`${props.className}-link__info`}>
                <strong>{topArticle.article.Page}</strong>
                <time>
                  {dayjs(topArticle.article.Date).format('YYYY-MM-DD')}
                </time>
              </span>
            </a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default styled(TopArticles)`
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;

  & > li {
    width: 32%;
    @media screen and (max-width: 600px) {
      width: 100%;
      margin-bottom: 16px;
    }
  }

  &-link {
    width: 100%;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);

    &__thumb {
      height: 120px;
      overflow: hidden;
    }

    &__info {
      display: block;
      padding: 20px 10px;

      > strong {
        font-size: 1.4rem;
        display: block;
      }
    }
  }
`
```

このコンポーネントを記事下部で読み込んであげれば現れたわね！！！！

```tsx
// Post.tsx
<article>
	略
</article>
// 追加！
<div className="top-articles">
  <h2>人気の記事</h2>
  <TopArticles />
</div>
```

まあ見た目とかは適当なので許して！

あと計測し始めたのが昨日なのでランキングもちょっとガバガバかも…

<img
  width={1844}
  height={1372}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383434/titanicrising.jp/popular-article/_2020-09-19_13.09.39_yqoi0z.png`}
/>

以上！


Notion Blogに人気記事ランキングを追加する


まあ俺デザイナーじゃないしイケてるかどうかは置いといてさ

成果物はもちろんこのブログです

## お前のプロフィールページ情報量少なくね？

エンジニアのポートフォリオみたいに SNS とか GitHub とかのアイコンとか貼りたいけど svg とか選ぶのクソめんどいので[react-icons](https://github.com/react-icons/react-icons)使うね。

アイコン足すだけだしプロフィールページのコンポーネントに殴り書いてもいいんだけどせっかく心の余裕があるしアイコンリンクを並べるだけのコンポーネントを作る。

全然関係ないけどセブンで売ってるみかん氷、うまいよね。

## いざ、アイコンをインポート

だけど Twitter は貼りたくないし GitHub くらいしかマジでないわ…

てか react-icons 楽すぎる

```tsx
// ProfileIcons.tsx

import React from 'react'
import { FaGithub } from 'react-icons/fa'

const ProfileIcons: React.FCX = (props) => {
  return (
    <div>
      <a href="https://github.com/Kaisa55275" target="_blank" rel="noreferrer">
        <FaGithub />
      </a>
    </div>
  )
}

export default ProfileIcons
```

このコンポーネントをプロフィールページで呼んであげると無事 GitHub 現れたわね！

まだスタイル書いてないから訳わかんないとこに出ちゃうあるある〜〜

<img
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383435/titanicrising.jp/style-titanic-blog/_2020-08-12_22.19.37_skt8dt.png`}
  alt="_2020-08-12_22.19.37.png"
  width={1220}
  height={548}
/>

## スタイルをどう書くか

React のスタイルの書き方は諸説あるが自分は BEM に馴染んでいるので CSS in JS で書いている。

なんか CSS in JS 嫌いな人多いよね。なんでだろう？？

とりあえずクラス名を追加する。後で自動で props に付与されるものを使う。

```tsx
// ProfileIcons.tsx

import React from 'react'
import { FaGithub } from 'react-icons/fa'

const ProfileIcons: React.FCX = (props) => {
  return (
    <div className={props.className}>
      <a
        className={`${props.className}__icon`}
        href="https://github.com/Kaisa55275"
        target="_blank"
        rel="noreferrer"
      >
        <FaGithub />
      </a>
    </div>
  )
}

export default ProfileIcons
```

コンポーネントにつけている FCX 型については以下を参照

[!!BOOKMARK!!React.FC 型を拡張する - Qiita](https://qiita.com/Takepepe/items/f66c7e2e1d22b431f148)

なんか通常？の styled-components の書き方だと styled.div なんかを定義して使うけど default export 時に styled-components の引数に指定すると props.className をそのままスタイル付けできる。

もちろんスコープもバッチリ切れる。

子要素の命名は BEM 使うとすんなりですな！！！ははは！！！

```tsx
// ProfileIcons.tsx

import React from 'react'
import { FaGithub } from 'react-icons/fa'
import styled from 'styled-components'

const ProfileIcons: React.FCX = (props) => {
  return (
    <div className={props.className}>
      <a
        className={`${props.className}__icon`}
        href="https://github.com/Kaisa55275"
        target="_blank"
        rel="noreferrer"
      >
        <FaGithub />
      </a>
    </div>
  )
}

export default styled(ProfileIcons)`
  display: flex;
  justify-content: center;
  align-items: center;

  &__icon {
    transition: 0.2s;
    margin: 0 12px;

    &:hover {
      transform: scale(1.2);
      opacity: inherit;
    }

    > svg {
      width: 20px;
      height: 20px;
    }
  }
`
```

てかシンタックスハイライト効かないとみづらいね…VSCode だと実際はいい感じよ！

<img
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383435/titanicrising.jp/style-titanic-blog/_2020-08-12_22.39.04_rchjl2.png`}
  alt="_2020-08-12_22.19.37.png"
  width={1050}
  height={746}
/>

## 完成とは

はい出来た〜〜〜ホバーすると大きくなるよ！

<img
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383434/titanicrising.jp/style-titanic-blog/_2020-08-12_22.33.18_dh9ud9.png`}
  alt="_2020-08-12_22.19.37.png"
  width={870}
  height={592}
/>

いや、アイコン一個足しただけで全然見た目整えてなくね？？？？？？？


ブログの見た目を整える


import { Title } from 'src/components/Title'

# test

I am nimura

<div className="test">Daiki Nimura</div>
<Title>H1</Title>

- Tech
- Poem
- Poem??


テストの記事です


ライブはおそらく 1 月の Bon Iver 以来かな？

一番親しんでいるバンド、The Yellow Monkey のライブに行ってきた。

会場は東京ドーム。

セットリストは最後に載せてます。

観客を入れてこの規模でコンサートを行うのはおそらく世界初なんじゃないかって吉井さんも MC で言っていたけどキャパは通常の 5 万人から半分以下に落とした 19000 人。

でも見た感じはしっかりと埋まっていて観客もあまり喋ったり盛り上がったりはせずにしっかりとマナーを守って静かに楽しんでいた。

そんなメモリアルなライブの 1 曲目は 1st 収録のバラード、「真珠色の革命時代」。

ストリングスのイントロに合わせてメンバーが登場して演奏が始まった時には流石にとても感動した。

続けて追憶のマーメイド、Spark で盛り上げた後の挨拶 MC。吉井さんの MC は基本面白いので観客の笑い声が無いのは違和感があった。曲間とかも凄い静かだった。日本人の集団マナー遵守力恐るべし。

この日前半のハイライトは間違いなくエマちゃんのイントロ付きで演奏された「球根」。こんなご時世だからこそすごく響いた。ちょっと演奏が走ってたのも良かった。

センターステージに移動して「一緒に歴史を振り返りましょう」と言って始まったのが 6th 収録の名曲「花吹雪」。最近すごい聴いていたので個人的タイムリー。ここで少し涙ぐむ。

続いてゆっくりめのフォーカウントから演奏されたのが「Four Seasons」。すごい好きな曲なのでびっくりした。この曲のラスサビは本当に凄い。

初期の曲メドレーに続いて演奏された「Burn」は久々に聴いたら凄い迫力があった。なんかこんないい曲だったっけ？笑

続いては「イエローモンキーのロックを聴いてください」からの「JAM」。うん。まあいい曲だよ当たり前だけど。ラスサビでこの日初めてのシンガロングタイム。みんな抵抗があるのか控えめに歌っていた。

メインステージに戻ってからピアノソロがあって聴き入っていたらすごく懐かしいピアノイントロになだれこんで「メロメ」が始まった。思い入れが強い曲&やると思ってなかったのでさすがに泣いた。最後に演奏したのは 20 年前の東京ドームかな？すごいよね。

本編最後は新曲の「未来はみないで」。改めて聴いたらいい曲だった。まあこれは音源の方がいいかな…笑

続いてアンコール 1 曲目は楽園！いやー楽園クソ好きなんだよね。ラスサビ前のあーあーあーのとこクソ好き！最高だった。

悲しき ASIAN BOY で終わりかと思いきや最後は解散前最後に出したシングルのプライマル。なんかドームツアー終わったら少し休止期間に入るらしいけどその寂しさみたいなのも改めて感じさせられた。

## 感想

いやー 120 点。メロメと Four Seasons と花吹雪が本当に良かった。横浜アリーナのライブストリーミングもみようかしら。

セットリストはマークダウンで。

```markdown
1. 真珠色の革命時代
2. 追憶のマーメイド
3. Spark
4. Balloon Balloon
5. Tactics
6. 球根
7. 花吹雪
8. Four Seasons
9. Foxy Blue Love
10. Sleepless Imagination
11. 熱帯夜
12. Burn
13. Jam
14. メロメ
15. 天道虫
16. パンチドランカー
17. Love Communication
18. バラ色の日々
19. Suck Of Life
20. パール
21. 未来はみないで

22. 楽園
23. Alright
24. 悲しき Asian Boy
25. プライマル。
```

最後に、難しい状況の中ライブを実現してくれたイエローモンキーと関係者の皆様達に感謝。

<img
  width={4032}
  height={3024}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383436/titanicrising.jp/tym-concert/2103DEE8-6612-4367-A788-D3421CA87312_zosevs.jpg`}
/>


THE YELLOW MONKEYのライブに行ってきた(感想)


来週は LINE DEVELOPER DAY が開催されるのでかなりウキウキしている。特に LIFF のこの先の展望とかが気になっている。

LIFF、個人的にはかなり良いと思っているんだけどあまり盛り上がっている印象が無い。リソースとかも基本公式しかないし…(まあ公式読めば大体わかるけど…)

React 業務で書きすぎて飽きたので Vue で動かしていく。

ソースコードも一応貼っておきます。

[!!BOOKMARK!!Kaisa55275/liff-vue-example](https://github.com/Kaisa55275/liff-vue-example)

## そもそも LIFF とは？

LINE Front-end Framework の略。詳しくは公式を参照してくだされ。

[LINE Front-end Framework](https://developers.line.biz/ja/docs/liff/overview/)

LINE のトーク上で開くブラウザ(LIFF ブラウザ)で Web アプリを動かせて、プロフィール情報の取得やトークへのメッセージ送信などを LIFF Sdk から提供される API を使って行う事が出来る。

普通のブラウザでも機能制限はあるが動く。LINE ログインをバックエンド実装無しで使えたりもするので普通に便利。

## LIFF のセットアップ

まずは LINE Developers Console に LINE アカウントでログインする。

新規チャネル作成 →LINE ログインを選択する

<img
  width={1736}
  height={1552}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383437/titanicrising.jp/vue-liff/_2020-11-21_1.08.39_ltuphc.png`}
/>

項目を入力していく。アプリタイプはウェブアプリを選択する。

### LIFF アプリの作成

作成した LINE ログインのチャネル配下にある LIFF タブから入力して作成する。

エンドポイント URL は一旦適当な URL を入れておく。（https で）

<img
  width={1360}
  height={1390}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383437/titanicrising.jp/vue-liff/_2020-11-21_1.11.40_n00iuj.png`}
/>

作成されて LIFF ID と LIFF URL が見れれば一旦 OK。

どちらもメモっておく。

<img
  width={1314}
  height={512}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383437/titanicrising.jp/vue-liff/_2020-11-21_1.19.34_cnzbtm.png`}
/>

## Vue のセットアップ

自分で webpack とかチューニングするのめんどいので vue-cli 使う。

vue-cli の設定はマニュアルの TypeScript とか PWA とか全部込みで vue は 3 を使用。composition-api 無しだと Vue の TypeScript 運用は流石に少し厳しいので。

src ディレクトリの中身はこんな感じ。

<img
  width={273}
  height={221}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383436/titanicrising.jp/vue-liff/_2020-11-21_1.25.12_vekith.png`}
/>

### 簡単なセットアップと LIFF のインストール

まずは環境変数のセット。

プロジェクトルートに.env という名前のファイルを作成。

さっきの LIFF_ID をセットする。

変数名はなんでも良いけど VUE_APP を最初につけなきゃダメらしい。この辺は CRA と似ておりますな。

```tsx
//.env
VUE_APP_LIFF_ID = 'さっきのLIFF ID'
```

reset.css とか入れたりしたけどそれらは割愛。

LIFF は npm パッケージが公式から出ているのでインストール。

```tsx
yarn add @line/liff
or
npm i @line/liff
```

型定義ファイルも入っているので ts でもそのまま import して使える。

## プロフィールを取得してみる

とりあえず src/components/HelloWorld.vue を以下のように編集した。

```markup
<template>
  <div class="hello-world" v-if="isInClient">
    <h1 class="hello-world__title">
      Welcome to Your Liff + Vue.js App
    </h1>
    <ul class="hello-world__profile" v-show="liffState.profile">
      <li class="profile-items" v-for="(v, k) in liffState.profile" :key="k">
        <img v-if="k === 'pictureUrl'" :src="v" alt="line-profile-picture" />
        <span v-else>{{ `${k}: ${v}` }}</span>
      </li>
    </ul>
  </div>
  <div
    class="hello-world--loading"
    v-else-if="isInClient === 'NOT_INITIALIZED'"
  >
    Loading...
  </div>
  <div class="hello-world--inactive" v-else-if="isInClient === false">
    Please open in LIFF browser!!
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "vue";
import liff from "@line/liff";

type LiffState = {
  profile?: {
    userId: string;
    displayName: string;
    pictureUrl?: string;
    statusMessage?: string;
  };
};

export default defineComponent({
  setup() {
    const isInClient = ref<boolean | "NOT_INITIALIZED">("NOT_INITIALIZED");
    const liffState = reactive<LiffState>({
      profile: undefined
    });

    const getProfile = async () => {
      const profile = await liff.getProfile();
      liffState.profile = profile;
    };

    onMounted(async () => {
      // LIFFアプリの初期化
      await liff.init({ liffId: process.env.VUE_APP_LIFF_ID });

      // LIFFブラウザで起動しているかの判定
      if (liff.isInClient()) {
        isInClient.value = true;
        getProfile();
        return;
      }

      isInClient.value = false;
    });

    return {
      liffState,
      isInClient
    };
  }
});
</script>

<style lang="scss" scoped>
.hello-world {
  padding-bottom: 60px;

  &--inactive {
    font-size: 1.8rem;
    color: red;
  }

  &__title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 20px;
  }

  &__profile {
    font-size: 1.4rem;

    .profile-items {
      padding: 4px 8px;
      > img {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>
```

細かい LIFF の API の説明とかは公式を見た方が早いので割愛。

まあこのコードはあまりにもやっつけなのでちょっとアレだがしっかり動く。

### ngrok を使って実際に動かしてみる

yarn serve して localhost:8080 でみられるようになるが、https しかエンドポイントとして受け付けない LIFF ブラウザで起動するには一工夫必要。ビルド&デプロイしてその URL を使っても良いが開発しながらだと流石にめんどい。ので ngrok を使用する。

以下の記事がわかりやすい。

[!!BOOKMARK!!ngrok が便利すぎる - Qiita](https://qiita.com/mininobu/items/b45dbc70faedf30f484e)

無事インストールできたら以下のコマンドを叩く。

```markup
ngrok http 8080 -host-header="localhost:8080"
```

http の url と https の url が発行されるはずなので https の方をメモる(ngrok.io で終わるやつ)。

さっきの LINE Developers Console に戻って LIFF の設定を開き、エンドポイント URL にコピペする。

<img
  width={1006}
  height={712}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383435/titanicrising.jp/vue-liff/_2020-11-21_1.52.38_orhg9u.png`}
/>

### 起動！

なんらかの方法でコンソールにある LIFF URL をスマホの LINE のトークで開く。

自分一人の LINE グループ作ってそこに貼るのがおすすめ。

<img
  width={1125}
  height={630}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383436/titanicrising.jp/vue-liff/IMG_2066_gwdy8x.jpg`}
/>

開くと認証許可してくれ〜〜って出てくるので許可する。

<img
  width={1125}
  height={2436}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383436/titanicrising.jp/vue-liff/IMG_2067_mzvia4.png`}
/>

無事 LIFF ブラウザが開き、ロードが終わって(ngrok なので少し時間かかる)プロフィール情報が取れていれば OK！

<img
  width={1125}
  height={2436}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383436/titanicrising.jp/vue-liff/IMG_2067_mzvia4.png`}
/>

### 本番環境へのデプロイについて

普通の Vue アプリなので Vercel なり Netlify なり AWS なり Firebase なり好きなところにデプロイして OK。本番環境の LIFF をもう一個作って.env.production にそっちの LIFF_ID をセットしてエンドポイント URL に本番の URL を入れる運用が丸いと思う。

## まとめ

LIFF、良いけど DX がダメすぎる。デベロッパーツール使えないしコンソールも見れないし。

まあでもミニアプリと SDK が同じだったり認証早かったりと強みはすごいあるしじわじわ使われていくのではないかと思われる。

出来る事はかなり多いのでアイディア勝負ですな。

Nuxt じゃない Vue 久々に使った。vue-cli めっちゃ進化してて SSR や SSG しないなら Nuxt より全然良いかもね。


VueでLIFFを動かす


TypeScript は言わずと知れた（？）多くのフロントエンドエンジニアメインで書いている今をときめくイケイケ言語。

JavaScript に静的型付けだとかクラス構文だとかを足した JavaScript のすごい版だ！

なぜこの話題かというとたった今こんな記事が Qiita のランキングに入っていて、

[!!BOOKMARK!!未経験者がフロントエンドの仕事を 2 年やって、各言語や仕事に抱いた感想 - Qiita](https://qiita.com/hg0/items/fcdaf5ffe193c5d281ef)

その中に

> そもそも、元々の JavaScript にも、必要最低限の型は揃っています。それで十分だと思います。ブラウザが直接理解できる、JavaScript という標準語があるんだから、それでいいじゃないですか。TypeScript でわざわざ型を書いたところで、JavaScript にコンパイルしたら消えるだけです。単純に書く量も増えて、エラーも出まくって、効率が落ちるだけです。TypeScript を使わなくても、自分の書いたコードが悪かったら仕事をする上では上司や先輩に必ずコードレビューをしてもらいますし、ESLint という優れた文法チェックのツールもあります。
> これだけ面倒でも、最近のフロントエンドは TypeScript が使われていることが多くて気が滅入ってしまいます。面倒さを上回るメリットや理由があるんでしょうか。

という文章があってだな。

この部分に対してコメント欄で沢山の TypeScript はいいぞおじさんたちが TypeScript の良さを説いているという状況。

自分も TypeScript はないと生きていけないレベルで好きだけどそもそもなんで使い始めたんだっけ…

## 自分が TypeScript を使い始めたきっかけ

**１.名前がかっこいいから**

なんか JavaScript っていけてないよね。Java とかいう別言語と混同されがちだし。

それに対して名前に Type ってついててなんかかっこいいと思った。

**２.なんか流行ってるから**

いやなんか俺トレンドに弱いので普通に流行ってると使いたくなっちゃうんだよね。

最近のフロントエンド関連の Qiita の記事とかも TypeScript で書かれているのが多いしね。

**３.勉強会**

多分これが一番大きくて、フロントエンドの勉強会に行ったんだけど、LT の発表のサンプルコードが全部 JavaScript ではなく TypeScript で書かれていて、もう前提っすよみたいな空気出ちゃってた。

この勉強会で自分も会社のプロダクトに取り入れることを決意。

そう。つまり動機はかなり不純だし、その実用性に魅せられて使い始めたわけではなかった。

## なぜ TypeScript を使い続けるか

まあ正直理由はいろいろあるし一言で言えば「やめられない」からなんだけど…

**１.開発速度が速い**

これ不思議で、書くコードの量だけで言えば理論上 Javascript より多いんだよね。

型定義などがあるので。

まあただその代わりに補完が効く（カーソル下に次に書くコードの候補が出てくる）からそこから選ぶだけでコード書けるしエラーを起こすコード書くと書いてる途中に指摘してくれるので結果的に全然速い。

**２.仕様変更に強い**

使用が変わったらそれに付随する型を変えればいいだけだから。

API レスポンスのデータとかが変わります！ってなった時にそのレスポンスの型定義書き換えるだけでそれによってエラーになる箇所が全部 TypeCheck されるので超楽。

あとはそれらを書き換えるだけ。

JS だと実行してエラーになって…また直して実行して…みたいなの基本やるハメになる。

**３.最新の ES 記法が遠慮なく使える**

TypeScript は結局コンパイルされてただの JavaScript になるのでコンパイル先に IE11 とか選択もできるのよね。

バキバキ最新の記法を使ってもコンパイラが頑張って変換してくれる。

IE 向けサイトで最新記法使う背徳感、クセになるわ…

## TypeScript の弱点

**使ってみるまで利点がイマイチわかんない**ことだと思う。

自分も不純な動機で初めてリポジトリの言語比率を TypeScript100%にするぞー！って謎のモチベで書いてたらいつの間にかハマってた！みたいな感じだし。

正直使ってしばらくして良さに気づくまでは JavaScript でよくね？って思ってたな。

上の記事を書いた人はどう思ってるか知らないけど TS いいぞおじさん達もおそらくそういう原体験があるからこそ「早くこっちにおいで！」って言いたくなるのかな？って思ったりした。

まあとにかく俺は TypeScript 大好き。

以上。


そもそもなぜTypeScript使うんだっけ…


スムーズ社ではデータ分析の基板周辺は Google のプロダクトを中心に使っていて、Google App Script(GAS)が真価を発揮しそうな気がしたので環境構築してみた。

本職プログラマではないけど GAS は書くよ！みたいな人も多いのでは。

## 全てはエディタで書くために

GAS の Web UI はクソなのでエディタで書きたい。自分は普段 Visual Studio Code で書いてるのでここでかけたら最高。

まずは Google 製の CLI ツールである clasp をインストールする。

[!!BOOKMARK!!google/clasp](https://github.com/google/clasp)

```tsx
npm install @google/clasp -g
```

とりあえずこれで clasp コマンドが通るようになるはずなのでログインしてくよ。

```tsx
clasp login
```

上記のコマンドを打つとブラウザが立ち上がってログインを求められるのでログインする。無事ログインに成功すると Saved the credentials to〜みたいなメッセージが表示されるのでこれで下準備は完了。

次に GAS プロジェクトを作成していく。プロジェクトを作成するディレクトリまで飛んで以下のコマンドを打つ。

```tsx
clasp create
```

これで.clasp.json 等の必要なセットアップファイルが現れるので app.js 等好きな命名でスクリプトファイルをプロジェクトフォルダ内に作成し、clasp push コマンドで GAS のリモートワークスペース上に配置&実行することが出来る（clasp run コマンドでも可だが試していない）。

## 型が欲しい

型が欲しくなるのは当たり前（適当）。

GAS でスクリプト言語のプログラミング初めてやる人もせっかくなので型付きでやるべし（横暴）。

コンパイル前後のスクリプトファイルを分ける為以下のコマンドを打ってディレクトリを作成しておく。

```tsx
mkdir src dist
```

node_modules が必要になるのでいつも通り npm init からのエンター連打で package.json を作成する。以下のコマンドで必要なパッケージを追加しておく。

```json
yarn add @types/google-apps-script rimraf
```

ここで追加する@types/google-apps-script がメインで使用する GAS のグローバル宣言を内包した型定義ファイルになる。

また、型とコンパイルの設定をするため tsc --init コマンドを叩いて tsconfig.json も作成する。

```tsx
tsc --init
```

以下のようなディレクトリ構成になるはず。これで最強（だと思う）の GAS 環境ができた。

```markdown
.
├── src
│ └── ここにスクリプトファイルを作成して書く
├── dist
│ └── ここに/src ディレクトリのファイルがコンパイルされる
├── package.json
├── node_modules
│ └── modules
├── tsconfig.json
├── .clasp.json
└── appscript.json
```

## 試しに動かしてみる

試しにスプレッドシートに書き込んでみる。

まずは適当なスプレッドシートを作って URL の/spreadsheets/以降の文字列をメモっておく。これがスプレッドシート ID になる。

<img
  width={1778}
  height={824}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383439/titanicrising.jp/write-gas-in-ts/_2020-10-09_10.23.03_lgadcm.png`}
/>

次にコード側。

GAS を使ってスプレッドシートに何か書き込みたい時は SpreadsheetApp を使用する。

これら GAS の interface はアンビエント宣言で読み込まれているので手動で読み込む必要はなし。

ここでは D の 6 列にあははは！って書き込んでみる。

```tsx
function writeSpreadSheet(): void {
  const ss = SpreadsheetApp.openById('***さっきのスプレッドシートID ***')
  const targetSheet = ss.getSheetByName('***シート名***')

  if (targetSheet) {
    targetSheet.getRange('D6').setValue('あははは！')
  }
}
```

以下のコマンドを走らせてプッシュ。

```tsx
rimraf ./dist && tsc && clasp push
```

次に GAS を開く。

```tsx
clasp open
```

するとさっきのコード（コンパイル後）が置かれているので再生ボタンを押して実行！

<img
  width={667}
  height={460}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383438/titanicrising.jp/write-gas-in-ts/_2020-10-09_10.36.36_hqca9a.png`}
/>

無事書き込めてますね。

<img
  width={1778}
  height={824}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383438/titanicrising.jp/write-gas-in-ts/_2020-10-09_10.24.46_fveoqz.png`}
/>

## アンコール

もうちょい色々やれるアピールをするためにおなじみのスターウォーズ API を使ってスプレッドシートに書き込む処理を実装してみる。

```tsx
function writeSpreadSheet(): void {
  const ss = SpreadsheetApp.openById('***さっきのスプレッドシートID ***')
  const targetSheet = ss.getSheetByName('***シート名***')

  interface SWAPIRes {
    name: string
    hair_color: string
    skin_color: string
    eye_color: string
    birth_year: string
    gender: string
  }

  const arr: SWAPIRes[] = []

  // API叩くくん
  const fetcher = (num: number) => {
    const res = UrlFetchApp.fetch(`https://swapi.dev/api/people/${num}/`)
    const data = JSON.parse(res.getContentText())
    return data
  }

  // 10番目まで取得してarrに追加
  for (let i = 1; i <= 10; i += 1) {
    arr.push(fetcher(i))
  }

  if (targetSheet) {
    const setter = (target: string, value: string) => {
      targetSheet.getRange(target).setValue(value)
    }

    // 1列目定義
    setter(`A1`, 'name')
    setter(`B1`, 'gender')
    setter(`C1`, 'eye_color')
    setter(`D1`, 'hair_color')

    // arrに合わせて実行
    arr.forEach((d, i) => {
      const targetIndex = i + 2
      setter(`A${targetIndex}`, d.name)
      setter(`B${targetIndex}`, d.gender)
      setter(`C${targetIndex}`, d.eye_color)
      setter(`D${targetIndex}`, d.hair_color)
    })
  }
}
```

これで実行すると

<img
  width={1274}
  height={794}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383440/titanicrising.jp/write-gas-in-ts/_2020-10-09_11.01.49_kxaugh.png`}
/>

こんな感じでスターウォーズの登場人物達の情報 10 人分が載ったスプレッドシートが一瞬で完成！（いらね〜〜〜）

## もちろん Big Query もいける ZE

ちょっと疲れたからコード例は若干割愛するけど以下のように BigQuery.Jobs で呼び出せる。

```tsx
function bqRunner(): void {
  const projectId = '***BQのprojectId***'

  const runQuery = (): GoogleAppsScript.Bigquery.Schema.QueryResponse => {
    const query = `
      SELECT count(*) FROM \`***テーブル名***\`
      WHERE
        ***クエリ***
    `
    const request: GoogleAppsScript.Bigquery.Schema.QueryRequest = {
      query,
      useLegacySql: false
    }

    const result = BigQuery.Jobs?.query(request, projectId)

    if (!result) {
      throw new Error('no result')
    }
    return result
  }

  runQuery()
}
```

なぜか DefinitelyTyped の型定義ファイルにタイポが存在して BigQuery の定義がエラーになるので適当にルートに index.d.ts を作成して以下のアンビエント宣言を追加しておこう。

いつまでも直んなかったらプルリク立てるわ。

```tsx
declare var BigQuery: GoogleAppsScript.Bigquery
```

BigQuery is not defined みたいなエラーが出る人は GAS のリソース > Google の拡張サービスから BIgQuery を有効にしておこう。

快適な GAS ライフを！

## 感想

この環境をもとに社内用に GAS のボイラープレート作っておいたらこの間一瞬役に立ったのでよかった。

Visual Studio みたいに使える Web エディターまあまあ存在するんだから Google は BQ にしろ GAS にしろもうちょっと使いやすいの実装して欲しいわね。


GASをローカルで開発する


せっかく Notion ブログにしたのでスマホから。

先週頃からずっと行きたかった。そう、焼肉きんぐ。

今回行ったのは焼肉きんぐ駒沢公園店。うちの近所である。

iPhone11pro で撮った画像が無駄に重くて読み込み遅すぎるので注意。

## いざ、きんぐへ！

スムーズ社総出で突撃。服装もこの揃い様である。

<img
  width={3024}
  height={2357}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383439/titanicrising.jp/yakiniku-king/DB384F17-1062-4C97-BFFB-F476A766B735-min_uatvrz.jpg`}
  alt={`DB384F17-1062-4C97-BFFB-F476A766B735-min.jpeg`}
/>

到着した瞬間肉を連打 🥩

焼肉きんぐはタブレットで注文するのでストレス無く連打が可能。

## うまい、うますぎるぅ！！

肉、かなり大きい。来るのも速い。

きんぐ、このサイズの肉メニューがかなり多い。おそらくカットするオペレーション削減で素早く届くのだろう。

<img
  width={3024}
  height={2311}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383442/titanicrising.jp/yakiniku-king/DE1743CD-BA9A-4D56-8299-46908940C17B-min_uf9jwo.jpg`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

肉を自分で焼かずに口を開けてガン待ちスタイルの自分にとっては焼きながら切るコスト関係ないのでかなりありがたい。

この存在感である。煙もあまり無くかなり快適。

<img
  width={3024}
  height={2345}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383441/titanicrising.jp/yakiniku-king/F396121E-FA75-4EBA-B030-425B9283ADFB-min_ie3ork.jpg`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

書く事無くなってきた。

これは楽しそうな社長。肉切ってくれた 🥓

<img
  width={2577}
  height={2028}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383442/titanicrising.jp/yakiniku-king/0E5976A5-89BD-4C4B-962E-4465FD811ED2-min_bag3my.jpg`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

食べ放題も終盤。かなりお腹一杯になったところで社長ラーメンとうどんをダブルで注文。

圧巻のスピードで麺が消えていく。さすがである。

<img
  width={4032}
  height={3024}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383441/titanicrising.jp/yakiniku-king/9BDC51AD-E4E2-4D5A-BC3D-9AABDC95A2F5-min_smo0mx.jpg`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

デザートタイムになりチーズケーキとアイス注文。チーズケーキはコーヒーで流し込んでしまい撮る前に消えてしまった。

これはアイス。

<img
  width={4032}
  height={3024}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383444/titanicrising.jp/yakiniku-king/5FE119DA-9D07-4BF1-9D91-12C0E0ABC383-min_csjzvm.jpg`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

総括：うまかった。個人的には G 角の上位互換。

これお店の看板。魚も食べにきたくなる美味さ！みたいな話らしい。これめちゃ好き。

<img
  width={4032}
  height={3024}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383439/titanicrising.jp/yakiniku-king/FA16FF2A-28DA-47C9-A53B-AE2A317153C4_mznmfo.jpg`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

てかこの店舗、向かいに叙々苑あるんだよね。面白い。

せっかく美味しそうな写真（？）がいっぱい撮れたのに ogp がワイズブラッドばっかじゃ味気ないので ogp 画像を Notion 側から設定できるようにする（唐突）

今の ogp こんな感じ。美しい。けどこれで焼肉の話題はちょっと…

<img
  width={1125}
  height={1102}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383441/titanicrising.jp/yakiniku-king/BBAB6A5E-A885-4BB8-92D7-FA9EB2D5FCC7-min_upqtpn.jpg`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

## Notion Blog を魔改造

まあとりあえず Notion でカラムを増やす。この調子で増やしてたらクソ CMS になりそう。

<img
  width={1108}
  height={396}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383440/titanicrising.jp/yakiniku-king/_2020-08-14_0.00.38_ximkog.png`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

もらう側のコードもいじっていきましょう。焼肉食べた後なので全然頭動かん…

まずは型定義追加

```tsx
// types/blog.ts

// 略
export type Post = {
  id: string
  Authors: string[]
  Slug: string
  Published: 'Yes' | 'No'
  Date: number
  Page: string
  preview: unknown[][]
  content: PostContent[]
  hasTweet: boolean
  Ogp: string // <- 追加！！！
}

export type Posts = Post[]
```

getStaticProps 関数で ogp 画像の url を取得して流し込む。

```tsx
// pages/[slug].tsx

export const getStaticProps: GetStaticProps<StaticProps> = async ({
  params: { slug },
  preview
}) => {
  // 略
  return {
    props: {
      post, // <- さっき追加したPostの型が効いている
      preview: preview || false
    },
    unstable_revalidate: 10
  }
}

const RenderPost: NextPage<StaticProps> = (props) => {
  return (
    <>
      <Head title={props.post?.Page} ogImage={props.post?.Ogp} />
      <Layout>
        <Post
          post={props.post}
          preview={props.preview}
          redirect={props.redirect}
        />
      </Layout>
    </>
  )
}

export default RenderPost
```

NextHead をまとめるコンポーネントを使っているので props として受け取り、undefined の場合は美しいワイズブラッドを表示し、string がしっかり入ってきた場合はそれを ogp 画像として表示する。

```tsx
// components/Head.tsx

// 略
<meta
  property="og:image"
  content={props.ogImage || `${BASE_URL}/images/tr.jpg`}
/>
```

## 画像入れてみる

ブログの中から使いたい画像を full で開いて url をコピーして embed link でペースト

<img
  width={792}
  height={496}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383441/titanicrising.jp/yakiniku-king/_2020-08-13_23.54.30_duelam.png`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

ツイッターで確認。

しっかり入っているので完成！

<img
  width={3024}
  height={1919}
  src={`https://res.cloudinary.com/dw86z2fnr/image/upload/v1620383441/titanicrising.jp/yakiniku-king/AFD37877-2992-4195-9E34-B3D0CBAA9F78_rocues.jpg`}
  alt={`DE1743CD-BA9A-4D56-8299-46908940C17B-min.jpeg`}
/>

食べ物とコードが入り乱れる意味不なブログになってしまったがこれもまた個性。

スマホからと言いつつパソコン開いてコード書いてしまった…

次のテーマは画像圧縮かな！！

以上。
