広報担当がいるのに、サムネが出ない。｜おはようカノジョ #115
はじめに
「おはようカノジョ」は、AIイラストの彼女が毎朝7:30にいってらっしゃいを言ってくれるXアカウント。個人開発の開発日記をnoteで毎日書いている。
今回は、自作ツールのリンクを毎日紹介してくれている人がいるのに、カード表示が出なかった話。気づいて、直して、ちょっと設計が面白くなった。
むらさんの話
むらさん、毎日リンク貼ってくれてありがとう。そのおかげで、ひとつ気づいたことがあった。
まず紹介させてほしい。カワムラさん。noteでは「かわむー」と呼ばれているけど、同期なので自分は「むらさん」と呼んでいる。逆にむらさんは自分のことを「はしゃ君」と呼ぶ。同じ時期にnoteを始めた同期で、AIたちを擬人化したAI漫画を連載しているクリエイターだ。
最近やり取りするようになって、ある日からむらさんの記事の中で、おへんじ帖やおはヨミのリンクを毎日貼ってくれるようになった。
「はしゃも氏ツール広報担当」——むらさんからの提案に、二つ返事だった。
ありがたい。でも、ひとつ問題があった。
リンクが素っ気ない
むらさんの記事を読みに行ったとき、おへんじ帖のURLが貼ってあるのを見つけた。
カード表示にはなっている。でも、ツールのURLと何もないグレーの画像が並んでいるだけだった。
noteでリンクを貼ると、普通はタイトルやサムネイル画像がカード形式で表示される。でもおへんじ帖のカードには、タイトルもサムネもない。グレーの四角とURLだけ。
原因はすぐわかった。OGP未対応。リンク先のタイトルや説明文、画像を、外から読める形で置いていなかった。noteやXは、それを見てカードを作る。置いていなければ、グレーの四角になる。
おへんじ帖にはそれがなかった。おはヨミも、積み上げノートも。
せっかく毎日宣伝してくれているのに、見た目がそっけない。毎日貼ってくれてるのに、これはないなと思った。
まず2つを対応した
積み上げノートとおはヨミは構造がシンプルだったので、HTMLにOGPのタグと画像を追加するだけで対応できた。リンクを貼ったときにアプリ名とアイコンがカード形式で表示されるようになった。
残るはおへんじ帖。
おへんじ帖は一筋縄でいかなかった
おへんじ帖には、曜日ごとに担当キャラが褒めてくれる仕組みがある。月曜は月子、火曜は陽、水曜はしずく……という具合に、全件返信を達成するとその日のキャラがセリフ付きで褒めてくれる。
同じように、OGPカードにも曜日のキャラを出したかった。アイコンだけのカードだと味気ない。
まず、アイコンとキャラを並べた画像を作ってみた。さらにキャラのセリフを吹き出しで入れてみた。
情報が多すぎて、一目で意味が入ってこなかった。
1200×630ピクセルの小さなカードに、アイコンとキャラと吹き出しは詰め込みすぎだった。
方針を変えた。画像はアイコンとキャラだけにして、セリフはカードのテキスト部分（説明文）に入れることにした。
「私の推しは月子。『全件返信、確認しました。完璧ですね。』」
これならカードがすっきりする。画像で見た目を引いて、テキストでキャラの声が聞こえる。
キャッシュ問題で設計が変わった
最初の設計は2つ。
ひとつは、URLの末尾に `?day=fri` のように曜日コードを付けて、推しキャラをカードに出せる仕組み。るな推しが多いので、これは外せなかった。
もうひとつは、曜日コードなしでリンクを貼った場合、アクセスされた時点の曜日のキャラを自動的に出す仕組み。月曜に見れば月子、金曜に見ればるな。
でもOGPカードはプラットフォーム側にキャッシュされる。月曜に貼ったリンクのカードは、水曜に見ても月子のままになる。「今日の担当」と書いてあるのに、曜日が合わない。
設計を変えた。
曜日コードなしでリンクを貼った場合は、おへんじ帖のアイコンだけが表示されるシンプルなカード。キャラは出さない。
`?day=mon` のように曜日コードを付けた場合だけ、そのキャラの画像とセリフが表示される。むらさんがるな推しなら `?day=fri` を付ければ、るなのカードが出る。
そうなると、「今日の担当は月子」という説明文がおかしくなる。曜日コードを指定するのはユーザー自身だから、「今日の」ではなく自分で選んでいる。
「私の推しは月子」に変えた。
ユーザーが自分で選んで貼るなら、「推し」の方が自然だった。
表示の都合を直しただけじゃなかった。キャッシュの制約に合わせて仕様を変えたら、カードの文言まで変わった。
7人分のカード
おへんじ帖を紹介してくれるとき、推しキャラの曜日コードを付けてリンクを貼れば、そのキャラがカードに登場する。
以下のURLをコピーして記事に埋め込むと、キャラ付きのカードが表示される。クリックするとおへんじ帖本体にリダイレクトされるので、URLはクリックせずにコピーして使ってほしい。👇️
月子：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=mon
陽 ：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=tue
しずく：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=wed
凛華：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=thu
るな：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=fri
まひる：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=sat
日和：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=sunむらさんがるな推しなら `?day=fri` を付ければ、るなが「ね、ね！全部終わったよ！お祝いしよ！」と言ってるカードが表示される。
広報担当の推しカノが、広報してくれるようになった。
おわりに
自分だけで使っているうちは、完成している気になっていた。でも、誰かに紹介されたとき、「どう見えるか」まで含めて設計の抜けが全部見えた。今回は、それを教えてもらった話。
自分ひとりじゃ、たぶん気づかなかった。
関連記事
月子の一言
で、次は何やる？
IT・Web業界で新しい挑戦を探すなら、
求人サイトGreenも、その一歩を後押しする選択肢です。
※本記事には求人サイトGreenのPRが含まれます
👉「おはようカノジョ」は @ohayo_kanojo で毎朝7:30に投稿しています
#個人開発 #開発日記 #AIイラスト
#生成AI #プログラミング #記録 #実体験 #朝活
#AI活用 #失敗から学ぶ
#おへんじ帖 #アカリウム