-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathmesh-self-sensor.html
More file actions
363 lines (338 loc) · 17 KB
/
Copy pathmesh-self-sensor.html
File metadata and controls
363 lines (338 loc) · 17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メッシュの「センサーの値」が自分の変数も読めるようになりました | スモウルビー</title>
<meta name="description" content="スモウルビーのメッシュ機能で、「センサーの値」ブロックが自分のグローバル変数も読めるようになりました。変更の理由・新旧の違い・後方互換性・お知らせについてわかりやすく説明します。">
<meta name="robots" content="index, follow">
<link rel="shortcut icon" href="static/favicon.ico">
<meta property="og:title" content="メッシュの「センサーの値」が自分の変数も読めるようになりました">
<meta property="og:description" content="新しい動きでは、自分のグローバル変数も「センサーの値」で読めます。変更の理由とお知らせについて説明します。">
<meta property="og:type" content="article">
<meta property="og:site_name" content="スモウルビー">
<meta property="og:locale" content="ja_JP">
<style>
:root {
--ruby-red: #e60012;
--purple: #6a1b9a;
--purple-deep: #4a148c;
--purple-light: #9c27b0;
--gold: #ffeb3b;
--bg: #fafbff;
--text: #2d3748;
--text-light: #718096;
--block-event: #ffbf00;
--block-control: #ffab19;
--block-motion: #4c97ff;
--block-sensing: #5cb1d6;
--block-variable: #ff8c1a;
--ok: #2e9e4f;
--warn: #c0392b;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
line-height: 1.8;
color: var(--text);
background: var(--bg);
}
.container { max-width: 820px; margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--purple); }
.hero {
background: linear-gradient(135deg, var(--purple-deep), var(--purple) 50%, var(--purple-light));
color: #fff;
padding: 2.5rem 1.25rem;
text-align: center;
}
.hero .badge {
display: inline-block;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 50px;
padding: 0.3rem 1rem;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 1rem;
}
.hero h1 { font-size: clamp(1.4rem, 4.5vw, 2rem); line-height: 1.4; }
.hero p { opacity: 0.92; margin-top: 0.75rem; font-size: 1rem; }
section { padding: 2.5rem 0; }
section + section { border-top: 1px solid rgba(0,0,0,0.06); }
h2 {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
h2 .num {
background: linear-gradient(135deg, var(--ruby-red), var(--purple));
color: #fff;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
}
p { margin-bottom: 0.9rem; }
.lead { font-size: 1.05rem; }
/* Scratch-style block mock */
.blocks { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.block {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 8px;
color: #fff;
font-size: 0.9rem;
font-weight: 700;
box-shadow: 0 2px 0 rgba(0,0,0,0.15);
white-space: nowrap;
}
.block .slot {
background: rgba(255,255,255,0.3);
border-radius: 12px;
padding: 1px 9px;
margin: 0 4px;
}
.b-event { background: var(--block-event); }
.b-control { background: var(--block-control); }
.b-sensing { background: var(--block-sensing); }
.b-variable { background: var(--block-variable); }
.indent { margin-left: 22px; }
/* Before / after comparison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
.panel {
background: #fff;
border-radius: 14px;
padding: 1.25rem;
box-shadow: 0 4px 18px rgba(0,0,0,0.06);
border-top: 4px solid #ccc;
}
.panel.before { border-top-color: var(--text-light); }
.panel.after { border-top-color: var(--ok); }
.panel h3 { font-size: 1rem; margin-bottom: 0.75rem; }
.tag { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; color: #fff; }
.tag.old { background: var(--text-light); }
.tag.new { background: var(--ok); }
.result { margin-top: 0.85rem; font-size: 0.9rem; }
.result .empty { color: var(--warn); font-weight: 700; }
.result .value { color: var(--ok); font-weight: 700; }
/* Ruby code */
.ruby-code {
font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
font-size: 0.88rem;
line-height: 1.9;
color: #334155;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-left: 4px solid var(--purple);
border-radius: 10px;
padding: 1rem 1.2rem;
overflow-x: auto;
white-space: pre;
}
.ruby-code .kw { color: #7c3aed; font-weight: 600; }
.ruby-code .fn { color: #2563eb; }
.ruby-code .num { color: #d97706; font-weight: 600; }
.ruby-code .str { color: #059669; }
.ruby-code .cm { color: #94a3b8; }
.ruby-code .var { color: #dc2626; }
.callout {
background: #fff8e1;
border: 1px solid #f4d35e;
border-left: 4px solid var(--gold);
border-radius: 10px;
padding: 1rem 1.2rem;
margin: 1.25rem 0;
}
.callout strong { color: var(--warn); }
.steps { list-style: none; counter-reset: step; }
.steps li {
position: relative;
padding: 0.4rem 0 0.4rem 2.4rem;
margin-bottom: 0.4rem;
}
.steps li::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 0;
top: 0.4rem;
width: 1.7rem;
height: 1.7rem;
border-radius: 50%;
background: var(--purple);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
}
.modal-mock {
max-width: 360px;
margin: 1.25rem 0;
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0,0,0,0.12);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.08);
}
.modal-mock .body { padding: 1.1rem 1.2rem; background: #fff; }
.modal-mock .body h4 { font-size: 1rem; margin-bottom: 0.5rem; text-align: center; }
.modal-mock .body p { font-size: 0.85rem; color: var(--text-light); margin: 0; }
.modal-mock .btns { padding: 0.9rem 1.2rem; background: #fff; border-top: 1px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 0.5rem; }
.btn-primary { background: var(--block-motion); color: #fff; border: none; border-radius: 8px; padding: 0.6rem; font-weight: 700; }
.btn-secondary { background: #fff; color: var(--block-motion); border: 1px solid var(--block-motion); border-radius: 8px; padding: 0.6rem; }
footer {
background: #1a1a2e;
color: rgba(255,255,255,0.7);
text-align: center;
padding: 2rem 1rem;
font-size: 0.8rem;
}
footer a { color: rgba(255,255,255,0.9); }
.home { text-align: center; margin-top: 2rem; }
.home a, .home button {
display: inline-block;
background: linear-gradient(135deg, var(--ruby-red), #b8000e);
color: #fff;
padding: 0.8rem 2rem;
border: none;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<header class="hero">
<div class="badge">メッシュ機能のアップデート</div>
<h1>「センサーの値」が<br>自分の変数も読めるようになりました</h1>
<p>このページでは、何が変わったのか・なぜ変えたのか・お知らせについて説明します。</p>
</header>
<main class="container">
<section>
<p class="lead">
メッシュ機能は、複数のスモウルビーをつないで、<strong>グローバル変数</strong>や<strong>メッセージ</strong>を
リアルタイムに共有する機能です。<br>
「センサーの値」ブロックは、つながっている仲間のグローバル変数を読み取るためのブロックです。
</p>
<p>
これまでは「センサーの値」は<strong>ほかのプロジェクトの変数だけ</strong>を読み、
自分自身が設定したグローバル変数は読めませんでした（いつも空っぽでした）。<br>
新しい動きでは、<strong>自分の変数も、仲間の変数と同じように</strong>「センサーの値」で読めるようになります。
</p>
</section>
<section>
<h2><span class="num">1</span>何が変わったの？</h2>
<p>同じプログラムでも、古い動きと新しい動きで結果が変わります。例として、自分で <code>スコア</code> という
グローバル変数を <code>100</code> にして、それを「センサーの値」で読んでみます。</p>
<div class="blocks" style="margin:1rem 0;">
<div class="block b-event">旗が押されたとき</div>
<div class="block b-variable"><span class="slot">スコア</span> を <span class="slot">100</span> にする</div>
<div class="block b-sensing">センサーの値 <span class="slot">スコア</span></div>
</div>
<div class="compare">
<div class="panel before">
<h3><span class="tag old">これまでの動き</span></h3>
<p style="font-size:0.9rem;">「センサーの値（スコア）」は自分の変数を見ないので…</p>
<div class="result">結果: <span class="empty">（空っぽ）</span></div>
</div>
<div class="panel after">
<h3><span class="tag new">新しい動き</span></h3>
<p style="font-size:0.9rem;">自分の変数も読めるので…</p>
<div class="result">結果: <span class="value">100</span></div>
</div>
</div>
<p>Rubyで書くと、こんなプログラムです。</p>
<div class="ruby-code"><span class="cm"># 自分のグローバル変数「スコア」を設定する</span>
<span class="var">$スコア</span> = <span class="num">100</span>
<span class="cm"># これまで: 空っぽ ("") / 新しい動き: "100"</span>
<span class="fn">puts</span>(mesh.<span class="fn">sensor_value</span>(<span class="str">"スコア"</span>))</div>
</section>
<section>
<h2><span class="num">2</span>なぜ変えたの？</h2>
<p>
「自分が送った値を、自分でも確認したい」「送ったデータを画面に表示したい」という使い方が、
これまではできませんでした。自分の変数も読めるようにすることで、
メッシュのプログラムがもっとわかりやすく、作りやすくなります。
</p>
<p>
新しい動きでは、「自分」と「ほかの人」を特別扱いせず、同じ名前の変数の中から
<strong>いちばん新しくセットされた値</strong>が選ばれます。
自分の変数は<strong>セットした直後から</strong>「センサーの値」で読めます
（ネットワークを通って戻ってくるのを待ちません）。
</p>
</section>
<section>
<h2><span class="num">3</span>これまでのプログラムは大丈夫？</h2>
<p>
メッシュは、<strong>同じ名前のグローバル変数を複数の人で共有しない</strong>ことを前提にしています
（同じ名前を別々の人が使うと、どの値が表示されるのかわかりにくくなるためです）。
</p>
<p>この前提のもとでは、これまでのプログラムへの影響は次のとおりです。</p>
<ul style="margin:0 0 0.9rem 1.4rem;">
<li><strong>ほかの人の変数を読む</strong>（本来の使い方）→ これまでどおり、変わりません。</li>
<li><strong>自分の変数を読む</strong> → これまでは空っぽでしたが、新しい動きでは自分の値が読めます。</li>
</ul>
<div class="callout">
<p style="margin:0;">
⚠️ ひとつだけ注意があります。<strong>同じ名前のグローバル変数を、自分とほかの人の両方が使っていた</strong>
場合だけ、表示される値が変わることがあります（いちばん新しく更新した人の値になります）。
この前提のもとでは、ほかの人の変数を読む本来の使い方は変わりません。
</p>
<p style="margin:0.6rem 0 0;">
このとき、変数に<strong>前と同じ値をセットしたときでも</strong>「いちばん新しい値」として扱われ、
仲間にも送り直されます。たとえば、おたがいに <code>送信者</code> という変数へ自分の名前をセットしてから
メッセージを送り合うプログラムでは、いつも最後にセットした人の名前が読めます。
ただし、<strong>ほぼ同時（1〜2秒以内）</strong>に同じ名前の変数をセットしたときは、
順番が前後することがあります。
</p>
</div>
</section>
<section>
<h2><span class="num">4</span>「お知らせ」が出たときは？</h2>
<p>
グローバル変数の名前と「センサーの値」で読む名前が同じになっていると、動きが変わったことを伝える
<strong>お知らせ（バナー）</strong>が、画面の上に<strong>最初の一回だけ</strong>表示されます。
読んだら「✕」で閉じてください。次からは表示されません。
</p>
<div class="modal-mock" style="max-width:520px;">
<div class="body" style="display:flex; align-items:center; gap:10px;">
<span style="font-size:18px;">🌐</span>
<p style="flex:1; color:var(--text);">メッシュの「センサーの値」は、同じ名前のグローバル変数があると、自分の値も読むようになりました。</p>
<span style="color:#1a73e8; text-decoration:underline; white-space:nowrap;">くわしくはこちら</span>
<span style="color:var(--text-light);">✕</span>
</div>
</div>
<p>
動きの切り替えはありません。新しい動きは<strong>つねに有効</strong>で、お知らせはその変更に気づいてもらうための
ものです。「くわしくはこちら」を押すと、このページが開きます。
</p>
</section>
<section>
<h2><span class="num">5</span>メッセージ（ブロードキャスト）は？</h2>
<p>
今回の変更は<strong>「センサーの値」（グローバル変数）だけ</strong>です。
メッセージ（ブロードキャスト）は、これまでどおり<strong>自分が送ったメッセージは自分には届きません</strong>。
変数とメッセージで動きが違う点に注意してください。
</p>
</section>
<div class="home">
<button type="button" onclick="window.close()">閉じる</button>
</div>
</main>
<footer>
<p>NPO法人Rubyプログラミング少年団</p>
<p style="margin-top:0.4rem;opacity:0.6;">© 2026 Smalruby Project.</p>
</footer>
</body>
</html>