htmlソースメモ

投稿

Fediverseの投稿を他のマストドンのインスタンスで表示するためのブックマークレットとWordPress用コード

3/25/2025 10:31:00 午前

自分が使っているマストドンのインスタンスとは異なるインスタンスでの投稿をブーストしたりするために自分が使っているインスタンスで表示するためのブックマークレットのコードは次の通り。 javascript:(function(){window.open('https://ドメイン/authorize_interaction?uri='+encodeURIComponent(document.URL));})(); このコードを基に、プラグイン「ActivityPub」でFediverseの一部となったWordPressの記事をマストドンのインスタンスで表示させるボタンのコード。WordPressの記事ページに表示する。次のphpコードをfunctions.phpに追加し、ウィジェットの「カスタムHTML」などに [mastodon_share_hybrid] と記述する。シェアボタンの上に「マストドンで表示」ボタンを設置 | いしい＠試行錯誤 https://ishii00141.stars.ne.jp/20250322-1621-2080/ function mastodon_share_hybrid() { $instances = array( 'mastodon-japan.net' => 'mastodon-japan.net', 'mastodon.social' => 'mastodon.social', 'fedibird.com' => 'fedibird.com', 'mstdn.jp' => 'mstdn.jp', 'custom' => 'ドメイン記入' // 自由記入欄を表示するための選択肢 ); $output = '<select id="mastodon-instance-select">'; $output .= '<option value="">マストドンで表示</option>'; ...

Mastodon URL変換ツール

3/12/2025 07:29:00 午後

Gemini コードを作ってもらった。依頼文：「https://ドメイン/@ユーザーID」のような文字列を「@ユーザーID@ドメイン」のように変換して簡単にクリップボードにコピーできるフォームがあるWebページを作りたいです。コードを教えてください。一つのファイルで実現できるようにお願いします。 Geminiが提案したコード（一部は私が追加）： <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Mastodon URL変換ツール</title> <style> body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; ...

WordPressのコメントURLを変換するコード

3/11/2025 11:06:00 午前

次のような目的のWebページを作成するコード。目的：「https://ドメイン/記事番号/#comment-コメントID」のような形式のURLを「https://ドメイン/?c=コメントID」に変換する。Webページのフォームに変換前のURLを入力したら自動で変換後のURLが表示されてコピーしやすくなるようなWebページ。 Geminiの提案（一部追加）： <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>URL変換ツール</title> <style> .container { width: 500px; margin: 50px auto; text-align: center; } textarea { width: 100%; heigh...

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

12/28/2024 10:08:00 午後

<!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の投稿をマストドンでシェアするためのブックマークレットのコード

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}年${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); ...

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

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%; ...

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

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; /* 赤丸を前面に表示 */ ...