2018.12.27 2019.01.13

microlinkを利用して外部サイトのプレビュー表示をリッチに表示する

今まで本ブログでは、embedlyで外部サイトのコンテンツをプレビュー表示していました。embedlyは内部で古いバージョンのjqueryを読み込んでいたり、重かったりしたのでmicrolinkに移行してみたいと思います。

Vue.js Nuxt.js ブログ

フロントエンド

[ 目次 ]

はじめに
@microlink/vanillaのインストール
pluginを用意する
nuxt.config.jsの修正
利用方法
注意事項

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は本ブログに @microlink/vanilla を導入し、外部サイトのコンテンツをプレビュー表示します。今まで利用していたembedlyはjqueryを読み込んでいたり重い印象がありました。代替案を検討していたところなのでmicrolinkを試してみます。

microlink.io

Vue.js用のモジュールは用意されていないので、VanillaJSのライブラリをNuxt.jsの本ブログ内に組み込んでいきます。

@microlink/vanillaのインストール

■ npmを利用する場合

$ npm install @microlink/vanilla --save

■ yarnを利用する場合

$ yarn add @microlink/vanilla

pluginを用意する

~/plugins/microlink.jsというpluginを用意し設定していきます。

const microlink = require('@microlink/vanilla/umd/microlink')

export default ({ app }, inject) => {
    inject('microlinkjs', ((selector) => microlink(selector)))
}

今回は利用するページから呼び出せるように、統合された注入という機能を用いて、microlinkjsの関数を利用できるようにしています。

nuxt.config.jsの修正

~/plugins/microlink.jsを読み込むの設定を追加します。

・・・
plugins: [
  ・・・
  { src: '~/plugins/microlink.js', ssr: false }
],
・・・

利用方法

今回は投稿画面のコンテンツ内のaタグのclassに link-previews が設定されている場合、プレビュー表示するようにします。フロントエンドでプレビュー処理を行うので、mounted関数内に定義します。

mounted() {
    this.$microlinkjs('.link-previews')
}

以下のようなaタグがプレビュー表示されることになります。

<a href="https://blog.nakamu.life/" class="link-previews">Nakamu Blog</a>

注意事項

microlinkをFreeで利用するには 250 reqs/day という制限があります。
多用する場合、注意が必要です。

詳細は、公式サイトのPricing をご確認ください。

※ 公式サイトからだとIP毎に制限がかかるのか！？何を基準にしているかわかりませんでした。今後利用しつつ確認していければと思っています。

Nakamu Blog