forked from shoes/shoes-deprecated
/
manual-ja.txt
2829 lines (1804 loc) · 150 KB
/
manual-ja.txt
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
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
= Hello! =
Shoesは軽量なグラフィックツールキットです。これは単純で分かりやすいです。Shoesは簡単になるように生まれました。本当に、これは全くの初心者のために作られました。本当に簡単です。
このたった一行の取るに足りないShoesのプログラムを見てください:
{{{
#!ruby
Shoes.app { button("Click me!") { alert("Good job.") } }
}}}
ShoesプログラムはRubyと呼ばれる言語で書かれています。ShoesがこのRubyコードの単純な行を渡されたとき、"Click me!"と中に書かれたボタンを持ったウィンドウを表示します。このボタンをクリックすると、メッセージがポップアップします。
Linuxでは、このように見えるでしょう: !{:margin_left => 100}man-shot1.png!
多くのShoesのアプリケーションがグラフィカルなゲームやアートのプログラムである一方、テキストを配置したり編集したりすることも簡単にできます。 !{:margin_left => 40}shoes-manual-apps.gif!
そして、理想的には、Shoesプログラムは世の中のいくつかの有名なプラットフォームで実行できるでしょう。マイクロソフトWindows、アップルのMac OS X、Linuxや多くの他のプラットフォームで。
^そして、Shoesのビルトインマニュアルへようこそ。このマニュアルはShoesのプログラムそのものです。^
== Introducing Shoes ==
OS XやWindowsではShoesはどのように見えるでしょうか?見栄えはいいですか?全体的に見苦しくて不格好ですか?みんなすぐに身悶えしたに違いないです!それは何をしようとしても、とても質が落ちたものに違いありません。
それでは、Shoesのインストールや実行について入る前に、何ができるのかの参考に、ちょっといくつかのスクリーンショットを確認します。
==== Mac OS X ====
ShoesはアップルのMac OS X Leopardで、同様にTigerでも動作します。ShoesはPowerPCマシンの同様にサポートしますが、そのプラットフォームではビデオ機能はサポートされません。 !man-look-tiger.png!
これはTigerで実行している`simple-sphere.rb`サンプルです。アプリケーションは通常のOS Xウィンドウの枠の中で実行されていることに注意して下さい。
この球の全体は不鮮明な楕円形と影によって描かれています。Shoesでは、生き生きとした形状を描くことや、それらの形状に効果を適用することができます。
==== Windows ====
Shoesはすべてのバージョンの'''Microsoft Windows XP'''、 '''Windows Vista'''、 '''Windows 7'''で実行でき、他にも'''Windows 2000'''で互換性があります。 !man-look-vista.png!
上記はWindows Vistaで`simple-clock.rb`サンプルが動作している図です。この例でも時計を作るために楕円と線が描かれており、これは一秒に何回かそれ自信が再描画するのので生き生きと描かれます。
アプリケーション上部のテキストが、現在の時刻を表示していることに注意してください。Shoesは、いくつかの色、太字、斜字、下線、そしてファイルからフォントをロードして語句を配置する機能を持っています。
==== Linux ====
これは'''Ubuntu Linux'''上で`simple-downloader.rb`サンプルが動作しているスクリーンショットです。!man-look-ubuntu.png!
ボタンとプログレスバーに注意してください。これらの種類のコントロールはOS XとWindowsとは異なるように見えます。しかし、テキストとリンクは同じように見えるでしょう。
形状、テキスト、画像や動画はすべてのプラットフォームで同じように見えます。しかしながら、ネイティブコントロール(エディットラインやエディットボックスのような)はウィンドウテーマの見た目に一致します。Shoesはネイティブコントロールを、見た目は変化しますが、指定した大きさの範囲内で維持しようとします。
== Installing Shoes ==
はい、ではShoesのインストールを行います。あなたは次のような疑問を持っているでしょう:Rubyのインストールは必要ですか?なにも解凍しなくてもいいですか?どんなコマンドをタイプする必要がありますか?
いや。Rubyを必要としません。WinZipを必要としません。なにもタイプしなくていいです。
Shoesを開始するには、多くのシステムではShoesのアイコンをクリックしてインストーラを実行するだけです。Shoesはすべてを組み込みで備えています。もっとも、まさしくそれに関して明確になるように、私たちはすべてのステップについて話をします。
==== Step 1: Shoesのインストール ====
[[http://shoesrb.com/ the site of Shoes]]へアクセスしてShoesのインストーラをダウンロードします。通常はホームページの上部の角にあるインストーラのひとつを手に入れます。 !man-builds.png!
ここにインストーラの実行方法があります:
* '''Mac OS X'''では、'''.dmg'''で終わっているファイルを手に入れます。このファイルをダブルクリックすると、'''Shoes'''アイコンと'''Applications'''フォルダと共にウィンドウが表示されます。矢印に従って'''Applications'''フォルダにShoesアイコンをドラッグします。 !man-intro-dmg.png!
* '''Windows'''では、'''.exe'''ファイルをダウンロードします。このファイルをダブルクリックして次の指示に従ってください。!man-intro-exe.png!
* '''Linux'''では、自分でShoesをコンパイルする必要があります。詳細は[[https://github.com/shoes/shoes/wiki/Building-Shoes-on-Linux こちら]]を参照して下さい。ゆくゆくはパッケージを用意したいと思っています!
==== Step 2: 新しいテキストファイルの作成 ====
Shoesプログラムは'''.rb'''の拡張子で終わる、ただの単純なテキストファイルです。
空のテキストファイルを作成するいくつかの方法は:
* '''Mac OS X'''では'''Applications'''フォルダに移動して'''TextEdit'''アプリケーションをダブルクリックします。空のエディタウィンドウが表示されます。そして'''Format'''メニューから'''Make Plain Text'''オプションを選択します。はい、準備ができました。!man-editor-osx.png!
* '''Windows'''では、スタートメニューへ行きます。'''All Programs'''、'''Accessories'''そして'''Notepad'''を選択します。. !man-editor-notepad.png!
* '''Linux'''では、多くのディストリビューションが'''gedit'''を備えています。それを実行してください。または、もしあなたのディストリビューションがKDEを基にしているのであれば'''kate'''を実行してください。
そして、空のウィンドウに次のようにタイプしてください:
{{{
Shoes.app do
background "#DFA"
para "Welcome to Shoes"
end
}}}
`welcome.rb`としてデスクトップに保存してください。
==== Step 3: それを実行してください!Shoesへ行こう! ====
プログラムを実行するためには:
* '''Mac OS X'''では、'''Applications'''へ再度行きます。今度は、そのフォルダの'''Shoes'''アイコンをダブルクリックします。そのドックの中に赤い靴のアイコンが現れます。'welcome.rb'をデスクトップから、そのドックアイコンへドラッグしてください。
* '''Windows'''では、スタートメニューへから'''All Programs'''、'''Shoes'''そして'''Shoes'''へ行きます。ファイルの選択ボックスが表示されます。デスクトップに目を通して'welcome.rb'を選択します。'''OK'''をクリックしたら、後は自分でやってください。!man-run-xp.png! !man-run-vista.png!
* '''Linux'''では、ほとんど一回の手続きでだけでShoesを実行します。あなたはファイル選択ボックスを見るはずです。デスクトップに目を通して、`welcome.rb`を選択して'''OK'''を押してください。
まだ大したものではないですが、確かにそれはプログラムです!少なくとも、そのコツが分かったでしょう!
==== Shoesで何を作りますか? ====
さて、ウィンドウアプリケーションを作成することができます。しかし、Shoesはウェブから影響を受けているので、アプリケーションは多くのウィジェットよりも、画像を使ったりテキストを配置する傾向があります。例えば、Shoesはタブコントロールやツールバーを備えていません。Shoesは''軽量な''ツールきっとだと言うことを覚えていますか?
それでもShoesはボタンやエディットボックスのようなウィジェットを少しだけ持っています。そして、多くの(タブコントロールまたはツールバーのような)不足している要素は、画像でシミュレーションすることができます。
ShoesはCairoと呼ばれるとてもよくできた描画エンジンによって一部書かれており、それは形状や色彩を描くのに利用されています。このように、Shoesは、生き生きとしたグラフィックを描画するためにとてもいい言語である、NodeBoxとProcessingから影響を受けています。
== The Rules of Shoes ==
Shoesがどのように動作するのか推測するのはやめましょう。トリッキーな動作で悩むと思います。私はShoesの中心的な規則を要約しまいた。これらは、それにすべての働きをさせるためには知らなくてはならないものです。
これらはShoesの至る所に目にする一般的な規則です。Shoesは単純さと明解さという全体的な理念を持っていますが、いくつか勉強したり覚えたりする必要のあるポイントがあります。
==== Shoesのトリッキーなブロック ====
はい、これは極めて重要です。Shoesはブロックによってトリックをします。このトリックはすべてのものを読みやすくします。しかし、これは深い階層でブロックを利用することを難しくもします。
'''普通のRubyブロックを試しましょう:'''
{{{
ary = ['potion', 'swords', 'shields']
ary.each do |item|
puts item
end
}}}
Shoesでは、これらの種類のブロックは同じ働きをします。この上記のブロックは配列をループして各オブジェクトを`item`変数に格納します。この`item`変数はブロックが終わると消滅(スコープから出る)します。
考え方を守っているもう一つのことは、普通のRubyブロックの内部と`self`を同じままにしています。`each`の前に呼ばれるどんな`self`でも、それは`each`ブロック内部と同じです。
'''これらはどちらも大部分のShoesのブロックで正しいです。'''
{{{
Shoes.app do
stack do
para "First"
para "Second"
para "Third"
end
end
}}}
ここでは二つのブロックがあります。一つ目は`Shoes.app`によるものです。この`app`ブロックは`self`を変更します。
もう一方のブロックは`stack`ブロックです。このブロックはselfを変更しません。
'''どんな理由があって`app`ブロックはselfを変更するのでしょうか?''' 最後の例を徹底的に詳しく説明することから始めましょう。
{{{
Shoes.app do
self.stack do
self.para "First"
self.para "Second"
self.para "Third"
end
end
}}}
上記の例におけるすべての`self`はアプリケーションオブジェクトです。Shoesは`app`ブロック内部でselfを変更するために、Rubyの`instance_eval`を利用します。そして、そのメソッドは`stack`を呼び出して`para`をアプリケーションへ送ります。
'''これはShoesアプリケーション全体でインスタンス変数が利用できる理由でもあります:'''
{{{
Shoes.app do
@s = stack do
@p1 = para "First"
@p2 = para "Second"
@p3 = para "Third"
end
end
}}}
これらのインスタンス変数は、すべてアプリケーションオブジェクト内部で終了します。
'''新しいウィンドウを作成するときはいつでも、`self`も変更されます。'''そして、Shoes.appに加えて、これは[[Element.window]]と[[Element.dialog]]メソッドを意味します。
{{{
Shoes.app :title => "MAIN" do
para self
button "Spawn" do
window :title => "CHILD" do
para self
end
end
end
}}}
==== ブロックリダイレクション ====
もっとも、`stack`ブロックは別の話です。これは`self`を変えませんし、基本的に標準のブロックです。
'''しかしトリックがあります:'''`stack`を配置してブロックを与えたとき、アプリケーションオブジェクトはstackをメモリへ配置します。ブロックが終了するときstackは立ち去ります。そのため、アプリケーションのトップスロットから新しいstackまで、ブロック内部のすべての描画は'''リダイレクト'''されます。
そのため、まず、たとえ彼らが確かにアプリケーションオブジェクトへ渡したとしても、それらの3つの`para`は`stack`上に描画されます。
{{{
Shoes.app do
stack do
para "First"
para "Second"
para "Third"
end
end
}}}
少しトリッキーですよね?これについて知っていても噛みつかれるかもしれません。
それがあなたをつかまえる一つの方法は、`app`ブロック外のプログラム内のどこか他で、stackを編集しようとすることです。
例えばstackオブジェクトを使いまわすとしましょう。そして、そのオブジェクトを編集するクラスを持ちます。
{{{
class Messenger
def initialize(stack)
@stack = stack
end
def add(msg)
@stack.append do
para msg
end
end
end
}}}
アプリケーションが始まるときに、stackオブジェクトをMessengerクラスへ渡すと仮定します。そして、後で、メッセージが来るとき、`add`メソッドはそのstackにパラグラフを追加するのに用いられます。正しく動作するでしょうか?
いや、それは動作しません。`para`メソッドが見つかりません。すでにアプリケーションオブジェクトはまわりにありません。そして、それは`para`メソッドによるものです。
幸いにも、それぞれのShoesオブジェクトはアプリケーションオブジェクトを再び開かせる`app`メソッドを持っているため、さらなる編集ができます。
{{{
class Messenger
def initialize(stack)
@stack = stack
end
def add(msg)
@stack.app do
@stack.append do
para msg
end
end
end
end
}}}
ご想像のとおり、その`app`オブジェクトは`self`をアプリケーションオブジェクトに変更します。
ルールは次のようになります:
1. '''"app"という名前か新しいウィンドウを作成するメソッドはアプリケーションオブジェクトの`self`を変更します。'''[[BR]](これは、[[Element.window]] と[[Element.dialog]]同様に、Shoes.appとSlot.appの両方にとって正しいです。)[[BR]]2. '''stackへ加えられるブロックは、フローや(追加などの)どんな操作メソッドでもselfを変更しません。その代わりに、彼らはスロットをアプリケーションの編集stackにポップします。'''
==== 固定された高さに注意 ====
列でウィンドウを区切るように、スロットの固定された幅は重要です。
{{{
Shoes.app do
flow do
stack :width => 200 do
caption "Column one"
para "is 200 pixels wide"
end
stack :width => -200 do
caption "Column two"
para "is 100% minus 200 pixels wide"
end
end
end
}}}
スロットの固定された高さは、より一般的ではありません。通常は、テキストや画像がウィンドウの下へできるだけ流れることを望みます。高さは通常は自然に決定します。
ここで重要なことは、固定された高さが実際はスロットに違うように振る舞わせることです。確かに最後にはスロットは完全に切り離なされて、'''入れ子のウィンドウ'''になります。新しいレイヤーはオペレーティングシステムによってスロットを一定の正方形に保つために作成されます。
通常のスロットと入れ子ウィンドウのスロットとの違いは、後者はスクロールバーを持てることです。
{{{
Shoes.app do
stack :width => 200, :height => 200, :scroll => true do
background "#DFA"
100.times do |i|
para "Paragraph No. #{i}"
end
end
end
}}}
これらの入れ子ウィンドウはより多くのメモリを必要とします。彼らはアプリケーションにもう少し負担をかけます。もしあなたが、固定された高さのたくさんのスロットで遅さを経験しているなら、違うアプローチを試してください。
==== 画像と形状のブロック ====
多くの初心者が形状でウィンドウを散らかし始めます。すべての長方形や楕円形をスロットへ投げ入れるのは確かに簡単です。
'''しかしながら、Shoesはそれらすべての形状のためにオブジェクトを生成することを覚えておいて下さい!。'''
{{{
Shoes.app do
fill black(0.1)
100.times do |i|
oval i, i, i * 2
end
end
}}}
この例では、100個の楕円形オブジェクトが生成されます。これは悪すぎるわけではありません。しかし、一つの形状の中にこれらを作成するのなら、これはより軽量になるでしょう。
{{{
Shoes.app do
fill black(0.1)
shape do
100.times do |i|
oval i, i, i * 2
end
end
end
}}}
ああ、待ってください。この楕円形は今回は満たされません。なぜなら、この形状たちは一つの大きな形状に結合されたからです。そして、このケースではShoesはどこを満たすべきか、分かりません。
そして、アウトラインを厳密に扱うとき、通常は一つの形状に結合することを望みます。
別のオプションでは、これらすべての楕円形を一つの画像に結合します。
{{{
Shoes.app do
fill black(0.1)
image 300, 300 do
100.times do |i|
oval i, i, i * 2
end
end
end
}}}
そうしよう!その楕円形はすべて一つの300 x 300の画像に結合されます。この場合では、その画像をメモリに保管するのは、おそらく100個の楕円形を持つよりはるかに大きくなるかもしれません。しかし、何千もの形状を扱う場合には、イメージブロックはより安っぽくなる可能性があります。
ポイントは以下の通りです:画像やブロックへ形状をグループ化することは簡単ですので、もし速度を得ようとするのなら、それを試してください。形状ブロックは特にメモリと速度を節約させるでしょう。
==== どこでもUTF-8 ====
Ruby自体はUnicodeを意識しません。そして、UTF-8は一種のUnicodeです。(UTF-8の完全な説明は[[http://en.wikipedia.org/wiki/UTF-8 Wikipedia]]を見てください。)
しかしながら、UTF-8はWEBで一般的です。そして、多くの異なったプラットホームがそれをサポートします。そこで、Shoesがしなくてはならない変換の量を減らすために、Shoesはすべての文字列がUTF-8フォーマットであることを期待します。
すばらしいことに、ShoesでUTF-8を使えば無数の言語(ロシア語、日本語、スペイン語、英語)を表示ことができます。テキストエディタでUTF-8を使用することだけを確認してください!
実例を示します:
{{{
Shoes.app do
stack :margin => 10 do
@edit = edit_box :width => 1.0 do
@para.text = @edit.text
end
@para = para ""
end
end
}}}
このアプリケーションは何でもコピーして編集ボックスに貼り付けて、Shoesパラグラフで表示することができます。外国語(ギリシャ語か日本語のような)のテキストをこのボックスにコピーして、どのように表示されるかを見ることができます。
これは、その編集ボックスがUTF-8の文字を返すことを確かめるのにいいテストです。そして、そのパラグラフはどんなUTF-8の文字でも設定することができます。
'''重要事項:'''もしいくつかのUTF-8の文字が表示されないなら、パラグラフのフォントを変更する必要があります。これは特にOS Xで一般的です。
そして、OS Xでのおすすめの日本語フォントは'''AppleGothic'''です。Windowsでは'''MS UI Gothic'''です。
{{{
Shoes.app do
para "てすと (te-su-to)", :font => case RUBY_PLATFORM
when /mingw/; "MS UI Gothic"
when /darwin/; "AppleGothic, Arial"
else "Arial"
end
end
}}}
さらに、Shoesで文字列を扱う場合もUTF-8の文字列を必要とします。編集ボックス、編集ライン、リストボックス、ウィンドウタイトルやテキストブロックはすべてUTF-8をとります。間違った文字の入った文字列をあたえた場合は、コンソールにエラーが表示されます。
==== メインアプリケーションとRequire ====
'''注意:''' このルールはRaisinsのためのものです。PolicemanではTOPLEVEL_BINDINGを使っているので、最初の例では `main` (Rubyトップレベルオブジェクト)が表示されます。`Shoes.app`ブロックの外側では、`Para`ではなく`Shoes::Para`と記述する必要がありますが。
それぞれのShoesアプリケーションは、それ自体を作ることができる小さな部屋を与えられます。クラスを作成したり変数を設定できますが、それらは他のShoesプログラムから見ることはできません。それぞれのプログラムはそれ自身の匿名クラス内で実行されます。
{{{
main = self
Shoes.app do
para main.to_s
end
}}}
この匿名クラスは`(shoes)`と呼ばれ、それは空の無名クラスです。`Shoes`モジュールは(`include Shoes`を利用して)このクラスにミックスインされているため、パラグラフクラスを参照しているときに`Para`や`Shoes::Para`を利用することができます。
このアプローチの長所は:
* Shoesアプリケーションはローカル変数を共有できません。
* メインアプリケーションコードに作成されるクラスは一時的です。
* Shoesモジュールは、Ruby自身のトップレベル環境ではなく、匿名クラスにミックスインされることができます、
* ガベージコレクションが一度完了すれば、アプリケーションを完全にきれいにできます。
二つ目の部分は特に重要なので忘れないこと。
{{{
class Storage; end
Shoes.app do
para Storage.new
end
}}}
アプリケーションが完了すれば`Storage`クラスは消えます。ほかのアプリケーションはStorageクラスを利用できません。そして、それは`require`を利用してロードされるファイルから手に入れることはできません。
もっとも、`require`するときそのコードは近くにいます。それはRubyのトップレベル環境に保持されます。
そして、この規則は:'''アプリケーションのコードに一時的なクラスを保持し、requireに永続的なクラスを保持しなさい'''です。
= Shoes =
Shoesはウィンドウや、それらウィンドウ内部の要素を描くことがすべてです。今はウィンドウ自体に焦点を当てましょう。他のセクションの[[Slots]]や[[Elements]]がウィンドウ内部に関してのすべてを対象としています。
ここでは、このマニュアルはより辞書のように読んでください。それぞれのページのほとんどは、利用可能なメソッドの一覧であり、各トピックを対象としています。この考えは、すべてに関してとても詳細かつ明確であることです。
そして、このマニュアルの難しさにぶつかって、始めることについてまだ分からないなら、おそらくこのマニュアルの[[Hello! beginning]]に戻るべきです。
または、ウェブ上の初心者のリーフレットである[[https://github.com/downloads/shoes/shoes/nks.pdf Nobody Knows Shoes]]を試してください。
==== 方法の見つけ方 ====
このセクションは以下を対象とします:
* [[Built-in Built-in methods]] - Shoesプログラムのどこでも利用できる一般的なメソッド。
* [[App The App window]] - Shoesのすべてのメインウィンドウに添付されたメソッド。
* [[Styles The Styles Master List]] - Shoesのすべてのスタイルの完全な一覧。
* [[Classes The Classes list]] - Shoesのクラスやサブクラスについて表示している表。
* [[Colors The Colors list]] - すべてのビルトインカラーと[[Built-in.rgb]]におけるそれぞれの数の表。
ページをよく見ても見つからないものがあれば、[[Search]]ページを試してください。それは問題をさける手っ取り早い方法です。
この一般的なリファレンスのあとに、他の2つの特別なセクションがあります:
* [[Slots]] - [[Element.stack]]と[[Element.flow]]を対象とする、2つの種類のスロット。
* [[Elements]] - すべてのボタン、形状、画像などのためのドキュメント。
ここに[[Element Element Creation]]ページ(追加できるすべてのエレメントの一覧)と[[Common Common Methods]] ページ(すべてのスロットやエレメントにあるメソッドの一覧)の2つのとても大切なページがあります。
== Built-in Methods ==
これらのメソッドはShoesのプログラムを通してどこでも利用できます。
これらすべてのコマンドは、あなたがドットを彼らに付与しない点が珍しいです。
'''このマニュアルのほかのすべてのメソッドはオブジェクトにドットを付与すべきです。'''
しかし、これらのビルトインメソッド(カーネルメソッドとも呼ばれている)はドットがないことを意味します。
一般的なものとして`alert`があります:
{{{
#!ruby
alert "No dots in sight"
}}}
これと、カーネルメソッドはなくArrayとStringに対してだけ利用可能な`reverse`メソッドを比較してください:
{{{
#!ruby
"Plaster of Paris".reverse
#=> "siraP fo retsalP"
[:dogs, :cows, :snakes].reverse
#=> [:snakes, :cows, :dogs]
}}}
描画やボタンを作成したりするための多くのShoesメソッドはスロットへ付与されます。より詳しい情報については[[Slots]]のセクションを見てください。
==== ビルトイン定数 ====
Shoesにはいくつかのビルトイン定数があり、それはどんなバージョンのShoesが実行されているかを判別することを証明するのに利用できるかもしれません
'''Shoes::RELEASE_NAME''' Shoesリリース名の文字列定数です。Curiousから始まって、すべてのShoesリリースは名付けられます。
'''Shoes::RELEASE_ID''' Shoesリリース表す数字を含みます。そして、例えばCuriousはナンバー1であり、それは初めての公式リリースです。
'''Shoes::REVISION''' は、そのビルドのSubversionのリビジョン番号です。
'''Shoes::FONTS''' は、アプリケーションで利用できるフォントの完全な一覧です。この一覧は[[Built-in.font]]メソッドによってロードされたすべてのフォントを含みます。
=== alert(message: a string) » nil ===
短いメッセージを含むウィンドウをポップアップします。
{{{
#!ruby
alert("I'm afraid I must interject!")
}}}
alertは信じられないほど煩わしいので控えめに利用してください!プログラムをデバッグする手助けのメッセージを表示するためにalertを利用するなら、[[Built-in.debug]]または[[Built-in.info]]メソッドを調べてみてください。
=== ask(message: a string) » a string ===
ウィンドウをポップアップして質問をします。例えば、あなたは誰かに名前を尋ねたいかもしれません。
{{{
#!ruby
name = ask("Please, enter your name:")
}}}
上記のスクリプトを実行するとき、コンピュータを利用している人は、名前を入力するための空のボックスを持つウィンドウを見るでしょう。そして、その名前は`name`変数に保存されます。
=== ask_color(title: a string) » Shoes::Color ===
カラーピッカーウィンドウをポップアップします。このプログラムは色が選ばれるのを待ち、そしてあなたに色オブジェクトを与えます。いくつかの方法でこの色を利用するために`Color`ヘルプを見てください。
{{{
#!ruby
backcolor = ask_color("Pick a background")
Shoes.app do
background backcolor
end
}}}
=== ask_open_file() » a string ===
"ファイルを開く。。。"ウィンドウをポップアップします。これは標準のウィンドウであり、すべてのフォルダを表示して開くファイルを選択させます。そしてファイルの名前を返します。
{{{
#!ruby
filename = ask_open_file
Shoes.app do
para File.read(filename)
end
}}}
=== ask_save_file() » a string ===
これは先ほど述べた`ask_open_file`と似ており、"ファイルを保存する。。。"ウィンドウをポップアップします。
{{{
#!ruby
save_as = ask_save_file
}}}
=== ask_open_folder() » a string ===
"フォルダを開く。。。"ウィンドウをポップアップします。これは、すべてのフォルダを表示し、開くフォルダを選択させる標準のウィンドウです。これはあなたにフォルダの名前を渡します。
{{{
#!ruby
folder = ask_open_folder
Shoes.app do
para Dir.entries(folder)
end
}}}
=== ask_save_folder() » a string ===
これは先ほど述べた`ask_open_folder`と似ており、"フォルダを保存する。。。"ウィンドウをポップアップします。OS X上では、現在このメソッドは`ask_open_folder`のエイリアスのようになっています。
{{{
#!ruby
save_to = ask_save_folder
}}}
=== confirm(question: a string) » true or false ===
yes-または-noの質問をポップアップします。コンピュータの前の人が'''yes'''をクリックするなら、返される`true`を受け取ります。そうでは無いなら、返される`false`を受け取ります。
{{{
#!ruby
if confirm("Draw a circle?")
Shoes.app{ oval :top => 0, :left => 0, :radius => 50 }
end
}}}
=== debug(message: a string) » nil ===
Shoesコンソールへデバッグメッセージを送ります。
どんなShoesウィンドウ上でも、`Alt-/`(または、OS X上では`⌘-/`)を押すことによって、Shoesコンソールを立ち上げることができます。
{{{
#!ruby
debug("Running Shoes on " + RUBY_PLATFORM)
}}}
[[Built-in.error]]、[[Built-in.warn]]と[[Built-in.info]]メソッドも確認してください。
=== error(message: a string) » nil ===
Shoesコンソールへエラーメッセージ送ります。このメソッドはエラーをログするためだけに利用すべきです。自分ためのメッセージをログするには[[Built-in.debug]]メソッドを試してください。
おお、そして、文字列よりも、直接このメソッドに例外を手渡すべきです。そしてそれは適切にフォーマットされるでしょう。
=== exit() ===
プログラムを止めます。突然に終了したいときはいつでも、これを呼んでください。
=== font(message: a string) » an array of font family names ===
ファイルからTrueType(または他の種類のフォント)をロードします。TrueTypeはすべてのプラットフォームでサポートされるとはいえ、あなたのプラットフォームは他の種類のフォントをサポートするかもしれません。Shoesはこの動作に、それぞれのオペレーティングシステムのビルトインフォントシステムを利用します。
ここにどのプラットフォームで何のフォントが動作するかの目安があります。
* Bitmap fonts (.bdf, .pcf, .snf) - Linux
* Font resource (.fon) - Windows
* Windows bitmap font file (.fnt) - Linux, Windows
* PostScript OpenType font (.otf) - Mac OS X, Linux, Windows
* Type1 multiple master (.mmm) - Windows
* Type1 font bits (.pfb) - Linux, Windows
* Type1 font metrics (.pfm) - Linux, Windows
* TrueType font (.ttf) - Mac OS X, Linux, Windows
* TrueType collection (.ttc) - Mac OS X, Linux, Windows
フォントが適切にロードされたなら、ファイルに見つかったフォントの名前の配列を取り戻すでしょう。そうではなく、ファイルにはフォントが見つからないなら`nil`が返されます。
また興味深いことに:`Shoes::FONTS`定数はこのプラットフォームで利用可能なフォントの完全な一覧です。`include?`を利用していくつかのフォントをチェックできます。
{{{
if Shoes::FONTS.include? "Helvetica"
alert "Helvetica is available on this system."
else
alert "You do not have the Helvetica font."
end
}}}
もしフォントを表示することに問題があるなら、それを利用する前に、アプリケーションがフォントをロードすることを確認してください。特にOS Xでは、もしフォントがロードされる前に利用されたなら、フォントキャッシュはロードされたフォントを無視する傾向があります。
=== gradient(color1, color2) » Shoes::Pattern ===
二つの色から直線勾配を作ります。それぞれの色に、色を描画するためにShoes::Colorオブジェクトか文字列を渡します。
=== gray(the numbers: darkness, alpha) » Shoes::Color ===
暗さのレベルや、任意的にはアルファレベルからグレースケールカラーを作成します。
{{{
black = gray(0.0)
white = gray(1.0)
}}}
=== info(message: a string) » nil ===
Shoesコンソールでユーザへの情報を含むメッセージを記録します。そして、そのデバッグメッセージはプログラムで何が発生したのか見つけることを助けるようにデザインされており、`info`メッセージはプログラムについてユーザに追加の情報を教えます。
{{{
#!ruby
info("You just ran the info example on Shoes #{Shoes::RELEASE_NAME}.")
}}}
例えば、Shyファイルをロードすればいつでも、ShoesはコンソールにShyの著者とバージョンの情報を含むメッセージを印字します。
=== rgb(a series of numbers: red, green, blue, alpha) » Shoes::Color ===
赤、緑、青の構成要素から色を作成します。アルファレベル(透明度を示す)は任意に加えることができます。
整数を渡すときは、0から255までの値を利用してください。
{{{
blueviolet = rgb(138, 43, 226)
darkgreen = rgb(0, 100, 0)
}}}
または、0.0から1.0までの10進数を利用してください。
{{{
blueviolet = rgb(0.54, 0.17, 0.89)
darkgreen = rgb(0, 0.4, 0)
}}}
このメソッドは`Shoes.rgb`と呼ばれるかもしれません。
=== warn(message: a string) » nil ===
ユーザのために警告を記録します。警告は壊滅的なエラー(それは[[Built-in.error]]を見てください。)ではありません。これは、プログラムが将来変化したり、プログラムの一部が信頼できなくなるなどの通知です。
警告やエラーを見るためには、`Alt-/`(OS Xの場合は`⌘-/`)によりShoesコンソールを開いてください。
== The App Object ==
アプリケーションはURLでコードを実行する一つのウィンドウです。URLを切り替えるとき、新しいアプリケーションオブジェクトが作成され、スタック、フローや他の要素で満たされます。
アプリケーションはウィンドウ自体です。それは閉じられるか、クリアされるか、新しい要素で満たされるかもしれません。!{:margin_left => 100}man-app.png!
スロット/ボックスの用語では、アプリケーション自体がフローです。詳しくは''Slots''セクションを見てください、しかし、これはどんな要素も直接フローのトップレベルに置かれることを単に意味します。
=== Shoes.app(styles) { ... } » Shoes::App ===
Shoesのアプリケーションウィンドウを開始します。これはShoesプログラムを作るための出発地点です。ブロックの内部では、ウィンドウを様々なShoesの要素(ボタン、アートワーク、その他)で満たし、そしてブロックの外では、ウィンドウがどれぐらい大きいのかを説明するために`styles`を利用します。おそらくアプリケーションの名前や、それがリサイズ可能かどうかについてもです。
{{{
#!ruby
Shoes.app(:title => "White Circle",
:width => 200, :height => 200, :resizable => false) {
background black
fill white
oval :top => 20, :left => 20, :radius => 160
}
}}}
上記のケースでは、小さなウィンドウを作成します。200×200ピクセルです。それはリサイズ不可能です。そして、そのウィンドウには黒い背景と白い輪の2つの要素があります。
いったんアプリケーションが作成されれば、それは[[App.Shoes.APPS]]の一覧に追加されます。もしあなたがより多くのウィンドウを生成したいなら、[[Element.window]]メソッドや[[Element.dialog]]メソッドを見てください。
=== Shoes.APPS() » An array of Shoes::App objects ===
現在開いているすべてのShoesアプリケーションの完全な一覧を作成します。いったんアプリケーションが閉じられると、その一覧から取り除かれます。そう、Shoesでは一度に多くの実行できます。それはとても元気付けられます。
=== clipboard() » a string ===
システムのクリップボードのすべてのテキストを含む文字列を返します。これはコンピュータ上のどのプログラムからでもカットアンドペーストできるグローバルクリップボードです。
=== clipboard = a string ===
システムクリップボードに`a string`のテキストを保存します。
=== close() ===
アプリケーションのウィンドウを閉じます。複数のウィンドウを開いていて、すべてのアプリケーションを閉じたいなら、ビルトインメソッドの`exit`を利用してください。
=== download(url: a string, styles) ===
ダウンロードのスレッド(あなたがJavaScriptに詳しいのなら、およそXMLHttpRequestのようなものです)を開始します。このメソッドは、すぐに戻り値を返してバックグラウンドでダウンロードを開始します。また、それぞれのダウンロードスレッドが`start`、`progress`や`finish`イベントを開始します。
downloadにファイルを送ることや、(`finish`イベントの中で)文字列を取り戻すことができます。
downloadにブロックを付けると、それは`finish`イベントとして呼ばれます。
download
{{{
#!ruby
Shoes.app do
stack do
title "Searching Google", :size => 16
@status = para "One moment..."
# Search Google for 'shoes' and print the HTTP headers
download "http://www.google.com/search?q=shoes" do |goog|
@status.text = "Headers: " + goog.response.headers.inspect
end
end
end
}}}
そして、ダウンロードしたデータを利用したいなら`goog.response.body`を利用することにより行います。この例は本当に`download`の最も簡単な形です:いくつかのウェブデータをメモリに取ってきて、それを一度ハンドリングしています。
`download`のもう一つのサンプルはいくつかのウェブデータを、`:save`スタイルを利用してファイルに保存します。
{{{
#!ruby
Shoes.app do
stack do
title "Downloading Google image", :size => 16
@status = para "One moment..."
download "http://www.google.com/logos/nasa50th.gif",
:save => "nasa50th.gif" do
@status.text = "Okay, is downloaded."
end
end
end
}}}
このケースでも、ダウンロードファイルのヘッダを取得することができますが、メモリにそのデータが保存されていないため`response.body`は`nil`になります。ダウンロードしたものを得るためにはそのファイルを開く必要があります。
特定のヘッダかアクションをウェブサーバへ送る必要があるのならば、HTTPリクエストをカスタマイズするために`:method`、`:headers`や`:body`スタイルを利用することができます。(そして、それら以上の変更の必要があるのなら、いつでもRubyのOpenURIクラスを破壊することができます。)
{{{
#!ruby
Shoes.app do
stack do
title "POSTing to Google", :size => 16
@status = para "One moment..."
download "http://www.stevex.net/dump.php",
:method => "POST", :body => "v=1.0&q=shoes" do |dump|
require 'hpricot'
@status.text = Hpricot(dump.response.body).inner_text
end
end
end
}}}
上記の例から、ShoesはHTMLを解析するHpricotなライブラリを含んでいることが分かります。
=== location() » a string ===
現在のアプリケーションのURLを含む文字列を取得します。
=== mouse() » an array of numbers: button, left, top ===
どちらのボタンが押されたのかと共に、マウスカーソルの位置を特定します。
{{{
#!ruby
Shoes.app do
@p = para
animate do
button, left, top = self.mouse
@p.replace "mouse: #{button}, #{left}, #{top}"
end
end
}}}
=== owner() » Shoes::App ===
このアプリケーションを開始したアプリケーションを取得します。多くの場合、これは`nil`でしょう。しかし[[Element.window]]メソッドを利用してアプリケーションが開始されたなら、その所有者は`window`と呼ばれるアプリケーションでしょう。
=== started?() » true or false ===
ウィンドウはすべて構築され、表示されましたか?これは完全に構築される前に、ウィンドウを利用しようとするスレッド化されたコードのために役に立ちます。
(また、ウィンドウが開くときに実行される`start`イベントも見てください。)
=== visit(url: a string) ===
異なるShoesのURLを見るために、ロケーションを変更します。
(http://google.comのような)絶対パスのURLは悪くないですが、ShoesはShoesアプリケーションがそのアドレスに存在することを期待するでしょう。(そのため、google.comはHTMLアプリケーションとしては動作しません。)
== The Styles Master List ==
外観を変更したいですか?Shoesにおいてはスタイルが要素の表示方法を変更するために利用されます。場合によっては、要素のすべてのクラスのスタイルでさえ設定できます。(すべての段落に特定のフォントを与えるように)
スタイルは簡単にspotできます。通常は要素が生成されるときに現れます。
{{{
Shoes.app :title => "A Styling Sample" do
para "Red with an underline", :stroke => red, :underline => "single"
end
}}}
このappには`:title`スタイルが設定されています。そしてこのappの内部の段落には、赤い`:stroke`スタイルと`:underline`スタイルが設定されます。
このスタイルのハッシュは、どんな要素やスロットも利用できる[[Common.style]]メソッドを利用して変更できます。
{{{
Shoes.app :title => "A Styling Sample" do
@text = para "Red with an underline"
@text.style(:stroke => red, :underline => "single")
end
}}}
多くのスタイルもメソッドとして呼び出すことで設定することができます。(メソッドを見つけるために手動での検索を行うでしょう。)
{{{
Shoes.app :title => "A Styling Sample" do
@text = para "Red with an underline"
@text.stroke = red
@text.underline = "single"
end
}}}
どんなスタイルでも分かるようにすべてのマニュアルを苦労して読ませるよりも、この役に立つページはShoesのあらゆるスタイルを急いで駆け抜けて、どこでスタイルが利用されるかについて示唆します。
=== :align » a string ===
''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''で利用できます。
テキストの整列です。これは次のどれかです:
* 'left': 左へテキストを整列します。
* 'center': 中央へテキストを整列します。
* 'right': 右へテキストを整列します。
=== :angle » a number ===
''background, border, gradient''で利用できます。
グラデーションに摘要する角度です。通常はグラデーションの色の効果は上から下です。`:angle`を90に設定するなら反時計回りに90度回転し、グラデーションは左から右になるでしょう。
=== :attach » a slot or element ===
''flow, stack''で利用できます。
他のスロットや要素と比較してスロットをピンで止めます。ウィンドウの左上の角からスロットを配置するために`:attach => Window`と書く人もいるかもしれません。
これについてもう少し取り上げると、`:top => 10, :left => 10, :attach => Window`のスタイルはスロットをウインドウの座標の(10, 10)に配置します。
動く要素にスロットがアタッチされた場合は、そのスロットはそれとともに動きます。アタッチメントが`nil`にリセットされるなら、通常はそのスロットはそれを取り囲む他のオブジェクトとともに流れます。
=== :autoplay » true or false ===
''video''で利用できます。
ビデオは現れた後で再生を開始すべきですか?`true`を設定すると、ビデオはユーザに尋ねること無く開始するでしょう。
=== :bottom » a number ===
''すべてのスロットと要素''で利用できます。
要素の下の端の座標にピクセルを設定します。その端はコンテナの下の端に対して配置されます。そのため、`:bottom => 0`は、スロットの下の端とその下の端が接するように要素を配置するでしょう。
=== :cap » :curve or :rect or :project ===
''arc, arrow, border, flow, image, mask, rect, star, shape, stack''で利用できます。
線の終点の形状を曲がったもの(curved)か角張ったもの(square)に設定します。追加の説明は[[Art.cap]]メソッドを見てください。
=== :center » true or false ===
''arc, image, oval, rect, shape''で利用できます。
`:top`と`:left`の座標が形状の中心を意味するかどうか示します。`true`を設定すると、[[Art.transform]]メソッドに`:center`を設定したのと似ています。
=== :change » a proc ===
''edit_box, edit_line, list_box''で利用できます。
`change`イベントハンドラはスタイルに保存されます。例として、edit_boxの[[EditBox.change]]メソッドを見てください。
=== :checked » true or false ===
''check, radio''で利用できます。
チェックボックスまたはラジオボタンがクリックされましたか?`true`が設定されるなら、そのボックスはチェックされます。[[Check.checked=]]メソッドも見てください。
=== :choose » a string ===
''list_box''で利用できます。
リスト内の現在選択されたアイテムを設定します。追加の情報は[[ListBox.choose]]にあります。
=== :click » a proc ===
''arc, arrow, banner, button, caption, check, flow, image, inscription, line, link, mask, oval, para, radio, rect, shape, stack, star, subtitle, tagline, title''で利用できます。
`click`イベントハンドラはスタイルに保存されます。解説は[[Events.click]]メソッドを見てください。
=== :curve » a number ===
''background, border, rect''で利用できます。
長方形の要素のそれぞれの曲がった角の半径です。例として、6を設定した場合、長方形の角は6ピクセルの半径のカーブを与えられます。
=== :displace_left » a number ===
''すべてのスロットと要素''で利用できます。
形状、テキストブロックまたはその他のどんな種類のオブジェクトでも左か右に置き換えます。正数は与えられた数のピクセルによって右へ置き換え、負数は左へ置き換えます。オブジェクトを置き換えることはページの実際のレイアウトに影響を与えません。この振る舞いに少し驚くかもしれないので、このスタイルを利用する前に、[[Position.displace]]のドキュメントを読むようにしてください。
=== :displace_top » a number ===
''すべてのスロットと要素''で利用できます。
形状、テキストブロックまたはその他のどんな種類のオブジェクトでも上か下に置き換えます。正数は与えられた数のピクセルによって下へ置き換え、負数は上へ置き換えます。オブジェクトを置き換えることはページの実際のレイアウトやオブジェクトの本当の座標に影響を与えません。この振る舞いに少し驚くかもしれないので、[[Position.displace]]のドキュメントを読んでください。
=== :emphasis » a string ===
''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''で利用できます。
強調によってテキストを整えます。(一般的にはイタリック体にされます。)
このスタイルは3つの設定ができます:
* "normal" - 直立のフォント。
* "oblique" - ローマン体の傾いたフォント。
* "italic" - イタリック体の傾いたフォント。
=== :family » a string ===
''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''で利用できます。
与えられたフォントファミリーでテキストを整えます。文字列はフォントファミリー名かカンマで区切られたフォントファミリーの一覧を含むべきです。
=== :fill » a hex code, a Shoes::Color or a range of either ===
''arc, arrow, background, banner, caption, code, del, em, flow, image, ins, inscription, line, link, mask, oval, para, rect, shape, span, stack, star, strong, sub, sup, subtitle, tagline, title''で利用できます。
背景のペンの色です。形状では、これは形状の内側を塗りつぶすペンキの色です。テキストなどでは、この色で背景が塗られます。(まるで蛍光ペンでマークされたように)
=== :font » a string ===
''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, subtitle, tagline, title''で利用できます。
フォントの種類でテキストを整えます。この文字列は非常に柔軟ですが、"[FAMILY-LIST] [STYLE-OPTIONS] [SIZE]"の形である必要があり、FAMILY-LISTの部分は任意にカンマで終わりカンマで区切られたフォントファミリーの一覧、STYLE_OPTIONSはvariant、weight、stretch、またはgravityなどの空白で区切られたスタイルを表現する単語の一覧、そしてSIZEは(ポイントのサイズの)10進数または絶対的なサイズのために単位修飾子"px"を任意に続けます。オプションのどれかは設定されないかもしれません。FAMILY-LISTが設定されない場合は、デフォルトフォントファミリー(Arial)が利用されます。
=== :group » a string ===
''radio''で利用できます。
どのグループにラジオボタンが所属するかを示します。この設定がない場合は、ラジオボタンは周辺のスロットのラジオボタンとグループ化されます。ラジオボタンを"グループ化"することはスクリーン上でお互いに隣接してグループ化されることを意味するのではありません。それは、一度にグループから一つだけのラジオボタンだけを選択できることを意味します。
文字列にスタイルを与えることによって、ラジオボタンは同じグループ名を持つ他のラジオボタンとグループ化されます。
=== :height » a number ===
''すべてのスロットと要素''で利用できます。
オブジェクトの高さをピクセルで設定します。数値が10進数なら、その高さは親の高さのパーセンテージになります。(0.0は0%に、1.0は100%になります。)
=== :hidden » true or false ===
''すべてのスロットと要素''で利用できます。
オブジェクトの表示または非表示です。すべてのオブジェクトにとって`:hidden => true`は画面上での非表示になります。その子供のスロットと要素でも同様です。
=== :inner » a number ===
''star''で利用できます。
内側の半径のサイズ(ピクセル)です。その内側の半径は点が別れ始める星の中に中空でない円を描きます