目次
AIに手伝ってもらい、Instagram投稿に便利なWebアプリを作りました
Instagramで使うタグは人によってだいたい決まっていて、投稿内容によって差し替えることが多いと思うので、よく使うタグをためておいて、一括してコピペするためのアプリをPerplexity AIに作ってもらいました。Instagram Tag Selectorと言います（AIが名前をいつの間にか付けてくれました）。
- 左側（Available Tags）に普段使うタグを追加する
- 追加は入力時に頭に#を付けなくても、自動的に#付きになる
- Selected Tagsのタグ数を下でカウントする
- Available Tagsから任意のタグをクリックすると右側（Selected Tags）にコピーされる
- Selected Tagsのタグ数が30個を超えると、警告が出てそれ以上追加できない
- 同じタグが重複して保存されないようにする（Available Tags/Selected Tags共通）
- Selected Tagsをオールクリアしてやり直せる
- レスポンシブ対応
- Availabe Tag削除前に確認メッセージ
ごくごく単純なアプリのつもりが、細かく機能や制限を付けたくなってしまいました。自分の普段使っているアプリで当たり前のような仕様はちゃんと考えられて作られているのだなぁと今更思いました。ほぼAIの吐き出したコードのままなので冗長な部分もあるかもしれません。
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Tag Selector</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="pane left">
<h2>Available Tags</h2>
<p>Right-click to remove a tag (confirmation required).</p>
<div id="tag-cloud"></div>
<div class="input-group">
<input type="text" id="new-tag" placeholder="Add new tag (without #)">
<button onclick="addNewTag()">Add Tag</button>
</div>
</div>
<div class="pane right">
<h2>Selected Tags</h2>
<p>Click when remove a tag.</p>
<div id="selected-tags"></div>
<div class="actions">
<button class="copy-button" onclick="copyTags()">Copy Tags</button>
<button class="clear-button" onclick="clearAllTags()">Clear All</button>
<div class="tag-count" id="tag-count">Tags: 0</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS (styles.css)
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
width: 90%;
max-width: 1200px;
background: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.pane {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.pane.left {
border-bottom: 1px solid #ddd;
}
@media (min-width: 768px) {
.container {
flex-direction: row;
}
.pane.left {
border-right: 1px solid #ddd;
border-bottom: none;
}
}
.tag {
display: inline-block;
background: #007bff;
color: white;
padding: 5px 10px;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
.tag:hover {
background: #0056b3;
}
.actions {
margin-top: 20px;
}
.copy-button, .clear-button {
display: block;
width: 100%;
padding: 10px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom: 10px;
}
.copy-button {
background: #28a745;
}
.copy-button:hover {
background: #218838;
}
.clear-button {
background: #f44336;
}
.clear-button:hover {
background: #c62828;
}
.tag-count {
margin-top: 10px;
font-weight: bold;
}
.input-group {
margin: 10px 0;
display: flex;
flex-direction: column;
}
.input-group input {
padding: 10px;
margin-bottom: 10px;
flex: 1;
}
.input-group button {
padding: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.input-group button:hover {
background: #0056b3;
}
@media (min-width: 768px) {
.input-group {
flex-direction: row;
}
.input-group input {
margin-bottom: 0;
margin-right: 10px;
}
}JavaScript (script.js)
const tagCloud = document.getElementById('tag-cloud');
const selectedTags = document.getElementById('selected-tags');
const tagCount = document.getElementById('tag-count');
function createTagElement(tagText) {
const tag = document.createElement('span');
tag.className = 'tag';
tag.textContent = tagText;
return tag;
}
function updateTagCount() {
tagCount.textContent = `Tags: ${selectedTags.children.length}`;
}
function saveTags() {
const tags = Array.from(tagCloud.children).map(tag => tag.textContent);
localStorage.setItem('availableTags', JSON.stringify(tags));
}
function loadTags() {
const tags = JSON.parse(localStorage.getItem('availableTags')) || [];
tags.forEach(tagText => {
const tag = createTagElement(tagText);
tagCloud.appendChild(tag);
});
}
tagCloud.addEventListener('click', (event) => {
if (event.target.classList.contains('tag')) {
const tagText = event.target.textContent;
if (!Array.from(selectedTags.children).some(tag => tag.textContent === tagText)) {
if (selectedTags.children.length >= 30) {
alert('You can select up to 30 tags only.');
return;
}
const tag = createTagElement(tagText);
selectedTags.appendChild(tag);
updateTagCount();
}
}
});
tagCloud.addEventListener('contextmenu', (event) => {
event.preventDefault();
if (event.target.classList.contains('tag')) {
const tagText = event.target.textContent;
if (confirm(`Are you sure you want to remove the tag "${tagText}"?`)) {
tagCloud.removeChild(event.target);
saveTags();
}
}
});
selectedTags.addEventListener('click', (event) => {
if (event.target.classList.contains('tag')) {
selectedTags.removeChild(event.target);
updateTagCount();
}
});
function addNewTag() {
const newTagInput = document.getElementById('new-tag');
let newTagText = newTagInput.value.trim();
if (newTagText && !newTagText.startsWith('#')) {
newTagText = '#' + newTagText;
}
if (newTagText && !Array.from(tagCloud.children).some(tag => tag.textContent === newTagText)) {
const tag = createTagElement(newTagText);
tagCloud.appendChild(tag);
newTagInput.value = '';
saveTags();
} else if (newTagText) {
alert('Tag already exists or is invalid.');
}
}
function copyTags() {
const tags = Array.from(selectedTags.children).map(tag => tag.textContent).join(' ');
navigator.clipboard.writeText(tags).then(() => {
alert('Tags copied to clipboard!');
}).catch(err => {
alert('Failed to copy tags.');
});
}
function clearAllTags() {
while (selectedTags.firstChild) {
selectedTags.removeChild(selectedTags.firstChild);
}
updateTagCount();
}
window.onload = loadTags;
コメント