【iframely】HTMLをペーストするだけで、綺麗なリッチメディアを埋め込めるツール

- Advertisement -クリブログ

記事を書く人は、ブログを書く時に外部リンクや内部リンクをキレイなブログカードにして表示したいと考えたことはあるはず。

MediumやNoteなどは、リンクをコピーしエディタにペーストすると勝手に変換されるが、WordPressといったCMSでは純正でリッチメディアには対応していない。

筆者はfunctions.phpにPHPコードを書きこみリンクをブログカードへ変更するよう設定しているが、ぶっちゃけコードなんか見たくない人が大多数だと思う。

そこで、本記事ではHTMLコードを貼り付けるだけで、見栄えの良いリッチメディアに変換してくれる『iframely』というサービスを紹介する。

このツールを使うだけで、記事の質やオシャレさがグンと上がるはずだ!

iframelyの使い方

使い方といっても非常に簡単。

高度なカスタマイズをする場合は登録しないといけないが、URLを単純に書き込むだけで十分に綺麗なリッチメディアにしてくれる。

したがって、特に登録はしなくても良いと思う。

まずは、このURLにアクセスしてほしい。

iframely

iframelyにアクセスしたら、「Just Get A Code」をクリックしよう。

リンクをペーストするフォームが表示されるので、任意のURLを入力する。

iframely

今回は、筆者のブログである「https://keisukekuribara.com」を打ち込んでみる。

iframely

「Check it」をクリックし、2秒程待つ。

すると、以下のようにリッチメディアが自動的に生成される。左側がコード、右側がプレビューとなっており、コードをコピーし任意の場所へペーストするだけでプレビューと同様のスタイルが埋め込むちゃうのだ。

iframely

CSSやJSのスタイルは、iframelyのCDNより配信されるためウェブサイトへコードを追記する必要はない。

サンプル

筆者のブログ

実際に、iframelyで作成したリッチメディアを以下に貼り付けてみた。

Amazonのリンク

Instagramのリンク

Tedのリンク

Tableauのリンク

スマートフォンだと途中で途切れます。

価格

なお、リッチメディアを作成するだけの場合は永久に無料で使用できるが、

  • カスタマイズしたり
  • APIを利用したり
  • CDNから配信したり
  • AMPに対応したり

するなどの場合には、課金が必要になる。といってもさほど高価ではなく、1時間に1回URLがカウントされ、そのカウント数に基づき料金形態が変わる。

iframelyの場合、1時間に1回ヒットしたURLをカウントし、そのカウントに基づき価格が決定される点が、よくある1コールによる従量課金制の他サービスとは異なる。

まとめ

手軽にリッチメディアを作成できるiframelyの利用方法を解説してきた。

iframelyはカナダのオタワに拠点をおくItteco Software社が運営しており、オープンソースバージョン(OSS)もあるなど、何ともDeveloperファーストなプロダクト。

例えば、ブログを書いている人は、何かプラグインを使用しなくてもAmazonアソシエイトのリンクを綺麗に表示できる。YoutubeやInstagram、Twitter、Pinterest、Ted.comといった主要ウェブサイトは全てカバーしている。

何の知識がなくてもリッチメディアを使用できるので、初心者のみならず誰にでもオススメできるサービスだ。

Keisuke Kuribara
株式会社Propagation代表取締役。興味対象は、ビットコイン、大麻、ウェブ、金融、生物、心理など。金融から健康、テック、音楽など様々な事について執筆しており、このブログは月間10万PV程度となっております。自身のアウトプットや知的好奇心を満たすことが主な目的です。お仕事の依頼や相談などお気軽にお問い合わせください。
- Advertisement -
- Advertisement -

こちらもオススメ

【ファクトフルネス】思い込みを乗り越え、世界を正しく見る習慣。賢い人ほど真実を知らない②

この記事は、Youtubeへ公開した動画を元に記述したブログである。 文字よりも動画が良い方は、以下よりご覧頂きたい。 https://www.youtube.com/watch?v=F7Xvlw8i_y0 はじめに

国の強さは地政学が決めていた!『戦略の地政学 ランドパワーVSシーパワー』を紹介

この記事は、Youtubeに公開した動画を元に記述したブログである。 文字よりも動画が良い方は、以下よりご覧頂きたい。 https://youtu.be/_LWym-mCI9s はじめに

人は”自分の仕事を他者でなくロボットに奪われる方を好む”という研究結果

自動化の進歩はすでに何百万人もの労働環境に大きな影響を与えており、止まる気配はない。 英国家統計局が今年発表した調査によると、イギリスでは150万人の労働者が「自動化によって仕事を失う高リスク状態」にあり、特に女性と低賃金労働者は矢面に立たされているようだ。また、『Social Science and Medicine』誌に掲載された別の論文によると、「自動化のリスクにさらされると人の健康状態は悪化する」という。 単純業務の自動化は非常に早い速度で進んでいる。Via:Business vector created by vectorpouch...

「WP-CLI」で使用するコマンドまとめ

基本的に面倒くさい作業に関することだ。 WordPressで運営されているサイトは、 ダッシュボードからテーマをアクティブにしたりダッシュボードからプラグインをインストールしたりダッシュボードからテーマ&プラグインをアップデートしたりダッシュボードからテーマ&プラグインを削除したりFTPで接続しダウンロードしたフォルダをインストール したりする。 これはこれで良いが、サーバー環境に直接アクセスし、コマンドラインから諸々操作を行うほうが、最終的に楽である。

投資のプロの『考え方』を学ぶ。分かりづらいファイナンス理論を優しく解説②(ポートフォリオ理論とリスク管理編)

この記事は、Youtubeへ公開した動画を元に記述したブログである。 文字よりも動画が良い方は、以下よりご覧頂きたい。 https://www.youtube.com/watch?v=ER9MNNUU_Tk ①プライシング理論はこちら

こちらの記事も読まれています

- Advertisement -