タイトルからしてあべこべですが、

経緯はこんな感じです。

ある日突然Twitterにコミュニティ機能が出現し.......

easy-notion-blogのコミュニティが用意されました⭐

デフォルトで設定されていたカバー画像を変えたいご様子のアルパカ先生。

コミュニティーの背景画像ここ👇

すでに「easy-notion-blog」っていうタイトルは分かる状態。

なんとなくのeasy-notion-blogに対するイメージを

イラストにしてみることにしました。

依頼された......

というわけではなく、

なんとなくイラストに落とし込んでみたい衝動があったのです(´・ω・｀)

というかる〜〜〜〜い感覚で投稿してみました。

1. 背景画像を作った
   1. 配色を調査
   2. キャラクター考える
   3. 個性を注入
   4. 画像を使ってもらえた場所
2. デフォルト画像を作った
   1. 試行錯誤を表現
   2. 画像を使ってもらえた場所_2
3. 画像設定のコードが公開された
   1. urlOgImageって？
   2. デフォルト画像を表示させる条件
      1. Twitter cardのサイズを切替える

サンプルサイトは.....

こんな感じで背景白&アクセントの水色......

それに加えてアルパカ先生のサイトも......

こんな感じでこちらも白と水色。

ってことで白と水色をベースにして考えることにしました。

GitHubで公開されているeasy-notion-blogリポジトリは

【Fork】すれば誰でも自分のリポジトリへ落とせて.......

GitHubをはじめて使った私にとって感動の連続でした。

その【複製したら使える】といった感じをイラストで表現するとすれば......

まず思いつくのは金太郎飴。

easy-notion-blogは和風・洋風で言えば洋風なイメージ。

洋風なイメージの金太郎飴的キャラクターを捜索してみたら......

型抜きクッキーを発見＼(^o^)／

これをもとに男の子や女の子のキャラクターを作ってみることにしました。

【Fork】した後、

記事を書いて楽しんだり、

カスタマイズして楽しんだり......

いろいろやりこみ要素のあるeasy-notion-blog。

「みんな違ってみんないい」

そんな雰囲気を出せたらいいのかな〜

と思い、男の子や女の子の色はバラバラにしてみました。

https://twitter.com/i/communities/1497431576975908868

「使ってもらえたらいいな~」

といった軽い感じだったのでまさか背景画像にしてもらえるとは思いませんでした(●´ω｀●)

うれしくてリツイートしたり、

スクショ撮ったりしながら、

数日ニヤニヤしていました(●´ω｀●)(●´ω｀●)

いつものことながら「？？？」.......。

初のPRに挑戦することとなりました(●´ω｀●)

と完成したものを見てやっと意味が分かり、

また嬉しくて

スクショを撮ったり、

リツイートしてみたり、

ニヤニヤしていました。

完全にやる気スイッチの入った私は

OgImage画像を作ることを提案したものの

コード読解力の低い私は苦戦しそうな雰囲気....。

そしたらアルパカ先生がデフォルト画像を推してくださいました☺️

ってことで作ってみることにしました＼(^o^)／

OgImageを作ろうとツイートした時は

「簡単に配置を変えて文字を追加すればいいかな〜」

くらいの感覚でしたが、

【デフォルト画像】というワードで

ますますやる気スイッチ＆ギアが入り、

キャラクターに動きを付けてみることにしました。

サイトリンクをシェアした時に表示されるデフォルト画像になりました(●´ω｀●)(●´ω｀●)

記事もよし、

Homeもよし、

記事一覧でもよし。

デモサイトに画像が追加されたことで

「画像の設定はこうやって記述するんだよ」

というサンプルが公開されましたΣ(ﾟДﾟ)

実は大規模リファクタのあったv0.4以降、

画像設定がうまく行かず完全に迷宮入りしていました。

記事がシェアされた時に表示される部分はクリア。

Homeがシェアされた時に表示される部分もクリア。

残すは記事一覧の表示でした。

その疑問が今回のcommitによってクリアになりました⭐

{urlOgImage ? (
        <meta property="og:image" content={urlOgImage} />
      ) : NEXT_PUBLIC_URL ? (
        <meta
          property="og:image"
          content={new URL('/default.png', NEXT_PUBLIC_URL).toString()}
        />
      ) : null}
      <meta name="twitter:card" content="summary_large_image" />
      {urlOgImage ? (
        <meta name="twitter:image" content={urlOgImage} />
      ) : NEXT_PUBLIC_URL ? (
        <meta
          name="twitter:image"
          content={new URL('/default.png', NEXT_PUBLIC_URL).toString()}
        />
      ) : null}

記事毎のコードは[slug].tsx

return (
    <div className={styles.container}>
      <DocumentHead
        title={post.Title}
        description={post.Excerpt}
        urlOgImage={post.OGImage} //👈　ここ
      />

      <div className={styles.mainContent}>
        <div className={styles.post}>
          <PostDate post={post} />
          <PostTags post={post} />
          <PostTitle post={post} enableLink={false} />

          <NoContents contents={blocks} />
          <PostBody blocks={blocks} />

記事を投稿するNotion データベースにOgImage列があり、

この列へ登録した画像を表示してくれます。

もう一度コードを見ると......

{urlOgImage ? (
        <meta property="og:image" content={urlOgImage} />
      ) : NEXT_PUBLIC_URL ? (
        <meta
          property="og:image"
          content={new URL('/default.png', NEXT_PUBLIC_URL).toString()}
        />
      ) : null}
  <meta name="twitter:card" content="summary_large_image" />
  {urlOgImage ? (
        <meta name="twitter:image" content={urlOgImage} />
      ) : NEXT_PUBLIC_URL ? (
        <meta
          name="twitter:image"
          content={new URL('/default.png', NEXT_PUBLIC_URL).toString()}
        />
      ) : null}

• urlOgImageが....
  • あったら....
    • urlOgImageを表示させる
  • なかったら....
    • publicフォルダ内にあるdefault.pngを表示させる(ただしNEXT_PUBLIC_URLの設定済みな場合のみ)

※　Twitterの場合も同じ

今まではデフォルト画像の時は小さなcardで表示されていました。

これを使い続けたい場合は.....

<meta
        name="twitter:card"
        content={
          pathname === '/blog/[slug]' && urlOgImage
            ? 'summary_large_image'
            : 'summary'
        }
      />

twitter:cardのある<meta>内に条件を追加すればOK。

pathnameが記事のslugでOgImageが設定...

• されているなら....
  • 大きなサイズのcardにする
• されてないなら....
  • 普通サイズのcardにする

今日のまとめ

1. 背景画像を作った
   1. 配色を調査
   2. キャラクター考える
   3. 個性を注入
   4. 画像を使ってもらえた場所
2. デフォルト画像を作った
   1. 試行錯誤を表現
   2. 画像を使ってもらえた場所_2
3. 画像設定のコードが公開された
   1. urlOgImageって？
   2. デフォルト画像を表示させる条件
      1. Twitter cardのサイズを切替える

画像設定で悪戦苦闘した過程はこちらで記録してます⭐

無事設定できてめでたしめでたしです(*´ڡ`●)

「いつかContoributorになりたい！！」

と思いながら

なかなかコードスキルが向上せず

「このエラーこれで解決できますよー」的な

かっこいいPRレベルには達していないながらも、

(nitakingさんのPRを拝見した時「マジかっこええε≡≡ﾍ( ´Д`)ﾉ」と感動しました)

イラスト枠で使っていただける機会をいただけて

ありがたかったです(*´∀｀*)

アルパカ先生のアップデート解説記事でも扱っていただき、

ますますニヤニヤしている今日このごろですwwww