「X」専用の動画・静止画のビューア「X V-Walker」（4）/ JavaScript

テーマ：

静止画の取得コードを改善 

「ver. 0.2」で、静止画の処理の一番のネックになる部分が、ユーザーが選択した画像をスクリプトでクリックして、拡大用ダイアログにその画像を表示させる部分です。

ダイアログに拡大表示用の画像が呼込まれるまでに、ロード時間が必要です。 前バージョンでは「setTimeout」のメソッドを使い「200msec」の待機をしていました。

 

ただ、それでもまれに Lightboxの表示にもたつきが気になる事があり、未だツールのブラシュアップが必要と感じました。 改善したのは画像の取得操作で、実績のある「setInterval」のメソッドを使う待機コードを適用したことです。

 

 

ダイアログの目的画像を取得する 

以下のコードは、目的の画像がロードされたら、それを最速で確実に取得します。

 

◎ 投稿画像の何個目をユーザーが選択したかを「select」に取得

 

◎ 4行目で、選択したタイムライン上の画像を、ツール側でクリックしています。

 

◎「wait_target()」は、0.01secごとに繰り返し実行されます。 この関数は、ダイアログに目的の画像（select番目も指定）が呼び込まれて取得されると停止します。

 

◎ 投稿画像が1個の場合は、list構造にならないので、取得する「img_s」のコードは別扱いです。 複数の場合は listの「select番目」の画像を取得します。

 

◎「wait_target()」が目的の画像を取得したら、それを「set_dialog()」に渡します。 この関数は、目的の拡大用の画像を Lightbox表示します。

 

「X V-Walker」 ver.0.3   85行～

else{ // 投稿画像の場合
    let select=link.getAttribute('href').slice(-1);
    if(select=='o'){ select='1'; } // header-photo の場合
    link.click(); // ダイアログ読込み遅延が必要

    let img_s;
    let retry=0;
    let interval=setInterval(wait_target, 10);
    function wait_target(){
        retry++;
        if(retry>100){ // リトライ制限 100回 1secまで
            clearInterval(interval); }
        if(select=='1'){
            img_s=document.querySelector('div[role="dialog"] img'); }
        else{
            img_s=document.querySelector('div[role="dialog"] li:nth-child('+ select +') img'); }
        if(img_s){
            clearInterval(interval);
            set_dialog(img_s); }}

    function set_dialog(img){
        let now_src=img.getAttribute('src');
        disp_mode=1; // Lightbox表示 通常拡大
        box_img.src=now_src;
        html_.style.overflow='hidden';
        lightbox.style.visibility='visible';
        lightbox.classList.remove('fout');
        lightbox.classList.add('fin'); }

}

 

 

タイムラインのヘッダー画像 

上のコードの3行目で「header-photo」の場合を例外的に扱っています。

 

タイムラインの所有者は、下の例の様な「header-photo」を指定できます。 この画像はけっこう大きな画像で、中には拡大表示したり取得したい場合があるかも知れません。 下図の赤枠が「header-photo」です。

 

 

 

この画像の「a要素」は「href="/x-userid/header_photo"」という形になり、画像の順番を表す末尾の「/n」がありません。 そこで、これを投稿画像が1個の場合として扱われる様に、「if(select=='o'){ select='1'; }」の処理をしています。 大きな画像でタイムラインに現れるのは、この「header-photo」位で、このコードで問題はないでしょう。

 

なお、ユーザーのアイコン、絵文字などの「img要素」もページ上にありますが、このツールのコードは対象にできません。 余り無理をして採り入れると、他に問題が出る可能性があり、現状で良いと思っています。

 

 

 

「Uni Lightbox JS」との住み分け 

「Uni Lightbox JS」と「X V-Walker ver.0.1」を同時に「ON」にすると、静止画は「Uni Lightbox JS」が一部機能し、動画は「X V-Walker」が機能して、一応は使えます。 ただし、両ツールを同時に常駐したい場合は、以下が推奨される方法です。

 

●「Uni Lightbox JS」のコード先頭の「メタデータ」の指定に、以下の指定を追加すると、両方のツールを安心して「ON」にして常駐使用ができます。

 

「Uni Lightbox JS」 ver.1.5　メタデータ指定 12行目などに追加

// @exclude       https://x.com/*

 

 

 

Lightbox内の拡大率 

デフォルトは「200%」としていますが、この値は必要に応じて「300%」「400%」など任意に指定できます。

 

「X V-Walker」 ver.0.3　13行目

let view_w=200; // 🔴拡大率の固定値

 

の「200」がデフォルトの Lightbox内の拡大倍率です。 この数値を書き換えて保存すると、拡大率に反映します。

 

 

 

「X V-Walker」を利用するには

このツールは Chrome・Edge・Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

 

 

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

 

 

 

❷「Tampermonkey」にスクリプトコードを登録します

「X V-Walker」のコードは「GitHub」で配布しています。

 

 

 

このリンク先は下の様な画面で、ここでコードのコピーが可能です。

 

 

 

● 赤枠のところに、コピー用のボタンがあります。 これをクリックします。

　これで、ページ上のコードがクリップボードにコピーされます。

 

 

 

●「Tampermonkey」の管理画面で「＋」マークの「新規スクリプト」を開きます。

 

 

 

●「新規 UserScript」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠にしてください。

 

● 編集枠内をクリックして「Ctrl+V」を押すか、右クリックして「貼り付け」を選択します。 コードの先頭までスクロールして、最初の行から正しく貼り付けられたかを確認してください。

 

● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

 

 

 

「X V-Walker」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

 

●「X V-Walker」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。