つぶやきにリンク化と画像・動画・音声のプレビュー機能をつけた。

ブツ

• DEMO
• リポジトリ

前回まで

• つぶやきを保存するツール1
• つぶやきを保存するツール2
• つぶやきを保存するツール3

今回

• つぶやき可能文字数を140字、15行以内に制限した
• つぶやきにURLがあればプレビュー表示する
  • URLのうち拡張子がpng|gif|jpg|jpeg|webp|avifであればimg要素にする
  • URLのうち拡張子がmp4|avi|wmv|mpg|flv|mov|webm|mkv|asfであればvideo要素にする
  • URLのうち拡張子がwav|mp3|ogg|flac|wma|aiff|aac|m4aであればaudio要素にする
  • URLのうちhttps://www.youtube.com/watch?v=ならYouTube動画埋め込み表示する
  • 上記以外のURLらしき文字列ならa要素にする（https://,ipfs://）

課題

TwitterカードのようにOpenGraphで指定された画像を表示したい。だがCORSエラーに阻まれる。OpenGraphはHTMLのmeta要素により指定されているが、他ドメインのHTMLファイル読取はサーバにより禁止されている模様。それがCORSエラーとして表示され、アクセスできない結果になる。

これを解決するにはcurlなどローカルからアクセスするか、サーバ側を実装するしかない。でも私は自分で使えるサーバを持っていないし、その技術もない。となると選択肢はローカルでアクセスするしかない。でもそれだとブラウザから簡単に使えるツールではなくなってしまう。場合によっては特定OSでしか動作しなくなってしまう。それを避けたくてブラウザだけで動作することにこだわっている。

というわけで、今の所Twitterカード表示は諦める。

もしローカルでやるなら、URLとそのHTMLが指定したOpenGraph画像URLのDBをつくり、そこから<a href><img src>なコードを作成すればよさそうか。URL先のHTMLが変更されてもそのタイミングで更新することはできないのが欠点。