ポップリンクスのユニット画像の話
皆様ごきげんよう、宮野です。巷ではポップリンクス略してポプマスが話題ですね。
ポプマスの現時点で実装が決まっている任意のアイドル3人でユニットを作れるキャンペーンサイトがオープンしています。
で、作成後にTwitterでシェアするとリンクカードで画像が表示されるわけです。
♪オリジナルユニット完成♪ #ポプマスユニットプロデュースキャンペーン 開催中！#ポプマス #事前登録受付中 https://t.co/ViH3J7xiCk
— 宮野 慧 (@miyacorata) 2020年12月15日
Bildolibro vojaĝanto、エスペラントで絵本の旅人です。(ポプマスくんĝを通してくれなかったので死後裁きにあってほしい)
例示のため実際に作ってみたユニットがこちら。一人旅人というより暴走特急がいますが仕様です。
画像添付してないのにTweetに画像が表示される仕組み
TwitterにAPI経由で画像を投稿するにはTwitterAPIを叩くためのアプリ作成と、TwitterユーザによるOAuth承認が必要です。 しかしながら、昨今のTwitterのAPIは時間あたりのツイート数など規制が厳しく、特にアイマスのような多くのユーザを抱えるコンテンツのシェアに使うのは得策ではありません。
身近な例を挙げると、(シャニマスが無料10連をやっている時期など)日付変更直後に10連してからこのカード引いたよツイートが飛ばせない場合があるのはこのAPI規制によるものです。一気に多くのユーザが引いたよツイートするからですね。
APIはクソ、でも画像はツイートしたい、ではどうするか？をうまく解決したのが今回のポプマスユニットプロデュースキャンペーンであると言えるでしょう。
Twitterどっぷりのツイ廃に慣れ親しんでいる皆さんならばこれは画像を添付しているのではなくリンク先の画像を表示しているに過ぎないのだとおわかりいただけるでしょう。
「※「シェアする」ボタン押下時に、ツイート画面に入力されているURLをそのままツイートすると、作成した画像が表示されます」の理由は Open Graph Protocol 略してOGPと呼ばれる仕組みにあります。
Open Graph Protocol の話
OGPとは、Twitterなどにリンクを投稿したときに一緒に特定の画像を表示させるための仕組みです。
はてなブログでブログを開設している方なら投稿画面の編集オプションに「アイキャッチ画像」を選ぶ欄があることをご存じの方がいるかもしれませんが、このアイキャッチ画像こそOGPを活用している身近な例の一つです。
ウェブページというのはHTMLというマークアップ言語によって記述されているわけですが、OGPの画像を設定するにはこの中にOGPの画像を指定したmeta要素を記述することで実現されます。
詳しく知りたい方は以下のリンクからOGPの公式リファレンスをご覧いただけます。
※ 実際にTwitterに画像を投げるためにはもうちょっと細かい独自の設定が必要です。
ポプマスは如何にして同一ページでユニットごとの画像表示を実現しているのか
普通のリンクであれば同じページに飛ぶなら同じ画像が表示されそうですが、今回はツイートした人、というかツイートされてるユニットごとに異なる画像が表示されています。なぜなのか？
結論を言ってしまうとアレは同一のページではないためです。
表示される見かけの内容こそ全く同じものですが、ブラウザのアドレスバーをよく見るとユニットごとにURL末尾にある key= 以降の部分が違うことにお気づきいただけるでしょう。
ブラウザからしてみればいくら見かけの内容が同じでもURLの文字列が1文字でも違うURLは別のページです。(GETリクエストといい、Google検索などでも使う基本的な仕組みです。)
この key= をユニットごとに異なる文字列を割り当ててそのURLをシェアさせることにより別の画像をOGPに表示させていた、というわけです。
実際にこの key= をめちゃくちゃにしてアクセスするとページはちゃんと表示されますがOGP画像はエラーにより表示されなくなります。(なおOGP画像用のURLを叩くとエラーページへの302リダイレクトが発生しておりお行儀はよくありませんがまぁよくあることです。)
Q. 画像DLし損なったんだけどDLできる？
できます。
https://poplinks.idolmaster-official.jp/unitproduce_cp/image.php?img= に key= より後ろの部分を引っ付けるだけです。
解説
PC版のChrome, EdgeあるいはFirefoxなら Ctrl + U でページのソースを見ることができます。
36行目付近に
<meta property="og:image" content="https://poplinks.idolmaster-official.jp/unitproduce_cp/image.php?img=bzjsurlBaA4M8xaWKqSG"> <meta name="twitter:image:src" content="https://poplinks.idolmaster-official.jp/unitproduce_cp/image.php?img=bzjsurlBaA4M8xaWKqSG">
というコードがありますが、これこそがOGPの画像を指定するための要素です。このURLをコピペして新しいタブで開くなりなんなりすると画像が降ってきます。
property="og:image" は純粋なOGPの仕様による画像指定、name="twitter:image:src" はTwitterが独自に策定した仕様による画像指定です。指定されてるURLは同じですね。
余談ですがHTML5においてmeta要素にproperty属性は規定されていないのですが(参考:MDN)、OGPなどでしばしば用いられます。実質的にはname属性と同じ扱いを受けている...はずです。たぶん。間違ってるかも。
余談
head内をよく見ると <link rel="apple-touch-icon" href="... でfaviconと異なる画像が指定されています。ということは？
ちゃんとfaviconじゃないアイコンになっていますね！ショートカットとして登録すればホーム画面にこの画像で表示されます。
