Instgram美人時計 : KNN KandaNewsNetwork 4knn.tv

かつて美人時計と言うウェブアプリがありました。街でスカウトしてきた女性が1分に1枚ずつ交代していくと言う。一人１分で 60人。24時間で、1,440人の美人が1日に登場する時計でした。

企画もアイディアも面白いんですが、手間がかかりますね。

そこで思ったのですが、Instagramで見ている画像で時計が作れればなぁと思いました。取り急ぎ24枚URLがあると1時間ずつになりますね。

こういうアイディアをInstagramの派生で提供してくれると、もっとInstagramが常駐して滞在時間に貢献してくれると思います。

いつも癒してくれる

https://www.instagram.com/hanaonlyf/

ちゃんへのリスペクトもふくめ♥

インスタグラムでかつての　美人時計　を作りたい！

権利関係をふくめてどんなアプリになるのか？

ChatGPT-5です。

インスタグラムのお気に入りを24　URLを集めて、
インスタ時計というアプリを作りたいです。
1時間に1枚づつ表示していく時計です。
デジタル時計のバリエーションは５つくらいから選べるようにして、ブラウザで開きっぱなしにできる壁紙兼ねる時計のようなもの。
URLを24個貼り付けると、ローカルで動く。もしくは、シェアできるようにもなるとよいです。

機能要件

1. 画像表示

• Instagram の投稿 URL（または画像直リンク）を 24 個入力可能

• 1 時間ごとに自動で次の画像に切り替える

（例：00:00 → 画像1、01:00 → 画像2 … 23:00 → 画像24）

• ブラウザを開きっぱなしで表示可能

2. 時計表示

• デジタル時計（5 種類のテーマ切り替え）

• 12 時間／24 時間表示の切り替え

3. 設定管理

• 入力した URL をローカルストレージに保存（再読み込みしても維持）

• エクスポート／インポートで他ユーザーと設定共有可能

4. 動作モード

• ローカル HTML ファイルとして動作（インターネット接続不要）

• オプションで Web 公開（GitHub Pages など）

UI案

1. 設定画面

• 24 個のテキストボックスに URL を入力

• 「テーマ選択」ドロップダウン

• 保存ボタン／エクスポート／インポート

2. 表示画面

• 背景に画像

• 右下または中央にデジタル時計

• 時計テーマ変更可能

懸念点

• InstagramのURLが「埋め込み可能画像直リンク」でない場合、CORSやログイン制限で表示できない可能性がある

→ 安定動作には、事前に画像をダウンロードし、ローカルまたはCDNに置く方が確実

• 公開時はInstagramの利用規約に準拠する必要あり（特に他人の画像の場合）

⸻

このアプリの試作版をHTML+JSで作成すれば、MacやWindowsで直接開いて動きます。

もしご希望であれば、24URL入力→時計付きスライドショー表示のベースコードをこちらで組みます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インスタ時計</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: black;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease;
    font-family: sans-serif;
  }
  .clock {
    font-size: 4em;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
  }
  .settings {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.8);
    padding: 10px;
    max-height: 90vh;
    overflow-y: auto;
  }
  .settings input {
    width: 300px;
    margin-bottom: 5px;
  }
  .theme1 .clock { color: white; }
  .theme2 .clock { color: yellow; font-family: monospace; }
  .theme3 .clock { color: cyan; text-shadow: 0 0 10px cyan; }
  .theme4 .clock { color: lime; font-weight: bold; }
  .theme5 .clock { color: pink; font-style: italic; }
</style>
</head>
<body class="theme1">

<div class="clock" id="clock">00:00</div>

<div class="settings" id="settings">
  <h3>URL設定（24時間分）</h3>
  <div id="urlInputs"></div>
  <label>テーマ:
    <select id="themeSelect">
      <option value="theme1">テーマ1</option>
      <option value="theme2">テーマ2</option>
      <option value="theme3">テーマ3</option>
      <option value="theme4">テーマ4</option>
      <option value="theme5">テーマ5</option>
    </select>
  </label><br><br>
  <button id="saveBtn">保存</button>
</div>

<script>
const urlInputsContainer = document.getElementById('urlInputs');
for (let i=0; i<24; i++) {
  const input = document.createElement('input');
  input.type = 'text';
  input.placeholder = `${i}時の画像URL`;
  input.id = `url${i}`;
  urlInputsContainer.appendChild(input);
  urlInputsContainer.appendChild(document.createElement('br'));
}

function loadSettings() {
  const saved = JSON.parse(localStorage.getItem('instaClock') || '{}');
  for (let i=0; i<24; i++) {
    document.getElementById(`url${i}`).value = saved[`url${i}`] || '';
  }
  document.getElementById('themeSelect').value = saved.theme || 'theme1';
  document.body.className = saved.theme || 'theme1';
}

function saveSettings() {
  const data = {};
  for (let i=0; i<24; i++) {
    data[`url${i}`] = document.getElementById(`url${i}`).value.trim();
  }
  data.theme = document.getElementById('themeSelect').value;
  localStorage.setItem('instaClock', JSON.stringify(data));
  document.body.className = data.theme;
}

function updateClockAndImage() {
  const now = new Date();
  const hh = String(now.getHours()).padStart(2,'0');
  const mm = String(now.getMinutes()).padStart(2,'0');
  document.getElementById('clock').textContent = `${hh}:${mm}`;

  const saved = JSON.parse(localStorage.getItem('instaClock') || '{}');
  const imgUrl = saved[`url${now.getHours()}`];
  if (imgUrl) {
    document.body.style.backgroundImage = `url('${imgUrl}')`;
  } else {
    document.body.style.backgroundImage = '';
  }
}

document.getElementById('saveBtn').addEventListener('click', saveSettings);
document.getElementById('themeSelect').addEventListener('change', saveSettings);

loadSettings();
updateClockAndImage();
setInterval(updateClockAndImage, 1000 * 60); // 1分ごと更新
</script>

</body>
</html>

実装はHTMLのみ

00:00