ふくいのふ ふくいのふ ふくいのふ

ふくいのふ

WEB ENGINEER

microCMSで外部サービスコンテンツ埋め込めるようになったと聞いて

microCMSで外部サービスコンテンツ埋め込めるようになったと聞いて

いい感じに表示できるようになったらしい


このブログではCMSにmicroCMSを使用しておりますが

リッチエディタに外部サービスコンテンツの埋め込みができるようになりました
https://microcms.io/blog/richeditor-embed/


とのことなので

Twitter


Youtube



Instagram

View this post on Instagram

家でじっとしていたらこんな曲ができました。  ”うちで踊ろう”  たまに重なり合うよな 僕ら 扉閉じれば 明日が生まれるなら 遊ぼう 一緒に  うちで踊ろう ひとり踊ろう 変わらぬ鼓動 弾ませろよ 生きて踊ろう 僕らそれぞれの場所で 重なり合うよ  うちで歌おう 悲しみの向こう 全ての歌で 手を繋ごう 生きてまた会おう 僕らそれぞれの場所で 重なり合えそうだ  #うちで踊ろう #星野源 #DancingOnTheInside  誰か、この動画に楽器の伴奏やコーラスやダンスを重ねてくれないかな？  “Dancing On The Inside”  We cross paths every once in a while If we close the door and tomorrow comes Let’s have fun together  Let’s dance on the inside Let’s dance on our own And just let our heartbeats loose as is Let’s live and dance We’ll cross paths in our own spaces  Let’s sing on the inside On the flip side of our sorrows Let’s link hands through all the songs we sing Let’s live and see each other again I get the feeling we’ll cross paths in our own spaces

A post shared by Gén Hoshino 星野源 (@iamgenhoshino) on



この他にもスライドなど。
流行のネタを貼り付けていくことができますね。
とってもよい感じ👏

ちなみに Nuxt.js （Vue.jsも）では


よくやるのは microCMS の API から得られた HTML を v-html でそのまま表示する方法。

ですが、v-html は v-html 内の script タグを実行しない ので、mounted()以降で発火させるロジックを書く必要があります。

v-htmlで外部読み込みscriptタグを実行したい
https://qiita.com/sakapun/items/7d78f48debb4fd6156cb


後、Instagramなどは上記scriptタグを再実行させても遅延してなかなか表示されない場合があるので、上記scriptタグを実行した後、

    this.$nextTick(() => {
      // インスタembedを再発火させる
      if (typeof window.instgrm !== 'undefined') {
        window.instgrm.Embeds.process()
      }
      // Twitterヴィジェットembedを再発火させる
      if (typeof window.twttr !== 'undefined') {
        window.twttr.widgets.load()
      }
      // FB SDKを再発火させる
      if (typeof window.FB !== 'undefined') {
        window.FB.XFBML.parse()
      }
    })


同じ mounted() 内 に上記コードを書いておくと良いかもしれません。（ついでにTwitterやFBも）

© 2019 ふくい
ToTop