Twitterを通して大好きなあの人を温かく見守るアプリ（取り扱い注意） #Twitter #Bootstrap ＃CSS

##完成品##
まずは完成品をご覧ください。（そのあと弁明させてください。。）

開くとこんな感じのちょっとヤバイページに飛びます。

そう！みんなのTLをひとまとめに表示してニヤニヤするやつ！

##企画（と弁明）##
はじめに、ネットに落ちている「お気に入り」の最新情報を集約して（できれば１ページで）表示できるアプリを作りたいと考えました。

みんな好きな芸能人、ゲーム、漫画、アニメ、色々あると思うのですが、そういった「お気に入り」の情報を、あちこちに取りに行かなくても、勝手に手元に流れ込んでくるアプリが最終的な目標です。

とはいえ、いきなりそんな素敵なものは作れないので、今回は比較的難易度の低いTwitterの情報取得から着手しました。

どうせなら今役立つものになればと思って仕様を改造しているうちに、知人をストーキングするアプリになってた。そういう話です。

##ベース##

今回はこちらのcodepenをベースに使用させていただきました。リスペクト

##修正手順##
①タブの名称を変更
②タブの画像を変更
③文章の部分を特定IDのTimeLineを表示するよう変更
　こちらを使用➡https://publish.twitter.com/#
④4名分のTimeLineを並列で表示するので列のClassはcol-sm-2を指定
　(3だとうまく入らない。画像があるから。)
⑤上部にこのサイトのQRコードを埋め込む
（URLは決め打ちしてしまい、Netlifyで上げる際にURLの名称を変更して一致させました）

##ソース##

プレビューで見る場合は大きいので0.25倍設定でお願いします。
https://codepen.io/taka_xedge/pen/ExvLzVZ

See the Pen Twitterお気に入りトレース by TAKA (@taka_xedge) on CodePen.

以下の●●●●●●の部分を任意のIDに変更すれば「大好きなあの人を温かく見守るアプリ」の出来上がりです。。

<a class="twitter-timeline" href="https://twitter.com/●●●●●●?ref_src=twsrc%5Etfw"width="5px">Tweets by ●●●●●●</a>

##反省点##
スマホだと究極に見づらいので、レベルアップする際はスマホでの見え方も注意しようと思います。
あと、犯罪には気を付けたいと思います。

##2021/11/11更新　改良版できました##
別記事にしておりますので、よろしければこちらもご覧ください！