投稿

Javascriptのエラーを確認するコードの使用例

<!DOCTYPE html> <html lang="ja"> <head>   <meta charset="UTF-8">   <title>Test</title> </head> <body>   <script>     function test() {       let foo = 33;        try {         if (foo) {            let foo = foo + 55;         }        } catch (e) {         document.write("エラーが発生しました: " + e.message + "<br>");       }       document.write("fooの値: " + foo);     }     test(); ...
コメントを投稿
続きを読む

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

関連記事： 見ている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}年${month}月${day}日 ${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 .replace(/[\u2028\u2029]/g,'') ;const regex=/:\s?"(.+)(?=" — Bluesky)/;const match=titleText.match(regex); ...
コメントを投稿
続きを読む

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

赤丸の速度 (秒): 青丸の速度 (秒): 更新 オリジナル： 赤丸を青丸が追いかけるアニメーションのコード（正式） <!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%;    ...
コメントを投稿
続きを読む

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

オリジナル： 青丸を赤丸が追いかけるアニメーションのコード <!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; /* 赤丸を前面に表示 */  ...
コメントを投稿
続きを読む

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

オリジナル： 青丸を赤丸が追いかけるアニメーションのコード <!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; /* 赤丸を前面に表示 */   ...
コメントを投稿
続きを読む

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

<!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; /* 赤丸を前面に表示 */     }    ...
コメントを投稿
続きを読む

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

　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...
コメントを投稿
続きを読む