amp-twitter

目的

　<amp-twitter>というgoogleのweb-componentを使ってみる
→upしたからいろいろみてみたら、AMPに関しては勉強不足なんであまり参考にしない方がいいだろう
どうも、angularはangular-elementを使いこなすのが王道みたいだなあ・・

内容

こんな感じになる。

　https:/github.com/hideume/ang-simple-twitter

はangularで作成したtwitter-clientである。ここで自分で動かすことができる。

　通常のimageタグとかを使わないで、かってにtwitterライクに埋め込んでくれる。

index.html

３のソースを追加する

index.html

  <link rel="canonical" href="公開するサイト名（自分？）">
  <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
  <script async src="https://cdn.ampproject.org/v0.js"></script>

利用法

ソースの中では、tweetidを取得して

tweet.pipe.ts

          text = text.replace(url.url, `<amp-twitter data-tweetid="`+ans[2]+`" width="500" height="50" layout="fixed" dnt="true" cards="hidden"></amp-twitter>`);

という感じでurlをタグに置き換えている。ans[2]は取得したtwitteridである。

なんだかエラー

TypeError: Cannot read property 'name' of undefined
とか、いろんなエラーが出ている状態だが、まあいいか・分かったらまた更新しよう