herohoroブログ

デモサイトのイラストを描いたらずっと悩んでいたOgImageの課題を無事解決できた



🔄   2022-08-02

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

経緯はこんな感じです。

ある日突然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のサイズを切替える

背景画像を作った

配色を調査

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

画像が読み込まれない場合はページを更新してみてください。

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

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

画像が読み込まれない場合はページを更新してみてください。

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

🤔
白と水色はeasy-notion-blogの象徴的なカラーかも.....

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

画像が読み込まれない場合はページを更新してみてください。

キャラクターを考える

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

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

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

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

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

画像が読み込まれない場合はページを更新してみてください。

🤔
easy-notion-blogと金太郎がなんかマッチしないんだよな.......

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

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

型抜きクッキーを発見\(^o^)/

画像が読み込まれない場合はページを更新してみてください。

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

画像が読み込まれない場合はページを更新してみてください。

個性を注入

【Fork】した後、

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

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

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

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

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

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

画像が読み込まれない場合はページを更新してみてください。

画像を使ってもらえた場所

Twitterのコミュニティー
画像が読み込まれない場合はページを更新してみてください。

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

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

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

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

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

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

🤔
リポジトリのトップってなんだろう???

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

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

本家リポジトリのREADME
画像が読み込まれない場合はページを更新してみてください。

😮
ロゴってこういう感じで使うのか!!!!

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

また嬉しくて

スクショを撮ったり、

リツイートしてみたり、

ニヤニヤしていました。

デフォルト画像を作った

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

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

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

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

😉
デフォルト画像なら私でもPRできそう!!!!!!!!

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

試行錯誤を表現

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

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

くらいの感覚でしたが、

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

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

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

画像が読み込まれない場合はページを更新してみてください。

画像を使ってもらえた場所_2

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

記事もよし、

Homeもよし、

記事一覧でもよし。

画像設定のコードが公開された

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

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

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

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

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

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

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

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

🤔
記事一覧ページも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}

urlOgImageって?

記事毎のコードは[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の場合も同じ

Twitter cardのサイズを切替える

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

画像が読み込まれない場合はページを更新してみてください。

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

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

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

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

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

☺️
結局今回のcommitの前の記述を維持しておけばOKってことだね


今日のまとめ

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

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

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

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

と思いながら

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

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

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

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

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

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

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

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

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/