AppleStoreDevelopprSite/index.html at main · harumidiv/AppleStoreDevelopprSite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>野生のプログラマZ</title>
<style>
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.45;margin:0;background:#f6f7fb;color:#0b1220}
header{background:linear-gradient(90deg,#6c5ce7,#00b4d8);color:#fff;padding:36px 20px;text-align:center}
header h1{margin:0;font-size:clamp(20px,4vw,32px)}
header p{margin:8px 0 0;opacity:.95}
.container{max-width:1100px;margin:28px auto;padding:0 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(11,18,32,0.06);overflow:hidden;display:flex;flex-direction:column;min-height:260px;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(11,18,32,0.10)}
.media{padding:18px;display:flex;align-items:flex-start;gap:12px}
.art{width:84px;height:84px;border-radius:18px;object-fit:cover;flex-shrink:0}
.art-fallback{display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px;width:84px;height:84px;border-radius:18px}
.meta{flex:1}
.meta h3{margin:0 0 4px;font-size:18px}
.meta p{margin:0;font-size:13px;color:#435165;line-height:1.5;white-space:normal}
.card .body{padding:0 18px 18px 18px;margin-top:auto}
.actions{display:flex;gap:10px;justify-content:center}
.btn{text-decoration:none;text-align:center;padding:10px 12px;border-radius:8px;border:1px solid rgba(11,18,32,0.06);background:#1f8cff;color:#fff;font-weight:600;width:48%}
footer{text-align:center;color:#6b7280;padding:28px 20px}
footer p{margin:6px 0}
footer a{color:#1f8cff;text-decoration:none}
@media (max-width:460px){.meta h3{font-size:16px}.art,.art-fallback{width:68px;height:68px;border-radius:14px}}

.tag {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 8px;
    border-radius: 16px;
    background-color: #e2e8f0;
    color: #435165;
    font-size: 12px;
    font-weight: 500;
}
</style>
</head>
<body>
<header>
<h1>野生のプログラマZ</h1>
<p>App Storeに公開しているアプリの一覧。各カードの「詳細」から個別ページへ飛べます。</p>
</header>

<main class="container">
<section class="grid" id="appsGrid"></section>
</main>

<footer>
<small>このページは App Store のデベロッパーページをもとに作成されています。</small>
<p>お問い合わせは <a href="https://twitter.com/u11238123" target="_blank" rel="noopener">TwitterのDM</a> にて受け付けています。</p>
<p><a href="privacy.html" target="_blank">プライバシーポリシー</a></p>
</footer>

<script>
const apps = [
　{ name:'かぶ戦記', url:'https://apps.apple.com/jp/app/id6752121856', desc:'株のトレードで戦った記録を感情やメモとともに記録するアプリです', category:'ファイナンス', image:'image/icon/kabusenki.png', page:'detail/kabusenki.html' },
　{ name:'AI俳句バトル', url:'https://apps.apple.com/jp/app/id6753979897', desc:'「AI俳句バトル」は、日本の伝統文化である俳句と、最新のAI技術を融合させた新感覚の言葉遊びアプリです。', category:'エンターテイメント', image:'image/icon/aiHaikuBattle.png', page:'detail/AIHaikuBattle.html' },

  { name:'ぺろのーむ', url:'https://apps.apple.com/jp/app/id1454250247', desc:'振り子の動作をアメを舐める動きで表現したメトロノームアプリです。', category:'ミュージック', image:'image/icon/peronome.png', page:'detail/peronome.html' },
  { name:'oh!natto', url:'https://apps.apple.com/jp/app/id1457049172', desc:'Oh!Natto!は納豆アクションゲームです。たくさん混ぜて時間内にたくさん食べよう', category:'ゲーム', image:'image/icon/mame.png', page:'https://inouefood.github.io/inouefood/natto.html' },
  { name: 'まんがのしおり', url: 'https://apps.apple.com/jp/app/id6469087739', desc: 'たくさんの漫画を読んでいると何巻まで、何話まで読んだかわからなくなる瞬間ありませんか？', category: 'ユーティリティ', image: 'image/icon/DigitalBookmark.png', page:'detail/digiralBookmark.html' },
  { name: 'アニメ手帳', url: 'https://apps.apple.com/jp/app/id1556976347', desc: '今期視聴しているアニメを一括管理できるアプリ、見ているサイトに直接飛べる！', category: 'エンターテインメント', image: 'image/icon/animeSchedule.png', page:'https://animeschedule-23f6d.web.app/' },
  { name: 'Rubi', url: 'https://apps.apple.com/jp/app/rubi/id1471085589', desc: 'わからない感じにルビを振るアプリです、音声入浴や手書きもあるよ、感じを克服しよう！', category: '辞書／辞典／その他', image: 'image/icon/rubi.png', page:'detail/rubi.html' },
  { name: 'だれのあし', url: 'https://apps.apple.com/jp/app/1465352189', desc: 'いろんな足を見て一体それは誰の足なのかを当てるクイズゲームです、わかるかな？', category: 'カジュアル', image: 'image/icon/whoLeg.png', page:'detail/whoLeg.html' },
  { name: 'えびフライ', url: 'https://apps.apple.com/jp/app//id1461666071', desc: '🍤を空に飛ばす、ただそれだけのゲーム。意外とハマってしまうかも？', category: 'アクション', image: 'image/icon/ebiFly.png', page:'detail/ebiFly.html' },
  { name: 'Kodo-心臓博物館', url: 'https://apps.apple.com/jp/app/6444230294', desc: '心臓の鼓動は生き物によって速さが違う、みんなの生きる速さを手の中で感じてください', category: '教育', image: 'image/icon/kodo.png', page:'detail/kodo.html' },
  { name: 'たぷれこ', url: 'https://apps.apple.com/jp/app/id6443822117', desc: 'パワハラが横行する現代社会でいつでもワンタップで録音ができる防犯アプリ', category: '仕事効率化', image: 'image/icon/tapreco.png', page:'detail/tapreco.html' },
  { name: 'toio コントローラアプリ', url: 'https://apps.apple.com/jp/app/id1469030441', desc: 'toio 用コントローラ、ゲームソフトがなくてもtoioを操作してラジコンのように楽しめます', category: 'エンターテインメント', image: 'image/icon/toioController.png', page:'detail/toioController.html' },
  { name: 'Switchキャプチャ', url: 'https://apps.apple.com/jp/app/id6471073089', desc: 'Switchのキャプチャを扱うユーティリティ、iPadでゲームを楽しめます', category: 'アクション', image: 'image/icon/switch-svc-icon-deleteAlpha.png', page:'detail/SwitchCapture.html' }
];


const grid = document.getElementById('appsGrid');

apps.forEach(app=>{
  const card = document.createElement('article'); card.className='card';
  const media = document.createElement('div'); media.className='media';
  const img = document.createElement('img'); img.className='art'; img.src=app.image; img.alt=app.name;
  media.appendChild(img);
  const meta = document.createElement('div'); meta.className='meta';
  const h3 = document.createElement('h3'); h3.textContent=app.name; meta.appendChild(h3);
  const p = document.createElement('p'); p.textContent=app.desc; meta.appendChild(p);
  media.appendChild(meta); card.appendChild(media);

  const body = document.createElement('div'); body.className='body';
  const tags = document.createElement('div'); tags.className='tags';
  const tag = document.createElement('span'); tag.className='tag'; tag.textContent=app.category; tags.appendChild(tag);
  body.appendChild(tags);

  const actions = document.createElement('div'); actions.className='actions';
  const aStore = document.createElement('a'); aStore.className='btn'; aStore.href=app.url; aStore.target='_blank'; aStore.textContent='App Store';
  const aDetail = document.createElement('a'); aDetail.className='btn'; aDetail.href=app.page; aDetail.textContent='詳細';
  actions.appendChild(aStore); actions.appendChild(aDetail);
  body.appendChild(actions);
  card.appendChild(body);
  grid.appendChild(card);
});
</script>
</body>
</html>