/* global React, ReactDOM, PHASES, CHECKLISTS, TIPS, GLOSSARY, RisoMachineDiagram, SeparationSim, PassAnimation, DrumSwapDiagram, TrappingDiagram, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect */ const { useState, useEffect, useMemo } = React; const STORAGE_KEY = 'riso_manual_state_v1'; function loadState() { try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch(e){ return {}; } } function saveState(s) { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch(e){} } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "riso", "lang": "ja", "inkCombo": "YPBK" }/*EDITMODE-END*/; function App() { const persisted = loadState(); const [phaseIdx, setPhaseIdx] = useState(persisted.phaseIdx || 0); const [checks, setChecks] = useState(persisted.checks || {}); const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); // apply theme/lang to useEffect(() => { document.documentElement.setAttribute('data-theme', tweaks.theme || 'riso'); document.documentElement.setAttribute('data-lang', tweaks.lang || 'ja'); }, [tweaks.theme, tweaks.lang]); useEffect(() => { saveState({ phaseIdx, checks }); }, [phaseIdx, checks]); function toggleCheck(id) { setChecks(c => ({...c, [id]: !c[id]})); } // Total checklist progress (includes 3 synthetic "read" acks: cover, tips, glossary) const READ_KEYS = ['cover_read', 'tips_read', 'glossary_read']; const totalChecks = Object.values(CHECKLISTS).reduce((n, arr) => n + arr.length, 0) + READ_KEYS.length; const checklistIds = new Set([ ...Object.values(CHECKLISTS).flatMap(arr => arr.map(c => c.id)), ...READ_KEYS, ]); const doneChecks = Object.entries(checks).filter(([k,v]) => v && checklistIds.has(k)).length; const pct = Math.round((doneChecks / totalChecks) * 100); // Phase complete = all its checks done, OR cover/reference pages marked read const isPhaseComplete = (pid) => { const list = CHECKLISTS[pid]; if (list) return list.every(c => checks[c.id]); // Cover, tips, glossary use a synthetic "_read" check return !!checks[pid + '_read']; }; const phase = PHASES[phaseIdx]; const prev = phaseIdx > 0 ? PHASES[phaseIdx-1] : null; const next = phaseIdx < PHASES.length-1 ? PHASES[phaseIdx+1] : null; return (
{phase.numLabel} {tweaks.lang === 'en' ? phase.titleEn : phase.titleJa}
{next && ( )}
); } function TweaksPanelHost({tweaks, setTweak}) { return ( setTweak('theme', v)} options={[ {value:'riso', label: tweaks.lang==='en' ? 'Riso' : 'リソ印刷'}, {value:'light', label: tweaks.lang==='en' ? 'Light' : 'ライト'}, {value:'dark', label: tweaks.lang==='en' ? 'Dark' : 'ダーク'}, ]}/> setTweak('lang', v)} options={[{value:'ja', label:'日本語'}, {value:'en', label:'English'}]}/> setTweak('inkCombo', v)} options={tweaks.lang==='en' ? [ {value:'YPBK', label:'Y + P + B + K (standard)'}, {value:'FLOR', label:'Fl. Pink + Fl. Yellow + K + Teal'}, {value:'DUO', label:'Fl. Orange + P + B + K'}, ] : [ {value:'YPBK', label:'Y + P + B + K (標準)'}, {value:'FLOR', label:'蛍光P + 蛍光Y + K + Teal'}, {value:'DUO', label:'蛍光Orange + P + B + K'}, ]}/> ); } // ================= // Sidebar // ================= function Sidebar({phases, idx, setIdx, pct, done, total, isComplete}) { return ( ); } // ================= // Phase renderer // ================= function PhaseRenderer({phase, checks, toggle, tweaks}) { const readKey = phase.id + '_read'; const readBlock = (
確認 Acknowledge
toggle(readKey)}>
このページを読んだ I have read this page
); if (phase.kind === 'cover') return <>{readBlock}; if (phase.kind === 'tips') return <>{readBlock}; if (phase.kind === 'glossary') return <>{readBlock}; return (
PHASE {phase.numLabel} / 6

{tweaks.lang==='en'?phase.titleEn:phase.titleJa}

{tweaks.lang==='en' ? phase.titleJa : phase.titleEn}

{tweaks.lang==='en'?phase.leadEn:phase.leadJa}

{phase.kind === 'phase1' && } {phase.kind === 'phase2' && } {phase.kind === 'phase3' && } {phase.kind === 'phase4' && } {phase.kind === 'phase5' && } {phase.kind === 'phase6' && } {CHECKLISTS[phase.id] && ( )}
); } // ================= // Cover // ================= function Cover({tweaks}) { const isEn = tweaks?.lang === 'en'; return (

RISOGRAPH {isEn ? '4-Color Printing Manual' : '4色印刷マニュアル'} WORKSHOP / v1.0

{isEn ? 'Step-by-step guide for 4-color printing on a 2-drum Risograph (MZ / MD-class) — six phases from data prep to final dry, in two paper passes.' : '2ドラム機（MZ/MD系）を使い、2回の紙通し（2パス）で4色を印刷する手順を、データ作成から仕上げまで6つのフェーズに整理しています。'}

{isEn ? '2ドラム機（MZ/MD系）で4色を2パス印刷する実機ガイド。' : 'Step-by-step guide for 4-color printing on a 2-drum Risograph (MZ / MD-class), in two passes.'}

{isEn ? 'Machine / 対象機' : '対象機 / Machine'}
2-drum (MZ / MD)
{isEn ? 'Passes / パス' : 'パス / Passes'}
2 passes
{isEn ? 'Colors / 色数' : '色数 / Colors'}
4 colors
{isEn ? 'Audience / 対象' : '対象 / Audience'}
{isEn ? 'Beginners · Students' : '初心者・学生'}
{isEn ? 'The Process at a Glance / 全体像' : '全体像 / The Process at a Glance'}
{isEn ? 'Phases / フェーズ数' : 'フェーズ数 / Phases'}
6
{isEn ? 'From data prep to final dry' : 'データ作成から最終乾燥まで'}
{isEn ? 'Duration / 所要時間' : '所要時間 / Duration'}
6–10h
{isEn ? 'Includes drying / 乾燥時間を含む' : '乾燥時間を含む / Includes drying'}
{isEn ? 'Surplus / 推奨予備' : '推奨予備 / Surplus'}
+30%
{isEn ? 'Buffer for misfeeds & misregistration' : 'ロス対策で多めに刷る'}
i
{isEn ? 'For Operators / 利用者の方へ' : '利用者の方へ / For Operators'}
左のサイドバーから各フェーズに進めます。チェックボックスは自動保存されるので、印刷中にこのページを開いたまま進捗を確認できます。 Use the sidebar to navigate phases. Checkboxes auto-save, so you can keep this page open beside the machine while you work and your progress will persist.
); } // ================= // Phase 1 — Data // ================= function Phase1() { return ( <>

デザインデータを、印刷したい4色（例：Yellow, Pink, Blue, Black）ごとにレイヤー分けします。各レイヤーの色情報をグレースケール（K濃度0〜100%）に変換します。K100%がインク濃度100%です。 Split your design into 4 layers — one per ink color. Convert each layer to grayscale; K100% = full ink coverage.

版ズレで生じる白抜けを防ぐため、隣接する色は0.1〜0.5mmほどデータ同士をオーバーラップさせます。 Overlap adjacent colors by 0.1–0.5mm so misregistration doesn't reveal the paper underneath.

FIG.01 — Trapping±0.3mm

写真やグラデーションの濃淡はドライバ側で網点処理されますが、データ側で先にハーフトーン処理（ディザリング等）を行うと、より意図通りのレトロな仕上がりになります。 Halftoning is automatic in the driver, but pre-processing in your data tool gives a more controlled retro feel.

  • 推奨解像度：300〜600 dpiRecommended: 300–600 dpi
  • 写真は事前にディザリング処理を検討Consider dithering photos beforehand

各色ごとに個別のPDF、または複数ページPDFとして書き出します。ファイル名は刷る順番とインク色がひと目で分かるよう統一します。 Export each color as its own PDF (or as a multipage PDF). Use a naming convention that makes the print order obvious.

命名規則 / Naming ConventionNaming Convention / 命名規則
{`01_Yellow.pdf
02_Pink.pdf
03_Blue.pdf
04_Black.pdf`}
); } // ================= // Phase 2 — Setup // ================= function Phase2() { return ( <>

1色目と2色目のインクドラム（例：ドラム1にYellow、ドラム2にPink）を本体にセットします。 Insert the first two ink drums — e.g. Drum 1 = Yellow, Drum 2 = Pink.
  • 給紙トレイに用紙をセットし、用紙ガイドをぴったり合わせるLoad paper, snug the feed guides against the stack
  • 排紙トレイのガイドも用紙サイズに合わせて調整するAdjust output tray guides to paper size
  • 用紙の表裏と天地を確認Verify front/back orientation and head/foot
 ); } // ================= // Phase 3 — Pass 1 // ================= function Phase3() { return ( <>

PCから1色目・2色目のデータをプリンタードライバー経由で送信し、製版（マスター作成）を行います。 Send pass-1 data through the print driver and let the machine cut new masters for both drums.

数枚の試し刷りを行い、タッチパネルやハードキーの「天地（上下）」「左右」調整ボタンで、データ上の基準位置と実際の印刷位置が合うように調整します。 Run a few test sheets. Use the panel's vertical / horizontal offset controls to align prints to the design's reference position.

FIG.02 — Registration controls
Y / 天地 X / 左右 SKEW / 斜行

位置が決まったら本刷りを行います。 Once registration is dialed in, print the run.

 ); } // ================= // Phase 4 — Drying // ================= function Phase4() { return ( <>

リソグラフのインク（大豆油・米ぬか油ベースの半水性インク）は、紙に浸透しながらゆっくり乾燥します。1パス目が終わったら、紙質やインク量に応じて数時間〜半日程度を目安に置きます。 Riso's soy / rice-bran ink dries by absorption — wait several hours to half a day after pass 1, depending on paper and ink coverage.

DRYING ~ 6h
  • 紙の隅を指で軽くこすり、インクが指に付かないことを確認Rub a corner gently — no ink should transfer to your finger
  • 2枚を重ね、強く押し付けても下の紙裏に色が移らないことを確認Stack two sheets and press — no offset to the back of the upper sheet
 ); } // ================= // Phase 5 — Pass 2 // ================= function Phase5() { return ( <>

ドラムを3色目・4色目（例：ドラム1にBlue、ドラム2にBlack）に交換します。 Swap to the third and fourth drums — e.g. Drum 1 = Blue, Drum 2 = Black.

FIG.03 — Drum swap procedure

3色目・4色目のデータを送信し、製版します。 Send pass-2 data and let the machine cut new masters.

ここが4色印刷の最難関です。試し刷りを行い、すでに刷られている1・2色目に対して、3・4色目がピタリと合うように微調整を繰り返します。わずかな斜行は給紙トレイの角度調整ダイヤルで補正します。 This is the hardest moment of the whole run. Test, adjust, repeat — until pass-2 colors land precisely on top of pass-1. Use the feed-tray skew dial for tilt.

ズレが許容範囲内に収まったら、残りの枚数を印刷します。 Once registration is acceptable, print the remainder.

2-PASS TIMELINE — interactivePRESS PLAY
 ); } // ================= // Phase 6 — Finishing // ================= function Phase6() { return ( <>

すべての印刷が完了したら、インクが完全に定着するまで風通しの良い場所で乾燥させます。 After all printing, dry the sheets fully in a ventilated area until ink is fully set.

乾燥後、必要に応じて裁断機でトンボ（トリムマーク）を切り落として完成です。 When dry, trim crop marks with a guillotine cutter — and you're done.
  • 湿気の少ない場所に平積みで保管Store flat in a low-humidity area
  • 蛍光色は紫外線で退色するため遮光保管が望ましいFluorescent inks fade in UV — keep finished prints in the dark
 ); } // ================= // Tips page // ================= function TipsPage({tweaks}) { const isEn = tweaks?.lang === 'en'; const big = isEn ? 'Troubleshooting' : 'トラブルシューティング'; return (
APPENDIX A

{big}

{isEn ? 'Diagnostic index' : 'Troubleshooting Index'}

紙詰まり・ローラー汚れ・インクかすれ・版ズレなど、現場でよくあるトラブルへの対処をまとめました。 Common issues that come up at the machine, with quick fixes.

{TIPS.map(t => (
TIP {t.num}

{t.ja.t} {t.en.t}

{t.ja.d} {t.en.d}

))}
); } // ================= // Glossary page // ================= function GlossaryPage({tweaks}) { const isEn = tweaks?.lang === 'en'; const big = isEn ? 'Glossary' : '用語集'; return (
APPENDIX B

{big}

{isEn ? 'Terms & abbreviations' : 'Glossary'}
{GLOSSARY.map((g, i) => (
{isEn ? g.en : g.ja} {isEn ? g.ja : g.en}
{isEn ? (g.dEn || g.d) : g.d}
))}
); } // ================= // Step / CheckList / Callout // ================= function Step({n, titleJa, titleEn, children}) { return (
{n}

{titleJa} {titleEn} {titleEn} {titleJa}

{children}
); } function CheckList({items, checks, toggle}) { return (
フェーズ完了チェック Phase completion checklist
{items.map(it => (
toggle(it.id)}>
{it.ja} {it.en}
))}
); } function Callout({type='tip', titleJa, titleEn, ja, en}) { const icon = type === 'warn' ? '!' : (type === 'tip' ? 'i' : '?'); return (
{icon}
{titleJa} {titleEn}
{ja} {en}
); } // ================= // Mount // ================= ReactDOM.createRoot(document.getElementById('root')).render();