0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ProtoPediaAdvent Calendar 2021

Day 19

ProtoPediaのストーリーにURLからコンテンツの埋込をできるようにした話

Last updated at Posted at 2021-12-18

初期のころからProtoPediaを使っていた人はお気づきかと思いますが、昔のProtoPediaでは作品登録のストーリーにURLを入力しても「コンテンツの埋込」ができずに、URLがそのまま表示されておました。

やっぱりサービスとして、Twitterとかスライドサービスのリンクをよくブログとかで見るように「コンテンツの埋込」ができるようにしてほしい。

そんな要望もあり、コンテンツの埋込対応を2021年7月ごろに対応致しました。

コンテンツの埋込対応

でも実際にコンテンツをブログカードなどに変換するにしても、対応したいサービスは数も多くそんなにやれるの?って考えてしまいます。

対応したいサービスとか

  • Twitter
  • YouTube
  • SlideShare
  • SpeakerDeck
  • CodePen
  • 等々

なにか外部サービスを利用できないかとみつけたのが、Iframelyというサービスで、自分の作っている他のサービスでも利用していたりします。

Iframelyは実はオープンソースでも公開をしており、今回はそちらを使っています。

SoWkIImgAStDuU9wtBJ-SVFAnqrB7ZSjUjoy-N5pXuAkdPr2G55-INv0Qafc8XU22PRnJ2jAp4tDgUI2CGYenxI0YyiXDIy5Q3i0.png

Iframelyのオープンソースをサーバに配置して、ProtoPediaから内部的に呼び出しを行うことで、クライアント側で表示されたときにURLを自動変換するように利用しています。

こんな風に表示されたりします

  • Twitterの場合
    image.png

  • SlideShareの場合
    image.png

実際のところ、どのサービスが対応しているのか?というのは約1900サービスあるのですが、正直試してみないとわかりません。
なので、以下の場所からURLチェックをしてみるとよいかと思います。

また、対応していなくても以下の場所からサービスの対応を申請すると対応してもらえたりするので、一度試してみるとよいかもしれません。

うまく申請が通ると自分で作ったサービスとかもリッチコンテンツとして対応できるようになったりします。

image.png
自サービスに埋め込みコード対応をする方法

最後に

ProtoPediaをより良くするために少しずつですが、メンテナンスとか改修とかしています。
何かこうして欲しいとかの要望がありましたらこちらからお知られしていただければと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?