# -*- encoding: utf-8 -*-
= Hello! =

Shoesは軽量なグラフィックツールキットです。これは単純で分かりやすいです。
Shoesは簡単になるように生まれました。本当に、これは全くの初心者のために作られました。
本当に簡単です。
Green ShoesはカラフルなShoesの一つです。Ruby/GTK2を使ってRubyだけで書かれています。

このたった一行の取るに足りないShoesのプログラムを見てください：

{{{
 #!ruby
 Shoes.app{button("Click me!"){alert("Good job.")}}
}}}

ShoesプログラムはRubyと呼ばれる言語で書かれています。
ShoesがこのRubyコードの単純な行を渡されたとき、"Click me!"と中に書かれたボタンを持った
ウィンドウを表示します。このボタンをクリックすると、メッセージがポップアップします。

Windows 7では、このように見えるでしょう: !{margin_left: 100}man-shot1.png!

多くのShoesのアプリケーションがグラフィカルなゲームやアートのプログラムである一方、
テキストを配置したり編集したりすることも簡単にできます。 !{margin_left: 80}shoes-manual-apps.png!

そして、理想的には、Shoesプログラムは世の中のいくつかの有名なプラットフォームで実行できるでしょう。
マイクロソフトWindows、アップルのMac OS X、Linuxや多くの他のプラットフォームで。

^Green Shoesのビルトインマニュアルへようこそ。このマニュアルはGreen Shoesのプログラムそのものです。^

== Introducing Green Shoes ==

Green Shoesは、OS XやLinuxではどうですか？Windowsと同様ですか?
人々はすぐにもそのように攻め立てます！
でも大丈夫、全て試していますからね。

それでは、Green Shoesのインストールや実行について入る前に、何ができるのかの参考に、
ちょっといくつかのスクリーンショットを確認します。

==== Mac OS X ====

Green ShoesはアップルのMac OSX10.5 PPC via X11で動作します。
!{margin_left: 100}../snapshots/sample3-osx.png!

これはMac OS X上で`sample3.rb`を実行した時のスナップショットです。
全ての円がランダムに描かれています。
Green Shoesではさまざまな図形を描いたり動かしたりすることができます。

==== Windows ====

Green Shoesは'''Microsoft Windows XP'''と'''Windows 7'''で動作を確認しています。
!{margin_left: 0}../snapshots/sample33.png!

上記はWindows 7で`sample33.rb`サンプルが動作している図です。
Green Shoesは3つの拡張ライブラリを含んでいます。
chipmunk physicsとbloopsaphoneと3D texture mappingです。
最初の2つはバイナリで提供しているため、今のところWindowsでしか動作しません。

==== Linux ====

これは'''Ubuntu on VirtualBox for Windows'''上で`sample44.rb`サンプルが動作しているスクリーンショットです。
!{margin_left: 130}../snapshots/sample44-linux.png!

この例では時計を作るために線や円を描いています。
時計の針の動作は線の表示/非表示を毎秒数回切り替えることにより実現しています。

アプリケーション上部のテキストが、現在の時刻を表示していることに注意してください。
Green Shoesは、いくつかの色、太字、斜字、下線、そしてファイルからフォントをロードして語句を配置する
機能を持っています。

== Installing Green Shoes ==

はい、ではGreen Shoesのインストールを行います。あなたは次のような疑問を持っているでしょう:
Rubyのインストールは必要ですか？なにも解凍しなくてもいいですか？どんなコマンドをタイプする必要がありますか？

はい。RubyやGemをインストールする必要はあります。でも心配しないで下さい。
以下に必要なステップを全て示しますから。

==== Step 1: Green Shoesのインストール ====

まず最初にRubyをインストールします。
Windowsの場合はこのサイト[[http://rubyinstaller.org/ RubyInstaller for Windows]]
にアクセスして、最新の'''RubyInstaller 1.9.2 or 1.9.3'''をインストールして下さい。

そして、以下のコマンドを実行してください。

 * gem install green_shoes

これだけです。簡単でしょう?

'''注意:''' green_shoes gemはこのサイト[[http://rubygems.org/gems/green_shoes RubyGems.org]]
にあります。

もしriやrdocの作成でエラーが発生したら、次のオプション`--no-ri --no-rdoc`を試してみて下さい。

==== 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'''を実行してください。

そして、空のウィンドウに次のようにタイプしてください:

{{{
 require 'green_shoes'
 Shoes.app do
   para "Welcome to Shoes"
 end
}}}

`welcome.rb`としてデスクトップに保存してください。

==== Step 3: それを実行してください！Shoesへ行こう！ ====

プログラムを実行するためには、コンソールウィンドウを開いて、以下のコマンドを実行します。

 * ruby welcome.rb !man-editor-osx.png!

まだ大したものではないですが、確かにそれはプログラムです！少なくとも、そのコツが分かったでしょう！

==== Shoesで何を作りますか？ ====

さて、ウィンドウアプリケーションを作成することができます。
しかし、Shoesはウェブから影響を受けているので、アプリケーションは多くのウィジェットよりも、
画像を使ったりテキストを配置する傾向があります。例えば、Shoesはタブコントロールやツールバーを備えていません。
Shoesは''軽量な''ツールキットだと言うことを覚えていますか？

それでもShoesはボタンやエディットボックスのようなウィジェットを少しだけ持っています。
そして、多くの（タブコントロールまたはツールバーのような）不足している要素は、画像でシミュレーションすることが
できます。

ShoesはCairoと呼ばれるとてもよくできた描画エンジンによって一部書かれており、
それは形状や色彩を描くのに利用されています。このように、Shoesは、生き生きとしたグラフィックを描画するために
とてもいい言語である、NodeBoxとProcessingから影響を受けています。

== The Rules of Green Shoes ==

Green Shoesがどのように動作するのか推測するのはやめましょう。トリッキーな動作で悩むと思います。
私はShoesの中心的な規則を要約しまいた。これらは、それにすべての働きをさせるためには知らなくては
ならないものです。

これらはGreen Shoesの至る所で目にする一般的な規則です。Green Shoesは単純さと明解さという
全体的な理念を持っていますが、いくつか勉強したり覚えたりする必要のあるポイントがあります。

==== Shoesのトリッキーなブロック ====

はい、これは極めて重要です。Green Shoesはブロックによってトリックをします。
このトリックはすべてのものを読みやすくします。しかし、これは深い階層でブロックを利用することを難しくもします。

'''普通のRubyブロックを試しましょう：'''

{{{
 Shoes.app do
   ary = ['potion', 'swords', 'shields']
   ary.each do |item|
     puts item
   end
 end
}}}

Green Shoesでは、これらの種類のブロックは同じ働きをします。この上記のブロックは配列をループして
各オブジェクトを`item`変数に格納します。この`item`変数はブロックが終わると消滅（スコープから出る）します。

考え方を守っているもう一つのことは、普通のRubyブロックの内部と`self`を同じままにしています。
`each`の前に呼ばれるどんな`self`でも、それは`each`ブロック内部と同じです。

'''これらはどちらも大部分のGreen 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 title: "MAIN" do
   para self
   button "Spawn" do
     Shoes.app 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 slot
     @slot = slot
   end
   def add msg
     para msg rescue puts $!
   end
 end
 
 Shoes.app do
   slot = stack
   m = Messenger.new slot
   m.add 'hello'
 end
}}}

アプリケーションが始まるときに、stackオブジェクトをMessengerクラスへ渡すと仮定します。
そして、後で、メッセージが来るとき、`add`メソッドはそのstackにパラグラフを追加するのに用いられます。
正しく動作するでしょうか？

いや、それは動作しません。`para`メソッドが見つかりません。すでにアプリケーションオブジェクトは
まわりにありません。そして、それは`para`メソッドによるものです。

幸いにも、それぞれのShoesオブジェクトはアプリケーションオブジェクトを再び開かせる`app`メソッドを
持っているため、さらなる編集ができます。

{{{
 class Messenger
   def initialize slot
     @slot = slot
   end
   def add msg
     @slot.app do
       para msg rescue puts $!
     end
   end
 end
 
 Shoes.app do
   slot = stack
   m = Messenger.new slot
   m.add 'hello'
 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
       background lavender
       caption "Column one"
       para "is 200 pixels wide"
     end
     stack :width => -200 do
       background bisque
       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
}}}

これらの入れ子ウィンドウはより多くのメモリを必要とします。彼らはアプリケーションにもう少し負担をかけます。
もしあなたが、固定された高さのたくさんのスロットで遅さを経験しているなら、違うアプローチを試してください。

'''注意:''' 固定された高さのマジック(スロットを入れ子のウィンドウにする)は今のところGreen Shoesでは
サポートしていません。スクロールバーは自動的に現れますがメインウィンドウに対してのみです。

{{{
 Shoes.app do
   stack :width => 200 do
     background "#DFA"
     100.times do |i|
       para "Paragraph No. #{i}"
     end
   end
 end
}}}

==== 画像と形状のブロック ====

多くの初心者が形状でウィンドウを散らかし始めます。すべての長方形や楕円形をスロットへ投げ入れるのは
確かに簡単です。

'''しかしながら、Shoesはそれらすべての形状のためにオブジェクトを生成することを覚えておいて下さい！。'''

{{{
 Shoes.app do
   fill black.push(0.1)
   100.times do |i|
     oval i, i, i * 2 if i > 0
   end
 end
}}}

この例では、100個の楕円形オブジェクトが生成されます。これは悪すぎるわけではありません。
しかし、一つの形状の中にこれらを作成するのなら、これはより軽量になるでしょう。

{{{
 # Not yet available
 Shoes.app do
   fill black(0.1)
   shape do
     100.times do |i|
       oval i, i, i * 2 if i > 0
     end
   end
 end
}}}

ああ、待ってください。この楕円形は今回は満たされません。なぜなら、この形状たちは一つの大きな形状に
結合されたからです。そして、このケースではShoesはどこを満たすべきか、分かりません。

そして、アウトラインを厳密に扱うとき、通常は一つの形状に結合することを望みます。

別のオプションでは、これらすべての楕円形を一つの画像に結合します。

{{{
 # Not yet available
 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個の楕円形を持つよりはるかに大きくなるかもしれません。
しかし、何千もの形状を扱う場合には、イメージブロックはより安っぽくなる可能性があります。

ポイントは以下の通りです：画像やブロックへ形状をグループ化することは簡単ですので、もし速度を
得ようとするのなら、それを試してください。形状ブロックは特にメモリと速度を節約させるでしょう。

''注意:'' 今のところGreen Shoesではこのマジック(複数の形状をグループにして一つの画像や形状にする)
はサポートしていません。

==== どこでもUTF-8 ====

Ruby自体はUnicodeを意識しません。そして、UTF-8は一種のUnicodeです。
(UTF-8の完全な説明は[[http://en.wikipedia.org/wiki/UTF-8 Wikipedia]]を見てください。)

しかしながら、UTF-8はWEBで一般的です。そして、多くの異なったプラットホームがそれをサポートします。
そこで、Green Shoesがしなくてはならない変換の量を減らすために、Green Shoesはすべての文字列が
UTF-8フォーマットであることを期待します。

すばらしいことに、Green ShoesでUTF-8を使えば無数の言語（ロシア語、日本語、スペイン語、英語）を
表示ことができます。テキストエディタでUTF-8を使用することだけを確認してください!

実例を示します：

{{{
 Shoes.app do
   stack :margin => 10 do
     @edit = edit_box do
       @para.text = @edit.text
     end
     @para = para ""
   end
 end
}}}

このアプリケーションは何でもコピーして編集ボックスに貼り付けて、Green 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
}}}

さらに、Green Shoesで文字列を扱う場合もUTF-8の文字列を必要とします。
編集ボックス、編集ライン、リストボックス、ウィンドウタイトルやテキストブロックはすべてUTF-8をとります。
間違った文字の入った文字列をあたえた場合は、コンソールにエラーが表示されます。

==== メインアプリケーションとRequire ====

'''注意:''' このルールはRaisinsのためのものです。PolicemanとGreen Shoesでは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 =

Green Shoesはウィンドウや、それらウィンドウ内部の要素を描くことがすべてです。
今はウィンドウ自体に焦点を当てましょう。
他のセクションの[[Slots]]や[[Elements]]がウィンドウ内部に関してのすべてを対象としています。

ここでは、このマニュアルはより辞書のように読んでください。それぞれのページのほとんどは、利用可能なメソッドの
一覧であり、各トピックを対象としています。この考えは、すべてに関してとても詳細かつ明確であることです。

そして、このマニュアルの難しさにぶつかって、始めることについてまだ分からないなら、おそらくこのマニュアルの
[[Hello! beginning]]に戻るべきです。
または、ウェブ上の初心者のリーフレットである
[[https://github.com/downloads/shoes/shoes/nks.pdf Nobody Knows Shoes]]を試してください。

==== 方法の見つけ方 ====

このセクションは以下を対象とします：

 * [[Built-in Built-in methods]] - Green Shoesプログラムのどこでも利用できる一般的なメソッド。
 * [[App The App window]] - Green Shoesのすべてのメインウィンドウに添付されたメソッド。
 * [[Styles The Styles Master List]] - Green Shoesのすべてのスタイルの完全な一覧。
 * [[Classes The Classes list]] - Green Shoesのクラスやサブクラスについて表示している表。
 * [[Colors The Colors list]] - すべてのビルトインカラーと[[Built-in.rgb]]におけるそれぞれの数の表。

ページをよく見ても見つからないものがあれば、[[Search]]ページを試してください。
それは問題をさける手っ取り早い方法です。

この一般的なリファレンスのあとに、他の２つの特別なセクションがあります：

 * [[Slots]] - [[Element.stack]]と[[Element.flow]]を対象とする、２つの種類のスロット。
 * [[Elements]] - すべてのボタン、形状、画像などのためのドキュメント。

ここに[[Element Element Creation]]ページ（追加できるすべてのエレメントの一覧）と
[[Common Common Methods]] ページ（すべてのスロットやエレメントにあるメソッドの一覧）の
２つのとても大切なページがあります。

== Built-in Methods ==

これらのメソッドはGreen Shoesのプログラムを通してどこでも利用できます。

これらすべてのコマンドは、あなたがドットをそれらに付与しない点が珍しいです。
'''このマニュアルのほかのすべてのメソッドはオブジェクトにドットを付与すべきです。'''
しかし、これらのビルトインメソッド（カーネルメソッドとも呼ばれている）はドットがないことを意味します。

一般的なものとして`alert`があります：

{{{
  alert "No dots in sight"
}}}

これと、ArrayとStringに対してだけ利用可能な、カーネルメソッドではない、
`reverse`メソッドを比較してください：

{{{
 #!ruby
 Shoes.app do
   para "Plaster of Paris".reverse
   #=> "siraP fo retsalP"
   para [:dogs, :cows, :snakes].reverse
   #=> [:snakes, :cows, :dogs]
 end
}}}

描画やボタンを作成したりするための多くのGreen Shoesメソッドはスロットへ付与されます。
より詳しい情報については[[Slots]]のセクションを見てください。

==== ビルトイン定数 ====

Green Shoesにはいくつかのビルトイン定数があり、それはどんなバージョンのGreen Shoesが
実行されているかを判別することを証明するのに利用できるかもしれません

'''DIR''' は、`green_shoes/lib`のフルパスです。

'''COLORS''' は、アプリケーションで利用できる色の完全な一覧です。

'''FONTS''' は、アプリケーションで利用できるフォントの完全な一覧です。

'''VERSION''' は、Green Shoesのバージョンです。

{{{
 Shoes.app do
   para VERSION
   para fg(DIR, red)
   image File.join(DIR, '../static/gshoes-icon.png')
   para fg(FONTS.join(', '), green)
   para COLORS.map{|k, v| [k, v]}
 end
}}}

=== alert(message: a string, :block => true or false, title: a string) » nil ===

短いメッセージを含むウィンドウをポップアップします。

{{{
 #!ruby
 alert "I'm afraid I must interject!"
}}}

alertは信じられないほど煩わしいので控えめに利用してください！
プログラムをデバッグする手助けのメッセージを表示するためにalertを利用するなら、
Rubyの標準メソッド`puts`や`p`を試してみて下さい。

もしalert()メソッドをスレッドセーフにしたい場合、すなわちメインスレッドをブロックしたくない場合は、
`:block => false`オプションを使ってください。またウィンドウのタイトルを変更したい場合は、
`:title => a string`オプションを使ってください。

=== ask(message: a string) » a string ===

ウィンドウをポップアップして質問をします。例えば、あなたは誰かに名前を尋ねたいかもしれません。

{{{
 #!ruby
 if name = ask("Please, enter your name:")
   Shoes.app{para "Welcome, #{name}!"}
 end
}}}

上記のスクリプトを実行するとき、コンピュータを利用している人は、名前を入力するための空のボックスを
持つウィンドウを見るでしょう。そして、その名前は`name`変数に保存されます。

=== ask_color(title: a string) » RGB array ===

カラーピッカーウィンドウをポップアップします。このプログラムは色が選ばれるのを待ち、そしてあなたに
色オブジェクトを与えます。いくつかの方法でこの色を利用するために`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
 Shoes.app do
   para save_as
 end
}}}

=== 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`と似ており、"フォルダを保存する。。。"ウィンドウをポップアップします。

{{{
 #!ruby
 save_to = ask_save_folder
 Shoes.app do
   para save_to
 end
}}}

=== 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
}}}

=== exit() ===

プログラムを止めます。突然に終了したいときはいつでも、これを呼んでください。

'''注意:''' Ruby自身の標準`exit`メソッドを使う必要がある場合は (フォークされたRubyプロセス内で等)
`Kernel.exit`を呼び出して下さい。

=== font(message: a string) » an array of font family names ===

ファイルからTrueType（または他の種類のフォント）をロードします。TrueTypeはすべてのプラットフォームで
サポートされるとはいえ、あなたのプラットフォームは他の種類のフォントをサポートするかもしれません。
Shoesはこの動作に、それぞれのオペレーティングシステムのビルトインフォントシステムを利用します。

'''注意:''' 今のところGreen Shoesでは、fontメソッドをサポートしていません。

ここにどのプラットフォームで何のフォントが動作するかの目安があります。

 * 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? "Coolvetica"
    alert "Coolvetica is available on this system."
  else
    alert "You do not have the Coolvetica font."
  end
}}}

もしフォントを表示することに問題があるなら、それを利用する前に、アプリケーションがフォントを
ロードすることを確認してください。特にOS Xでは、もしフォントがロードされる前に利用されたなら、
フォントキャッシュはロードされたフォントを無視する傾向があります。

=== gradient(color1, color2) » a range of RGB array ===

二つの色から直線勾配を作ります。それぞれの色に、色を描画するためにRGB arrayか文字列を渡します。
例えば、`gradient(green, red)`は、`green..red`と同じです。
また`gradient(green, '#FA3')`のように記述することもできます。

{{{
 Shoes.app do
   oval 100, 100, 100,
     fill: gradient(green, '#FA3'), angle: 45
 end
}}}

=== gray(the numbers: darkness, alpha) » RGB array ===

暗さのレベルや、任意的にはアルファレベルからグレースケールカラーを作成します。

{{{
 Shoes.app do
  nostroke
  11.times do |i|
    y = x = 50 + 10 * i
    r = 200 - 10 * i
    oval x, y, r, fill: gray(1-i*0.1)
  end
 end
}}}

=== rgb(red, green, blue, alpha) » an array of decimal numbers ===

赤、緑、青の構成要素から色を作成します。アルファレベル（透明度を示す）は任意に加えることができます。

整数を渡すときは、0から255までの値を利用してください。

{{{
 Shoes.app do
   blueviolet = rgb(138, 43, 226, 0.5)
   darkgreen = rgb(0, 100, 0, 0.5)
   oval 100, 100, 100,
     fill: [blueviolet, darkgreen].sample(1)
 end
}}}

または、0.0から1.0までの10進数を利用してください。

{{{
 Shoes.app do
   blueviolet = rgb(0.54, 0.17, 0.89)
   darkgreen = rgb(0, 0.4, 0)
   oval 100, 100, 100,
     fill: [blueviolet, darkgreen].sample(1)
 end
}}}

== The App Object ==

アプリケーションはURLでコードを実行する一つのウィンドウです。URLを切り替えるとき、新しい
アプリケーションオブジェクトが作成され、スタック、フローや他の要素で満たされます。

アプリケーションはウィンドウ自体です。それは閉じられるか、クリアされるか、新しい要素で満たされる
かもしれません。!{:margin_left => 100}../snapshots/sample46.png!

スロット／ボックスの用語では、アプリケーション自体がフローです。詳しくは''Slots''セクションを
見てください、しかし、これはどんな要素も直接フローのトップレベルに置かれることを単に意味します。

=== Shoes.app(styles) { ... } » Shoes::App ===

Green Shoesのアプリケーションウィンドウを開始します。これはGreen Shoesプログラムを作るための
出発地点です。ブロックの内部では、ウィンドウを様々なGreen Shoesの要素（ボタン、アートワーク、
その他）で満たし、そしてブロックの外では、ウィンドウがどれぐらい大きいのかを説明するために
`styles`を利用します。おそらくアプリケーションの名前についてもです。

{{{
 #!ruby
 Shoes.app title: "White Circle",
   width: 200, height: 200 do
   background black
   fill white
   oval top: 20, left: 20, radius: 160
 end
}}}

上記のケースでは、小さなウィンドウを作成します。200×200ピクセルです。
そして、そのウィンドウには黒い背景と白い輪の2つの要素があります。

いったんアプリケーションが作成されれば、それは[[App.Shoes.APPS]]の一覧に追加されます。
もしあなたがより多くのウィンドウを生成したいなら、[[Element.window]]メソッドや
[[Element.dialog]]メソッドを見てください。

=== Shoes.APPS() » An array of Shoes::App objects ===

現在開いているすべてのGreen Shoesアプリケーションの完全な一覧を作成します。
いったんアプリケーションが閉じられると、その一覧から取り除かれます。
そう、Green Shoesでは一度に多くの実行できます。それはとても元気付けられます。

=== clipboard() » a string ===

システムのクリップボードのすべてのテキストを含む文字列を返します。
これはコンピュータ上のどのプログラムからでもカットアンドペーストできるグローバルクリップボードです。

=== clipboard = a string ===

システムクリップボードに`a string`のテキストを保存します。

=== close() ===

アプリケーションのウィンドウを閉じます。
複数のウィンドウを開いていて、すべてのアプリケーションを閉じたいなら、ビルトインメソッドの
`exit`を利用してください。

{{{
 Shoes.app do
  para 'hello'
  button 'spawn' do
   Shoes.app do
    para 'hello'
    button('close: close this window only'){close}
    button('exit: quit Green Shoes'){exit}
   end
  end
  button('close: close this window only'){close}
  button('exit: quit Green Shoes'){exit}
 end
}}}

=== download(url: a string, styles) ===

ダウンロードのスレッド（あなたがJavaScriptに詳しいのなら、およそXMLHttpRequestのようなものです）
を開始します。このメソッドは、すぐに戻り値を返してバックグラウンドでダウンロードを開始します。
また、それぞれのダウンロードスレッドが`start`、`progress`や`finish`イベントを開始します。
downloadにファイルを送ることや、（`finish`イベントの中で）文字列を取り戻すことができます。

downloadにブロックを付けると、それは`finish`イベントとして呼ばれます。

{{{
 Shoes.app do
   stack do
     title "Searching Google", size: 16
     @status = para "One moment..."
 
     download "http://is.gd/bXTVY7" do |goog|
       @status.text = "Headers: #{goog.meta}"
     end
   end
 end
}}}

この例は本当に`download`の最も簡単な形です：いくつかのウェブデータをメモリにダウンロードして、
ダウンロードが完了するとそのデータを操作しています。

`download`のもう一つのサンプルはいくつかのウェブデータを、`:save`スタイルを利用してファイルに
保存します。

{{{
 Shoes.app do
   stack do
     title "Downloading Google image", size: 16
     @status = para "One moment..."
 
     download "http://is.gd/GVAGF7",
       :save => "nasa50th.gif" do
      @status.text = "Okay, is downloaded."
      image "nasa50th.gif", top: 100
     end
   end
 end
}}}

もしも特定のヘッダかアクションをウェブサーバへ送る必要があるのならば、HTTPリクエストを
カスタマイズするために`:method`、`:headers`や`:body`スタイルを利用することができます。
（そして、それら以上のスタイルが必要なら、いつでもRubyのOpenURIクラスを準備することができます。）

{{{
 #!ruby
 # Not yet available
 Shoes.app do
   stack do
     title "GET Google", size: 16
     @status = para "One moment..."
 
     download "http://is.gd/bXTVY7", 
         :method => "GET" do |dump|
       @status.text = dump.response.body
     end
   end
 end
}}}

上記の例から、Shoesは、Googleのサーチエンジンへ質問するために"GET"メソッドを
利用することが分かります。

'''注意:''' Green Shoesは、`:method`, `:headers`, `:body`スタイルをサポートしていません。

{{{
 include Hpricot
 Shoes.app do
   status = para "One moment..."
   download 'http://is.gd/BatiRt' do |dl|
     samples = []
     Hpricot(dl).inner_text.each_line do |line|
       samples.push($1) if line =~ /(sample.*\.rb)/
     end
     status.text = samples.join(', ')
     flush
   end
 end
}}}

上記の例から、Green ShoesはHTML解析のためにHpricotライブラリを組み込んでいることが
わかります。

'''注意:''' 今のところWindowsプラットフォームのみです。

=== 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`イベントも見てください。）

''注意:''' 今のところGreen Shoesではstarted?メソッドをサポートしていません。

=== visit(url: a string) ===

異なるShoesのURLを見るために、ロケーションを変更します。

（http://google.comのような）絶対パスのURLは悪くないですが、Green ShoesはGreen Shoes
アプリケーションがそのアドレスに存在することを期待するでしょう。
（そのため、google.comはHTMLアプリケーションとしては動作しません。）

== The Styles Master List ==

外観を変更したいですか？
Green Shoesにおいてはスタイルが要素の表示方法を変更するために利用されます。
場合によっては、要素のすべてのクラスのスタイルでさえ設定できます。
（すべての段落に特定のフォントを与えるように）

スタイルは簡単にspotできます。通常は要素が生成されるときに現れます。

{{{
 Shoes.app title: "A Styling Sample" do
   para 'Green Shoes', align: 'center', size: 50
 end
}}}

このappには`:title`スタイルが設定されています。そしてこのappの内部の段落には、
中央揃えの`:align`スタイルとフォントサイズ50の`:size`スタイルが設定されます。

このスタイルのハッシュは、どんな要素やスロットも利用できる[[Common.style]]メソッドを利用して変更できます。

'''注意:''' 今のところGreen Shoesでは、styleメソッドで変更できる要素は形状のみです。

{{{
 Shoes.app title: "A Styling Sample" do
   choose = 
     lambda{[red, blue, green, yellow].sample}
   s = star 100, 50, 30, 200, 180, strokewidth: 5
   button 'change colors' do
     s.style stroke: choose.call, fill: choose.call
   end
 end
}}}

多くのスタイルもメソッドとして呼び出すことで設定することができます。
（メソッドを見つけるために手動での検索を行うでしょう。）

'''注意:''' Green Shoesではメソッドとしてはそれらをサポートしていません。

{{{
 # Not yet available
 Shoes.app title: "A Styling Sample" do
   choose = 
     lambda{[red, blue, green, yellow].sample}
   s = star 100, 50, 30, 200, 180, strokewidth: 5
   button 'change colors' do
     s.stroke = choose.call; s.fill = choose.call
   end
 end
}}}

どんなスタイルでも分かるようにすべてのマニュアルを苦労して読ませるよりも、この役に立つページは
Green Shoesのあらゆるスタイルを急いで駆け抜けて、どこでスタイルが利用されるかについて示唆します。

=== :align » a string ===

''banner, caption, inscription, para, subtitle, tagline, title''で利用できます。

テキストの整列です。これは次のどれかです：

 * 'left': 左へテキストを整列します。
 * 'center': 中央へテキストを整列します。
 * 'right': 右へテキストを整列します。

=== :angle » a number ===

''background, border, line, oval, rect, shape, star''で利用できます。

グラデーションに適用する角度です。通常はグラデーションの色の効果は上から下です。
`:angle`を90に設定するなら反時計回りに90度回転し、グラデーションは左から右になるでしょう。

=== :attach » a slot or element ===

''flow, stack''で利用できます。

他のスロットや要素と比較してスロットをピンで止めます。ウィンドウの左上の角からスロットを配置する
ために`:attach => Window`と書く人もいるかもしれません。
これについてもう少し取り上げると、`:top => 10, :left => 10, :attach => Window`のスタイルは
スロットをウインドウの座標の(10, 10)に配置します。

動く要素にスロットがアタッチされた場合は、そのスロットはそれとともに動きます。
アタッチメントが`nil`にリセットされるなら、通常はそのスロットはそれを取り囲む他のオブジェクトとともに流れます。

'''注意:''' Green Shoesは`:attach`スタイルをサポートしていません。

=== :autoplay » true or false ===

''video''で利用できます。

ビデオは現れた後で再生を開始すべきですか？`true`を設定すると、ビデオはユーザに尋ねること無く
開始するでしょう。

'''注意:''' Green Shoesは`:autoplay`スタイルをサポートしていません。

=== :back » true or false ===

''shapes, image, textblocks''で利用できます。

他の要素の後ろに配置されます。

{{{
 Shoes.app do
   rect 100, 100, 100, 100, fill: green
   rect 120, 120, 100, 100, fill: yellow
   para 'hello', left: 150, top: 150, front: true
   oval 150, 150, 100, 100, fill: red
   oval 180, 180, 100, 100, fill: gray, back: true
 end
}}}

=== :bottom » a number ===

''すべてのスロットと要素''で利用できます。

要素の下の端の座標にピクセルを設定します。その端はコンテナの下の端に対して配置されます。
そのため、`:bottom => 0`は、スロットの下の端とその下の端が接するように要素を配置するでしょう。

'''注意:''' Green Shoesは`:bottom`スタイルをサポートしていません。

=== :cap » :curve or :rect or :project ===

''arc, line, shape''で利用できます。

線の終点の形状を曲がったもの（curved）か角張ったもの（square）に設定します。
追加の説明は[[Art.cap]]メソッドを見てください。

=== :center » true or false ===

''arc, image, oval, rect, shape''で利用できます。

`:top`と`:left`の座標が形状の中心を意味するかどうか示します。
`true`を設定すると、[[Art.transform]]メソッドに`:center`を設定したのと似ています。

'''注意:''' Green Shoesは`: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, button, check, flow, image, line, link, oval, radio, rect, shape, stack, star''で利用できます。

`click`イベントハンドラはスタイルに保存されます。解説は[[Events.click]]メソッドを見てください。

=== :curve » a number ===

''background, border, rect''で利用できます。

長方形の要素のそれぞれの曲がった角の半径です。例として、6を設定した場合、長方形の角は
6ピクセルの半径のカーブを与えられます。

=== :displace_left » a number ===

''すべてのスロットと要素''で利用できます。

形状、テキストブロックまたはその他のどんな種類のオブジェクトでも左か右に置き換えます。
正数は与えられた数のピクセルによって右へ置き換え、負数は左へ置き換えます。
オブジェクトを置き換えることはページの実際のレイアウトに影響を与えません。
この振る舞いに少し驚くかもしれないので、このスタイルを利用する前に、[[Position.displace]]の
ドキュメントを読むようにしてください。

'''注意:''' Green Shoesは`:displace_left`スタイルをサポートしていません。

=== :displace_top » a number ===

''すべてのスロットと要素''で利用できます。

形状、テキストブロックまたはその他のどんな種類のオブジェクトでも上か下に置き換えます。
正数は与えられた数のピクセルによって下へ置き換え、負数は上へ置き換えます。
オブジェクトを置き換えることはページの実際のレイアウトやオブジェクトの本当の座標に影響を与えません。
この振る舞いに少し驚くかもしれないので、[[Position.displace]]のドキュメントを読んでください。

'''注意:''' Green Shoesは`:displace_top`スタイルをサポートしていません。

=== :emphasis » a string ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

強調によってテキストを整えます。（一般的にはイタリック体にされます。）

このスタイルは3つの設定ができます：

 * "normal" - 直立のフォント。
 * "oblique" - ローマン体の傾いたフォント。
 * "italic" - イタリック体の傾いたフォント。

=== :family » a string ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

与えられたフォントファミリーでテキストを整えます。文字列はフォントファミリー名かカンマで区切られた
フォントファミリーの一覧を含むべきです。

=== :fill » a hex code, a RGB array or a range of either ===

''background, banner, border, caption, inscription, para, line, oval, 
rect, shape, star, subtitle, tagline, title''で利用できます。

背景のペンの色です。形状では、これは形状の内側を塗りつぶすペンキの色です。
テキストなどでは、この色で背景が塗られます。（まるで蛍光ペンでマークされたように）

=== :font » a string ===

''banner, caption, inscription, para, subtitle, tagline, title''で利用できます。

フォントの種類でテキストを整えます。この文字列は非常に柔軟ですが、
"[FAMILY-LIST] [STYLE-OPTIONS] [SIZE]"の形である必要があり、
FAMILY-LISTの部分は任意にカンマで終わりカンマで区切られたフォントファミリーの一覧、
STYLE_OPTIONSはvariant、weight、stretch、またはgravityなどの空白で区切られた
スタイルを表現する単語の一覧、そしてSIZEは（ポイントのサイズの）10進数または絶対的な
サイズのために単位修飾子"px"を任意に続けます。オプションのどれかは設定されないかもしれません。
FAMILY-LISTが設定されない場合は、デフォルトフォントファミリー（Arial）が利用されます。

=== :front » true or false ===

''shapes, image, textblocks''で利用できます。

他の要素の前に配置されます。

=== :group » a string ===

''radio''で利用できます。

どのグループにラジオボタンが所属するかを示します。この設定がない場合は、ラジオボタンは
周辺のスロットのラジオボタンとグループ化されます。ラジオボタンを"グループ化"することはスクリーン上で
お互いに隣接してグループ化されることを意味するのではありません。
それは、一度にグループから一つだけのラジオボタンだけを選択できることを意味します。

文字列にスタイルを与えることによって、ラジオボタンは同じグループ名を持つ他のラジオボタンとグループ化されます。

=== :height » a number ===

''すべてのスロットと要素''で利用できます。

オブジェクトの高さをピクセルで設定します。数値が10進数なら、その高さは親の高さの
パーセンテージになります。（0.0は0%に、1.0は100%になります。）

=== :hidden » true or false ===

''すべてのスロットと要素''で利用できます。

オブジェクトの表示または非表示です。すべてのオブジェクトにとって`:hidden => true`は
画面上での非表示になります。その子供のスロットと要素でも同様です。

{{{
 Shoes.app do
   slot = stack hidden: true do
     title 'hello'
     flow do
       image File.join DIR, '../samples/loogink.png'
     end
     para link('Go go!'){alert 'hi'}
   end
   timer(2){slot.show}
   timer(5){slot.hide}
 end
}}}

'''注意:''' 今のところGreen Shoesで`:hidden`スタイルをサポートしている要素は、
slots, shapes, textblocks, imagesのみです。

=== :inner » a number ===

''star''で利用できます。

内側の半径のサイズ（ピクセル）です。その内側の半径は点が別れ始める星の中に中空でない円を描きます。

=== :items » an array ===

''list_box''で利用できます。

リストボックスの項目の一覧です。例のために[[Element.list_box]]メソッドを見てください。

=== :justify » true or false ===

''banner, caption, inscription, para, subtitle, tagline, title''で利用できます。

均一に水平にテキストの間隔を開けます。

=== :kerning » a number ===

''banner, caption, code, del, em, ins, inscription, link, para, span,
strong, sub, sup, subtitle, tagline, title''で利用できます。

文字の間に自然な空白をピクセルで追加します。

'''注意:''' Green Shoesは`:kerning`スタイルをサポートしていません。

=== :leading » a number ===

''banner, caption, inscription, para, subtitle, tagline, title''で利用できます。

テキストブロックの行間に空白を設定します。デフォルトは4ピクセルです。

=== :left » a number ===

''すべてのスロットと要素''で利用できます。

オブジェクトの左の座標を特定のピクセルに設定します。
`:left => 10`の設定はそのオブジェクトを含むスロットの左の端からオブジェクトの左の端が10ピクセル
離れた位置に配置します。このleftのスタイルが設定されていない（または`nil`が設定される）なら、
そのオブジェクトはそれを囲んでいる他のオブジェクトとともに動くでしょう。

=== :margin » a number or an array of four numbers ===

''すべてのスロットと要素''で利用できます。

マージンは要素の周囲に間隔をあけます。
それぞれの要素はleft、top、right、そしてbottomのマージンを持っています。
`:margin`スタイルに一つの数が設定されると、要素の周囲の間隔は均一にその数にとなります。
言い換えると、`:margin => 8`を設定すると、その要素の周囲のすべてのマージンは8ピクセルの
長さに設定されます。

このスタイルは4つの数を`[left, top, right, bottom]`の形の配列で与えることもできます。

=== :margin_bottom » a number ===

''すべてのスロットと要素''で利用できます。

要素の下側（bottom）のマージンをピクセルで設定します。

=== :margin_left » a number ===

''すべてのスロットと要素''で利用できます。

要素の左側（left）のマージンをピクセルで設定します。

=== :margin_right » a number ===

''すべてのスロットと要素''で利用できます。

要素の右側（right）のマージンをピクセルで設定します。

=== :margin_top » a number ===

''すべてのスロットと要素''で利用できます。

要素の上側（top）のマージンをピクセルで設定します。

=== :outer » a number ===

''star''で利用できます。

星の外側の半径（''全''幅の半分）をピクセルで設定します。

=== :points » a number ===

''star''で利用できます。

その星はいくつの頂点を持ちますか？`:points => 5`のスタイルは5つの頂点を持つ星を作成します。

=== :radius » a number ===

''oval''で利用できます。

それらの要素に半径（直径または全幅の半分）を設定します。
これを設定することは、この数値の2倍の`:width`と`:height`を設定することと同等です。

=== :right » a number ===

''すべてのスロットと要素''で利用できます。

要素の右端の座標をピクセルで設定します。その端はコンテナの右端に対して配置されます。
そのため、`:right => 0`は、スロットの右端とその右端が接するように要素を配置するでしょう。
一方`:right => 20`は要素の右端をそのスロットの右端から左側に向けて20ピクセル
離れたところに配置します。

'''注意:''' Green Shoesは`:right`スタイルをサポートしていません。

=== :rise » a number ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

テキストのフォントを基準から上げたり下げたりします。
例えば、[[Element.sup]]は10ピクセルの`:rise`を行います。
逆に、[[Element.sub]]の要素は-10ピクセルの`:rise`となります。

=== :scroll » true or false ===

''flow, stack''で利用できます。

スロットをスクロールするスロットとします。
`:scroll => true`が設定され、そのコンテンツがスロットの高さ以上の場合はスクロールバーが
スロットに表示されます。スクロールバーは必要に応じて表示したり非表示になります。
それはスロットの幅の内側で表示されるので、スクロールバーのあるなしに関わらず、スロットの幅は
決して変わらないことを意味します。

'''注意:''' Green Shoesでは制約があります。今のところ`:scroll`スタイルはお試し版です。

 * スロットのインスタンスメソッド(clear, hide, etc.)が期待通り動きません。
 * マウスイベントをハンドリングできません。
 * `flush`メソッドを明示的に記述する必要があります。

{{{
 Shoes.app do
   s = stack left: 100, top: 50, width: 300, 
     height: 100, scroll: true do
     background gold
     image File.join(DIR, '../samples/loogink.png')
     10.times{para 'hello'}
     flush
   end
 end
}}}

=== :secret » true or false ===

''ask, edit_line''で利用できます。

パスワードフィールドのために利用され、この設定は入力された文字を画面上で表示されない
ようにします。そのかわり、置き換えられた文字（たとえばアスタリスク）をそれぞれの文字が
入力されるごとに表示します。

=== :size » a number ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

このテキストブロックまたはテキストの一部の内部で利用されたフォントのサイズをピクセルで設定します。

フォントサイズは次の文字列を利用することでも大きくすることができるかもしれません:

 * "xx-small" - 現在のサイズの57%
 * "x-small" - 現在のサイズの64%
 * "small" - 現在のサイズの83%
 * "medium" - サイズ変更なし
 * "large" - 現在のサイズの120%
 * "x-large" - 現在のサイズの143%
 * "xx-large" - 現在のサイズの173%

=== :state » a string ===

''button, check, edit_box, edit_line, list_box, radio''で利用できます。

この`:state`スタイルは編集されたくないコントロールを利用不能または固定するためにあります。

利用可能なスタイルの設定：

 * nil - コントロールはアクティブで編集可能です。
 * "readonly" - コントロールはアクティブですが編集不可能です。
 * "disabled" - コントロールはアクティブはなく（グレイアウト）、編集不可能です。

=== :stretch » a string ===

''banner, caption, code, del, em, ins, inscription, link, para, span,
strong, sub, sup, subtitle, tagline, title''で利用できます。

テキストオブジェクトに伸縮したフォントを設定します。

利用可能な設定：

 * "condensed" - 狭い幅の文字
 * "normal" - 標準の幅の文字
 * "expanded" - 広い幅の文字
 
 '''注意:''' Green Shoesは`:stretch`スタイルをサポートしていません。

=== :strikecolor » a RGB array ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

テキストに棒線を引いて削除するときの線の色です。

=== :strikethrough » a string ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

このテキストに棒線を引いて削除しますか？2つのオプションがあります：

 * "none" - 棒線を引いて削除しません。
 * "single" - 1本の棒線を引いて削除します。

=== :stroke » a hex code, a rgb array or a range of either ===

''background, banner, border, caption, inscription, para, line, oval, 
rect, shape, star, subtitle, tagline, title''で利用できます。

フォアグラウンドのペンの色です。形状の場合は描かれる線の色です。
段落や他のテキストでは、この色で文字が表示されます。

=== :strokewidth » a number ===

''background, border, line, oval, rect, shape, star''で利用できます。

描かれる線のピクセルでの太さで、形状の線を特徴付けます。
例えば、数値の2が設定されればstrokewidthは2ピクセルになります。

=== :text » a string ===

''edit_box, edit_line''で利用できます。

edit_boxやedit_lineのコンテンツに表示されるメッセージを設定します。

=== :top » a number ===

''すべてのスロットと要素''で利用できます。

オブジェクトの上側の座標を、その親のスロットに対して設定します。
オブジェクトに`:top => 40`が設定されたなら、オブジェクトの上端はそのオブジェクトを含む
スロットの上端から40ピクセル下に配置されることを意味します。`:top`スタイルが与えられないなら、
そのスロットの自然な流れでオブジェクトは自動的に配置されます。

=== :undercolor » a RGB array ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

テキストの下線に利用される色です。

=== :underline » a string ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

テキストに下線のスタイルを指示します。

この設定の選択肢は：

 * "none" - 下線なし。　
 * "single" - 途切れのない下線。
 * "double" - 平行な途切れのない2本の下線。
 * "low" - フォントの基準より下の低い下線。（一般的に１つの文字に対してだけ、得にキーボードアクセラレータを表示するときに推奨されます。）
 * "error" - 波状の下線、通常はミススペルの指摘を見つけます。

=== :variant » a string ===

''banner, caption, code, del, em, ins, inscription, link, para, span,
strong, sub, sup, subtitle, tagline, title''で利用できます。

テキストのグループのためにフォントを変化させます。2つの選択肢：

 * "normal" - 通常のフォント。
 * "smallcaps" - 大文字が小さく変化することによって置き換えられた小文字のフォント。

'''注意:''' Green Shoesは`:variant`スタイルをサポートしていません。

=== :weight » a string ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

テキストを太文字に設定します。一般的には、このスタイルは次の文字列の内の1つを設定します：

 * "ultralight" - 超軽量の太さ (= 200)
 * "light" - 軽量の太さ (=300)
 * "normal" - 通常の太さ (= 400)
 * "semibold" - 通常と太文字の中間の太さ (=600)
 * "bold" - 太文字 (= 700)
 * "ultrabold" - 極端な太文字の太さ (= 800)
 * "heavy" - 重厚な太さ (= 900)

しかしながら、数値で太さを直接渡すこともできます。

=== :width » a number ===

''すべてのスロットと要素''で利用できます。

要素の幅をピクセルで設定します。数値が10進数なら、その幅はパーセンテージに変換されます。
（0.0は0%に、1.0は100%になります。）100%の幅は親のスロットを埋め尽くすことを意味します。

=== :wrap » a number ===

''banner, caption, inscription, para, span, subtitle, tagline, title''で利用できます。

どこで改行するか? 選択可能のオプションは以下の通りです。

 * "word" - 単語の区切りで改行します。
 * "char" - 文字の区切りで改行します。そのため単語が分割される場合があります。
 * "trim" - はみ出した部分は省略します。

== Classes List ==

Green Shoesで紹介するすべてのクラスの完全な一覧です。

こちら([[http://rdoc.info/github/ashbb/green_shoes/master/frames/file/README.md Green Shoes RDoc]])
を参照下さい。

== Colors List ==

以下はGreen Shoes全体で利用可能な色の一覧です。背景色または枠線の色として。
描かれる線や塗りつぶされる色として。これらの色の大部分はX11やHTMLのパレットから来ています。

これらの色はすべて名前によって利用できます。（そのため、どんなスロットの内部からでも
`tomato`メソッドを呼ぶことで、すてきな赤みがかった色が手に入るでしょう。）
それぞれの色の下には、[[Built-in.rgb]]メソッドで利用できる正確な数値を見つけることもできます。

{COLORS}

= Slots =

スロットは画像やテキストなどのレイアウトに使われる箱です。2つの最も一般的なスロットは
`スタック（stack）`と`フロー（flow）`です。スロットはGreen Shoesの専門用語で"箱"または
"キャンバス"とも言えます

マウスホイールやページアップやページダウンはあらゆるプラットフォームで普及しているため、
縦のスクロールだけが溢れて問題になりました。そのためGreen Shoesでは、まさにWEBのように
通常は幅が固定です。一方で高さは際限なく続いて行きます。

さて、そうしたいなら、どんなものでも幅や高さを指定することもできます。それはいくらかの数学を
用いるでしょうが、完璧かもしれません。

一般的には、スタックとフローを使うことを提案するでしょう。ここでの目的は、あなたがいくらかの
幅を何かで満たして、幅を満たしながら、ページの下に進みたいということです。
これらを、HTMLの"ブロック"と"インライン"のスタイルと類似しているのように考えることができます。

==== Stacks ====

スタックは単純に要素の垂直なスタックです。スタック内のそれぞれの要素は、その上位の要素の
直下に配置されます。

また、スタックは箱のように形作られます。そのため、スタックが250の幅を与えられたら、
そのスタックはそれ自身が250ピクセルの幅の要素となります。

新しいスタックを作成するには[[Element.stack]]メソッドを利用し、それはすべてのスロットの
内部で利用できます。そのためスタックは他のスタックやフローを含むことができます。

==== Flows ====

フローは要素をできるだけしっかりと詰め込みます。幅は満たされ、それらの下の要素を包みます。
互いに隣接して配置されたテキストの要素は一つのパラグラフとして表示されます。
画像とウィジェットは同じシリーズとして実行されます。

スタックのように、フローは箱です。そのためスタックとフローは安全に埋め込むことができ、
それらのコンテンツに気を使うことなく、同質です。スタックとフローはそれらのコンテンツだけを
異なって扱います。

フローを作成するには[[Element.flow]]を呼びます。
フローは他のフローやスタックを含むかもしれません。

最後に：Green Shoesのウィンドウはそれ自身がフローです。

== Art for Slots ==

それぞれのスロットは、色のついた形状やグラデーションなどでおおうことにできる白紙の表面の
キャンバスのようなものです。

多くの一般的な形状は`oval`と`rect`メソッドで描かれます。
まず、絵筆の色を準備する必要があります。

`stroke`コマンドは線の色を設定します。
`fill`コマンドは線の内部を塗りつぶすために利用する色を設定します。　

{{{
 #!ruby
 Shoes.app do
   stroke red
   fill blue
   oval top: 10, left: 10, radius: 100
 end
}}}

このコードはまわりに赤い線のある青いパイを与えます。
100ピクセルの幅で、ウィンドウの左上から南東に少しのピクセルを配置します。

上記の`blue`と`red`メソッドはRGB配列です。
どうやって色を混ぜるかはColorsセクションを見てください。

==== Processing と NodeBox からのインスピレーション ====

この技巧的なメソッドの大抵は文字通りPythonのドローイングキットのNodeBoxから来ています。
次に、NodeBoxは多くのアイデアを、グラフィックとアニメーションのためのJavaのような言語である
Processingから得ています。私はそれらのすばらしいプログラムの作者から大きな恩を受けています。

Green ShoesはNodeBoxとProcessingから少しの点が違います。
例えば、Green Shoesはそれ自身のRGB配列を持っていることを含めて、異なるカラーメソッドを
持っていますが、それらはとてもProcessingのカラーメソッドに似ています。
そしてGreen Shoesは線を描くことや形状内を塗りつぶすために画像やグラデーションを
利用することも許しています。

ShoesはいくつかのアニメーションのアイデアをProcessingから取り入れており、
Processingのメソッドをしっかりと参考にしようとしながらそれを拡張しています。

=== arc(left, top, width, height, angle1, angle2) » Shoes::Oval ===

弧の形状（楕円形の一部）を座標（left, top）に描きます。
このメソッドは`:angle1`と`:angle2`のスタイルを提供することにより [[oval]]より
少し多くの制御をが行えます。（実際には、`:angle1`に0と`:angle2`に`2*Math::PI`を
設定することにより、`oval`メソッドをまねることができます。）

{{{
 Shoes.app do
   fill yellow..green
   stroke red..blue
   strokewidth 10
   cap :curve
 
   a = animate 12 do |i|
     @e.remove if @e
     r = i * (Math::PI * 0.01)
     @e = arc 100, 50, 180, 360, 0, r
     a.stop if r >= 2*Math::PI
   end
 end
}}}

=== arrow(left, top, width) » Shoes::Shape ===

座標（left, top）に`width`ピクセルの矢を描きます。

{{{
 Shoes.app do
   para 'An arrow shape:', left: 20, top: 10
   arrow 30, 40, 70
 end
}}}

=== cap(:curve or :rect or :project) » self ===

描くすべての線の終点の形状である線の頂点を設定します。
`:curve`が設定されるなら、終点はまるくなります。
デフォルトは`:rect`で、線の終点は突然に平らになります。
`:project`の頂点も平らですが、棒の外側は少し長くなります。

{{{
 Shoes.app do
   nofill
   strokewidth 20
   stroke green
   cap :curve
   line 100, 100, 300, 100
   line 100, 250, 300, 300
   cap :rect
   line 100, 150, 300, 150
   stroke blue
   cap :project
   line 100, 200, 300, 200
   line 200, 100, 200, 300
   strokewidth 1
   stroke red
   rect 100, 100, 200, 200
 end
}}}

=== fill(pattern) » pattern ===

塗りつぶすバケツの色の指定（またはパターン）を設定します。
パターンは色やグラデーションまたは画像が設定できます。
そして、一度塗りつぶすバケツが設定されたら、選択されたパターンで色づけられた形状を
描くことができます。

画像のパターンで星を描くためには：

{{{
 #!ruby
 Shoes.app do
   fill File.join(DIR, "../static/gshoes-icon.png")
   star 200, 200, 5, 100, 50
 end
}}}

塗りつぶすバケツをクリアするには`nofill`を使ってください。
そして`stroke`メソッドを利用して線（星の枠線）の色を設定してください。

=== nofill() » self ===

塗りつぶす色を削除するため、形状は塗りつぶされずに描かれます。
その代わりに、形状は線だけを持ち、中央を透明のままにします。

=== nostroke() » self ===

線の色を空にします。形状は外側の線が描かれなくなります。
`nofill`も設定された場合は、形状は表示されずに描かれます。

=== line(left, top, x2, y2) » Shoes::Line ===

現在の線の色（別名"stroke"）を使って座標（left, top）から（x2, y2）まで線を描きます。

=== oval(left, top, radius) » Shoes::Oval ===

座標（left, top）ピクセルに`radius`ピクセルの幅と高さの円を描きます。
線の色や塗りつぶす色が形状を描くために利用されます。
デフォルトでは、座標は楕円形の最も左上の角ですが、これは[[Art.transform]]メソッドを
呼ぶことや、次のメソッドの下の`:center`スタイルを使用することによって変更することができます。

{{{
 #!ruby
 Shoes.app do
   stroke blue
   strokewidth 4
   fill black
   oval 10, 10, 50
 end
}}}

様々な比率の楕円形を描くためには、`oval(left, top, width, height)`のシンタックスを
利用してもいいです。

=== oval(styles) » Shoes::Oval ===

スタイルのハッシュを利用して円を描きます。次のスタイルがサポートされています：

 * `top`: 楕円形の囲いのy座標。
 * `left`: 楕円形の囲いのx座標。
 * `radius`: 円の幅と高さ。
 * `width`: 楕円形の幅のピクセルでの指定。
 * `height`: 楕円形の高さのピクセルでの指定。
 * `center`: 座標を楕円形の中央に指定しますか？（trueまたはfalse）

これらのスタイルは形状オブジェクトの`style`メソッドを利用して変更されます。

'''注意:''' Green Shoesは`:center`スタイルをサポートしていません。

=== rect(top, left, width, height, corners = 0) » Shoes::Rect ===

座標（left, top）からwidth x heightの寸法の長方形を描きます。
オプションとして、5番目の引数（ピクセルでの角の半径）により長方形の角を丸くすることもできます。
他の形状と同様に、長方形は描く線の色や塗りつぶす色を利用して描かれます。

{{{
 #!ruby
 Shoes.app do
   stroke rgb(0.5, 0.5, 0.7)
   fill rgb(1.0, 1.0, 0.9)
   rect 10, 10, self.width - 20, self.height - 20
 end
}}}

上記のサンプルは角の周囲に10ピクセルのマージンを残して、その親の箱の範囲を塗りつぶす
長方形を描きます。デフォルトで親の箱を塗りつぶした長方形のためには`background`も
見てください。

=== rect(styles) » Shoes::Rect ===

スタイルのハッシュを利用して長方形を描きます。次のスタイルがサポートされています：

 * `top`: 長方形のy座標。
 * `left`: 長方形のx座標。
 * `curve`: 長方形の角の半径のピクセル。
 * `width`: 長方形のピクセルによる幅。
 * `height`:長方形のピクセルによる高さ。
 * `center`: 座標を長方形の中央に指定しますか？（trueまたはfalse）

これらのスタイルは形状オブジェクトの`style`メソッドを利用して変更されます。

'''注意:''' Green Shoesは`:center`スタイルをサポートしていません。

=== rotate(degrees: a number) » self ===

形状をその角度で描画するために、`度（degrees）`数により描画のために利用される
範囲を回転させます。

下の例では、長方形は(30, 30)に45度回転されて描かれます。

{{{
 #!ruby
 Shoes.app do
   fill "#333"
   rotate 45
   rect 30, 30, 40, 40
 end
}}}

=== shape(left, top) { ... } » Shoes::Shape ===

(left, top)から開始して、続いてブロックの内部で`line_to`、`move_to`、`curve_to`
そして`arc_to`を呼ぶことにより、任意の形状を表現（記述）します。
曲がったり弧を描いたりする長い線の形状をスケッチして見ることができます。

{{{
 Shoes.app do
   fill yellow
   shape do
     move_to 50, 30
     curve_to 100, 100, 10, 20, 100, 50
     line_to 20, 100
     line_to 30, 30
   end
 end
}}}

形状は他の形状を含むこともできます。
そして、形状の内部に[[Art.oval]]、[[Art.rect]]、[[Art.line]]、[[Art.star]]または
[[Art.arrow]]（さらに、[[Art]]セクションの他のメソッドすべて）を配置することができますが、
それらは線の一部ではないでしょう。形状のグループのようなそれらは、すべて1つとして描かれます。

'''注意:''' Green Shoesでは、上記の`line_to`、`move_to`、`curve_to`は
Cairo::Contextのメソッドです。ブロックの中で直接それらを呼び出しています。
そのため、Green Shoesでは`arc_to`はサポートしていません。また他の形状もShapeブロック
内に含めることができません。

=== star(left, top, points = 10, outer = 100.0, inner = 50.0) » Shoes::Star ===

描く線の色や塗りつぶす色を利用して星を描きます。
星は(left, top)の座標を中心点として`頂点（points）`の数とともに配置されます。
`outer`の幅は星の全半径をを定義します；`inner`の幅は頂点の始まる星の中央の半径を
指定します。

=== stroke(pattern) » pattern ===

スロットのアクティブな線の色を設定します。`pattern`は色、グラデーションまたは画像で、
それらはすべて"patterns"に分類されます。その線の色はそれに続く形状すべての枠線を
描くときに利用されます。

つまり、まわりに赤い線を持つ矢印を描くには：

{{{
 #!ruby
 Shoes.app do
   stroke red
   nofill
   star 100, 100
 end
}}}

線の色をクリアするには、`nostroke`メソッドを利用します。

=== strokewidth(a number) » self ===

スロットの内部で描かれるすべての線のサイズを設定します。
`stroke`メソッドが線の色を変更する一方、`strokewidth`メソッドは線のサイズを
ピクセルで変更します。`strokewidth(4)`を呼ぶことにより4ピクセルの太さで線を描きます。

=== transform(:center or :corner) » self ===

（`skew`や`rotate`のような）変化は形状の中心あたりで実行されるべきですか？
またはその形状の角ですか？Shoesの初期値は`:corner`です。

'''注意:''' Green Shoesは`:transform`メソッドをサポートしていません。

=== translate(left, top) » self ===

スロットの描画の範囲を開始する位置を移動します。
通常は、すべての形状がこの位置から描くことができるように、その範囲は左上の角の
(0, 0)から開始します。`translate`により開始位置が(10, 20)に移動されて、
(50, 60)に形状が描かれるなら、その形状は実際にはスロットの(60, 80)に描かれます。

'''注意:''' Green Shoesは`:translate`メソッドをサポートしていません。

== Element Creation ==

Green Shoesは幅広い種類の要素を持っており、その多くをHTMLからよいところを選んで
採用しています。このページはどのようにしてスロットにそれらの要素を作成するかを記述して
います。それらの要素を配置した後でさらにどのようにして変更したり利用するのかについては、
このマニュアルの要素（Elements）のセクションを見てください。

=== animate(fps) { |frame| ... } » Shoes::Anim ===

アプリケーションをそのままにして並列で実行するアニメーションタイマーを開始します。
`fps`は秒ごとのフレームの数です。
この数は付属するブロックが1秒に何回呼ばれるのかを決定します。

このブロックは`frame`の数が与えられます。
`frame`の数はゼロから始まり、そのブロックが何フレームのアニメーションを表示したのかを
教えます。

{{{
 #!ruby
 Shoes.app do
   counter = para "STARTING"
   animate 24 do |frame|
     counter.replace "FRAME #{frame}"
   end
 end
}}}

上記のアニメーションは1秒間に24回表示されます。
数が与えられないなら、`fps`のデフォルトは10です。

=== background(pattern) » Shoes::Background ===

色（またはパターン）を指定して背景（Background）要素を描きます。
パターンは色、グラデーションまたは画像です。色と画像は背景全体に敷き詰めます。
グラデーションは背景を塗りつぶすように伸びます。

'''注意してください:''' 背景は実際には要素であり、スタイルではありません。
HTMLは背景をスタイルのようにあつかいます。
それはすべての箱は一つの背景だけを持てることを意味します。
Green Shoesは背景の要素を重ねることができます。

{{{
 #!ruby
 Shoes.app do
   background black
   background white, width: 50
 end
}}}

上記の例は二つの背景を塗ります。
まず、黒い背景がアプリケーションの表面のエリア全体に塗られます。
そして、50ピクセルの白い縞が左側にそって塗られます。

=== banner(text) » Shoes::Banner ===

バナー（Banner）のテキストブロックを作成します。
Green Shoesは自動的に48ピクセルの大きさにテキストを整形します。

=== border(text, :strokewidth => a number) » Shoes::Border ===

色（またはパターン）を指定して枠線（Border）の要素を描きます。
パターンは色、グラデーションまたは画像です。色と画像は枠線全体に敷き詰めます。
グラデーションは背景を塗りつぶすように伸びます。

'''注意してください:''' 背景のように、枠線は実際には要素であり、スタイルではありません。
HTMLは背景や枠線をスタイルのようにあつかいます。
それはすべての箱は一つの枠線だけを持てることを意味します。
Green Shoesはテキストブロック、画像、他のすべてのものにそって、枠線や背景の要素を
重ねることができます。

=== button(text) { ... } » Shoes::Button ===

表面にわたってメッセージ`テキスト（text）`の書かれた押しボタンを追加します。
ボタンが押されたときに呼ばれる、任意のブロックを取り付けることができます。

=== caption(text) » Shoes::Caption ===

キャプション（Caption）テキストブロックを作成します。
Green Shoesは14ピクセルの大きさにこのテキストを整形します。

=== check() » Shoes::Check ===

チェックボックスを追加します。

=== code(text) » String ===

コード（Code）のテキストの一部を作成します。
このテキストはデフォルトで等幅フォントになります。

=== del(text) » String ===

デフォルトで中央に1本の棒線を引いてテキストを削除した、
削除された（Del）（"deleted"の省略形）テキストの一部を作成します。

=== dialog(styles) { ... } » Shoes::App ===

（まさに [[Element.window]]メソッドを実効したように）新しいアプリケーションのウィンドウを
開きますが、そのウィンドウはダイアログボックスの外観を与えられます。

'''注意:''' Green Shoesは`dialog`メソッドをサポートしていません。

=== edit_box(text, :accepts_tab => true or false) » Shoes::EditBox ===

スロットに大きなマルチラインのテキストエリアを追加します。
この`text`はオプションでこの箱の開始時に与えられる文字列です。
オプションのブロックをここに取り付けることができ、これはボックスのテキストに対するどんな種類の
ユーザの変更でも呼び出されます。

`accepts_tab`にtrueを設定するとタブが挿入できます。
`accepts_tab`にfalseを設定するとタブによるフォーカス移動ができます。
デフォルトはfalseです。

{{{
 #!ruby
 Shoes.app do
   edit_box
   edit_box text: "HORRAY EDIT ME"
   edit_box text: "small one",
     width: 100, height: 160
 end
}}}

=== edit_line(text) » Shoes::EditLine ===

スロットに一行のテキストボックスを追加します。
この`text`はオプションでこの箱の開始時に与えられる文字列です。
オプションのブロックをここに取り付けることができ、これはボックスのテキストに対するどんな種類の
ユーザの変更でも呼び出されます。

=== em(text) » String ===

Em（"emphasized"の省略形）テキストの一部を作成し、これはデフォルトでイタリック体で
整形されます。

=== every(seconds) { |count| ... } » Shoes::Anim ===

`animate`メソッドとよく似たタイマーですが、より非常に遅いです。
このタイマーは与えられた数の秒（seconds）で、取り付けられたブロックを実行します。
そのため、例えば5秒毎にwebサイトを確認する必要があるなら、実際にwebサイトにpingを
打つコードを含むブロックと共に`every(300)`を呼び出します。

=== flow(styles) { ... } » Shoes::Flow ===

フロー（flow）はGreen Shoesの要素を配置できる目に見えない箱（または"スロット"）です。
フローとスタックのどちらもメインの[[Slots]]のページでとても詳細に説明されます。

フローは要素を水平にまとめます。ものを垂直に積み重ねたままにするために
[[Element.stack]]を利用するところで、フローはそのコンテンツをページの端から端にわたって
配置します。いったんページの最後に到達したら、フローは要素の新しい行を開始します。

=== image(path) » Shoes::Image ===

写真を表示するために[[Image]]の要素を作成します。
PNG、JPEGそしてGIFのフォーマットが許されます。

`path`はファイルのパスまたはURLです。すべての画像はメモリに一時的にキャッシュされ、
リモートの画像はローカルのユーザの個人的なShoesディレクトリにもキャッシュされます。
リモートの画像はバックグラウンドでロードされます；ブラウザと同様に、画像はすぐには
表示されませんが、それらがロードされたときに表示されます。

'''注意:''' Green Shoesは上述のローカルのユーザの個人的なShoesディレクトリへの
キャッシュをサポートしていません。

=== imagesize(path) » [width, height] ===

画像の幅と高さを素早く手に入れます。
画像はキャッシュにロードされず表示もされません。

緊急の注意：このメソッドはリモートの画像（ハードディスクドライブからではなくHTTPにより
ロードされた）には利用できません。

=== ins(text) » String ===

一本の下線のGreen Shoesスタイルである、Ins（"inserted"の省略形）テキストの一部を
作成します。

=== inscription(text) » Shoes::Inscription ===

題名（Inscription）のテキストブロックを作成します。
Green Shoesは10ピクセルの大きさにこのテキストを整形します。

=== link(text, :click => proc or string) » Shoes::Link ===

一本の下線を持ち線の色を#06E（青色）に整形したリンクテキストブロックを作成します。
デフォルトのリンクホバースタイルは一本の下線を持ち線の色を#039（ダークブルー）に整形します。

=== link(text){ ... } » Shoes::Link ===

この形式でもリンクテキストブロックを作成できます。
この場合、ユーザがリンクテキストをクリックするとブロック内のコードが実行されます。

=== list_box(:items => [strings, ...]) » Shoes::ListBox ===

`items`の配列のすべてのエントリを含むドロップダウンリストボックスを追加します。
オプションでブロックを取り付けることができ、これはユーザがボックスの項目を選択したら
呼び出されます。

{{{
 #!ruby
 Shoes.app do
  stack  margin: 10 do
   para "Pick a card:"
   list_box items: ["Jac", "Ace", "Jok"] do |item|
    @p.text = "#{item} was picked!"
   end
   @p = para
  end
 end
}}}

選択された文字列をを得るために`ListBox#text`を呼び出します。
より多くのヘルプは`リストボックス（ListBox）`のセクションの`ネイティブ`コントロールを見てください。

=== progress() » Shoes::Progress ===

プログレスバーを追加します。

=== para(text) » Shoes::Para ===

12ピクセルの大きさに整形する、Para（"paragraph"の省略形）テキストブロックを作成します。

=== radio(group name: a string or symbol) » Shoes::Radio ===

ラジオボタンを追加します。`グループ名（group name）`が与えられたら、ラジオボタンは
グループの一部だとみなされます。同じグループのラジオボタンのうちで、
1つだけをクリックすることができます。（もしグループ名が与えられなければ、そのラジオボタンは
同じスロットの他のすべてのラジオボタンとグループ化されます）

=== span(text) » String ===

デフォルトでスタイル付けされていない、Spanテキストの一部を作成します。

{{{
 Shoes.app do
   tagline "\n", 'hello ' * 5, 
     span(em('Green Shoes'), size: 8, rise: 15)
 end
}}}

=== stack(styles) { ... } » Shoes::Stack ===

新しいスタックを作成します。スタックはスロットの一種です。
（スタックとフローの完全な説明はメインの[[Slots]]のページを見てください。）

要するに、スタックは要素を配置するための目に見えない箱（"スロット"）です。
スタックにボタンや画像などを追加して、それらは垂直に積み上げられます。
そう、それらは重なります。

=== strong(text) » String ===

デフォルトで太字に整形された、Strongテキストの一部を作成します。

=== sub(text) » String ===

デフォルトでテキストは10ピクセル（位置を）下げられx-smallフォントに整形された、
Sub（"subscript"の省略形）テキストの一部を作成します。

=== subtitle(text) » Shoes::Subtitle ===

サブタイトル（Subtitle）テキストブロックを作成します。
26ピクセルの大きさにこのテキストを整形します。

=== sup(text) » String ===

デフォルトでテキストは10ピクセル（位置を）上げられx-smallフォントに整形された、
Sup（"superscript"の省略形）テキストの一部を作成します。

=== tagline(text) » Shoes::Tagline ===

タグライン（Tagline）テキストブロックを作成します。このテキストを18ピクセルの大きさに整形します。

=== timer(seconds) { ... } » Fixnum ===

1回だけのタイマーです。少しの秒（または分、時）後にいくらかのコードの実行をスケジュールしたい
なら、ここにブロックとしてコードを取り付けることができます。

今から5秒後にアラートボックスを表示するためには：

{{{
 #!ruby
 Shoes.app do
   timer 5 do
     alert "Your five seconds are up."
   end
 end
}}}

=== title(text) » Shoes::Title ===

タイトル（Title）テキストブロックを作成します。これらの要素を34ピクセルの大きさに整形します。

=== video(path or url) » Shoes::Video ===

動画を埋め込みます。

=== window(styles) { ... } » Shoes::App ===

新しいアプリケーションウィンドウを開きます。
このメソッドは初めにアプリケーションを開始するために使われる[[App.Shoes.app]]メソッドと
ほとんど同一です。違いは`window`メソッドは新しいウィンドウの[[App.owner]]プロパティを
設定することです。（普通のShoes.appはその`owner`を`nil`に設定します。）

そのため、新しいウィンドウの`owner`はウィンドウを開始したShoes::Appに設定されるでしょう。
この方法により子のウィンドウが親を呼べます。

{{{
 #!ruby
 Shoes.app title: "The Owner" do
  button "Pop up?" do
   window do
    para "Okay, popped up from [#{owner.inspect}]."
   end
  end
 end
}}}

== Events ==

どのようにしてマウスのクリックを離したことやキーボードをタイプしたことが分かるか
不思議に思いませんか？スロットの内部でマウスが動いたときはいつでもイベントが
スロットに送られます。また、キーが押されたときはいつでも。
スロットが作成されたり破壊されたときでさえ。それぞれのそれらのイベントをブロックを
取り付けることができます。

マウスイベントは`motion`、`click`、`hover`そして`leave`を含みます。
キーボードのタイピングは`keypress`イベントによって表されます。
そして`start`や`finish`イベントはキャンバスを開始するときや破棄されたときを指し示します。

では、マウスでスロットの上をフロートするときに背景を変更したいとしましょう。
スロットの内部にマウスがくるときに背景を変更するためには`hover`イベントを使います。
そして、マウスがフロートして離れるときに戻すには`leave`を使います。

{{{
 #!ruby
 Shoes.app do
   s = stack width: 200, height: 200 do
     background red
   end
   s.hover do
     s.clear { background blue }
   end
   s.leave do
     s.clear { background red }
   end
 end
}}}

=== click { |button, left, top| ... } » self ===

マウスボタンがクリックされたときにはclickブロックが呼ばれます。
`button`はマウスボタンのどれが押されたかの数です。
`left`や`top`はどこがクリックされたかのマウスの座標です。

マウスのクリックを離した瞬間をとらえるには、[[Events.release]]イベントを見てください。

=== finish { |self| ... } » self ===

スロットが取り除かれたときは、finishイベントが発生します。
finishブロックはすぐに`self`を手渡し、スロットオブジェクトは取り除かれます。

'''注意:''' Green Shoesは`finish`メソッドをサポートしていません。

=== hover { |self| ... } » self ===

hoverイベントはスロットにマウスが入ったときに発生します。
このブロックは`self`を手に入れ、どのオブジェクトの上を通ったかを意味します。

スロットからマウスが出ていくことをとらえるには、[[Events.leave]]イベントを確認してください。

=== keypress { |key| ... } » self ===

キー（またはキーの組み合わせ）がいつ押されても、そのブロックは呼ばれます。
そのブロックにはキーの性質を表す文字列である`key`を送られます。

そして、例えば、`Shift-a`が押されたなら、そのブロックは`"A"`の文字列を得ます。
また、F1が押されたなら、 `F1`の文字列を受けとります。

`"Control_L"`, `"Shift_L"`, `"Alt_L"`は左サイドに位置する修飾キーです。
もし`Shift-Control-Alt-PgUp`が押されたなら、得られる文字列は、以下の順番で現れます: 
`"Shift_L"`, `"Control_L"`, `"Alt_L"`, `"Page_Up"`

シフトキーについて１つ。USキーボードでは、`Shift-7`はアンパサンド（&）です。
そのため、`"Shift_L"`と`"7"`ではなく、`"Shift_L"`と`"ampersand"`を得ます。
そして、そのようなキーボードで`Shift-Alt-7`を押したら、`"Shift_L"`と`"Alt_L"`と
`"ampersand"`という文字列を得るでしょう。

{{{
 #!ruby
 Shoes.app do
   info = para "NO KEY is PRESSED."
   keypress do |k|
     info.replace "#{k.inspect} was PRESSED."
   end
 end
}}}

=== leave { |self| ... } » self ===

スロットからマウスカーソルが出て行くときleaveイベントが発生します。
その瞬間すでにマウスカーソルはスロットの端の中にはありません。
leaveイベントが発生するとき、`self`とともにブロックが呼ばれ、そのスロットオブジェクトは
取り残されます。

スロットにマウスが入ることを見つけたいなら[[Events.hover]]も見てください。

=== motion { |left, top| ... } » self ===

マウスがスロットの内部を移動するたびにモーションのブロックは呼ばれます。
ブロックはカーソルの`left`や`top`の座標を渡します。

{{{
 #!ruby
 Shoes.app width: 200, height: 200 do
   background black
   fill white
   circ = oval 0, 0, 100, 100
 
   motion do |top, left|
     circ.move top - 50, left - 50
   end
 end
}}}

=== release { |button, left, top| ... } » self ===

マウスがアンクリック（マウスアップ）のときにreleaseのブロックは実行されます。
それは指が持ち上げられたときです。`button`は押し下げられたボタンに対応する数です。
`left`や`top`はボタンが離されたときのマウスのの座標です。

実際のマウスクリックを捕まえるには、[[Events.click]]イベントを利用してください。

=== start { |self| ... } » self ===

初めてスロットが描かれるとき、スタート（start）イベントが実行されます。
まさに今描かれたスロットオブジェクトが`self`としてブロックに渡されます。

'''注意:''' Green Shoesは`start`メソッドをサポートしていません。

== Manipulation Blocks ==

以下のmanipulationメソッドはスロットの周囲を変更したり新しい要素を挿入することを
手早く片付けます。

=== append() { ... } » self ===

スロットの最後に要素を追加します。

{{{
 #!ruby
 Shoes.app do
   @slot = stack { para 'Good Morning' }
   timer 3 do
     @slot.append do
       title "Breaking News"
       tagline "Astronauts ",
         "arrested for space shuttle DUI."
     end
   end
 end
}}}


`title`や`tagline`の要素を`@slot`の最後に追加します。

=== after(element) { ... } » self ===

スロットの子として`element`のすぐ後に、スロットの指定した箇所に要素を追加します。

=== before(element) { ... } » self ===

スロットの子として`element`のすぐ前に、スロットの指定した箇所に要素を追加します。

=== clear() » self ===

タイマーやネストしたスロットなど、スロットのすべての要素を空にします。
スロットのコンテンツを最初から最後までループしてそれぞれの要素の`remove`メソッドを
呼ぶことと効果としては同一です。

=== clear() { ... } » self ===

clearメソッドはオプションでブロックも取ります。
このブロックはスロットのコンテンツを置き換えるために利用されます。

{{{
 #!ruby
 Shoes.app do
   @slot = stack { para "Old text" }
   timer 3 do
     @slot.clear { para "Brand new text" }
   end
 end
}}}

この例では、"Old text"パラグラフは排除され、"Brand new text"によって置き換えられます。

=== prepend() { ... } » self ===

スロットの初めに要素を追加します。

{{{
 #!ruby
 Shoes.app do
   @slot = stack { para 'Good Morning' }
   timer 3 do
     @slot.prepend { para "Your car is ready." }
   end
 end
}}}

`@slot`の初めに`para`要素を追加します。

== Position of a Slot ==

他のすべての要素と同様に、スロットは作成されたときに整形することやカスタマイズすることが
できます。

スタックの幅を150ピクセルに設定するためには：

{{{
 #!ruby
 Shoes.app do
   stack width: 150 do
     background yellow
     para "Now that's precision." 
   end
 end
}}}

それぞれのスタイルの設定は、詳細な設定を手に入れるために利用することのできるメソッドも
持っています。（例えば、`width`メソッドはスロットの幅をピクセルで返します。）

=== displace(left: a number, top: a number) » self ===

:displace_leftと:displace_topスタイルの設定のためのショートカットメソッドです。
置き換えはレイアウトを変更しないでスロットを移動する便利な方法です。
実際には、`top`と`left`メソッドは置き換えを全く報告しません。
そのため、通常、置き換えは一時的なアニメーションのためにあります。
例えば、適当な位置にボタンを少し移動するなど。

`left`と`top`の数は`displace`に送られ、スロット自身のtopとleftの座標に追加されます。
topとleftの座標から差し引くには、負数を利用してください。

'''注意:''' Green Shoesは`displace`メソッドをサポートしていません。

=== gutter() » a number ===

スクロールバーエリアの大きさです。Green Shoesがスクロールバーを表示する必要があるとき、
スクロールバーがウィンドウの端にふれているいくつかの要素を隠してしまうかもしれません。
`gutter`はどのくらいのピクセルをスクロールバーが隠すことを期待するかを教えます。

これは一般的には、次のように右側に詰め物の要素として利用します：

{{{
 Shoes.app do
   stack margin_right: 20 + gutter do
     para "Insert fat and ratified ",
       "declaration of independence here..."
   end
 end
}}}

=== height() » a number ===

スロットの目に見えるピクセルでの垂直の大きさです。そして、スクロールするスロットの場合は、
スロットの全体の大きさを得るために`scroll_height()`の利用を必要とするでしょう。

=== hide() » self ===

見えなくするために、スロットを隠します。[[Position.show]]と[[Position.toggle]]も見てください。

=== left() » a number ===

スロットの位置の左のピクセルです。x-axis座標でも知ることができます。

=== move(left, top) » self ===

スロットの左上の角である（left、top）の座標を指定してスロットを移動します。

'''注意:''' Green Shoesは`move`メソッドをサポートしていません。

=== remove() » self ===

スロットを削除します。それは表示されなくなり親のコンテンツに記載されなくなります。
それは消え去ります。

'''注意:''' Green Shoesは`remove`メソッドをサポートしていません。`clear`メソッドを
使用して下さい。

=== scroll() » true or false ===

スロットにスクロールバーを表示することを許しますか？trueかfalseです。
スロットの高さも固定されているときだけスクロールバーが表示されます。

'''注意:''' Green Shoesは`scroll`メソッドをサポートしていません。

=== scroll_height() » a number ===

スクロールによって隠されているすべてを含む、スロット全体の垂直の大きさです。

'''注意:''' Green Shoesは`scroll_height`メソッドをサポートしていません。

=== scroll_max() » a number ===

このスロットでスクロールダウンできる上側（top）の座標です。
スクロールバーの上側（top）の座標はいつもゼロです。
下側（bottom）の座標はスロット全体の高さから1ページのスクロール分を引いたものです。
この下側（bottom）の座標は`scroll_max`が返す値です。

これは基本的に`slot.scroll_height - slot.height`と書くためのショートカットです。

スロットの下側にスクロールするためには、`slot.scroll_top = slot.scroll_max`を利用します。

=== scroll_top() » a number ===

スロットがスクロールダウンする上側（top）の座標です。
そのため、スロットが20ピクセルスクロールダウンされたら、このメソッドは`20`を返します。

'''注意:''' Green Shoesは`scroll_top`メソッドをサポートしていません。

=== scroll_top = a number ===

任意の座標にスロットをスクロールします。ゼロから`scroll_max`までの間である必要があります。

'''注意:''' Green Shoesは`scroll_top=`メソッドをサポートしていません。

=== show() » self ===

スロットが隠されていた場合、表示します。[[Position.hide]]と[[Position.toggle]]も見てください。

=== style() » styles ===

引数なしで`style`メソッドを呼ぶことでスロットに現在適用されているスタイルのハッシュを返します。

`height`と`width`などのメソッドはスロットの本当のサイズをピクセルで返しますが、
`style[:height]`または`style[:width]`を利用することで初めに要求されたサイズを
得ることができます。

{{{
 #!ruby
 Shoes.app do
   s = stack width: 1.0
   para s.style[:width]
   button('Then..'){s.append{para s.style[:width]}}
 end
}}}

この例では、このスタックの下のパラグラフは最初に"1.0"の文字列を表示しますが、ボタンを
クリックした後は"600"の文字列を表示するでしょう。

=== style(styles) » styles ===

ハッシュのスタイル設定を使ってスロットを修正してください。
このページのどんなメソッドでも（もちろん、このメソッドは除いて）スタイルの設定に利用できます。
そして、例えば、`width`メソッドがあり、このように`width`スタイルもあります。

{{{
 #!ruby
 Shoes.app do
   s = stack { background green }
   s.style width: 400, height: 200
 end
}}}

=== toggle() » self ===

スロットが表示されているなら非表示にします。また、スロットが非表示なら表示します。

=== top() » a number ===

スロットの上（top）の位置です。y軸の座標としても知られています。

=== width() » a number ===

スロットの水平のピクセルサイズです。

== Traversing the Page ==

スロット内部の要素を最初から最後までループする必要性に気づくかもしれません。
または、ページを登って要素の親のスタックを探す必要があるかもしれません。

すべての要素で、上位のスロット直接得るために`parent`メソッドを呼ぶことができます。
そしてスロットでは、すべての子を得るために`contents`メソッドを呼ぶことができます。
（テキストブロックなどのいくつかの要素は、それらの子を得るための`contents`メソッドも
持っています。）

=== contents() » an array of elements ===

スロットのすべての要素を一覧にします。

=== parent() » a Shoes::Stack or Shoes::Flow ===

要素のコンテナのオブジェクトを得ます。

{{{
 Shoes.app do
   s = stack do
     para 'Green'
     @p = para 'Shoes'
   end
   para s
   para s.contents
   para @p.parent
 end
}}}

= Elements =

これはGreen Shoesの要素です。要素は楕円の形状と同じくらい単純です。
またはparaのテキスト文字列と同じくらい複雑です。
あなたは以前このマニュアルのスロットのセクションでこれらすべての要素に出会ったことがあります。

Green Shoesは7つのネイティブコントロールを持ちます：
ボタン（Button）、エディットライン（EditLine）、エディットボックス（EditBox）、
リストボックス（ListBox）、プログレスメータ（Progress meter）、チェックボックス（Check box）、
ラジオ（Radio）。私たちの言う"native"コントロールとは、それらの7つの要素が
Ruby/GTK2のAPIを使って直接描画されることを意味します。そのため、プログレスバーでは
PNG画像データに変換されることなく描画されます。

またShoesは7つの他の種類の要素を持っています：背景（Background）、ボーダー（Border）、
画像（Image）、形状（Shape）、テキストブロック（TextBlock）、タイマー（Animate）、
そしてビデオ（Video）。それらすべてはどんなオペレーティングシステムでも同じような見え方と
動きになるべきです。

いったん要素を生成した後でも、それを変更したくなるでしょう。それを動かしたり隠したり
またはそれを取り除くために。それらの種類のことを行うために、このセクションのコマンドを
利用するでしょう。
（特にどんな要素上でも利用できるコマンドの[[Common Common Methods]]セクションを
確認してください。）

そして、例として、PNGをスクリーンを配置するためにスロットの`image`メソッドを使ってください。
この`image`メソッドはイメージオブジェクトを返します。
これらをすっかり変更するためにイメージオブジェクトのこのメソッドを使ってみてください。

== Common Methods ==

Green Shoesでは少しのメソッドがすべての小さな要素によって共有されてます。
移動、表示、非表示。要素の削除。基本的でとても一般的なことです。
この一覧はそれらの一般的なコマンドを含んでいます。

すべてのメソッドの中でもっとも一般的なメソッドの一つは`style`です。
（これはスロットの[[Position.style]]メソッドとしてもカバーされます。）

{{{
 #!ruby
 Shoes.app do
   stack do
     # Background, text and a button: 
     # both are elements!
     @back  = background green
     @text  = banner "A Message for You, Rudy"
     @press = button "Stop your messin about!"
 
     # And so, both can be styled.
     @text.style size: 12, 
       markup: fg(@text.text, red), margin: 10
     @press.style width: 400
     @back.style height: 10
   end
 end
}}}

個別のコマンドについては、左にあるElementsセクションの他のリンクを見てください。
ビデオファイルの中断または再生がしたいなら、ビデオの中断や再生は特異なので、
[[Video]]セクションを確認してください。中断するボタンという感じではありません。

=== displace(left: a number, top: a number) » self ===

要素を移動して置き換えます。しかし周囲のレイアウトは変更しません。
特にアニメーションしている間でも要素の位置を保持したいなら、これは微妙なアニメーションに
重要です。おそらく素早く震えるボタンや視界にスロットを滑り込ませるような。

要素を置き換えるとき、それが配置されている左上の角から相対的に移動します。
そのため、要素が(20, 40)の座標にあり、2ピクセル左と6ピクセル上に置き換えるなら、
結果的に(22, 46)の座標となります。

{{{
 #!ruby
 # Not yet available
 Shoes.app do
   flow :margin => 12 do
     # Set up three buttons
     button "One"
     @two = button "Two"
     button "Three"
 
     # Bounce the second button
     animate do |i|
       @two.displace(0, (Math.sin(i) * 6).to_i)
     end
   end
 end
}}}

他の２つのボタンは動かずにじっとしていますが、２番目のボタンが飛び跳ねることに
注目してください。この状況で普通の`move`を使うなら、２番目のボタンはレイアウトから
取り除かれて、２番目のボタンが全くそこにないかのように振る舞うでしょう。
（[[Common.move]]の例を見てください。）

'''特に注意してください：'''表示される要素の座標を得るために`left`と`top`メソッドを
利用するなら、通常の座標を得るだけです。それは置き換えが行われていないかのようです。
置き換えは即座のアニメーションだけを目的とします。

'''注意:''' Green Shoesは`displace`メソッドをサポートしていません。

=== height() » a number ===

エレメントの垂直のピクセルによるスクリーンサイズです。画像の場合には、これは画像全体の
サイズではありません。これは要素の現在表示されている高さです。

150x150ピクセルの画像を持っていて50ピクセルに幅を設定するなら、このメソッドは50を
返します。

例や他の解説のために[[Common.width]]メソッドも見てください。

=== hide() » self ===

要素が見えないように、非表示にします。[[Common.show]]や[[Common.toggle]]も
見てください。

=== left() » a number ===

要素の左端の位置をピクセルで得ます。

=== move(left: a number, top: a number) » self  ===

スロットの範囲内でピクセルによって指定した位置に要素を移動します。
その要素はスロットの内部にあります。しかし、もはやスロットの他の要素と一緒に
積み上げられたりフローされたりしません。その要素は絶対的な位置指定ではなく、
自由に浮かんでいます。

{{{
 #!ruby
 Shoes.app do
   # Set up three buttons
   b = button "One"
   @two = button "Two"
   button "Three"
 
   # Bounce the second button
   animate do |i|
     @two.move(33, 33 + (Math.sin(i) * 6).to_i)
   end
 end
}}}

３番目のボタンがその位置にスライドすることを許しており、２番目のボタンは特定の場所に
動かされてします。要素を別の場所に変更しないで移動したいなら、
[[Common.displace]]メソッドを見てください。

=== parent() » a Shoes::Stack or Shoes::Flow ===

その要素のコンテナのオブジェクトを得ます。反対のことを行うためにはスロットの
[[Traversing.contents]]も見てください：コンテナの要素を得ます。

=== remove() » self ===

スロットから要素を削除します。（他の言葉で言い換えると：ガベージに投げます。）
その要素はもう表示されません。

=== show() » self ===

要素が非表示なら、表示します。[[Common.hide]]や[[Common.toggle]]も見てください。

=== style() » styles ===

ハッシュの形で、要素に適用するフルセットのスタイルを得ます。`width`や`height`や
`top`のようなメソッドは特定のピクセルでのサイズを返しますが、`style[:width]`または
`style[:top]`を利用すると、初めの設定を得ることができます。
（"100%"の幅または"10px"のトップのような）

{{{
 #!ruby
 Shoes.app do
   # A button which take up the whole page
   @b = button "All of it", 
     width: width, height: height
 
   # When clicked, show the styles
   @b.click { alert(@b.style.inspect) }
 end
}}}

=== style(styles) » styles ===

要素のスタイルを変更します。これは要素の`:width`と`:height`、テキストのフォントの
`:size`、形状の`:stroke`や`:fill`を含みます。または他の多くのスタイルの設定もです。

=== toggle() » self ===

要素が表示されているなら非表示にします。または要素が非表示なら表示します。

=== top() » a number ===

要素の上端のピクセルの位置を得ます。

=== width() » a number ===

要素の全体の大きさの幅をピクセルで得ます。
このメソッドはいつも正確なピクセルサイズを返します。
画像の場合は、画像の全幅ではなく、表示されているサイズだけです。
詳しくは[[Common.height]]メソッドも見てください。

また、120ピクセルの幅のスタック内に1.0の幅の要素を作成したなら、`120`が返されます。
`style[:width]`を呼んだなら、`120`を得ます。

{{{
 #!ruby
 Shoes.app do
   stack width: 120 do
     @b = button "Click me", width: 1.0 do
       alert "button.width = #{@b.width}\n" +
         "button.style[:width] = " +
         "#{@b.style[:width]}"
     end
   end
 end
}}}

幅を設定するためには、[[Common.style]]メソッドをもう一度調べる必要があります。
そして、150ピクセルの幅にボタンを設定するには：`@b.style(width: 150)`。

== Background ==

背景はスロット全体に渡って塗られた、グラデーションまたは画像の色です。
背景と枠線はShoes::Patternの種類の一つです。!{:margin_left => 100}man-ele-background.png!

''背景（background）''と呼ばれているにも関わらず、この要素は他の要素よりも前面に
表示されます。背景がスロットで塗られた何か他のもの（`rect`または`oval`のような）の
後にきた場合、背景はその要素の上に塗られます。

もっとも単純な背景は、黒の背景のような[[Element.background]]メソッドによって作成された、
単色の背景です。

{{{
 #!ruby
 Shoes.app do
   background black
 end
}}}

このような単純な背景はスロットが含むもの全体を塗りつぶします
（この場合は、ウィンドウ全体が黒で塗られます。）

好きなように背景のサイズを切り詰めたりあちこち移動したりするためのスタイルを利用できます。

ウィンドウの上側を50ピクセルに渡って黒い背景で塗りつぶします：

{{{
 #!ruby
 Shoes.app do
   background black, height: 50
 end
}}}

または、ウィンドウの右端の50ピクセルの列を塗りつぶします：

{{{
 #!ruby
 Shoes.app do
   background black, width: 50
 end
}}}

背景は普通の要素と同様なので、その他のすべてのメソッドについては[[Elements]]セクションの
始めの部分も見てください。

=== to_pattern() » a Shoes::Pattern ===

背景を塗りつぶすために利用されたグラデーションや画像を通常のShoes::Patternオブジェクトに
配置し、色をヤンクします。そして、他のオブジェクトに背景や枠線に渡すことができます。
好きなように再利用してください。

'''注意:''' Green Shoesは`to_pattern`メソッドをサポートしていません。

== Border ==

枠線はスロットの周囲の線に塗られた、色やグラデーションや画像です。
前のセクションの背景（background）と同様に、枠線（Border）はShoes::Patternの一種です。
!{:margin_left => 100}man-ele-border.png!

はじめに、すべての枠線はスロットの周囲の外側ではなく、'''内側'''を塗ることについて知ることは
重要です。そのため、50ピクセルの幅のスロットに5ピクセルの枠線を塗るなら、それは枠線で
囲まれたスロットが内部に40ピクセルの幅のエリアを持つことを意味します。

これは枠線（Border）を[[Background]]の上に塗るなら、その背景の端の上を枠線によって
塗られることも意味します。

正にそのようなスロットがここにあります：

{{{
 #!ruby
 Shoes.app do
   stack width: 50 do
     border black, strokewidth: 5
     para fg "=^.^=", green
   end
 end
}}}

スロットの外側の修正に枠線を塗りたいなら、もう一つのスロットでそのスロットをラップする
必要があります。その結果、スロットの外側に枠線が配置されます。

{{{
 #!ruby
 Shoes.app do
   stack width: 60 do
     border black, strokewidth: 5
     stack width: 50 do
       para fg "=^.^=", green
     end
   end
 end
}}}

HTMLや他の多くの言語では、枠線は箱の外側に塗られるため、ボックス全体の幅が
増加します。Green Shoesは一貫性を考慮してデザインされているため、枠線や
マージンや他のどんなものも気にしないでそれは50ピクセルの幅のままです。

枠線に利用する他のメソッドについては[[Elements]]セクションも確認してください。

=== to_pattern() » a Shoes::Pattern ===

枠線を塗るための色、グラデーションまたは画像を元にした基本のパターンオブジェクトを
作成します。

'''注意:''' Green Shoesは`to_pattern`メソッドをサポートしていません。

== Button ==

ボタン（Button）は、ご存知のとおり、押しボタンです。それらをクリックしたら何かを行います。
ボタンは"OK"または"Are you sure?"などを表示します。そして、よければボタンをクリックします。
!{:margin_left => 100}man-ele-button.png!

{{{
 #!ruby
 Shoes.app do
   button "OK!"
   button "Are you sure?"
 end
}}}

上記の例のボタンはそれらがクリックされたときに何も行いません。
働きを行わせるためには、それぞれのボタンにブロックを取り付けます。

{{{
 #!ruby
 Shoes.app do
   button "OK!" do
     append { para "Well okay then." }
   end
   button "Are you sure?" do
     append { para "Your confidence is inspiring." }
   end
 end
}}}

このようにボタンにブロックを取り付けました。
それぞれのブロックはページに新しいパラグラフを取り付けます。
クリックする度に、パラグラフが追加されます。

これはこれ以上深くはしません。ボタンはクリック可能な句でしかありません。

厳密に言えば、次に続く例では他の方法でそれを書いています。

{{{
 #!ruby
 Shoes.app do
   @b1 = button "OK!"
   @b1.click{para "Well okay then."}
   @b2 = button "Are you sure?"
   @b2.click{para "Your confidence is inspiring."}
 end
}}}

見た目は劇的に違いますが、これは同じ動きです。
１つ目の違い：直接ブロックをボタンに取り付けるのではなく、`click`メソッドを通して、
ブロックを後で取り付けています。

２つ目の違いはボタンには全く関係がありません。Green Shoesがスロットに要素を直接
追加することを許しているので、`append`ブロックが取り除かれています。
そのため直接`para`を呼ぶことができます。（`prepend`、`before`または
`after`メソッドの場合にはできません。）

以下のメソッドに加えて、ボタンは[[Common]]のすべてのメソッドも継承します。

=== click() { |self| ... } » self ===

ボタンがクリックされたときには、`click`ブロックが呼ばれます。
このブロックは`self`を渡します。意味すること：どちらのボタンでクリックされたか。

=== focus() » self ===

ボタンのフォーカスを移動します。
そのボタンはハイライトされ、ユーザがエンターキーを打てば、クリックされます。

== Check ==

チェックボックスはチェックされた状態またはチェックされていない状態になるクリック可能な
四角い箱です。１つのチェックボックスでは通常は"はい（yes）"または"いいえ（no）"の
質問をたずねます。複数のチェックボックスのセットではto-doリストでも見られます。
!{:margin_left => 100}man-ele-check.png!

ここにチェックリストのサンプルがあります。

{{{
 #!ruby
 Shoes.app do
   stack do
     flow do
       check; para "Frances Johnson", width: 200
     end
     flow do
       check; para "Ignatius J. Reilly", width: 200
     end
     flow do
       check
       para "Winston Niles Rumfoord", width: 200
     end
   end
 end
}}}

基本的にはチェック（check）を利用するための２つの方法があります。
チェックにチェックがクリックされたときに呼ばれるブロックを取り付けます。
そして／または、ボックスがチェックされているかどうか確認する`checked?`メソッドを
利用できます。

では、上記の例に追加しましょう。

{{{
 #!ruby
 Shoes.app do
   @list = ['Frances Johnson', 'Ignatius J. Reilly',
     'Winston Niles Rumfoord']
 
   stack do
     @list.map! do |name|
       flow { @c = check; para name, width: 200 }
       [@c, name]
     end
 
     button "What's been checked?" do
       selected = 
         @list.map{|c, n| n if c.checked?}.compact
       alert("You selected: " + selected.join(', '))
     end
   end
 end
}}}

そして、ボタンが押されたときに、`checked?`メソッドを利用して、それぞれのチェックは
その状態を尋ねます。

下のボタンメソッドの一覧だけでなく、すべての要素が応答できる、[[Common]]メソッドの
一覧も見てください。

=== checked?() » true or false ===

その箱がチェックされているかどうかを返します。
そして、`true`の意味は"はい、この箱はチェックされています！"です。

=== checked = true or false ===

チェックボックスをマークしたりマークを外したりします。
例えば、`checked = false`を利用して、箱のチェックを外します。

=== click() { |self| ... } » self ===

チェックボックスがクリックされたときに、その`click`ブロックが呼ばれます。
このブロックは、クリックされたチェックボックスオブジェクトの`self`を渡します。

箱がチェックされるときとチェックを外すときのどちらもクリックが渡されます。

=== focus() » self ===

チェックボックスにフォーカスを移動します。そのチェックボックスはハイライトされ、
ユーザがエンターキーを打てば、そのチェックボックスはチェックされた状態とチェックされていない
状態の間をトグルします。

== EditBox ==

エディットボックス（Edit box）は、テキストを入力するための幅広い長方形の箱です。
webでは、それらはテキストエリアと呼ばれます。それらは長い記述を入力するための
マルチラインエディットボックスです。エッセイでさえ書けます！
!{:margin_left => 100}man-ele-editbox.png!

スタイルを何も設定しなければ、エディットボックスは200ピクセルx108ピクセルのサイズです。
特定のサイズに設定するために`:width`と`:height`のスタイルを利用することもできます。

{{{
 #!ruby
 Shoes.app do
   edit_box
   edit_box width: 100, height: 100
 end
}}}

（[[Button]]や[[Check]]などの）他のコントロールはクリックイベントだけを持っていますが、
[[EditLine]]やエディットボックス（EditBox）は`change`イベントも持っています。
誰かがタイプしたり箱から削除したら`change`のブロックはいつでも呼ばれます。

{{{
 #!ruby
 Shoes.app do
   edit_box do |e|
     @counter.text = 
       strong("#{e.text.size}") + " characters"
   end
   @counter = para strong("0"), " characters"
 end
}}}

この例ではブロック内部で[[EditBox.text]]メソッドを利用していることにも注意してください。
このメソッドは箱に対してタイプしたすべての文字の文字列をあなたに与えます。

エディットボックスの更なるメソッドは以下に一覧にしますが、すべての要素が応答できる、
[[Common]]メソッドの一覧も見てください。

=== change() { |self| ... } » self ===

エディットボックスに文字が追加されたり取り除かれるたびに、`chenage`ブロックが
呼ばれます。ブロックには変更されたエディットボックスのオブジェクトである`self`が
与えられます。

=== focus() » self ===

エディットボックスにフォーカスを移動します。そのエディットボックスはハイライトされ、
ユーザはエディットボックスにタイプできます。

=== text() » self ===

箱にタイプされた文字を文字列として返します。

=== text = a string ===

`a string`の文字をエディットボックスに代入します。

== EditLine ==

エディットライン（Edit line）は細長い、小さなテキストを入力する箱です。
エディットボックスはマルチラインですが、エディットラインは１行です。
これはエディットラインです。ちなみに水平です。
!{:margin_left => 100}man-ele-editline.png!

スタイルが設定されていないエディットラインは200ピクセルの幅と28ピクセルの高さです。
これはおおよそです。プラットフォームによって高さは様々です。

{{{
 #!ruby
 Shoes.app do
   stack do
     edit_line
     edit_line width: 400
   end
 end
}}}

`:width`と`:height`の両方のスタイルを設定することによりサイズを変更することができます。
しかしながら、高さはフォントに合わせて調整されるため、一般的には`:width`だけの
スタイルを設定します。（そして、現在のバージョンのGreen Shoesでは、エディットラインと
エディットボックスフォントはどうやっても変更できません。）

エディットラインにブロックが与えられたら、`change`イベントを受けとります。
changeブロックを利用した例については[[EditBox]]のページを確認してください。
実際には、そのエディットボックスはエディットラインとすべて同じメソッドを持ちます。
すべての要素が応答できる、[[Common]]メソッドの一覧も見てください。

=== change() { |self| ... } » self ===

エディットラインに文字が追加されたり取り除かれるたびに、`chenage`ブロックが呼ばれます。
ブロックには変更されたエディットラインのオブジェクトである`self`が与えられます。

=== focus() » self ===

エディットラインにフォーカスを移動します。そのエディットラインはハイライトされ、
ユーザはエディットラインにタイプできます。

=== text() » self ===

箱にタイプされた文字を文字列として返します。

=== text = a string ===

`a string`の文字をエディットボックスに代入します。

== Image ==

画像（image）はPNG、JPEGまたはGIFフォーマットの画像ファイルです。
Green Shoesは画像をリサイズまたはテキストとともにそれらをフローすることができます。
!{:margin_left => 100}man-ele-image.png!

画像を作成するために、スロット内部で`image`メソッドを利用します：

{{{
 #!ruby
 Shoes.app do
   para "Nice, nice, very nice.  Busy, busy, busy."
   image File.join DIR,
     "../static/shoes-manual-apps.png"
  end
}}}

Green Shoesに何らかの画像をロードしたとき、それはメモリにキャッシュされます。
それは、同じファイルの画像の要素をたくさんロードした場合でも、それは実際には
１回だけファイルをロードすることを意味します。

webのURLを直接利用することもできます。

{{{
 #!ruby
 Shoes.app do
   image "http://is.gd/c0mBtb"
 end
}}}

webから画像がロードされたとき、それはハードディスクドライブとメモリの両方にキャッシュ
されます。これは画像が変更されなければ再度ダウンロードをすることを防止します。
（不思議に思う場合：正にブラウザが行うetagのようにShoesは変更時間の軌跡を
保持します。）

'''注意:''' Green Shoesは、Red Shoesのようなハードドライブキャッシュ管理機能を
サポートしていません。

Green Shoesはバックグラウンドでシステムのスレッドを使ってリモートの画像もロードします。
そのため、リモートの画像を利用することはRubyを妨げることはなく、またどんな強烈な
グラフィカルな表示でも進み続けるでしょう。

=== full_height() » a number ===

画像全体のピクセルでの高さです。通常は、ピクセルでの画像の高さを知るために
[[Common.height]]メソッドを利用できます。しかし画像がリサイズされていたり
より大きいサイズなどにスタイルが設定されていた場合は、`height`は変更された
サイズを返します。

`full_height`メソッドは保存されたオリジナルファイルの画像の（ピクセルでの）高さを与えます。

=== full_width() » a number ===

画像全体のピクセルでの幅です。[[Common.width]]ではなくこのメソッドを使う理由の
説明については[[Image.full_height]]メソッドを見てください。

=== path() » a string ===

画像のURLまたはファイル名です。

=== path = a string ===

ファイルまたはURLからロードして、画像を他のものに入れ替えます。

=== rotate(degrees: a number) » self ===

画像を`degrees`度回転させます。

{{{
 Shoes.app do
   img = image File.join(DIR, '../samples/cy.png')
   img.move 200, 200
   animate do |i|
     img.rotate i*10
   end
 end
}}}

== ListBox ==

リストボックス（List box）（環境によって"コンボボックス（combo box）"または
"ドロップダウンボックス（drop-down box）"または"セレクトボックス（select box）"とも
呼ばれています。）は箱をクリックしたときドロップダウンしてオプションが一覧として表示されます。
!{:margin_left => 100}man-ele-listbox.png!

リストボックスは配列からオプションを取得します。
配列（リスト）の文字列は、`:items`スタイルに渡されます。

{{{
 #!ruby
 Shoes.app do
   para "Choose a fruit:"
   list_box items: ["Grapes", "Pears", "Apricots"]
 end
}}}

そして、リストボックスの基本のサイズは200ピクセルの幅と28ピクセルの高さです。
この長さは`width`スタイルを利用して調整することができます。

{{{
 #!ruby
 Shoes.app do
   para "Choose a fruit:"
   list_box items: ["Grapes", "Pears", "Apricots"],
     width: 120, choose: "Apricots" do |list|
       @fruit.text = list.text
   end
 
   @fruit = para "No fruit selected"
 end
}}}

`:width`スタイルに続いて、この例ではもう１つの便利なオプションを利用します。
`:choose`オプションは始めからハイライトされるべきアイテムをリストボックスに教えます。
（箱が作成された後でアイテムをハイライトするには[[ListBox.choose]]メソッドもあります。）

リストボックスは[[ListBox.change]]イベントも持っています。次の例では、リストボックスに
ブロックを取り付けました。いいですか、この`change`ブロックを見てください。
このブロックは誰かが選択されたアイテムを変更するたびに呼ばれます。

これらは基本的なことです。すべての要素が持っているメソッドの完全な一覧である、
[[Common]]メソッドのページを見てください。

=== change() { |self| ... } » self ===

誰かがリストボックスの新しいオプションをハイライトするたびに（例えば、アイテムをクリックする
ことによって）`change`ブロックは呼ばれます。ブロックには変更されたリストボックスの
オブジェクトである`self`が与えられます。

=== choose(item: a string) » self ===

`item`として与えられた文字列と一致するリストボックス内のオプションを選択します。

=== focus() » self ===

リストボックスにフォーカスを移動します。そのリストはハイライトされ、ユーザが上や下の
矢印キーを押した場合、リスト内の別のオプションが選択されます。

=== items() » an array of strings ===

リストボックスにオプションとして現在表示されている文字列の完全な一覧を返します。

=== items = an array of strings ===

リストボックスのオプションを新しい文字列の一覧で置き換えます。

=== text() » a string ===

現在リストボックス内でハイライトされて表示されているテキストを含む文字列です。
何も選択されていないなら、`nil`が応答されます。

== Progress ==

プログレスバー（Progress bar）は活動がどこまで進んでいるかを表示します。
一般的には、プログレスバーはパーセンテージで示されます。
（0%から100%まで）Shoesは0.0から1.0の10進数を使って進行を考えます。
!{:margin_left => 100}man-ele-progress.png!

シンプルなプログレスバーは200ピクセルの幅ですが、長くするために
（すべてのGreen Shoesの要素のように）`:width`スタイルは利用できません。

'''注意:''' Green Shoesでは、最小サイズが幅150ピクセルです。

{{{
 Shoes.app do
   title "Progress example"
   @p = progress left: 10, top: 100, width: width-20
 
   animate do |i|
     @p.fraction = (i % 100) / 100.0
   end
 end
}}}

プログレスバーを含む、すべての要素に備え付けられたメソッドの一覧については
[[Common]]メソッドのページを見てください。

=== fraction() » a decimal number ===

どこまでプログレスバーが進んでいるかを指し示す、0.0から1.0の10進数の数を返します。

=== fraction = a decimal number ===

0.0から1.0の間の10進数の数で進行を設定します。

== Radio ==

ラジオボタン（Radio button）はクリック可能な円のグループです。
それをマークするには円をクリックしてください。ラジオボタンは１度に１つだけマークできます。
（１度に１つのオプションだけしか選択できないところは、リストボックスに似ています。）
!{:margin_left => 100}man-ele-radio.png!

それでは、リストボックスを利用すべきときと、ラジオボタンを利用すべきときをどのようにして
決定しますか？そうですね、リストボックスはボックスをクリックしてドロップダウンを表示すること
なく１つのハイライトされたアイテムを表示します。
しかし、ラジオボタンはどれがマークされているか気にすることなく、すべて表示されます。

{{{
 #!ruby
 Shoes.app do
   para "Among these films, which do you prefer?\n"
   radio
   para strong("The Taste of Tea"), 
     " by Katsuhito Ishii\n", width: 570
   radio
   para strong("Kin-Dza-Dza"), 
     " by Georgi Danelia\n", width: 570
   radio
   para strong("Children of Heaven"), 
     " by Majid Majidi\n", width: 570
 end
}}}

それらは（たくさんの`para`とともに）同じスロット内で一緒にグループ化されているため、
３つのラジオボタンから１度に１つだけが選択できます。

これらをそれら自身のスロットに移動したら、この例は壊れます。

{{{
 #!ruby
 Shoes.app do
   stack do
     para "Among these films, which do you prefer?"
     flow do
       radio
       para "The Taste of Tea by Katsuhito Ishii", 
         width: 300
     end
     flow do
       radio
       para "Kin-Dza-Dza by Georgi Danelia",
         width: 300
     end
     flow do
       radio
       para "Children of Heaven by Majid Majidi",
         width: 300
     end
   end
 end
}}}

しかし、これは修正できます。
違うスロットのラジオボタンを一緒にグループ化することができ、それらにすべて同じグループ名を
与える必要があります。

ここでは`:films`グループにそれらすべてのラジオボタンをグループ化しました。

{{{
 #!ruby
 Shoes.app do
   stack do
     para "Among these films, which do you prefer?"
     flow do
       radio :films
       para "The Taste of Tea by Katsuhito Ishii",
         width: 300
     end
     flow do
       radio :films
       para "Kin-Dza-Dza by Georgi Danelia",
         width: 300
     end
     flow do
       radio :films
       para "Children of Heaven by Majid Majidi",
         width: 300
     end
   end
 end
}}}

下にあるそれらの一覧を越える更なるメソッドについては、[[Common]]メソッドのページを
詳しく調べてください。それらのメソッドをすべてのラジオボタンで同様に利用できるからです。

=== checked?() » true or false ===

ラジオボタンがチェックされているかどうかを返します。
そして、`true`の意味は"はい、チェックされています！"です。

=== checked = true or false ===

ラジオボタンをマークしたりマークを外したりします。
例えば、`checked = false`を利用して、ラジオボタンをクリアします。

=== click() { |self| ... } » self ===

ラジオボタンがクリックされたとき、その`click`ブロックが呼ばれます。
このブロックは、クリックされたラジオボタンを示すオブジェクトの`self`を渡します。

ラジオボタンをマークしたときとマークを外したときの両方で、クリックが送られます。

=== focus() » self ===

ラジオボタンのフォーカスを移動します。そのラジオボタンはハイライトされます。

== Shape ==

形状（shape）は通常は`oval`と`rect`のようにドローイングメソッドによって作成される
アウトラインパスです。!{:margin_left => 100}man-ele-shape.png!

[[Common]]メソッドのページを見てください。形状はそれらすべてのメソッドに応答できます。

== TextBlock ==

テキストブロック（TextBlock）オブジェクトは単独の要素にとして形成されるテキストの
グループを示します。例えば、太字のテキストを含むパラグラフです。
リンクと太字のテキストを含むキャプションです。（そして、`caption`はテキストブロックの
タイプです。しかしながら、`link`と`strong`はテキストクラスのタイプです。）
!{:margin_left => 100}man-ele-textblock.png!

テキストブロックのすべての種類はタイプは[[Element Element Creation]]ページで
確認できます。

 * [[Element.banner]], 48ピクセルのフォント。
 * [[Element.title]], 34ピクセルのフォント。
 * [[Element.subtitle]], 26ピクセルのフォント。
 * [[Element.tagline]], 18ピクセルのフォント。
 * [[Element.caption]], 14ピクセルのフォント。
 * [[Element.para]], 12ピクセルのフォント。
 * [[Element.inscription]], 10ピクセルのフォント。

=== contents() » an array of elements  ===

ブロック内部の整形された文字列すべてのリストです。

'''注意:''' Green Shoesは`contents`メソッドをサポートしていません。

=== cursor() » an index ===

テキストカーソルの位置を返します。このテキストボックス内の文字のインデックスです。

=== cursor = an index or nil ===

テキストカーソルを表示/非表示します。
例えば、`cursor = 3`は文の先頭から3文字目の位置にテキストカーソルを表示します。
`cursor = -1`は文の末尾にテキストカーソルを表示します。
`cursor = nil`はテキストカーソルを非表示にします。

{{{
 Shoes.app do
  msg = para 'hello ' * 20
  msg.cursor = -1
  keypress do |k|
    n = case k
      when 'Left'; -1
      when 'Right'; 1
      else
        next
    end
    n += msg.cursor
    len = msg.text.length
    n = len unless n > -1
    msg.cursor = n % (len+1)
    flush
  end
 end
}}}

=== highlight() » an array ===

テキストマーカーの開始位置とハイライトする長さを配列形式で返します。

=== hit(left, top) » an index or nil ===

マウスカーソルが指し示すテキストのインデックスを返します。
`left`と`top` は、マウスの位置です。

{{{
 Shoes.app do
   para 'index: ', width: 50
   index = para '', width: 20
   msg = title 'hello ' * 5
   click do |b, x, y|
     index.text = msg.hit x, y
   end
 end
}}}

=== marker() » an index ===

テキストマーカーの開始位置を返します。

=== marker = an index ===

テキストマーカーの開始位置からカーソル位置までの文字列をハイライトします。

{{{
 Shoes.app do
   background gainsboro
   extend HH::Markup
   code = 'alert "Hello Green Shoes! " * 5'
   msg = para highlight code, nil
   button 'marker' do
     msg.cursor = 17
     msg.marker = 14
     msg.text = highlight msg.markup, nil
     para msg.highlight
     flush
   end
 end
}}}

=== markup() » a text ===

Pangoのマークアップテキストを返します。

=== replace(a string) ===

ブロック全体のテキストを`a string`の文字で置き換えます。

=== text() » a string ===

テキストボックスのすべての文字の文字列を返します。画面に表示されるかのように、
すべてのスタイルまたはテキストクラスが取り除かれて実際の文字だけを返します。

=== text = a string ===

ブロック全体のテキストを`a string`の文字で置き換えます。

=== to_s() » a string ===

[[TextBlock.text]]のエイリアスです。
テキストブロックのすべてのコンテンツをフラットにした文字列を返します。

== Timers ==

Green Shoesは3つのタイマーを持っています：Animate、EveryそしてTimerです。
AnimateとEveryの両方は開始してから何度も何度も繰り替えします。
タイマーは１度だけ実行されます。１回限りのタイマーです。

animateとeveryは基本的には同じものです。
違いはanimateは普通は１秒間にとてもたくさん実行されます。
そしてeveryは数秒間ごとに実行されるか、まれにしか実行されません。

animateとeveryは自動的に開始されます。

=== start() » self ===

どちらのタイプのタイマーもそれ自身で自動的に開始されるため、通常はこれは利用する
必要がありません。しかし、[[Timers.stop]]でタイマーを止めて再開したい場合は、
もちろん：これを利用してください！

'''注意:''' Green Shoesは`start`メソッドをサポートしていません。

=== stop() » self ===

animateまたはeveryのループを中断します。

=== pause() » self ===

animateまたはeveryのループを一時停止します。
アニメーションまたはタイマーが停止されていれば、開始します。
既に実行されていれば、停止します。

== Video ==

Green Shoesは埋め込みのMP4, AVI, WMV, QuickTimeや他の様々な人気のある
ビデオフォーマットをサポートしています。これはすべてRuby/GStreamerのおかげです。
Shoes::Videoオブジェクトをセットアップするために`video`メソッドを利用してください。
!{:margin_left => 100}man-ele-video.png!

{{{
 Shoes.app width: 400, height: 300 do
   background gold..cyan, angle: 90
   space = ' ' * 3
   v = video 'http://is.gd/xZ6Jih'
   links = para space, 
     link('play'){v.play; links.move(0, 300)}, 
     space, link('pause'){v.pause}, 
     space, link('-1sec'){v.time -= 1000},
     space, link('+1sec'){v.time += 1000}, 
     top: 250
   msg = para left: 250, top: 300
   every do
     msg.text = fg("#{(v.position*100).to_i}% " + 
       "(#{v.time/1000}/#{v.length.to_i/1000}sec)", 
       darkcyan)
   end
 end
}}}

ビデオフォーマットに加えて、MP3、WAVとOgg Vorbisのような、いくつかの
オーディオフォーマットもサポートされています。

=== hide() » self ===

ビデオを非表示します。既に再生しているなら、ビデオは再生を続けます。
これはビデオの表示をオフにするだけです。このメソッドの有力な使い方の１つは、
MP3のようなオーディオファイルを再生するときに、ビデオの範囲を破壊することです。

'''注意:''' 今のところGreen Shoesでは`hide`メソッドをサポートしていません。

=== length() » a number ===

ミリ秒でのビデオ全体の長さです。ビデオがまだロードされていない場合はnilを返します。

=== move(left, top) » self ===

（left, top）はビデオの左上の角であり、特定の座標にビデオを移動します。

'''注意:''' 今のところGreen Shoesでは`move`メソッドをサポートしていません。

=== pause() » self ===

ビデオが再生されていれば、一時停止します。

=== playing?() » true of false ===

ビデオを現在再生していれば、trueを返します。または、ビデオが一時停止されていたり
停止されている場合はfalseです。

=== play() » self ===

既に再生いなければ、ビデオの再生を開始します。既に再生いるのなら、ビデオは
始めから再度開始します。

=== position() » a decimal ===

（0.0）から（1.0）の間の10進数の（Floatの）数によるビデオの位置です。
例えば、0.5のFloatの値はビデオの中間の位置を示します。

=== position = a decimal ===

Floatの値を利用してビデオの位置を設定します。
25%の位置にビデオを移動するなら：`@video.position = 0.25`。

=== remove() » self ===

ビデオをスロットから取り除きます。なおビデオを停止します。

'''注意:''' 今のところGreen Shoesでは`remove`メソッドをサポートしていません。

=== show() » self ===

`hide()`メソッドによって非表示にされていたなら、ビデオを表示します。

'''注意:''' 今のところGreen Shoesでは`show`メソッドをサポートしていません。

=== stop() » self ===

ビデオが再生されていれば、停止します。

=== time() » a number ===

ビデオのミリ秒での時間の位置です。そのため、そのビデオが10秒の再生時間なら、
このメソッドは10000の数を返します

=== time = a number ===

ミリ秒の時間でビデオの位置を設定します。

=== toggle() » self ===

ビデオの可視性をトグルします。ビデオが表示されていれば、`hide`が呼ばれます。
そうでなければ、`show`が呼ばれます。

'''注意:''' 今のところGreen Shoesでは`toggle`メソッドをサポートしていません。

= AndSoForth =

その他の情報をこの場所で。 

== Sample Apps ==

楽しみましょう。

{SAMPLES}

== FAQ ==

お役立ち情報:

 * [[http://librelist.com/browser/shoes/ Shoes ML]] 気軽にメーリングリストへ参加下さい。
 * [[https://github.com/ashbb/green_shoes/ 最新のソースコード]] は GitHubにあります。
 * Green Shoes Gemは、[[http://rubygems.org/gems/green_shoes RubyGems.org]] にあります。


== vs.RedShoes ==

Green ShoesはRed Shoesに従っていますが、完全互換ではありません。

==== TextBlock ====

以下の2つのコードはRed Shoesでは同じ動作をします。

{{{
 Shoes.app do
   para 'hello ' * 20
 end
}}}

{{{
 Shoes.app do
   20.times{para 'hello '}
 end
}}}

でもGreen Shoesでは、`:width`オプションを明示的に付ける必要があります。

{{{
 Shoes.app do
   20.times{para 'hello ', width: 40}
 end
}}}

もし`:width`オプションを付けないと、Green Shoesは`parent.width`でそのテキストブロックを生成します。

詳細は、[[http://ashbb.github.com/green_shoes/Red_Shoes_and_Green_Shoes.html Red Shoes and Green Shoes]]を
参照下さい。

== gshoes ==

'''gshoes''' は、実行可能なgem コマンドです。いつくかのオプションを持っています。コンソールウィンドウを開いて `gshoes (options or app.rb or app.gsy)` と実行します。

=== -m, -men ===

英語マニュアルを表示します。

=== -mjp ===

日本語マニュアルを表示します。

=== -p ===

あなたのGreen Shoesアプリケーションを .gsy ファイルにします。GSYはGreen Shoes YAMLの略です。

=== -v ===

バージョンを表示します。

=== -h ===

ヘルプメッセージを表示します。