https://labs.cybozu.co.jp/blog/akky/tags/twitter-card/ Recent content in Twitter-Card on akky@サイボウズラボ・ブログ Hugo ja Wed, 09 Mar 2022 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/ Wed, 09 Mar 2022 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/ <p><a href="https://github.com/statico/ycombinator1.com">statico/ycombinator1.com</a> は、英語圏の有名IT掲示板 Hacker News の URL に対し、SNS で共有した際に表示されるプレビュー情報を拡張する、という単機能のサービスです。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-github.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-github_hu_bc0c79475775eeac.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-github_hu_4e6c09a72c2fb770.webp 768w, https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-github_hu_e687dda921abc23a.webp 822w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-github.png" width="822" height="576" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>Hacker News 掲示版の各スレッドの URL は &ldquo;news.ycombinator.com&rdquo; というドメインで提供されていますが、&ldquo;news.ycombinator1.com&rdquo; と1を追加すると、Hacker News の運営とはまったく関係ないこの方のサービスにつながります。そこで行われることはというと</p> <ul> <li>OGP や Twitter Card などプレビューで使われる情報を増やした html を返す</li> <li>訪問者が一般のブラウザなら、オリジナルの Hackre News のスレッドへ転送する</li> </ul> <p>リンクを見に行った人間のユーザーは、これまで通りの Hacker News に行けますが、twitter や Facebook などのSNS、Slack や Skype などのメッセンジャーなどでリンクを貼られた際は、拡張されたプレビューが表示される、というわけです。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-twitter.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-twitter_hu_c69cf8b57578259b.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-twitter_hu_dfa7e8217a233455.webp 758w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-twitter.png" width="758" height="632" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>ツイッターで、オリジナルのURLを貼った場合にはプレビューは出ませんが、1つきのURLにすると記事のタイトル、votes や comments の数などの情報が出ます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-slack.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-slack_hu_c5895c623164c04d.webp 480w, https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-slack_hu_de9ae822ee955d8d.webp 656w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2022/03/hacker-news-preview-enhancer/hacker-news-link-preview-enhancer-on-slack.png" width="656" height="275" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>Slack でも同様。1をつけてURLを貼ると、チャット相手はリンクを開かなくても少し詳しい情報を得ることができます。</p>