えびサブレ

変なオタクの備忘録

パソコン

VuePressにTweetを埋め込む

投稿日:

C95当選しました!
詳細はサークルのウェブサイトに随時書きます。


 
ところで、このウェブサイトはVuePressで書いているのですが、VuePressではTwitterウィジェットなど、<script>タグが付いたものをtemplateに書くとエラーが出ます。
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Twitterウィジェットくらい(おそらく安全だし…)使わせてくれよと思いました。

これをvue-script2を使って埋め込んだので記録しておきます。

VuePressにTweetを埋め込む

ウィジェットをそのまま埋め込むと何も表示されません。

<center>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">◎あなたのサークル「ぬるぽ帝国」は、日曜日 東地区“ト”ブロック-54b に配置されました。<br>さてどうしようかな🤔   <a href="https://twitter.com/hashtag/C95?src=hash&amp;ref_src=twsrc%5Etfw">#C95</a></p>&mdash; えびーむ (@ebiiiiim) <a href="https://twitter.com/ebiiiiim/status/1058269425051160576?ref_src=twsrc%5Etfw">2018年11月2日</a></blockquote>
</center>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<script>がダメなら別のタグを使えばいいじゃん」がvue-script2の考え方です。templateに<script2>と書いたものをユーザの<script>として解釈してくれます。

vue-script2をインストールします。

npm install vue-script2

VuePressでvue-script2を使うために、以下の.vuepress/enhanceApp.jsを作成します。
enhanceApp.jsの詳細はドキュメントにあります。

import VS2 from 'vue-script2'

export default ({
    Vue
}) => {
    Vue.use(VS2)
}

<script2>タグでwidgets.jsを呼びます。

<center>
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">◎あなたのサークル「ぬるぽ帝国」は、日曜日 東地区“ト”ブロック-54b に配置されました。<br>さてどうしようかな🤔   <a href="https://twitter.com/hashtag/C95?src=hash&amp;ref_src=twsrc%5Etfw">#C95</a></p>&mdash; えびーむ (@ebiiiiim) <a href="https://twitter.com/ebiiiiim/status/1058269425051160576?ref_src=twsrc%5Etfw">2018年11月2日</a></blockquote>
</center>
<script2 async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script2>

これで外部のjsを呼べますが、脆弱性になりえるので注意しましょう。

-パソコン
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

nVidia SurroundでGTA5をやる

最近流行りのアレをやってみた
ベゼル補正を行うとゲーム内GUIがバグります…

MinecraftサーバのRAMディスク化(Windows)

身内で遊んでいるMinecraftのサーバが重いのでRAMに入れました。簡単すぎるためか解説記事が見当たらないので書いておきます。

お買い物レポート: PowerEdge R620

勢いだけで買いました。
反省はしています。

自宅サーバにブログを移転する

サーバにIISとWordPressをインストールし、ブログを移転します。

WordPressへの総当たり攻撃

セキュリティ強化の記事を投稿した次の朝に攻撃されました。
Webサーバのログを見てみます。前回の方法は今のところ安全っぽいです。

webmaster

icon
webmaster: えびーむ

Google アナリティクスの統計

アーカイブ

最近のコメント