リッチなハイパーリンク

Twitter等にてハイパーリンクを記述すると，サムネイル画像と記事タイトルが追加で表示され，どのような記事かぱっと見でイメージできる表示になります．

サムネイル画像と記事タイトルが表示されるものは， WEBページの<head>へ適切なメタデータ（Open Graph Protocol，略してOGPと呼ばれる）が記述されています．これにより，TwitterやFacebookなどのSNSではハイパーリンクがリッチに表示されます．はてなブログやQiitaで記事を書く人は，SNSで記事を共有するときによく見ると思います．

このほか，YouTubeの動画をWEBページ上でそのまま再生できることもあります．

こちらは<iframe>というHTML要素の中で外部サイトのHTMLが展開されるために，このようなリッチな表現ができます．しばしばサイト埋め込み用コードと呼ばれ，YouTubeやInstagramなどのWEBサービスにて提供されています．また，多くのWEBサービスではoEmbedという規格に基づくAPIが導入されており，このoEmbed APIを活用することにより，容易にサイト埋め込み用コードを取得できます．（うまく活かせば，JavaScriptのfetchとHTMLのinnerHTMLを使うことにより，動的に展開できます）

埋め込みばっかりでは立ち行かず...

ここまで紹介したものはブログの記事などをリッチにするために有効です．しかし，埋め込み用コードは各サービスごとにバラバラなので， 1つのハイパーリンクをリッチに表示するだけでも骨が折れます．（例えば，TwitterやInstagramは<backquote>要素で埋め込むので， <iframe>でよしなに展開...とはいきません．）

ましてや，表示をリッチにしたところで，ページのデザインの統一感がなくなってしまっては骨折り損です．

Iframelyの紹介

こんな悩みを解消できるWEBサービスとして，Iframelyを紹介します． Iframelyにより，多くのWEBサービスから，統一感のあるデザインの埋め込みコードを横断的に取得できます．

埋め込みコードを生成する

まずはじめに，次のリンクからIframelyのWEBページへアクセスします．

https://iframely.com/embed/

次に，表示をリッチにしたいハイパーリンク（URL）を入力し，埋め込み用コードを生成します．

例えば，私のHPのトップページだと，以下のような埋め込みコードが生成されます．

<div class="iframely-embed">
    <div class="iframely-responsive" style="height: 140px; padding-bottom: 0;">
        <a href="https://ticktuck.tech/" data-iframely-url="//iframely.net/C04U7bl"></a>
    </div>
</div>
<script async src="//iframely.net/embed.js" charset="utf-8"></script>

最後に，生成された埋め込みコードをブログ記事などにコピペすれば完了です．実際に表示すると，以下のような表示になるかと思います．

とても簡単にリッチな表現にできたかと思います．

安定して表示させる

生成した埋め込みコードには自動的にIframelyのスクリプト（embed.js）が追加されます．このスクリプトは<iframe>の後に記述されており，iframeのレンダリング後にスクリプトが読み込まれます．そのため，埋め込みコード部分がうまく描画されないトラブルがしばしば起きます．

これを防ぐ簡単な方法として，<head>内にて，あらかじめIframelyのスクリプトを読み込む方法があります．具体的には，以下のコードを使用したい全てのWEBページの<head>内に追記します．

<script async src="//iframely.net/embed.js" charset="utf-8"></script>

そして，埋め込みコードはスクリプト部分を取り除いて使用します．

<div class="iframely-embed">
    <div class="iframely-responsive" style="height: 140px; padding-bottom: 0;">
        <a href="https://ticktuck.tech/" data-iframely-url="//iframely.net/C04U7bl"></a>
    </div>
</div>
<!-- ここを削除する
    <script async src="//iframely.net/embed.js" charset="utf-8"></script>
-->

これにより，スクリプトの後読みや多重読込を防ぐことができ，安定して表示されるようになります．

デザインをカスタマイズするには...?

ダークモード対応，大判表示，動画プレイヤーのデザインなど... 表示をカスタマイズしたい場合にはIframely APIを使います．なお，Iframely APIについては別記事にて紹介する予定です．

公式のドキュメントが参考になるかと思いますので，参照してみてください → https://iframely.com/docs

Iframely APIは基本有料なので，とりあえずタダでハイパーリンクの表現をリッチにしたい！という人は，今回の紹介した方法を試してみてください！

※注意※

<iframe>では外部サイトがそのまま展開されてしまうために，なんでもかんでも<iframe>で表示するのは好ましくありません．もし良かれと思って読み込んだ外部サイトが，表示しただけで機密情報を抜き取るような悪質なサイトだった場合，意図せず共犯者となってしまいます． <iframe>の利用は計画的にお願いします．

リッチな表現が多すぎても読みづらいサイトになってしまいますし，何事も用法・用量を守って使用しましょうということですね．