= 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://shoes.heroku.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'''では、'''.run'''で終わっているファイルをダウンロードします。このファイルをダブルクリックするとShoesが起動します。(シェルスクリプトのようにプロンプトからこのファイルを実行することもできます。実際には、これは小さなシェルスクリプトです。)

==== 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]]に戻るべきです。
または、ウェブ上の初心者のリーフレットである[[http://github.com/shoes/shoes/downloads 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]]ページを試してください。それは問題をさける手っ取り早い方法です。

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

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

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

== 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''で利用できます。

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

=== :items » an array ===

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

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

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

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

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

=== :kerning » a number ===

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

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

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

''arc, arrow, background, border, gradient, oval, rect, shape''で利用できます。

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

=== :right » a number ===

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

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

=== :rise » a number ===

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

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

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

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

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

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

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

Used for password fields, this setting keeps any characters typed in from becoming visible on the screen.  Instead, a replacement character (such as an asterisk) is show for each letter typed.

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

=== :size » a number ===

''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, 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" - 広い幅の文字

=== :strikecolor » a Shoes::Color ===

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

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

=== :strikethrough » a string ===

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

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

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

=== :stroke » a hex code, a Shoes::Color or a range of either ===

''arc, arrow, banner, border, caption, code, del, em, flow, image, ins, inscription, line, link, mask, oval, para, rect, shape, span, stack, star, strong, sub, sup, subtitle, tagline, title''で利用できます。

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

=== :strokewidth » a number ===

''arc, arrow, border, flow, image, line, mask, oval, rect, shape, star, stack''で利用できます。

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

=== :text » a string ===

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

edit_boxやedit_lineのコンテンツ、またはボタンコントロールに表示されるメッセージを設定します。

=== :top » a number ===

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

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

=== :undercolor » a Shoes::Color ===

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

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

=== :underline » a string ===

''banner, caption, code, del, em, ins, inscription, link, para, span, strong, sub, sup, 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" - 大文字が小さく変化することによって置き換えられた小文字のフォント。

=== :weight » a string ===

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

Set the boldness of the text.  Commonly, this style is set to one of the following strings:
テキストを太文字に設定します。一般的には、このスタイルは次の文字列の内の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%の幅は親のスロットを埋め尽くすことを意味します。

== Classes List ==

Shoesで紹介するすべてのクラスの完全な一覧です。この表はどのようにしてクラスがお互いに継承しているかに従ってレイアウトされています。サブクラスは親クラスの下に、1レベル右にインデントされています。

{INDEX}

== Colors List ==

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

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

{COLORS}

= Slots =

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

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

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

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

==== Stacks ====

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

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

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

==== Flows ====

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

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

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

最後に：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`メソッドはカラーオブジェクトです。どうやって色を混ぜるかはColorsセクションを見てください。

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

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

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

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

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

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

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

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

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

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

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

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

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

{{{
 #!ruby
 Shoes.app do
   fill "static/avatar.png"
   star 200, 200, 5
 end
}}}

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

=== nofill() » self ===

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

=== nostroke() » self ===

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

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

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

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

座標（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::Shape ===

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

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

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

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

座標（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::Shape ===

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

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

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

=== 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`を呼ぶことにより
続く、描かれる任意の形状を表現（記述）します

曲がったり弧を描いたりする長い線の形状をスケッチとして見ることができます。

{{{
 #!ruby
 Shoes.app do
   fill red(0.2)
   shape do
     move_to(90, 55)
     arc_to(50, 55, 50, 50, 0, PI/2)
     arc_to(50, 55, 60, 60, PI/2, PI)
     arc_to(50, 55, 70, 70, PI, TWO_PI-PI/2)
     arc_to(50, 55, 80, 80, TWO_PI-PI/2, TWO_PI)
   end
 end
}}}

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

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

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

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

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

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

{{{
 #!ruby
 Shoes.app do
   stroke red
   arrow 0, 100, 10
 end
}}}

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

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

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

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

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

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

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

== Element Creation ==

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

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

アプリケーションをそのままにして並列で実行するアニメーションタイマーを開始します。`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は背景をスタイルのようにあつかいます。それはすべての箱は一つの背景だけを持てることを意味します。Shoesは背景の要素を重ねることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

=== code(text) » Shoes::Code ===

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

=== del(text) » Shoes::Del ===

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

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

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

=== edit_box(text) » Shoes::EditBox ===

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

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

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

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

=== em(text) » Shoes::Em ===

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

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

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

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

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

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

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

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

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

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

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

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

=== ins(text) » Shoes::Ins ===

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

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

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

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

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

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

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

{{{
 #!ruby
 Shoes.app do
   stack :margin => 10 do
     para "Pick a card:"
     list_box :items => ["Jack", "Ace", "Joker"]
   end
 end
}}}

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

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

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

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

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

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

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

=== span(text) » Shoes::Span ===

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

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

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

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

=== strong(text) » Shoes::Strong ===

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

=== sub(text) » Shoes::Sub ===

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

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

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

=== sup(text) » Shoes::Sup ===

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

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

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

=== timer(seconds) { ... } » Shoes::Timer ===

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

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

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

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

タイトル（Title）テキストブロックを作成します。Shoesはこれらの要素を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}"
     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
     hover do
       s.clear { background blue }
     end
     leave do
       s.clear { background red }
     end
   end
 end
}}}

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

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

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

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

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

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

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

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

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

キー（またはキーの組み合わせ）がいつ押されても、そのブロックは呼ばれます。そのブロックはキーの性質を表す文字列である`key`を送ります。特別なキーやキーの組み合わせの場合は、文字列ではなくRubyのシンボルが送られます。

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

しかしながら、F1が押されたなら、 `:f1`のシンボルを受けとります。`Shift-F1`なら、そのシンボルは`:shift_f1`です。

`control`、`shift`そして`alt`は修飾キーです。それらは以下の順番で現れます。`Shift-Control-Alt-PgUp`が押されたなら、そのシンボルは`:control_shift_alt_page_up`になります。

シフトキーについて１つ。多くのキーでシフトキーを見ないでしょう。USキーボードでは、`Shift-7`はアンパサンド（&）です。そのため、`:shift_5`ではなく`"&"`を得ます。そして、そのようなキーボードで`Shift-Alt-7`を押したら、`:alt_&`のシンボルを得ます。いくつか下のパラグラフで特別なキーのシフト修飾子の一覧が見えます。

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

Shoesがそれ自身のいくつかのホットキーを利用することを覚えておいてください。Alt-ピリオド（`:alt_.`）、Alt-クエッション（`:alt_?`）そしてAlt-スラッシュ(`:alt_/`)はShoesの予約語です。

以下はスペシャルキーの一覧です: `:escape`、`:delete`、　
`:backspace`、`:tab`、`:page_up`、`:page_down`、`:home`、`:end`、`:left`、`:up`、　
`:right`、`:down`、`:f1`、`:f2`、`:f3`、`:f4`、`:f5`、`:f6`、`:f7`、`:f8`、`:f9`、　
`:f10`、`:f11`そして`:f12`。

それらすべてのルールに関する一つの警告：通常はリターンキーは`"\n"`を与えます。しかしながら、修飾キーが押されたときには、最後には`:control_enter`、`:control_alt_enter`、`:shift_alt_enter`になります。

=== 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`としてブロックに渡されます。

== 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) { para "Now that's precision." }
 end
}}}

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

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

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

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

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

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

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

{{{
 #!ruby
 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 ===

The left pixel location of the slot.  Also known as the x-axis coordinate.
スロットの位置の左のピクセルです。x-axis座標でも知ることができます。

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

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

=== remove() » self ===

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

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

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

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

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

=== 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`を返します。

=== scroll_top = a number ===

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

=== show() » self ===

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

=== style() » styles ===

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

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

{{{
 #!ruby
 Shoes.app do
   @s = stack :width => "100%"
   para @s.style[:width]
 end
}}}

この例では、このスタックの下のパラグラフは"100%"の文字列を表示します。

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

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

= Elements =

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

Shoesは7つのネイティブコントロールを持ちます：ボタン（Button）、エディットライン（EditLine）、エディットボックス（EditBox）、リストボックス（ListBox）、プログレスメータ（Progress meter）、チェックボックス（Check box）、ラジオ（Radio）。私たちの言う"native"コントロールとは、それらの7つの要素がオペレーティングシステムによって描画されることを意味します。そのため、プログレスバーのWindowsでの見え方とOS Xでの見え方は違います。

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

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

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

== Common Methods ==

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, :stroke => 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
 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`メソッドを利用するなら、通常の座標を得るだけです。それは置き換えが行われていないかのようです。置き換えは即座のアニメーションだけを目的とします。

=== 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
   flow :margin => 12 do
     # Set up three buttons
     button "One"
     @two = button "Two"
     button "Three"

     # Bounce the second button
     animate do |i|
       @two.move(40, 40 + (Math.sin(i) * 6).to_i)
     end
   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 => 1.0, :height => 1.0

   # 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ピクセルの幅のスタック内に100%の幅の要素を作成したなら、`120`が返されます。しかしながら、`style[:width]`を呼んだなら、`"100%"`を得ます。

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

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

要素の幅を取るには、設定を空にするために`@b.style(:width => nil)`とします

== 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, :right => 50
 end
}}}

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

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

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

== Border ==

枠線はスロットの周囲の線に塗られた、色やグラデーションや画像です。次のセクションの背景の要素では、枠線（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 "=^.^=", :stroke => green
   end
 end
}}}

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

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

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

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

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

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

== Button ==

ボタン（Button）は、ご存知のとおり、押しボタンです。それらをクリックしたら何かを行います。ボタンは"OK"または"Are you sure?"などを表示します。そして、よければボタンをクリックします。

{{{
 #!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`メソッドを通して、ブロックを後で取り付けています。

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

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

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

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

=== focus() » self ===

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

== Check ==

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

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

{{{
 #!ruby
 Shoes.app do
   stack do
     flow { check; para "Frances Johnson" }
     flow { check; para "Ignatius J. Reilly" }
     flow { check; para "Winston Niles Rumfoord" }
   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 }
       [@c, name]
     end

     button "What's been checked?" do
       selected = @list.map { |c, name| name 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 = e.text.size
   end
   @counter = strong("0")
   para @counter, " characters"
 end
}}}

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

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

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

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

=== focus() » self ===

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

=== text() » self ===

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

=== text = a string ===

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

== EditLine ==

エディットライン（Edit line）は細長い、小さなテキストを入力する箱です。エディットボックスはマルチラインですが、エディットラインは１行です。これはエディットラインです。ちなみに水平です。

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

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

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

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

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

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

=== focus() » self ===

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

=== text() » self ===

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

=== text = a string ===

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

== Image ==

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

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

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

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

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

{{{
 #!ruby
 Shoes.app do
   image "http://hacketyhack.heroku.com/images/logo.png"
 end
}}}

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

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からロードして、画像を他のものに入れ替えます。

== 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ピクセルの幅ですが、長くするために（すべてのShoesの要素のように）`:width`スタイルは利用できません。

{{{
 Shoes.app do
   stack :margin => 0.1 do
     title "Progress example"
     @p = progress :width => 1.0

     animate do |i|
       @p.fraction = (i % 100) / 100.0
     end
   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"
   radio; para strong("Kin-Dza-Dza"), " by Georgi Danelia\n"
   radio; para strong("Children of Heaven"), " by Majid Majidi\n"
 end
}}}

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

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

{{{
 #!ruby
 Shoes.app do
   stack do
     para "Among these films, which do you prefer?"
     flow { radio; para "The Taste of Tea by Katsuhito Ishii" }
     flow { radio; para "Kin-Dza-Dza by Georgi Danelia" }
     flow { radio; para "Children of Heaven by Majid Majidi" }
   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"
     end
     flow do
       radio :films
       para "Kin-Dza-Dza by Georgi Danelia"
     end
     flow do
       radio :films
       para "Children of Heaven by Majid Majidi"
     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  ===

ブロック内部の整形された文字列すべてのリストです。

=== replace(a string) ===

ブロック全体のテキストを`a string`の文字で置き換えます。

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

テキストボックスのすべての文字の文字列を返します。画面に表示されるかのように、すべてのスタイルまたはテキストクラスが取り除かれて実際の文字だけを返します。

=== text = a string ===

ブロック全体のテキストを`a string`の文字で置き換えます。

=== to_s() » a string ===

[[TextBlock.text]]のエイリアスです。テキストブロックのすべてのコンテンツをフラットにした文字列を返します。

== Timers ==

Shoesは3つのタイマー（timer）クラスを持っています：アニメーション（Animation）クラス、Everyクラスそしてタイマー（Timer）クラスです。アニメーションとEveryの両方は開始してから何度も何度も繰り替えします。タイマーは１度だけ実行されます。１回限りのタイマーです。

アニメーションとEveryは基本的には同じものです。違いはアニメーションは普通は１秒間にとてもたくさん実行されます。そしてEveryは数秒間ごとに実行されるか、まれにしか実行されません。

=== start() » self ===

どちらのタイプのタイマーもそれ自身で自動的に開始されるため、通常はこれは利用する必要がありません。しかし、[[Timers.stop]]でタイマーを止めて再開したい場合は、もちろん：これを利用してください！

=== stop() » self ===

アニメーションまたはタイマーを中断します。１回限りのタイマーの場合はこれは既に実行されており、既に停止しているのでこのメソッドの効果はありません。

=== toggle() » self ===

アニメーションまたはタイマーが停止されていれば、開始します。既に実行されていれば、停止します。

== Video ==

Shoesは埋め込みのQuickTime、Flashビデオ（FLV）、DivX、Xvidそして様々な他の人気のあるビデオフォーマットをサポートしています。これはすべて２つの驚くべきオープンソースライブラリである、VideoLANとffmpegのおかげです。Shoes::Videoオブジェクトをセットアップするためにスロット上で`video`メソッドを利用してください。!{:margin_left => 100}man-ele-video.png!

ビデオフォーマットに加えて、MP3、WAVとOgg Vorbisのような、いくつかのオーディオフォーマットもサポートされています。

ビデオサポートはShoesではオプションであり、いくつかのビルドではビデオをサポートしていません。例えば、PowerPCではビデオサポートは利用できません。Shoesをダウンロードしたときに、ビデオサポートが利用できないならプラットフォーム用のビルドのファイル名に`novideo`と記されています

=== hide() » self ===

ビデオを非表示します。既に再生しているなら、ビデオは再生を続けます。これはビデオの表示をオフにするだけです。このメソッドの有力な使い方の１つは、MP3のようなオーディオファイルを再生するときに、ビデオの範囲を破壊することです。

=== length() » a number ===

ミリ秒でのビデオ全体の長さです。ビデオがまだロードされていない場合はnilを返します。

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

（left, top）はビデオの左上の角であり、特定の座標にビデオを移動します。

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

ビデオをスロットから取り除きます。なおビデオを停止します。

=== show() » self ===

`hide()`メソッドによって非表示にされていたなら、ビデオを表示します。

=== stop() » self ===

ビデオが再生されていれば、停止します。

=== time() » a number ===

ビデオのミリ秒での時間の位置です。そのため、そのビデオが10秒の再生時間なら、このメソッドは10000の数を返します

=== time = a number ===

ミリ秒の時間でビデオの位置を設定します。

=== toggle() » self ===

ビデオの可視性をトグルします。ビデオが表示されていれば、`hide`が呼ばれます。そうでなければ、`show`が呼ばれます。

= AndSoForth =

その他の情報をこの場所で。 

== Sample Apps ==

楽しみましょう。

{SAMPLES}

== FAQ ==

お役立ち情報:

 * [[http://librelist.com/browser/shoes/ Shoes ML]] 気軽にメーリングリストへ参加下さい。
 * [[http://github.com/shoes/shoes/ 最新のソースコード]] は GitHubにあります。
 * [[http://wiki.github.com/shoes/shoes/recentbuilds/ 最新のビルド]] あなたのプラットフォームに合わせて選んで下さい。