フレーム問題で考えてみるやる夫スレViewer

このスライドの紹介の百倍やる夫スレ界隈は奥が深いです。
皆さん、ぜひともやる夫スレ界隈をエンジニアリングしましょう！
DMは@scrpgil (https://x.com/scrpgil) まで！

Transcript

1. フレーム問題で考えてみるやる夫スレViewer
2. 免責事項 フレーム問題関係なかった どちらかというと生成AIの話です フレーム問題ガチ勢の方すみません
3. 生成AIで作るやる夫スレViewer
4. 自己紹介 榊原宏祐 株式会社キネカ 取締役 CTO 趣味は、将棋・音楽・ビール・AA です
5. ビールは好きですか？
6. 好きな醸造所 Y.Market Brewing（愛知） Totopia Brewery（愛知） Outsider Brewing（山梨） CAMAD Brewery（岐阜） TK Brewery（神奈川） 伊勢角屋麦酒（三重） ベアードビール（静岡） マイン・シュロス（浜松）
7. 質問 ビールにハマったきっかけは何ですか？
8. やる夫スレでハマりました。 「できない子はビールを飲む」 ビールを飲むことを生きがいとするできない子が、様々なビールを飲んでその味に ついて語るグルメ系作品 全シリーズで合計 542 本のビールを紹介している
9. 作品で登場するビール（抜粋） ヴィルテンブルガー アッサムボック Tap 6 インドの青鬼 ロンドンプライド シメイ 赤・白・青 キャスティール・トリペル いわて蔵　オイスタースタウト ベアード ばかやろーエール 箕輪 桃ヴァイツェン ライオンスタウト
10. このスレを人に勧めたいが… 現在のインターネット環境では表示崩れやデバイスの制約が厳しい。
11. やる夫スレViewerを作ってみる① 今からつくるならv0 by Vercel
12. やる夫スレViewerを作ってみる②
13. これじゃない感 アスキーアート用フォントに対応していない 謎のテキストエリアいらない 縦書きは不要（小説Viewer向けの機能） →Claude、ChatGPTも同様、もしくはこれ以下の結果
14. 小説Viewerは結構良いものができる DEMO
15. やる夫スレ Viewer も正しくフレーム（枠）を定義すれば 作成してくれるはず
16. やる夫スレViewerの定義 基本情報 データ形式 必用な機能 スタイリング 操作性
17. 基本情報
18. スレッドフロート掲示板発祥 引用：http://applepolishing.blog.2nt.com/blog-entry-377.html 1レスごとに物語が進行していく。読者の反応もその場で受け取ることができる
19. 小説以上、漫画以下の表現力 引用：https://note.com/happy_arai/n/na4a54dd71907 やる夫スレはアスキーアートと文章を使って作成されており、小説以上、漫画以下の演出が 可能となる
20. 例: 漫画っぽい演出 引用：https://note.com/happy_arai/n/na4a54dd71907
21. 縦スクロール やる夫スレは縦スクロールで物語が展開されます 引用：https://note.com/happy_arai/n/ne261927f93d1
22. 安価 1: 名無しさん やる夫はどうする？ A) 勇気を出して告⽩する B) もう少し様⼦を⾒る >>3 のレスを採⽤ 2: 名無しさん >>1 A に⼀票！ 3: 名無しさん >>1 B がいいと思う 分岐A: 告⽩ルート やる夫は意を決して告⽩した。 （ ´ ∀｀） 「す、好きだ！」 思い切って⾔ってよかった... GOOD END 分岐B: 様⼦⾒ルート やる夫はもう少し様⼦を⾒ることにした。 （；´ ∀｀） 「まだ早いかな... 」 次の機会を待とう。 CONTINUE... 安価システムの特徴: ・>> 番号 でレスを参照（クリッカブル） ・読者参加型の物語展開 ・複数の分岐可能性 ・分岐による物語の多様化 機能的な特徴: ・クリックで該当レスにジャンプ ・レス番号の⾃動リンク化 ・スムーズなスクロール移動 レス番号による物語分岐。読者が物語の進む方向に決定権をもたせることができる
23. 安価 「やる夫スレ」における「安価」とは、 「作者が特定の条件を提示し、その条件に合致し そうだと思うものを読者に挙げてもらい、挙げられた中から作者が採用する」システム のことである。 引用: コミュニケーションによって構築されるキャラクター「やる夫」(専修大学)
24. まとめブログ文化 引用: https://touhouyaruosure.com/blog-entry-15456.html 投稿されたやる夫スレをfc2blogなどに読みやすくまとめる文化がある。
25. データ形式
26. HTML で定義 <dl> <dt> 1 ：名無しさん：2024/10/28( ⽉) 12:34:56 ：ID:abc123 <dd> ∧ ＿∧ （ ´∀ ｀） （   ） |  |  | dl タグ内に、dt タグ、dd タグで一組のレスが記述されています
27. dt タグ レス番号、名前、日付、ID の情報を「：」区切りで記述します
28. dd タグ <dd> 　　　 　 ∧＿∧　　　／￣￣￣￣￣ 　　　　（　´∀｀）＜　ビールうめぇ！ 　　　　（　　　） 　＼＿＿＿＿＿ 　　　　 | 　 | 　| 　　　　（＿_）＿） dd タグの特徴: ・アスキーアート表⽰領域 ・本⽂テキスト表⽰領域 ・white-space: nowrap でAA 崩れ防⽌ ・⾏間調整で可読性向上 レスの本文を記述されている
29. Viewer に必用な機能編
30. フォントの変更 フォントファミリー Saitamaar Saitamaar aahub RobotoJAA フォントサイズ 12px 24px AA用フォント（Saitamaarフォント）に対応しています。 文字サイズを調節でき、読者にと って見やすいサイズで表示できます
31. その他有名なAA用フォント 引用: AAHub Font（https://fonts.aahub.org/）
32. レスポンシブ対応 PC 表⽰ スマホ表⽰ スマートフォンとパソコン、どちらの画面でみても表示がくずれることはない!
33. オートリンク 変換前 https://example.com >>1 example.jpg 変換後 https://example.com >>1 Image Preview dd タグ内に url が記載されている場合は、a タグ（リンク）に変換します。URL が.png、.jpg 等画像ファイルの拡張子の場合、img タグに変換します
34. スタイリング
35. シンプルな画面設計 物語に専念できるよう、qidianのようなシンプルなUIです。フォントサイズ、ファミリーの変 更などは、サイドバーにボタンがあり、そこから設定ページを開いて行います
36. 表示くずれ対策 .aa { font-family: "Saitamaar"; white-space: nowrap; font-size: 16px; line-height: 17px; } 本文は line-height: (font-size + 1)px; white-space: nowrap; が設定されてます
37. 操作性
38. キーボード操作 1: 名無しさん 2: 名無しさん 3: 名無しさん ← 前のレス → 次のレス キーボード操作の特徴: ・←→キーで前後のレスに移動 ・⾃動スクロールで該当レスが画⾯中央に ・選択中のレスがハイライト表⽰ ← で一つ前のレス、→ で一つ先のレスを自動で top に持ってきます
39. タップ操作 1: 名無しさん 2: 名無しさん 3: 名無しさん 前のレス 次のレス タップ操作の特徴: ・画⾯左側タップ: 前のレス ・画⾯右側タップ: 次のレス ・タップで⾃動スクロール ・現在位置がハイライト タップ操作 左右で分割された タップエリア スマートフォンに 最適化された 操作性 画面 左側をタップすると前のレス、画面 右側をタップすると先のレスに移動できます
40. プロンプトの作成 ここまでのやる夫スレの特徴をプロンプトにする
41. 【制作依頼】やる夫スレViewer Web アプリケーション ▪ プロジェクト概要 やる夫スレを快適に閲覧するためのWeb アプリケーションの制作をお願いいたします。 ▪ 主要機能要件 1. コンテンツ表示 - HTML の<dl>/<dt>/<dd> 形式で記述されたやる夫スレの表示 - アスキーアート用フォント（Saitamaar ）対応 - Web フォントURL: https://keage.tokyo/fonts/Saitamaar.woff2 - フォントサイズ調整機能 - フォントファミリー変更機能 - Saitamaar 、aahub 、RobotoJAA から選択可能 - ダークモード対応 - レスポンシブ対応 2. ナビゲーション機能 - キーボード操作（←→ キーでレスの位置にスクロール移動） - タップ操作（画面左右タップでレスの位置にスクロール移動） - 安価ジャンプ機能（>> 番号クリックで該当レスへ） 3. コンテンツ拡張機能 - 安価`>>ID 番号` の自動リンク化 - URL の自動リンク化 - 画像URL の自動展開表示 ▪ UI/UX 要件 1. デザイン - シンプルなUI 設計（qidian 風） - ヘッダー、フッターなし - 縦スクロールで全レス配置 - 設定項目はサイドバーに配置 - 名前はcolor: rgb(0, 136, 0) 、font-weight: bold を設定 - ID はcolor: rgb(255, 0, 0) 、 font-weight: bold を設定 - 本文スタイリング指定（line-height: (font-size + 1px); white-space: nowrap; ） 2. レスポンシブ対応 - スマートフォン、PC 両方での最適表示 ▪ 技術仕様 データ形式： <dl> <dt> レス番号：名前：日付：ID</dt> <dd> レス本文</dd> </dl> * サンプルデータも上記の形式で作成してください ご検討のほど、よろしくお願いいたします。
42. やる夫スレViewer v2 DEMO1 DEMO2
43. UIを凝りたいならFigmaで作った方が良い UI/UXの作成は、まだまだ難しそう難しそう
44. 画像からUIコンポーネントの作成もできる DEMO
45. まとめ v0（Claude）の進歩はすごい やる夫スレでなければ、もっと簡単に作れそう 見た目は Figma で作った方が早い 名前の通り0→1の「0」で使うに収める ビューアーサイトは 12 月前半に公開予定 hono + tailwind + prisma + Cloudflare D1/R2 で作成中
46. アスキーアートで世界を変えたい人へ！ AAに関するWebサイト or プロダクトを作ろう！ @scrpgilで感想をください！
47. おわり