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

docs/tutorial/improvement-plan.md

@@ -161,7 +161,7 @@ end
 
 `ruby-basics-7-next` の最終ステップで:
 - 「Smalruby で書いた `puts` のコードは、TryRuby や本物の Ruby でもそのまま動くよ」と橋渡しメッセージ
-- 「TryRuby を開く」ボタン (新規タブで https://try.ruby-lang.org/ja/ を開く)
+- 「TryRuby を開く」ボタン (新規タブで https://try.ruby-lang.org/ を開く — TryRuby は URL パスでの言語指定を受け付けないため必ずルートを使う)
 - step 構造は既存の `deckIds` ナビゲーション拡張で実装するか、`code` フィールドを使わず外部 URL を持つ新しい step プロパティ (`externalUrl`) を追加するかは実装時に判断。後者の場合 `cards.jsx` の対応も必要。
 
 ### 画像戦略

docs/tutorial/progress.md

@@ -9,8 +9,8 @@
 | Phase | Issue | 状態 | 規模 | 画像 |
 |---|---|---|---|---|
 | Phase 1 — Mesh 再分類 | [#678](https://github.com/smalruby/smalruby3-editor/issues/678) | ✅ マージ済み (PR #683) | 1 PR | 不要 |
-| 基盤 — `setup` プロパティ | (Phase 2 sub-issue 内) | 🟢 実装完了 (レビュー待ち) | 1 PR | 不要 |
-| Phase 2 — Ruby 拡充 | [#679](https://github.com/smalruby/smalruby3-editor/issues/679) | ⚪️ deck 着手前 (基盤マージ後に開始) | 2〜3 PR | ~50 枚 |
+| 基盤 — `setup` プロパティ | (Phase 2 sub-issue 内) | ✅ マージ済み (PR #684) | 1 PR | 不要 |
+| Phase 2 — Ruby 拡充 | [#679](https://github.com/smalruby/smalruby3-editor/issues/679) | 🟡 1/7 deck 実装中 (`ruby-basics-1-numbers`) | 2〜3 PR | ~50 枚 |
 | Phase 3 — Block 4 シリーズ | [#680](https://github.com/smalruby/smalruby3-editor/issues/680) | ⚪️ 未着手 (書誌情報待ち) | 4 PR | ~76 枚 |
 | Phase 4 — DNCL | [#681](https://github.com/smalruby/smalruby3-editor/issues/681) | ⚪️ 未着手 | 3〜4 PR | ~70 枚 |
 

packages/scratch-gui/src/components/library/library.jsx

@@ -50,6 +50,11 @@ const messages = defineMessages({
         defaultMessage: '通信入門 ③ みんなで会話しよう (メッシュ)',
         description: 'Label for Mesh tutorial step 3 — chat across devices via Mesh extension'
     },
+    [CATEGORIES.rubyBasics]: {
+        id: `gui.library.rubyBasics`,
+        defaultMessage: 'Ruby のきほん',
+        description: 'Label for Ruby Basics tutorial category — TryRuby-inspired puts-centric series'
+    },
     membershipTag: {
         defaultMessage: 'Membership',
         description: 'Tag for filtering a library for member only assets',

packages/scratch-gui/src/lib/libraries/decks/en-steps.js

@@ -69,6 +69,13 @@ import chat3Mesh3Step5 from './steps/chat3-mesh3-5-base-code.png';
 import chat3Mesh3Step6 from './steps/chat3-mesh3-6-change-sensor.png';
 import chat3Mesh3Step7 from './steps/chat3-mesh3-7-member-code.png';
 
+// Ruby Basics 1: 計算してみよう
+import rubyBasics1Step1 from './steps/ruby-basics-1-1-intro.png';
+import rubyBasics1Step2 from './steps/ruby-basics-1-2-first-puts.png';
+import rubyBasics1Step3 from './steps/ruby-basics-1-3-result.png';
+import rubyBasics1Step4 from './steps/ruby-basics-1-4-more-math.png';
+import rubyBasics1Step5 from './steps/ruby-basics-1-5-modify.png';
+
 const enImages = {
     // Getting Started
     introRubyTab: introRubyTab,
@@ -130,7 +137,13 @@ const enImages = {
     // Chat Tutorial 3 Mesh 3
     chat3Mesh3Step5: chat3Mesh3Step5,
     chat3Mesh3Step6: chat3Mesh3Step6,
-    chat3Mesh3Step7: chat3Mesh3Step7
+    chat3Mesh3Step7: chat3Mesh3Step7,
+    // Ruby Basics 1: 計算してみよう
+    rubyBasics1Step1: rubyBasics1Step1,
+    rubyBasics1Step2: rubyBasics1Step2,
+    rubyBasics1Step3: rubyBasics1Step3,
+    rubyBasics1Step4: rubyBasics1Step4,
+    rubyBasics1Step5: rubyBasics1Step5
 };
 
 export {enImages};

packages/scratch-gui/src/lib/libraries/decks/index.jsx

@@ -17,6 +17,9 @@ import libraryChat3Mesh1 from './thumbnails/chat-3-mesh-1.jpg';
 import libraryChat3Mesh2 from './thumbnails/chat-3-mesh-2.jpg';
 import libraryChat3Mesh3 from './thumbnails/chat-3-mesh-3.jpg';
 import libraryChat3Mesh1ExternalKairyudo from './thumbnails/chat3-mesh1-external-kairyudo.png';
+// Ruby Basics 1: 計算してみよう
+import libraryRubyBasics1Numbers from './thumbnails/ruby-basics-1-numbers.jpg';
+import libraryRubyBasics1TryRuby from './thumbnails/ruby-basics-1-tryruby.png';
 import {CATEGORIES} from '../tutorial-tags';
 
 // Green flag icon for inline use in tutorial step titles
@@ -1272,6 +1275,120 @@ end`,
             }
         ],
         urlId: 'chat3Mesh3'
+    },
+
+    // ─── Ruby Basics 1: Rubyで計算してみよう ──────────────────────────────────
+    'ruby-basics-1-numbers': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Rubyで計算してみよう"
+                description="Name for Ruby Basics 1: do arithmetic with puts"
+                id="gui.howtos.ruby-basics-1-numbers.name"
+            />
+        ),
+        tags: ['ruby'],
+        category: CATEGORIES.rubyBasics,
+        img: libraryRubyBasics1Numbers,
+        nameMessageId: 'gui.howtos.ruby-basics-1-numbers.name',
+        // Auto-switch to the Ruby tab in Ruby (not DNCL/furigana) mode when
+        // the user opens this tutorial — see docs/tutorial/improvement-plan.md
+        // "チュートリアル起動時の環境セットアップ".
+        setup: {
+            tab: 'ruby',
+            rubyMode: 'ruby'
+        },
+        allowedBlocks: {
+            motion: [],
+            looks: ['looks_sayforsecs', 'looks_say'],
+            sound: [],
+            event: ['event_whenflagclicked'],
+            control: [],
+            sensing: [],
+            operators: []
+        },
+        steps: [
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="Rubyで計算してみよう！"
+                        description="Ruby Basics 1 Step 1: Intro to arithmetic with puts"
+                        id="gui.howtos.ruby-basics-1-numbers.step1.title"
+                    />
+                ),
+                image: 'rubyBasics1Step1',
+                startTutorial: true,
+                animationTarget: 'startTutorialButton'
+            },
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="まずは「puts 2 + 6」を実行してみよう"
+                        description="Ruby Basics 1 Step 2: Insert first puts code"
+                        id="gui.howtos.ruby-basics-1-numbers.step2.title"
+                    />
+                ),
+                image: 'rubyBasics1Step2',
+                code: `when_flag_clicked do
+  puts 2 + 6
+end`,
+                animationTarget: 'insertCodeButton'
+            },
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="{greenFlag}を押すと、ネコが「8」としゃべるよ"
+                        description="Ruby Basics 1 Step 3: Run the program"
+                        id="gui.howtos.ruby-basics-1-numbers.step3.title"
+                        values={{greenFlag: <GreenFlagIcon />}}
+                    />
+                ),
+                image: 'rubyBasics1Step3',
+                animationTarget: 'nextButton'
+            },
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="他の計算も試してみよう（かけ算・わり算・ひき算）"
+                        description="Ruby Basics 1 Step 4: More arithmetic operations"
+                        id="gui.howtos.ruby-basics-1-numbers.step4.title"
+                    />
+                ),
+                image: 'rubyBasics1Step4',
+                code: `when_flag_clicked do
+  puts 4 * 10
+  puts 30 / 4
+  puts 5 - 12
+end`,
+                animationTarget: 'insertCodeButton'
+            },
+            {
+                title: (
+                    <FormattedMessage
+                        defaultMessage="数字を好きなものに変えて、自分だけの計算をしてみよう"
+                        description="Ruby Basics 1 Step 5: Modify the numbers"
+                        id="gui.howtos.ruby-basics-1-numbers.step5.title"
+                    />
+                ),
+                image: 'rubyBasics1Step5',
+                animationTarget: 'nextButton'
+            },
+            {
+                externalResources: {
+                    tryruby: {
+                        url: 'https://try.ruby-lang.org/',
+                        img: libraryRubyBasics1TryRuby,
+                        name: (
+                            <FormattedMessage
+                                defaultMessage="外部サイト「try ruby」で詳しくRubyを学ぶ"
+                                description="External resource: TryRuby online playground"
+                                id="gui.howtos.ruby-basics-1-numbers.external.tryruby.name"
+                            />
+                        )
+                    }
+                }
+            }
+        ],
+        urlId: 'rubyBasics1Numbers'
     }
 };
 

packages/scratch-gui/src/lib/libraries/decks/ja-steps.js

@@ -69,6 +69,13 @@ import chat3Mesh3Step5 from './steps/chat3-mesh3-5-base-code.png';
 import chat3Mesh3Step6 from './steps/chat3-mesh3-6-change-sensor.png';
 import chat3Mesh3Step7 from './steps/chat3-mesh3-7-member-code.png';
 
+// Ruby Basics 1: 計算してみよう
+import rubyBasics1Step1 from './steps/ruby-basics-1-1-intro.png';
+import rubyBasics1Step2 from './steps/ruby-basics-1-2-first-puts.png';
+import rubyBasics1Step3 from './steps/ruby-basics-1-3-result.png';
+import rubyBasics1Step4 from './steps/ruby-basics-1-4-more-math.png';
+import rubyBasics1Step5 from './steps/ruby-basics-1-5-modify.png';
+
 const jaImages = {
     // Getting Started
     introRubyTab: introRubyTab,
@@ -130,7 +137,13 @@ const jaImages = {
     // Chat Tutorial 3 Mesh 3
     chat3Mesh3Step5: chat3Mesh3Step5,
     chat3Mesh3Step6: chat3Mesh3Step6,
-    chat3Mesh3Step7: chat3Mesh3Step7
+    chat3Mesh3Step7: chat3Mesh3Step7,
+    // Ruby Basics 1: 計算してみよう
+    rubyBasics1Step1: rubyBasics1Step1,
+    rubyBasics1Step2: rubyBasics1Step2,
+    rubyBasics1Step3: rubyBasics1Step3,
+    rubyBasics1Step4: rubyBasics1Step4,
+    rubyBasics1Step5: rubyBasics1Step5
 };
 
 export {jaImages};

packages/scratch-gui/src/lib/libraries/tutorial-tags.js

@@ -8,7 +8,9 @@ export const CATEGORIES = {
     // Phase 1).
     meshStep1: 'meshStep1', // 通信入門 ① メッセージを送ってみよう
     meshStep2: 'meshStep2', // 通信入門 ② ふたりで会話しよう
-    meshStep3: 'meshStep3'  // 通信入門 ③ みんなで会話しよう (メッシュ)
+    meshStep3: 'meshStep3', // 通信入門 ③ みんなで会話しよう (メッシュ)
+    // Phase 2: Ruby basics — TryRuby-inspired, puts-centric series
+    rubyBasics: 'rubyBasics' // Ruby のきほん
 };
 
 export default [

packages/scratch-gui/src/locales/en.js

@@ -634,6 +634,15 @@ export default {
     'gui.howtos.chat-3-mesh-3.step8.title':
         'Click your sprite to run! Use "sensor value" to get other people\'s "sent message"',
     'gui.howtos.chat-3-mesh-3.external.kairyudo.name': 'Kairyudo: Try Programming! "Create a Chat App"',
+    // Ruby Basics 1: calculate with puts
+    'gui.library.rubyBasics': 'Ruby Basics',
+    'gui.howtos.ruby-basics-1-numbers.name': "Let's Do Math with Ruby",
+    'gui.howtos.ruby-basics-1-numbers.step1.title': "Let's do math with Ruby!",
+    'gui.howtos.ruby-basics-1-numbers.step2.title': 'Try running `puts 2 + 6` first',
+    'gui.howtos.ruby-basics-1-numbers.step3.title': 'Press {greenFlag} and the cat will say "8"',
+    'gui.howtos.ruby-basics-1-numbers.step4.title': 'Try other operations too (multiply / divide / subtract)',
+    'gui.howtos.ruby-basics-1-numbers.step5.title': 'Change the numbers to whatever you like and do your own math',
+    'gui.howtos.ruby-basics-1-numbers.external.tryruby.name': 'Learn more about Ruby on the external "try ruby" site',
     'gui.menuBar.updateTooltip': 'Try the new Smalruby!',
     'gui.menuBar.updateConfirm':
         'A new version of Smalruby is available. Press "OK" to update now, or "Cancel" to update later.',

packages/scratch-gui/src/locales/ja-Hira.js

@@ -958,6 +958,15 @@ export default {
         'じぶんのスプライトをおしてじっこう！ほかのひとの「そうしんメッセージ」は「センサーのあたい」でとりだせるよ',
     'gui.howtos.chat-3-mesh-3.external.kairyudo.name':
         'かいりゅうどう やってみよう！プログラミング「チャットアプリをせいさくしよう」',
+    // Ruby Basics 1: putsでけいさんしてみよう
+    'gui.library.rubyBasics': 'Ruby のきほん',
+    'gui.howtos.ruby-basics-1-numbers.name': 'Rubyでけいさんしてみよう',
+    'gui.howtos.ruby-basics-1-numbers.step1.title': 'Rubyでけいさんしてみよう！',
+    'gui.howtos.ruby-basics-1-numbers.step2.title': 'まずは「puts 2 + 6」をじっこうしてみよう',
+    'gui.howtos.ruby-basics-1-numbers.step3.title': '{greenFlag}をおすと、ネコが「8」としゃべるよ',
+    'gui.howtos.ruby-basics-1-numbers.step4.title': 'ほかのけいさんもためしてみよう（かけざん・わりざん・ひきざん）',
+    'gui.howtos.ruby-basics-1-numbers.step5.title': 'すうじをすきなものにかえて、じぶんだけのけいさんをしてみよう',
+    'gui.howtos.ruby-basics-1-numbers.external.tryruby.name': 'がいぶサイト「try ruby」でくわしくRubyをまなぶ',
     // Mesh tag
     'gui.libraryTags.mesh': 'メッシュ',
     'gui.cards.insert-ruby': 'ルビーをにゅうりょくする',

packages/scratch-gui/src/locales/ja.js

@@ -926,6 +926,15 @@ export default {
         '自分のスプライトを押して実行！他の人の「送信メッセージ」は「センサーの値」で取り出せるよ',
     'gui.howtos.chat-3-mesh-3.external.kairyudo.name':
         '開隆堂 やってみよう！プログラミング「チャットアプリを制作しよう」',
+    // Ruby Basics 1: putsで計算してみよう
+    'gui.library.rubyBasics': 'Ruby のきほん',
+    'gui.howtos.ruby-basics-1-numbers.name': 'Rubyで計算してみよう',
+    'gui.howtos.ruby-basics-1-numbers.step1.title': 'Rubyで計算してみよう！',
+    'gui.howtos.ruby-basics-1-numbers.step2.title': 'まずは「puts 2 + 6」を実行してみよう',
+    'gui.howtos.ruby-basics-1-numbers.step3.title': '{greenFlag}を押すと、ネコが「8」としゃべるよ',
+    'gui.howtos.ruby-basics-1-numbers.step4.title': '他の計算も試してみよう（かけ算・わり算・ひき算）',
+    'gui.howtos.ruby-basics-1-numbers.step5.title': '数字を好きなものに変えて、自分だけの計算をしてみよう',
+    'gui.howtos.ruby-basics-1-numbers.external.tryruby.name': '外部サイト「try ruby」で詳しくRubyを学ぶ',
     // Mesh tag
     'gui.libraryTags.mesh': 'メッシュ',
     'gui.cards.all-tutorials': 'チュートリアル',