読者です 読者をやめる 読者になる 読者になる

女子WEBエンジニアのTechメモ

都内の某企業でマーケッターやってます。営業→WEBエンジニア・オフショア開発チーム駐在→マーケッター(SEO)ちょっと便利だなと思ったことをメモしています。

【作ってみた】他ブログサービスでもはてブみたいに美しい外部リンクカードが貼れるアプリ作ってみた

Heroku API


はてなブログの場合、外部URLをはろうとすると、iframeを使って綺麗に整形されたカードにしてくれますよね。

↓例えばこんな感じ。
www.wegirls.site

ページタイトルもわかりやすいし、アイキャッチも入るし、すごくいい感じ。と気に入っていたのです。

でも、他のブログサービスだとこうはいかない。例えばbloggerとか、カードにして貼り付けてくれる機能はないのです。
↓頑張ってもこんな感じになってしまう。いちいちiframe書くの面倒だし。
あざらし女子の日常


と思ってたら、このカード化してくれるやつ、なんとはてなブログがAPI公開してますよ!というのを見つけたので、
簡単にカードのHTMLが出力できるアプリを作ってみました。

作ってみたといっても、JSぺろっと書いただけの簡素な作りですが。
個人で使う分にはこれくらいで十分!

(作ったよ)はてなブログカードのような美しい外部リンクカードを作成してくれるアプリ

http://iframegetter.herokuapp.com/
iframegetter.herokuapp.com

↑こちらです。

URLとタイトルを入力してサブミットすると、HTMLが出力されます。

URLとタイトルはカードの表示に不可欠なので、入力してくださいね。入力がないと、勝手にこのサイトの紹介になります^^

使ったはてなブログのAPI

はてなブログoEmbed APIを公開しました。ブログカードの情報をAPIで取得できます(開発者向け) - はてなブログ開発ブログ

今回利用しているのはこちらのAPI。

<iframe style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="女子WEBエンジニアのTechメモ" src="http://hatenablog.com/embed?url=http://www.wegirls.tech" frameborder="0" scrolling="no"><a href="http://www.wegirls.tech" data-mce-href="http://www.wegirls.tech">女子WEBエンジニアのTechメモ</a></iframe>

http://hatenablog.com/embed?url=の中に好きな要素を埋め込んで利用しています。

アプリ作成で意外とはまったiframeの表示

このアプリを作る過程で一番ハマったのは、「iframeタグをpreタグの中に表示するのが、どうしてもHTMLソースコードでなくてiframeそのものになってしまう!!!」ということ。

エンコード・デコードでいろいろ試してもダメでちょっと困っていたのですが、HTMLタグの< は &lt;
> は &gt;
となります。

なので、実際のJSコード内ではこんな感じでもっさりしてます。

document.getElementById("result").innerHTML = '&lt;iframe style="display: block; width: 100%; height: '+height+'px; max-width: '+width+'px; margin: 10px 0px;" title="'+title+'" src="http://hatenablog.com/embed?url='+url+'" frameborder="0" scrolling="no"&gt;&lt;a href="'+url+'" data-mce-href="'+url+'"&gt;'+title+'&lt;/a&gt;&lt;/iframe&gt;';