てきとうな説明でてきとうに作ろう

Twitter モーメント

サンプル

別窓

概要

インスタの画像を並べてくれるjQueryはあったのにツイッターのが探してもない！見つかりませんでした。
今やSNS主流で活動しているクリエイターなんて山ほどいるのに、まさかツイッターにあげた画像を並べてくれるプラグインとかがないなんて思いませんでした。
ツイッター公式は一応モーメントを表示するウィジェットは出してくれますが、ウィジェットスタイルはギャラリーを作るには少しそぐわないですよね。

どうしてもツイッターの画像を並べたいがために簡易なものを作りました。
サンプルではツイッターの画像を並べたのちに、正方形に調整して、さらにlightboxを使っています。

いうてツイッターのAPIは厳しいしめんどくさいので上記ウィジェットを利用しました。
ウィジェットを作ってもらって、それを解剖して画像だけ拝借した形です。

注意点
・ツイッターは仕様変更がちょいちょいあるので、そのうち使えなくなるかもしれない。サンプルにパンの画像が正常に並んでればまだ使えます。
・ツイッターの仕様上、モーメントの上位20件分の画像（1ツイートに4枚画像を付けられるので最大80枚の画像）しか表示できない。それ以上の数はモーメントへの誘導リンクを貼るなりして対処してください。
・ツイッターありきなので、ツイッターがしんでる間はもちろん使えませんし、接続に時間がかかったりするとうまく表示できなかったりします。
・モーメントに登録してあるツイートに画像があれば問答無用で表示します。モーメントには他人のツイートも登録できるので注意してください。
・鍵垢ではそもそもモーメントが公開できないため使えない。
・画像だけを表示する＝画像の出所が見えなくなるということなので、無断転載等の悪用はくれぐれもしないようにしてください。
・不具合があったら教えてください。できれば直してくれると助かります。

2019.08

やりかた

ホームページに並べたい画像付きツイートを詰め込んだツイッターのモーメントを用意してください。
鍵のついてないアカウントで、ちゃんとモーメントを公開してあるか確認してください。
ウィジェットの仕様上、カバー画像にしたツイートがトップツイートになるため、ここのやり方だと必ず一番最初に表示されます。
カバー画像の変更はいつでもできるので、てきとうにモーメント更新時についでに変更するなりしてくれればと思います。

私が作ったjsをダウンロードして自サイトの場所に配置してください。

こんな感じで使います。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
    <script type="text/javascript" src="ファイルの場所/displayTwitterImg.js"></script>
    <script type="text/javascript">
    $(function(){
        displayTwitterImg({
            elm: $("#tweet-moment"),
            moments_id: "1156442789103562752",
            img_prop: {class: "twitter-img"},
            tweet_set: true,
            tweet_setDataName: "title",
        });
    });
    </script>
</head>
<body>
    <div id="tweet-moment"></div>
</body>

4行目のファイルの場所は書き換えてください。
8～12行目がオプション設定部分です。

オプション名	適当な説明	設定値	デフォルト値
elm	モーメントの画像を表示したい要素を指定。この場合では<div id="tweet-moment"></div>に画像が表示されます。	$("#id名")	設定必須
moments_id	モーメントのID。モーメントURLのttps://twitter.com/i/moments/xxxxxxxxxxxxxxxxxxのxxxxxxxxxxxxxxxxxxの部分。	"xxxxxxxxxxxxxxxxxx"	設定必須
img_prop	表示する画像のimgタグに設定するプロパティ。この場合では<img class="twitter-img" ...>となる。ちなみにプロパティ名にハイフンや先頭に数字は使えません。	{class: "twitter-img", alt: "モーメントの画像"}等	{}
tweet_set	ツイート内容を付加するかしないか。ツイート内容も使いたい方はtrueにしてください。 tweet_setDataNameに指定した文字列の先頭に"data-"を付けたものにツイート内容が入ります。	trueかfalse	false
tweet_setDataName	tweet_setがtrueのときにツイート内容をいれるところの名前。 "data-XXX"の形式で表示します。"XXX"に入れる部分の文字列を設定してください。	"XXX"等の文字列	"tweet"

elmとmoments_idは必ず設定してください。
他のオプションは設定しなくてもいいですが、そのままだと画像サイズがツイッターにあげた元のサイズそのままで表示されるので、大きさが統一感のないものになります。

こんな感じ。あまり見栄えはよくないですね。
そんなときに、img_propにclass名を設定し、imgタグにクラス名をもたせることによって、cssでかっこよくしてあげましょう。
サンプルでは、上のコードの15と16行目の間の</head>前に以下のコードをぶちこんで、画像を縮小して正方形にトリミング＆センタリングしています。

<style type="text/css">
.twitter-img {
    width: 250px;
    height: 250px;
    margin: 25px;
    object-fit: cover;
}
</style>

参考：1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー｜Webクリエイターボックス

応用 - lightboxを使う

サンプルのように、lightboxを使うためにaタグをつけたり、また、ツイート内容もあわせて取得したいと思います。

最初のコードの4、5行目の間に、lightboxの<head>～</head>に入れるコードをコピペしてください。
最初のコードの13と14行目の間に、以下のコードをいれます。

    function setLightbox(){
        if($(".twitter-img").length > 0){
            $(".twitter-img").each(function() {
                var a_tag = $("<a>", {href: $(this).attr("src")});
                a_tag.attr("data-lightbox", "img-group");
                a_tag.attr("data-title", $(this).attr("data-title"));
                $(this).wrap(a_tag);
            });
        }
        else {
            setTimeout(function(){
                setLightbox();
            }, 350);
        }
    }
    setLightbox();

簡単に説明すると、classが「twitter-img」のもの1個1個を<a>タグで囲って、lightboxで必要な属性を付与します。
属性はdata-lightboxと、キャプションにツイート内容を入れようと思うのでdata-titleを付与したいと思います。
5行目で"data-lightbox"に"img-group"を、6行目で"data-title"にimgタグの"data-title"の内容を設定しています。
imgタグの"data-title"は最初のコードの12行目で指定しています。もし、他の文字列を指定していた場合は、

a_tag.attr("data-title", $(this).attr("data-XXX"));

のように、後ろの方の部分を変更してください。なお、tweet_setDataNameを設定していない場合はデフォルト値"tweet"にしてください。

これで各画像をクリックするとlightboxが出るようになりましたね。
てきとーにlightboxを応用例と出しましたが、imagecloudなどの他の画像系jQueryも使えると思います。
その場合の注意点として、最初のコードの13と14行目の間に再帰処理をすることが必要になります。
このモーメントウィジェットは配置に時間がかかるので、ちゃんと表示されてからその後の処理をしなくてはならない、ということです。

        function ファンクション名(){
            if($(".twitter-img").length > 0){
                // ちゃんと画像が取得されたらここの処理ができる
            }
            else {
                setTimeout(function(){
                    ファンクション名();
                }, 350);
            }
        }
        ファンクション名();

この形で書いておけばとりあえず大丈夫です。
もしlightboxじゃないやつ使いたいけどいまいちわからん！という方は応用編の続きとしてそれを書くので、ツイッターに殴り込みに来てください。