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

# はじめに

自サービスをブログや他サービスに埋め込んで、利用促進をしたい！
そんな思いで、埋め込みコードについて調べたこととURLを入力しただけで、埋め込みコードに変換されて表示される方法について調べて、実装してみました。

今回、実装してみるサイトは、作品の苦労話を魅せるポートフォリオ「[CHROCO](https://chroco.ooo/)」で、タイムラインで表示できるWebポートフォリオ作成サービスです。

https://twitter.com/chroco_ooo/status/1433982057277915136

# 埋め込みコードを自サービスに実装する

まずは埋め込みコードを対応するためには、oEmbedの規格を理解する必要があります。

> oEmbedとは、埋め込み用コードを取得するためのシステム、統一規格です。TwitterやYoutube、Vimeoなどといった世界的に有名なwebサービスの各々がこのoEmbedの規格を採用しています。

oEmbedの公式サイトがこちら。

https://oembed.com/

## 自サービスをリッチコンテンツで表示できるようにする

自サービスを他サービスに埋め込むためには、リッチコンテンツで表示できるようにある程度の改造が必要になります。

### ・Before
![FireShot Capture 485 - 滝を求めて三千里 - CHROCO - chroco.ooo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/7d6a8e66-f618-7c9c-6c4f-43f4af9fd1d5.png)

↓↓↓↓↓

### ・After
![FireShot Capture 486 - 滝を求めて三千里 - CHROCO - chroco.ooo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/2f7bffd0-90d9-09c1-a68a-3ef52a2927bb.png)

ヘッダー・フッター部分やナビ部分を消しています。

## oEmbed のレスポンスを返すAPIを実装する

Rest APIのGetで以下のようなJsonを返す必要があります。

```json
{
"version": "1.0",
"title": "Display the CHROCO timeline.",
"width": "100%",
"height": 600,
"type": "rich",
"provider_name": "CHROCO",
"provider_url": "https://chroco.ooo/",
"html": "<iframe id='chroco-frame' src='https://chroco.ooo/story/e52c0f58-a2bf-41cd-9313-368369772ff3?embed=true' allowfullscreen='true' style='width:100%;height:600px;border:1px #ccc solid;border-radius:10px;'></iframe>",
"url": "https://chroco.ooo/story/e52c0f58-a2bf-41cd-9313-368369772ff3"
}
```

リッチコンテンツは、以下のパラメーターが必要になります。

- **type**<br>
リソースタイプ。有効な値と、値固有のパラメーターを以下に説明します。
- **version**<br>
oEmbedのバージョン番号。これはでなければなりません「1.0」。
- **html**<br>
リソースを表示するために必要なHTML。HTMLにはパディングやマージンがあってはなりません。消費者は、XSSの脆弱性を回避するために、ドメイン外のiframeにHTMLをロードすることをお勧めします。マークアップは有効なXHTML1.0Basicである必要があります。
- **width**<br>
HTMLを表示するために必要なピクセル単位の幅。
- **height**<br>
HTMLを表示するために必要なピクセル単位の高さ。

詳しくは[こちらのサイト](https://oembed.com/)に載っています。

## HTMLのheadタグにoEmbed情報を埋め込む

ココはタイトルの通りですが、このようにheadタグをサイトに埋め込みます。

```html
<link rel="alternate" type="application/json+oembed" href="https://chroco.ooo/embed?url=https://chroco.ooo/story/e52c0f58-a2bf-41cd-9313-368369772ff3" />
```

これのURLを見て、Rest APIをたたいて、iframeのHTMLを取得する流れのようです。

# URLを入力するだけで埋め込みコードに自動変換されるようにする

埋め込みコードを自サービスに実装してから、oEmbedの[公式サイト](https://oembed.com/)の登録申請を行うと、FacebookやSlack、WordPressなど、多くのサービスはoEmbed情報を使用してリンク情報を表示します。

ちなみにはてなブログではURL記法で:embedを指定することで、oEmbed対応サイトを記事に埋め込むことができるようになります。

```
[https://chroco.ooo/mypage/blue_islands:embed]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/a056f7c6-1092-c5fd-464e-96faac6220ef.png)

プロバイダの登録申請については下のGithubのprovidersのフォルダに登録したいサービスの情報をプルリクすることで、追加できます。

> https://github.com/iamcal/oembed

ちなみに追加したファイルは[ココ](https://github.com/iamcal/oembed/blob/master/providers/chroco.yml)にのっています。

また、http://iframely.com/debug などを使ってoEmbedが認識されているかを確かめてみることもできます。

その他にもoEmbedに関連したサービスもあります。

### [Iframely](https://iframely.com/)

Iframelyは、埋め込みコードの生成をまとめて引き受けてくれるサービスです。
URLを入力するだけで埋め込み用のコードを生成してくれます。

こちらからプロバイダの申請をすることができます。

> https://iframely.com/qa/request

### [note](https://note.com/)

noteはクリエイターが文章や画像、音声、動画を投稿して、ユーザーがそのコンテンツを楽しんで応援できるメディアプラットフォームです。ま、気楽なブログ的な感じなのですかね。

そんなnoteにも登録申請をすることができます。
> [embed機能 開発ガイドライン](https://help.note.com/hc/ja/articles/900001827326-embed%E6%A9%9F%E8%83%BD-%E9%96%8B%E7%99%BA%E3%82%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3)

# 反映例

### [ProtoPedia](https://protopedia.net/)

プロトタイプのストーリーがいい感じにタイムラインにできました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/1dc5d4f0-e8b8-4eec-7245-33e8b6ea0bf8.png)



他にもいろいろと例を増やして行きますね。

# どの様にうれしいのか？

自分でデザインせずとも、ブログやにインタラクティブコンテンツやビジュアルコンテンツを表示することができるので、非常に便利です。
いろいろな場所で披露する機会が増えるので、自サービスの展開にも役立てれるかなって思っています。