外部コンテンツを埋め込むためのJSON生成「Iframely」
Iframelyはnode/JavaScript製のオープンソース・ソフトウェア(MIT License)です。
今はソーシャルサービスが隆盛で、外部サービスにコンテンツを投稿することが多いかと思います。そうして登録したコンテンツを再利用しやすくするサービスがIframelyです。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.14.36.1376309330.png)
一例。500pxに投稿した写真を埋め込みやすくします。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.14.47.1376309335.png)
アイコンやサムネイルなども取得できます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.14.59.1376309339.png)
Vimeoを埋め込む場合。そのまま動画の再生も可能です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.15.11.1376309344.png)
サムネイルの場合は動画ではなく画像です。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.16.00.1376309348.png)
SoundCloudを指定した場合もそのまま音楽再生ができるようになっています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.16.05.1376309353.png)
サムネイルは音楽ジャケット。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.16.16.1376309357.png)
ブログ記事の場合。Twitterカードに送る際のデータ確認もできます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.16.47.1376309361.png)
MOONGIFTの場合。メタタグの確認とサムネイル画像の表示ができています。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.18.22.1376309366.png)
Open Graph用の確認もできます。
[](http://images.moongift.jp/2013/08/Screenshot 2013-08-12 12.18.25.1376309371.png)
オリジナルデータではどのようなJSONフォーマットになっているか確認できます。
Iframelyを使うと外部サービスにあるデータを取り込んで表示したりするのがとても簡単になります。URLを引数として渡すだけなので、使い方は簡単です。メタタグを適切に設定しておけば任意のWebサイトでも利用可能です。
MOONGIFTはこう見る
2000年くらいからはSEOとしてコンテンツをいかに適切に構造化するかが大事になっていました。そしてソーシャルの時代になってTwitterやFacebookにコンテンツを奇麗に表示するためにOpen GraphやTwitter Cardが求められるようになっています。
こうした仕組みによってWebサイト同士のつながりが柔軟になっていくでしょう。ドメイン以下に全てのデータを配置する必要はなくなり、外部サイトへ登録したデータをJavaScriptを使ってキュレーションするのが当たり前になっていると言えます。