2020年11月

Twitterのタイムライン埋め込みはダサい上にcssのカスタマイズが出来ないですがこのライブラリを使えば簡単に埋め込むことが出来ます また付属しているオプションのプログラムを使えば非プログラマのデザイナーでも簡単に埋め込むことが出来ます ダウンロード githubからダウンロードしてください github インポート jquery と get_twitter_timeline をロードします &lt;script src="assets//jquery-3.5.1.min.js">&lt;/script> &lt;script src="assets/get_twitter_timeline.js">&lt;/script> オプションを使用する場合はeasy_get_twitter_timelineもロードしてください &lt;script src="assets//jquery-3.5.1.min.js">&lt;/script> &lt;script src="assets/get_twitter_timeline.js">&lt;/script> &lt;script src="assets/easy_get_twitter_timeline.js">&lt;/script> 使い方 第 1 引数に取得したいユーザー id を指定してください(必須)第 2 引数にロードが完了したあとの処理を指定してください(任意)第 3 引数に jquery のインスタンスを指定してください(任意) この要素の最後(append)に埋め込みリンクを展開します var twitter = new twitter_timeline_get("faa0311", function () { console.log(twitter.tweet); }); ロードの時間が考慮されていないため下記の例だとエラーになる可能性があります var twitter = new twitter_timeline_get("faa0311"); console.log(twitter.tweet); 一度に20件しか読み込まないのでそれ以上読み込む場合はloadmore関数を使ってください第 1 引数にロードが完了したあとの処理を指定してください(任意) var twitter = new twitter_timeline_get("faa0311", function () { twitter.loadmore(function () { console.log(twitter.tweet); }); }); オプションの使い方 オプションを使用する場合は下記の書き方ができます &lt;get-twitter-timeline user="faa0311"> &lt;t-article number="1"> &lt;p>&lt;t-div>code&lt;/t-div>&lt;/p> &lt;/t-article> &lt;/get-twitter-timeline> get-twitter-timelineのuserに取得したいユーザーのTwitterIdを入力してくださいt-articleのnumberに取得したいツイートの番号入力してください 新しいツイートほど番号は小さくなりますt-divの中の文字によって表示される内容が変わります 例えばcodeの場合はツイートのhtmlソースがそのまま出力されますt-articleは必ずget-twitter-timelineの子要素に記述してください t-divはt-articleの子孫要素であればどこでも良いです 下記のように書くことでimg要素やa要素の属性に出力することも出来ます &lt;get-twitter-timeline user="faa0311"> &lt;t-article number="1"> &lt;p>&lt;img t-div="src" src="user_img" />&lt;t-div>name&lt;/t-div>&lt;/p> &lt;p>&lt;a t-div="href" href="share_like_link">いいね&lt;/a>&lt;/p> &lt;/t-article> &lt;/get-twitter-timeline> 属性として出力したい要素のt-div属性に出力先の属性を指定します上記の場合img要素の中のt-div属性にsrcと指定されているのでsrc属性に指定されているによって表示される内容が変わります user_imgが指定されているためユーザーのプロフィール画像が表示されます 下記のように書くことでエラーが発生した場合とロードするまでの間に要素を非表示にすることが出来ます .t-error { display: none; } t-article { display: none; } t-article.t-loaded { display: block; } エラーが発生した場合や内容がなかった場合、t-div要素またはt-div属性にt-errorクラスが与えられますまた、ロードが完了したt-article要素にt-loadedクラスが与えられます 置き換えリスト jsライブラリを使うときは左の変数にデータが代入されますオプションを使用するときは真ん中の置き換えタグを使用します new twitter_timeline_get("xxx").tweet[0]オプションの置き換えタグ解説retweetCreditretweetCreditリツイート情報inReplyToinReplyToリプライ情報user.namenameツイート主の名前user.iduser_idツイート主のiduser.imguser_imgツイート主のプロフィール画像user.linkuser_linkツイート主のリンクlinklinkツイートのリンクtime.labeltime_labelツイートされた時間time.datetimetime_datetimeツイートされた時間(ISO8601)time.titletime_titleツイートされた時間(日付と時間)labellabelラベルtweet.texttextツイートの内容tweet.textemojitweetツイートの内容(Emojiあり)tweet.codecodeツイートの内容(htmlソース)tweet.list使用不可ツイートの内容(配列/下記に詳細)share.like.linkshare_like_linkいいねリンクshare.like.datascribeshare_like_datascribe種類share.Twitter.linkshare_Twitter_linkリツイートリンクshare.Twitter.datascribeshare_Twitter_datascribe種類share.Facebook.linkshare_Facebook_linkFacebook共有リンクshare.Facebook.datascribeshare_Facebook_datascribe種類share.LinkedIn.linkshare_LinkedIn_linkLinkedIn共有リンクshare.LinkedIn.datascribeshare_LinkedIn_datascribe種類share.Tumblr.linkshare_Tumblr_linkTumblr共有リンクshare.Tumblr.datascribeshare_Tumblr_datascribe種類img[0].altimg_1_alt代替テキストimg[0].srcimg_1_src画像リンクimg[0].titleimg_1_titleタイトルimg[1].altimg_2_alt代替テキストimg[1].srcimg_2_src画像リンクimg[1].titleimg_2_titleタイトルimg[2].altimg_3_alt代替テキストimg[2].srcimg_3_src画像リンクimg[2].titleimg_3_titleタイトルimg[3].altimg_4_alt代替テキストimg[3].srcimg_4_src画像リンクimg[3].titleimg_4_titleタイトル tweet.listの詳細 オプションでは取得不可 tweet.list[i].type解説tweet.list解説text文字text通常のテキストimg絵文字alt絵文字img絵文字title絵文字の名前img絵文字arialabel絵文字のラベルimg絵文字src絵文字の画像URLbr改行null改行tagハッシュタグ/メンションdataデータのタイプtagハッシュタグ/メンションvalue文字tagハッシュタグ/メンションlinkリンクlinkURLlinkURL

2020年11月

いい感じのポートフォリオが作れるライブラリ

TwitterDeveloper不要でTwitterのタイムラインを埋め込む