htmlソースメモ

投稿

Blueskyの投稿をマストドンでシェアするためのブックマークレットのコード

11/19/2024 12:38:00 午後

関連記事：見ているwebページの文章をマストドンでシェアするためのブックマークレット Blueskyの投稿をマストドンでシェアするためのブックマークレットのコード javascript:(function(){function formatDate(inputDate){const date=new Date(inputDate);const year=date.getFullYear();const month=date.getMonth()+1;const day=date.getDate();const hours=date.getHours();const minutes=date.getMinutes();return `${year}%E5%B9%B4${month}%E6%9C%88${day}%E6%97%A5 ${hours}:${minutes.toString().padStart(2,'0')}`;};function getTextBeforeEllipsis(text){const ellipsisIndex=text.indexOf('[…]');return ellipsisIndex!==-1?text.slice(0,ellipsisIndex):text;}; if(document.location.hostname!=='bsky.app'){alert('このページはBlueskyではありません');return;}; const check1=document.querySelector('meta[name="article:published_time"]');const check2=document.querySelector('meta[name="description"]');const titleText=document.title;const regex=/:\s?"(.+)(?=" — Bluesky)/;const match=titleText.match(regex); if(check1===null||check2===nu

片方の丸が別の丸を追いかけるアニメーションのコード（再実行可能）

7/31/2024 11:35:00 午後

赤丸の速度 (秒): 青丸の速度 (秒): 更新オリジナル：赤丸を青丸が追いかけるアニメーションのコード（正式） <!DOCTYPE html> <html lang="ja"> <head> <title></title> <style> #container { position: relative; height: 300px; width: 300px; border: 1px solid black; } #circle { position: absolute; height: 20px; /* 赤丸のサイズ */ width: 20px; /* 赤丸のサイズ */ background-color: red; border-radius: 50%; transition: top 0.5s, left 0.5s; /* 赤丸の速度 */ z-index: 1; /* 赤丸を前面に表示 */ } #circle2 { position: absolute; height: 20px; /* 青丸のサイズ */ width: 20px; /* 青丸のサイズ */ background-color: blue; border-radius: 50%; transition: top 2s, left 2s; /* 青丸の速度 */ z-index: 2; /* 青丸を前面に表示 */ } #line { position: absolute; height: 40px; width: 1px; /* 縦線の幅 */ background-color

赤丸を青丸が追いかけるアニメーションのコード（正式）

7/31/2024 09:13:00 午後

オリジナル：青丸を赤丸が追いかけるアニメーションのコード <!DOCTYPE html> <html> <head> <style> #container { position: relative; height: 300px; width: 300px; border: 1px solid black; } #circle { position: absolute; height: 20px; /* 赤丸のサイズ */ width: 20px; /* 赤丸のサイズ */ background-color: red; border-radius: 50%; transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */ z-index: 1; /* 赤丸を前面に表示 */ } #circle2 { position: absolute; height: 20px; /* 青丸のサイズ */ width: 20px; /* 青丸のサイズ */ background-color: blue; border-radius: 50%; transition: top 1s, left 1s; /* 連続的な移動 */ z-index: 2; /* 青丸を前面に表示 */ } #line { position: absolute; height: 40px; width: 1px; /* 縦線の幅 */ background-color: white; right: -1px; /* 右枠に配置 */ top: calc(50% - 20px); /* 上下中央に配置 */ } </style> </head> <body>

赤丸を青丸が追いかけるアニメーションのコード

7/31/2024 07:34:00 午後

オリジナル：青丸を赤丸が追いかけるアニメーションのコード <!DOCTYPE html> <html> <head> <style> #container { position: relative; height: 300px; width: 300px; border: 1px solid black; } #circle { position: absolute; height: 20px; /* 赤丸のサイズ */ width: 20px; /* 赤丸のサイズ */ background-color: red; border-radius: 50%; transition: top 1s, left 1s; /* 連続的な移動 */ z-index: 2; /* 赤丸を前面に表示 */ } #circle2 { position: absolute; height: 20px; /* 青丸のサイズ */ width: 20px; /* 青丸のサイズ */ background-color: blue; border-radius: 50%; transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */ z-index: 1; /* 青丸を前面に表示 */ } #line { position: absolute; height: 40px; width: 1px; /* 縦線の幅 */ background-color: white; right: -1px; /* 右枠に配置 */ top: calc(50% - 20px); /* 上下中央に配置 */ } </style> </head> <body> &l

青丸を赤丸が追いかけるアニメーションのコード

7/31/2024 11:39:00 午前

<!DOCTYPE html> <html> <head> <style> #container { position: relative; height: 300px; width: 300px; border: 1px solid black; } #circle { position: absolute; height: 20px; /* 赤丸のサイズ */ width: 20px; /* 赤丸のサイズ */ background-color: red; border-radius: 50%; transition: top 1s, left 1s; /* 連続的な移動 */ z-index: 2; /* 赤丸を前面に表示 */ } #circle2 { position: absolute; height: 20px; /* 青丸のサイズ */ width: 20px; /* 青丸のサイズ */ background-color: blue; border-radius: 50%; transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */ z-index: 1; /* 青丸を前面に表示 */ } #line { position: absolute; height: 40px; width: 1px; /* 縦線の幅 */ background-color: white; right: -1px; /* 右枠に配置 */ top: calc(50% - 20px); /* 上下中央に配置 */ } </style> </head> <body> <div id="container"

Twilogのバックアップを使ってツイッターの投稿を丸ごと自分のサイトに表示する

5/17/2024 06:56:00 午前

　Twilogのバックアップファイル"767i_bot-230930.xml.gz"を解凍して得られた"767i_bot-230930.xml"の構造は次の通り。 <?xml version="1.0" encoding="UTF-8"?> <tweets> <tweet> <id>1655731020979933184</id> <time>230509 092652</time> <text>～</text> </tweet> <tweet> <id>1410361141390241797</id> <time>210701 071434</time> <text>～</text> </tweet> ～ </tweets> 　「time」の形式が気に入らなければテキストエディタで置換する。（例：検索文字列「<time>(\d{2})(\d{2})(\d{2})\ (\d{2})(\d{2})(\d{2})」、置換文字列「<time>20$1/$2/$3\ $4:$5:$6」）　このファイルを自分のサイトにアップロードして、ブラウザで開いた時に投稿の一覧表を表示する。　その前に、上のコードに次のように使うxslファイル"767i_bot.xsl"を指定する。 <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="767i_bot.xsl"?> <tweets> ～ </tweets> その"767i_bot.xsl"のコードは次の通り。（一部修正あり） <xsl:stylesheet vers

見ているwebページの文章をマストドンでシェアするためのブックマークレット

5/06/2024 09:42:00 午前

　私には必要ないのだけど、ブラウザで見ているページの一部を引用して、ページタイトルとURLを含めてマストドンにシェアするためのブックマークレットがあれば良いと思う。でも、Twitterの時と異なり、個人が運営しているサーバーに対する負荷も気になる。だから、これまでは作ろうと思ってなかったのだけど、とりあえず、コードだけは残しておこうと思う。　Twitterで同じようなことをする際にはシェア用のURLの後ろにシェアする文字列が連なっているURLにアクセスしていて、その為のブックマークレットは簡単に作れた。マストドンでも同じような方法でブックマークレットを作れるらしい。　私が使っている"mastodon-japan.net"の場合は"https://mastodon-japan.net/share?text=～"の"～"に投稿したい文字列が入力されるようなブックマークレットを作れば良い。"fedibird.com"の場合は"https://fedibird.com/share?text=～"の"～"に投稿したい文字列が入力されるようなブックマークレットを作れば良い。　それぞれのコードは次のとおりである。 mastodon-japan.netの場合 javascript:(function(){if(document.getSelection()!=''){window.open('https:// mastodon-japan.net /share?text='+encodeURIComponent('"'+document.getSelection()+'"\n'+document.title+'\n')+encodeURIComponent(document.location.href));}else{window.open('https:// mastodon-japan.net /share?text='+encodeURIComponent(document.title+'\n')+enco