Mastodon URL変換ツール
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;
}
.container {
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
textarea {
width: 300px;
height: 80px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h2>Mastodon URL変換ツール</h2>
<textarea id="inputUrl" placeholder="https://ドメイン/@ユーザーID"></textarea><br>
<button onclick="convertAndCopy()">変換してコピー</button><br>
<p id="result"></p>
</div>
<script>
function convertAndCopy() {
const inputUrl = document.getElementById('inputUrl').value;
const match = inputUrl.match(/https:\/\/([^\/]+)\/@([^\/]+)/);
if (match && match.length === 3) {
const domain = match[1];
const userId = match[2];
const converted = `@${userId}@${domain}`;
navigator.clipboard.writeText(converted).then(() => {
document.getElementById('result').textContent = "クリップボードにコピーしました: " + converted;
}).catch(err => {
console.error('クリップボードへのコピーに失敗しました', err);
document.getElementById('result').textContent = "コピーに失敗しました。";
});
} else {
document.getElementById('result').textContent = "正しい形式のURLを入力してください。";
}
}
</script>
</body>
</html>
追記：
次のページのコードに追加してもらった。
WordPressのコメントURLを変換するコード
https://html-memo-hitorinezumi.blogspot.com/2025/03/Convert-WordPress-Comment-URLs.html
依頼文：次のコードの入力欄が「https://ドメイン/@ユーザーID」のような文字列の場合は例外として「@ユーザーID@ドメイン」のように出力することはできませんか？ （コード略）
Gemini案：
<div class="container">
<h1>URL変換ツール</h1>
<textarea id="inputUrl" placeholder="変換前のURLを入力してください"></textarea>
<textarea id="outputUrl" placeholder="変換後のURL" readonly></textarea>
<button id="copyButton">コピー</button>
</div>
<script>
const inputUrl = document.getElementById('inputUrl');
const outputUrl = document.getElementById('outputUrl');
const copyButton = document.getElementById('copyButton');
inputUrl.addEventListener('input', function() {
const url = inputUrl.value;
let newUrl = url;
// Mastodon URLの例外処理
const mastodonMatch = url.match(/https:\/\/([^\/]+)\/@([^\/]+)/);
if (mastodonMatch && mastodonMatch.length === 3) {
const domain = mastodonMatch[1];
const userId = mastodonMatch[2];
newUrl = `@${userId}@${domain}`;
} else {
// 通常のURL変換処理
newUrl = url.replace(/\/[\w\-]+\/#comment-([\w\-]+)/, '/?c=$1');
}
outputUrl.value = newUrl;
});
copyButton.addEventListener('click', function() {
outputUrl.select();
document.execCommand('copy');
alert('コピーしました！');
});
</script>
追記：
さらに依頼：「コピー」を押さなくて、出力フォームをクリックすれば出力フォームの文字列がコピーされるようにできますか？
Gemini案：
<div class="container">
<h1>URL変換ツール</h1>
<textarea id="inputUrl" placeholder="変換前のURLを入力してください"></textarea>
<textarea id="outputUrl" placeholder="変換後のURL" readonly></textarea>
</div>
<script>
const inputUrl = document.getElementById('inputUrl');
const outputUrl = document.getElementById('outputUrl');
inputUrl.addEventListener('input', function() {
const url = inputUrl.value;
let newUrl = url;
const mastodonMatch = url.match(/https:\/\/([^\/]+)\/@([^\/]+)/);
if (mastodonMatch && mastodonMatch.length === 3) {
const domain = mastodonMatch[1];
const userId = mastodonMatch[2];
newUrl = `@${userId}@${domain}`;
} else {
newUrl = url.replace(/\/[\w\-]+\/#comment-([\w\-]+)/, '/?c=$1');
}
outputUrl.value = newUrl;
});
// 出力フォームのクリックイベントを処理
outputUrl.addEventListener('click', function() {
outputUrl.select();
document.execCommand('copy');
alert('コピーしました！');
});
</script>
コメント
コメントを投稿