6月, 2025 - 長留裕平のブログ

Googleの人気記事を拾ってくるサイト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Googleニュース 人気記事アグリゲーター</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    body { background: #f8f9fa; padding-top: 20px; font-family: 'Arial', sans-serif; transition: background .3s, color .3s; }
    .dark-mode { background: #2c2c2c; color: #f1f1f1; }
    #controls { margin-bottom: 20px; }
    .card { border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin-bottom: 15px; transition: transform .2s, background .3s, color .3s; }
    .dark-mode .card { background: #3a3a3a; color: #f1f1f1; }
    .card:hover { transform: translateY(-3px); }
    .card-title { font-size: 1.25rem; margin-bottom: .5rem; }
    .meta { font-size: 0.85rem; color: #6c757d; margin-bottom: .5rem; }
    .dark-mode .meta { color: #ccc; }
    .thumbnail { width: 100%; height: auto; border-top-left-radius: 10px; border-top-right-radius: 10px; }
    #loading { display: none; font-size: 2rem; text-align: center; margin-top: 40px; }
    #error { display: none; color: red; text-align: center; margin-top: 20px; }
    @media (min-width: 768px) {
      #articles .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h1>Googleニュース 人気記事</h1>
      <button id="darkModeToggle" class="btn btn-outline-secondary">ダークモード</button>
    </div>
    <div id="controls" class="d-flex flex-wrap justify-content-between align-items-end">
      <div class="form-group mb-2 mr-2">
        <label for="categorySelect">カテゴリ:</label>
        <select id="categorySelect" class="form-control">
          <option value="WORLD">世界</option>
          <option value="BUSINESS">ビジネス</option>
          <option value="TECHNOLOGY">テクノロジー</option>
          <option value="ENTERTAINMENT">エンタメ</option>
          <option value="SPORTS">スポーツ</option>
          <option value="SCIENCE">科学</option>
          <option value="HEALTH">健康</option>
        </select>
      </div>
      <div class="form-group mb-2 mr-2 flex-grow-1">
        <label for="searchInput">キーワード:</label>
        <input id="searchInput" type="text" class="form-control" placeholder="タイトルで絞り込み">
      </div>
      <div class="form-group mb-2 mr-2">
        <label for="maxItems">表示数:</label>
        <input id="maxItems" type="number" class="form-control" value="20" min="1" max="100">
      </div>
      <button id="refreshBtn" class="btn btn-primary mb-2">更新</button>
    </div>
    <div id="loading"><i class="fas fa-spinner fa-spin"></i> 読み込み中...</div>
    <div id="error"></div>
    <div id="articles" class="row"></div>
  </div>

  <!-- FontAwesome & jQuery & Bootstrap JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
  <script>
    const controls = {
      category: document.getElementById('categorySelect'),
      search: document.getElementById('searchInput'),
      maxItems: document.getElementById('maxItems'),
      refresh: document.getElementById('refreshBtn'),
      darkToggle: document.getElementById('darkModeToggle')
    };
    const articlesContainer = document.getElementById('articles');
    const loading = document.getElementById('loading');
    const errorMsg = document.getElementById('error');
    const body = document.body;

    function getFeedUrl(topic) {
      return `https://news.google.com/rss/headlines/section/topic/${topic}?hl=ja&gl=JP&ceid=JP:ja`;
    }
    async function fetchArticles() {
      articlesContainer.innerHTML = '';
      errorMsg.style.display = 'none';
      loading.style.display = 'block';
      const topic = controls.category.value;
      const apiUrl = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(getFeedUrl(topic))}`;
      try {
        const res = await fetch(apiUrl);
        const data = await res.json();
        if (data.status !== 'ok') throw new Error('取得失敗');
        let items = data.items.map(item => ({
          title: item.title,
          link: item.link,
          date: new Date(item.pubDate),
          thumbnail: item.thumbnail || ''
        }));
        const kw = controls.search.value.trim();
        if (kw) items = items.filter(i => i.title.includes(kw));
        items = items.slice(0, parseInt(controls.maxItems.value) || items.length);
        render(items);
      } catch (e) {
        console.error(e);
        errorMsg.textContent = '記事の取得に失敗しました。';
        errorMsg.style.display = 'block';
      } finally {
        loading.style.display = 'none';
      }
    }
    function render(items) {
      if (!items.length) {
        articlesContainer.innerHTML = '<p class="text-center w-100">該当する記事がありません。</p>';
        return;
      }
      items.forEach(i => {
        const col = document.createElement('div'); col.className = 'col-12 col-md-6';
        const thumb = i.thumbnail ? `<img src="${i.thumbnail}" class="thumbnail" alt="サムネイル">` : '';
        col.innerHTML = `
          <div class="card">
            ${thumb}
            <div class="card-body">
              <h2 class="card-title"><a href="${i.link}" target="_blank">${i.title}</a></h2>
              <p class="meta">公開: ${i.date.toLocaleString()}</p>
            </div>
          </div>`;
        articlesContainer.appendChild(col);
      });
    }
    controls.refresh.addEventListener('click', fetchArticles);
    controls.darkToggle.addEventListener('click', () => {
      body.classList.toggle('dark-mode');
    });
    document.addEventListener('DOMContentLoaded', fetchArticles);
  </script>
</body>
</html>

Eternal.html 画像投稿サイト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Eternal</title>
  <style>
    body {
      font-family: sans-serif;
      background: #f5f5f5;
      margin: 0;
      padding: 0;
    }

    header {
      background: #e60023;
      color: white;
      padding: 1em;
      text-align: center;
      font-size: 1.8em;
    }

    .controls {
      padding: 1em;
      background: #fff;
      text-align: center;
    }

    .controls input, .controls button {
      margin: 0.5em;
      padding: 0.5em;
      font-size: 1em;
    }

    .grid {
      column-count: 4;
      column-gap: 1em;
      padding: 1em;
    }

    .pin {
      background: white;
      display: inline-block;
      margin-bottom: 1em;
      width: 100%;
      box-sizing: border-box;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      overflow: hidden;
      position: relative;
    }

    .pin img {
      width: 100%;
      cursor: pointer;
    }

    .description, .tags {
      padding: 0.5em;
    }

    .favorite {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 22px;
      color: gray;
      cursor: pointer;
      user-select: none;
    }

    .favorite.active {
      color: gold;
    }

    .likes {
      font-size: 0.9em;
      text-align: right;
      padding: 0 0.5em 0.5em 0;
      color: #888;
    }

    .tag {
      display: inline-block;
      background: #eee;
      padding: 0.2em 0.5em;
      border-radius: 5px;
      margin: 0.2em;
      cursor: pointer;
    }

    .tag:hover {
      background: #ccc;
    }

    @media screen and (max-width: 1024px) {
      .grid {
        column-count: 3;
      }
    }

    @media screen and (max-width: 768px) {
      .grid {
        column-count: 2;
      }
    }

    @media screen and (max-width: 480px) {
      .grid {
        column-count: 1;
      }
    }

    #modal {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    #modal img {
      max-width: 90%;
      max-height: 80vh;
      border-radius: 10px;
    }
  </style>
</head>
<body>

<header>Pintorrest 完全版</header>

<div class="controls">
  <input type="file" id="imageInput" accept="image/*">
  <input type="text" id="descInput" placeholder="説明">
  <input type="text" id="tagInput" placeholder="タグ（カンマ区切り）">
  <button onclick="addPin()">投稿</button>
  <br>
  <input type="text" id="searchBox" placeholder="検索..." oninput="filterPins()">
</div>

<div class="grid" id="grid"></div>

<div id="modal" onclick="this.style.display='none'">
  <img id="modalImg" src="">
</div>

<script>
  let pins = JSON.parse(localStorage.getItem("pins") || "[]");

  function renderPins() {
    const grid = document.getElementById("grid");
    grid.innerHTML = '';
    pins.forEach((pin, index) => {
      const pinElem = document.createElement("div");
      pinElem.className = "pin";
      pinElem.innerHTML = `
        <span class="favorite ${pin.favorited ? 'active' : ''}" onclick="toggleFavorite(${index}, this)">★</span>
        <img src="${pin.image}" onclick="showModal('${pin.image}')">
        <div class="description">${pin.desc}</div>
        <div class="tags">${pin.tags.map(tag => `<span class="tag" onclick="filterByTag('${tag}')">${tag}</span>`).join(' ')}</div>
        <div class="likes">♥ ${pin.likes}</div>
      `;
      grid.appendChild(pinElem);
    });
  }

  function addPin() {
    const imageInput = document.getElementById("imageInput");
    const desc = document.getElementById("descInput").value.trim();
    const tags = document.getElementById("tagInput").value.split(',').map(t => t.trim()).filter(Boolean);
    const file = imageInput.files[0];
    if (!file || !desc) return alert("画像と説明を入力してください");

    const reader = new FileReader();
    reader.onload = function(e) {
      pins.unshift({
        image: e.target.result,
        desc: desc,
        tags: tags,
        likes: 0,
        favorited: false
      });
      savePins();
      renderPins();
      document.getElementById("descInput").value = '';
      document.getElementById("tagInput").value = '';
      document.getElementById("imageInput").value = '';
    };
    reader.readAsDataURL(file);
  }

  function showModal(src) {
    document.getElementById("modalImg").src = src;
    document.getElementById("modal").style.display = 'flex';
  }

  function toggleFavorite(index, elem) {
    pins[index].favorited = !pins[index].favorited;
    pins[index].likes += pins[index].favorited ? 1 : -1;
    savePins();
    renderPins();
  }

  function savePins() {
    localStorage.setItem("pins", JSON.stringify(pins));
  }

  function filterPins() {
    const keyword = document.getElementById("searchBox").value.toLowerCase();
    document.querySelectorAll(".pin").forEach(pin => {
      const text = pin.textContent.toLowerCase();
      pin.style.display = text.includes(keyword) ? "inline-block" : "none";
    });
  }

  function filterByTag(tag) {
    document.getElementById("searchBox").value = tag;
    filterPins();
  }

  renderPins();
</script>

</body>
</html>

『SDガンダムジージェネレーションエターナル』レビュー

ジャンル：シミュレーション / 開発・運営：バンダイナムコエンターテインメント

概要

『Gジェネエターナル』は、ガンダムシリーズのモビルスーツとキャラクターを集めて、自軍を編成し、様々なステージを攻略していくモバイル向け戦略シミュレーションゲームです。『SDガンダム Gジェネレーション』シリーズのスマートフォン向け最新作で、シリーズファンの期待を背負ってリリースされました。

■良かった点

◎歴代ガンダム作品を網羅したボリューム

『機動戦士ガンダム』から『鉄血のオルフェンズ』、さらには外伝系作品やゲームオリジナルまで、数多くの機体やキャラが登場。ファンなら思わずニヤリとする場面も多く、図鑑埋めの楽しさは健在。

◎戦略性の高いユニット編成

部隊の編成やスキルの組み合わせによって難関ステージも突破可能。自分だけのドリームチームを作るのは、やはりGジェネならではの醍醐味。

◎フルボイス＆原作再現シナリオ

ストーリー面では原作の名シーンがしっかり再現されており、アニメを追体験するような気持ちで楽しめます。フルボイス演出も没入感を高めています。

■気になった点

△課金バランスとガチャの厳しさ

ガチャの排出率が厳しめで、好きな機体やキャラを手に入れるにはかなりの課金が必要な印象。「お気に入りの機体で戦いたい」というシリーズの魅力を活かしきれていない部分があります。

△UIが重く、動作が不安定なことも

端末によってはロードが長く、操作がもたつくシーンもあります。改善アップデートに期待。

△オート戦闘頼りになりがち

戦闘のテンポや演出の派手さはやや地味で、結局「オートで周回して素材集め」が主なプレイスタイルになりがち。戦略性を楽しめるモードがもっと欲しいところ。

■総評

Gジェネファンにはたまらない「ガンダムのお祭りゲーム」であり、機体収集や編成の楽しさは健在。ただし、課金面や周回の作業感、UIなどスマホゲームとしての快適さには改善の余地がある。

評価：★★★☆☆（3.5/5）
ファン向けにはおすすめ。ただしガチャ運と根気も必要。

任天堂Switch 2ブレスオブザワイルドのグラフィック

任天堂Switch 2でブレスオブザワイルドのグラフィックは大幅に向上し、より美しく滑らかな表現が期待できます。具体的には、解像度が2倍以上になり、フレームレートも30fpsから60fpsに向上すると予想されます。

詳細な改善点:

解像度:初代Switchの1080pから、Switch 2では約1440p（2.5K相当）まで向上。
フレームレート:初代Switchの30fpsから、Switch 2では60fpsに向上。
ローディング時間:初代Switchで25秒ほどかかっていたローディング時間が、Switch 2では15秒ほどに短縮されると予想されています。

その他:

Switch 2は、最大120fpsのフレームレートをサポートしますが、4K出力時は最大60fpsに制限されると任天堂のよくあるご質問に記載されています。
Switch 2ではHDR対応も期待できるため、より鮮やかな色彩表現も可能になると考えられます。

これらの向上により、ブレスオブザワイルドのグラフィックは、より美しく、より滑らかで、より快適なプレイ体験を提供すると期待されます。

RSSreader.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>超RSSニュースリーダー</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background: #f4f4f4;
      margin: 0;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #222;
    }
    #search {
      display: block;
      margin: 10px auto;
      padding: 10px;
      width: 80%;
      font-size: 16px;
      border-radius: 8px;
      border: 1px solid #ccc;
    }
    #feeds {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }
    .feed-card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      width: 320px;
      padding: 12px;
      box-sizing: border-box;
    }
    .feed-card img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    .feed-card h2 {
      font-size: 16px;
      margin: 0 0 5px;
    }
    .feed-card p {
      font-size: 14px;
      color: #555;
    }
    .feed-card time {
      display: block;
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <h1>超RSSニュースリーダー</h1>
  <input type="text" id="search" placeholder="記事を検索...">

  <div id="feeds"></div>

  <script>
    const rssUrls = [
      "https://news.yahoo.co.jp/rss/topics/top-picks.xml",
      "https://b.hatena.ne.jp/hotentry/it.rss",
      "https://www.nhk.or.jp/rss/news/cat0.xml",
      "http://tyosuke20xx.com/rss"
    ];
    const proxy = "https://api.allorigins.win/get?url=";
    const feedsContainer = document.getElementById("feeds");
    const searchInput = document.getElementById("search");

    let allCards = [];

    function formatDate(pubDateStr) {
      const date = new Date(pubDateStr);
      return isNaN(date) ? "" : `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`;
    }

    function extractImageFromDescription(desc) {
      const match = desc.match(/<img.*?src="(.*?)"/);
      return match ? match[1] : null;
    }

    async function fetchAndDisplayFeeds() {
      feedsContainer.innerHTML = "🔄 更新中…";
      allCards = [];

      for (const url of rssUrls) {
        try {
          const res = await fetch(proxy + encodeURIComponent(url));
          const data = await res.json();
          const parser = new DOMParser();
          const xml = parser.parseFromString(data.contents, "text/xml");
          const items = xml.querySelectorAll("item");

          items.forEach((item, i) => {
            if (i >= 5) return;

            const title = item.querySelector("title")?.textContent || "";
            const link = item.querySelector("link")?.textContent || "#";
            const desc = item.querySelector("description")?.textContent || "";
            const pubDate = item.querySelector("pubDate")?.textContent || "";
            const dateFormatted = formatDate(pubDate);
            const img = extractImageFromDescription(desc);

            const card = document.createElement("div");
            card.className = "feed-card";
            card.innerHTML = `
              ${img ? `<img src="${img}" alt="thumbnail">` : ""}
              <h2><a href="${link}" target="_blank">${title}</a></h2>
              <p>${desc.replace(/<[^>]+>/g, '').slice(0, 100)}...</p>
              <time>${dateFormatted}</time>
            `;
            allCards.push({ title, desc, element: card });
            feedsContainer.appendChild(card);
          });
        } catch (e) {
          console.error("RSS取得失敗:", url, e);
        }
      }
    }

    searchInput.addEventListener("input", () => {
      const keyword = searchInput.value.toLowerCase();
      feedsContainer.innerHTML = "";
      allCards.forEach(({ title, desc, element }) => {
        if (title.toLowerCase().includes(keyword) || desc.toLowerCase().includes(keyword)) {
          feedsContainer.appendChild(element);
        }
      });
    });

    fetchAndDisplayFeeds();
    setInterval(fetchAndDisplayFeeds, 60000); // 60秒ごと自動更新
  </script>
</body>
</html>

『SDガンダム ジージェネレーション エターナル』レビュー

概要