https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%98%E3%83%83%E3%83%80/ Recent content in ヘッダ on akky@サイボウズラボ・ブログ Hugo ja Sun, 09 May 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/ Sun, 09 May 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/ <p><a href="https://twitter.com/tdinh_me">Tony Dinh さん(@tdinh_me)</a>が twitter で面白い実験をしています。</p> <p>絵文字を彼のアカウントに向けてリプライで送ると、その絵文字がツイッターのヘッダバナーに表示されるというもの。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header-akkys-reply.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header-akkys-reply_hu_5c5057d26959ca60.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header-akkys-reply_hu_54d08efc6fa57a44.webp 623w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header-akkys-reply.png" width="623" height="228" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>こんなリプライを送ると、<a href="https://twitter.com/tdinh_me">ヘッダの画像</a>が以下のように</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header_hu_c2df866040960f92.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header_hu_e0acc506dce57446.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header_hu_add4b748ba6ef37b.webp 917w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/05/change-twitter-header-dynamically/real-time-twitter-header.png" width="917" height="608" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>今リプライで送った絵文字🈲が、20個並んで表示されている絵文字の先頭に出ています。</p> <p><a href="https://github.com/trungdq88/real-time-twitter-banner">ソースコードも公開されていて</a>、自分のtwitterアカウントで動かすこともできます。</p> <p>twitter API の開発者登録をし、APIキーを設定して Node 環境で動かせば、API の呼び出し回数の制限内で Twitter API を呼び出し、自分へのリプライ(というか自分のアカウント名が入ったツイート)を取得、そこから絵文字を抽出しヘッダ画像を生成、Twitter API でヘッダ画像を差し替え、という動作でヘッダ画像を更新してくれます。</p> <p>デフォルトのヘッダ画像を使うこともできますし、サイズを合わせれば別の好きな画像で絵文字を入れることもできます。</p> <p>Twitter API でヘッダ画像の更新もできたんですね。リプライされた絵文字が出たからどうだ、という話もありますが、工夫次第でフォロワーとのインタラクションから面白い画像を作れるのではという気もします。</p> <p>via Twitter</p>