二葉澪降の各媒体の更新履歴をタイムライン形式で追えるウェブアプリ、「Fragments Interface」をバイブコーディングでリリースしたので、その過程を追っていく。
まず、最終的な形はこんな感じ。
https://2t8.net/feedからアクセスして、ホーム画面に追加することで、ウェブサイトをアプリ化できる「PWA」として利用できる。
まず、ホームタブでは、全体タイムラインや各媒体ごとのタイムラインに切り替えて閲覧できる。
詳細を押すと、記事の冒頭部分が表示され、さらに「ブラウザで開く」を押すことで、アプリ内ブラウザが立ち上がり、閲覧することができる。
右下なんかで、普通のブラウザに飛ぶこともできる。
検索タブでは、記事の冒頭部分か記事のタイトルから検索することができる。
設定タブでは、表示するフィードを選ぶことができる。
このようなアプリを作った過程を見ていこう。
構想
まず、Geminiと雑談方式でアイデアを練っていった。
まず、どういう形で作るか検討したんだけど、Geminiによると、「AndroidアプリはWindowsで開発できるものの、iOSアプリは開発にXCodeがいり、リリース時の署名もMacでしかできないからあなたの環境では難しい」とのこと。
なんか互換ソフトとかないかググったけど、無理っぽかった。
ということで、「PWA」という、ウェブサイトをアプリ風に表示する技術を使ってアプリ化することにした。
七瀬は最初WordpressをPWA化するプラグインを提案してきたけど、私はwordpressのデザインに影響されたくなかったので、バイブコーディングでhtmlとして実装することにした。
っと、小休憩。
このアプリの名前をどうするか考えることにする。
サイトの名前が、Atelier Fragmentsなので、そこから「Fragments」という言葉を入れたいなと思った。
最初に思い付いたのは、Fragments Studioだけど、その名前だとスタジオって運営側、二葉側のインタフェースな気がしたので、却下。
インタフェース…？Fragments Interface？これ採用で。
再開。
まず大枠として、構造を考える必要があるので、ナビゲーションから考えた。
もともとTwitterもRSSとして取得する予定だったけど、調べた感じめんどくさそうだったし、2026年だとそのやり方も全滅してそうだったので諦め。
実装
UIが頭に思い浮かんできたので、さっそく書かせた。
以下のようなコードを書いてください
必要なファイルは何か、ファイル構造とともに教えてください
アイコンは、ウェブフォントを使用してください
様々なRSSをタイムラインとして観測でき、タップすると詳細が見れて、その下には「さらに見る」ボタンがあり、押すとリンクがブラウザで見れるというPWAを作りたいです
まず、このアプリは「グローバルナビゲーション」を持ちます。
グローバルナビゲーションでは、「ホーム」=タイムラインが表示されるタブ、「検索」=調べたい単語や日付を指定し、各RSSから検索結果を出せるタブ、「設定」=表示するRSSタイムラインや、ホームタイムラインに表示するRSSを選択でき、タイムラインタブでのタイムラインの順番を入れ替えれる機能などがあるタブの3つがあります。
この3つは、薄灰色の角丸50%の浮いている島の中に、均等に水色#e9eef6の角丸50%で存在し、家のアイコン、虫眼鏡のアイコン、歯車のアイコンを白色#ffffffで持ちます
選択されたタブは、薄青色#d3e3fdに変化し、アイコンは青色#1b51a3で表示されます
タイムラインタブでは、「ホーム」=選択されたすべてのRSSを上が最新になるタイムライン形式で届けます。「日記」=https://sizu.me/yusquid/rssのRSSだけを表示します。「RADIO」=https://2t8.net/radio/feed/のRSSだけを表示します。「LAB」=https://2t8.net/lab/feed/のrssだけを表示します。「ARTCILE」=https://2t8.net/article/feed/のRSSだけを表示します。「澪律観測」=https://reirhythm.2t8.net/article/feed/のRSSだけを表示します。
ホームタブの上部には、これらのタイムラインを行き来できるメニューがあります、イメージはTwitter
検索タブでは、検索単語か日付、またはそのどちらもで、全てのRSSから記事を探すことができます
設定タブでは、ホームタイムラインで表示するRSSの種類を変更することができます。また、ホームタブの上部に表示するRSSの種類を変更することができます
これ無料枠のGemini Proで指示して、出てきた「index.html」「style.css」「app.js」「manifest.json」を新しいフォルダ内に作成、VSCodeで開いてコピペ。
そしたらこれができたってわけさ。
まさか一回でこのクオリティができると思わなくて、大興奮。
なんか忘れてるような気がするなと思ったら通知機能なかったので、「sw.js」を書かせて実装。
これを少し手直ししてFFFTPで2t8.net内の/feedフォルダに入れたら、https://2t8.net/feedとして動作するように。
そうそう、PWAのアイコンファイルも入れておかないと。
実際ホーム画面に追加して触ってみたら、検索がエンターキーでできないのと、スワイプでタイムライン切り替えができないのが気になったので、実装した。
ということで完成。
意外とあっけなくできてしまった。
最近のAIすごいな、おかげで自分の力が全然つかないや。
今日はこのへんで。
