feat(tutorial): add ruby-basics-1-numbers deck (Phase 2)

[takaokouji]

Summary

Phase 2 の最初の Ruby チュートリアル deck を追加します。新カテゴリ rubyBasics「Ruby のきほん」を新設し、TryRuby を参考にした puts ベース の計算チュートリアルを 6 ステップで提供します。

設計上の特徴:

• setup: { tab: 'ruby', rubyMode: 'ruby' } で deck 起動時に Ruby タブ + Ruby モードに自動遷移 (PR feat(tutorial): add deck setup foundation (Phase 2 base) #684 の基盤を活用)
• 全コード例で say(...) ではなく puts ... を一貫して使用 — 学習者が書いたコードはそのまま TryRuby / 標準 Ruby に持ち込める (looks.js:79-151 が puts を looks_say にマップ)
• 最終ステップで TryRuby (https://try.ruby-lang.org/ja/) への導線

Steps (Lv1 only)

1. イントロ: Rubyで計算してみよう！
2. 最初の puts: puts 2 + 6 を実行 (コード挿入)
3. 実行: 緑の旗を押してネコが「8」としゃべるのを確認
4. 他の演算: puts 4 * 10 / puts 30 / 4 / puts 5 - 12 (コード挿入)
5. 自由編集: 数字を好きに変えて自分だけの計算
6. TryRuby 導線: 「ここで書いた puts のコードは本物の Ruby でも同じように動くよ」+ 外部リンク示唆

Changes

File	Change
tutorial-tags.js	CATEGORIES.rubyBasics を追加
library.jsx	「Ruby のきほん」カテゴリラベル追加
decks/index.jsx	ruby-basics-1-numbers deck 定義 + setup: {tab:'ruby', rubyMode:'ruby'} + サムネイル import
decks/{ja,en}-steps.js	6 step 画像の import 登録
decks/steps/ruby-basics-1-*.png	NEW — Playwright で生成した 6 step 画像
decks/thumbnails/ruby-basics-1-numbers.jpg	NEW — ImageMagick で生成したライブラリサムネイル
locales/{en,ja,ja-Hira}.js	deck 名・step タイトルの 3 言語翻訳
docs/tutorial/progress.md	Phase 2 deck 進捗を 1/7 に更新
tools/playwright-verify/generate-ruby-basics-1-steps.mjs	NEW — step 画像生成 (将来の画像更新に再利用可)
tools/playwright-verify/verify-ruby-basics-1.mjs	NEW — deck 動作確認

Verification

[ruby1] categories = ["始めましょう","通信入門 ① …","通信入門 ② …","通信入門 ③ …","Ruby のきほん"]
[ruby1] OK: Ruby のきほん category visible
[ruby1] card open: true
[ruby1] active tab name: ルビー
[ruby1] OK: Ruby tab auto-activated by setup
[ruby1] localStorage dnclMode = false
[ruby1] OK: DNCL mode is off
[ruby1] PASS: ruby-basics-1-numbers deck verified

bin/dx bash -c "cd packages/scratch-gui && npm run lint" 緑。

Test plan

• CI: lint / unit / integration
• 手動: tipsLibrary を開き 5 カテゴリ目に「Ruby のきほん」が表示される
• 「Rubyで計算してみよう」をクリック → Ruby タブが自動で開く / DNCL は無効
• コード挿入ステップで puts 2 + 6 が Monaco に貼り付く
• 緑の旗を押すとスプライトが「8」としゃべる
• 既存 deck (setup なし) は従来通り開ける (デグレなし)

Image quality note

Step 画像は Playwright MCP で Ruby タブの状態を素直に撮影したものです。文字主体で UI 内容は正確ですが、Phase 1 の Mesh 系列 deck のような演出 GIF にはなっていません。実運用で十分な品質ですが、後続 PR で個別に磨き込む余地があります (generate-ruby-basics-1-steps.mjs が再利用可能)。

Related

• 親 issue: feat(tutorial): チュートリアル全体の体系的拡充 (Block / Ruby / Mesh / DNCL) #682
• Sub-issue: feat(tutorial): Phase 2 - Ruby チュートリアル拡充 (TryRuby ベース、puts 中心) + setup 基盤 #679 (部分対応 — Ruby 1/7 deck)
• 設計: docs/tutorial/improvement-plan.md Phase 2
• 進捗: docs/tutorial/progress.md

🤖 Generated with Claude Code

[github-actions]

🚀 Preview deployed: https://smalruby.jp/smalruby3-editor/feature/tutorial-ruby-basics-1-numbers/