概要
各種ウェブサイトをブログの記事などに埋め込む際のカード表示生成ツールを提供するウェブサイトにEmbedlyというのがある。
Embedlyにはいくつかツールが提供されているが、今回使うのはEmbed Code Generator(エンベッドコードジェネレーター)。
コードジェネレーターへのアクセス
1. トップページの画面上にある「PRODUCT」にマウスカーソルを乗せるとメニューが展開するので「Cards」を選ぶ。
2. ページを少し下に移動して、右の「MAKE A CARD FOR FREE」を選ぶ。
3. そうすると、コードジェネレーターの画面に移る。
4. 1.でメニューが展開するが「Product」をクリックすると「The Embedly Tools」のページが開く。ページを少し下に移動すると「Cards - The easiest way to get started」が見えてくるので大きく描かれたマークをクリックする。後は2.から3.の手順でアクセスする。
コードジェネレーターで埋め込みカードを作る
「Paste in a URL to embed」にコピーしたPDFのURLを貼り付ける(ペーストする)。
するとページ下にこのようなプレビューが表示される。経済産業省の『キャッシュレス・ビジョン』のURL(https://www.meti.go.jp/press/2018/04/20180411001/20180411001-1.pdf)を貼り付けた。
プレビューの下にある「Embed Code」の欄にブログやウェブサイトへの埋め込みに必要なHTMLコードが載る。
右側にある「Customize」の項目を編集するとその都度コードが変更される。デフォルトでは「Social Buttons」と「SEO Embed」にチェックが付いているが、今回はそれらを外した。
発行された埋め込みコードをコピーしてHTMLの編集画面で貼り付けると以下のようになる。
PDF出典：経済産業省『キャッシュレス・ビジョン』
https://www.meti.go.jp/press/2018/04/20180411001/20180411001-1.pdf, 2020年1月20日参照。
PDF埋め込みの右上は「ポップアウト」のボタンになっていて、クリックするとGoogleドライブのビューアーが開く。右上にある
を押すと元のPDFファイルを開く事ができる。
今回埋め込んだコードは以下の通り。
<a class="embedly-card" data-card-controls="0" href="PDFのURL">Card</a>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
なお、PDFによっては埋め込み表示が出来ないものもある。何が原因なのか分からなかったのでURLを貼り付けてみなければ埋め込み表示ができるかは分からない。
画像は宮内庁の『案内図（大嘗宮一般参観・皇居乾通り一般公開）』のURL(https://www.kunaicho.go.jp/event/pdf/inui-r01aki-map1.pdf)を貼り付けた時のプレビュー表示の様子。
類似ツール
Iframelyでも同じようにPDFのURLを貼り付けて埋め込みコードを取得できる。
画像は経済産業省の『キャッシュレス・ビジョン』のURL(https://www.meti.go.jp/press/2018/04/20180411001/20180411001-1.pdf)を貼り付けた時のプレビュー画面。
その他の参考資料
以下ではEmbedlyやIframelyの基本的な使い方を紹介している。
-end-
