はなゐろぐ

何を作ったか

APIを叩いてTwitterとかYouTubeとかAmazonへのリンクやコンテンツを埋め込むプラグインです。Amazonだけ別のプラグインです。

同じことをやるプラグインはすでに作られていました。ですが、サービスごとにプラグインを入れるのと該当サービスの仕様変更ごとに過去の記事を書き換えるのが面倒だなと思ったので、最低限の情報を渡してAPIを叩くようにしました。

プルリクやIssue、大歓迎です。

サンプル

hexo-tag-oembedはパーマリンクを、hexo-tag-amazonではISBNやASINを渡します。

Twitter

{%oembed https://twitter.com/Interior/status/463440424141459456 %}

{％oembed https://twitter.com/Interior/status/463440424141459456 ％}

YouTube

{%oembed https://www.youtube.com/watch?v=05Tbg4upQe8 %}

{％oembed https://www.youtube.com/watch?v=05Tbg4upQe8 ％}

Vimeo

{%oembed https://vimeo.com/76979871 %}

{％oembed https://vimeo.com/76979871 ％}

Flickr

{%oembed https://www.flickr.com/photos/75571860@N06/33815174224/ %}

{％oembed https://www.flickr.com/photos/75571860@N06/33815174224/ ％}

Instagram

{%oembed https://www.instagram.com/p/fA9uwTtkSN/ %}

{％oembed https://www.instagram.com/p/fA9uwTtkSN/ ％}

Gyazo

{%oembed http://gyazo.com/8980c52421e452ac3355ca3e5cfe7a0c %}

{％oembed http://gyazo.com/8980c52421e452ac3355ca3e5cfe7a0c ％}

Codepen

{%oembed http://codepen.io/FWeinb/pen/wjzyH %}

{％oembed http://codepen.io/FWeinb/pen/wjzyH ％}

Amazon

{%amzn B004N3APGO %}

{％amzn B004N3APGO ％}

使い方

npmでインストールしてください。

npm install hexo-tag-oembed --saved
npm install hexo-tag-amazon --saved

hexo-tag-amazonの方は、_config.ymlに設定を書く必要があります。

amazon_plugin:
  id: hogehoge-22 # Your Amazon associate ID
  locale: US
  accessKey: xxxxxxx # Your Amazon Product Advertising API Access key ID
  accessKeySecret: xxxxxxxxxxxxxxx # Your Amazon Product Advertising API Secret access key
  generateAlways: true # false -> Generate tag in "hexo generate"

アクセスキーはProduct Advertising APIのページから取得できます。アソシエイトIDも合わせて必要になるので取得しておいてください。

このAPIは頻繁に叩くとすぐにエラーが出るので、気をつけてください。generateAlwaysオプションをfalseにすると、hexo generateの時だけ処理するようになりますので、この設定がおすすめです。

おわりに

初めて作ったHEXOプラグインで、モノのわりに相当時間がかかってしまいました。思った通りに値が帰ってこず、初めてteratailで質問したりもしました。あの時に教えてくださった方々、ありがとうございました。

拙いなりに頑張って作りました。ご利用ください。