つぶやきにリンク化と画像・動画・音声のプレビュー機能をつけた。
ブツ
前回まで
今回
- つぶやき可能文字数を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://
)
- URLのうち拡張子が
課題
TwitterカードのようにOpenGraphで指定された画像を表示したい。だがCORSエラーに阻まれる。OpenGraphはHTMLのmeta
要素により指定されているが、他ドメインのHTMLファイル読取はサーバにより禁止されている模様。それがCORSエラーとして表示され、アクセスできない結果になる。
これを解決するにはcurlなどローカルからアクセスするか、サーバ側を実装するしかない。でも私は自分で使えるサーバを持っていないし、その技術もない。となると選択肢はローカルでアクセスするしかない。でもそれだとブラウザから簡単に使えるツールではなくなってしまう。場合によっては特定OSでしか動作しなくなってしまう。それを避けたくてブラウザだけで動作することにこだわっている。
というわけで、今の所Twitterカード表示は諦める。
もしローカルでやるなら、URLとそのHTMLが指定したOpenGraph画像URLのDBをつくり、そこから<a href><img src>
なコードを作成すればよさそうか。URL先のHTMLが変更されてもそのタイミングで更新することはできないのが欠点。