HTMLのAタグに埋め込まれている*1 Style内のバックグラウンド画像のURLを抽出する*4 ブックマークレットを公開します。



開発の動機

*2 Flickr.com を積極的に利用するために、*3 PopBox専用の*4 ブックマークレットを多用してきましたが、視力の低下と、新しいキーボードになかなか馴染めず、細かなマウスの作業がストレスとなります。 そこで、最もストレスを感じる、オーナーの*5 アバター画像のＵＲＬを抽出する*4 ブックマークレットを作成しました。

例： 画像オーナーの*5 アバターのHTML

flickr.com/photos/ujiki_oo/51670862377_ 
<a class="avatar person medium" href="/photos/ujiki_oo/" data-person-nsid="120798093@N05" style="background-image: url(//live.staticflickr.com/1932/buddyicons/120798093@N05_l.jpg?1537921962#120798093@N05);" tabindex="0" id="yui_3_16_0_1_1662820202466_14075"></a>
このAタグから、*5 アバターの画像のURLのみを抽出します。 ちなみに下に続くコメント発言者の*5 アバターは、IMGタグですので、ブラウザー標準機能の右クリックで画像URLを抽出できます。

*4 ブックマークレット

登録場所(例)： ブックマークバー
新しいフォルダー名(例)： Bookmarklets
*4 ブックマークレット名(例)： Avater IMG flickr.com

筆者の*4 ブックマークレット登録手順
  1. どこでも良いのでブックマークしていない適当なホームページを表示する。
  2. ブックマーク登録を実行し、
  3. 事前に準備しておいたブックマークのフォルダーに登録する。
  4. 登録したブックマークの編集を選択し、
  5. 名前の登録と
  6. アドレスには、このページで公開中の*4 ブックマークレットをコピー＆ペーストする。
  7. 移動したければブックマーク・マネージャーを開いて chrome bookmarks:
    1. 切り取りまたはコピーしては張り付けたり
    2. マウスで移動する

正常な機能を確認したOSとブラウザー

2022/09/10

  1. OS: MS Windows 11 Home , バージョン 21H2 , OS ビルド 22000.918 , エクスペリエンス Windows 機能エクスペリエンス パック 1000.22000.918.0
    1. Google Chrome バージョン: 105.0.5195.102（Official Build） （64 ビット）
    2. Firefox バージョン: 104.0.2 （64 ビット）
  2. OS: MS Windows 10 Pro , バージョン 20H2 , OS ビルド 19042.1706 , エクスペリエンス Windows Feature Experience Pack 120.2212.4170.0
    1. Google Chrome バージョン: 105.0.5195.102（Official Build） （64 ビット）
    2. Firefox バージョン: 104.0.2 （64 ビット）
    3. Opera バージョン: 90.0.4480.84 （64 ビット）
  3. 筆者はMS-Edgeをアンインストールしておりチェックしていません。 上記以外のブラウザーでの確認は出来ていません。 皆様のOSとブラウザーでは、如何でしょうか？

操作手順

  1. https://www.flickr.com の適当な画像または動画ページを表示します。 *2 Flickr 例：
  2. 前段の*4 ブックマークレットをクリックして起動します
  3. 画像や動画のオーナーの丸形*5 アバター画像をクリックします。

  4. 抽出したURLを自動的に*7 プロンプト表示します。 例：
    //live.staticflickr.com/1932/buddyicons/120798093@N05_l.jpg
  5. コピーします。
    切り取りでもコピーでも構いません。
  6. OKをクリックすると、新タブに確認の為に画像を表示します。 キャンセルをクリックすると新タブを表示することなく終了できます。

課題と解

オーナーの画像をクリックすると、オーナーの Photostream へ移動します。 時間を浪費するだけでなくて、パケットの無駄遣いであり、通信網の電力の無駄遣いですし、*6 二酸化炭素排出にあなた自身が寄与したことになりますか？ どなたか、クリックしても移動しないJavaScript技法をご教授願います。 筆者としては、 this.href="javascript:void(0)" と定義するかなあ～と、考えながら、「まあっいいか」状態です。 ところで、 *2 Flickr.com におけるコメントを投稿する際に、各オーナーの Photostream のURLを、 [ と ] で囲むと、各オーナーへコメント内容がメール通知される機能に Photostream のURLを参照し利用しています。

2022/09/24 筆者が試行中の*4 ブックマークレット２：
AタグのHREF要素を偽装しますので、この筆者お勧め*4 ブックマークレット２を使用するとページの更新を行わない限り、*5 アバター画像をクリックしてもページを移動しません。 あなたのブラウザーは壊れていません！
  1. this.onclick=null
    永久ループを阻止します。
  2. this.href="javascript:(void(0))"
    Aタグの移動を無効化します。
  3. if(y){this.onclick=null; this.href="javascript:(void(0))"; y=false}
    他のAタグに対して影響しない様に、置換はクリックした当該箇所だけにします。

FACEBOOK(Meta)

FACEBOOK(日本語)

ここに表示

FACEBOOK(ASCII)
ここに表示

記事の改訂の告知について

DISQUSコメントで案内します。
DISQUSコメントにログインし、DISQUSコメント枠の一番下段の左端のメール・シンボルをクリックすれば、DISQUSコメントがあれば自動的にメールで知らせてくれます。 再度クリックすれば、メール通知を停止できます。 記事末尾のDISQUSコメントの表示が小さくてスレッドのデザインが狭過ぎると思うなら、DISQUSコメント本尊に接続_してみてください。

※ 記事本文は別サーバーから JavaScriptファイルとして配信しており、配信元のサーバーにおける JavaScriptファイル(YUICOMPRESSOR済み)も、実際にあなたのブログが受信する gzip圧縮済みの JavaScriptファイルも、３０日間のキャッシュ流用を定義していますので、特にご質問の前にブラウザーのキャッシュを削除してから、再度のご訪問と閲覧をお願い致します。
※ DISQUSについては別管理ですので、毎回、最新のDISQUSを表示できています。 但し、ご自分のDISQUSコメントを編集した直後に編集後の内容に至らない場合がありますが、DISQUS表示の上部にある「あなたの言語でDISQUSメニューを再表示する！」をクリックしますと最新の状況を表示致します。 宜しくご理解願います。
※ どれだけ待ってもDISQUSが表示されない場合は「広告ブロック」機能を切ってみて下さい。
Google Translator.

良いブログと利用できないブログ


  • CLICK!