diff options
Diffstat (limited to 'files/ja/archive/mozilla/xul/tutorial')
82 files changed, 12268 insertions, 0 deletions
diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_buttons/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_buttons/index.html new file mode 100644 index 0000000000..e07961f4fd --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_buttons/index.html @@ -0,0 +1,68 @@ +--- +title: ボタンを追加する +slug: Archive/Mozilla/XUL/Tutorial/Adding_Buttons +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_a_Window" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Labels_and_Images">次のページ »</a></p> +</div> +<p>このセクションでは、ウィンドウに簡単なボタンを追加する方法を見て行きます。</p> +<p><span id="Adding_Buttons_to_a_Window"></span></p> +<h3 id=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AB.E3.83.9C.E3.82.BF.E3.83.B3.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AB.E3.83.9C.E3.82.BF.E3.83.B3.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">ウィンドウにボタンを追加する</h3> +<p>前回作成したウィンドウは、まだ中に何も置かれてないため、あまり面白いものではありませんでした。 このセクションでは、Find (検索) ボタンと Cancel (取消) ボタンの 2 つのボタンを追加します。 また、ウィンドウの中でこれらの配置を決める簡単な方法についても学びます。</p> +<p>HTML と同様、XUL には、ユーザーインターフェイスの要素を作成するためのタグがたくさんあります。 最も基本的なものは、 <code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> タグです。 この要素は、単純なボタンを作成するために使用します。</p> +<p>button 要素には、2 つの主要なプロパティ、<code>label</code> と <code>image</code> があります。 通常、ボタンには、この 2 つのうちのどちらか、あるいは両方が必要になります。 したがって、ボタンには、「ラベルだけ」、「画像だけ」、あるいは「ラベルと画像の両方」を設定することが可能です。 ボタンは、ダイアログの「OK」および「Cancel」ボタンとして普段から使用されています。</p> +<p><span id="Syntax_of_buttons"></span></p> +<h4 id=".E3.83.9C.E3.82.BF.E3.83.B3.E8.A6.81.E7.B4.A0.E3.81.AE.E6.A7.8B.E6.96.87" name=".E3.83.9C.E3.82.BF.E3.83.B3.E8.A6.81.E7.B4.A0.E3.81.AE.E6.A7.8B.E6.96.87">ボタン要素の構文</h4> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> タグの<span style="border-bottom: 1px dashed green;" title="syntax">構文</span>を以下に示します。</p> +<pre><button + id="identifier" + class="dialog" + label="OK" + image="images/image.jpg" + disabled="true" + accesskey="t"/> +</pre> +<p>ボタンの属性には以下のようなものがあり、全てオプションです。</p> +<dl><dt> <code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt><dd> ボタンを識別するための一意な識別子。この属性は、全ての要素に存在します。id は、ボタンをスタイルシートやスクリプトから参照する必要があるときに使用します。この属性は、必要ない場合でも、出来るだけ全ての要素に対して設定しておいた方が良いと思います。なお、このチュートリアルで示す例の中では、単純化のために設定していない場合もあります。 </dd><dt> <code id="a-class"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt><dd> ボタンのスタイルクラス。動作は HTML と同様です。ボタンが表示される外見のスタイルを指定するために使用します。この場合は、<code>dialog</code> という値が使用されています。ほとんどの場合、ボタンに対して class を使用する事はないと思います。 </dd><dt> <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt><dd> OK や Cancel といった、ボタンに表示されるラベル。この属性が指定されていない場合、何のテキストも表示されません。 </dd><dt> <code id="a-image"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code> </dt><dd> ボタンに表示される画像の URL。この属性が指定されていない場合、画像は表示されません。画像は、スタイルシート中で <a href="/ja/docs/Web/CSS/list-style-image" title="CSS の list-style-image プロパティは、リスト項目のマーカーとして使われる画像を設定します。"><code>list-style-image</code></a> プロパティを使用することによっても、指定することができます。 </dd><dt> <code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt><dd> この属性が <code>true</code> に設定された場合、そのボタンは無効になります。無効状態では、ボタンのテキストは通常灰色で表示されます。もしボタンが無効のときは、そのボタンの機能は実行出来ません。この属性が設定されない場合、ボタンは有効になります。ボタンの有効・無効の切り替えは、<a href="/ja/JavaScript" title="ja/JavaScript">JavaScript</a> で変更することができます。 </dd><dt> <code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt><dd> この属性は、ショートカットキーとして使用する文字で、可能な限り設定するようにします。この文字は、ラベルのテキストに含まれている文字であるべきで、通例、下線付きで表示されます。<span style="color: darkgreen; background: #ef9;">【訳注: ラベルが日本語の場合は、「開く (O) 」のようにショートカットキーは括弧で囲って付加しておきます】</span> 利用者が ALT キー (または、そのプラットフォームの同様のキー) を押しながらアクセスキーを押した場合、ボタンはそのウィンドウならどこからでもフォーカスを得ることが出来るはずです。 </dd></dl> +<p>ボタンは、上に挙げたものよりも、さらに多くの属性をサポートしていることを補足しておきます。 他の属性については、<a href="/ja/XUL_Tutorial/More_Button_Features" title="ja/XUL_Tutorial/More_Button_Features">後で触れる予定</a>です。 以下にボタンの例をいくつか示します。</p> +<p><span id="Some_examples_of_buttons"></span></p> +<h4 id=".E3.83.9C.E3.82.BF.E3.83.B3.E3.81.AE.E4.BE.8B" name=".E3.83.9C.E3.82.BF.E3.83.B3.E3.81.AE.E4.BE.8B">ボタンの例</h4> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_buttons_1.xul">表示</a></p> +<div class="float-right"><img alt="画像:buttons1.png" class="internal" src="/@api/deki/files/1870/=Buttons1.png"></div> +<pre><button label="Normal"/> +<button label="Disabled" disabled="true"/> +</pre> +<p>上の例を表示させると、画像で示すようなボタンが作成されるはずです。 最初のボタンは Normal (通常) のボタンです。 二番目のボタンは Disabled (無効) になっているので、灰色表示 (グレイアウト) されています。</p> +<p>ファイル検索ユーティリティのために簡単な Find (検索) ボタンを作成に取りかかることにします。 以下のサンプルコードはその方法を示しています。</p> +<pre><button id="find-button" label="Find"/> +</pre> +<div class="note">Firefox を利用している場合、ウェブページからは chrome ウィンドウを開くことができないため、このチュートリアルにある 「表示」リンクは通常のブラウザウィンドウで開かれることになります。このため、ボタンはウィンドウ幅いっぱいに引き延ばされて表示されてしまいます。これを防ぐには window タグに align="start" を与えます。</div> +<div class="highlight"> +<p><span id="The_findfile.xul_example"></span></p> +<h5 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ファイル検索ダイアログの例</h5> +<p>それでは、前のセクションで作成した findfile.xul ファイルに、上記のコードを追加してみましょう。コードは <code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> タグの間に挿入する必要があります。追加するコードを、以下に赤字で示します：</p> +<pre class="eval"><?xml version="1.0"?> +<?xml-stylesheet href="<a class=" external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<window id="findfile-window" + title="Find Files" + orient="horizontal" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + + <span style="color: rgb(255, 0, 0);"><span class="highlightred"><button id="find-button" label="Find"/><br></span> <span class="highlightred"> <button id="cancel-button" label="Cancel"/></span></span> +</window> +</pre> +<div class="float-right"><img alt="画像:buttons2.png" class="internal" src="/@api/deki/files/1872/=Buttons2.png"></div> +<p>Find だけでなく、Cancel ボタンも追加されていることを注記しておきます。 水平配置 (<code>orient="horizontal"</code>) がウィンドウに与えられているため、二つのボタンは横に並んで表示されます。 この XUL ファイルを Mozilla で開くと、右の画像で示すようなウィンドウが表示されるはずです。</p> +</div> +<div class="note">テキストのラベルは直接 XUL ファイルに書き込むべきではない、という事を覚えておいてください。 <a href="/ja/XUL_Tutorial/Localization" title="ja/XUL_Tutorial/Localization">テキストのローカライズ</a>をやりやすくするために、実体 (<span style="color: green;">entity</span>) を使用するべきです。</div> +<p>次のセクションでは、XUL ウィンドウにラベルと画像を追加する方法について調べます。</p> +<p><small><span id="%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8"><a id="%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8"></a><strong>関連ページ</strong></span> : <a href="/ja/XUL_Tutorial/More_Button_Features" title="ja/XUL_Tutorial/More_Button_Features">その他のボタン機能</a></small></p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_a_Window" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Labels_and_Images">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_event_handlers/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_event_handlers/index.html new file mode 100644 index 0000000000..f1b0c0f3ba --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_event_handlers/index.html @@ -0,0 +1,138 @@ +--- +title: イベントハンドラの追加 +slug: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers +--- +<p> </p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Scrolling_Menus" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Event_Handlers">次のページ »</a></p> +</div> + +<p>ここまでの作業で、ファイル検索ダイアログの外観は、かなり良くなりました。 まだ仕上がっていない箇所も多いですが、シンプルなユーザインターフェイスを簡単に作ることができています。 次は、そこにスクリプトを付け加えていく方法を見ていくことにします。</p> + +<h3 id=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.AE.E4.BD.BF.E7.94.A8" name=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.AE.E4.BD.BF.E7.94.A8">スクリプトの使用</h3> + +<p>ファイル検索ダイアログが機能するようにするためには、利用者がダイアログを操作したときに実行されるスクリプトを追加する必要があります。 つまり、Find ボタン、Cancel ボタン、それに各メニューの操作を扱うために、スクリプトの追加を必要としています。 このために、<a href="ja/JavaScript">JavaScript</a> の関数を、<a href="ja/HTML">HTML</a> に対して使用するのと、ほとんど同じように使って書くことができます。</p> + +<p>XUL ファイルにスクリプトを含めるためには <code><code><a href="/ja/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code> 要素を使用することができます。 スクリプトコードを <code><code><a href="/ja/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code> タグの、開始と終了タグの間に置くことで、XUL ファイル上に直接埋め込むこともできますが、 XUL ウィンドウの読み込みが少し速くなるため、別ファイルにスクリプトコードを置いて読み込むようにする方がお勧めです。 この場合、<code><code id="a-src"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 属性が外部スクリプトファイルにリンクするのに用いられます。</p> + +<div class="highlight"> +<p>Our find files example</p> + +<h5 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.82.92.E8.BF.BD.E5.8A.A0" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.82.92.E8.BF.BD.E5.8A.A0">ファイル検索ダイアログにスクリプトを追加</h5> + +<p>それでは、ファイル検索ダイアログにスクリプトを追加してみましょう。 スクリプトファイルはどのような名前でも問題はありませんが、通常は XUL ファイルと同じにして、拡張子を .js にします。 したがって、この例の場合は findfile.js を使用します。 以下の行を <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> の開始タグの直後で、全ての要素の前に追加してください。</p> + +<pre class="eval"><span class="highlightred"><script src="findfile.js"/></span> +</pre> + +<p>実際にスクリプトファイルを作るのは、そこに書く内容を学んだ後にします。 そのファイルには、いくつかの関数を定義し、イベントハンドラからそれらを呼び出すことになります。</p> +</div> + +<p>1 つ 1 つが別のスクリプトファイルを指している、複数の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code> タグを使用することで、 1 つの XUL ファイルに複数のスクリプトを読み込むことができます。 ファイルの指定は、相対 URL でも、絶対 URL でもかまいません。 例えば、次のような形式の URL を使うこと可能です。</p> + +<pre class="eval"><script src="findfile.js"/> +<script src="<a class="external" rel="freelink">chrome://findfiles/content/help.js</a>"/> +<script src="<span class="nowiki">http://www.example.com/js/items.js</span>"/> +</pre> + +<p>なお、JavaScript 自体の使い方についての説明は、 かなり大きなトピックになってしまうのと、<a href="ja/JavaScript">他に役立つリソース</a>がたくさんあるため、 このチュートリアルでは行いません。</p> + +<div class="note">デフォルトでは、JavaScript コンソールには Web コンテンツで発生したエラーしか表示されません。 chrome の JavaScript で発生したエラーを表示させるためには、<code>javascript.options.showInConsole</code> <span style="border-bottom: 1px dashed green;" title="preference">設定</span>を true に変更する必要があります。 また、さらにデバッグを簡単にするためには <code>javascript.options.strict</code> を変更するのも有効です。 この値を true に設定すると、非標準の方法を使用した場合や、記述の不足、ロジックエラーによると思われる事象が検出されたときに、JavaScript コンソールに出力されるようになります。</div> + +<h3 id=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.81.B8.E3.81.AE.E5.BF.9C.E7.AD.94" name=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.81.B8.E3.81.AE.E5.BF.9C.E7.AD.94">イベントへの応答</h3> + +<p>スクリプトには、利用者や他の要因から発生する種々のイベントに対して応答するコードが含まれます。 イベントは、およそ 30 ほどあり、いくつか異なる方法で扱うことができます。 典型的なイベントは、ユーザがマウスのボタンやキーを押すことで発生します。 個々の XUL 要素は、いくつかの異なる状況に応じたイベントを送出することができます。 また、いくつかのイベントは、特定の要素からのみ送出されます。</p> + +<p>イベントには、個別に名前が付けられています。 例えば「mousemove」は、利用者がマウスを UI 要素上で動かしたときに送出されるイベントの名前です。 XUL は、<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events</a> で定義されているのと同じイベント機構を採用しています。 「利用者がマウスを移動させる」といった、イベントを送出する契機となる動作がされたとき、そのイベントタイプに対応したイベントオブジェクトが作成されます。 イベントオブジェクトには、マウスの位置や、押されたキーといった、様々なプロパティが設定されます。</p> + +<p>イベントは、フェーズごとに XUL に送信されます。</p> + +<ul> + <li>捕捉フェーズでは、イベントは、まずウィンドウに送信され、次に文書オブジェクトといった具合に、オブジェクトの親子関係を先祖側から順にたぐって、イベントが起きた XUL 要素に至るまでの各要素にイベントが送信されていきます。</li> + <li>対象フェーズでは、そのイベントが対象の XUL 要素に送信されます。</li> + <li>浮上}フェーズでは、イベントは、オブジェクトの親子関係を、親側に浮上していき、再びウィンドウに達するまでの各要素に順に送信されていきます。</li> +</ul> + +<p>捕捉フェーズと浮上フェーズの両方で、イベントに応答することが可能です。 また、イベントの伝播が終了した後に、任意のデフォルト動作 (要素に組み込まれている挙動) が起動します。</p> + +<p>例えば、マウスをボックス内にあるボタン上で移動させた場合、「mousemove」イベントが生成されて、最初にウィンドウへ送信され、その後、文書、ボックスの順に送信されます。 これで捕捉フェーズが終了です。 次に、「mousemove」イベントはボタンへ送信されます。 最後に、浮上フェーズに入って、イベントは、ボックス、文書、ウィンドウの順で送信されます。 浮上フェーズは、本質的に捕捉フェーズの逆になります。 なお、いくつかのイベントでは、浮上フェーズが行われないことを補足しておきます。</p> + +<p>イベント伝播の各ステップでイベントを捉えるために、各要素にリスナーを結びつけることができます。 一つのイベントが、親子関係にある全ての要素に渡っていく仕組みのため、リスナーを結びつけるのは、ある特定の要素でも、より高い階層に位置する要素でもかまいません。 当然ですが、イベントを高位の要素で捉えるように結びつけた場合は、その要素が内包する全ての要素からの通知を受信することになり、イベントをボタンで捉えるように結びつけた場合は、そのボタンに関連するイベントのみを受信することになります。 この仕様は、同じコード、あるいは類似のコードを使って処理したい要素が複数ある場合に、有効に利用できます。</p> + +<p>最もよく使用されるイベントは「command」イベントです。 command イベントは、利用者によって要素を活性化が行われたとき、 具体的には、ボタンの押下、チェックボックスの変更、メニューからの項目選択などが行われた場合に送出されます。 command イベントは、複数の異なる方法による要素の活性化を自動的に処理するため、利用しやすいイベントです。 マウスを使ってボタンをクリックしたのか、Enter キーを押したのかに関係なく、command イベントは送出されます。</p> + +<p>イベントリスナーを要素に結びつける方法は 2 つあります。 1 つめは、属性を使用して、その属性値としてスクリプトを指定する方法です。 2 つめは、要素の <code><a href="ja/DOM/element.addEventListener">addEventListener</a></code> メソッドを呼び出して設定する方法です。 前者は、浮上中のイベントしか処理できませんが、記述が簡単になりやすい傾向があります。 後者を使うと、どちらのフェーズのイベントでも処理でき、 1 つの要素に同じイベントに対応する複数のリスナーを結びつけることが可能になります。 といっても、通常は、ほとんどのイベントで、属性形式の方がよく使われています。</p> + +<h3 id=".E5.B1.9E.E6.80.A7.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.AA.E3.82.B9.E3.83.8A.E3.83.BC" name=".E5.B1.9E.E6.80.A7.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.AA.E3.82.B9.E3.83.8A.E3.83.BC">属性イベントリスナー</h3> + +<p>属性形式を使うには、イベントリスナーを付けたい要素に、イベント名の前に「on」という語を付けた名前の属性を置きます。 例えば、「command」イベントに対応する属性は、「oncommand」になります。 この属性の値には、イベントが発生したときに実行するスクリプトを設定する必要があります。 通常、このコードは短く、分離されたスクリプトの方で定義された関数を呼び出すだけです。 ボタンが押されたときの応答の例を示します。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_1.xul">表示</a></p> + +<pre class="eval"><button label="OK" oncommand="alert('Button was pressed!');"/> +</pre> + +<p>発生した command イベントは浮上していくので、その要素を囲んでいる要素にイベントリスナーを置くことも可能です。 下の例では、リスナーはボックスに置かれており、両方の要素のイベントを受け取ります。</p> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_2.xul">表示</a></p> + +<pre class="eval"><vbox oncommand="alert(event.target.tagName);"> + <button label="OK"/> + <checkbox label="Show images"/> +</vbox> +</pre> + +<p>この例では、command イベントが、button 要素や checkbox 要素から vbox 要素まで浮上して、そこで処理されます。 2 つめのリスナー (<code>oncommand</code> 属性) が button 要素に付けられた場合は、まず最初にそのコードが呼ばれ、次に vbox 要素のハンドラが呼ばれます。 イベントハンドラには、イベントオブジェクトが、「event」という名前の暗黙の引数として渡されます。 このオブジェクトは、イベントに関する固有の情報を得るために用いられます。 よく使われるプロパティの 1 つは、event の「target」プロパティで、イベントが実際に発生した要素を保持しています。 上の例では、target のタグ名を示すアラートを表示します。 この target プロパティは、浮上イベントを処理するときに役に立ちます。 例えば、ボタンの集合があって、全てを 1 つのスクリプトで扱うといった場合です。</p> + +<p>属性の構文が、HTML 文書のイベントに使われているものと似ていることに気づいていると思います。 実際、HTML と XUL は同じイベントメカニズムを共有しています。 一つ重要な違いは、ボタンへの応答として、HTML では「click」イベント (<code>onclick</code> 属性) が使われていますが、XUL では代わりに command イベントを使うべきであるということです。 XUL にも click イベントはありますが、 これはマウスのクリックに応答するだけで、キーボードを使用した場合には応答しません。 このため、XUL では マウスでのみ処理可能な要素を持つ理由がない限り、click イベントの使用は避けるべきです。 付け加えれば、command イベントは、要素が無効状態の場合は送信されませんが、click イベントは、無効かどうかにかかわらず送信されます。</p> + +<div class="highlight"> +<p>Our find files example</p> + +<h5 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9.E3.82.92.E8.BF.BD.E5.8A.A0" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9.E3.82.92.E8.BF.BD.E5.8A.A0">ファイル検索ダイアログにハンドラを追加</h5> + +<p>それでは、command ハンドラを、ファイル検索ダイアログの Find と Cancel ボタンに置いてみましょう。 Find ボタンを押すと検索が開始されるべきですが、この部分は実装しない予定ですので省略します。 しかし、Cancel ボタンは、押されたときにウィンドウを閉じるように動作するべきでしょう。 下のコードは、その方法を示しています。 また同様に、メニュー項目の Close にも同じコードを加えてみましょう。</p> + +<pre class="eval"><menuitem label="Close" accesskey="c" <span class="highlightred">oncommand="window.close();"</span>/> +... + +<button id="cancel-button" label="Cancel" + <span class="highlightred">oncommand="window.close();</span>"/> +</pre> + +<p>ここで 2 つのハンドラが追加されています。 <code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> 属性が Close のメニュー項目に追加されました。 このハンドラを使用することで、利用者がメニュー項目をマウスでクリックした場合と、キーボードで選択した場合のどちらでもウィンドウを閉じることができます。 また、同様の <code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> ハンドラがキャンセルボタンにも追加されています。</p> +</div> + +<h3 id="DOM_.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.AA.E3.82.B9.E3.83.8A.E3.83.BC" name="DOM_.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.AA.E3.82.B9.E3.83.8A.E3.83.BC">DOM イベントリスナー</h3> + +<p>イベントハンドラを追加する 2 つめの方法は、要素の <code><a href="ja/DOM/element.addEventListener">addEventListener</a></code> メソッドを呼び出すことです。 これにより、イベントリスナーを動的に付けることができ、捕捉フェーズでイベントを捉えることが可能になります。 構文は以下のようになります。</p> + +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_events_3.xul">表示</a></p> + +<pre><button id="okbutton" label="OK"/> + +<script> +function buttonPressed(event){ + alert('Button was pressed!'); +} + +var button = document.getElementById("okbutton"); +button.addEventListener('command', buttonPressed, true); +</script> +</pre> + +<p><code><a href="ja/DOM/document.getElementById">getElementById()</a></code> 関数は、指定した id を持つ要素を返します。 この例の場合はボタンになります。 新規の捕捉イベントリスナーを追加するために、<code><a href="ja/DOM/element.addEventListener">addEventListener()</a></code> 関数を呼び出します。 最初の引数は、捉えるイベントの名前です。 2 つめの引数は、イベントが発生したときに呼び出されるイベントリスナー関数です。 最後の引数は、捕捉リスナーでは <code>true</code> でなければなりません。 最後の引数を <code>false</code> に設定することで、浮上フェーズで捉えるようにすることも可能です。 2 つめの引数で指定するイベントリスナー関数は、上の例の <code>buttonPressed</code> 関数の宣言で示したように、引数を 1 つ取って、そこにイベントオブジェクトが渡されます。</p> + +<div class="highlight"><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-events.xul">表示</a></div> + +<p>次のセクションでは、イベントオブジェクトをさらに詳細に見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Scrolling_Menus" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Event_Handlers">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_event_handlers_to_xbl-defined_elements/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_event_handlers_to_xbl-defined_elements/index.html new file mode 100644 index 0000000000..92ccdef372 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_event_handlers_to_xbl-defined_elements/index.html @@ -0,0 +1,151 @@ +--- +title: XBL で定義した要素へのイベントハンドラの追加 +slug: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements +tags: + - Tutorials + - XBL + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Methods_to_XBL-defined_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XBL_Inheritance">次のページ »</a></p> +</div> + +<p>続いては、XBL で定義された要素にイベントハンドラを追加する方法について見ていきます。</p> + +<h3 id=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9" name=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9">イベントハンドラ</h3> + +<p>通常の XUL の場合と同じように、XBL がバインドされた要素で発生したマウスクリックやキーの押し下げなどのイベントは、そのままコンテントの中にある個々の要素にも送られていきます。 XBL の場合には、イベントをトラップして処理するときにも専用の方法を用いる必要があると予測していたかもしれませんが、 前のセクションの最後の例で示したように、XBL のコンテントの中に置かれた要素には、必要に応じてイベントハンドラを追加することが可能です。 そのときの例では、いくつかのボタンに対して <code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> ハンドラの追加を行いました。</p> + +<h4 id="handler_.E8.A6.81.E7.B4.A0" name="handler_.E8.A6.81.E7.B4.A0">handler 要素</h4> + +<p>しかしながら、コンテント全体、つまり <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> タグの中で定義されたすべての要素を対象にしたイベントハンドラを追加したい場合もあると思います。 これは、<span style="border-bottom: 1px dashed green;" title="focus">フォーカス</span>イベントや<span style="border-bottom: 1px dashed green;" title="blur">ブラー</span>イベントをトラップするような場面で役に立つはずです。 このようなイベントハンドラは、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#handler">handler</a></code></code> 要素を使用して定義できます。 この要素には、単一のイベントハンドラと対応するアクションを記述していきます。 また、必要なら、複数のハンドラを使用することも可能です。 イベントが <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#handler">handler</a></code></code> の対象イベントのどれともマッチしない場合は、通常の場合と同じように、単に内側のコンテントに送られることになります。</p> + +<p>一般的なハンドラの構文は、以下のようになります。</p> + +<pre><binding id="binding-name"> + <handlers> + <handler event="event-name" action="script"/> + </handlers> +</binding> +</pre> + +<p>ハンドラはすべて、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#handlers">handlers</a></code></code> 要素の中に置きます。 個々の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#handler">handler</a></code></code> 要素では、<code>event</code> 属性で指定した特定のイベントを処理するためのアクションを定義します。 イベントには、<code>click</code> や <code>focus</code> といった、XUL と JavaScript でサポートしている種類のものであれば指定することが可能です。 なお、使用するイベント名の最初に「on」を付けないことに注意してください。</p> + +<p>このハンドラは、イベントが発生したときにカスタムプロパティを変更するために、よく利用されます。 例えば、カスタムチェックボックスを作成する場合には、 checked プロパティを、利用者がチェックボックスをクリックしたときに変更する必要があるかもしれません。</p> + +<pre><handlers> + <handler event="mouseup" action="this.checked=!this.checked"/> +</handlers> +</pre> + +<p>上記のチェックボックス上で、利用者がマウスボタンをクリックして放したとき、 <code>mouseup</code> イベントが送出されて、ここで定義したハンドラが呼び出されます。 その結果、<code>checked</code> プロパティの状態が反転します。 また、同様に要素がフォーカスを得たときにプロパティを変更したい場合もあると思います。 このとき、場合によっては特殊なスタイルプロパティ <a href="/ja/docs/Web/CSS/-moz-user-focus" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>-moz-user-focus</code></a> を利用して、 要素がフォーカス可能であるか否かを変更する必要があるかもしれません。 このプロパティによって、要素がフォーカス可能かどうかを制御することが可能です。 (参照: <a href="/ja/docs/XUL_Tutorial/Focus_and_Selection">フォーカスと選択</a>)</p> + +<h4 id=".E3.83.9E.E3.82.A6.E3.82.B9.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.82.92.E5.87.A6.E7.90.86.E3.81.99.E3.82.8B" name=".E3.83.9E.E3.82.A6.E3.82.B9.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.82.92.E5.87.A6.E7.90.86.E3.81.99.E3.82.8B">マウスイベントを処理する</h4> + +<p>マウスイベントの場合、<code>button</code> 属性を使用することで、 ハンドラに対して特定のボタンで起こったイベントだけをトラップするように指定することが可能です。 この属性がない場合には、ハンドラは、どのボタンが押された場合のイベントでも全てトラップすることになります。 <code>button</code> 属性に設定する値には、左マウスボタンを対象にする場合は「<code>0</code>」、中央マウスボタンの場合は「<code>1</code>」、右マウスボタンの場合は「<code>2</code>」を設定します。</p> + +<pre><handlers> + <handler event="click" button="0" action="alert('Left button pressed');"/> + <handler event="mouseup" button="1" action="alert('Middle button pressed')"/> + <handler event="click" button="2" action="alert('Right button pressed');"/> +</handlers> +</pre> + +<h4 id=".E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.82.92.E5.87.A6.E7.90.86.E3.81.99.E3.82.8B" name=".E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.82.92.E5.87.A6.E7.90.86.E3.81.99.E3.82.8B">キーイベントを処理する</h4> + +<p>また、キーイベントの場合は、マッチさせるキーを指定したり、特定の修飾キーが押されている場合だけマッチするように限定したりするために、 XUL の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素が持っている属性に類似した、いくつかの属性を使用することが可能です。 前の例を拡張して、スペースバーが押された場合に、チェックボックスの <code>checked</code> プロパティの変更を行うようにする例を以下に示します。</p> + +<pre><handlers> + <handler event="keypress" key=" " action="this.checked=!checked"/> +</handlers> +</pre> + +<p>また、文字で表すことのできないキーをチェックするために、<code>keycode</code> 属性を使用することも可能です。 なお、キーコードの指定値など、さらに詳細な情報については、<a href="/ja/docs/XUL_Tutorial/Keyboard_Shortcuts">キーボードショートカット</a>のセクションを参照してください。 また、修飾キーについては、<code>modifiers</code> 属性を追加することでチェックできます。 ここには、以下の値のいずれかを設定します。</p> + +<dl> + <dt>alt</dt> + <dd>利用者が、Alt キーを押す必要があります。</dd> +</dl> + +<dl> + <dt>control</dt> + <dd>利用者が、Control キーを押す必要があります。</dd> +</dl> + +<dl> + <dt>meta</dt> + <dd>利用者が、Meta キーを押す必要があります。</dd> +</dl> + +<dl> + <dt>shift</dt> + <dd>利用者が、Shift キーを押す必要があります。</dd> +</dl> + +<dl> + <dt>accel</dt> + <dd>利用者が、そのプラットフォームで通常キーボードショートカットを呼び出すために使われる修飾キーを押す必要があります。</dd> +</dl> + +<p>上記を設定すると、ハンドラはその修飾キーが押されていた場合のみ呼び出されます。 また、これらをスペースで区切って指定することで、複数の修飾キーが押されている場合のみに限定することも可能です。</p> + +<p>ハンドラで行うコードが複雑な場合、以下のような構文を代わりに使用することができます。</p> + +<pre><binding id="binding-name"> + <handlers> + <handler event="event-name"> + -- handler code goes here -- + </handler> + </handlers> +</binding> +</pre> + +<h3 id=".E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9.E3.81.AE.E4.BE.8B" name=".E3.83.8F.E3.83.B3.E3.83.89.E3.83.A9.E3.81.AE.E4.BE.8B">ハンドラの例</h3> + +<p>以下の例では、キーのハンドラをいくつか追加することで、単純なローカルのクリップボード機能を作成しています。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblevents_1.xml.txt">ソース</a></p> + +<pre><binding id="clipbox"> + <content> + <xul:textbox/> + </content> + <implementation> + <field name="clipboard"/> + </implementation> + <handlers> + <handler event="keypress" key="x" modifiers="control" + action="this.clipboard=document.getAnonymousNodes(this)[0].value; document.getAnonymousNodes(this)[0].value='';"/> + <handler event="keypress" key="c" modifiers="control" + action="this.clipboard=document.getAnonymousNodes(this)[0].value;"/> + <handler event="keypress" key="v" modifiers="control" + action="document.getAnonymousNodes(this)[0].value=this.clipboard ? this.clipboard : '';"/> + </handlers> +</binding> +</pre> + +<p>コンテントには、テキスト入力欄が 1 つだけあります。 また、クリップボードの内容を保存するために <code>clipboard</code> フィールドが追加されています。 このため、このクリップボードの操作対象は、この 1 つのテキストボックスのみに限られるということになります。 ただし、この要素を複数生成した場合には、個々のクリップボードは、それぞれでバッファを持つことになるので互いの操作が干渉することはありません。</p> + +<p>3 つのハンドラが、切り取り、コピー、貼り付けのために追加されています。 それぞれのハンドラには、呼び出すためのキーストロークが設定されています。 最初のハンドラは、切り取り操作で、Control キーと x キーが押された場合に呼び出されます。 <code>action</code> 属性に置かれたスクリプトでは、テキスト入力欄のテキストの切り取りと、<code>clipboard</code> フィールドへの保存を行います。 この例は、単純化するため、選択された部分のテキストを切り取るのではなく、単にテキスト全体の切り取りを行います。 このとき、このコードは以下のように動作します。</p> + +<ol> + <li> + <pre>this.clipboard=document.getAnonymousNodes(this)[0].value; +</pre> + 匿名コンテント配列の最初の要素、つまり、<code>content</code> 要素に置かれた最初 (唯一) の要素である <code>textbox</code> 要素への参照が取得されます。その <code>value</code> プロパティが取得されることで、テキスト入力欄のテキストが取得されます。続いて、この値を <code>clipboard</code> フィールドに代入します。これによって、テキスト入力欄のテキストが、この専用のクリップボードにコピーされることになります。</li> + <li> + <pre>document.getAnonymousNodes(this)[0].value='' +</pre> + 次に、<code>textbox</code> のテキストとして空の文字列を代入します。これは、テキスト入力欄の テキストをクリアする効果があります。</li> +</ol> + +<p>また、コピー操作も同様ですが、処理後、テキストをクリアしない点が異なります。 貼り付け操作は逆の処理、 つまりテキスト入力欄の値に、<code>clipboard</code> フィールドの値を代入する操作が行われます。 なお、実用レベルで、こうしたクリップボードのキーボードショートカットを実装する場合には、 本物のクリップボードインタフェースを利用するとともに、選択中のテキストのみが処理されるようにする必要があるはずです。</p> + +<p>次のセクションでは、既存の XBL 定義を拡張する方法について見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Methods_to_XBL-defined_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XBL_Inheritance">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_html_elements/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_html_elements/index.html new file mode 100644 index 0000000000..a280fab660 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_html_elements/index.html @@ -0,0 +1,163 @@ +--- +title: HTML 要素を追加する +slug: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Progress_Meters" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Using_Spacers">次のページ »</a></p> +</div> + +<p>ボタンの追加もできたので、それ以外の要素もいくつか追加してみましょう。</p> + +<p><span id="Adding_HTML_Elements_to_a_Window"></span></p> + +<h2 id=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AB_HTML_.E8.A6.81.E7.B4.A0.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AB_HTML_.E8.A6.81.E7.B4.A0.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">ウィンドウに HTML 要素を追加する</h2> + +<p>XUL ファイルに、有効な XUL 要素が全て置けるのは当然ですが、 XUL ファイルには、加えて HTML 要素を直接追加する事も可能です。 実際、XUL ファイルでは、任意の HTML 要素が使用できます。 このことは Java アプレットや表といったものですら、ウィンドウ内に配置可能であることを意味しています。 しかしながら、XUL ファイルで HTML 要素を使用するのは可能な限り避けるべきです。 (その理由はいくつかありますが、主な理由は、後のセクションで説明する、<a href="ja/XUL_Tutorial/Box_Model_Details">レイアウトの制御</a>に関係しています)。 といっても、このセクションでは、とりあえず HTML 要素の使用方法について説明していくことにします。 XML は大文字・小文字を区別するため、HTML 要素でもタグと属性は小文字で入力しなければならないことを覚えておいてください。</p> + +<p><span id="XHTML_namespace"></span></p> + +<h3 id="XHTML_.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93" name="XHTML_.E5.90.8D.E5.89.8D.E7.A9.BA.E9.96.93">XHTML 名前空間</h3> + +<p>XUL ファイルで HTML 要素を使用するには、XHTML <span style="border-bottom: 1px dashed green;" title="namespace">名前空間</span>を使用するために宣言を行なわなければなりません。 宣言により、Mozilla は、HTML タグを XUL タグから区別することができます。 このためには、次に示す属性を、XUL ファイルの <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> タグか、最初に出てくる HTML 要素に追加する必要があります。</p> + +<pre class="eval"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span> +</pre> + +<p>これは HTML の宣言で、以前のセクションで説明した XUL の宣言と似ています。 この宣言は正確に上記の通り入力しなければなりません。誤っていると正常に動作しないので注意してください。 Mozilla はこの URL を実際にはダウンロードしませんが、HTML の宣言を指しているものとして認識しています。</p> + +<p>ファイル検索ウィンドウに追加する場合の例を示します。</p> + +<pre class="eval"><?xml version="1.0"?> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<window + id="findfile-window" + title="Find Files" + orient="horizontal" + <span class="highlightred"><span class="nowiki">xmlns:html="http://www.w3.org/1999/xhtml"</span></span> + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> +</pre> + +<p>これで、いつものように HTML タグを使用する事ができますが、以下のことは覚えておいて下さい。</p> + +<ul> + <li>上記のように HTML 名前空間を宣言した場合は、各々のタグの始めに <code>html:</code> という接頭辞を付けなければなりません。</li> + <li>タグは小文字でなければなりません。</li> + <li>全ての属性値は引用符で囲まれなければなりません。</li> + <li>XML では、内容を持たないタグの終わりには、スラッシュを置く必要があります。 これは後で示す例で明確になるはずです。</li> +</ul> + +<p><span id="Using_HTML_elements"></span></p> + +<h3 id="HTML_.E8.A6.81.E7.B4.A0.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B" name="HTML_.E8.A6.81.E7.B4.A0.E3.82.92.E5.88.A9.E7.94.A8.E3.81.99.E3.82.8B">HTML 要素を利用する</h3> + +<p>どんな HTML タグでも使用可能とはいっても、<code>head</code> や <code>body</code> は実際には役に立ちません。 HTML 要素を使用する具体的な例を以下に示します。</p> + +<pre><html:img src="banner.jpg"/> + +<html:input type="checkbox" value="true"/> + +<html:table> + <html:tr> + <html:td> + A simple table + </html:td> + </html:tr> +</html:table> +</pre> + +<p>この例では、<code>banner.jpg</code> ファイルから画像が作成され、チェックボックスと、セルが 1 つの表が作成されます。 可能な限り、常に XUL の機能の方を使用するべきことから、XUL でレイアウトのために表を使用することはおそらくないはずです。 (レイアウトを行なうための XUL 要素があります)。 各々のタグの前に <code>html:</code> という接頭辞が付いていることに注意してください。 これによって Mozilla は、それが HTML タグであって XUL タグではないと認識します。 <code>html:</code> 部分を取り除いた場合、ブラウザはこれらの要素が XUL 要素だと判断するため、表示されなくなります。 なぜなら、<code>img</code>、 <code>input</code>、 <code>table</code> などは有効な XUL タグではないからです。</p> + +<p>XULでは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> または <code><code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 要素でラベルを追加することができます。 可能であれば、これらの XUL 要素を使用するべきです。 しかしながら、コントロールにラベルを追加するために、HTML の <code>label</code> 要素を使用したり、単純に (<code>p</code> や <code>div</code> のような) HTML のブロック要素の中にテキストを記述することも可能です。 以下に例を示します。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_1.xul">表示</a></p> + +<pre><html:p> + Search for: + <html:input id="find-text"/> + <button id="okbutton" label="OK"/> +</html:p> +</pre> + +<p>このコードは、「Search for:」というテキストを表示し、その下に <code>input</code> 要素と OK ボタンが表示されます。 この例のように、XUL のボタンを HTML 要素の中に置くこともできる、という事に注意してください。 プレインテキストは、 (<code>p</code> タグのように) 通常はテキストの表示が許可されている HTML 要素の中に置かれたものだけが表示されます。 それ以外のものは、テキスト表示を許可する XUL 要素 (例えば <code>description</code> 要素) の中に置かれたもの以外は表示されません。 次の例を参照してください。</p> + +<p><span id="Examples_of_HTML_elements"></span></p> + +<h2 id="HTML_.E8.A6.81.E7.B4.A0.E3.81.AE.E4.BE.8B" name="HTML_.E8.A6.81.E7.B4.A0.E3.81.AE.E4.BE.8B">HTML 要素の例</h2> + +<p>ウィンドウに HTML 要素を追加する例を以下に示します。 どの例も、単純化するために <code>window</code> や他の共通する情報は除いてあります。</p> + +<p><span id="A_dialog_with_a_check_box"></span></p> + +<h3 id=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E4.BB.98.E3.81.8D.E3.81.AE.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E4.BB.98.E3.81.8D.E3.81.AE.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">チェックボックス付きのダイアログの例</h3> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_2.xul">表示</a></p> + +<pre><html:p> + Click the box below to remember this decision. + <html:p> + <html:input id="rtd" type="checkbox"/> + <html:label for="rtd">Remember This Decision</html:label> + </html:p> +</html:p> +</pre> + +<div class="float-right"><img alt="画像:htmlelem-ex1.png"></div> + +<p>この例では、外側の <code>p</code> タグが、テキストを中に表示するために使われ、内側のものはテキストを複数行に分割するために使われています。</p> + +<p><span id="Text_outside_of_HTML_blocks"></span></p> + +<h3 id="HTML_.E3.83.96.E3.83.AD.E3.83.83.E3.82.AF.E3.81.AE.E5.A4.96.E9.83.A8.E3.81.AB.E3.81.82.E3.82.8B.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.AE.E4.BE.8B" name="HTML_.E3.83.96.E3.83.AD.E3.83.83.E3.82.AF.E3.81.AE.E5.A4.96.E9.83.A8.E3.81.AB.E3.81.82.E3.82.8B.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.AE.E4.BE.8B">HTML ブロックの外部にあるテキストの例</h3> + +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_htmlelem_3.xul">表示</a></p> + +<pre><html:div> + Would you like to save the following documents? + <html:hr/> +</html:div> +Expense Report 1 +What I Did Last Summer +<button id="yes" label="Yes"/> +<button id="no" label="No"/> +</pre> + +<div class="float-right"><img alt="画像:htmlelem-ex2.png"></div> + +<p>画像からわかるように、<code>div</code> タグの中にあるテキストは表示されていますが、他のテキスト (Expense Report 1 と What I Did Last Summer) は表示されていません。 これは、テキストを表示できる HTML あるいは XUL 要素がテキストを囲んでいないからです。 このテキストを表示するには、<code>div</code> タグの中に置くか、テキストを <code>description</code> タグで囲む必要があります。</p> + +<p><span id="Invalid_HTML_elements"></span></p> + +<h3 id=".E7.84.A1.E5.8A.B9.E3.81.AA_HTML_.E8.A6.81.E7.B4.A0.E3.81.AE.E4.BE.8B" name=".E7.84.A1.E5.8A.B9.E3.81.AA_HTML_.E8.A6.81.E7.B4.A0.E3.81.AE.E4.BE.8B">無効な HTML 要素の例</h3> + +<pre><html:po>Case 1</html:po> +<div>Case 2</div> +<html:description value="Case 3"/> +</pre> + +<p>この 3 つの例はどれも表示されませんが、表示されない理由はそれぞれ違っています。</p> + +<dl> + <dt>Case 1 </dt> + <dd><code>po</code> は有効な HTML タグではなく、Mozilla はそれをどう表示したらよいかわかりません。</dd> +</dl> + +<dl> + <dt>Case 2 </dt> + <dd><code>div</code> は HTML でのみ有効です。動作させるためには、<code>html:</code> 修飾子を加える必要があります。</dd> +</dl> + +<dl> + <dt>Case 3 </dt> + <dd><code>description</code> 要素は XUL では有効ですが、HTML では無効です。<code>html:</code> 修飾子を付けてはいけません。</dd> +</dl> + +<p>次のセクションでは、要素間に間隔を置く方法を学びます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Progress_Meters" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Using_Spacers">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_labels_and_images/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_labels_and_images/index.html new file mode 100644 index 0000000000..e2917bf92d --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_labels_and_images/index.html @@ -0,0 +1,110 @@ +--- +title: ラベルと画像を追加する +slug: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Buttons" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Input_Controls">次のページ »</a></p> +</div> +<p>このセクションでは、ウィンドウにラベルと画像を追加する方法について説明します。 +また、ラベルとボタン要素をグループ化する方法にも触れます。 +</p><p><span id="Text_Elements"></span> +</p> +<h3 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E8.A6.81.E7.B4.A0" name=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E8.A6.81.E7.B4.A0"> テキスト要素 </h3> +<p>XUL では、タグで囲まずに直接 XUL ファイルに記述しても、そのテキストが表示されることはありません。 +テキストの表示は、以下で説明する 2 つの要素を使用することで可能になります。 +</p><p><span id="Label_Element"></span> +</p> +<h4 id="label_.E8.A6.81.E7.B4.A0" name="label_.E8.A6.81.E7.B4.A0"> label 要素 </h4> +<p>ウィンドウにテキストを表示させるための、最も基本的な方法は、<code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> 要素を使用することになります。 +ボタンのような制御用の要素のそばに説明ラベルを置きたい場合には、この要素を使用する必要があります。 +以下に例を示します。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_1.xul">表示</a> +</p> +<pre><label value="This is some text"/> +</pre> +<p><code><code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 属性は、表示したいテキストを指定するのに使用します。 +<code><code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 属性でテキストを指定したとき、テキストは途中で改行されないため、テキストの全てが単一の行として表示されることになります。 +このため、この構文はラベルのためによく利用されます。 +</p><p>テキストの<span style="border-bottom: 1px dashed green;" title="wrap">自動改行</span>が必要な場合は、以下の例のようにテキストを開始タグと終了タグの間に置けば可能になります。 +</p><p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : +</p> +<pre><label>This is some longer text that will wrap onto several lines.</label> +</pre> +<p>HTML と同様に、改行と余分な<span style="border-bottom: 1px dashed green;" title="whitespace">空白文字</span>は、1 つの空白に縮められます。 +<a href="ja/XUL_Tutorial/Element_Positioning">後のセクション</a>で要素の幅を制限する方法を説明する予定です。 +幅の制限を行った場合、自動改行はより起こりやすくなります。 +</p><p><span id="Control_Attribute"></span> +</p> +<h5 id="control_.E5.B1.9E.E6.80.A7" name="control_.E5.B1.9E.E6.80.A7"> control 属性 </h5> +<p>ラベルに、関連するコントロールを指定するために、<code><code id="a-control"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 属性が使用できます。 +関連を設定すると、利用者が関連するラベルをクリックしたとき、対応するコントロールがフォーカスされるようになります。 +また、この関連付けは、<a href="ja/Accessibility">アクセシビリティ</a>の点からも重要です。 +なぜならば、<span style="border-bottom: 1px dashed green;" title="screen readers">画面の読み上げ機能</span>は、利用者がタブ操作で移動した制御要素のラベルを読み上げることになるからです。 +この <code><code id="a-control"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 属性の値には、フォーカスしたい要素の <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> を設定します。 +</p><p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_3.xul">表示</a> +</p> +<pre><label value="Click here:" control="open-button"/> +<button id="open-button" label="Open"/> +</pre> +<p>上の例では、ラベルのクリックによって、ボタンがフォーカスされるはずです。 +</p><p><span id="Description_Element"></span> +</p> +<h4 id="description_.E8.A6.81.E7.B4.A0" name="description_.E8.A6.81.E7.B4.A0"> description 要素 </h4> +<p>特定の制御要素と関連しない説明用のテキストには、<code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code> タグが利用できます。 +この要素は、例えばダイアログの先頭や、制御要素のグループに対する情報を示すために適しています。 +<code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code> と同様に、単一行の場合は <code>value</code> 属性を利用でき、長いテキストブロックの場合には description の開始と終了タグの間にテキストコンテントを置くことが可能です。 +通常、属性を使用する構文は label に対してよく利用され、テキストコンテントの構文は description に対してよく利用されています。 +</p><p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_textimage_2.xul">表示</a> +</p> +<pre><description> + This longer section of text is displayed. +</description> +</pre> +<p>内部的には <code><code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 要素と <code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素は同じものです。 +ですが <code><code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 要素は、テキスト入力欄の様なコントロールのラベルとして利用することが意図されています。 +このため <code>control</code> 属性は label に対してのみサポートされています。 +また <code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素は、その他の、ダイアログボックス冒頭の説明といった、記述的なテキストのために利用することが意図されています。 +</p><p><span id="Images"></span> +</p> +<h3 id=".E7.94.BB.E5.83.8F.E8.A6.81.E7.B4.A0" name=".E7.94.BB.E5.83.8F.E8.A6.81.E7.B4.A0"> 画像要素 </h3> +<p>HTML と同様、XUL にも、ウィンドウに画像を表示するための要素があります。 +この要素は、文字どおり <code><a href="/ja/docs/Mozilla/Tech/XUL/image" title="image">image</a></code> と名付けられています。 +タグ名が HTML と異なっていることに注意してください (img ではなく image です)。 +画像ファイルの URL を指定するために、 <code><code id="a-src"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 属性が使用できます。 +以下に例を示します。 +</p> +<pre><image src="images/banner.jpg"/> +</pre> +<p>この構文を使用しても良いのですが、より良い方法として、画像の URL を設定するためにスタイルシートを使用することも可能です。 +<a href="ja/XUL_Tutorial/Adding_Style_Sheets">スタイルシートの使い方</a>については、後のセクションで触れる予定ですが、完全を期すため、今回も例を示しておくことにします。 +画像の URL を指定するには、CSS プロパティの <a href="/ja/docs/Web/CSS/list-style-image" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>list-style-image</code></a> が使用可能です。 +以下に例を示します。 +</p> +<pre class="eval"><b>XUL:</b> + <image id="image1"/> + <image id="search"/> +</pre> +<pre class="eval"><b>Style Sheet:</b> + #image1 { + list-style-image: url("<a class=" external" rel="freelink">chrome://findfile/skin/banner.jpg</a>"); + } + + #search { + list-style-image: url("<a class=" external" rel="freelink">chrome://findfile/skin/images/search.png</a>"); + } +</pre> +<p>画像は、 chrome ディレクトリに置かれた findfile パッケージのための skin の中から呼び出されます。 +スキンに応じて画像を変えるために、通常、画像は skin ディレクトリに置いておきます。 +</p><p>次のセクションでは、ウィンドウに入力コントロールを追加する方法を学びます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Buttons" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Input_Controls">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_methods_to_xbl-defined_elements/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_methods_to_xbl-defined_elements/index.html new file mode 100644 index 0000000000..6c1b5360f4 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_methods_to_xbl-defined_elements/index.html @@ -0,0 +1,195 @@ +--- +title: XBL で定義した要素へのメソッドの追加 +slug: Archive/Mozilla/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements +tags: + - Tutorials + - XBL + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Properties_to_XBL-defined_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Event_Handlers_to_XBL-defined_Elements">次のページ »</a></p> +</div> + +<p>続いては、<a href="/ja/docs/XBL">XBL</a> で定義された要素に、カスタムメソッドを追加する方法について見ていきます。</p> + +<h3 id=".E3.83.A1.E3.82.BD.E3.83.83.E3.83.89" name=".E3.83.A1.E3.82.BD.E3.83.83.E3.83.89">メソッド</h3> + +<p>XBL で定義された要素には、スクリプトプロパティの追加に加えて、メソッドを追加することも可能です。 追加したメソッドは、スクリプトから呼び出すことが可能になります。 メソッドとは、「<code>window.open()</code>」のように、特定のオブジェクトに属した関数のことを指しています。 <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#method">method</a></code></code> 要素を使用することで、独自に定義した要素にカスタムメソッドを定義することが可能になります。 メソッドを定義するための一般的な構文を以下に示します。</p> + +<pre><implementation> + <method name="method-name"> + <parameter name="parameter-name1"/> + <parameter name="parameter-name2"/> + . + . + . + <body> + -- method script goes here -- + </body> + </method> +</implementation> +</pre> + +<p>メソッドの宣言は、フィールドやプロパティの場合と同様に、 <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#implementation">implementation</a></code></code> 要素の中で行います。 このとき、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#method">method</a></code></code> 要素には、 メソッドへのパラメータを記述する <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></code> 要素と、 メソッドの処理を記述したスクリプトを置くための <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#body">body</a></code></code> 要素の 2 種類の子要素を置くことになります。</p> + +<p><code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#method">method</a></code></code> 要素の <code>name</code> 属性の値がメソッドの名前になります。 同様に、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></code> 要素の <code>name</code> 属性が、個々のパラメータの名前になります。 個々の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></code> 要素は、メソッドへのパラメータの 1 つを宣言するために使用します。 このため、例えばメソッドにパラメータが 3 つある場合には、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></code> 要素は 3 つ必要になります。 なお、メソッドにパラメータがない場合は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></code> 要素を置く必要はありません。</p> + +<p>また、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#body">body</a></code></code> 要素には、メソッドが呼ばれたときに実行されるスクリプトを置きます。 このスクリプトに対して、パラメータは、通常の関数の場合のパラメータと同じように、 <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></code> 要素で指定された名前を持ったスクリプト変数として定義されることになります。 このため、例えば、以下の JavaScript 関数は、その下に示すような XBL メソッドとしても記述することが可能です。</p> + +<pre>function getMaximum(num1,num2) +{ + if (num1<=num2) return num2; + else return num1; +} + +<strong>XBL:</strong> + +<method name="getMaximum"> + <parameter name="num1"/> + <parameter name="num2"/> + <body> + if (num1&lt;=num2) return num2; + else return num1; + </body> +</method> +</pre> + +<p>この <code>getMaximum</code> という関数は、メソッドにパラメータとして渡された値のうち、最大のものを返します。 スクリプト中の比較のための小なり記号 ('<') が、タグの始まりとして解釈されないように、エスケープする必要がある点に注意してください。 または、個別の文字をエスケープするのではなく、XML の CDATA セクションを使って、コードブロック全体をエスケープするのでも構いません。 上記の <code>getMaximum</code> メソッドが定義された XBL をバインドした要素の参照を<em>element</em> とした場合、 このメソッドは、「<em>element</em><code>.getMaximum(5,10)</code>」のようなコードによって呼び出すことが可能です。</p> + +<p><code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#parameter">parameter</a></code></code> タグによって、メソッドへ渡すパラメータを定義することが可能です。 Mozilla はスクリプト言語として JavaScript を使用し、JavaScript は<span style="border-bottom: 1px dashed green;" title="non-typed language">型のない言語</span>であるため、現時点ではパラメータの型を指定する必要はありません。 しかしながら、将来的には、それ以外の言語も XBL で使用されるようになるかもしれません。</p> + +<h3 id=".E5.8C.BF.E5.90.8D.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.81.AB.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9.E3.81.99.E3.82.8B" name=".E5.8C.BF.E5.90.8D.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.81.AB.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9.E3.81.99.E3.82.8B">匿名コンテントにアクセスする</h3> + +<p>メソッドの <code>body</code> に置かれたスクリプトなどから、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> 要素の内部で定義された要素について外観などを変更したいことは、しばしばあると思います。 しかしながら、これらの要素は匿名で生成されるため、通常の DOM 関数からアクセスすることはできません。 通常のアプリケーション開発者が利用する範囲では、その要素がどのように実装されているのかまでは知る必要がないため、これらは隠されています。 このために、匿名コンテントを取得するためには専用の方法を用いる必要があります。</p> + +<p>XBL で<span style="border-bottom: 1px dashed green;" title="behavior">振る舞い</span>を設定された要素には、内部に匿名 (<span style="color: green;">anonymous</span>) の子要素の配列をもつための特殊なプロパティがあります。 この配列の各要素には、XBL で定義された要素の直接の子要素が保持されています。 といっても、この特殊なプロパティに直接アクセスすることはできません。 その代わりに、<code>document</code> の <code><a href="/ja/docs/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousNodes">getAnonymousNodes()</a></code> メソッドを呼び出す必要があります。</p> + +<pre>var value=document.getAnonymousNodes(element); +</pre> + +<p>ここで、「<code>element</code>」には、匿名コンテントを取得したい要素への参照を設定します。 この関数は、匿名コンテントの要素を配列として返します。 そこから下の階層の要素については隠されていないため、通常の DOM 関数を利用して取得することが可能です。 ただし、XBL がバインドされた要素を、別の XBL の中の要素として置いた場合は例外で、 この場合には、<code><a href="/ja/docs/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousNodes">getAnonymousNodes()</a></code> 関数を再度使用する必要があるので注意してください。</p> + +<p>以下の例は、1 行に並んだボタンを作ります。</p> + +<pre><binding id="buttonrow"> + <content> + <button label="Yes"/> + <button label="No"/> + <button label="Sort Of"/> + </content> +</binding> +</pre> + +<p>個々のボタンを参照するには、<code><a href="/ja/docs/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousNodes">getAnonymousNodes()</a></code> 関数が使用できます。 このとき、パラメータには、このバインディングがバインドされている要素への参照を渡します。 返される配列の最初の配列要素 (<code>getAnonymousNodes(element)[0]</code> で参照できる値) には最初のボタンが格納され、 2 番目の配列要素には 2 つ目のボタンが 、3 番目の配列要素には 3 つ目のボタンが格納されます。 なお、バインディングメソッドの中のコードからは、「<code>this</code>」を <code><a href="/ja/docs/XBL/XBL_1.0_Reference/DOM_Interfaces#getAnonymousNodes">getAnonymousNodes()</a></code> へのパラメータとして渡すことができます。</p> + +<p>次の例は、見出しのついたテキストを作成するために使用できるもので、 メソッド <code>showTitle()</code> によって、ラベルの表示と非表示を切り替えることが可能です。 これは、匿名コンテントの配列から、見出しのための要素への参照を取得し、 その可視性 (<span style="color: green;">visibility</span>) を変更することで実現しています。</p> + +<pre><strong>XUL:</strong> + +<box id="num" class="labeledbutton" title="Number of Things:" value="52"/> + +<button label="Show" oncommand="document.getElementById('num').showTitle(true)"/> +<button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/> + +<strong>XBL:</strong> + +<binding id="labeledbutton"> + <content> + <xul:label xbl:inherits="value=title"/> + <xul:label xbl:inherits="value"/> + </content> + <implementation> + <method name="showTitle"> + <parameter name="state"/> + <body> + if (state) document.getAnonymousNodes(this)[0]. + setAttribute("style","visibility: visible"); + else document.getAnonymousNodes(this)[0]. + setAttribute("style","visibility: collapse"); + </body> + </method> + </implementation> +</binding> +</pre> + +<p>XUL の側に追加された 2 つのボタンには、ラベルの可視性を変更するために使用する <code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> ハンドラがあり、 どちらの場合も <code>showTitle()</code> メソッドを呼び出します。 このメソッドは、渡された <code>state</code> パラメータをチェックして、見出し用の要素を表示するか隠すかを判定します。 いずれの場合も、匿名コンテントの配列の最初の要素を処理の対象にします。 つまり <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> 要素の最初の子要素である 最初のラベルウィジェットを参照し、 この要素のスタイルを更新することで可視性の変更を行います。</p> + +<h3 id=".E5.8C.BF.E5.90.8D.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.81.8B.E3.82.89.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9.E3.81.99.E3.82.8B" name=".E5.8C.BF.E5.90.8D.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.81.8B.E3.82.89.E3.82.A2.E3.82.AF.E3.82.BB.E3.82.B9.E3.81.99.E3.82.8B">匿名コンテントからアクセスする</h3> + +<p>別の方法として、匿名コンテント中から、その XBL がバインドされた要素を DOM の親要素を取得するための <a href="/ja/docs/Web/API/Node/parentNode" title="指定されたノードの DOM ツリー内の親ノードを返します。"><code>Node.parentNode</code></a> プロパティを使用して取得するやり方もあります。 例えば、Show ボタンと Hide ボタンを XBL ファイルの側に移すには、以下のようにします。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblmethods_1.xml.txt">ソース</a></p> + +<pre><binding id="labeledbutton"> + <content> + <xul:label xbl:inherits="value=title"/> + <xul:label xbl:inherits="value"/> + <xul:button label="Show" oncommand="parentNode.showTitle(true);"/> + <xul:button label="Hide" oncommand="parentNode.showTitle(false);"/> + </content> + <implementation> + <method name="showTitle"> + <parameter name="state"/> + <body> + if (state) document.getAnonymousNodes(this)[0].setAttribute("style","visibility: visible"); + else document.getAnonymousNodes(this)[0].setAttribute("style","visibility: collapse"); + </body> + </method> + </implementation> +</binding> +</pre> + +<p>ここでは、<code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> ハンドラは、まず、ハンドラがある要素の親要素の参照を取得します。 これは <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> 要素ではなく、XBL がバインドされている XUL 要素になります。 (この例では、<code>labeledbutton</code> クラスをもつボックスが該当します)。 続いて、前述の <code>showTitle()</code> メソッドが呼び出されます。</p> + +<p>カスタムプロパティとメソッドは、XBL がバインドされた外枠の XUL 要素だけに追加され、 <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> タグ内で宣言された要素は、これらのプロパティやメソッドを持つことはできません。 このため、まず最初に親要素の取得から行う必要があります。</p> + +<p>なお、XUL ファイルの側に置かれた子要素は、通常の方法で取得することが可能です。 これは、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> タグを使った場合でも変わることはありません。 以下に例を示します。</p> + +<pre><strong>XUL:</strong> + +<box id="outer" class="container"> + <button label="One"/> + <button label="Two"/> + <button label="Three"/> + <button label="Four"/> +</box> + +<strong>XBL:</strong> + +<binding id="labeledbutton"> + <content> + <description value="A stack:"/> + <stack> + <children/> + </stack> + </content> +</binding> +</pre> + +<p><a href="/ja/docs/Web/API/Node/childNodes" title="Node.childNodes読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子nodesの現在のNodeListを返します。"><code>Node.childNodes</code></a> のような DOM 関数を使用して子要素の取得を行った場合、 <code>id</code> として <code>outer</code> が設定された XUL ボックスからは、4 つの子要素が取得でき、これらは 4 つのボタンに対応しています。 つまり、DOM から取得する場合、これらのボタンが実際にはスタックの中に描画されていることに影響を受けることはありません。 一方、スタックの子要素は 1 つだけで、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素そのものが対応することになります。 また、このときの外枠のボックスに対応する匿名コンテントの配列の長さは 2 で、 最初の要素としては <code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素、 2 番目の要素には <code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 要素が格納されることになります。</p> + +<h3 id=".E3.82.B3.E3.83.B3.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF.E3.81.A8.E3.83.87.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF" name=".E3.82.B3.E3.83.B3.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF.E3.81.A8.E3.83.87.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF">コンストラクタとデストラクタ</h3> + +<p>XBL は、専用のタグ <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#constructor">constructor</a></code></code> と <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#destructor">destructor</a></code></code> を使用して作成する 2 つの特殊なメソッドをサポートしています。 コンストラクタ (<span style="color: green;">constructor</span>) は、バインディングが要素に結び付けられるたびごとに呼び出されるため、 <span style="border-bottom: 1px dashed green;" title="preferences">設定値</span>の読み込みや、フィールドへのデフォルト値の設定といった、コンテントの初期化処理のために使用できます。 また、デストラクタ (<span style="color: green;">destructor</span>) は、バインディングが要素から取り除かれるときに呼び出されるため、 設定された情報を保存する必要がある場合などに使用できます。</p> + +<p>バインディングが要素へ結び付けられる契機は、2 つあります。 まず、1 つ目の契機は、ウィンドウが表示されるときです。 このときには、ウィンドウ上の XBL のコンテントがバインドされた要素が持っているコンストラクタは、全て実行されます。 このため、複数のファイルがロードされても構わないように、 呼び出される順番に依存しないようにしておく必要があります。 なお、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> の <code><code id="a-onload"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onload">onload</a></code></code> ハンドラは、全てのバインディングが結びつけられてコンストラクタの実行が終了するまでは呼び出されません。 次に、2 つ目の契機は、要素の <a href="/ja/docs/Web/CSS/-moz-binding" title="CSS の -moz-binding プロパティは、 Mozilla ベースのアプリケーションで XBL を DOM 要素に結び付けるために使用します。"><code>-moz-binding</code></a> スタイルプロパティを変更したときです。 この場合、まずそれまで設定されていたバインディングに対してデストラクタが実行され、その後そのバインディングが要素から取り除かれます。 次に、その要素に新しいバインディングが追加され、そのコンストラクタが実行されることになります。</p> + +<p>コンストラクタやデストラクタ用のスクリプトは、それらのタグの中に直接置く必要があります。 また、コンストラクタとデストラクタには引数を設定することはできず、 バインディングに複数のコンストラクタやデストラクタを置くこともできません。 以下に例を示します。</p> + +<pre><constructor> + if (this.childNodes[0].getAttribute("open") == "true"){ + this.loadChildren(); + } +</constructor> + +<destructor action="saveMyself(this);"/> +</pre> + +<p>次のセクションでは、XBL で定義された要素にイベントハンドラを追加する方法を示します。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Properties_to_XBL-defined_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Event_Handlers_to_XBL-defined_Elements">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_more_elements/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_more_elements/index.html new file mode 100644 index 0000000000..ddeeb0aee9 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_more_elements/index.html @@ -0,0 +1,87 @@ +--- +title: さらに要素を追加する +slug: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Groupboxes" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Stacks_and_Decks">次のページ »</a></p> +</div> +<p>ボックスの説明の最後として、ファイル検索ダイアログにいくつかボックスを追加していきます。</p> +<p><span id="Adding_Elements_to_our_find_files_example"></span></p> +<h3 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E8.A6.81.E7.B4.A0.E3.82.92.E8.BF.BD.E5.8A.A0" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E8.A6.81.E7.B4.A0.E3.82.92.E8.BF.BD.E5.8A.A0">ファイル検索ダイアログに要素を追加</h3> +<div class="highlight"> + <p>それでは、ファイル検索ダイアログに要素を追加していきましょう。 最初に、ファイルのサイズや日付といった名前以外の情報でも検索できるようにしてみます。</p> + <pre class="eval"><hbox> + <span class="highlightred"><menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/></span> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +</hbox> +</pre> + <div class="float-right"> + <img alt="画像:boxfinal1.png"></div> + <p><a href="ja/XUL_Tutorial/List_Controls#Drop-down_Lists">ドロップダウンボックス</a>を 2 つ、ダイアログに追加し、 それらの間隔をあけるために、要素の間に<a href="ja/XUL_Tutorial/Using_Spacers">スペーサー</a>を加えています。 これらのスペーサーには、明示的に 10 ピクセルの幅を設定しています。 この例のウィンドウをリサイズした場合には、テキスト入力欄は大きくなりますが、それ以外の構成要素は大きくならないことが確認できると思います。 また、ラベルが削除されたことにも気づいているかもしれません。</p> + <p>ウィンドウを垂直方向にリサイズしても、要素のサイズは変わりません。 これは、それらの要素が水平ボックス内にあるためです。 欲を言えば、Find ボタンと Cancel ボタンは、常にウィンドウの下辺に置かれるようにした方がいいかもしれません。 これは、2 つの水平ボックスの間にスペーサーを加えれば、簡単に実現できます。</p> + <pre class="eval"><span class="highlightred"><spacer style="height: 10px"/></span> +<hbox> + <menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +</hbox> + +<span class="highlightred"><spacer style="height: 10px" flex="1"/></span> + +<hbox> +</pre> + <p>これで、ダイアログがリサイズされると、2 つのボタンはダイアログの下辺に沿うように移動するようになります。 最初の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> は、タイトルラベルと検索条件を入力するための要素の間に間隔を置きます。</p> + <p>また、検索条件を入力する部分の周囲に境界線があると、さらに格好よくなるかもしれません。 これを実現するには、 CSS の <a href="/ja/docs/Web/CSS/border" title="CSS の border プロパティは、要素の境界を設定します。これは border-width, border-style, border-color の一括指定です。"><code>border</code></a> プロパティを使うか、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> 要素を使うかの 2 つの方法が利用できます。 最初の方法の場合、ボックス自身にスタイルを設定することが必要になります。 とりあえず、今回は 2 番目の方法を使うことにします。 <a href="ja/XUL_Tutorial/Groupboxes">グループボックス</a>には、格好いい溝状スタイルの境界線を描画するという利点があるので、今回のテーマにふさわしいと思います。</p> + <p>ボックスを <code><code><a href="/ja/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> に変更しましょう。</p> + <pre class="eval"><span class="highlightred"><groupbox orient="horizontal"></span> + <span class="highlightred"><span class="nowiki"><caption label="Search Criteria"/></span></span> + <menulist id="searchtype"> + . + . + . + <spacer style="width: 10px;"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> +<span class="highlightred"></groupbox></span> +</pre> + <p><img alt="画像:boxfinal2.png"></p> + <p>これ以外にも、外見上の問題はまだあります。 ウィンドウを垂直方向に広げると、グループボックスが下部の方に広がってしまいます。 また、要素の配置を改善するために、余白の取り方を調整してもいいかもしれません。</p> + <p>このチュートリアルを通して、要素の追加は続いていきますので、 これ以降もさらなるボックスモデルとその特徴を示す例を見ることができるはずです。</p> + <p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxfinal.xul">表示</a></p> +</div> +<p>次のセクションでは、スタックの作り方を見てみます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Groupboxes" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Stacks_and_Decks">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_properties_to_xbl-defined_elements/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_properties_to_xbl-defined_elements/index.html new file mode 100644 index 0000000000..d9a28ace99 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_properties_to_xbl-defined_elements/index.html @@ -0,0 +1,127 @@ +--- +title: XBL で定義した要素へのプロパティの追加 +slug: Archive/Mozilla/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements +tags: + - Tutorials + - XBL + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:XBL_Attribute_Inheritance" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Methods_to_XBL-defined_Elements">次のページ »</a></p> +</div> +<p>続いては、XBL で定義された要素にカスタムプロパティを追加する方法を見ていきます。</p> +<h3 id="XBL_.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.82.A4.E3.82.B9" name="XBL_.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.82.A4.E3.82.B9">XBL インタフェース</h3> +<p><a href="/ja/docs/JavaScript" title="JavaScript">JavaScript</a> と <a href="/ja/docs/DOM" title="DOM">DOM</a> は、要素のプロパティを取得または設定するためのアクセス手段を提供しています。 XBL を利用すれば、作成した要素に独自のプロパティを定義することが可能です。 または、処理を呼び出すためのメソッドを追加することもできます。 これらを行っておけば、後は (<code><a href="/ja/docs/DOM/document.getElementById" title="DOM/document.getElementById">getElementById</a></code> のような関数を使って) 要素への参照の取得を行うだけで、 追加したプロパティの取得や設定、または追加したメソッドの呼び出しが可能になります。</p> +<p>追加できる項目には 3 種類あります。</p> +<ul> + <li>フィールド (<span style="color: green;">field</span>) は、単純な値を保持するのに使います。</li> + <li>プロパティ (<span style="color: green;">property</span>) も、値を保持するのに使いますが、値の取得や変更を行うときに、コードが実行される場合があります。</li> + <li>メソッド (<span style="color: green;">method</span>) は、実行可能な関数です。</li> +</ul> +<p>これらの 3 つは、すべて <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code></code> 要素の子要素として置かれた <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#implementation">implementation</a></code></code> 要素の中に定義することになります。 <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#implementation">implementation</a></code></code> 要素の中では、 <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#field">field</a></code></code>、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#property">property</a></code></code>、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#method">method</a></code></code> の各要素を必要に応じて個別に定義していきます。 このための一般的な構文を以下に示します。</p> +<pre><binding id="element-name"> + <content> + -- content goes here -- + </content> + <implementation> + <field name="field-name-1"/> + <field name="field-name-2"/> + <field name="field-name-3"/> + + <property name="property-name-1"/> + <property name="property-name-2"/> + <property name="property-name-3"/> + . + . + . + <method name="method-name-1"> + -- method content goes here -- + </method> + . + . + . + </implementation> +</binding> +</pre> +<h3 id=".E3.83.95.E3.82.A3.E3.83.BC.E3.83.AB.E3.83.89" name=".E3.83.95.E3.82.A3.E3.83.BC.E3.83.AB.E3.83.89">フィールド</h3> +<p>個々のフィールドは、 <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#field">field</a></code></code> 要素を使って定義します。 しばしば、フィールドは <code>label</code> や <code>disabled</code> のような、 要素に置かれた属性と対応していますが、そうしなければならないという訳ではありません。</p> +<p><code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#field">field</a></code></code> 要素の <code>name</code> 属性は、フィールドの名前を指示するために使用します。 この名前を使用して、スクリプトからフィールドの値の取得と設定を行うことができます。 以下の例では、乱数を生成して保存するためのボタンを作成しています。 このボタンの <code>number</code> プロパティからは、(値を変更しない限り) 何回取得しても同じ値が取り出されることになります。 この例では、処理のほとんどを、 <code>oncommand</code> ハンドラで行っています。 これを XBL に移す方法については、もう少し後で見ることにします。</p> +<pre><strong>XUL:</strong> + +<box id="random-box" class="randomizer"/> + +<button label="Generate" + oncommand="document.getElementById('random-box').number=Math.random();"/> +<button label="Show" + oncommand="alert(document.getElementById('random-box').number)"/> + +<strong>XBL:</strong> + +<binding id="randomizer"> + <implementation> + <field name="number"/> + </implementation> +</binding> +</pre> +<p>このバインディングの中では、乱数を保存するための <code>number</code> フィールドが定義されています。 このフィールドの値の設定と取得は、XUL の方に追加した 2 つのボタンを使って行ないます。 そのための構文は、HTML 要素のプロパティの取得や設定を行うためのものによく似ています。 なお、この例では、表示するべきコンテントが XUL ボックスの中にも、対応する XBL の定義の中にも置かれていませんが、そのことはまったく問題ではありません。</p> +<p>といっても、この例のフィールドにはデフォルト値が設定されていないので、 この例には修正するべき点が 1 つもないという訳ではありません。 デフォルト値を設定するためには、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#field">field</a></code></code> タグの内側にコンテントとして、デフォルト値として設定したい値を置きます。 以下に例を示します。</p> +<pre><field name="number"> + 25 +</field> +</pre> +<p>これによって、<code>number</code> フィールドのデフォルト値として 25 が設定されます。 さらに、値を置く代わりに <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#field">field</a></code></code> タグの中に、デフォルト値を求めるためのスクリプトを置くことも可能です。 この方法は、デフォルト値を計算する必要がある場合に必要になるはずです。 例えば、以下のフィールドは、現在時刻と同じ値がデフォルト値になります。</p> +<pre><field name="currentTime"> + new Date().getTime(); +</field> +</pre> +<h3 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">プロパティ</h3> +<p>プロパティにデータを設定する際、値として正しいかを確認したいことはしばしばあると思います。 または、参照されるたびに動的に値を計算したい場合もあるかもしれません。 例えば、現在時刻を保持するプロパティが必要だとすると、その値は必要になるたびに生成したいはずです。 このような場合には、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#field">field</a></code></code> タグではなく <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#property">property</a></code></code> タグを使う必要があります。 <code>property</code> タグを使う場合も、前述の <code>field</code> タグの場合と、構文自体は似ていますが、機能が追加されています。</p> +<h4 id="onget_.E5.B1.9E.E6.80.A7.E3.81.A8_onset_.E5.B1.9E.E6.80.A7" name="onget_.E5.B1.9E.E6.80.A7.E3.81.A8_onset_.E5.B1.9E.E6.80.A7">onget 属性と onset 属性</h4> +<p>プロパティでは、<code>onget</code> と <code>onset</code> 属性によって、値の取得または変更する場合にコードを実行させることが可能になります。 これらの属性は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#property">property</a></code></code> 要素に追加し、その値にはプロパティ値の取得、または設定を行なうためのスクリプトを設定します。</p> +<p>例えば、現在時刻を計算するためのスクリプトを <code>onget</code> に設定するとします。 この <code>onget</code> のスクリプトは、他のスクリプトがプロパティ値にアクセスするたびに、その値を取得するため呼び出されることになり、 このスクリプトは、そのプロパティの値となるべき値を返す必要があります。</p> +<p>また、<code>onset</code> ハンドラも似ていますが、こちらはスクリプトからプロパティに新しい値を設定しようとする場合に呼び出されることになります。 ここに設定するスクリプトは、値をどこかに保存するか、あるいは値が<span style="border-bottom: 1px dashed green;" title="validate">正しいかを確認</span>するためのものになるはずです。 例えば、プロパティによっては、数値だけを保存できるようにしたい場合があると思いますが、 このようなプロパティに英字のテキストの設定を行おうとした場合は、失敗する必要があるはずです。</p> +<pre><property name="size" + onget="return 77;" + onset="alert('Changed to:'+val);"/> +</pre> +<p>このプロパティを取得すると、常に 77 を返します。 また、設定した場合には、値がプロパティに設定されたことを示すアラートが表示されます。 <code>onset</code> ハンドラが呼び出されるときには、特別な変数 <code>val</code> によって、プロパティに設定するべき値が渡されます。 ハンドラのスクリプトでは、これを利用して値が正しいかの確認や保存処理を行うことが可能です。 なお、<code>onset</code> ハンドラは、実際に設定された新しい値を返す必要があります。</p> +<p>続いては、スクリプトで「よくあるコード」が実行されたとき、 どのように処理されていくのかを見ていくことにします。</p> +<p>まず、「banana」と「orange」という名前の 2 つの要素があり、 それぞれには、「size」という名前のカスタムプロパティがあるとします。 このときに、以下のスクリプトを実行します。</p> +<pre>banana.size = orange.size; +</pre> +<ol> + <li>orange の size プロパティを取得するために、orange の <code>onget</code> スクリプトが呼び出されます。呼び出されたスクリプトは値を計算して返します。</li> + <li>banana の size プロパティの <code>onset</code> ハンドラが呼び出されます。<code>onset</code> のスクリプトでは <code>val</code> 変数を通して orange の <code>onget</code> スクリプトが返した値を受け取り、それを banana の size プロパティに<span style="border-bottom: 1px dashed green;" title="in some manner">必要な手順に従って</span>設定します。</li> +</ol> +<p>フィールドとは異なり、プロパティは値を保持しないことに注意してください。 <code>onset</code> ハンドラのないプロパティに値を設定しようとした場合は、エラーになります。 このため、しばしばプロパティの実際の値を保持するために、内部的に別のフィールドを利用します。 また、プロパティを XBL で定義された要素の属性に一致させる方法も、よく利用されます。 以下の例は、プロパティを要素の属性と対応させる方法を示しています。</p> +<pre><property name="size" + onget="return this.getAttribute('size');" + onset="this.setAttribute('size',val);" +/> +</pre> +<p>この例で作成したプロパティの値を、スクリプトから取得しようとするたびに、その要素の同じ名前の属性が取得されます。 また、設定しようとするときには、その値は要素の属性に設定されます。 こうしておけば、プロパティと属性のどちらから取得、または変更しても、同じ値になるため便利です。</p> +<h4 id="getter_.E8.A6.81.E7.B4.A0.E3.81.A8_setter_.E8.A6.81.E7.B4.A0" name="getter_.E8.A6.81.E7.B4.A0.E3.81.A8_setter_.E8.A6.81.E7.B4.A0">getter 要素と setter 要素</h4> +<p>また、<code>onget</code> 属性と <code>onset</code> 属性に設定するスクリプトが長い場合には、別の構文を利用することも可能です。 具体的には、<code>onget</code> 属性は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#getter">getter</a></code></code> という名前の子要素として置き換えることができ、 <code>onset</code> 属性は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#setter">setter</a></code></code> 要素で置き換えることが可能です。 以下に例を示します。</p> +<pre><property name="number"> + <getter> + return this.getAttribute('number'); + </getter> + <setter> + var v = parseInt(val,10); + if (!isNaN(v)) { + this.setAttribute('number',''+v); + } + </setter> +</property> +</pre> +<p>この例のプロパティでは、整数値だけを保持することが可能です。 それ以外の文字が入力された場合は取り除かれます。 また、入力が数値でない場合には、値は変更されません。 これらの処理は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#setter">setter</a></code></code> 要素の中に置かれたコードで行っています。 なお、このプロパティの実際の値は、要素の <code>number</code> 属性に保存されることになります。</p> +<p>プロパティ値の取得や設定を行なうハンドラを作成するためには、どちらの構文を利用しても構いません。</p> +<h4 id="readonly_.E5.B1.9E.E6.80.A7" name="readonly_.E5.B1.9E.E6.80.A7">readonly 属性</h4> +<p><code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#field">field</a></code></code> タグや <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#property">property</a></code></code> タグに <code>readonly</code> 属性を追加して <code>true</code> に設定することにより、 フィールドやプロパティを読み取り専用にすることが可能です。 このとき、読み取り専用になっているプロパティに値を設定しようとしても失敗します。</p> +<p>次のセクションでは、XBL で定義された要素にメソッドを追加する方法を見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:XBL_Attribute_Inheritance" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Methods_to_XBL-defined_Elements">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/adding_style_sheets/index.html b/files/ja/archive/mozilla/xul/tutorial/adding_style_sheets/index.html new file mode 100644 index 0000000000..a01cee5b46 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/adding_style_sheets/index.html @@ -0,0 +1,149 @@ +--- +title: スタイルシートの追加 +slug: Archive/Mozilla/XUL/Tutorial/Adding_Style_Sheets +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Style_Sheets +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Persistent_Data" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Styling_a_Tree">次のページ »</a></p> +</div> +<p>これまでに作成してきた要素では、外観についてはほとんど変更しませんでした。 XUL では、要素の外観をカスタマイズするために CSS (Cascading Style Sheets) を使用することになります。</p> +<h3 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88">スタイルシート</h3> +<p>スタイルシートとは、要素のスタイル情報を含んだファイルのことです。 スタイルシートは、もともとは HTML 要素のために設計されたものですが、 <a href="ja/XUL_Reference">XUL 要素</a>を含めて、任意の <a href="ja/XML">XML</a> に適用することが可能です。 スタイルシートには、フォント (font)、色 (color)、境界線 (border)、要素の大きさといった情報が含まれています。</p> +<p>Mozilla では、特に指定が無い場合、各 XUL ウィンドウにデフォルトのスタイルシートを適用します。 多くの場合は、デフォルトのままでも十分ですが、 場合によっては、カスタムスタイルシートを使用したい状況もあるかもしれません。 この場合、通常は、それぞれの XUL ファイルに対して、1 つずつスタイルシートを関連付けることになります。</p> +<p>スタイルシートは、どこでも好きな場所に置くことができます。 例えば、リモートに格納された XUL ファイルを、HTTP の URL でアクセスする場合は、 スタイルシートも同様にリモートに置くことが可能です。 また、chrome システムの一部としてインストールするために XUL パッケージを作成した場合には、2 つの選択肢があります。 1 つめは、XUL ファイルと同じディレクトリにスタイルシートを格納する方法ですが、 この方法には、そのアプリケーションをテーマに対応させることができなくなるという短所があります。 このため、2 つめの方法では、スタイルシートをテーマの一部として含めておくようにします。</p> +<div class="highlight"> + <p>ここで、ファイル検索ダイアログをテーマ対応にして構築する場合のスタイルシートの置き場所ついて検討してみましょう。 ファイル検索ダイアログは、<code><a class="external" rel="freelink">chrome://findfile/content/findfile.xul</a></code> というURLで参照することができるため、 スタイルシートファイルも、<code><a class="external" rel="freelink">chrome://findfile/skin/findfile.css</a></code> でアクセス可能な場所に保存しておくのが良いでしょう。</p> +</div> +<p>なお、スタイルシートは、これまで見てきた XUL の例の中でも既に使われていました。 これらの例の全ての XUL ファイルの 2行目は、いつも下記の内容だったはずです。</p> +<pre><?xml-stylesheet href="chrome://global/skin/" type="text/css"?> +</pre> +<p>この行は、<code><a class="external" rel="freelink">chrome://global/skin/</a></code> で提供されているスタイルを使用するべきであることを指示しています。 Mozilla では、これは <code>global.css</code> ファイルが指定されたと解釈され、 このファイルに含まれる XUL 要素に対するデフォルトのスタイル情報が読み込まれます。 このスタイルシートでは、たくさんのフォントや、色、境界線の指定を、要素の外観をより良くするために適用しているため、 この行を取り去った場合も機能的には動作しますが、見た目はかなり素気ないものになるはずです。</p> +<h3 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B">スタイルを変更する</h3> +<p>しかしながら、デフォルトの要素の外観が、望むものではない場合もあると思います。 この場合は、独自のスタイルシートを追加する必要があります。 これまでは、要素上の <code><code id="a-style"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> 属性を利用して、スタイルを適用してきました。 この方法でも動作はしますが、実際には最良の方法ではありません。 より優れた方法をとる場合は、個別にスタイルシートを作成します。 これによって、外観の変更がスキンを変更するだけで容易に行えるようになります。</p> +<p>しかしながら、限定的ではあるものの、<code><code id="a-style"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> 属性を使用することが容認される場合もあります。 具体的には、スクリプトからスタイルを変更する場合や、レイアウトの変更が要素の意味にも影響するような場合です。 (といっても、やはり可能な限りこの属性の使用は回避するべきだと思います)。</p> +<p>なお、インストールされているファイルに対しては、マニフェストファイルを作るか、修正してからでないと、スキンをインストールすることはできません。</p> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ファイル検索ダイアログの例</h4> +<div class="highlight"> + <p>それでは、ファイル検索ダイアログを、別のスタイルファイルからスタイルを設定するように変更してみましょう。 まず、以下に <code>findfile.xul</code> で変更した行を示します。</p> + <pre class="eval"><span class="highlightred"><?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?></span> +<?xml-stylesheet href="findfile.css" type="text/css"?> + ... +<span class="highlightred"><spacer class="titlespace"/></span> + <groupbox orient="horizontal"> + <span class="nowiki"><caption label="Search Criteria"/></span> + + <menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <span class="highlightred"><spacer class="springspace"/></span> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + + <span class="highlightred"><spacer class="springspace"/> + <menulist id="find-text" flex="1"</span> + editable="true" + datasources="<a class="external" rel="freelink">file:///mozilla/recents.rdf</a>" + ref="<span class="nowiki">http://www.xulplanet.com/rdf/recent/all</span>"/> + ... +<span class="highlightred"><spacer class="titlespace"/> +<hbox> + + <progressmeter id="progmeter" value="50%" style="display:none;"/></span> +</pre> + <p>ここでは、新しい <code>xml-stylesheet</code> の行が、スタイルシートをインポートするために使用されています。 インポートするファイルには、これまで直接 XUL ファイルの中に記述していたスタイルが含まれることになります。 同様の指定を繰り返すことで、任意の数のスタイルシートを取り込むことが可能です。 なお、この例ではスタイルシートは <code>findfile.xul</code> と同じディレクトリに置かれています。</p> + <p>また、上記のコードでは、これまで置かれていたいくつかのスタイルを削除しています。 ただし、<code>progressmeter</code> の <code>display</code> プロパティについては、 スクリプトから変更されるため、削除せずに残してあります。 このようにしても、プログレスバーを初期状態から表示させたい状況は通常考えられないため、この実装が問題になることは無いはずです。 といっても、実際に必要になった場合、個別のスタイルシートの方に置くようにしても構いません。 また、スペーサーには、スタイルシートから参照できるように、<code>class</code> を追加しています。</p> + <p>さらに、スタイルシートも新たに作成する必要があります。 とりあえずは、XUL ファイルと同じディレクトリに <code>findfile.css</code> というファイル名で作成することにします。 (通常、スタイルシートは、別のスキンのための場所に置きます)。 そして、このファイルには、以下に示すスタイルの宣言を加えます。</p> + <pre>#find-text { + min-width: 15em; +} + +#progmeter { + margin: 4px; +} + +.springspace { + width: 10px; +} + +.titlespace { + height: 10px; +} +</pre> + <p>上記のスタイルで指定している内容自体は、これまでと同等のものにすぎませんが、 これによって、第三者がファイル検索ダイアログの外観を変更するような場合には、 スタイル宣言の追加と変更のために、このファイルを修正するかスキンを変更するだけで済むため、より簡単な作業で済むはずです。 なお、利用者がインターフェースのスキンを変更した場合は、 これらのファイルはデフォルトで適用されるディレクトリとは別の場所に置かれたものが使用されます。</p> +</div> +<h3 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.82.92.E3.82.A4.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.88.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.82.92.E3.82.A4.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.88.E3.81.99.E3.82.8B">スタイルシートをインポートする</h3> +<p>XUL から、スタイルシートを使用するためにインポートする方法は、少し前にも説明していますが、 以下の例で示すような記述になります。</p> +<pre><?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?> +</pre> +<p>これは、ブックマークウィンドウ用 XUL ファイルの最初の方に記述されている内容と、おそらくは同じです。 この指定によって、<code>bookmark.css</code> というブックマーク用のスタイルシートをインポートします。 ここでは特定のファイル名を指定していませんが、 Mozilla のスキンシステムは十分洗練されているので、適切なスタイルシートが自動的に選択されます。 なお、同様の指定は、グローバルスタイルシートファイル (<code><a class="external" rel="freelink">chrome://global/skin</a></code>) のときにも行っています。</p> +<p>また、スタイルシートは CSS の <code>import</code> ディレクティブを使用することで、 他のスタイルシートからインポートすることも可能です。 このため、通常は、各 XUL ファイルからは、それぞれに関連付けられた 1 つのスタイルシートだけをインポートし、 共通のグローバルスタイルシートは、そのスタイルシートからインポートするようにします。 これは、以下に示すコードによって行なうことが可能です。 これによって、XUL ファイルからグローバルスタイルシートをインポートする指定を削除できます。</p> +<pre class="eval"><b>XUL からのスタイルのインポート:</b> +<?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> + +<b>CSS からのスタイルのインポート:</b> +@import url(<a class="external" rel="freelink">chrome://global/skin/</a>); +</pre> +<p>2 つめの構文の方が、XUL ファイル自体と依存関係があるファイル数を減少させることができるので好まれています。</p> +<div class="highlight"> + <p>それでは、<code>findfile.xul</code> から、グローバルスタイルシートのインポートを削除して <code>findfile.css</code> に追加してください。</p> +</div> +<p>全ての要素は <a href="ja/CSS">CSS</a> を使うことでスタイルを設定することが可能です。 このとき、スタイルを設定したい要素を選択するためにセレクタ (selector) を使用します。 (セレクタとは、スタイルルールの中括弧 "{" の前の部分のことです)。 以下に、有効なセレクタの一部を一覧にまとめたものを示します。</p> +<dl> + <dt> + button</dt> + <dd> + 全ての <code>button</code> 要素に適用されます。</dd> + <dt> + #special-button</dt> + <dd> + <code>id</code> が <code>special-button</code> である要素に適用されます。</dd> + <dt> + .bigbuttons</dt> + <dd> + <code>class</code> が <code>bigbuttons</code> である、全ての要素に適用されます。</dd> + <dt> + button.bigbuttons</dt> + <dd> + <code>class</code> が <code>bigbuttons</code> である、全ての <code>button</code> 要素に適用されます。</dd> + <dt> + toolbar > button</dt> + <dd> + <code>toolbar</code> 要素の中に直接置かれた、全ての <code>button</code> 要素に適用されます。</dd> + <dt> + toolbar > button.bigbuttons</dt> + <dd> + <code>toolbar</code> 要素の中に直接置かれた、<code>class</code> が <code>bigbuttons</code> である、全ての <code>button</code> 要素に適用されます。</dd> + <dt> + button.bigbuttons:hover</dt> + <dd> + <code>class</code> が <code>bigbuttons</code> である、全ての <code>button</code> 要素が該当しますが、実際にスタイルが適用されるのはマウスがその要素の上にあるときのみです。</dd> + <dt> + button#special-button:active</dt> + <dd> + <code>id</code> が <code>special-button</code> である要素が該当しますが、適用されるのはアクティブ (その要素上でマウスボタンが押されている状態) のときのみです。</dd> + <dt> + box[orient="horizontal"]</dt> + <dd> + <code>orient</code> 属性が <code>horizontal</code> に設定されている、全ての <code>box</code> 要素に適用されます。</dd> +</dl> +<p>これらのルールは、必要に応じて任意に組み合わせることが可能です。 要素のスタイル付けを指定する際には、いつも可能な限り正確な指定を行うことを心がけてください。 そのほうが効率的ですし、間違った対象にスタイルを付けてしまう可能性も減らすことができるはずです。</p> +<div class="highlight"> + <p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-style.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-style.xul">表示</a></p> +</div> +<p>次のセクションでは、ツリーにスタイルを適用する方法を見ていきます。</p> + +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Persistent_Data" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Styling_a_Tree">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/additional_install_features/index.html b/files/ja/archive/mozilla/xul/tutorial/additional_install_features/index.html new file mode 100644 index 0000000000..59b096fcdd --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/additional_install_features/index.html @@ -0,0 +1,47 @@ +--- +title: その他のインストール機能 +slug: Archive/Mozilla/XUL/Tutorial/Additional_Install_Features +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Additional_Install_Features +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Install_Scripts" style="float: left;">« 前のページ</a><br></p> +</div></div> +<p>このセクションでは、インストーラのその他の機能をとりあげます。</p> +<h2 id="Installer_File_Manipulation" name="Installer_File_Manipulation">インストーラによるファイル操作</h2> +<p>前のセクションでは、基本的なインストーラについて述べました。 インストール中にもう少し凝ったことをしたくなるかもしれません。 例えば、特定のライブラリが存在しているときのように、ある条件を満たしたときにだけ、パッケージをインストールするような場合です。</p> +<p>Install オブジェクトの他に、インストールスクリプトは File オブジェクトも備えています。 これは、ディスクのファイルを調べたり変更したりすることができる関数を備えています。 インストールの前後でファイルを移動したりコピーしたり削除したりすることができるのです。 例えば、事前にあるファイルのバックアップを取っておきたいこともあるでしょう。</p> +<p>次のコードは、 "<code>/bin/grep</code>" ファイルのコピーを作成して、それを "<code>/main</code>" ディレクトリに置きます。</p> +<pre class="brush:text">var binFolder = getFolder("file:///", "bin"); +var grep = getFolder(binFolder, "grep"); + +var mainFolder = getFolder("file:///", "main"); + +File.copy(grep, mainFolder); +</pre> +<ul> + <li>最初の行で、<code>/bin</code> ディレクトリへの参照を取得します。'<code>file:///</code>' は、ファイルシステムのルートを表わす特別な文字列です。</li> + <li>ここから、'<code>bin</code>' ディレクトリの中にある '<code>grep</code>' ファイルを探します。ファイルが存在していない場合、インストール中にエラーが生じます。</li> + <li>次に、ふたたびファイルシステムのルートから '<code>main</code>' フォルダを参照します。</li> + <li>最後に、<code>File.copy</code> 関数を呼び出して、ソースファイルを目的の場所にコピーします。</li> +</ul> +<p>ファイルを移動したり、ファイル名を変更したり、ファイルを実行する<a class="external" href="http://www.xulplanet.com/references/elemref/ref_File.html">関数</a>もあります。 このようにして、パッケージと競合するファイルを取り除くことができるのです。</p> +<h2 id="Handling_Errors" name="Handling_Errors">エラーの取り扱い</h2> +<p>エラーは手際よく扱いたいものです。 エラーが生じる原因は、ファイルやディレクトリが存在しない、ディスクの空きスペースが充分でない、など様々です。</p> +<p>エラーが生じたかどうかは、<code>getLastError</code> 関数で知ることができます。戻り値が SUCCESS であればエラーは生じていません。 その他の場合、生じたエラーの種類を示すエラーコードの数字が返されます。 この関数はインストールスクリプトのどこでも呼び出すことができ、直前の操作までにエラーが生じたかを知ることができます。</p> +<p>エラーが生じたら、インストールを中止したいと思うでしょうし、ユーザに対してエラーメッセージを表示したいかもしれません。 例えば、次のコードをスクリプトの最後の部分に追加します。</p> +<pre class="brush:text">if ( getLastError() == SUCCESS ) { + performInstall(); +} else { + cancelInstall(); +}</pre> +<p><code>getLastError</code> が返すエラーコードは、Mozilla ソースファイルの <code><a class="external" href="http://lxr.mozilla.org/mozilla/source/xpinstall/src/nsInstall.h">nsInstall.h</a></code> にリストアップされています。 インストール中に、実行された手順を記したログファイルが作成され、エラーが生じた場合もこれに記録されます。 ログファイルは、Mozilla をインストールしたディレクトリの '<code>install.log</code>' ファイルです。 インストールが行われるたびに、記録のテキストが追加されていきます。</p> +<p><code>logComment</code> 関数で、ログファイルに任意のテキストを書き込むことができます。引数は一つだけで、書き込むテキストです。</p> +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Install_Scripts" style="float: left;">« 前のページ</a><br></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/advanced_rules/index.html b/files/ja/archive/mozilla/xul/tutorial/advanced_rules/index.html new file mode 100644 index 0000000000..cdcbf116c3 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/advanced_rules/index.html @@ -0,0 +1,254 @@ +--- +title: 高度なルール +slug: Archive/Mozilla/XUL/Tutorial/Advanced_Rules +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Advanced_Rules +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:RDF_Datasources" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Persistent_Data">次のページ »</a></p> +</div> +<p>このセクションでは、さらに高度なルール構文について見ていきます。 +</p> +<h3 id=".E5.AE.8C.E5.85.A8.E3.81.AA.E3.83.AB.E3.83.BC.E3.83.AB.E6.A7.8B.E6.96.87" name=".E5.AE.8C.E5.85.A8.E3.81.AA.E3.83.AB.E3.83.BC.E3.83.AB.E6.A7.8B.E6.96.87"> 完全なルール構文 </h3> +<p>これまでに説明したルールの構文でも、ある程度のデータソースまでは十分役に立ちますが、 +データの表示にもっと複雑な方法が必要になることもあります。 +実のところ、これまでの簡易なルール構文は、以下で説明する完全なルール構文の短縮形に過ぎません。 +なお、簡易なルールの場合と同様に、完全なルールについても <code><code><a href="/ja/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code></code> タグの中に置かれることになります。 +</p><p>完全なルールには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/conditions" title="conditions">conditions</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/action" title="action">action</a></code></code>の 3 つのタグが含まれます。 +ただし、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code> タグは常に必要なわけではありません。 +</p><p><code>conditions</code> 要素は、与えられたリソースをマッチさせる条件を指定するために使用します。 +ここには複数の条件が指定可能ですが、その場合は、すべての条件がマッチする必要があります。 +(簡易なルール構文では、条件は <code>rule</code> 要素自身に直接設定していました)。 +</p><p>そして、条件にマッチするリソースに対しては、<code>actions</code> タグの中のコンテントが生成されることになります。 +(簡易なルール構文では、生成するコンテントは <code>rule</code> タグ中に直接置かれていました)。 +</p> +<h3 id=".E3.83.AB.E3.83.BC.E3.83.AB.E3.81.AE.E6.9D.A1.E4.BB.B6" name=".E3.83.AB.E3.83.BC.E3.83.AB.E3.81.AE.E6.9D.A1.E4.BB.B6"> ルールの条件 </h3> +<p>テンプレートビルダーは、データソースからツリーやメニューなどの要素のコンテントを生成するとき、 +まず最初に <code>ref</code> 属性が参照しているリソースを探して、 +その後、そのリソースのすべての子リソースを走査していきます。 +そのとき、各リソースに対して条件が適用され、 +そのリソースに条件がマッチした場合には、<code>actions</code> 要素の中のコンテントが生成されることになり、マッチしない場合には、コンテントは生成されずに次に移ることになります。 +</p> +<h4 id="content_.E8.A6.81.E7.B4.A0" name="content_.E8.A6.81.E7.B4.A0"> content 要素 </h4> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/conditions" title="conditions">conditions</a></code></code> 要素には 3 つの要素を含めることが可能です。 +1 つめの要素は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/content" title="content">content</a></code></code> で、これは常に存在する必要があり、かつ 1 つしか存在してはなりません。 +この要素では、テンプレートビルダーがリソースを走査するときに渡される情報の<span style="border-bottom: 1px dashed green;" title="placeholder">置き場所</span>を提供します。 +具体的には、ここで条件のマッチ処理を行う際にルートリソースを参照できるよう保持しておく、変数の名前を指定することになります。 +なお、ルートリソースとはテンプレートを含む要素の <code><code id="a-ref"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> 属性で指定されるリソースのことです。 +</p><p><code>content</code> 要素の構文は以下のようになります。 +</p> +<pre><content uri="?var"/> +</pre> +<p>このクエスチョンマークは、それに続くテキストが変数名であることを指示しています。 +これにより、「<code>var</code>」変数を、条件の後の部分で利用することが可能になります。 +もちろん、このとき変数名として好きな名称を指定することが可能です。 +</p> +<h4 id="member_.E8.A6.81.E7.B4.A0" name="member_.E8.A6.81.E7.B4.A0"> member 要素 </h4> +<p>2 つめの要素は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/member" title="member">member</a></code></code> で、これは子リソースを走査する必要があることを示すために使用します。 +この要素では、RDF でリスト記述するために使用する <code>Seq</code>、<code>Bag</code>、<code>Alt</code> 要素のいずれかをコンテナとして参照します。 +</p><p>例えば、以下に一部だけを示す、RDF/XML で記述された都市の一覧があり、 +</p> +<pre><RDF:Seq about="http://www.xulplanet.com/rdf/weather/cities"> + <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Paris"/> + <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Manchester"/> + <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Melbourne"/> + <RDF:li resource="http://www.xulplanet.com/rdf/weather/city/Kiev"/> +</RDF:Seq> + +<RDF:Description about="http://www.xulplanet.com/rdf/weather/city/Paris"> + <cityset:name>Paris</cityset:name> +</RDF:Description> + +. +. +. +</pre> +<p>この各都市を、ツリーの行に表示していきたいとすると、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/member" title="member">member</a></code></code> 要素は以下のように記述することになります。 +</p> +<pre><tree id="citiesTree" datasources="weather.rdf" + ref="http://www.xulplanet.com/rdf/weather/cities"> + <template> + <rule> + <conditions> + <content uri="?list"/> + <member container="?list" child="?city"/> + </conditions> + <rule> + <template> +</tree> +</pre> +<p>このテンプレートを展開する場合、まずテンプレートビルダーは、<code><code id="a-ref"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> 属性の値の取得を行います。 +そして、取得したリソース <code><span class="nowiki">http://www.xulplanet.com/rdf/weather/cities</span></code> は、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/content" title="content">content</a></code></code> タグで指定されている変数「<code>list</code>」に代入されます。 +これにより、ルートリソースと関連するリソースは、この「<code>list</code>」変数を使用して取得することが可能になります。 +</p><p>次に、テンプレートビルダーは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/member" title="member">member</a></code></code> 要素の処理に移ります。 +ここで、ビルダーは順次その要素の子要素を走査していくことになります。 +このとき、リストを持つ親要素は <code><code id="a-container"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code></code> 属性で指定し、子は <code>child</code> 属性で指定します。 +上記の例では、<code><code id="a-container"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code></code> 属性の値は、「<code>list</code>」変数を使用して指定しています。 +このため、親には「<code>list</code>」変数の値、つまりルートリソース「<code><span class="nowiki">http://www.xulplanet.com/rdf/weather/cities</span></code>」が設定されることになります。 +その結果、 「<code><span class="nowiki">http://www.xulplanet.com/rdf/weather/cities</span></code>」 にリストされるすべての子要素が走査されます。 +</p><p>上記の RDF では、リソース 「<code><span class="nowiki">http://www.xulplanet.com/rdf/weather/cities</span></code>」には 4 つの子があり、それぞれ異なる都市を指しています。 +テンプレートビルダーは、子要素を繰り返しで処理し、そのとき対象の子要素と <code>child</code> 属性の値についてのマッチングが行われます。 +ただし、この場合は、単に値を「<code>city</code>」変数 に設定するだけになります。 +つまり、上記の記述によって、繰り返しの間、ビルダーに対象となる子リソースを「<code>city</code>」変数へ代入させることが可能です。 +</p><p>それ以外に条件は無いため、これらの 4 つのリソースは条件にマッチしたことになり、ビルダーはそれぞれに対してコンテントを生成します。 +といっても、上記の例では生成すべきコンテントは設定されていません。 +これは、もう少し後で追加する予定になっています。 +</p> +<h4 id="triple_.E8.A6.81.E7.B4.A0" name="triple_.E8.A6.81.E7.B4.A0"> triple 要素 </h4> +<p>3 つめの要素は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/triple" title="triple">triple</a></code></code> です。 +これは RDF データソースに、指定のトリプル (または<span style="border-bottom: 1px dashed green;" title="assertion">言明</span>) が存在するかどうかをチェックするために使用します。 +トリプルとは、リソースにおけるプロパティのようなものと考えることができます。 +例えば、ブックマークと その URL の間にはトリプルが存在して、 +以下のようなグラフで表現されます +</p> +<pre> URL +(mozilla.org のブックマーク) ──────→ [www.mozilla.org] +</pre> +<p>これは、「mozilla.org のブックマーク」というブックマークと、「www.mozilla.org」の間には、URL プロパティによるトリプルが存在することを意味しています。 +この表現において、最初の部分は「主語 (subject)」、矢印線は「述語 (predicate)」、最後の部分は「目的語 (object)」と呼ばれます。 +これを、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/triple" title="triple">triple</a></code></code> 要素で記述した場合、以下のように表現されます。 +</p> +<pre><triple subject="A Bookmark to mozilla.org" + predicate="URL" + object="www.mozilla.org"/> +</pre> +<p>これは、実際よりも若干単純化されていることに注意してください。 +通常の場合、述語は XML の名前空間を含む URI になり、 +主語は上記のようなブックマークのタイトルではなく、ブックマークのリソース id になります。 +なお、実際にはブックマークのタイトルは、データソースの中で Name を述語とする別のトリプルに含まれてます。 +</p><p><code>triple</code> 要素で、主語 (subject) と目的語 (object) については、変数を参照するように置き換えることができ、 +その場合は変数に設定された値が使用されることになります。 +ただし、変数の値がまだ定義されていない場合には、テンプレートビルダーは値をデータソースから探して変数に代入します。 +</p><p>例えば、都市のデータソースに天気予報の追加を行いたいとした場合、 +以下のような条件を使用することになります。 +</p> +<pre><conditions> + <content uri="?list"/> + <member container="?list" child="?city"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#prediction" + object="?pred"/> +</conditions> +</pre> +<p>テンプレートビルダーが上記を処理するとき、各都市のリソースを繰り返し処理していくところまでは先述の例と同じですが、 +上記では、加えられた <code>triple</code> を処理するために、 RDF データソースから都市の天気予報についての<span style="border-bottom: 1px dashed green;" title="assertion">言明</span>が検索されて、 +「<code>pred</code>」変数に予報が代入されることになります。 +ビルダーは 4 つの都市のそれぞれに対してこれを繰り返します。 +マッチ処理が済むと、ビルダーは予報が見つかった都市に対してのみコンテントの生成を行います。 +つまり、都市に予報のリソースが存在しない場合は、条件は満たされていないことになるため、その都市についてはコンテントの生成は行われないことになります。 +なお、簡易なルール構文を利用する場合と異なり、曖昧になることがないため、述語の先頭に「<code>rdf:</code>」を付ける必要がないことに注意してください。 +</p><p>また、下記の例のように、目的語 (object) の値を、インラインで直接指定することも可能です。 +</p> +<pre><conditions> + <content uri="?city"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#prediction" + object="Cloudy"/> +</conditions> +</pre> +<p>この例も以前のものと類似していますが、天気予報が「Cloudy (くもり)」の場合のみマッチするように指定している点が異なっています。 +その結果、この条件は予報が「Cloudy」になっている都市に対してのみ満たされることになります。 +</p><p>また、さらなるマッチ条件が必要な場合は、トリプルを追加することも可能です。 +例えば、上記の例にさらに温度と風速のチェックを追加する場合は、 +単に追加するリソースのための別のトリプルを追加するだけで済みます。 +この場合、条件はすべてのトリプルから値が得られた場合にのみマッチしたことになります。 +</p><p>以下の例は、新たにトリプルを追加して都市の名前をチェックします。 +このとき、名前は「<code>name</code>」変数に代入されます。 +この条件は、都市に名前があり、かつ予報があるときにのみマッチすることになります。 +</p> +<pre><conditions> + <content uri="?list"/> + <member container="?list" child="?city"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#name" + object="?name"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#prediction" + object="?pred"/> +</conditions> +</pre> +<h3 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.81.AE.E7.94.9F.E6.88.90" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.81.AE.E7.94.9F.E6.88.90"> コンテントの生成 </h3> +<p>ルールがマッチしたときに生成されるコンテントは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/action" title="action">action</a></code></code> 要素の中に指定します。 +これは、ツリーの行やメニュー項目、といったリソースに応じて生成したいコンテントになります。 +また、ここに置くコンテントからは、条件の部分で定義された変数を参照することが可能です。 +したがって、上記の天気の例の場合、「<code>name</code>」と「<code>pred</code>」変数を使用することで、都市名や天気予報を表示させることが可能です。 +なお、「<code>list</code>」や「<code>city</code>」変数も使用は可能ですが、 +それらはテキストではなくリソースの情報が保持されているため、表示させても利用者に意味がある情報にはならないでしょう。 +</p><p>簡易なルール構文では、リソース対応にコンテントを生成する必要がある要素は、<code>uri='rdf:*'</code> を置くことで指定していましたが、 +完全なルール構文の場合、<code><code id="a-uri"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code></code> 属性の値は、条件の部分で設定される変数を指定する必要があります。 +通常、ここには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/member" title="member">member</a></code></code> 要素の <code>child</code> 属性で設定する変数を指定します。 +</p> +<h4 id=".E5.AE.8C.E5.85.A8.E3.81.AA.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E4.BE.8B" name=".E5.AE.8C.E5.85.A8.E3.81.AA.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E4.BE.8B"> 完全なツリーの例 </h4> +<p>以下は、条件とアクションを含めた、ツリーを生成するための完全な例です。 +使用する RDF ファイルは、別ファイルになっています : <a href="https://developer.mozilla.org/samples/xultu/examples/weather.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/weather.rdf">RDF</a> +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advrules_1.xul.txt">ソース</a> +</p> +<pre><tree id="weatherTree" flex="1" datasources="weather.rdf" + ref="http://www.xulplanet.com/rdf/weather/cities"> + <treecols> + <treecol id="city" label="City" primary="true" flex="1"/> + <treecol id="pred" label="Prediction" flex="1"/> + </treecols> + + <template> + <rule> + <conditions> + <content uri="?list"/> + <member container="?list" child="?city"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#name" + object="?name"/> + <triple subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#prediction" + object="?pred"/> + </conditions> + <action> + <treechildren> + <treeitem uri="?city"> + <treerow> + <treecell label="?name"/> + <treecell label="?pred"/> + </treerow> + </treeitem> + </treechildren> + </action> + </rule> + </template> +</tree> +</pre> +<p>このツリーは、2 つの列を持ち、 +それぞれには、都市名 (<code>name</code>) の値と予報 (<code>pred</code>) の値が表示されます。 +</p> +<div class="note"> +<p>ツリーで <code>dont-build-content</code> フラグを利用する場合には、 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/content" title="content">content</a></code></code> 要素を <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> 要素に置き換えてください。 +</p> +</div> +<h3 id=".E3.83.90.E3.82.A4.E3.83.B3.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.83.90.E3.82.A4.E3.83.B3.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B"> バインディングを追加する </h3> +<p>ルールに含めることができる最後の要素は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/bindings" title="bindings">bindings</a></code></code> 要素で、その中には 1 つ以上の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/binding" title="binding">binding</a></code></code> 要素を置くことが可能です。 +このルールで指定するバインディングは、トリプルと同じ構文を持っており、機能もほぼ同じになります。 +例えば、上記の天気の例に対しては、以下のようなバインディングを加えることが可能です。 +</p> +<pre><bindings> + <binding subject="?city" + predicate="http://www.xulplanet.com/rdf/weather#temperature" + object="?temp"/> +</bindings> +</pre> +<p>このバインディングは、各都市に対して気温 (temperature) リソースを取得し、「<code>temp</code>」変数に代入します。 +これはトリプルの挙動と似ていますが、バインディングは条件の判定に影響を与えない点が異なります。 +つまり、都市の情報が表示されるためには、都市名と予報が存在することが必要であるのに対して、 +気温についてはその必要はなく、リソースがある場合についてのみ「<code>temp</code>」変数に代入されて、アクションで利用可能になり、 +都市に気温のリソースがない場合には、「<code>temp</code>」変数に空の文字列に設定されることになります。 +</p><p>次のセクションでは XUL 要素の状態を保存する方法について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:RDF_Datasources" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Persistent_Data">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/anonymous_content/index.html b/files/ja/archive/mozilla/xul/tutorial/anonymous_content/index.html new file mode 100644 index 0000000000..13aaf93e18 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/anonymous_content/index.html @@ -0,0 +1,249 @@ +--- +title: 匿名コンテント +slug: Archive/Mozilla/XUL/Tutorial/Anonymous_Content +tags: + - Tutorials + - XBL + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Anonymous_Content +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Introduction_to_XBL" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XBL_Attribute_Inheritance">次のページ »</a></p> +</div> +<p>このセクションでは、XBL によりコンテントを生成する方法を見ていきます。 +</p> +<h3 id="XBL_.E3.81.A8.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88" name="XBL_.E3.81.A8.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88"> XBL とコンテント </h3> +<p>XBL を使用すれば、要素の中に要素のセットを自動的に追加できます。 +つまり、XUL ファイルでは<span style="border-bottom: 1px dashed green;" title="outer">外枠の</span>要素を指定するだけで、 +XBL に記述されている内側の要素を自動的に追加するように指定することが可能です。 +これにより、複数の<span style="border-bottom: 1px dashed green;" title="widget">ウィジェット</span>から、単一のウィジェットを組み上げることができます。 +こうして作成されたウィジェットは、単一のウィジェットとしてのみ参照することが可能です。 +このため、XUL で外枠の要素に設定された特定の属性を、XBL から生成された内側の要素に対して追加するメカニズムが提供されています (詳細は、<a href="ja/XUL_Tutorial/XBL_Attribute_Inheritance">次のセクション</a>で説明します)。 +</p> +<h4 id=".E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B.E4.BE.8B" name=".E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E5.AE.A3.E8.A8.80.E3.81.99.E3.82.8B.E4.BE.8B"> スクロールバーを宣言する例 </h4> +<p>以下の例は、スクロールバーを宣言するための方法を示しています +(実際のものより若干単純化されています)。 +</p> +<pre><bindings xmlns="http://www.mozilla.org/xbl" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <binding id="scrollbarBinding"> + <content> + <xul:scrollbarbutton type="decrement"/> + <xul:slider flex="1"> + <xul:thumb/> + </xul:slider> + <xul:scrollbarbutton type="increment"/> + </content> + </binding> +</bindings> +</pre> +<p>このファイルに含まれている <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code></code> 要素で宣言されたバインディングは 1 つだけですが、 +CSS の <a href="/ja/docs/Web/CSS/-moz-binding" title="CSS の -moz-binding プロパティは、 Mozilla ベースのアプリケーションで XBL を DOM 要素に結び付けるために使用します。"><code>-moz-binding</code></a> プロパティから参照することを可能にするために、 +バインディングの識別子として <code>id</code> 属性を設定しておく必要があります。 +</p><p>例中の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> タグは、スクロールバーに追加される<span style="border-bottom: 1px dashed green;" title="anonymous content">匿名コンテント</span>を宣言するのに使われています。 +<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> タグ中にあるすべての要素は、バインディングが結び付けられる要素の中に追加されることになります。 +なお、このバインディングはスクロールバーにバインドすることを想定していますが、 +それ以外にバインドすることが禁止されているわけではありません。 +CSS の <a href="/ja/docs/Web/CSS/-moz-binding" title="CSS の -moz-binding プロパティは、 Mozilla ベースのアプリケーションで XBL を DOM 要素に結び付けるために使用します。"><code>-moz-binding</code></a> プロパティに、このバインディングの URI が設定されたすべての要素がこのバインディングを使用することになります。 +</p><p>上記のバインディングの結果、以下の XUL の行は、その下に示すように展開されます。 +(<code>scrollbar</code> 要素には、CSS で上記の XBL がバインドされているものとします) +</p> +<pre class="eval"><scrollbar> + +<b>展開後:</b> + +<scrollbar> + <xul:scrollbarbutton type="decrement"/> + <xul:slider flex="1"/> + <xul:thumb/> + </xul:slider> + <xul:scrollbarbutton type="increment"/> +</scrollbar> +</pre> +<p><code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> タグの中に置かれたコンテントは、スクロールバーに匿名で追加されます。 +この匿名コンテントは画面上には表示されますが、通常の方法ではスクリプトから取得することはできません。 +これは、実際には多数の要素から構成されていたとしても、XUL からは 1 つの単独の要素だけが存在するようにしか見えないことに起因しています。 +</p><p>上記の XBL に記述されている「矢印ボタン」「スライダー」「スライダーにある<span style="border-bottom: 1px dashed green;" title="thumb">サム</span>」「終端にある 2 つめの矢印ボタン」の各要素は、Mozilla ウィンドウのスクロールバーを構成する部品のための要素です。 +また、他のバインディングが、内部に置く XUL 要素としてスクロールバーを利用すると、これらの要素は、それらのバインディングにもバインドされることになります。 +</p><p>なお、XBL にコンテントの要素を記述するときには、 +それらの要素は、デフォルトの XBL の要素としては正しくなく、XUL の要素として扱う必要があることを示すために、 +XUL 名前空間の指定 (<code>xul:</code> の接頭辞) が必要であることに注意して下さい。 +(この名前空間は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></code> タグで宣言されています)。 +もしも、XUL 要素に名前空間を明示しない場合は、Mozilla は要素が XBL であると想定するため、 +正しい要素であるとは認識されず、正常な動作は行われません。 +</p> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E5.90.8D.E5.85.A5.E5.8A.9B.E6.AC.84.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E5.90.8D.E5.85.A5.E5.8A.9B.E6.AC.84.E3.81.AE.E4.BE.8B"> ファイル名入力欄の例 </h4> +<p>別の例を示します。 +今度は、ファイル名の入力欄のためのものです。 +</p> +<pre><binding id="fileentry"> + <content> + <textbox/> + <button label="Browse..."/> + </content> +</binding> +</pre> +<p>このバインディングを要素に設定することによって、その要素はテキストの入力欄と、その後ろの Browse ボタンを持つことになります。 +これらの内側のコンテントは、匿名で作成されるため、DOM を使って見ることはできません。 +</p> +<h3 id="XBL_.E3.81.8B.E3.82.89.E4.B8.8E.E3.81.88.E3.81.9F.E8.A6.81.E7.B4.A0.E3.82.92.E4.B8.8A.E6.9B.B8.E3.81.8D.E3.81.99.E3.82.8B" name="XBL_.E3.81.8B.E3.82.89.E4.B8.8E.E3.81.88.E3.81.9F.E8.A6.81.E7.B4.A0.E3.82.92.E4.B8.8A.E6.9B.B8.E3.81.8D.E3.81.99.E3.82.8B"> XBL から与えた要素を上書きする </h3> +<p>匿名コンテントは、バインディングが要素に設定された場合は常に自動的に生成されます。 +ただし、XUL 側でその要素に子要素を置いた場合、バインディングから与えた要素を上書きします。 +以下に、例として XUL コードの一部を抜き出したものを示します。 +(<code>scrollbar</code> には、前出の XBL がバインドされていると想定しています) +</p> +<pre><scrollbar/> + +<scrollbar> + <button label="Overridden"/> +</scrollbar> +</pre> +<p>最初のスクロールバーは、それ自身ではコンテントを持たないため、XBL ファイルで宣言されたバインディング定義から生成されたコンテントを持つことになります。 +2 番目のスクロールバーは、それ自身がコンテントを持っているため、そちらが使われることになり、XBL の方のコンテントは使用されません。 +その結果、ほとんどスクロールバーとはいえないものが表示されることになります。 +なお、実際にはスクロールバーなどの組み込み要素は、XBL を toolkit パッケージの <code>bindings</code> ディレクトリに置かれたファイルから取得することを補足しておきます。 +</p><p>この上書きの挙動は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#content">content</a></code></code> タグによる要素の定義だけに適用されます。 +プロパティやメソッドなど、XBL で定義するそれ以外の振る舞いについては、コンテントが XBL のものか、XUL 自身のもので上書きされたのかによらず有効です。 +</p> +<h3 id="children_.E8.A6.81.E7.B4.A0.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B" name="children_.E8.A6.81.E7.B4.A0.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B"> children 要素を使用する </h3> +<p>XBL で定義したコンテントと XUL ファイル自身のコンテントの両方を表示させたい場合も、しばしばあると思います。 +これは、XBL の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素を使用することで可能です。 +XUL の方で追加された子要素は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素の場所に追加されることになります。 +これを利用すれば、カスタムメニューウィジェットを手軽に作成することが可能です。 +例えば、以下のようにすれば、編集可能な <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 要素の簡易版を作成することが可能です。 +</p> +<pre class="eval"><b>XUL:</b> + +<menu class="dropbox"> + <menupopup> + <menuitem label="1000"/> + <menuitem label="2000"/> + </menupopup> +</menu> + +<b>CSS:</b> + +menu.dropbox { + -moz-binding: url('<a class=" external" rel="freelink">chrome://example/skin/example.xml#dropbox'</a>); +} + +<b>XBL:</b> + +<binding id="dropbox"> + <content> + <children/> + <xul:textbox flex="1"/> + <xul:button src="<a class=" external" rel="freelink">chrome://global/skin/images/dropbox.jpg</a>"/> + </content> +</binding> +</pre> +<p>この例は、入力欄とその横にボタンを作ります。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> は、XBL に置かれたコンテントの <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素で示す位置に追加されることになります。 +DOM 関数からアクセスすると、コンテントは XUL ファイルに置かれたとおりに見えることになるため、<code>menupopup</code> は <code>menu</code> の子要素になっていることに注意してください。 +XBL から展開されたコンテントは完全に隠されているため、XUL 開発者はそこに存在することすら意識する必要はありません。 +</p><p>その結果、出力されるコンテントは、以下のものと同等になります。 +</p> +<pre><menu class="dropbox"> + <menupopup> + <menuitem label="1000"/> + <menuitem label="2000"/> + </menupopup> + <textbox flex="1"/> + <button src="chrome://global/skin/images/dropbox.jpg"/> +</menu> +</pre> +<h4 id="includes_.E5.B1.9E.E6.80.A7" name="includes_.E5.B1.9E.E6.80.A7"> includes 属性 </h4> +<p>場合によって、子要素には特定の種類のコンテントだけを選択的に置けるようにしたいことや、 +複数の箇所に子要素を設定して、それぞれ異なる種類のコンテントを置けるようにしたいこともあると思います。 +<code>includes</code> 属性を利用すれば、コンテント中に表示する要素を、指定の要素のみに制限することが可能です。 +この属性の値には、単一のタグ名か、タグ名のリストを、(OR 演算を意味する)「<code>|</code>」記号で区切って指定する必要があります。 +</p> +<pre><children includes="button"/> +</pre> +<p>この行によって、 +結び付けられた要素の子要素として含まれている、すべての <code>button</code> を、 +<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> タグのある場所に追加します。 +それ以外の要素は、このタグにはマッチしませんが、 +バインディングに複数の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素を置けば、別の場所にそれ以外のコンテントを追加させることが可能です。 +なお、XUL 側で設定した子要素が、どの <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素にもマッチしなかった場合には、XBL に置かれたコンテントは使用されず、それらのマッチしない全ての要素が代わりに表示されることになります。 +</p><p>ここで、また別の例を見てみましょう。 +今度は、両端に拡大と縮小のためのズームボタンを備えた、画像表示用のウィジェットを作りたいとします。 +これは、画像と 2 つのボタンを持ったボックスとして作成することが可能です。 +このとき、<code>image</code> 要素については、毎回異なったものを指定可能なように、 XBL の外に置く必要があります。 +</p> +<pre class="eval"><b>XUL:</b> + +<box class="zoombox"> + <image src="images/happy.jpg"/> + <image src="images/angry.jpg"/> +</box> + +<b>XBL:</b> + +<binding id="zoombox"> + <content> + <xul:box flex="1"> + <xul:button label="Zoom In"/> + <xul:box flex="1" style="border: 1px solid black"> + <children includes="image"/> + </xul:box> + <xul:button label="Zoom Out"/> + </xul:box> + </content> +</binding> +</pre> +<p>XUL ファイルの方に明示的に記述された子要素は、XBL の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> タグの位置に置かれることになります。 +ここでは、2 つの <code>image</code> 要素があるため、両方が並べて追加されます。 +その結果、表示は以下のものと同等になります。 +</p> +<pre><binding id="zoombox"> + <content> + <xul:box flex="1"> + <xul:button label="Zoom In"/> + <xul:box flex="1" style="border: 1px solid black"> + <image src="images/happy.jpg"/> + <image src="images/angry.jpg"/> + </xul:box> + <xul:button label="Zoom Out"/> + </xul:box> + </content> +</binding> +</pre> +<p>しかしながら、DOM を使用して見た場合には、子要素の位置に変化はなく元のままになります。 +つまり、外枠の XUL ボックスには、2 つ <code>image</code> 要素が子要素として存在しています。 +また、内側の境界付きのボックスの子要素は、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> タグ 1 つだけになります。 +XBL 使用時に DOM を用いる場合、この違いを意識しておくことは重要です。 +また、このことは CSS のセレクタに記述するルールについても当てはまります。 +</p> +<h4 id=".E8.A4.87.E6.95.B0.E3.81.AE_children_.E8.A6.81.E7.B4.A0" name=".E8.A4.87.E6.95.B0.E3.81.AE_children_.E8.A6.81.E7.B4.A0"> 複数の children 要素 </h4> +<p>複数の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素を使用することで、特定の種類の要素を置く場所と、それ以外の要素を置く場所を指定することも可能です。 +このためには、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素に <code>includes</code> 属性を追加して、 +そこに縦棒記号 (|) で区切ったタグ名のリストを設定することで、そのリストに含まれる要素だけをその場所に置くことができます。 +例えば、以下の XBL では、テキストラベルとボタンを、他の要素とは別の場所に表示させることが可能です。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblcontent_1.xml.txt">ソース</a> +</p> +<pre><binding id="navbox"> + <content> + <xul:vbox> + <xul:label value="Labels and Buttons"/> + <children includes="label|button"/> + </xul:vbox> + <xul:vbox> + <xul:label value="Other Elements"/> + <children/> + </xul:vbox> + </content> +</binding> +</pre> +<p>最初の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素では、<code>includes</code> 属性の指定によって、<code>label</code> と <code>button</code> 要素だけが捉えられます。 +そして、2 番目の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> 要素には <code>includes</code> 属性がないため、残りのすべての要素が捉えられることになります。 +</p><p><small><span id="%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8"><a id="%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8"></a><strong>関連ページ</strong></span>: XBL リファレンスの <a href="ja/XBL/XBL_1.0_Reference/Anonymous_Content">匿名コンテント</a> セクション</small> +</p><p>次のセクションでは、属性情報を匿名コンテントへ継承する方法を見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Introduction_to_XBL" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XBL_Attribute_Inheritance">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/box_model_details/index.html b/files/ja/archive/mozilla/xul/tutorial/box_model_details/index.html new file mode 100644 index 0000000000..6a1658fbfb --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/box_model_details/index.html @@ -0,0 +1,139 @@ +--- +title: ボックスモデルの詳細 +slug: Archive/Mozilla/XUL/Tutorial/Box_Model_Details +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details +--- +<p> </p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Element_Positioning" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Groupboxes">次のページ »</a></p> +</div> + +<p>ここまでのセクションで、ボックスモデルについて多くの特徴を見てきました。 ここでは、いくつか例を示しながら、その挙動について、さらに詳細に見ていきます。</p> + +<h3 id=".E8.A9.B3.E7.B4.B0.E3.81.AA.E3.83.AC.E3.82.A4.E3.82.A2.E3.82.A6.E3.83.88.E3.81.AE.E8.AA.BF.E6.95.B4" name=".E8.A9.B3.E7.B4.B0.E3.81.AA.E3.83.AC.E3.82.A4.E3.82.A2.E3.82.A6.E3.83.88.E3.81.AE.E8.AA.BF.E6.95.B4">詳細なレイアウトの調整</h3> + +<p><a href="/ja/docs/Web/CSS/min-width" title="min-width は、要素の最小幅を指定する CSS プロパティです。width プロパティの 使用値 が、min-width で指定した値を下回らないようにします。"><code>min-width</code></a> や <a href="/ja/docs/Web/CSS/max-height" title="CSS の max-height プロパティは要素の最大の高さを設定するのに使われます。height プロパティの使用値は、max-height に設定した値よりも大きくなりません。"><code>max-height</code></a> などのスタイルプロパティは、どんな要素にも設定できます。 これまでは、例としてボタンやテキスト入力欄に設定していましたが、スペーサーやボックスに設定することも可能です。 また、<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性も、あらゆる要素に設定することが可能です。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_1.xul">表示</a></p> + +<pre><hbox flex="1"> + <button label="Left" style="min-width: 100px;" flex="1"/> + <spacer flex="1"/> + <button label="Right" style="min-width: 100px;" flex="1"/> +</hbox> +</pre> + +<div class="float-right"><img alt="画像:boxdet1.png"></div> + +<p>上の例の 3 つの要素はすべて伸縮可能であるため、リサイズすることが可能です。 2 つのボタンには、100 ピクセルで最小幅が指定されています。 このため、ボタンは最小幅よりも小さくなることはありませんが、大きくすることは可能です。 このため、ウィンドウ全体は、 2 つのボタンを置くために最低限必要なサイズである 200 ピクセル以上の大きさで表示されることになります。 また、伸縮可能に設定することにより追加のスペースが必要になることはないため、 3 つの要素がすべて伸縮可能であっても、それ以上の場所が必要となることはありません。</p> + +<p>上記の画像が示すように、2 つのボタンがコンテナとなる要素にあわせて垂直に広がってしまっています。 (コンテナは、この場合は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> です)。 水平ボックスの <code><code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 属性を使えば、この挙動は変更できます。 また、要素に最大の高さ設定することによっても、縦に広がることを抑止することが可能です。 さらに、ボックスに最大の高さが指定されている場合、内部の要素はその制約を受けることを利用して、 個々の要素ではなく、ボックス自身に最大の高さを設定することによって抑止することも可能です。 ただし、この方法をとる場合は「要素の大きさが事前にわかっている必要がある」という問題をクリアする必要があります。 以下の例では、<code><code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 属性を設定しています。</p> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_2.xul">表示</a></p> + +<pre><hbox flex="1" align="top"> + <button label="Left" style="min-width: 100px;" flex="1"/> + <spacer flex="1"/> + <button label="Right" style="min-width: 100px;" flex="1"/> +</hbox> +</pre> + +<h4 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.83.A2.E3.83.87.E3.83.AB.E3.81.AE.E3.81.BE.E3.81.A8.E3.82.81" name=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.83.A2.E3.83.87.E3.83.AB.E3.81.AE.E3.81.BE.E3.81.A8.E3.82.81">ボックスモデルのまとめ</h4> + +<p>一般に、複雑なレイアウトを行なうためには、ネストしたボックスを追加していき、要素のいくつかには最小サイズと最大サイズを指定し、要素によっては伸縮可能を指定をする必要があるでしょう。 どんなサイズでも問題なく表示できるインターフェイスが理想です。 ボックスモデルは難しいので、自分自身でいろいろあれこれ試行錯誤しながら体得していってください。</p> + +<p>以下は、2 種類のボックスの概要です。</p> + +<p><strong>水平ボックス</strong></p> + +<ol> + <li>要素を水平方向に順に配置していきます。</li> + <li>伸縮可能性 (<code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code> 属性) は水平方向の伸縮を制御します。</li> + <li>まとめ方 (<code id="a-pack"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code> 属性) は、水平方向に余白がある場合の子要素のまとめ位置を制御します。</li> + <li>そろえ方 (<code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> 属性) は、横一行に並んだ各要素の縦位置をどのようにそろえるかを制御します。</li> +</ol> + +<p><strong>垂直ボックス</strong></p> + +<ol> + <li>要素を垂直方向に一列に配置します。</li> + <li>伸縮可能性 (<code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code> 属性) は垂直方向の伸縮を制御します。</li> + <li>まとめ方 (<code id="a-pack"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code> 属性) は、垂直方向に余白がある場合の子要素のまとめ位置を制御します。</li> + <li>そろえ方 (<code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> 属性) は、縦一列に並んだ各要素の横位置をどのようにそろえるかを制御します。</li> +</ol> + +<p>ボックスは、テーブルのような HTML 要素の内部を含めて、XUL ファイルのどこにでも置くことができます。 ただし、HTML 要素の内部に置いた場合は、その部分のレイアウトは HTML 要素が制御することになります。 このため、HTML 要素の内部に置かれたボックスでは <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> は期待した通りに正しく動作しなくなります。 伸縮可能性 (<code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code> 属性) は、ボックスかボックス型の要素の内部にある要素にとってだけ意味があるということを覚えておいてください。</p> + +<p><span id="Layout_Examples"></span></p> + +<h3 id=".E3.83.AC.E3.82.A4.E3.82.A2.E3.82.A6.E3.83.88.E3.81.AE.E4.BE.8B" name=".E3.83.AC.E3.82.A4.E3.82.A2.E3.82.A6.E3.83.88.E3.81.AE.E4.BE.8B">レイアウトの例</h3> + +<p><span id="Using_Spacers"></span></p> + +<h4 id=".E3.82.B9.E3.83.9A.E3.83.BC.E3.82.B5.E3.83.BC.E3.82.92.E4.BD.BF.E3.81.86" name=".E3.82.B9.E3.83.9A.E3.83.BC.E3.82.B5.E3.83.BC.E3.82.92.E4.BD.BF.E3.81.86">スペーサーを使う</h4> + +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_3.xul">表示</a></p> + +<pre><hbox> + <button label="One"/> + <spacer style="width: 5px"/> + <button label="Two"/> +</hbox> +</pre> + +<p>ここでは、スペーサーは、幅を明示的に 5 ピクセルに設定することによって、2 つのボタンの間のセパレータとして使用しています。 同様の効果は、CSS の <a href="/ja/docs/Web/CSS/margin" title="CSS の margin プロパティは、要素の全四辺のマージン領域を設定します。これはすべての個別のマージン (margin-top, margin-right, margin-bottom, margin-left) を一度に設定する一括指定です。"><code>margin</code></a> プロパティを使って、マージンを設定することでも可能です。</p> + +<h4 id=".E3.83.9C.E3.82.BF.E3.83.B3.E3.82.92.E4.B8.AD.E5.A4.AE.E3.81.AB.E7.BD.AE.E3.81.8F" name=".E3.83.9C.E3.82.BF.E3.83.B3.E3.82.92.E4.B8.AD.E5.A4.AE.E3.81.AB.E7.BD.AE.E3.81.8F">ボタンを中央に置く</h4> + +<p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_4.xul">表示</a></p> + +<pre><hbox pack="center" align="center" flex="1"> + <button label="Look at Me!"/> + <button label="Push Me!"/> +</hbox> +</pre> + +<p>この例では、内部にボタンが 2 つ置かれている水平ボックスがあって、ボックスには <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性が設定されています。 また、ボックスには、ボタンを水平方向で中央に置くために <code><code id="a-pack"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 属性が設定されており、 さらに、ボタンを垂直方向で中央に置くための <code><code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 属性も設定されています。 このため、ボタンは水平と垂直の両方向で中央に置かれることになります。 この例は、垂直ボックスに変更しても、2 番目のボタンが最初のボタンの隣りではなく下側に来ることを除けば、同様に動作します。</p> + +<h4 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0" name=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0">テキスト検索ダイアログ</h4> + +<p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxdet_5.xul">表示</a></p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="findtext" title="Find Text" orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox flex="3"> + <label control="t1" value="Search Text:"/> + <textbox id="t1" style="min-width: 100px;" flex="1"/> + </vbox> + + <vbox style="min-width: 150px;" flex="1" align="start"> + <checkbox id="c1" label="Ignore Case"/> + <spacer flex="1" style="max-height: 30px;"/> + <button label="Find"/> + </vbox> + +</window> +</pre> + +<div class="float-right"><img alt="画像:boxdet-ex3.png"></div> + +<p>この例では、2 つの垂直ボックスが作られています。 1 つはテキスト入力欄、もう 1 つはチェックボックスとボタンのためのものです。 左のボックスは、右のボックスの 3 倍の伸縮性を持っています。 そのため、ウィンドウのサイズが増えた場合、左のボックスは、常に右の 3 倍の割合で増えたスペースを受け取ります。 また、右のボックスは、150 ピクセルの最小幅が設定されています。</p> + +<p>テキスト入力欄は伸縮可能です。 そのため、ウィンドウのサイズが変更されると、テキスト入力欄のサイズも変わります。 テキスト入力欄にも、100 ピクセルの最小幅が設定されています。 チェックボックスは、右のボックスにラベルとともに表示されます。 チェックボックスのすぐ下には、スペーサーがあります。 スペーサーは伸縮しますが、30 ピクセル以上になることはありません。 このため、チェックボックスと Find ボタンは、30 ピクセル以内で間隔をあけて配置されます。</p> + +<p>2 番目のボックスは、<code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> 属性により、開始位置 (<code>start</code>) で、そろえる指定になっています。 これによって、子要素は左端にそろえられます。 この指定をしなかった場合、デフォルト値である <code>stretch</code> が指定されたことになり、子要素は水平方向いっぱいに伸張 (<span style="color: green;">stretch</span>)することになります。 ここでは、Find ボタンのサイズは変更したくないため、<code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code> 属性を設定する必要があります。</p> + +<p>次は、さらに特定用途向けのボックス型である、グループボックスについて学びます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Element_Positioning" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Groupboxes">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/box_objects/index.html b/files/ja/archive/mozilla/xul/tutorial/box_objects/index.html new file mode 100644 index 0000000000..05a6b50ae9 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/box_objects/index.html @@ -0,0 +1,158 @@ +--- +title: ボックスオブジェクト +slug: Archive/Mozilla/XUL/Tutorial/Box_Objects +tags: + - Tutorials + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/Box_Objects +--- +<p> </p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Manipulating_Lists" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XPCOM_Interfaces">次のページ »</a></p> +</div> + +<p>このセクションでは、ボックスオブジェクトについて説明します。 このオブジェクトは、XUL ボックスの表示とレイアウトに関する情報、 言い換えれば XUL のレイアウトに関するいくつかの詳細な情報を保持しています。</p> + +<h3 id="Mozilla_.E3.81.AE.E3.83.AC.E3.82.A4.E3.82.A2.E3.82.A6.E3.83.88.E5.87.A6.E7.90.86" name="Mozilla_.E3.81.AE.E3.83.AC.E3.82.A4.E3.82.A2.E3.82.A6.E3.83.88.E5.87.A6.E7.90.86">Mozilla のレイアウト処理</h3> + +<p>Mozilla は、対象をコンテントツリーとレイアウトツリーの 2 つのツリーに分けて処理します。 コンテントツリーは、ソースコードで見つかった内容をノードとして保持するツリーです。 レイアウトツリーは、それとは別のノードからなるツリーで、そのノードは個々の表示可能なコンポーネントに対応しています。 レイアウトツリーは、表示が期待されているものをノードとするような構造を保持しています。 このため、コンテントツリーとレイアウトツリーのノードが 1 対 1 に対応しているとは限りません。 一部のコンテントノードに対しては、複数のレイアウトオブジェクトが存在することがあります。 例えば、段落"の場合、レイアウトオブジェクトは、含まれる個々の行ごとに存在することになります。 逆に、一部のコンテントノードには、レイアウトオブジェクトが全く存在しません。 例えば、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素は、いかなる場合でも表示されることはないので、レイアウトオブジェクトは存在しません。 同様に、<code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> によって隠されている要素についても、レイアウトオブジェクトは存在しません。</p> + +<p>一般に <a href="ja/DOM">DOM</a> は、文書の内容、あるいは構造に関係する情報の取得と変更についてのみ用いられます。 このため、与えられた要素から、どのような種類のコンテントツリーのノードが作成されるかは、比較的簡単に決定されます。 例えば、XUL 要素は、XULElement 型のコンテントノードを持つことになります。</p> + +<p>一方、どのレイアウトオブジェクトが作成されるかは、より複雑な手法で決定されます。 このために、「タグ名」「要素の属性」「数々の <a href="ja/CSS">CSS</a> プロパティ」「周囲の要素とレイアウトオブジェクト」「要素に結びつけられた XBL (XBL については<a href="ja/XUL_Tutorial/Introduction_to_XBL">後のセクション</a>で記述します) 」といった様々な情報が、組み合わされて利用されます。 要素に対してスタイルを変更していなければ、通常、ほとんどの XUL 要素は、ボックスレイアウトオブジェクトあるいはその派生型を利用します。 すべての XUL 要素はボックスの一種であること、つまりボックスは表示されるすべての XUL 要素の基本であることを思い出してください。 なお、ボックスには、個々の XUL 要素の種類に応じて特化された 25 以上の派生型があります。 これらの派生型の中でも、スタック (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>) やリストボックス (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code>) などは、基本的なボックスよりも複雑なレイアウトを行うために必要になりますが、 ボタンなどそれ以外のものは、独自のマウスとキーイベントの処理を追加するためのみに利用されています。</p> + +<p>単に CSS の <a href="/ja/docs/Web/CSS/display" title="CSS の display プロパティは、要素の表示種別を指定し、これは要素がボックスを生成する方法の二つの基本的な品質から成ります。 — 外部表示種別はボックスがフローレイアウトにどのように加わるのかを定義し、内部表示種別はボックスの子がどのように配置されるのかを定義します。"><code>display</code></a> プロパティが別のものに変更されるだけでも、要素に結びつけられたレイアウトオブジェクトは取り除かれて、代わりに全く異なる種類のオブジェクトが作成されることがあります。 例えば、ボタン要素の <a href="/ja/docs/Web/CSS/display" title="CSS の display プロパティは、要素の表示種別を指定し、これは要素がボックスを生成する方法の二つの基本的な品質から成ります。 — 外部表示種別はボックスがフローレイアウトにどのように加わるのかを定義し、内部表示種別はボックスの子がどのように配置されるのかを定義します。"><code>display</code></a> プロパティの値を、デフォルトの <code>-moz-box</code> から、HTML のブロック要素で使用される <code>block</code> に変更した場合、ボタンのレイアウトオブジェクトは削除され、代わりにブロックオブジェクトが作成されることになります。 また、これに従って要素の外観と機能も変更されます。</p> + +<p>XUL アプリケーションを開発するためだけであれば、レイアウトオブジェクトの構築方法について詳細を知る必要はありませんが、 少なくとも、上で述べた XUL レイアウトについての知識は、さらに高度な XUL 開発のために、非常に役に立つと思います。</p> + +<h3 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" name=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88">ボックスオブジェクト</h3> + +<p>レイアウトオブジェクトは、XUL のレイアウトコンポーネントが内部的に使用するものなので、 開発者が操作を行うためにアクセスすることはできません。 しかしながら、XUL ではその代わりにレイアウトを操作するためのヘルパーオブジェクトを提供しています。 これらはボックスオブジェクトと呼ばれており、レイアウトに関係する情報にアクセスすることを可能にします。 また、その名が示しているように、全てのボックスを基本とする要素で利用することが可能です。</p> + +<p>ボックスオブジェクトにはいくつかの派生型がありますが、普段はそのうちの 1 組だけが利用されます。 それ以外のものは、全て特定の要素とともに利用されることが前提になっています。 このため、いくつか関数は持っているものの、直接要素にマップされたメソッドの方が簡単にアクセスできるため、ボックスオブジェクトの方は利用されません。 しかしながら、基本ボックスオブジェクト、あるいは (派生型が実装する) <a class="external" href="http://www.xulplanet.com/references/objref/BoxObject.html">BoxObject</a> インターフェイスには、XUL で開発する上で非常に有用なプロパティがいくつかあります。</p> + +<p>この基本ボックスオブジェクトには、2 つの便利な機能があります。 1 つめは、XUL 要素が表示されている位置とサイズを取得する機能で、 2 つめは、ボックスの中に表示される要素の並び順序を調べる機能になります。 なお、この順番は、要素が DOM に格納されている順番とは異なる場合があります。</p> + +<h4 id=".E8.A6.81.E7.B4.A0.E3.81.AE.E4.BD.8D.E7.BD.AE.E3.81.A8.E3.82.B5.E3.82.A4.E3.82.BA.E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B" name=".E8.A6.81.E7.B4.A0.E3.81.AE.E4.BD.8D.E7.BD.AE.E3.81.A8.E3.82.B5.E3.82.A4.E3.82.BA.E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B">要素の位置とサイズを取得する</h4> + +<p>ボックスオブジェクトには、要素の位置とサイズを知るための 4 つのプロパティ <code>x</code>、<code>y</code>、<code>width</code>、<code>height</code> があります。 <code>x</code> と <code>y</code> は、ウインドウ内に置かれた文書の左上隅 (ウインドウの枠とタイトルバーを除いたところ) からの相対的な画素数による座標を表します。 <code>width</code> と <code>height</code> プロパティも、単位は画素数で CSS の <code>padding</code> と <code>border</code> を、(もしあれば) 含めた上での要素の幅と高さを返します。</p> + +<p>これらの値は、常にそのときの表示位置と表示サイズになるため、要素の移動やリサイズを行った場合、それに応じて変更されます。 例えば、<span style="border-bottom: 1px dashed green;" title="flexible">伸縮可能</span>な要素のサイズを変更した場合、ボックスオブジェクトの寸法もそれに伴って更新されます。 この挙動は、以下の例で確認できます。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_1.xul">表示</a></p> + +<pre><button label="Click Me" + oncommand="alert('The width is ' + this.boxObject.width);"/> +</pre> + +<p><br> + 普通は、要素自身が内容に合わせて適切なサイズを定めるため、あまり利用しませんが、 要素に対して <code>width</code> と <code>height</code> 属性を設定することで、個別に幅と高さを指定することが可能です。 これらの属性は、デフォルトのサイズを指定されたサイズで上書きするため、 要素を特定のサイズで表示させたいのであれば、 属性に対応する、<code>width</code> と <code>height</code> プロパティを利用して、 いつでも要素の寸法を調整することができます。 明示的にサイズを設定した要素に対してこれらのプロパティの値を取得した場合、設定されているサイズが戻ります。 <code>width</code> または <code>height</code> 属性 (またはプロパティ) が設定されていない場合は、空文字列が戻ることに注意してください。 これは、これらのプロパティから、そのときのサイズを取得することはできないということを意味しています。 そのときのサイズが必要な場合は、ボックスオブジェクトのプロパティを利用しなければなりません。</p> + +<p>少しばかり混乱させたかもしれませんが、要約すると、要素の width と height プロパティが XUL で設定されたサイズを返すのに対して、ボックスオブジェクトの width と height プロパティは現在の表示サイズを返すということになります。</p> + +<h4 id=".E9.9A.A0.E3.81.95.E3.82.8C.E3.81.9F.E8.A6.81.E7.B4.A0.E3.81.A8.E6.8A.98.E3.82.8A.E7.95.B3.E3.81.BE.E3.82.8C.E3.81.9F.E8.A6.81.E7.B4.A0" name=".E9.9A.A0.E3.81.95.E3.82.8C.E3.81.9F.E8.A6.81.E7.B4.A0.E3.81.A8.E6.8A.98.E3.82.8A.E7.95.B3.E3.81.BE.E3.82.8C.E3.81.9F.E8.A6.81.E7.B4.A0">隠された要素と折り畳まれた要素</h4> + +<p><code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> 属性を指定すると、要素は表示されないように隠されます。 表示がされないために、ボックスオブジェクトの位置とサイズを表す 4 つのプロパティの値は、すべて 0 になります。 要素が隠されると、表示から取り除かれてレイアウトオブジェクトも削除されます。 どこにも表示されていないので位置もサイズも持っていません。</p> + +<p>また、<code><code id="a-collapsed"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code></code> 属性を指定した場合は、要素は表示されないように折り畳まれます。 この属性も利用者に対しては、要素の表示という点で <code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code>と同じ効果を与えますが、 内部的には、要素のサイズが 0 に変更されるだけで、要素自体は画面に残り、レイアウトオブジェクトも完全に保持されます。 まとめると、<code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> によって隠されても、<code><code id="a-collapsed"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code></code> によって折畳まれても、要素の幅と高さは 0 になります。 また、隠されている要素の位置 x と y は 0 である一方、折り畳まれている要素では、ウインドウ内の位置が維持されます。</p> + +<p><code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> と <code><code id="a-collapsed"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/collapsed">collapsed</a></code></code> の状態の取得と設定は、対応するプロパティを利用することで可能です。 以下に例を示します。</p> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_2.xul">表示</a></p> + +<pre><script> +function showPositionAndSize() +{ + var labelbox = document.getElementById('thelabel').boxObject; + + alert("Position is (" + labelbox.x + "," + labelbox.y + + ") and size is (" + labelbox.width + "," + + labelbox.height + ")"); +} +</script> + +<button label="Hide" + oncommand="document.getElementById('thelabel').hidden = true;"/> +<button label="Show" + oncommand="document.getElementById('thelabel').hidden = false;"/> +<button label="Collapse" + oncommand="document.getElementById('thelabel').collapsed = true;"/> +<button label="Uncollapse" + oncommand="document.getElementById('thelabel').collapsed = false;"/> +<button label="Show Position/Size" + oncommand="showPositionAndSize();"/> +<label id="thelabel" value="I am a label"/> +</pre> + +<p>この例で、ラベルを隠して、かつ折り畳んだ場合、隠されたものとして扱われることに注意してください。 といっても、この場合も折り畳み状態が解除されたわけではないので、ラベルを再び表示させるためには、隠した状態と折り畳んだ状態の両方を解除する必要があります。</p> + +<h3 id="XUL_.E8.A6.81.E7.B4.A0.E3.81.AE.E4.B8.A6.E3.81.B3.E6.96.B9" name="XUL_.E8.A6.81.E7.B4.A0.E3.81.AE.E4.B8.A6.E3.81.B3.E6.96.B9">XUL 要素の並び方</h3> + +<p>ボックスオブジェクトは、要素の表示上の並び順を特定するために利用できます。 この並び順は、ソース内での順序と異なっている可能性があります。 <code><a href="ja/DOM/element.childNodes">childNodes</a></code>、<code><a href="ja/DOM/element.firstChild">firstChild</a></code>、<code><a href="ja/DOM/element.nextSibling">nextSibling</a></code> といった DOM プロパティが、文書ツリー内での要素のナビゲーションに利用できることを思い出してください。 ボックスオブジェクトでも、同じような処理が可能ですが、要素は表示上の並びに従って取得されます。</p> + +<p>ボックスオブジェクトには、このためにプロパティとして <code>firstChild</code>、<code>lastChild</code>、<code>nextSibling</code>、<code>previousSibling</code>、<code>parentBox</code> が用意されています。 これらは、それぞれの名前が示すままの機能を持ち、戻り値として要素を返します。 例えば、<code>firstChild</code> プロパティは、ボックス内の最初の位置に表示されている子要素を返します。 なお、ボックスには DOM の <code>childNodes</code> プロパティに対応するものが存在しません。 このため、同様の処理を行うには、<code>nextSibling</code>、あるいは <code>previousSibling</code> プロパティを利用して、隣接ノードを取得していくことで次の処理対象を選択していく必要があります。</p> + +<p>ボックスオブジェクトのナビゲーションでは、<code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> によって隠された要素が除外される点が、DOM ツリーのナビゲーションとは異なっています。 つまり、6 つの子要素を持つボックスで、最初の 2 つが隠されていた場合、<code>firstChild</code> プロパティは 3 番目の要素を返します。 一方、<code>collapsed</code> によって折り畳まれた要素は、サイズは 0 であるものの、依然として表示はされているため、ボックスオブジェクトのナビゲーションにも含まれることになります。 例えば、以下のボックスでは、「Button 2」は隠されているため、「Button 1」の隣接要素は「Button 3」になります。 また、「Button 4」は折り畳まれているだけなので、「Button 3」の隣接要素は、「Button 4」になります。</p> + +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_3.xul">表示</a></p> + +<pre><hbox> + <button label="Button 1" + oncommand="alert('Next is: ' + this.boxObject.nextSibling.label);"/> + <button label="Button 2" hidden="true"/> + <button label="Button 3" + oncommand="alert('Next is: ' + this.boxObject.nextSibling.label);"/> + <button label="Button 4" collapsed="true"/> +</hbox> +</pre> + +<h4 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E4.B8.A6.E3.81.B3.E5.88.B6.E5.BE.A1.E5.B1.9E.E6.80.A7" name=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E4.B8.A6.E3.81.B3.E5.88.B6.E5.BE.A1.E5.B1.9E.E6.80.A7">ボックスの並び制御属性</h4> + +<p>XUL ボックスがウインドウ上で配置されるとき、子要素はいくつかのプロパティ、 具体的には、縦か横かを示すための「方向 」「並びグループ」正順か逆順かを示す「順序 」を元にして並べられます。</p> + +<h5 id="orient_.E5.B1.9E.E6.80.A7" name="orient_.E5.B1.9E.E6.80.A7">orient 属性</h5> + +<p>通常、方向は <code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性により変更されます。 また、状況に応じて対応する CSS プロパティ <a href="/ja/docs/Web/CSS/-moz-box-orient" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>-moz-box-orient</code></a> を代わりに利用することも可能です。 この属性については、以前の<a href="ja/XUL_Tutorial/The_Box_Model">ボックスについてのセクション</a>で説明されています。</p> + +<h5 id="ordinal_.E5.B1.9E.E6.80.A7" name="ordinal_.E5.B1.9E.E6.80.A7">ordinal 属性</h5> + +<p><code><code id="a-ordinal"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code></code> 属性は、要素の並びグループの指定に利用します。 これは、CSS プロパティ <a href="/ja/docs/Web/CSS/-moz-box-ordinal-group" title="要素が属する序数グループを示します。低い序数グループを持つ要素は、より高い序数を有するものの前に表示されます。"><code>-moz-box-ordinal-group</code></a> を利用することでも指定可能です。</p> + +<p><code>ordinal</code> によって、より小さな並びに設定された要素は、より大きな並びに設定された要素よりも、ボックス内で前に配置されます。 例えば、<code>ordinal</code> が 2 の要素は、<code>ordinal</code> が 3 以上の要素より前に位置し、<code>ordinal</code> 1 の要素の後に位置することになります。 <code>ordinal</code> のデフォルト値は 1 です。 このため、要素の並び順を変えたい場合、たくさんの要素の <code>ordinal</code> を変更する必要があるときがしばしばあると思います。</p> + +<p>通常は、要素の並び順を変えたい場合、単にソース内に記述する順番を変えれば済むため、 <code>ordinal</code> で要素の並びを調整することは、あまり一般的なことではありません。 しかし、この操作は DOM を変更せずに、後から項目の並び替えを行うために利用できます。 以下に例を示します。</p> + +<p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_4.xul">表示</a></p> + +<pre><hbox> + <button label="One" oncommand="this.ordinal++;"/> + <button label="Two" oncommand="this.ordinal++;"/> + <button label="Three" oncommand="this.ordinal++;"/> +</hbox> +</pre> + +<p>最初に、ボタン「One」を押した場合、<code>ordinal</code> が 1 から 2 に加算されます。 他のボタンの <code>ordinal</code> は 1 のままなので、ボタン「One」は最後に表示されるようになります。 次に、ボタン「Two」を押すと、 <code>ordinal</code> が 1 増えて、ボタンは行末へ移動します。 これは、<code>ordinal</code> が同じ項目は、ソース内と同じ順序で表示されるためです。 更にもう一度、ボタン「One」を押すと、<code>ordinal</code> が 3 に増えて、末尾に移動します。 最後に、ボタン「Three」を押すと、<code>ordinal</code> は 2 に増え、他の 2 つのボタンの間に表示されます。</p> + +<h5 id="dir_.E5.B1.9E.E6.80.A7" name="dir_.E5.B1.9E.E6.80.A7">dir 属性</h5> + +<p>ボックスの並び制御属性の最後は <code><code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code> 属性で、対応する CSS プロパティは <a href="/ja/docs/Web/CSS/-moz-box-direction" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>-moz-box-direction</code></a> になります。 この値が <code>reverse</code> に設定されると、ボックス内のすべての子要素は逆順に並んで表示されます。 つまり、水平ボックスでは右から左へ、垂直ボックスでは下から上へ要素が配置されていくことになります。 以下に例を示します。</p> + +<p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxobject_5.xul">表示</a></p> + +<pre><hbox dir="reverse"> + <button label="Left"/> + <button label="Center"/> + <button label="Right"/> +</hbox> +</pre> + +<p>ボックスオブジェクトの並び順によるノードのナビゲーションでは、<code><code id="a-ordinal"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code></code> によって調整された順番で要素が返されます。 このため、要素の <code><code id="a-ordinal"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code></code> を変更した場合は、ボックス内の並び順も変更されます。 一方、<code><code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code> によって順序を逆にしたとしても、ボックス内の並び順は変更されません。</p> + +<p>次のセクションでは、 XUL とスクリプトから XPCOM オブジェクトを利用する方法について見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Manipulating_Lists" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XPCOM_Interfaces">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/broadcasters_and_observers/index.html b/files/ja/archive/mozilla/xul/tutorial/broadcasters_and_observers/index.html new file mode 100644 index 0000000000..271d671c12 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/broadcasters_and_observers/index.html @@ -0,0 +1,178 @@ +--- +title: ブロードキャスタとオブザーバ +slug: Archive/Mozilla/XUL/Tutorial/Broadcasters_and_Observers +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Broadcasters_and_Observers +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Updating_Commands" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Document_Object_Model">次のページ »</a></p> +</div> +<p>いくつもの要素に対して、同じようにイベントに反応させるようにしたり、一括して状態の変化を反映させたいことは、しばしばあると思います。 +このために、ブロードキャスタを利用することができます。 +</p><p><span id="Command_Attribute_Forwarding"></span> +</p> +<h3 id=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.81.A8.E5.B1.9E.E6.80.A7.E3.81.AE.E8.87.AA.E5.8B.95.E8.BB.A2.E9.80.81" name=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.81.A8.E5.B1.9E.E6.80.A7.E3.81.AE.E8.87.AA.E5.8B.95.E8.BB.A2.E9.80.81"> コマンドと属性の自動転送 </h3> +<p>ここまでに説明したように、ボタンなどの要素は、コマンドと結びつけることが可能です。 +このとき、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素に <code><code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></code> 属性を付加すれば、そのコマンドに結びつけられた要素も自動的に無効化されます。 +これを利用して、作成する必要があるコードを単純化することができます。 +また、この技法は、それ以外の属性に対しても適用することが可能です。 +例えば、<code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性を、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素に付加した場合、コマンドに結びつけられたすべてのボタンは、同じラベルを共有することになります。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_1.xul">表示</a> +</p> +<pre><command id="my_command" label="Open"/> + +<button command="my_command"/> +<checkbox label="Open in a new window" command="my_command"/> +</pre> +<p>この例では、ボタンは <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性を持っていませんが、結びつけられたコマンドの方が持っています。 +このため、ボタンは、コマンドに設定されたラベルを共有することになります。 +また、チェックボックスは、最初からラベルを持っていますが、これもコマンドのラベルによって上書きされます。 +その結果、ボタンとチェックボックスは、両方とも同じラベル「Open」を持つことになります。 +</p><p>コマンドの <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性を変更した場合、ボタンとチェックボックスのラベルも、それに追随して変更されます。 +これは、以前のセクションで見た、<code><code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></code> 属性の変更が、他の要素へ伝播する挙動と類似しています。 +</p><p>属性の<span style="border-bottom: 1px dashed green;" title="forwarding">自動転送</span>は、いろいろな目的のために利用できます。 +例えば、ブラウザの「戻る」動作を無効化したいと考えているとします。 +このとき、メニューの「戻る」コマンド、ツールバーの「戻る」ボタン、キーボードショートカット (例えば Alt + ←)、ポップアップメニューの「戻る」コマンドのすべてを無効化する必要があります。 +このために、スクリプトを作成することもできますが、退屈なコードを大量に記述することになります。 +加えて、「戻る」動作が導入されている箇所を、すべて押さえておく必要があるという欠点もあります。 +また、この方法では、ブラウザの<span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span>で、新たに「戻る」操作が追加されても、それについては無効化することができません。 +しかしながら、単純に「戻る」の動作自体を無効化すれば、「戻る」動作を実行するすべての要素が、自ら無効になるようになっていれば、この機能は簡単に実現できます。 +これは、コマンドが持つ属性の自動転送機能を利用することで実現することが可能です。 +</p><p><span id="Broadcasters"></span> +</p> +<h3 id=".E3.83.96.E3.83.AD.E3.83.BC.E3.83.89.E3.82.AD.E3.83.A3.E3.82.B9.E3.82.BF" name=".E3.83.96.E3.83.AD.E3.83.BC.E3.83.89.E3.82.AD.E3.83.A3.E3.82.B9.E3.82.BF"> ブロードキャスタ </h3> +<p>コマンドが持っている属性の自動転送と類似の機能を持つ要素として、ブロードキャスタ (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code></code>) があります。 +ブロードキャスタは、コマンドと同様の方法で属性の自動転送をサポートします。 +ブロードキャスタは、コマンドと同じように機能しますが、 +コマンドが (複数の操作から起動される) 同一の動作をまとめるために利用されるのに対し、ブロードキャスタは (複数の要素に影響する) 状態に関する情報を保持するために利用される点が異なります。 +例えば、 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> は、「戻る」「切り取り」「削除」といった動作のために利用しますが、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code></code> は、フラグの保持、具体的には「利用者がオンラインかどうか」といった情報を示すために利用します。 +前者の場合は、メニュー項目やツールバーボタンなどを、戻るべきページが無いときや、切り取りや削除の対象となるテキストが無いときなどに、一括して無効化する必要があり、 +後者の場合は、利用者がオフラインからオンラインにモードを切り替えたときに、種々の UI 要素の状態を更新する必要があることを想定しています。 +</p><p>ブロードキャスタの最も単純な記述例を以下に示します。 +他の要素から参照可能にするために、<code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性は常に設定する必要があります。 +</p> +<pre><broadcasterset> + <broadcaster id="isOffline" label="Offline"/> +</broadcasterset> +</pre> +<p>このブロードキャスタを「観察」している任意の要素は、ブロードキャスタの <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性が変更されるのに応じて、自動的に変更されていきます。 +他の表示されない要素と同様に、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/broadcasterset" title="broadcasterset">broadcasterset</a></code></code> 要素が、ブロードキャスタの<span style="border-bottom: 1px dashed green;" title="placeholder">置き場所</span>として提供されています。 +すべてのブロードキャスタは、一箇所にまとめておくために、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/broadcasterset" title="broadcasterset">broadcasterset</a></code></code> 要素内に宣言しておくべきでしょう。 +</p><p><span id="Making_elements_observers"></span> +</p> +<h3 id=".E8.A6.81.E7.B4.A0.E3.82.92.E3.82.AA.E3.83.96.E3.82.B6.E3.83.BC.E3.83.90.E3.81.A8.E3.81.97.E3.81.A6.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B" name=".E8.A6.81.E7.B4.A0.E3.82.92.E3.82.AA.E3.83.96.E3.82.B6.E3.83.BC.E3.83.90.E3.81.A8.E3.81.97.E3.81.A6.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B"> 要素をオブザーバとして設定する </h3> +<p>ブロードキャスタを「<span style="border-bottom: 1px dashed green;" title="observe">観察</span>」している要素のことを、オブザーバ (<span style="color: green;">observer</span>) と呼びます。 +要素をオブザーバにするためには、<code><code id="a-observes"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code></code> 属性を追加します。 +これは、要素を <code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素に結びつけるときに、<code><code id="a-command"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></code> 属性を利用するのと類似しています。 +例えば、ボタンを上記のブロードキャスタのオブザーバにする場合は、以下のようになります。 +</p> +<pre><button id="offline_button" observes="isOffline"/> +</pre> +<p>このボタンには、<code><code id="a-observes"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code></code> 属性が置かれており、値には観察対象となるブロードキャスタの <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> が設定されています。 +この例では、ボタンは、前の例で定義した <code>isOffline</code> を id とするブロードキャスタを観察することになります。 +このため、ブロードキャスタの <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性の値が変更されると、オブザーバの <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性の値も更新されます。 +</p><p>さらに、他の要素をオブザーバとして追加していくことが可能です。 +1 つのブロードキャスタを観察する要素はいくつ設定してもかまいません。 +もちろん、観察する要素は 1 つだけでもよいのですが、それではあまり得られるものがありません。 +ブロードキャスタを使用する主な目的は、属性を複数の箇所へ転送することにあるからです。 +ブロードキャスタは、複数の要素が属性を観察する必要があるときにのみ利用するべきだと思います。 +以下に、いくつかのオブザーバを追加で定義した例を示します。 +</p> +<pre><broadcaster id="offline_command" label="Offline" accesskey="f"/> + +<keyset> + <key id="goonline_key" observes="offline_command" modifiers="accel" key="O"/> +</keyset> +<menuitem id="offline_menuitem" observes="offline_command"/> +<toolbarbutton id="offline_toolbarbutton" observes="offline_command"/> +</pre> +<p>この例では、<code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> と <code><code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></code> が、ブロードキャスタから、キー要素、メニュー項目、ツールバーボタンへと転送されます。 +このとき、キー要素は、受け取った属性をどれも利用しませんが、ブロードキャスタが無効化されるとそれに応じて無効化されることになります。 +</p><p>ブロードキャスタは、任意の属性を観察するために利用できます。 +オブザーバは、ブロードキャスタから、任意に設定された属性の値を全部、値が変更されるたびに受け取ります。 +ブロードキャスタの、任意の属性のいずれかの値が変更されたときは、全てオブザーバに通知され、オブザーバは自分の属性値で該当するものを更新します。 +ブロードキャスタに設定されていない属性については、オブザーバの属性は変更されません。 +ただし、<code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> と <code><code id="a-persist"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></code> の 2 つの属性については、共有させることはありえないため、オブザーバ側が更新されることはありません。 +また、開発者が独自に定義した属性についても、必要なら利用することが可能です。 +</p><p>ほとんど場面でコマンドが使えるため、ブロードキャスタはそれほど頻繁には用いられません。 +属性の自動転送という点から見たとき、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素と <code><code><a href="/ja/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code></code> 要素に実質的な違いはありません。 +この 2 つは、挙動としては同じですが、使用する場合の意味づけの部分が異なっています。 +コマンドは動作に、ブロードキャスタは状態のために使用するようにしてください。 +なお、意味づけを無視すれば、実際には、<code><code id="a-observes"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code></code> 属性の値として、ブロードキャスタ以外の要素を設定してもかまわないため、 +任意の要素をブロードキャスタのように振舞わせることも可能です。 +</p><p><span id="The_Observes_Element"></span> +</p> +<h3 id="observes_.E8.A6.81.E7.B4.A0" name="observes_.E8.A6.81.E7.B4.A0"> observes 要素 </h3> +<p>ブロードキャスタを観察するとき、特定の属性だけを観察するように限定する方法もあります。 +そのためには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> 要素を利用します。 +この要素を、観察したい属性と対になるように置くことで、要素をオブザーバとして定義することが可能です。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> 要素は、オブザーバとなる要素の子要素にする必要があります。 +以下に例を示します。 +</p><p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_2.xul">表示</a> +</p> +<pre><broadcasterset> + <broadcaster id="isOffline" label="Offline" accesskey="f"/> +</broadcasterset> + +<button id="offline_button"> + <observes element="isOffline" attribute="label"/> +</button> +</pre> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> 要素には、2 つの属性が設定されています。 +最初の <code><code id="a-element"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/element">element</a></code></code> 属性には、観察するブロードキャスタの id を指定します。 +2 番目の <code><code id="a-attribute"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/attribute">attribute</a></code></code> 属性には、観察する属性を指定します。 +この例では、指定の結果、ボタンのラベルがブロードキャスタから転送されるようになるため、 +ブロードキャスタのラベルが変更されると、ボタンのラベルも更新されることになります。 +このとき、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> 要素自身は変更されませんが、代わりに、この要素を中に含んでいる、ボタン (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>) 要素が変更されることになります。 +なお、<code><code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></code> 属性は、観察されていないので、ボタンには転送されないことに注意してください。 +もし <code><code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></code> 属性も観察させたいのなら、もう 1 つ <code><code><a href="/ja/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> 要素を追加する必要があります。 +または、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> 要素を利用する代わりに、 <code><code id="a-observes"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/observes">observes</a></code></code> 属性をボタンに直接設定することで、すべての属性を観察させることもできます。 +</p><p><span id="Broadcast_event"></span> +</p> +<h4 id="broadcast_.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88" name="broadcast_.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88"> broadcast イベント </h4> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> 要素には、付加的なイベントハンドラ <code>onbroadcast</code> を設定することができます。 +このイベントは、ブロードキャスタの属性の変化が、観察しているオブザーバに通知されるときに発生します。 +以下に例を示します。 +</p><p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_broadob_3.xul">表示</a> +</p> +<pre><broadcasterset> + <broadcaster id="colorChanger" style="color: black"/> +</broadcasterset> + +<button label="Test"> + <observes element="colorChanger" attribute="style" onbroadcast="alert('Color changed');"/> +</button> + +<button label="Observer" + oncommand="document.getElementById('colorChanger').setAttribute('style','color: red');" +/> +</pre> +<p>この例では、2 つのボタンがあります。 +1 つは「Test」、もう 1 つは 「Observer」というラベルがつけられています。 +Test ボタンがクリックされても何も起きませんが、 Observer ボタンがクリックされると 2 つのことが発生します。 +まず、Test ボタンのテキストが赤色になり、次に、「Color changed」というメッセージのアラートが表示されます。 +</p><p>このとき発生した事象を順に見ていくと、 +まず、Observer ボタンがクリックされて、その <code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> ハンドラが呼び出されます。 +そのスクリプトでは、ブロードキャスタへの参照を取得し、そのスタイルの <code>color</code> を、赤（red）に変更しています。 +このとき、ブロードキャスタ自体は画面に表示されないので、何の影響も与えませんが、Test ボタンにはスタイルの変化の通知を受けるオブザーバが存在します。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/observes" title="observes">observes</a></code></code> 要素の <code><code id="a-element"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/element">element</a></code></code> と <code><code id="a-attribute"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/attribute">attribute</a></code></code> 属性によって、スタイルの変化が検知されます。 +スタイルの変更は、自動的に Test ボタンに適用されます。 +</p><p>次に、ブロードキャストによる転送が発生したため、イベントハンドラ <code>onbroadcast</code> が呼び出されます。 +この結果、アラートメッセージが表示されます。 +この broadcast イベントは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/broadcaster" title="broadcaster">broadcaster</a></code></code> 要素の属性が変化した場合についてのみ発生することに注意して下さい。 +ボタンのスタイルを直接変更したとしても、broadcast イベントは発生しないため、アラートは表示されません。 +</p><p>最初の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> (Test ボタン) のコードをいくつか複製した場合、複製したボタンに対して 1 つずつ、複製した個数分のアラートが表示されることになります。 +これは、それぞれのボタンがオブザーバであり、スタイルが変更されると、全てに通知が行われるためです。 +</p><p>次のセクションでは、 XUL 要素による文書オブジェクトモデルの利用について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Updating_Commands" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Document_Object_Model">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/commands/index.html b/files/ja/archive/mozilla/xul/tutorial/commands/index.html new file mode 100644 index 0000000000..bf0292e04e --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/commands/index.html @@ -0,0 +1,211 @@ +--- +title: コマンド +slug: Archive/Mozilla/XUL/Tutorial/Commands +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Commands +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Focus_and_Selection" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Updating_Commands">次のページ »</a></p> +</div> +<p>コマンドは、<span style="border-bottom: 1px dashed green;" title="operation">操作</span>に応じて呼び出され、必要な処理を行います。 +</p><p><span id="Command_Elements"></span> +</p> +<h3 id="command_.E8.A6.81.E7.B4.A0" name="command_.E8.A6.81.E7.B4.A0"> command 要素 </h3> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素は、操作に対する処理を実行していくために使用可能な、コマンドの作成に利用されます。 +操作に関する処理を行うためには、単にスクリプトを呼び出すだけでもよいので、コマンドは「利用しなければならない」ものではありません。 +しかしながら、コマンドには、必要に応じて自動的に無効にできたり、実装の詳細について知らなくても外部から呼び出せるといった利点があります。 +また、コマンドは、操作をコードから切り離して抽象化するのに適しており、アプリケーションが大きくなるほど有用になります。 +</p><p>例えば、クリップボード系のメニューコマンドである、「切り取り」や、「コピー」、「貼り付け」を実装するために、コマンドを利用することができます。 +これらを、コマンドを利用せずに実装しようとした場合、どのフィールドがフォーカスを得ているかを調べ、その要素に対して適切な操作であるかを確認する必要があります。 +加えて、切り取りやコピー操作では、フォーカスを得ている要素が、選択状態のテキストを含んでいるかどうかに応じて、メニューコマンドの有効化や無効化を行ったり、 +貼り付け操作では、クリップボードの内容が、貼り付けるのに適しているかを調べる必要があります。 +こういった具合に、これらを独自に実装する場合は複雑な記述が必要になりますが、 +コマンドを利用すれば、上記の処理のほとんどをコマンドが実施してくれます。 +</p><p>コマンドは、任意の操作に対して利用できます。 +Mozilla では、ほぼすべてのメニューコマンドで利用されています。 +加えて、テキストフィールドなどのウィジェットには、最初からサポートされているコマンドが多数あり、アプリケーションからも呼び出すことが可能になっています。 +どの要素がフォーカスを得ているかに依存するような操作については、これらのコマンドを利用すべきでしょう。 +</p><p>コマンドは、その id 属性によって識別されます。 +Mozilla では、コマンドの id は、「<tt>cmd_</tt>」で始めるのが慣例になっています。 +もし、既に使用されているコマンドで利用できそうなものがある場合、おそらくは、そのコマンドを利用するために、その id を指定したいと考えるはずですが、 +独自のコマンドを作成する場合は、id は好きなように決められます。 +このときは、id の衝突を避けるために、id にアプリケーション名を含めておくのも良いでしょう。 +</p><p><span id="Example:_Simple_command"></span> +</p> +<h4 id=".E5.8D.98.E7.B4.94.E3.81.AA_command_.E3.81.AE.E4.BE.8B" name=".E5.8D.98.E7.B4.94.E3.81.AA_command_.E3.81.AE.E4.BE.8B"> 単純な command の例 </h4> +<p>以下に、単純なコマンドの利用方法を示します。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_1.xul">表示</a> +</p> +<pre><command id="cmd_openhelp" oncommand="alert('Help!');"/> +<button label="Help" command="cmd_openhelp"/> +</pre> +<p>この例では、<code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> 属性を、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 要素ではなく、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素に設定しています。 +また、この 2 つの要素は、コマンドの <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> を値とする <code><code id="a-command"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/command">command</a></code></code> 属性によって結びつけられています。 +この結果、ボタンが押されたときに、「<tt>cmd_openhelp</tt>」コマンドが呼び出されるようになります。 +</p><p>この方法には、2 つの利点があります。 +</p> +<ul><li> まず、全ての操作をコマンドにすることで、 XUL ファイルの 1 カ所にまとめることができます。コードをまとめることで、ハンドラが <abbr title="ユーザーインターフェイス">UI</abbr> のコード中に散在することを防げます。 +</li><li> もう 1 つの利点は、複数のボタンなどの UI 要素を、同じコマンドに結びつけられるようになることです。例えば、同じ操作を行う、<a href="ja/XUL_Tutorial/Simple_Menu_Bars">メニュー項目</a>、<a href="ja/XUL_Tutorial/Toolbars">ツールバーボタン</a>、<a href="ja/XUL_Tutorial/Keyboard_Shortcuts">キーボードショートカット</a>のそれぞれに対して、同じコマンドを設定できます。つまり、同じコードを 3 回繰り返して記述するのではなく、3 つの全てに対して同じコマンドを割り当てるだけで済みます。通常、コマンドは、コマンドイベントを送出するものに対してのみ割り当てます。 +</li></ul> +<p>さらに、以下のような利点もあります。 +</p> +<ul><li> コマンドに対して <code><code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></code> 属性を設定することで、コマンドは無効化され、起動されなくなます。 +</li><li> コマンドが割り当てられたボタンやメニュー項目も、自動的に無効化されます。 +</li><li> コマンドを再び有効にすると、ボタンも有効になります。 +</li></ul> +<p><span id="Example:_Toggling_command_disabled"></span> +</p> +<h4 id=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E7.84.A1.E5.8A.B9.E5.8C.96.E3.81.AE.E4.BE.8B" name=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E7.84.A1.E5.8A.B9.E5.8C.96.E3.81.AE.E4.BE.8B"> コマンド無効化の例 </h4> +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_commands_2.xul">表示</a> +</p> +<pre><command id="cmd_openhelp" oncommand="alert('Help');"/> +<button label="Help" command="cmd_openhelp"/> +<button label="More Help" command="cmd_openhelp"/> + +<button label="Disable" + oncommand="document.getElementById('cmd_openhelp').setAttribute('disabled','true');"/> +<button label="Enable" + oncommand="document.getElementById('cmd_openhelp').removeAttribute('disabled');"/> +</pre> +<p>この例では、2 つのボタンに同じコマンドが割り当てられています。 +Disable ボタンが押されると、コマンドの <code><code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></code> 属性が設定され、ボタンは、両方とも無効化されます。 +</p><p>通常、コマンドは XUL ファイルの先頭の方に <code><code><a href="/ja/docs/Mozilla/Tech/XUL/commandset" title="commandset">commandset</a></code></code> 要素を使って、以下のようにまとめて置きます。 +</p> +<pre><commandset> + <command id="cmd_open" oncommand="alert('Open!');"/> + <command id="cmd_help" oncommand="alert('Help!');"/> +</commandset> +</pre> +<p>コマンドは、コマンドが割り当てられている、ボタンなどの要素が活性化されると起動されますが、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素や、ボタンなどのコマンドが割り当てられている要素に対して、<code><span id="m-doCommand"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span></code> メソッドを呼び出すことによっても起動することが可能です。 +</p><p><span id="Command_Dispatching"></span> +</p> +<h3 id=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.81.AE.E3.83.87.E3.82.A3.E3.82.B9.E3.83.91.E3.83.83.E3.83.81" name=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.81.AE.E3.83.87.E3.82.A3.E3.82.B9.E3.83.91.E3.83.83.E3.83.81"> コマンドのディスパッチ </h3> +<p>コマンドを、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素を使わずに作成したり、あるいは、少なくともコマンドに <code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> 属性を設定せずに利用することが可能です。 +この場合、コマンドがスクリプトを直接起動することはありませんが、代わりにコマンドを処理するための要素や関数が検索されることになります。 +これらの関数の多くは、XUL そのものとは分けられており、一部は、ウィジェットで内部的に処理されます。 +コマンドの処理を振り分けるために、XUL ではコマンドディスパッチャと呼ばれるオブジェクトを利用します。 +このオブジェクトは、コントローラと呼ばれる、コマンドを処理するためのハンドラを特定します。 +つまり、コマンドが起動されると、コマンドディスパッチャはそのコマンドを処理可能なコントローラを特定することになります。 +また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code> 要素は、コマンドのためのコントローラの一種だと考えることができます。 +</p><p>コマンドディスパッチャは、現在フォーカスを得ている要素に対し、そのコマンドを処理可能なコントローラを持っているかどうかをチェックします。 +このために、XUL の要素は、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/controllers">controllers</a></span></code></code> プロパティを持っています。 +この、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/controllers">controllers</a></span></code></code> プロパティを使用して、独自のコマンドを追加することも可能です。 +例えば、これによって、リストボックスに「切り取り」、「コピー」、「貼り付け」処理の追加を行うことができます。 +(実際の例は、後で示します)。 +デフォルトでは、テキスト入力欄のみがコントローラを持っており、 +「クリップボード操作」、「<span style="border-bottom: 1px dashed green;" title="selection">選択</span>」、「<span style="border-bottom: 1px dashed green;" title="undo">元に戻す</span>」、「<span style="border-bottom: 1px dashed green;" title="redo">やり直し</span>」などの編集操作を行います。 +要素は、複数のコントローラを持っているかもしれず、その場合、全てがチェック対象であることに注意して下さい。 +</p><p>現在フォーカスを得ている要素が、適合するコントローラを持っていない場合、次にウインドウがチェックされます。 +ウインドウにも、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/controllers">controllers</a></span></code></code> プロパティがあり、必要ならば変更することも可能です。 +フレーム利用時に、フォーカスをフレームの内側の要素が得ていた場合、トップレベルウインドウに達するまで、入れ子になっている各フレームについて、同様のチェックがされていきます。 +これによって、フォーカスがフレームの内側にある場合であっても、コマンドは問題なく機能します。 +また、Mozilla ブラウザのメインメニューからの編集系コマンドの呼び出しが、コンテンツ領域に対して有効であることから、 +コマンドは、ブラウザ要素に対しても、問題なく機能することがいえます。 +HTML でも、コマンドとコントローラのシステムが利用できることを補足しておきます。 +といっても、特権の無いウェブページからは利用できませんが、例えばブラウザの<span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span>などから利用することは可能です。 +最終的に、ウインドウにもコマンドを処理可能なコントローラが存在しない場合は、何も起きません。 +</p><p>コマンドディスパッチャは、<span style="border-bottom: 1px dashed green;" title="document">文書</span>オブジェクトの <code>commandDispatcher</code> プロパティ、あるいは、要素かウインドウにあるコントローラのリストから取得することが可能です。 +コマンドディスパッチャは、コマンドのためのコントローラを取得したり、フォーカスを得ている要素の取得や変更を行うメソッドを持っています。 +</p><p><span id="Adding_Controllers"></span> +</p> +<h4 id=".E3.82.B3.E3.83.B3.E3.83.88.E3.83.AD.E3.83.BC.E3.83.A9.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.82.B3.E3.83.B3.E3.83.88.E3.83.AD.E3.83.BC.E3.83.A9.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B"> コントローラを追加する </h4> +<p>コマンドに反応するために、独自のコントローラを実装することも可能です。 +コントローラは、慎重に配置すれば、デフォルトのコマンド処理を置き換えることさえ可能になります。 +コントローラには、以下の 4 つのメソッドを実装することが求められています。 +</p> +<dl><dt> supportsCommand (command) </dt><dd> このメソッドは、コントローラがコマンドをサポートする場合に true を返す必要があります。 false が返された場合、コマンドはハンドルされず、コマンドディスパッチャは他のコントローラの検索を続けます。 1 つのコントローラが、複数のコマンドをサポートすることも可能です。 +</dd><dt> isCommandEnabled (command) </dt><dd> このメソッドは、コマンドが有効な場合に true を返し、無効な場合に false を返す必要があります。対応するボタンは自動的に有効化、または無効化されます。 +</dd><dt> doCommand (command) </dt><dd> コマンドを実行します。ここにコマンドを処理するコードを記述して下さい。 +</dd><dt> onEvent (event) </dt><dd> このメソッドはイベントを処理します。 +</dd></dl> +<p><span id="Example:_Controller_implementation"></span> +</p> +<h5 id=".E3.82.B3.E3.83.B3.E3.83.88.E3.83.AD.E3.83.BC.E3.83.A9.E3.81.AE.E5.AE.9F.E8.A3.85.E4.BE.8B" name=".E3.82.B3.E3.83.B3.E3.83.88.E3.83.AD.E3.83.BC.E3.83.A9.E3.81.AE.E5.AE.9F.E8.A3.85.E4.BE.8B"> コントローラの実装例 </h5> +<p>それでは、削除コマンドを処理可能なリストボックスの実装を行ってみましょう。 +これは、利用者がメニューから削除を選択したときに、リストボックスの選択されている行を削除します。 +このためには、コントローラを作成して <code>doCommand</code> メソッドの動作としてこの動作を行うように実装し、単純にこのリストボックスに結びつけるようにします。 +</p><p>ブラウザウインドウで以下の例 (<a href="https://developer.mozilla.org/samples/xultu/examples/commands.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/commands.xul">表示</a>) を開いて、リストの項目を選択してみてください。 +ブラウザの編集メニューの削除コマンドが有効になっていて、それを選択すると選択行が削除されることが確認できるはずです。<span style="color: darkgreen; background: #ef9;">【訳注: この例は リモートではなく、chrome URL からアクセスして特権を与えないと (少なくとも訳者の Firefox 1.5 では) うまく動作しないようです】</span> +以下の例は、完璧に仕上げられたものではありません。 +実際には、削除後に選択域とフォーカスを正しく調整する必要があります。 +</p> +<pre><window id="controller-example" title="Controller Example" onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function init() +{ + var list = document.getElementById("theList"); + + var listController = { + supportsCommand : function(cmd){ return (cmd == "cmd_delete"); }, + isCommandEnabled : function(cmd){ + if (cmd == "cmd_delete") return (list.selectedItem != null); + return false; + }, + doCommand : function(cmd){ + list.removeItemAt(list.selectedIndex); + }, + onEvent : function(evt){ } + }; + + list.controllers.appendController(listController); +} +</script> + +<listbox id="theList"> + <listitem label="Ocean"/> + <listitem label="Desert"/> + <listitem label="Jungle"/> + <listitem label="Swamp"/> +</listbox> + +</window> +</pre> +<p>このコントローラ (<code>listController</code>) は、上記の 4 つのメソッドを実装しています。 +まず、<code>supportsCommand</code> メソッドは、「<tt>cmd_delete</tt>」コマンドの場合に true を返します。 +「<tt>cmd_delete</tt>」は、削除メニュー項目が起動されたときに使用されるコマンド名になります。 +また、このコントローラは、それ以外のコマンドには対応していないため、その場合は false を返さなければなりません。 +対応するコマンドを追加したい場合は、このチェックが、対応する全てのコマンド対して true を返すように変更する必要があります。 +1 つのコントローラを、関連する複数のコマンド処理に使用するような場面は、しばしばあると思います。 +</p><p>次に、<code>isCommandEnabled</code> メソッドは、コマンドが有効になっているべきである場合に true を返します。 +この例では、リストボックス内に選択された項目があるかどうかを調べて、あれば true 、無ければ false を返しています。 +このため、すべての行が削除されると、削除コマンドは無効化されますが、 +この例は単純なため、反映させるにはリストボックスを明示的にクリックしてメニューを更新する必要があります。 +3 つめの、<code>doCommand</code> メソッドは、メニュー項目の削除が選択されたときに呼び出され、その結果、リストボックス内で選択されている行は削除されます。 +最後の、<code>onEvent</code> メソッドは、何もする必要がないため、何のコードも付与されていません。 +</p><p><span id="Override_Default_Controller"></span> +</p> +<h4 id=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.81.AE.E3.82.B3.E3.83.B3.E3.83.88.E3.83.AD.E3.83.BC.E3.83.A9.E3.82.92.E7.BD.AE.E3.81.8D.E6.8F.9B.E3.81.88.E3.82.8B" name=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.81.AE.E3.82.B3.E3.83.B3.E3.83.88.E3.83.AD.E3.83.BC.E3.83.A9.E3.82.92.E7.BD.AE.E3.81.8D.E6.8F.9B.E3.81.88.E3.82.8B"> デフォルトのコントローラを置き換える </h4> +<p>前の例では、コントローラをリストボックスに付加するために、リストボックスの <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/controllers">controllers</a></span></code></code> プロパティの <code>appendController</code> メソッドを呼び出しています。 +この <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIControllers.html">controller オブジェクト</a>には、コントローラのリストを操作するメソッドがいくつかあります。 +例えば、<code>insertControllerAt</code> メソッドは、その要素の他のコントローラの前にコントローラを挿入します。 +これによって、既存のコマンドを置き換えることが可能です。 +例えば、以下の例で示す方法で、テキスト入力欄への<span style="border-bottom: 1px dashed green;" title="paste">貼り付け</span>を無効化することができます。 +</p> +<pre>var tboxController = { + supportsCommand : function(cmd){ return (cmd == "cmd_paste"); }, + isCommandEnabled : function(cmd){ return false; }, + doCommand : function(cmd){ }, + onEvent : function(evt){ } +}; + +document.getElementById("tbox").controllers.insertControllerAt(0,tboxController); +</pre> +<p>この例では、新しいコントローラは、「<tt>cmd_paste</tt>」コマンドをサポートしますが、常に無効であると応答します。 +このコントローラをインデックス 0 の位置、すなわち他の全てのコントローラの前に挿入します。 +これによって、コマンドディスパッチャは、「<tt>cmd_paste</tt>」コマンドを処理するためのコントローラを検索するとき、新しいコントローラの方を先に見つけることになり、 +デフォルトのテキスト入力欄のコントローラは、一切呼び出されなくなります。 +</p><p>次のセクションでは、コマンドの状態を自動更新する方法を見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Focus_and_Selection" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Updating_Commands">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/content_panels/index.html b/files/ja/archive/mozilla/xul/tutorial/content_panels/index.html new file mode 100644 index 0000000000..b4f72a472b --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/content_panels/index.html @@ -0,0 +1,58 @@ +--- +title: コンテンツパネル +slug: Archive/Mozilla/XUL/Tutorial/Content_Panels +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Grids" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Splitters">次のページ »</a></p> +</div></div> +<p>このセクションでは、HTML ページや、他の XUL ファイルを表示できるパネルを追加する方法を見ていきます。</p> +<h2 id="Adding_Child_Panels" name="Adding_Child_Panels">子パネルを追加する</h2> +<p>HTML でページを作成する場合に、 <span style="border-bottom: 1px dashed green;" title="document">文書</span> の一部として別のページをロードさせたい場面が、しばしばあると思います。 XUL の場合も、ウィンドウの一部を変更したくなるような場面に、しばしば遭遇することになります。 よい例が対話形式のウィザードです。 これは、いくつかの質問をまとめたスクリーン群を順番に提示していくことで案内する機能です。 利用者が「次へ」ボタンをクリックするたびに、次のウィザードの画面が表示されます。</p> +<p>個々の画面用に別のウィンドウを開くことにより、ウィザードインタフェースを作ってもかまいませんが、 このアプローチには 3 つ問題があります。 まず考えられるのは、個々のウィンドウが別の位置に表示されるかもしれないということです。 (位置を揃える方法はあるのですが、好ましくありません)。 次は、「戻る」や「次へ」ボタンなどの要素が、インタフェース全体を通して同じものにならないということです。 ウィザードの内容を表示するエリアだけが変更されるようにできれば、さらによいはずです。 最後にあげるのは、別々のウィンドウで実行されるスクリプトを協調して動作させるのは難しいということです。</p> +<p>XUL には、ウィザードインタフェースを作成するために使う <code><a href="/ja/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code> 要素があることを補足しておきます。 これについては、<a href="/ja/docs/XUL/Tutorial/Creating_a_Wizard">後のセクション</a>で述べます。</p> +<p>もうひとつのアプローチは、<code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> 要素を使うことです。 これは、同名の HTML 要素と同様に、ウィンドウ内に異なった文書を作ります。 <code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> 要素には、どこにでも置けるということと、その内容を別のファイルからロードできるという利点があります。 <code id="a-src"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> 属性で、フレーム内に表示するファイルの URL を設定します。 この URL は、普通は HTML ファイルか XUL ファイルを指しますが、どの種類のファイルを指していてもかまいません。 スクリプトを使って、メインウィンドウに影響を与えることなく、<code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> の内容を変更することが可能です。</p> +<p>Mozilla ブラウザのウィンドウでは、ウェブページが表示されるエリアは、<code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> を使って作られています。 ユーザが URL を入力するか、あるいは文書中のリンクをクリックすると、フレームのソースが変更されます。</p> +<h3 id="iframe_example" name="iframe_example">iframe の使用例</h3> +<p>以下に、<code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> を使う例を示します。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_1.xul">表示</a></p> +<pre class="brush:xml"><toolbox> + <toolbar id="nav-toolbar"> + <toolbarbutton label="Back" /> + <toolbarbutton label="Forward" /> + <textbox id="urlfield" /> + </toolbar> +</toolbox> + +<iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> +</pre> +<p>この例では、ウェブブラウザのための非常に簡単なインタフェースを作ります。 作成されるボックスには、2 つの要素 <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code> と <code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> が含まれています。 Back ボタン、Forward ボタン、URL 入力欄を、ひとつだけあるツールバーに加えています。 (ツールバーについては、<a href="/ja/docs/XUL/Tutorial/Toolbars">後のセクション</a>で説明する予定です)。 ウェブページは、<code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> に表示されます。 この例の場合、index.html ファイルがデフォルトで表示されます。</p> +<p>この例は、まだ完全には機能しません。 次の段階に進めば、<code id="a-src"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> 属性を、要求が発生したとき (例えば、利用者が Enter キーを押したとき) に変更するためのスクリプトを加えたくなると思います。</p> +<h2 id="Browsers" name="Browsers">ブラウザ要素</h2> +<p>次に、コンテンツパネルの一種として、<code><a href="/ja/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> タグを使ったものについて説明します。 これは、ブラウザのようにコンテンツを表示するフレームを作りたい場合に使用します。 実際、<code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> でも同じことが可能ですが、ブラウザ要素にはたくさんの付加機能が追加されています。 例えば、ブラウザ要素は「戻る」、「進む」ボタンで使うページ履歴を保持します。 また、リファラーや他のフラグの付いたページを読み込むことも可能です。 本質からいって、<code><a href="/ja/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> タグは、ブラウザ風のインタフェースを作りたいときに使用するべきだと思います。 一方 <code><a href="/ja/docs/Mozilla/Tech/XUL/iframe" title="iframe">iframe</a></code> は、単純なパネルが欲しいときに使用します。</p> +<p>同様の要素に <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> があります。 これは <code><a href="/ja/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> の機能に加えて、さらに複数のページを切り替えるためのタブバーも提供しているもので、 Mozilla ブラウザがタブブラウジング・インタフェースとして使っているウィジェットになります。 <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> 要素は、実際には <code>browser</code> 要素の集合を持つ <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> として実装されています。 どちらのブラウザ要素とも、表示されるページに対して同様のコントロールを提供しています。</p> +<h3 id="browser_example" name="browser_example">ブラウザ要素の例</h3> +<p>ブラウザ要素の例を示します。</p> +<div> + <span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_cpanels_2.xul">表示</a></div> +<pre class="brush:xml"><browser src="http://www.mozilla.org" flex="1" /> +</pre> +<p>iframe と同じように、<code id="a-src"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> 属性を使って、ブラウザ要素に URL を指定できます。 <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> は、ひとつの URL だけを表示するわけではないので、このように直接 URL を設定することはできません。 代わりにスクリプトを使って <code>loadURI</code> 関数を呼び出す必要があります。</p> +<p>内部に表示したいコンテンツの種別により、ブラウザ要素には 3 つのクラスがあります。 その型は <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を使って指定します。 最初の型はデフォルトであり、型を指定しない場合に使用されます。 この場合、ブラウザ要素内に読み込まれるコンテンツは、同じアプリケーションの一部として扱われ、外部のウィンドウにアクセスすることができます。 これは、ブラウザ要素内に読み込まれたスクリプトが、最上位ウィンドウを取得しようとした場合、外側の XUL ウィンドウを得ることになるということです。</p> +<p>この挙動は、アプリケーションの一部として、子の XUL パネルを作成する場合は適当ですが、ブラウザ要素にウェブページを読み込ませたい場合には適当ではありません。 この場合、読み込まれたウェブページには、そのページのコンテンツへのアクセス許可のみが与えられるように制限したいはずです。 Mozilla ブラウザのウィンドウは、メインエリアを形成する <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> とともに、ツールバーやステータスバー、その他いろいろな XUL で作成された内容を持っていることに注意してみてください。 ウィンドウの内部にあるエリアでウェブページを表示しますが、そのウェブページからは周りの XUL にアクセスすることはできないようになっています。 これは、<code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性に <code>content</code> という値を設定することで指定される、ブラウザ要素の第 2 の型を使用しているためです。 この設定によって、コンテンツとして読み込まれた部分から、XUL ウィンドウへ横断的にアクセスされるのを防いでいます。 以下に例を示します。</p> +<pre class="brush:xml"><browser src="http://www.mozilla.org" type="content" flex="1" /> +</pre> +<div class="note"> + <b>重要</b> : <code><a href="/ja/docs/Mozilla/Tech/XUL/browser" title="browser">browser</a></code> 要素の内部にリモートのウェブサイトを表示しようとしているのであれば、<code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を正しく設定しなければなりません。</div> +<p><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> は、作成するタブブラウザ全てに対して自動的に <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性に <code>content</code> を設定します。 このため、タブブラウザ要素では、明示的に <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を設定する必要はありません。</p> +<p>3 番目の型は、ウィンドウが複数のブラウザ要素を含んでいるとき、例えばサイドバーに付加的なコンテンツを表示させているような場合に使用します。 メインとなるブラウザ要素に対して、<code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性に <code>content-primary</code> を設定することで、そこで表示されるコンテンツが、そのウィンドウ内での「主となるコンテンツ」であることを示すことができます。 この型を設定されたブラウザ要素は、読み込まれたコンテンツに XUL ウィンドウの「content」プロパティを使ってアクセスできることを除いては、<code>content </code> を設定された場合と同じように動作します。 これは、スクリプトを使った場合に、メインブラウザのコンテンツへのアクセスを容易にします。 <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> 要素では、表示状態に切り替えられたブラウザ要素に対して自動的に <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性に <code>content-primary</code> を設定します。 これは、XUL ウィンドウの <code>content</code> プロパティを使用することで、常にそのとき表示されているコンテンツにアクセスできることを意味しています。</p> +<p>次のセクションでは、スプリッターの作り方を見ることにします。</p> + +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Grids" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Splitters">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/creating_a_skin/index.html b/files/ja/archive/mozilla/xul/tutorial/creating_a_skin/index.html new file mode 100644 index 0000000000..1a9cbbec43 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/creating_a_skin/index.html @@ -0,0 +1,190 @@ +--- +title: スキンの作成 +slug: Archive/Mozilla/XUL/Tutorial/Creating_a_Skin +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Skin +--- +<p> </p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Modifying_the_Default_Skin" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Localization">次のページ »</a></p> +</div> + +<p>このセクションでは、単純なスキンの作成方法について説明します。 なお、ここで作成するスキンは、単純化のためにファイル検索ダイアログのみを対象とします。</p> + +<h3 id=".E5.8D.98.E7.B4.94.E3.81.AA.E3.82.B9.E3.82.AD.E3.83.B3" name=".E5.8D.98.E7.B4.94.E3.81.AA.E3.82.B9.E3.82.AD.E3.83.B3">単純なスキン</h3> + +<p>以下に示す画像は、現在のファイル検索ダイアログです。 ここでは、これに適用するスキンを作成してみることにします。 通常、スキンはアプリケーション全体に適用されますが、 ここでは簡単にするために、ファイル検索ダイアログのみに焦点を合わせることにします。 このため、<code>global.css</code> ファイルではなく <code>findfile.css</code> のみを変更します。 なお、このセクションの記述は Mozilla スイートの Classic スキンから開始することを前提とします。<span style="color: darkgreen; background: #ef9;">【訳注: つまり、このセクションの内容は、まだ Firefox 対応になっていないようなので注意してください】</span> また、ファイル検索ダイアログで利用しているファイルは、編集前にバックアップを取っておいた方が良いでしょう。</p> + +<p><img alt="画像:cskin1.jpg"></p> + +<p>今回のセクションでは、<code>findfile.css</code> ファイルを、カスタムスキンの中に作成する必要があります。 または、とりあえずコンテントディレクトリ (XUL ファイルを置くディレクトリ) に置いて、<code>xml-stylesheet</code> ディレクティブの URL を調整して参照する方法でも構いません。 後者の方法では、これまでに作成した <code>findfile.css</code> を直接変更して効果を確認することになり、 前者の方法は、カスタムスキンを作成して、その中に置いたファイルをリンクすることになります。</p> + +<h4 id=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.82.B9.E3.82.AD.E3.83.B3.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B" name=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.82.B9.E3.82.AD.E3.83.B3.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B">カスタムスキンパッケージを作成する</h4> + +<p>カスタムスキンの作成手順を以下に示します。(下記は古いバージョン向けの手順であり、Firefox 1.5 以降では異なっています。Firefox 1.5 以降での手順は <a href="ja/XUL_Tutorial/Manifest_Files">マニフェストファイル</a>にある「ファイル検索ダイアログの例」を参照してください)</p> + +<ol> + <li>適当な場所に、スキンのファイルを置くためのディレクトリを作成します。</li> + <li>マニフェストファイル (contents.rdf) を、Classic または Modern スキンから作成したディレクトリにコピーします。</li> + <li>マニフェストファイルの <code>references</code>を編集して、新しいカスタムスキンの名前に変更します。例えば、<code>references</code> が 「<code>classic/1.0</code>」なのを「<code>blueswayedshoes/1.0</code>」のように変更します。</li> + <li><code>chrome/installed-chrome.txt</code> に、次の形式の行を追記します。「<code>skin, install, url, <a class="external" rel="freelink">file:///stuff/blueswayedshoes/</a></code>」このとき、最後の部分は作成したディレクトリを示すようにします。最後にスラッシュを置くのを忘れないようにしてください。</li> +</ol> + +<p>これまでの <code>findfile.css</code> を新しいディレクトリにコピーし、 これを元にして新しいスキンを作成していきます。 コピーしたファイルは、URL 「<code><a class="external" rel="freelink">chrome://findfile/skin/findfile.css</a></code>」で参照することが可能になります。 このため、XUL 側の <code>xml-stylesheet</code> の参照先をあわせて変更します。</p> + +<h4 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.83.AB.E3.83.BC.E3.83.AB.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.83.AB.E3.83.BC.E3.83.AB.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">スタイルルールを追加する</h4> + +<p>まず最初に、どのような変更を加えたいのかを決めておきたいと思います。 今回は、簡単な色の変更、ボタンのスタイルの変更、隙間の微調整を行ってみることにしましょう。 まずはメニュー、ツールバー、タブパネル全体から始めることにします。</p> + +<p>以下のスタイルルールを <code>findfile.css</code> に追加することで、その下の画像で示すように外観が変化するはずです。</p> + +<pre>window > box { + background-color: #0088CC; +} + +menubar,menupopup,toolbar,tabpanels { + background-color: lightblue; + border-top: 1px solid white; + border-bottom: 1px solid #666666; + border-left: 1px solid white; + border-right: 1px solid #666666; +} + +caption { + background-color: lightblue; +} +</pre> + +<p><img alt="画像:cskin2.jpg"></p> + +<ul> + <li>ウィンドウのすぐ内側にあるボックス (ウィンドウのすべての内容を実際に囲んでいる) の色は、青色に変化しています。</li> + <li>この青色は、タブが置かれている部分の背景とウィンドウ下端に沿った部分で見ることができます。</li> + <li>4 つの要素 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> は空色で表示されまています。</li> + <li>また、良く見れば、これら 4 要素の境界線がより立体的になっていることも判ると思います。</li> + <li><code><code><a href="/ja/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 要素の背景色も、背景にマッチする色になっています。</li> +</ul> + +<p>上記の最初のルール (<code>window > box</code> のもの) は、ウィンドウの子ボックスの色を変更することを指定しています。 しかしながら、この方法は最良ではなく、 本当ならスタイルクラスを使用するように変更するべきところです。 それでは、次にこれを行ってみることにしましょう。 スタイルクラスを使用するように変更しておけば、今後この XUL ファイルに変更を加える場合に、ウィンドウの最初の子要素をボックスにしておく必要がなくなります。</p> + +<pre class="eval"><strong>CSS:</strong> +.findfilesbox { + background-color: #0088CC; +} + +<strong>XUL:</strong> +<vbox <span class="highlightred">class="findfilesbox"</span> orient="vertical" flex="100%"> +<toolbox> +</pre> + +<h4 id=".E3.82.BF.E3.83.96.E3.81.AE.E8.A7.92.E3.81.AB.E4.B8.B8.E3.81.BF.E3.82.92.E3.81.A4.E3.81.91.E3.82.8B" name=".E3.82.BF.E3.83.96.E3.81.AE.E8.A7.92.E3.81.AB.E4.B8.B8.E3.81.BF.E3.82.92.E3.81.A4.E3.81.91.E3.82.8B">タブの角に丸みをつける</h4> + +<p>次は、タブを変更してみましょう。 選択されているタブを太字にします。 また、タブの角に丸みをつけるように変更してみます。</p> + +<pre>tab:first-child { + -moz-border-radius: 4px 0px 0px 0px; +} + +tab:last-child { + -moz-border-radius: 0px 4px 0px 0px; +} + +tab[selected="true"] { + color: #000066; + font-weight: bold; + text-decoration: underline; +} +</pre> + +<div class="float-right"><img alt="画像:cskin3.jpg"></div> + +<p>2 つのルールによって、通常のタブの外観が変更されます。 1 つめのルールは最初のタブの、2 つめのルールは最後のタブの、それぞれ角の丸みを設定しています。 このために使用するのは Mozilla 固有のスタイルルール <code><a href="ja/CSS/-moz-border-radius">-moz-border-radius</a></code> で、これは境界線の角の丸みを設定します。 これにより、最初のタブの左上の角と、最後のタブの右上の角は 4 ピクセル分丸められ、残りの角は 0 ピクセル、つまりまったく丸めを行わない指定になっています。 この値を増やせば、より丸みを帯び、減らせばより角張った外観になります。</p> + +<p>3 つめのルールは、<code><code id="a-selected"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code> 属性が <code>true</code> に設定されているタブに対してのみ適用されます。 これによって、選択されているタブのテキストは濃い青色の下線が引かれた太字になります。 画像から、このスタイルが最初のタブにのみ適用されていることと、そのタブは選択状態であることが確認できるはずです。</p> + +<h4 id=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.81.AB.E3.82.A2.E3.82.A4.E3.82.B3.E3.83.B3.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.81.AB.E3.82.A2.E3.82.A4.E3.82.B3.E3.83.B3.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">ツールバーにアイコンを追加する</h4> + +<p>また、現在のツールバーのボタンは、メニューの項目との違いが若干判別しにくいように思われます。 これを明確にするためには、ツールバーのボタンにアイコンを加えるのが良さそうです。 Mozilla スイートの Composer には、「開く」や「保存」ボタンなどのために、いくつかのアイコンが用意されています。 ここでは、これらのアイコンを利用して手間を省くことにします。 <span style="color: darkgreen; background: #ef9;">【訳注: Firefox の場合、Composer はないのでこれらのアイコンは利用できません】</span> ボタンに画像を設定するためには、CSS の <code><a href="ja/CSS/list-style-image">list-style-image</a></code> CSS プロパティを使用します。</p> + +<pre>#opensearch { + list-style-image: url("chrome://editor/skin/icons/btn1.gif"); + -moz-image-region: rect(48px 16px 64px 0); + -moz-box-orient: vertical; +} + +#savesearch { + list-style-image: url("chrome://editor/skin/icons/btn1.gif"); + -moz-image-region: rect(80px 16px 96px 0); + -moz-box-orient: vertical; +} +</pre> + +<div class="float-right"><img alt="画像:cskin4.jpg"></div> + +<p>Mozilla では、要素から画像の一部分だけを利用できるようにするために、独自のスタイルプロパティ <code><a href="ja/CSS/-moz-image-region">-moz-image-region</a></code> を提供しています。 これは、画像をクリップする設定であると考えることも可能です。 このプロパティで画像上での位置とサイズを指定すると、ボタンには画像の指定領域のみが表示されるようになります。 これにより、複数のボタンで同じ画像ファイルを使用しつつ、それぞれには異なる領域を割り当てることが可能になります。 多数のボタンについて、ホバー (マウスが重なっている)、アクティブ (押下されている)、無効などの状態に応じて画像を変えるような場合には、通常の方法で複数の画像ファイルを用意して使用するよりもスペースを節約することができます。 上記のコードでも、複数のボタンで同じ画像を利用していますが、それぞれは異なる領域を表示するように設定されています。 この画像 (<code>btn1.gif</code>) の全体を表示させて見た場合には、 16 x 16 ピクセルの小さな画像が格子状に並んでいるのが確認できるはずです。</p> + +<p>また、<code><a href="ja/CSS/-moz-box-orient">-moz-box-orient</a></code> プロパティは、ボタン内を垂直配置にするために利用しています。 これは、画像がラベルより上に表示されるようにするために必要になります。 このプロパティは、<code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性を指定するのと、意味的には同じですが、 スキンでは XUL の部分は変更できないので便利に使うことができます。 なお、ほとんどのボックス属性には、CSS プロパティが対応して存在します。</p> + +<h4 id=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E5.A4.89.E6.9B.B4" name=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E5.A4.89.E6.9B.B4">その他の変更</h4> + +<p>次に、下端にあるボタンについても若干の変更を行いますが、 ここでも手間を省くため、Mozilla のアイコンを再利用します。 なお、実際に独自のスキンを作成する場合には、新たにアイコンを作成するか、あるいは流用する場合であっても、アイコンはコピーしておく必要があります。 例えば、このセクションの例を、配布できるように変更していく場合には、アイコン用のファイルを作成するスキンの中にコピーして、URL もそれに応じて変更する必要があります。</p> + +<pre>#find-button { + list-style-image: url("chrome://global/skin/checkbox/images/cbox-check.jpg"); + font-weight: bold; +} + +#cancel-button { + list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); +} + +button:hover { + color: #000066; +} +</pre> + +<div class="float-right"><img alt="画像:cskin5.jpg"></div> + +<p>上の 2 つのルールによって、ボタンにも画像を設定し、 Find ボタンはデフォルトであることを示すために太字にします。 また、3 つめのルールは、ホバー (マウスがボタン上に重なっている) 状態のときに適用されて、テキストを濃い青色に変更します。 最後に、以下のルールによりマージンを設定して、項目の周囲の余白を若干調整します。</p> + +<pre>tabbox { + margin: 4px; +} + +toolbarbutton { + margin-left: 3px; + margin-right: 3px; +} +</pre> + +<p>ここまでの変更によって、ファイル検索ダイアログの外観は次のようになります。</p> + +<p><img alt="画像:cskin6.jpg"></p> + +<p>画像からわかるように、スタイルルールにいくつかの簡単な変更を加えるだけで、ファイル検索ダイアログは外観は完全に別物になりました。 また、さらに続けて、メニュー、ツールバーの<span style="border-bottom: 1px dashed green;" title="grippy">グリッピー</span>、入力欄、チェックボックスなどの要素に変更を加えることも可能です。</p> + +<h3 id=".E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E3.82.B9.E3.82.AD.E3.83.B3.E3.81.AE.E4.BD.9C.E6.88.90" name=".E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E3.82.B9.E3.82.AD.E3.83.B3.E3.81.AE.E4.BD.9C.E6.88.90">グローバルスキンの作成</h3> + +<p>ここで作成したスキンは単純なもので、かつファイル検索ダイアログのみに適用可能なものでした。 このスキンに対して行った変更のうちのいくつかは、グローバルスタイルシート (スキンの <code>global</code> ディレクトリに置かれているもの) に組み込んで、すべてのアプリケーションに適用されるようにすることも可能です。 例えば、チェックボックスの画像がファイル検索ダイアログだけ他と異なっていると、若干の違和感があると思います。 こういった変更は、グローバルスタイルシートの方に組み込むべきでしょう。</p> + +<p>それでは、 CSS スタイルを <code>findfile.css</code> から <code>global.css</code> に移し、Mozilla のいくつかのダイアログ (例えばクッキービューア) を表示して、 追加されたルールが反映されることを確認してみてください。 ただし、いくつかのルールは、グローバルスタイルシートに元から存在するルールと衝突してしまいます。 例えば、ボタンやタブなどには元からルールが定義されていますが、上でも追加のルールが定義されています。 グローバルスキンを変更する場合には、すでに存在するルールに、変更する内容を<span style="border-bottom: 1px dashed green;" title="merge">マージ</span>する必要があります。</p> + +<p><span style="border-bottom: 1px dashed green;" title="skinnability">スキンの有効性</span>を、最大限に引き出すには、外観に関連したスタイルルールの宣言を、個別のスタイルファイルではなく、グローバルディレクトリに置くようにします。 ここには、色やフォント、汎用ウィジェットの外観が含まれています。 そうせずに、例えば <code>findfile.css</code> のような、ローカルなスキンファイルで何かの色の変更を行っていた場合には、 利用者がグローバルスキンを変更したとき、ダイアログの外観がおかしくなる可能性があります。 利用者が、デフォルトのスキンを利用していることを期待してはいけません。</p> + +<div class="highlight"> +<p>ここまでのファイル検索ダイアログとスキンの例: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.xul.txt">Source</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.xul">View</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-cskin.css">Stylesheet</a></p> +</div> + +<h3 id="関連ページ"><small>関連ページ</small></h3> + +<p><small><a href="ja/CSS_Reference/Mozilla_Extensions">Mozilla による CSS の拡張</a>、<a href="ja/CSS_Reference">CSS リファレンス</a></small></p> + +<p>次のセクションでは、XUL アプリケーションを地域化 (ローカライズ) する方法について説明します。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Modifying_the_Default_Skin" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Localization">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/creating_a_window/index.html b/files/ja/archive/mozilla/xul/tutorial/creating_a_window/index.html new file mode 100644 index 0000000000..4f45881c8d --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/creating_a_window/index.html @@ -0,0 +1,106 @@ +--- +title: ウィンドウを作成する +slug: Archive/Mozilla/XUL/Tutorial/Creating_a_Window +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window +--- +<p> </p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Manifest_Files" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Buttons">次のページ »</a></p> +</div> + +<p>このチュートリアルでは、単純なファイル検索ユーティリティを作成していきます。とはいっても、最初は XUL ファイルの基本的な<span style="border-bottom: 1px dashed green;" title="syntax">構文</span>の確認から始めたいと思います。</p> + +<p><span id="Creating_a_XUL_File"></span></p> + +<h3 id="XUL_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B" name="XUL_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B">XUL ファイルを作成する</h3> + +<p>XUL ファイルはどんな名称を付けてもかまいませんが、拡張子は .xul にする必要があります。 最も単純な XUL ファイルは、以下のような構造になります。</p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window + id="findfile-window" + title="Find Files" + orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +<!-- Other elements go here --> +</window> +</pre> + +<p>この例で作成されるウィンドウは、UI 要素を含んでいないため何もしません。 UI 要素は次のセクションで追加する予定です。今回は上のコードについて、行単位で詳細に見ていきます。</p> + +<ol> + <li><strong><?xml version="1.0"?></strong><br> + この行は単に「これは XML ファイルである」ということを宣言しています。 通常、各 xul ファイルの先頭には、この行をそのままの形で記述しておくことが必要です。</li> + <li><strong><?xml-stylesheet href="<a class="external" rel="freelink">chrome://global/skin/</a>" type="text/css"?></strong><br> + この行は、このファイルに使用されるスタイルシートを指定しています。 XML ファイルがスタイルシートをインポートするためにはこの書式を使用します。 この例では、skin パッケージの global パートの中のスタイルがインポートされます。特定のファイルを指定していないため、 Mozilla は、ディレクトリの中から使用に適したファイルを決定します。 この場合、重要なもの全てが含まれている global.css ファイルが選択されます。 このファイルには、全ての XUL 要素に対するデフォルトの宣言が記述されています。 XML では、要素の表示方法に関する前提は全くないため、このファイルで表示方法を指示することになります。 大抵の場合は、この行を 各XUL ファイルの最上部に置いておきます。 また同様の構文を使用して、他のスタイルシートをインポートすることもできます。なお、固有のスタイルシートファイルを使用する場合でも、通常は、その中から global スタイルシートをインポートしておいた方がよいということを注記しておきます。</li> + <li><strong><window</strong><br> + この行は、ウィンドウ (<code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code>) の記述を行うことを宣言しています。 ユーザーインターフェイスのウィンドウはウィンドウごとにファイルを作成して記述します。 このタグは、HTML 文書全体を囲むという点で HTML タグによく似ていますが、文書ではなくユーザーインターフェイスを記述するという点が異なります。 <code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> タグにはいくつかの属性が設定できます。 例では、4 つ設定されています。 例文では属性ごとに行を分けて書いていますが、そうしなければならないわけではありません。</li> + <li><strong>id="findfile-window"</strong><br> + <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性は、ウィンドウをスクリプトから参照するような場合の識別子として使用されます。通常、 <code>id</code> 属性は全ての要素に設定します。名前はどんなものでも構いませんが、関連性のあるものにしておく方が良いと思います。</li> + <li><strong>title="Find Files"</strong><br> + <code><code id="a-title"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/title">title</a></code></code> 属性には、ウィンドウが表示されたときに、タイトルバーに表示したいテキストを記述します。この例では、'Find Files' というテキストが表示されることになります。</li> + <li><strong>orient="horizontal"</strong><br> + <code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性は、ウィンドウ内でアイテムの並べ方を規定します。<code>horizontal</code> という値によって、アイテムがウィンドウを横断して水平に並べられるべきであるという事を示します。 <code>vertical</code> という値を使用すれば、アイテムを縦一列に配置することもできます。これがデフォルト値なので、縦配置を使用したい場合は、この属性の記述自体を省略してもかまいません。</li> + <li><strong>xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"></strong><br> + この行は、XUL の名前空間を宣言します。全ての子要素が XUL である事を示すために、ウィンドウ要素でこの宣言を記述しておく必要があります。なお、この URL が実際にダウンロードされることはありません。Mozilla は、この URL を内部的に見分けます。</li> + <li><strong><span class="nowiki"><!-- Other elements go here --></span></strong><br> + このコメント部分をウィンドウに表示する要素 (ボタン、メニュー、その他いろいろなユーザーインターフェース・コンポーネント) に置き換えることになります。今後のセクションでこれらを追加していきます。</li> + <li><strong></window></strong><br> + そして最後に、ファイルの末尾で <code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code> タグを閉じる必要があります。</li> +</ol> + +<p><span id="Opening_a_Window"></span></p> + +<h3 id=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.82.92.E9.96.8B.E3.81.8F" name=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.82.92.E9.96.8B.E3.81.8F">ウィンドウを開く</h3> + +<p>XUL ウィンドウを開くために、いろいろな方法を使用することができます。開発段階なら、Mozilla のブラウザ・ウィンドウのロケーションバーに URL (chrome: 、 file: 、または他の種類の URL のいずれでも) を入力するだけで可能です。または、XUL ファイルが Mozilla と関連付けられていれば、ファイルマネージャでダブルクリックすることでも可能なはずです。この場合、XUL ウィンドウは、新規に開かれるブラウザ・ウィンドウの中に出現することになりますが、開発の初期段階であればこれで充分だと思います。</p> + +<p>本格的なやり方は、言うまでもなく JavaScript を使用してウィンドウを開くことです。このために新しい構文は不要で、 <a href="/ja/HTML" title="ja/HTML">HTML</a> 文書の場合と同様に <code><a href="/ja/DOM/window.open" title="ja/DOM/window.open">window.open()</a></code> 関数を使用することで可能です。ただし、ブラウザに <a href="/ja/DOM/window.open#Window_functionality_features" title="ja/DOM/window.open#Window_functionality_features">chrome</a> 文書を開くことを示すために、「chrome」というフラグの追加が必要になります。開かれるウィンドウは、通常のブラウザウィンドウにはあるツールバーやメニューといったものがない状態で開かれます。実際の構文は、以下のようになります。</p> + +<pre>window.open(url,windowname,flags); + +※ このflags には "chrome"フラグを含める + +例: +window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300"); +</pre> + +<div class="highlight"> +<p><span id="The_findfile.xul_example"></span></p> + +<h5 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ファイル検索ダイアログの例</h5> +それでは、実際に、ファイル検索ダイアログの基本的なファイルの作成にとりかかりましょう。<code>findfile.xul</code> という名前のファイルを作成して、<code>findfile.manifest</code> ファイルで指定したディレクトリに置きます。(このファイルは、<a href="/ja/XUL_Tutorial/Manifest_Files" title="ja/XUL_Tutorial/Manifest_Files">前のセクション</a>で作成しています)。このページの上部にある XUL のひな形を、このファイルに追加して保存します。</div> + +<p>Mozilla の起動時に、「-chrome」コマンドライン・パラメータを使用することで、XUL ファイルを開くことを指定することもできます。これを指定しないと、デフォルトで開くウィンドウ (通常はブラウザウィンドウ) が開くはずです。例えば、ファイル検索ダイアログは、以下のどちらでも開くことができます。</p> + +<pre>mozilla -chrome chrome://findfile/content/findfile.xul + +mozilla -chrome resource:/chrome/findfile/content/findfile.xul +</pre> + +<p>このコマンドを (コマンドラインを持つプラットフォームなら) コマンドラインから実行することによって、Mozilla のブラウザウィンドウの代わりに、ファイル検索ダイアログがデフォルトで開くはずです。なお、まだウィンドウには何の UI 要素も配置していないので、実際に実行しても、ウィンドウが表示されるのを見ることはできません。次のセクションではいくつか要素を追加する予定です。</p> + +<p>どんな風に動作するかを見たいなら、以下の記述でブックマーク・ウィンドウを開いてみるのがよいでしょう。</p> + +<pre class="eval">mozilla -chrome <a class="external" rel="freelink">chrome://communicator/content/bookma...rksManager.xul</a> + +<span class="highlightred">Firefox を使っている場合は、下記になります</span> +firefox -chrome <a class="external" rel="freelink">chrome://browser/content/bookmarks/bookmarksPanel.xul</a> +</pre> + +<p>引数 「-chrome」 は、ファイルに対して何の<span style="border-bottom: 1px dashed green;" title="privilege">特権</span>も加えません。その代わり、指定されたファイルを、URL 入力欄やメニューといったブラウザ用の chrome を付加せずに、トップレベルのウィンドウとして、開くように作用します。chrome URL を使用してアクセスすることによってのみ特権が付与されます。</p> + +<div class="note"><a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer's Extension</a>には、XULコードを入力すれば、結果を Mozilla の中でリアルタイムに確認できる XULエディタが入ってます！</div> + +<p>次のセクションでは、ウィンドウにボタンを追加してみます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Manifest_Files" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Buttons">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/creating_a_wizard/index.html b/files/ja/archive/mozilla/xul/tutorial/creating_a_wizard/index.html new file mode 100644 index 0000000000..38f4868939 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/creating_a_wizard/index.html @@ -0,0 +1,145 @@ +--- +title: ウィザードの作成 +slug: Archive/Mozilla/XUL/Tutorial/Creating_a_Wizard +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Wizard +--- +<p> </p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Open_and_Save_Dialogs" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Wizards">次のページ »</a></p> +</div> + +<p>多くのアプリケーションでは, 利用者が複雑な作業を行っていく場合の補助のためにウィザードを利用しています。 XUL では、ウィザードを簡単に作る方法を提供しています。</p> + +<h3 id=".E3.82.A6.E3.82.A3.E3.82.B6.E3.83.BC.E3.83.89" name=".E3.82.A6.E3.82.A3.E3.82.B6.E3.83.BC.E3.83.89">ウィザード</h3> + +<p>ウィザード (<span style="color: green;">wizard</span>) は、いくつかのページを含む、特殊な種類のダイアログで、 その下辺には、ページを切り替えるためのナビゲーションボタンが配置されています。 通常、ウィザードは、利用者が複雑な作業を行うのを補助するために使用され、 各ページには、1 つ、または相関するいくつかの質問が含まれています。 また、最後のページが終わったあと、その操作が実行されることになります。</p> + +<p>XUL では、ウィザードの作成に使用可能な <code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> 要素を提供しています。 この <code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> 要素の中には、ウィザードの各ページに置くコンテンツが全て含まれることになります。 また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> に置かれる属性によって、ウィザードのナビゲーションを制御することが可能です。 ウィザードを作成する場合には、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> タグを <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> タグに代えて使用します。</p> + +<div class="note">現状では、ウィザードは chrome URL からの場合のみ正しく動作することに注意してください。</div> + +<p>ウィザードはいくつかの部分から構成されていますが、 その厳密なレイアウトはプラットフォームごとに異なっています。 通常は利用者のプラットフォームのものと同じように表示されることになりますが、 典型的なレイアウトは、上辺に沿ってタイトルが、下辺に沿っていくつかのナビゲーションボタンが置かれ、その間にページのコンテンツが置かれる形になります。</p> + +<p>上辺に置かれるタイトルは、通常のウィンドウと同じように <code><code><a href="/ja/docs/Mozilla/Tech/XUL/title" title="title">title</a></code></code> 属性によって作成されます。 また、ナビゲーションボタンは自動的に生成され、 ウィザードの各ページは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> 要素によって作成されます。 各 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> には、必要ならばどんなコンテンツを置いても構いません。</p> + +<h4 id=".E3.82.A6.E3.82.A3.E3.82.B6.E3.83.BC.E3.83.89.E3.81.AE.E4.BE.8B" name=".E3.82.A6.E3.82.A3.E3.82.B6.E3.83.BC.E3.83.89.E3.81.AE.E4.BE.8B">ウィザードの例</h4> + +<p>以下にウィザードの例を示します。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_wizard_1.xul.txt">ソース</a></p> + +<pre><?xml version="1.0"?> + +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<wizard id="example-window" title="Select a Dog Wizard" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <wizardpage> + <description> + This wizard will help you select the type of dog that is best for you." + </description> + <label value="Why do you want a dog?"/> + <menulist> + <menupopup> + <menuitem label="To scare people away"/> + <menuitem label="To get rid of a cat"/> + <menuitem label="I need a best friend"/> + </menupopup> + </menulist> + </wizardpage> + + <wizardpage description="Dog Details"> + <label value="Provide additional details about the dog you would like:"/> + <radiogroup> + <caption label="Size"/> + <radio value="small" label="Small"/> + <radio value="large" label="Large"/> + </radiogroup> + <radiogroup> + <caption label="Gender"/> + <radio value="male" label="Male"/> + <radio value="female" label="Female"/> + </radiogroup> + </wizardpage> + +</wizard> +</pre> + +<div class="float-right"><img alt="画像:wizard1.jpg"></div> + +<p>このウィザードには 2 つのページがあり、1 つはドロップダウンメニューが、もう 1 つはラジオボタンが含まれています。 ウィザードは、上辺にはタイトル、下辺にはボタンが並ぶように自動的にレイアウトされます。 利用者は「戻る (<span style="color: green;">Back</span>)」ボタンと「次へ (<span style="color: green;">Next</span>)」ボタンでウィザードのページ間を移動できます。 これらの 2 つのボタンは必要に応じて、<span style="border-bottom: 1px dashed green;" title="enable">有効化</span>または<span style="border-bottom: 1px dashed green;" title="disable">無効化</span>されます。 加えて最後のページには、「完了 (<span style="color: green;">Finish</span>)」ボタンが表示されます。 これらの処理は全て自動的に行われるため、開発者はページの操作に関して何も記述する必要はありません。</p> + +<p>また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> 要素にページに、オプションの <code><code id="a-description"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/description">description</a></code></code> 属性を置くことで、そのページに <span style="border-bottom: 1px dashed green;" title="sub-caption">小見出し</span>を設定することが可能です。 上記の例で、小見出しは、1 ページ目にはなく、2 ページ目のみに置かれています。 <span style="color: darkgreen; background: #ef9;">【訳注: ただし画像では小見出しが追加されているようです】</span></p> + +<h3 id=".E3.83.9A.E3.83.BC.E3.82.B8.E3.81.AE.E5.88.87.E3.82.8A.E6.9B.BF.E3.81.88.E5.87.A6.E7.90.86" name=".E3.83.9A.E3.83.BC.E3.82.B8.E3.81.AE.E5.88.87.E3.82.8A.E6.9B.BF.E3.81.88.E5.87.A6.E7.90.86">ページの切り替え処理</h3> + +<p>通常、ウィザードで「完了」ボタンが押された場合には、何か処理を行う必要があるはずです。 このために、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizard" title="wizard">wizard</a></code></code> 要素には <code>onwizardfinish</code> 属性を置いて、 スクリプトが設定できるようになっています。 このスクリプトでは、実行する必要がある処理を全て行って、true を返すようにします。 例えば、以下のようにして、利用者がウィザードで入力した情報を保存するために使用することが可能です。</p> + +<pre><wizard id="example-window" title="Select a Dog Wizard" + onwizardfinish="return saveDogInfo();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> + +<p>利用者が完了ボタンを押したときには、<code>saveDogInfo()</code> 関数が呼ばれることになります。 この関数は、スクリプトファイルで定義されており、入力された情報の保存を実行します。 この関数が true を返した場合は、ウィザードは閉じますが、 false を返した場合は、ウィザードは閉じません。 これは、例えば <code>saveDogInfo()</code> 関数が不正な入力を検出したような場合に行われることになります。</p> + +<p>また、関連する属性としては、<code><code id="a-onwizardback"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onwizardback">onwizardback</a></code></code>、<code><code id="a-onwizardnext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onwizardnext">onwizardnext</a></code></code>、<code><code id="a-onwizardcancel"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onwizardcancel">onwizardcancel</a></code></code> があり、 これらに設定したスクリプトは、それぞれ「戻る」「次へ」「キャンセル」ボタンが押されたときに呼ばれることになります。 なお、これらのスクリプトは、そのときどのページが表示されているかとは関係なく呼び出されます。</p> + +<p>そのとき表示されているページによって異なるコードが呼び出されるようにしたい場合には、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> 要素に対して、 ページが戻された (<span style="color: green;">rewound</span>) 場合のために、<code><code id="a-onpagerewound"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onpagerewound">onpagerewound</a></code></code> 属性を、 ページが進められた (<span style="color: green;">advanced</span>) 場合のために、<code><code id="a-onpageadvanced"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onpageadvanced">onpageadvanced</a></code></code> 属性を設定します。 これらは、各ページに異なるコードを使用できることを除いて、他の関数と同じように動作します。 これらを使用すれば、利用者が次の操作に移る前に、各ページに入力された値を検証することが可能になります。</p> + +<p>また、第 3 の方法として、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> 要素に対して、 ページが表示された (<span style="color: green;">show</span>) 場合のために、<code><code id="a-onpageshow"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code></code> 属性を、 ページが非表示になった (<span style="color: green;">hide</span>) 場合のために、<code><code id="a-onpagehide"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code></code> 属性を設定することも可能です。 これらは、どのボタンによってページが変更されたかには関係なく呼び出されることになります。 (ただし、キャンセルボタンが押された場合は例外で、この場合は <code><code id="a-onwizardcancel"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onwizardcancel">onwizardcancel</a></code></code> を使う必要があります)</p> + +<p>これらの 3 種類の方法によって、必要となるナビゲーションの処理は、十分柔軟に記述することが可能になっています。</p> + +<p>以下の表は、「次へ」ボタンが押された場合に、呼び出される属性関数をまとめたものです。 これらの属性は、表に記載された順番でチェックされることになります。 これらのどれかで false が返された場合、その時点でナビゲーションはキャンセルされます。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>属性</th> + <th>設定するタグ</th> + <th>呼び出される契機</th> + </tr> + <tr> + <td>pagehide</td> + <td>wizardpage</td> + <td>利用者がそのページから去るとき</td> + </tr> + <tr> + <td>pageadvanced</td> + <td>wizardpage</td> + <td>利用者が次へボタンを押したとき (ページ単位)</td> + </tr> + <tr> + <td>wizardnext</td> + <td>wizard</td> + <td>利用者が次へボタンを押したとき (ウィザード共通)</td> + </tr> + <tr> + <td>pageshow</td> + <td>wizardpage</td> + <td>利用者がそのページに入るとき</td> + </tr> + </tbody> +</table> + +<p>また、「戻る」ボタンの場合も、同様の処理が発生することになります。</p> + +<div class="note">上記の pageadvanced のようなイベント処理に関数を使用する場合には、単に <code>funcName()</code> のように呼び出すのではなく、常に <code>return funcName()</code> のように記述する必要があります。 + +<p>つまり、下記のようにしないと期待した通りには動作しません。</p> + +<pre class="eval"> <wizardpage pageadvanced='return funcName()'></wizardpage></code> +</pre> +</div> + +<p>次のセクションでは、いくつかのウィザードの付加的な機能について見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Open_and_Save_Dialogs" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Wizards">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/creating_an_installer/index.html b/files/ja/archive/mozilla/xul/tutorial/creating_an_installer/index.html new file mode 100644 index 0000000000..fa5890d83b --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/creating_an_installer/index.html @@ -0,0 +1,107 @@ +--- +title: インストーラの作成 +slug: Archive/Mozilla/XUL/Tutorial/Creating_an_Installer +tags: + - Tutorials + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_an_Installer +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Cross_Package_Overlays" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Install_Scripts">次のページ »</a></p> +</div> + +<p>このセクションでは、XUL アプリケーションをインストーラにパッケージングする方法について説明します。</p> + +<h3 id="XPInstall_.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8" name="XPInstall_.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8">XPInstall パッケージ</h3> + +<p>Mozilla には、XUL ウィンドウやスクリプト、スキンなどのファイルを、インストーラとして単一のファイルにまとめることが可能なメカニズムがあります。 作成したインストーラは、利用者がダウンロードできる場所に置くことが可能です。 そのパッケージがダウンロードされて、インストールされるときのために、簡単なスクリプトを使用することができます。 このメカニズムは、<a href="/ja/docs/XPInstall">XPInstall</a> (Cross platform Install) と呼ばれています。</p> + +<p>XPInstall によるインストーラは、JAR ファイルとしてパッケージされることになります。 この JAR ファイルの中には、様々なインストール対象のファイルを、全て追加することが可能です。 加えてインストーラには、インストール処理を行うために使用する、インストールスクリプト (install.js) が含まれている必要があります。 このスクリプトは、ファイルやコンポーネントをインストールするために使用可能な様々なインストール関数にアクセスすることになります。<span style="color: darkgreen; background: #ef9;">【訳注: Firefox では、install.rdf に置き換えられています】</span></p> + +<p>インストーラとしての JAR ファイルは、他のアーカイブと区別するために、通常は .xpi という拡張子 (発音は zippy) をつけます。 通常、このインストーラは、新しいスキンやプラグイン、パッケージといった Mozilla のコンポーネントをインストールするために使用されることになります。</p> + +<p>インストーラが起動されてコンポーネントがインストールされるときには、いくつかの段階を経る必要があります。 以下で、順を追って説明していきます。</p> + +<ol> + <li>利用者が、インストール対象のソフトウェアをダウンロードするための Web ページを作成します。 このページには、インストールトリガーと呼ばれる、インストール処理を起動するための小さなスクリプトを含めておきます。</li> + <li>インストールトリガーによって、利用者に対して、そのパッケージがインストールされる旨を記したダイアログが表示されます。 インストールトリガーは、複数のインストーラを起動する事も可能です。 この場合は、リストとして表示されます。 利用者は、ダイアログで継続かキャンセルかの選択をすることになります。</li> + <li>利用者が継続を選択した場合には、XPI ファイルによるインストーラがダウンロードされます。 この処理の間は、プログレスバーが表示されています。</li> + <li>インストールアーカイブから、install.js ファイルが展開されて、実行されます。 このスクリプトは、アーカイブのどのファイルがインストールされるべきかを示すインストール機能を呼び出します。</li> + <li>このスクリプトが完了したとき、新しいパッケージのインストールも終了したことになります。 複数 (multiple)パッケージがインストールされる場合には、それらのスクリプトは順番 (sequence)に実行されます。</li> +</ol> + +<h3 id=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.83.88.E3.83.AA.E3.82.AC.E3.83.BC" name=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.83.88.E3.83.AA.E3.82.AC.E3.83.BC">インストールトリガー</h3> + +<p>上記したように、インストール処理はインストールトリガーによって開始されます。 ここでは、専用のグローバルオブジェクトである <code>InstallTrigger</code> が使用されることになり、 このオブジェクトには、インストール処理を開始するために使用可能なメソッドがいくつか含まれています。 このオブジェクトは、ローカルでもリモートコンテンツからでも利用できるため、 Web サイトからダウンロードして使用するのに適しています。</p> + +<p>それでは、例としてインストールトリガーを作ってみることにしましょう。 ここでは、<code>InstallTrigger.install()</code> という関数を使用します。 この関数には 2 つの引数を取り、1 つ目はインストールするパッケージのリスト、 2 つ目はインストールが完了した時に呼び出されるコールバック関数になります。 以下に例を示します。</p> + +<pre>function doneFn ( name , result ){ + alert("The package " + name + " was installed with a result of " + result); +} + +var xpi = new Object(); +xpi["Calendar"] = "calendar.xpi"; +InstallTrigger.install(xpi,doneFn); +</pre> + +<p>まず、コールバック関数の <code>doneFn()</code> を定義します。この関数はインストールが完了したときに呼び出されることになります。 もちろん、この関数には好きな名前をつけることができます。 この関数には 2 つの引数が渡されることになります。 最初の引数はインストールされたパッケージの名前で、 これは、複数コンポーネントをインストールする際には重要です。 2 つ目の引数は結果 (result)を示すコードです。 結果が 0 ならば、インストールは問題なく成功したことを示し、 結果が 0 以外ならば、エラーが発生したことを意味して、 この場合は、引数の値としてエラーコードが設定されることになります。 ここでは、<code>doneFn()</code> 関数は、単に利用者にアラートボックスを表示するだけです。</p> + +<p>次に、インストーラの名称 (Calendar) と URL (calendar.xpi) を保持する <code>xpi</code> 配列を作成します。 ここには、インストールしたいパッケージ分だけ、同様の行を追加できます。 そして、最後に <code>install</code> 関数をコールします。</p> + +<p>スクリプトのこの部分が実行されたときに、calendar.xpi ファイルがインストールされることになります。</p> + +<div class="highlight"> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ファイル検索ダイアログの例</h4> + +<p>それでは、ファイル検索ダイアログで、試してみることにしましょう。</p> + +<pre>function doneFn ( name , result ){ + if (result) alert("An error occured: " + result); +} + +var xpi = new Object(); +xpi["Find Files"] = "findfile.xpi"; +InstallTrigger.install(xpi,doneFn); +</pre> +</div> + +<h3 id="XPI_.E3.82.A2.E3.83.BC.E3.82.AB.E3.82.A4.E3.83.96" name="XPI_.E3.82.A2.E3.83.BC.E3.82.AB.E3.82.A4.E3.83.96">XPI アーカイブ</h3> + +<div class="note"><strong>注意</strong>: 新規に <a href="/ja/docs/XULRunner">XULRunner のアプリケーション</a>、<a href="/ja/docs/Extensions">拡張</a>、<a href="/ja/docs/Themes">テーマ</a>を作成する場合は、<a href="/ja/docs/Bundles">Bundles</a> の方を参照してください。</div> + +<p>インストーラ本体の XPI ファイルには、<code>install.js</code> という名称のファイルを含んでいる必要があります。 これは <a href="/ja/docs/JavaScript">JavaScript</a> ファイルで、インストール処理の間を通して実行されます。 また、それ以外に含まれるファイルは、インストールするファイルで、 通常はアーカイブの形式にまとめられて、その中のディレクトリに置かれることになりますが、 それが必須というわけではありません。 通常、クロムのファイルは、chrome ディレクトリと似た構造にまとめておきます。</p> + +<p>このため、多くの場合、XPI アーカイブに含まれるファイルは、インストールスクリプト (install.js) と JAR ファイルだけになり、 JAR ファイルには、そのアプリケーションで使用される全てのファイルが含まれることになります。 例えば、Mozilla に同梱されているコンポーネントは、この形式で保存されています。</p> + +<p>また、XPI ファイルは、単なる ZIP ファイルの一種に過ぎませんので、 作成とファイルの追加には、汎用の zip ユーティリティを使用することが可能です。</p> + +<div class="highlight"> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B_2" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B_2">ファイル検索ダイアログの例</h4> + +<p>ファイル検索ダイアログの場合は、以下のような構造でアーカイブを作成することになります。</p> + +<pre>install.js +findfile + content + contents.rdf + findfile.xul + findfile.js + skin + contents.rdf + findfile.css + locale + contents.rdf + findfile.dtd +</pre> +</div> + +<p>パッケージに置く各パートに対応して <code>content</code>、<code>skin</code>、<code>locale</code> ディレクトリが追加されています。 また、クロムファイルを登録するのに必要な contents.rdf ファイルも追加されています。</p> + +<p>次のセクションでは、インストールスクリプトについて、もっと詳しく見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Cross_Package_Overlays" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Install_Scripts">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/creating_dialogs/index.html b/files/ja/archive/mozilla/xul/tutorial/creating_dialogs/index.html new file mode 100644 index 0000000000..1923f990cf --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/creating_dialogs/index.html @@ -0,0 +1,147 @@ +--- +title: ダイアログの作成 +slug: Archive/Mozilla/XUL/Tutorial/Creating_Dialogs +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_Dialogs +--- +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Features_of_a_Window" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Open_and_Save_Dialogs">次のページ »</a></p> +</div></div> + +<p>XUL アプリケーションでは、しばしばダイアログを表示する必要があります。 このセクションでは、ダイアログの作り方について説明します。</p> + +<h3 id=".E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B" name=".E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B">ダイアログを作成する</h3> + +<p>ウィンドウを開くのに使われる <code><a href="ja/DOM/window.open">open()</a></code> 関数と関連する関数に、<code><a href="ja/DOM/window.openDialog">openDialog()</a></code> 関数があります。 <code>open()</code> と比較すると、<code>openDialog()</code> 関数にはいくつかの相違点があります。 まず、ウィンドウではなくダイアログを表示する点で、 これは、この関数が利用者に対して何か問い合わせを行うために使用されることを意味しています。 また、これ以外にも利用者に対して行われる動作や表示の方法に微妙な違いがあるかもしれません。 これらの違いは、アプリケーションを実行するプラットフォームに強く依存することになります。</p> + +<p>加えて、<code>openDialog()</code> 関数は、最初の 3 つ以外にも追加の引数を取ることができます。 これらの引数は、新しいダイアログに渡されて、作成された <code>window</code> の <code>arguments</code> プロパティに配列として保存されます。 <code>openDialog()</code> 関数には、必要であればいくつでも引数を渡すことができます。 この方法は、ダイアログのフィールドにデフォルト値を渡すために利用すると便利です。</p> + +<pre>var somefile=document.getElementById('enterfile').value; + +window.openDialog("chrome://findfile/content/showdetails.xul","showmore", + "chrome",somefile); +</pre> + +<p>この例は、「showdetails.xul」ダイアログを表示します。 このダイアログには、<code>enterfile</code> という ID をもつ要素の値から得られた <code>somefile</code> という引数が 1 つ渡されます。 また、ダイアログで使われているスクリプトからは、<code>window</code> の <code>arguments</code> プロパティを使用して引数を参照することが可能です。 以下に例を示します。</p> + +<pre>var fl = window.arguments[0]; + +document.getElementById('thefile').value = fl; +</pre> + +<p>この方法により、新しいウィンドウに効率的に値を渡すことができます。 また、開いたウィンドウから元のウィンドウに値を返すためには 2 つの方法があります。 1 つ目は、ダイアログから、開き元のウィンドウを保持している <code><a href="ja/DOM/window.opener">window.opener</a></code> プロパティにアクセスする方法です。 2 つ目は、ダイアログ作成時に、関数またはオブジェクトを引数の 1 つとして渡しておき、 開いたダイアログ側でその関数を呼び出すか、オブジェクトを変更する方法です。</p> + +<div class="note"><strong>注意</strong>: <code>openDialog()</code> の呼び出しには、UniversalBrowserWrite の<span style="border-bottom: 1px dashed green;" title="privilege">権限</span>が必要なため、リモートから読み込まれた場合は動作しません。この場合は、代わりに <code>window.open()</code> を使用する必要があります。</div> + +<h3 id=".E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E8.A6.81.E7.B4.A0" name=".E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E8.A6.81.E7.B4.A0">ダイアログ要素</h3> + +<p>ダイアログを作るときには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 要素の位置に、代わりに <code><code><a href="/ja/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code></code> 要素を使うことが推奨されます。 この要素は、ダイアログの下部に置く、OK や Cancel などの 4 つのボタンを作成するために役に立つ機能を提供します。 このとき、明示的に XUL の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 要素を置く必要はありませんが、 利用者がボタンを押したときに行うべき処理のためのコードは用意する必要があります。 このメカニズムは、プラットフォームによってボタンの表示順序が異なることに対応するために必要になります。</p> + +<h4 id=".E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ダイアログの例</h4> + +<p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_dialogs_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dialogs_1.xul">表示</a></p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> + +<dialog id="donothing" title="Dialog example" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + buttons="accept,cancel" + ondialogaccept="return doOK();" + ondialogcancel="return doCancel();"> + +<script> +function doOK(){ + alert("You pressed OK!"); + return true; +} + +function doCancel(){ + alert("You pressed Cancel!"); + return true; +} +</script> + +<description value="Select a button"/> + +</dialog> +</pre> + +<p>ダイアログには、必要ならば任意の要素を置くことが可能です。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/dialog" title="dialog">dialog</a></code></code> 要素には、ウィンドウには無い、追加の属性がいくつかあります。 まず、<code><code id="a-buttons"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/buttons">buttons</a></code></code> 属性では、ダイアログにどのボタンを表示するかを指定します。 ここには、以下の値をコンマで区切って指定します。</p> + +<ul> + <li><code>accept</code> - OK ボタン</li> + <li><code>cancel</code> - キャンセル ボタン</li> + <li><code>help</code> - ヘルプ ボタン</li> + <li><code>disclosure</code> - <span style="border-bottom: 1px dashed green;" title="disclosure">詳細</span>ボタン。さらに詳細な情報を表示ために使用します。</li> +</ul> + +<p>これらのボタンが押されたときに実行されるコードは、 <code><code id="a-ondialogaccept"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ondialogaccept">ondialogaccept</a></code></code>、<code><code id="a-ondialogcancel"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ondialogcancel">ondialogcancel</a></code></code>、<code><code id="a-ondialoghelp"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ondialoghelp">ondialoghelp</a></code></code>、<code><code id="a-ondialogdisclosure"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ondialogdisclosure">ondialogdisclosure</a></code></code> の各属性に設定することが可能です。 先述の例を試した場合、OK ボタンを押したときには <code>doOK</code> 関数が呼ばれ、 Cancel ボタンを押したときには <code>doCancel</code> 関数が呼ばれることがわかるはずです。</p> + +<p>これら 2 つの関数 <code>doOK()</code> と <code>doCancel()</code> は、 ダイアログを閉じることを指示するために <code>true</code> を返しています。 また、<code>false</code> を返した場合は、ダイアログは開いたままになります。 これは、ダイアログの入力欄に不正な値が入力されていたような場合に使うことができます。</p> + +<p>ダイアログが持っている、それ以外の有用な属性を以下に示します。</p> + +<ul> + <li><code><code id="a-buttonlabelaccept"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/buttonlabelaccept">buttonlabelaccept</a></code></code> - accept ボタンに表示するラベル (例: Save) を指定します。</li> + <li><code><code id="a-buttonaccesskeyaccept"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/buttonaccesskeyaccept">buttonaccesskeyaccept</a></code></code> - accept ボタンに使用するアクセスキー (例:S) を指定します。</li> + <li><code><code id="a-defaultButton"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/defaultButton">defaultButton</a></code></code> - Enter キーが押されたときに<span style="border-bottom: 1px dashed green;" title="activate">活性化</span>されるボタンを指定します。</li> +</ul> + +<div class="note"><strong>注意:</strong>ダイアログがリモートサイトから読み込まれる場合には、ボタンの label 属性が必須になってしまいます。このセクションの例を実行した場合も該当するため、ボタンのラベルが表示されません。この件は <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=224996" title="<dialog> buttons have no label in remote XUL">バグ 224996</a> で扱っています。</div> + +<h4 id=".E8.BF.BD.E5.8A.A0.E3.81.AE.E6.A9.9F.E8.83.BD.E3.82.92.E5.88.A9.E7.94.A8.E3.81.97.E3.81.9F.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E8.BF.BD.E5.8A.A0.E3.81.AE.E6.A9.9F.E8.83.BD.E3.82.92.E5.88.A9.E7.94.A8.E3.81.97.E3.81.9F.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">追加の機能を利用したダイアログの例</h4> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> + +<dialog id="myDialog" title="My Dialog" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + onload="window.sizeToContent();" + buttons="accept,cancel" + buttonlabelaccept="Set Favourite" + buttonaccesskeyaccept="S" + ondialogaccept="return doSave();" + buttonlabelcancel="Cancel" + buttonaccesskeycancel="n" + ondialogcancel="return doCancel();"> + +<script> +function doSave(){ + //doSomething() + return true; +} +function doCancel(){ + return true; +} +</script> + +<dialogheader title="My dialog" description="Example dialog"/> +<groupbox flex="1"> + <caption label="Select favourite fruit"/> + <radio id="orange" label="Oranges because they are fruity"/> + <radio id="violet" selected="true" label="Strawberries because of colour"/> + <radio id="yellow" label="Bananna because it pre packaged"/> +</groupbox> + +</dialog> +</pre> + +<p>ダイアログのボタン要素には、以下の JavaScript によってアクセス可能です。</p> + +<pre>// the accept button +var acceptButt = document.documentElement.getButton("accept") +</pre> + +<h4 id=".E3.81.95.E3.82.89.E3.81.AA.E3.82.8B.E4.BE.8B" name=".E3.81.95.E3.82.89.E3.81.AA.E3.82.8B.E4.BE.8B">さらなる例</h4> + +<p>これ以外にも <a href="ja/Code_snippets">Code snippets</a> の <a href="ja/Code_snippets/Dialogs_and_Prompts">Dialogs and prompts</a> にいくつかの例があります。</p> + +<p>次のセクションでは、ファイルダイアログを開く方法について見ていきます。</p> + +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Features_of_a_Window" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Open_and_Save_Dialogs">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/cross_package_overlays/index.html b/files/ja/archive/mozilla/xul/tutorial/cross_package_overlays/index.html new file mode 100644 index 0000000000..ee1c03a1ac --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/cross_package_overlays/index.html @@ -0,0 +1,68 @@ +--- +title: クロスパッケージオーバーレイ +slug: Archive/Mozilla/XUL/Tutorial/Cross_Package_Overlays +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Cross_Package_Overlays +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Overlays" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Creating_an_Installer">次のページ »</a></p> +</div> +<p>このセクションでは、オーバーレイを明示的にインポートしないファイルに対して、オーバーレイを適用する方法について説明します。</p> +<h3 id=".E4.BB.96.E3.81.AE.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.81.AB.E3.82.AA.E3.83.BC.E3.83.90.E3.83.BC.E3.83.AC.E3.82.A4.E3.82.92.E9.81.A9.E7.94.A8.E3.81.99.E3.82.8B" name=".E4.BB.96.E3.81.AE.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.81.AB.E3.82.AA.E3.83.BC.E3.83.90.E3.83.BC.E3.83.AC.E3.82.A4.E3.82.92.E9.81.A9.E7.94.A8.E3.81.99.E3.82.8B">他のパッケージにオーバーレイを適用する</h3> +<div class="note">注意: このセクションで説明されている <code>contents.rdf</code> ファイルは、<a href="/ja/Gecko" title="ja/Gecko">Gecko</a> 1.8 (Firefox 1.5) から、<a href="/ja/XUL_Tutorial/Manifest_Files" title="ja/XUL_Tutorial/Manifest_Files">マニフェストファイル</a>に置き換えられています。</div> +<p>オーバーレイには、もう 1 つ非常に役立つ機能があります。 <a href="/ja/XUL_Tutorial/Overlays" title="ja/XUL_Tutorial/Overlays">前のセクション</a>の例では、ウィンドウから明示的にオーバーレイをインポートしていましたが、 オーバーレイの指定は、別の方法によっても行うことが可能です。 その方法では、オーバーレイをどのウィンドウに適用するかを指定するために、 パッケージの <code>contents.rdf</code> ファイルの変更を行うことになります。 この方法でオーバーレイを利用すれば、他のパッケージのユーザーインターフェイスの変更を、そのパッケージに手を加えることなく行うことができるために便利です。 例えば、これを利用して Mozilla のブラウザウィンドウに<a href="/ja/XUL_Tutorial/Simple_Menu_Bars" title="ja/XUL_Tutorial/Simple_Menu_Bars">メニュー項目</a>や<a href="/ja/XUL_Tutorial/Toolbars" title="ja/XUL_Tutorial/Toolbars">ツールバー</a>を追加することが可能です。</p> +<p>このセクションでは、この機能を利用して Mozilla のブラウザウィンドウにツールバーを加えてみたいと思います。 なお、Mozilla スイートのメールアプリケーションでは、ブラウザウィンドウにコンテントを追加するためにオーバーレイを使用しています。 このため、メールアプリケーションをインストールしない場合には、「新規メッセージ (<span style="color: green;">New Message</span>)」のメニュー項目は表示されず、 メールアプリケーションがインストールされると、オーバーレイがメニューに適用されるために「新規メッセージ」のメニュー項目が追加されることになります。 以下では、ブラウザにファイル検索用のツールバーの追加を行います。 なお、この機能をブラウザに追加しても、おそらく実際の役には立たないと思いますが、とりえずはやってみることにしましょう。</p> +<p>Mozilla では、オーバーレイのリストを、<code>contents.rdf</code> ファイルに追加することが可能です。 これは、クロムパッケージやスキン、ロケールのリストを指定するためにも使用するファイルです。 オーバーレイの作成を行い、それを <code>contents.rdf</code> ファイルに追加することで、 オーバーレイの適用対象の各ウィンドウに項目の追加が行われることになります。</p> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ファイル検索ダイアログの例</h4> +<div class="highlight"> +<p>それでは、まず簡単なオーバーレイの作成から始めます。 ここには、検索するファイル名とディレクトリを入力するための要素だけを置きます。 これを <code>foverlay.xul</code> というファイル名で <code>findfile.xul</code> と同じ <code>findfile</code> ディレクトリに保存しておきます。</p> +<p><span id="foverlay.xul"><a id="foverlay.xul"></a><strong>foverlay.xul</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_crosspov_1.xul.txt">ソース</a></p> +<pre><?xml version="1.0"?> + +<overlay + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<toolbox id="navigator-toolbox"> + <toolbar id="findfile_toolbar"> + <label control="findfile_filename" value="Search for files named:"/> + <textbox id="findfile_filename"/> + <label control="findfile_dir" value="Directory:"/> + <textbox id="findfile_dir"/> + <button label="Browse..."/> + </toolbar> +</toolbox> + +</overlay> +</pre> +<p>上記の例の <code>overlay</code>を <code>window</code> に変更すれば、実際に表示させてみることも可能です。 上記の中で、特別なことがあるとすれば、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> に設定されている <code>id</code> だけです。 この値 (<code>navigator-toolbox</code>) は、ブラウザウィンドウ (<code>navigator.xul</code>) のツールボックスの識別子に指定されているのと同じものを指定しています。 これによって、このオーバーレイが適用されたときには、ブラウザウィンドウのツールボックスに適用されて、 そのコンテントが、<span style="border-bottom: 1px dashed green;" title="extra">追加の</span>ツールバーとしてブラウザに加えられることになります。</p> +<p>このオーバーレイをマニフェストファイルに追加するためには、2 つのリソースを加える必要があります。 1 つめは、オーバーレイを適用するウィンドウを示すためのもので、 以下のコードを、<code>contents.rdf</code> の RDF の終了タグの直前に加えます。</p> +<pre><RDF:Seq about="urn:mozilla:overlays"> + <RDF:li resource="chrome://navigator/content/navigator.xul"/> +</RDF:Seq> +</pre> +<p>上記は、ルートオーバーレイノード (<code>urn:mozilla:overlays</code>) の子として オーバーレイ対象ウィンドウを追加するための宣言になります。 オーバーレイを適用したいウィンドウが他にもある場合は、 <code>li</code> ノードを追加することで、任意のウィンドウを追加することが可能です。</p> +<p>2 つめは、対象のウィンドウに対してどのオーバーレイを適用するかを示すためのものです。 この例では 1 つだけですが、適用するオーバーレイを追加することも可能です。 先述の例の直後に、以下の行を追加します。</p> +<pre><RDF:Seq about="chrome://navigator/content/navigator.xul"> + <RDF:li>chrome://findfile/content/foverlay.xul</RDF:li> +</RDF:Seq> +</pre> +</div> +<p><img alt="画像:crosspov1.jpg" class="internal" src="/@api/deki/files/1882/=Crosspov1.jpg"></p> +<p>Mozilla は上記の情報を読み込むと、別のウィンドウに適用されるオーバーレイのリストの構築を行います。 この情報は <code>chrome/overlayinfo</code> ディレクトリに保存されます。 このディレクトリのファイルは、Mozilla が最初に起動されるか新しいパッケージがインストールされたときに、自動的に生成または更新されるため、手作業で修正を行う必要はありませんが、 このデータを強制的に再構築させたい場合には、このディレクトリと <code>chrome.rdf</code> ファイルを削除しても構いません。</p> +<p>ちなみに、類似のテクニックとして、<code>contents.rdf</code> を使用して、外部スタイルシートの適用を指定することが可能です。 以下の例は、その方法を示しています。</p> +<pre><RDF:Seq about="urn:mozilla:stylesheets"> + <RDF:li resource="chrome://messenger/content/messenger.xul"/> +</RDF:Seq> + +<RDF:Seq about="chrome://messenger/content/messenger.xul"> + <RDF:li>chrome://blueswayedshoes/skin/myskinfile.css</RDF:li> +</RDF:Seq> +</pre> +<p>次のセクションでは、XUL アプリケーションのためのインストーラの作成方法を見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Overlays" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Creating_an_Installer">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/custom_tree_views/index.html b/files/ja/archive/mozilla/xul/tutorial/custom_tree_views/index.html new file mode 100644 index 0000000000..86dfd083d6 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/custom_tree_views/index.html @@ -0,0 +1,125 @@ +--- +title: カスタムツリービュー +slug: Archive/Mozilla/XUL/Tutorial/Custom_Tree_Views +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Custom_Tree_Views +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Tree_Selection" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Tree_View_Details">次のページ »</a></p> +</div> +<p>ツリービューは、ツリーに表示するデータを保持するために使用します。</p> +<p><span id="Creating_a_Custom_View"></span></p> +<h3 id=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90" name=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90">カスタムビューの作成</h3> +<p>これまでのセクションでは、組み込みのコンテントツリービューだけを使用してきました。 このセクションでは、新たに開発者が独自に作成可能なカスタムビューの作り方について説明します。 これは扱うデータ量が大きいときや、その並び方が複雑な場合に必要になります。 例えば、数千の行を持つツリーで <code>treeitem</code> 要素を使用した場合、パフォーマンス的に実用にならないと思います。 また、表示するデータを計算処理によって作成するような場合にも、カスタムビューによる実装は適しています。 カスタムビューを作成すると、使用するデータの種類に最も適した方法で、データの取得と保存を行うことができます。 このため、たとえ表示対象の行が数十万行あるような場合も、ツリーを利用することが可能になります。</p> +<div class="note"> + 注意: ツリー関連のインターフェイスは、 <a href="ja/Gecko">Gecko</a> 1.8. (<a href="ja/Firefox_1.5">Firefox 1.5</a>) で変更されました。詳細は <a href="ja/Tree_Widget_Changes">Tree Widget Changes</a> を参照してください。</div> +<p>カスタムビューを作成するには、<a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsITreeView.html">nsITreeView</a> インターフェイスを実装したオブジェクトを作成する必要があります。 このオブジェクトは <a href="ja/JavaScript">JavaScript</a> で作成することも可能ですが、ツリーごとに別々のオブジェクトを作成する必要があります。 カスタムツリービューを利用する場合、コンテントツリービューは利用しないので、当然 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> の各要素も使用しません。 カスタムビューは、データを別の所から取得することになるため、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素は空にしておきます。 以下に例を示します。</p> +<pre><tree id="my-tree" flex="1"> + <treecols> + <treecol id="namecol" label="Name" flex="1"/> + <treecol id="datecol" label="Date" flex="1"/> + </treecols> + <treechildren/> +</tree> +</pre> +<p>このツリーに表示するデータを設定するためには、ビューオブジェクトを作成する必要があります。 ビューは、ツリーの各セルの値や行の総数といった情報や、それ以外で付加的に必要な情報をツリーに示すために使用されます。 このため、ツリーは表示に必要な情報の取得のために、ビューのメソッドを呼び出すことになります。</p> +<p>一般的に、ツリービューで実装可能な関数は 30 以上ありますが、必須で実装しなければならないものは、ツリーから呼び出されるものだけになります。 必ず実装する必要がある 3 つのメソッドを、以下に示します。</p> +<dl> + <dt> + rowCount</dt> + <dd> + このプロパティは、ツリーに含まれる行の総数が設定されている必要があります。</dd> + <dt> + getCellText( row , column )</dt> + <dd> + このメソッドは、指定された行と列に対応するテキストを返す必要があります。このメソッドは、各セルにデータを表示するために呼び出され、このとき、行を表す引数 row には 0 から始まる数が渡されます。また、列を表す引数 column には、対応する <code>TreeColumn</code> オブジェクトが渡されます。ただし、(<a href="ja/Firefox_1.5">Firefox 1.5</a>/Mozilla 1.8) より古いバージョンでは、列の id 属性の値が渡されます。なお、以前のように id が必要な場合は、<code>TreeColumn</code> の <code>id</code> プロパティを利用することができます。</dd> + <dt> + setTree( tree )</dt> + <dd> + このメソッドは、一度だけ呼び出され、そのビューに対応する tree 要素を設定します。</dd> +</dl> +<p>以下にツリービューオブジェクトの定義例を示します。 なお、オブジェクトの名前は、好みのもので構いません。</p> +<pre>//Moz 1.8 +var treeView = { + rowCount : 10000, + getCellText : function(row,column){ + if (column.id == "namecol") return "Row "+row; + else return "February 18"; + }, + setTree: function(treebox){ this.treebox = treebox; }, + isContainer: function(row){ return false; }, + isSeparator: function(row){ return false; }, + isSorted: function(){ return false; }, + getLevel: function(row){ return 0; }, + getImageSrc: function(row,col){ return null; }, + getRowProperties: function(row,props){}, + getCellProperties: function(row,col,props){}, + getColumnProperties: function(colid,col,props){} +}; +</pre> +<p>この例には、最低限ツリーを動作させるためには必須ではないため、上の説明には含まれていない関数がいくつか定義されています。 これらについても、ツリーが付加的な情報の取得のために呼び出すので、上記のように最低限の実装はしておく必要があります。</p> +<p>この例は 10,000 の行を持つツリーの例としても使用することができるもので、 最初の列のセルの内容は、テキスト「Row X」(X は行の番号) になります。 また、2 番目の列のセルの内容は、固定で「February 18」になります。 関数 <code>getCellText()</code> にある if 文では、引数 column の <code>id</code> プロパティと、テキスト「<code>namecol</code>」の比較をしています。 このテキスト「<code>namecol</code>」は、前の例における最初の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素の <code>id</code> に対応しています。 言うまでもなく、この例はごく単純なもので、実際のアプリケーションでは各セルのデータの扱いはもっと複雑なものになるはずです。</p> +<p>最後にビューオブジェクトとツリーを関連付ける必要があります。 ツリーには <code>view</code> プロパティがあり、ここに上で作成したビューオブジェクトを設定します。 このプロパティは、いつでもビューの設定のために値を代入したり変更したりすることが可能です。</p> +<pre>function setView(){ + document.getElementById('my-tree').view = treeView; +} +</pre> +<p><span id="Example_custom_tree"></span></p> +<h4 id=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E4.BE.8B" name=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E4.BE.8B">カスタムツリーの例</h4> +<p>以下に、これまでの例をまとめたものを示します。 なお、ここでは例を単純にするためにスクリプトをインラインに記述していますが、 通常は外部スクリプトファイルに記述するようにしてください。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeview_1.xul.txt">ソース</a></p> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window title="Tree Example" id="tree-window" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + onload="setView();"> + +<script> +//Moz 1.8 +var treeView = { + rowCount : 10000, + getCellText : function(row,column){ + if (column.id == "namecol") return "Row "+row; + else return "February 18"; + }, + setTree: function(treebox){ this.treebox = treebox; }, + isContainer: function(row){ return false; }, + isSeparator: function(row){ return false; }, + isSorted: function(){ return false; }, + getLevel: function(row){ return 0; }, + getImageSrc: function(row,col){ return null; }, + getRowProperties: function(row,props){}, + getCellProperties: function(row,col,props){}, + getColumnProperties: function(colid,col,props){} +}; + +function setView(){ + document.getElementById('my-tree').view = treeView; +} +</script> + +<tree id="my-tree" flex="1"> + <treecols> + <treecol id="namecol" label="Name" flex="1"/> + <treecol id="datecol" label="Date" flex="1"/> + </treecols> + <treechildren/> +</tree> + +</window> +</pre> +<div class="float-right"> + <img alt="画像:treeview1.png"></div> +<p>画像から、2 つの列に、それぞれ <code>getCellText()</code> 関数から取得されたデータが表示されていることが確認できます。 また、この例ではビューを設定する <code>setView()</code> 関数を、ウインドウの <code>onload()</code> ハンドラから呼び出すようにしていますが、 必要ならばもっと遅いタイミングで行ってもかまいません。 なお、ビューはいつでも変更できます。</p> +<p><code>getCellText()</code> 関数が、実際に内容を表示する必要があるときにのみ呼び出されていることを補足しておきます。 上の 10,000 行の例の場合も、<code>getCellText()</code> は、そのとき表示中のセルに対してのみ呼び出されています。 この画像では、最後に一部だけ表示されている行も含めて、7 行が表示されているだけなので、 <code>getCellText()</code> は、7 行 × 2 列で、計 14 回しか呼び出されません。 それ以外の行については、利用者がスクロールを行って、実際に表示されるようになったときに呼び出されます。 この挙動が、ツリーを非常に効率的なものにしています。</p> +<p>ビューオブジェクトは、組み込みのコンテントツリービューを利用するツリーでも利用できることを注記しておきます。 このビューを、セルのラベルなどの情報を取得するために利用することができます。</p> +<p>ツリービューに実装することができる、全てのプロパティと一覧は <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsITreeView.html">nsITreeView インターフェイス</a> を参照してください。 このうちのいくつかは、次のセクションで見ていく予定です。</p> +<p>次のセクションでは、ツリービューのさらに高度な使い方について見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Tree_Selection" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Tree_View_Details">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/document_object_model/index.html b/files/ja/archive/mozilla/xul/tutorial/document_object_model/index.html new file mode 100644 index 0000000000..7ca84f58c1 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/document_object_model/index.html @@ -0,0 +1,274 @@ +--- +title: ドキュメントオブジェクトモデル +slug: Archive/Mozilla/XUL/Tutorial/Document_Object_Model +tags: + - DOM + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Document_Object_Model +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Broadcasters_and_Observers" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Modifying_a_XUL_Interface">次のページ »</a></p> +</div> +<p>ドキュメントオブジェクトモデル (DOM) は、XUL 要素に対して、要素の情報を取得したり、変更を行うために使用できます。 +</p><p><span id="DOM_Introduction"></span> +</p> +<h3 id="DOM_.E3.81.AE.E6.A6.82.E8.A6.81" name="DOM_.E3.81.AE.E6.A6.82.E8.A6.81"> DOM の概要 </h3> +<p><a href="ja/DOM">ドキュメントオブジェクトモデル</a> (DOM) は、XUL ノードをツリー構造で保持するために用いられます。 +XUL ファイルが読み込まれるとき、タグが解析されて、1 つのタグ、または 1 つのテキストブロックを 1 つのノードとする階層型の文書構造 (DOM 構造) に変換されます。 +また、さまざまなメソッドが DOM 構造の内容を調べたり、変更したりするために提供されており、これらを利用して目的の操作を行うことが可能です。 +さらに、一部の XUL 要素には、追加の関数が提供されており、これらを使うことも可能です。 +</p><p>個々の XUL ファイルが読み込まれたとき、対応する文書 (<span style="color: green;">document</span>) オブジェクトが、ウィンドウやフレーム内に表示するために作成されます。 +ウィンドウには、同時に 1 つの文書しか関連付けることができませんが、色々なメソッドを使って付加的な文書を読み込ませることは可能です。 +</p><p>Mozilla では、<a href="ja/JavaScript">JavaScript</a> を使って <a href="ja/DOM">DOM</a> にアクセスしたり操作したりすることが可能です。 +多くの DOM オブジェクトが、スクリプトからアクセス可能な関数を持っていますが、 +DOM が「JavaScript からアクセス可能な API のひとつである」ことは重要なので覚えておいてください。 +別の言い方をすれば、JavaScript 自身は、純粋なスクリプト言語であり、スクリプトからこれらのオブジェクトにアクセスできるのは、Mozilla がこれらのオブジェクトへのアクセス方法を提供しているからにすぎないということです。 +</p><p><a href="ja/JavaScript">JavaScript</a> では、グローバルオブジェクトが常に 1 つ存在して、いつでも利用することが可能になっています。 +このグローバルオブジェクトは、(<i>object</i>.<i>property</i> のような形式で) オブジェクト名で修飾しなくともプロパティやメソッドの参照ができます。 +例えば、このグローバルオブジェクトが 「<code>name</code>」というプロパティを持っている場合、 +<code>name</code> がどのオブジェクトに属しているかを指定しなくても、単に「<code>name = 7</code>」 というコードだけで変更することが可能です。 +ブラウザコンテキストでは、ウィンドウがグローバルオブジェクトになっており、これは XUL の場合であっても該当します。 +したがって、このグローバルオブジェクトはウィンドウごとに異なることになります。 +また、フレーム構成の場合、各フレームはそれぞれ別個のウィンドウオブジェクトを持っています。 +</p><p>また、ウィンドウは、しばしば <code><a href="ja/DOM/window.window">window</a></code> プロパティを使って参照されます。 +この指定はオプションなのですが、参照しているメソッドのスコープを明示するために、ときどき利用されます。 +例えば、以下の 2 つの行は、どちらも新しいウィンドウを開くために、同一の機能を呼び出します。 +</p> +<pre>window.open("test.xul","_new"); +open("test.xul","_new"); +</pre> +<p>スクリプトのトップレベルで、つまり他の関数の外部で関数や変数を宣言すると、実際にはグローバルオブジェクトのプロパティを宣言していることになります。 +XUL でも、宣言した関数は、それぞれウィンドウオブジェクトのプロパティとして設定されます。 +例えば、以下のコードは、「Message」というテキストで 2 回<a href="ja/DOM/window.alert">アラート</a>を表示します。 +</p> +<pre>function getText(){ + return "Message"; +} + +alert(getText()); +alert(window.getText()); +</pre> +<p>このため、他のウィンドウで使用されているスクリプトの中で宣言されている変数にアクセスしたり、関数を呼び出したりするために必要なことは、そのウィンドウの <code><a href="ja/DOM/window">window</a></code> オブジェクトを使用することだけです。 +例えば、上の 2 つの例を 1 つのスクリプトファイルにまとめて、getText() 関数を、他のウィンドウ (開いた test.xul ウィンドウ) の中から呼び出したいとします。 +これは、以下のようにして行うことが可能です。 +</p> +<pre>alert(window.opener.getText()); +</pre> +<p>各ウィンドウには <code><a href="ja/DOM/window.opener">opener</a></code> プロパティがあり、そのウィンドウを開いたウィンドウオブジェクトを保持しています。 +この例では <code>opener</code> で、開き元のウィンドウを取得して、そこで使われているスクリプトの中で宣言された <code>getText()</code> 関数を呼び出しています。 +なお、<code>opener</code> プロパティを <code>window</code> という識別子で修飾しているのは、<code>opener</code> が、<code>window</code> のプロパティであることを明示するためであることを補足しておきます。 +</p><p><code>window</code> の <code><a href="ja/DOM/window.open">open()</a></code> メソッドは、新しいウィンドウへの参照を返すので、開き元のウィンドウからも、新しいウィンドウの関数を呼び出すことが可能です。 +しかしながら、これを利用するときに考慮するべき重要な注意事項が 1 つあります。 +それは、<code><a href="ja/DOM/window.open">open()</a></code> メソッドは、ウィンドウが完全にロードされる前に戻るために、戻った直後は、新しいウィンドウ上の関数が、まだ利用可能な状態になっていないことが多いという点です。 +</p><p>ウィンドウオブジェクトは、DOM のどの水準の仕様にも定義されていませんが、Mozilla では、しばしば、これを「<a>DOM 水準 0</a>」に含まれているとみなします。 +「DOM 水準 0」とは、一部の開発者の間で、(NN 3.0 か IE3.0 に含まれる関数で) DOM と似たコンセプトの関数ではあるものの、仕様化が及んでいないものを示すために使われていた名前です。 +ウィンドウに表示されている実際の文書は、<code><a href="ja/DOM/window">window</a></code> の <code><a href="ja/DOM/window.document">document</a></code> プロパティを使って取得できます。 +なお、<code>document</code> プロパティは、<code>window</code> の中でも最もよく参照されるプロパティの 1 つであるため、 通常は「<code>window.</code>」で修飾せずに参照します。 +</p><p>Mozilla は、文書の種類に応じて、いくつか異なる文書オブジェクトを提供しています。 +主要な文書としては、<a href="ja/HTML">HTML</a>、<a href="ja/XML">XML</a>、<a href="ja/XUL">XUL</a> の 3 つがあり、<a class="external" href="http://www.xulplanet.com/references/objref/HTMLDocument.html">HTMLDocument</a>、<a class="external" href="http://www.xulplanet.com/references/objref/XMLDocument.html">XMLDocument</a>、<a class="external" href="http://www.xulplanet.com/references/objref/XULDocument.html">XULDocument</a> が、それぞれ対応する文書オブジェクトになります。 +言うまでもないですが、最後の文書型が XUL 用です。 +これら 3 つの文書型は、類似している点が多いため、 +実際のコードについても、同一の基本実装を共有しています。 +また逆に、いずれかの文書型に固有な関数もいくつか存在しています。 +</p><p><span id="Retrieving_Elements"></span> +</p> +<h3 id=".E8.A6.81.E7.B4.A0.E3.81.AE.E5.8F.96.E5.BE.97" name=".E8.A6.81.E7.B4.A0.E3.81.AE.E5.8F.96.E5.BE.97"> 要素の取得 </h3> +<p>文書中の要素を取得するためには、要素に <code><a href="ja/DOM/element.id">id</a></code> 属性を設定しておき、 <code>document</code> の <code><a href="ja/DOM/document.getElementById">getElementById()</a></code> メソッドを使うのが、最もよく利用される方法になります。 +このため、このチュートリアルでも、ファイル検索ダイアログの多くの要素に、<code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性を設定しています。 +例えば、以下のコードによって、チェックボックスの状態を知ることができます。 +</p> +<pre>var state = document.getElementById('casecheck').checked; +</pre> +<p>この、<code>casecheck</code> という値は、「case sensitive」 <a href="ja/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons">チェックボックス</a>の <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> と対応しています。 +チェック状態の取得が済んだら、その結果を検索の実行をするときの指示として使用できます。 +それ以外のチェックボックス、あるいは <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性が設定された任意の要素についても、おおむね同じように処理することが可能です。 +例えば、テキスト入力欄から、入力されたテキストの取得が必要といった場合にも、利用できます。 +</p> +<div class="highlight"> +<p><span id="Our_find_files_example"></span> +</p> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B"> ファイル検索ダイアログの例 </h4> +<p>ファイル検索ダイアログが表示されたときに、最初から<a href="ja/XUL_Tutorial/Progress_Meters">プログレスバー</a>や、検索結果のためのダミーの<a href="ja/XUL_Tutorial/Trees">ツリーデータ</a>が表示されていても意味がありません。 +これらは、その要素を見てみるために、とりあえず追加したものです。 +今回は、これらを取り除いて、Find ボタンが押されたときに表示するように修正してみることにしましょう。 +まず、初期状態では<span style="border-bottom: 1px dashed green;" title="invisible">不可視</span>にする必要があります。 +要素を可視状態にするかどうかの制御には、<code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> 属性が使用されます。 +</p><p>プログレスメータを、<code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> を使用して、初期状態では隠されているように変更します。 +また、スクリプトから、表示したり隠したりするために参照できるように、<code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性も追加しておきます。 +あわせて、<a href="ja/XUL_Tutorial/Splitters">スプリッター</a>と結果ツリーも、表示する必要があるのは検索実行後だけなので、それらも隠しておくことにしましょう。 +</p> +<pre class="eval"><tree <span class="highlightred">id="results" hidden="true"</span> flex="1"> + . + . + . +<splitter <span class="highlightred">id="splitbar"</span> resizeafter="grow" <span class="highlightred">hidden="true"</span>/> + +<hbox> + + <progressmeter <span class="highlightred">id="progmeter"</span> value="50%" + style="margin: 4px;" <span class="highlightred">hidden="true"</span>/> +</pre> +<p><code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> 属性が追加され、値は <code>true</code> に設定されています。 +これによって、要素は最初に表示されたときには隠されるようになります。 +</p><p>続いて、Find ボタンが押されたときに呼ばれる関数の追加に取りかかりましょう。 +このスクリプトは、別のファイル <tt>findfile.js</tt> に置くことにします。 +<a href="ja/XUL_Tutorial/Adding_Event_Handlers">これまでのセクション</a>で、XUL ファイルに <code><code><a href="/ja/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code> 要素が追加されていると思います。 +もし、まだ追加していないのであれば、以下のように追加して下さい。 また、<code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> ハンドラの Find ボタンへの追加も行っておきます。 +</p> +<pre class="eval"><script src="findfile.js"/> + . + . + . +<button id="find-button" label="Find" + <span class="highlightred">oncommand="doFind();"</span>/> +</pre> +<p>それでは、<tt>findfile.js</tt> という名前のファイルを、<tt>findfile.xul</tt> と同じディレクトリに作成してください。 +作成したファイルに <code>doFind()</code> 関数を追加します。 +なお、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/script" title="script">script</a></code></code> タグによって、コードを直接含めることも可能ではありますが、いくつかの理由によって、外部から読み込む方がパフォーマンスが高くなります。 +このため、スクリプトは、イベントハンドラに直接置かれる短い断片を除いて、常に別のファイルに置くべきだと思います。 +</p> +<pre class="eval">function doFind(){ + var meter = document.getElementById('progmeter'); + meter.hidden = false; +} +</pre> +<p>この関数は、まずプログレスメータの参照を、id である <code>progmeter</code> を使用して取得します。 +そして、次の行で、<code><code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code></code> 属性の状態を変えるため、要素は再び可視状態になります。 +</p><p>最後に、アラートダイアログをポップアップして検索対象を表示するようにしておきます。 +もちろん、これは完成版で実現したい挙動ではありませんが、とりあえずは確認のために、起こるはずの動作を表示するように追加しておくことにします。 +</p> +<pre class="eval">function doFind(){ + var meter=document.getElementById('progmeter'); + meter.hidden = false; + <span class="highlightred">var searchtext=document.getElementById('find-text').value; + alert("Searching for \"" + searchtext + "\"");</span> +} +</pre> +<p>これで、アラートダイアログによって、Find ボタンをクリックしたときに何が起きるはずなのかが分かるようになります。 +ここでは割愛しますが、ドロップダウンリストから、選択内容を取得するようなコードをさらに追加していくことも可能です。 +</p><p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-dom.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-dom.xul">表示</a> +</p> +</div> +<p><span id="XUL_Element_DOM"></span> +</p> +<h3 id="XUL_.E8.A6.81.E7.B4.A0.E3.81.A8_DOM" name="XUL_.E8.A6.81.E7.B4.A0.E3.81.A8_DOM"> XUL 要素と DOM </h3> +<p>すべての XUL 要素は、それぞれ「属性」「プロパティ」「子要素」を 1 セットずつ持っています。 +</p> +<ul><li> 属性は、ソース (XUL ファイル) で宣言されるもので、例えば「<code>flex="1"</code>」の記述は、<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性を <code>1</code> という値で設定することを示します。 +</li><li> プロパティは、JavaScript からドット構文を使って利用するもので、例えば、「<i>element</i><code>.hidden</code>」は、要素の <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/hidden">hidden</a></span></code></code> プロパティを参照します。 +</li><li> 子要素は要素の子タグのことで、ソースでは要素内に入れ子になっています。 </li></ul> +<p>DOM メソッドを用いると、要素の属性、プロパティ、子要素を動的に操作することが可能です。 +</p><p>まず「属性とプロパティは別のものである」ことに注意するのは重要です。 +名前が規定された属性があることは、必ず対応する同じ名前のプロパティがあることを意味しません。 +とはいっても、多くの場合、対応するプロパティが存在するのも事実です。 +例えば、ある要素の flex の値を得るには、 <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/flex">flex</a></span></code></code> プロパティが使えます。 +この場合、内部のコードでは、単に属性の値を返すだけですが、 +他のプロパティでは、XUL はもっと複雑な計算を行っているかもしれません。 +</p><p>下記に示すメソッドを利用して、要素の任意の属性を操作することが可能です。 +</p> +<dl><dt> <a href="ja/DOM/element.getAttribute">getAttribute</a> ( name ) +</dt><dd> <code>name</code> で指定された名前の属性の値を返します。 +</dd><dt> <a href="ja/DOM/element.hasAttribute">hasAttribute</a> ( name ) +</dt><dd> <code>name</code> で指定された名前の属性が、値を持っていれば <code>true</code> を返します。 +</dd><dt> <a href="ja/DOM/element.setAttribute">setAttribute</a> ( name , value ) +</dt><dd> <code>name</code> で指定された名前の属性の値を、<code>value</code> で指定された値に設定します。 +</dd><dt> <a href="ja/DOM/element.removeAttribute">removeAttribute</a> ( name ) +</dt><dd> <code>name</code> で指定された名前の属性を削除します。 +</dd></dl> +<p>これらの関数を利用すれば、いつでも属性の値を取得したり変更したりすることが可能です。 +例えば、<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性の値を使用するためには、以下のようなコードが利用できます。 +</p> +<pre> var box = document.getElementById('somebox'); + var flex = box.getAttribute("flex"); + + var box2 = document.getElementById('anotherbox'); + box2.setAttribute("flex", "2"); +</pre> +<p>といっても、 <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性に関しては、代わりに使うことのできる、<a href="ja/XUL/Property/flex">対応するスクリプトプロパティ</a>を持っています。 +これを使っても、特別な効果が追加されるわけではありませんが、少しタイピング量を少なくできます。 +以下の例は、上の例と動作は同じですが、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/flex">flex</a></span></code></code> プロパティを使うように変更したものです。 +</p> +<pre> var box = document.getElementById('somebox'); + var flex = box.flex; + + var box2 = document.getElementById('anotherbox'); + box2.flex = 2; +</pre> +<p>要素の参照を得ることができれば、その要素のプロパティを呼び出すことが可能です。 +例えば、ある要素の <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/hidden">hidden</a></span></code></code> プロパティを得るためには、 +<i>element</i> をその要素への参照とすると、 +<i>element</i><code>.hidden</code> という構文を用いることができます。 +リファレンスを見たとき、リストされているプロパティのほとんどは、要素間に共通する属性に関係していることに気がつくと思います。 +また、プロパティと属性で、違いがある場合ももちろんあります。 +例えば、隠されている要素に対して、<code>getAttribute("hidden")</code> を呼び出したときには、<strong><font color="green">文字列として</font></strong> <code>"true"</code> を返しますが、 +<code>hidden</code> プロパティを用いた場合は、<strong><font color="green">真偽値として</font></strong> <code>true</code> を返します。 +この場合は、型変換が済んでいるため、プロパティのほうが使いやすくなっています。 +</p><p>それぞれの文書型で同様なのですが、XUL 要素には、<a href="ja/HTML">HTML</a> 要素や <a href="ja/XML">XML</a> 要素と同様に、個別の要素オブジェクトが存在しています。 +これら全ての XUL 要素オブジェクトは、<code><a class="external" href="http://www.xulplanet.com/references/objref/XULElement.html">XULElement</a></code> インターフェイスを実装しています。 正確には「XUL 要素」とは「XUL 名前空間で宣言された要素」のこと指しています。 +このため、 XUL 要素は、他の XML 文書に加えられたときでも、<code>XULElement</code> で規定されたインターフェイスを持ち、逆に XUL でない要素を、XUL 文書に加えてもこのインターフェイスは持ちません。 +<code>XULElement</code> インターフェイスは、XUL 要素に特有のプロパティやメソッドをいくつか持っています。 +また、多くのプロパティやメソッドを、汎用の DOM Element インターフェイスから継承しています。 +</p><p>名前空間とは、要素の種別を指定する URI です。以下に例を示します。 +</p> +<pre><button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> +<button xmlns="http://www.w3.org/1999/xhtml"/> +<html:button xmlns:html="http://www.w3.org/1999/xhtml"/> +<html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> +</pre> +<p>名前空間は <code>xmlns</code> 属性を使って指定します。 +</p> +<ul><li> 最初のボタンは、XUL 名前空間に置かれているので、 XUL 要素です。 +</li><li> 2 番目の要素は、XHTML 名前空間が与えられているので、XHTML 要素になります。 +</li><li> 3 番目の例では、接頭辞「html」が名前空間「<span class="nowiki">http://www.w3.org/1999/xhtml</span>」にマップされています。このように、コロンをつけた接頭辞構文を使って、特定の名前空間を使うこともできます。1 つのドキュメント内に名前空間をいくつか使っていて、どの名前空間かを正確にする必要があるときに、この構文を使用します。これにより、このケースでは、XHTML ボタンが作られることになります。 +</li><li> 4 番目のボタンは少し紛らわしいものですが、重要なのは URI であって接頭辞ではないことを明確にするために示しています。この例は、接頭辞は「html」ですが、URI が、XUL 名前空間であるために、これは XUL ボタンであって、HTML ボタンではありません。 +</li></ul> +<p>最後の例で示した、何が名前空間を決定するかを区別することは重要です。 +実際、接頭辞に用いられる実テキストは、どの種別の要素かを特定するために影響を与えません。 +</p><p>DOM では、いくつかの名前空間と関連する関数を、名前空間を意識しない関数に似せるようにして提供しています。 +例えば、<code><a href="ja/DOM/element.getAttributeNS">getAttributeNS()</a></code> 関数は、付加的な引数によって、特定の名前空間にある属性を指定可能であること以外は、<code><a href="ja/DOM/element.getAttribute">getAttribute()</a></code> 関数と類似しています。 +</p><p>多くの XUL 要素は、その要素に固有な独自のプロパティを持っています。 +各要素で使用可能な属性やプロパティの完全なガイドには、<a href="ja/XUL_Reference">XUL リファレンス</a>を参照してください。 +</p><p><span id="Navigating_the_DOM"></span> +</p> +<h3 id="DOM_.E3.81.AE.E6.AD.A9.E3.81.8D.E6.96.B9" name="DOM_.E3.81.AE.E6.AD.A9.E3.81.8D.E6.96.B9"> DOM の歩き方 </h3> +<p>DOM は、単一のルートノードが、複数の子を持つ形式の、ツリー構造になっています。 +ルートノードへの参照は、<code>document</code> の <code><a href="ja/DOM/document.documentElement">documentElement</a></code> プロパティを使って取得することが可能です。 +このルートノードは常に要素ですが、ツリーの中の他のノードはそうであるとは限りません。 +ツリーの中の要素は、XUL ソース中のタグと対応していますが、ツリーの中には、テキストノードや、コメントノードなど、他のタイプもいくつか見ることができます。 +XUL の場合、ルート要素は、XUL 文書の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> タグになります。 +また、ツリーの中の各ノードには、子ノードを持っているものがあり、その子ノードにも、さらにそれぞれの子ノードを持っているものもあります。 +このように、DOM はツリー構造であるため、いくつかのプロパティを使ってツリーの中を歩きまわることができます。 +よく使われるメソッドを以下に示します。 +</p> +<dl><dt> <a href="ja/DOM/element.firstChild">firstChild</a> </dt><dd> ノードの最初の子ノードへの参照です。 +</dd><dt> <a href="ja/DOM/element.lastChild">lastChild</a> </dt><dd> ノードの最後の子ノードへの参照です。 +</dd><dt> <a href="ja/DOM/element.childNodes">childNodes</a> </dt><dd> ノードの子のリストを保持しています。 +</dd><dt> <a href="ja/DOM/element.parentNode">parentNode</a> </dt><dd> ノードの親ノードへの参照です。 +</dd><dt> <a href="ja/DOM/element.nextSibling">nextSibling</a> </dt><dd> ノードの兄弟ノードの順序で、次のノードへの参照です。 +</dd><dt> <a href="ja/DOM/element.previousSibling">previousSibling</a> </dt><dd> ノードの兄弟ノードの順序で、前のノードへの参照です。 +</dd></dl> +<p>これらのプロパティを利用して、様々な方法で文書内を歩き回ることができます。 +例えば、<code><a href="ja/DOM/element.firstChild">firstChild</a></code> プロパティを使って要素の最初の子を取得し、それから <code><a href="ja/DOM/element.nextSibling">nextSibling</a></code> プロパティを使って、子ノードの間を歩いていくことが可能です。 +あるいは、同じことを <code><a href="ja/DOM/element.childNodes">childNodes</a></code> リストの項目を繰り返し処理することでも行えます。 +なお、Mozilla では、後者のほうが効率がよくなります。 +</p><p>以下の例は、ルートノードの子ノードに繰り返し処理を行う方法を示しています。 +</p> +<pre>var childNodes = document.documentElement.childNodes; +for (var i = 0; i < childNodes.length; i++) { + var child = childNodes[i]; + // do something with child +} +</pre> +<p>この、<code>childNodes</code> 変数は、文書のルート要素の子ノードを保持しています。 +それから、子ノードに対して繰り返し処理するために for ループを使用し、各項目には配列のようにアクセスしています。 +</p><p><small>関連ページ: <a href="ja/A_re-introduction_to_JavaScript">JavaScript 再入門</a>、<a href="ja/Core_JavaScript_1.5_Reference">JavaScript リファレンス</a></small> </p><p>次のセクションでは、 DOM の変更の仕方について学びます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Broadcasters_and_Observers" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Modifying_a_XUL_Interface">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/element_positioning/index.html b/files/ja/archive/mozilla/xul/tutorial/element_positioning/index.html new file mode 100644 index 0000000000..5ce0a97df2 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/element_positioning/index.html @@ -0,0 +1,274 @@ +--- +title: ウィンドウ要素の配置 +slug: Archive/Mozilla/XUL/Tutorial/Element_Positioning +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:The_Box_Model" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Box_Model_Details">次のページ »</a></p> +</div> + +<p>このセクションでは、要素の位置とサイズの制御について見ていきます。</p> + +<p><span id="Box_Element_Positioning"></span></p> + +<h2 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E8.A6.81.E7.B4.A0.E3.81.AE.E9.85.8D.E7.BD.AE" name=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E8.A6.81.E7.B4.A0.E3.81.AE.E9.85.8D.E7.BD.AE">ボックス要素の配置</h2> + +<p><a href="ja/XUL_Tutorial/The_Box_Model">前のセクション</a>では、ボックス内部の要素を水平方向と垂直方向に配置する方法について学びました。 実際には、ボックス内での要素の位置やサイズをさらに細かく制御する必要がある場面も多いはずです。 これらについて説明をはじめる前に、まずボックスがどのように動作するのかを確認しておきます。</p> + +<p>要素の位置は、その要素が置かれるボックスのレイアウトスタイルによって決定されます。 例えば、水平ボックス内のボタンの位置は、前にボタンがある場合その右側になります。 また、要素のサイズは、「その要素にとって必要なサイズ」と「明示的に指定されたサイズ」の 2 つの要因によって決まります。 まず「その要素にとって必要なサイズ」は、要素の中に何があるのかによって決まります。 例えば、ボタンの幅ならば、中のテキストの長さで決まることになります。</p> + +<p>一般的に、要素はその内容を収めるために最低限必要な大きさになります。 または、テキスト入力欄 (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>) のように、要素によっては、使用される際のデフォルトサイズを持っているものもあります。 ボックスは、中に置かれた要素を収めるのに十分な大きさになります。 例えば、内部に 3 つのボタンがある水平ボックスの場合、3 つのボタンの大きさに若干の<span style="border-bottom: 1px dashed green;" title="padding">パディング</span>を加えた幅になります。</p> + +<div class="float-right"><img alt="画像:boxstyle1n.png"></div> + +<p>この画像で、最初の 2 つのボタンは、テキストを置くのに適切なサイズになっています。 3 番目のボタンは他より大きいですが、これはより多くの内容が含まれているためです。 ボタンが置かれているボックスの幅は、ボタンの幅の合計にボタン間のパディングを加えたものです。 ボタンの高さも、テキストを置くのに適切なサイズになっています。</p> + +<p><span id="Width_and_height_attributes"></span></p> + +<h3 id="width_.E5.B1.9E.E6.80.A7.E3.81.A8_height_.E5.B1.9E.E6.80.A7" name="width_.E5.B1.9E.E6.80.A7.E3.81.A8_height_.E5.B1.9E.E6.80.A7">width 属性と height 属性</h3> + +<p>ウィンドウ内の要素のサイズを詳細に制御したい場合もあると思います。 要素のサイズを制御するための機能は数多くありますが、 手っ取り早い方法は、HTML の <code>img</code> タグで行なうように、 要素に <code><code id="a-width"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code> と <code><code id="a-height"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></code> 属性を追加することです。 以下に例を示します。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_1.xul">表示</a></p> + +<pre><button label="OK" width="100" height="40"/> +</pre> + +<p>しかしながら、この方法は推奨しません。 移植や流用性が低くなりますし、XUL ファイル中で指定されたサイズが適さないテーマ (スキン) があるかもしれないからです。 もっとよい方法は、HTML のスタイルシートと同様の動作をする、スタイルプロパティを使うことです。 サイズの指定には、以下の CSS プロパティが使えます。</p> + +<dl> + <dt><a href="/ja/docs/Web/CSS/width" title="CSS の width プロパティは、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 box-sizing を border-box に設定すると、境界領域の幅を設定します。"><code>width</code></a> </dt> + <dd>要素の幅を指定する。</dd> + <dt><a href="/ja/docs/Web/CSS/height" title="CSS の height プロパティは、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 box-sizing が border-box に設定されていた場合は、 境界領域の高さを定義します。"><code>height</code></a> </dt> + <dd>要素の高さを指定する。</dd> +</dl> + +<p>2 つのプロパティを両方指定した場合、設定された幅と高さの要素が作られます。 どちらか一方のサイズプロパティしか指定しなかった場合は、他方は必要に応じて計算されます。 これらのスタイルプロパティによるサイズ指定の場合、数値の後に単位をつけて指定する必要があります。(例: 80px)</p> + +<p><span id="Flexible_elements"></span></p> + +<h4 id=".E4.BC.B8.E7.B8.AE.E5.8F.AF.E8.83.BD.E3.81.AA.E8.A6.81.E7.B4.A0" name=".E4.BC.B8.E7.B8.AE.E5.8F.AF.E8.83.BD.E3.81.AA.E8.A6.81.E7.B4.A0">伸縮可能な要素</h4> + +<p><span style="border-bottom: 1px dashed green;" title="non-flexible">伸縮しない</span>要素の場合、実際のサイズを計算するのは非常に簡単です。 要素の大きさは、幅や高さが指定されている場合、単純に指定された値に従います。 サイズが指定されなかった場合、要素のデフォルトサイズとして、その内容が適切に収まる大きさになります。 <span style="border-bottom: 1px dashed green;" title="flexible">伸縮可能</span>な要素の場合、サイズの算出は少々トリッキーです。</p> + +<p>伸縮可能な要素とは、0 より大きな値に設定された <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性をもつ要素のことです。 <a href="ja/XUL_Tutorial/Using_Spacers">以前のセクション</a>で説明したとおり、伸縮可能な要素は使用できるスペースに応じたサイズに伸縮します。 デフォルトサイズについては、伸縮しない要素の場合と同様に計算されます。 下の例は、このことを示しています。</p> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_2.xul">表示</a></p> + +<pre><window orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<hbox> + <button label="Yes" flex="1"/> + <button label="No"/> + <button label="I really don't know one way or the other"/> +</hbox> + +</window> +</pre> + +<p>ウィンドウは、最初は前出の画像の場合と同様に表示されます。 最初の 2 つのボタンは、適切なデフォルト幅で、3 番目のボタンはラベルが長いために、より大きなサイズになります。 最初のボタンは伸縮可能であるように指定されており、3 つの要素はすべて同じボックス内に置かれています。 ボックスの幅は、3 つのボタンすべての幅の合計 (画像では約 430 ピクセル) に初期設定されます。</p> + +<p>ウィンドウの幅を広げると、増えたスペースを割り振るために各要素が伸縮可能かどうかチェックされます。 この場合、最初のボタンだけが伸縮可能な要素ではありますが、このボタンが広がることはありません。 これは、ボタンが置かれているボックスが伸縮可能ではないことに起因しています。 つまり、伸縮しない要素は、利用できるスペースが増えてもサイズが変化することはないため、 結果として、その中に置かれたボタンも大きくなることができず、ウィンドウが広がってもボタンは広がらないことになります。</p> + +<p>これを解決するには、ボックスも伸縮可能にする必要があります。 そうすれば、ウィンドウを広げて新たなスペースが発生した場合、ボックスがそのスペースを利用して大きくなります。 ボックスが広がったことにより、ボックス内にも新たなスペースが作られることになり、中の伸縮可能なボタンも、増えたスペースに応じた大きさになります。 このプロセスは、入れ子になっているボックス分、必要に応じて繰り返されます。</p> + +<p><span id="Setting_Minimum_and_Maximum_Sizes"></span></p> + +<h3 id=".E6.9C.80.E5.B0.8F.E3.82.B5.E3.82.A4.E3.82.BA.E3.81.A8.E6.9C.80.E5.A4.A7.E3.82.B5.E3.82.A4.E3.82.BA.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B" name=".E6.9C.80.E5.B0.8F.E3.82.B5.E3.82.A4.E3.82.BA.E3.81.A8.E6.9C.80.E5.A4.A7.E3.82.B5.E3.82.A4.E3.82.BA.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B">最小サイズと最大サイズを設定する</h3> + +<p>要素を、「指定のサイズ以上に大きくならない」または「指定サイズ以下に小さくならない」といったように、一定の範囲内でのみ伸縮可能であるように制約したい場合があるかもしれません。このためには、以下の 4 つの属性が使用できます。</p> + +<dl> + <dt><code id="a-minwidth"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code> </dt> + <dd>要素が取ることのできる最小の幅を指定します。</dd> + <dt><code id="a-minheight"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/minheight">minheight</a></code> </dt> + <dd>要素が取ることのできる最小の高さを指定します。</dd> + <dt><code id="a-maxwidth"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code> </dt> + <dd>要素が取ることのできる最大の幅を指定します。</dd> + <dt><code id="a-maxheight"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxheight">maxheight</a></code> </dt> + <dd>要素が取ることのできる最大の高さを指定します。</dd> +</dl> + +<p>上記の属性値は、常にピクセルで指定する必要があります。 同じ目的で、CSS の <a href="/ja/docs/Web/CSS/min-width" title="min-width は、要素の最小幅を指定する CSS プロパティです。width プロパティの 使用値 が、min-width で指定した値を下回らないようにします。"><code>min-width</code></a>、<a href="/ja/docs/Web/CSS/min-height" title="CSS の min-height プロパティは要素の最小の高さを設定するのに使われます。height プロパティの 使用値 は、min-height に指定した値よりも小さくなりません。"><code>min-height</code></a>、<a href="/ja/docs/Web/CSS/max-width" title="max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。"><code>max-width</code></a>、<a href="/ja/docs/Web/CSS/max-height" title="CSS の max-height プロパティは要素の最大の高さを設定するのに使われます。height プロパティの使用値は、max-height に設定した値よりも大きくなりません。"><code>max-height</code></a> の各プロパティも使用可能です。CSS のプロパティを使用する場合は、複数の単位が使用できるので、数値に単位をつけて指定します。</p> + +<p>これらのプロパティは、伸縮可能な要素に対して指定された場合のみ意味を持ちます。 例えば、最大の高さを設定すると、伸縮可能なボタンは、指定された最大の高さまでしか広がることはありません。 ボタンが最大の高さになる大きさを越えてウィンドウを大きくすることはできますが、ボタンは、それ以上は広がりません。 ボタンが置かれているボックスにも最大の高さを設定していなければ、ボックスの方は広がり続けます。</p> + +<p>2 つのボタンに設定された伸縮の割合が同じ場合、通常、2 つは増えたスペースを半分づつ分け合います。 一方のボタンに最大幅が設定されている場合、最大幅に達した以降は、もう一方のボタンのみが広がり続け、残りのスペースすべてを占めることになります。</p> + +<p>ボックスに最大幅か最大の高さが指定されている場合、子要素はその最大サイズを超えて広がることはできません。 ボックスに最小幅か最小の高さが指定されている場合、子要素はその最小サイズを下回って小さくすることはできません。</p> + +<p><span id="Examples_of_setting_widths_and_heights"></span></p> + +<h4 id=".E5.B9.85.E3.81.A8.E9.AB.98.E3.81.95.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B.E4.BE.8B" name=".E5.B9.85.E3.81.A8.E9.AB.98.E3.81.95.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B.E4.BE.8B">幅と高さを設定する例</h4> + +<p>以下に、幅と高さを設定する例をいくつか示します。</p> + +<pre><button label="1" style="width: 100px;"/> +<button label="2" style="width: 100em; height: 10px;"/> +<button label="3" flex="1" style="min-width: 50px;"/> +<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/> +<textbox flex="1" style="max-width: 10em;"/> +<description style="max-width: 50px">This is some boring but simple +wrapping text.</description> +</pre> + +<dl> + <dt>例 1 </dt> + <dd>最初のボタンは、100 ピクセル (px はピクセルの意味) の幅で表示されます。単位を付ける必要があります。つけないと width の指定は無視されます。</dd> + <dt>例 2 </dt> + <dd>2 番目のボタンは 10 ピクセルの高さ、100 em (em は現在のフォントで、文字「m」の幅) の幅で表示されます。</dd> + <dt>例 3 </dt> + <dd>3 番目のボタンは伸縮可能なので、ボタンが置かれているボックスのサイズに従って広がります。しかし、ボタンが 50 ピクセル以下に縮小することはありません。スペーサーなどその他の伸縮可能なコンポーネントが flex の割合を超えて残りのスペースを吸収します。</dd> + <dt>例 4 </dt> + <dd>4 番目のボタンは伸縮可能ですが 2 ex (ex は現在のフォントで文字「x」の高さ) 以下の高さになったり 100 ピクセル以上の高さになることはありません。</dd> + <dt>例 5 </dt> + <dd>テキスト入力欄は伸縮可能ですが、10 em 以上に広がることはありません。em は、内部にテキストをもつ要素のサイズを指定する場合には、しばしば使用されます。em でテキスト入力欄のサイズを指定しておくと、フォントが変更されたとき、自動的に新しいフォントで指定された文字数が表示可能な大きさに変更されるため便利です。これは特大のフォントに変更された場合でも動作します。</dd> + <dt>例 6 </dt> + <dd> <code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素は、最大幅が 50 ピクセルに制約されています。内部のテキストは、50 ピクセルを超えると、次の行に折り返されます。</dd> +</dl> + +<p><span id="Our_find_files_dialog"></span></p> + +<h3 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ファイル検索ダイアログの例</h3> + +<div class="highlight"> +<p>それでは、こうしたスタイルをいくつか、ファイル検索ダイアログに追加してみましょう。 テキスト入力欄をウィンドウ全体に応じたサイズになるようにします。</p> + +<pre><textbox id="find-text" flex="1" style="min-width: 15em;"/> +</pre> + +<p>ここで、テキスト入力欄は伸縮可能に設定されています。 このため、利用者がダイアログのサイズを変更すると、あわせて伸縮します。 これは、利用者が長いテキスト文字列を入力したい場合に便利です。 また、テキスト入力欄に、少なくとも 15 文字は表示されるように、最小幅として 15 em が設定されています。 利用者がダイアログを非常に小さいサイズにしても、テキスト入力欄は、15 em 以下に縮小することはありません。 その場合、テキスト入力は、ウィンドウの端を超えて広がっているように描画されます。 以下の画像で、テキスト入力欄がウィンドウいっぱいに広がっている点に注意して下さい。 <img alt="画像:boxstyle1.png"></p> + +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxstyle.xul">表示</a></p> +</div> + +<p><span id="Box_Packing"></span></p> + +<h2 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E5.86.85.E3.81.AE.E8.A6.81.E7.B4.A0.E3.81.AE.E3.81.BE.E3.81.A8.E3.82.81.E6.96.B9_.28Packing.29" name=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E5.86.85.E3.81.AE.E8.A6.81.E7.B4.A0.E3.81.AE.E3.81.BE.E3.81.A8.E3.82.81.E6.96.B9_.28Packing.29">ボックス内の要素のまとめ方 (Packing)</h2> + +<p>子要素 2 つが置かれているボックスがあり、子要素はいずれも伸縮可能ではなく、ボックスは伸縮可能であるとします。 具体的には以下のようなものです。</p> + +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_3.xul">表示</a></p> + +<pre><box flex="1"> + <button label="Happy"/> + <button label="Sad"/> +</box> +</pre> + +<p>ウィンドウのサイズを変更すると、ボックスはウィンドウのサイズに応じた大きさになります。 ボタンは伸縮可能ではないので、その幅は変わりません。 そのため、ボックス内部で増えたスペースが、ウィンドウの右の方に表示されます。 しかし、ここでは増えたスペースを左側に表示させて、ボタンをウィンドウ内で右寄せにしたかったとします。</p> + +<p>これはボックス内にスペーサーを置くことで可能ですが、たくさん指定する必要がある場合は煩雑になります。 ボックスの追加属性 <code><code id="a-pack"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> を使うことで、もっと簡単に指示することができます。 この属性は、ボックス内で子要素をまとめておく位置を指定します。 水平ボックスの場合、これは、子要素の水平方向の配置をコントロールします。 垂直ボックスの場合は、子要素の垂直方向の配置をコントロールします。 以下の値が指定可能です。</p> + +<dl> + <dt>start </dt> + <dd>子要素を、水平ボックスの場合左端に、垂直ボックスの場合上端に配置します。これがデフォルト値になります。</dd> + <dt>center </dt> + <dd>子要素をボックスの中央に配置します。</dd> + <dt>end </dt> + <dd>子要素を、水平ボックスの場合右端に、垂直ボックスの場合下端に配置します。</dd> +</dl> + +<p><code><code id="a-pack"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 属性はまとめたい要素を含むボックスに設定するもので、まとめたい要素自身に設定するものではありません。</p> + +<p>以前の例を変更して、次のように、要素を中央に置くことができます。</p> + +<p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_4.xul">表示</a></p> + +<pre><box flex="1" pack="center"> + <button label="Happy"/> + <button label="Sad"/> +</box> +</pre> + +<p>今回の例は、ウィンドウのサイズが変更されると、ボタン自身で水平位置が中央になるように移動します。 この動きを前の例と比べてみてください。</p> + +<p><span id="Box_Alignment"></span></p> + +<h2 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E5.86.85.E3.81.AE.E8.A6.81.E7.B4.A0.E3.81.AE.E3.81.9D.E3.82.8D.E3.81.88.E6.96.B9_.28Alignment.29" name=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E5.86.85.E3.81.AE.E8.A6.81.E7.B4.A0.E3.81.AE.E3.81.9D.E3.82.8D.E3.81.88.E6.96.B9_.28Alignment.29">ボックス内の要素のそろえ方 (Alignment)</h2> + +<p>上の Happy-Sad の例で、ウィンドウを水平方向にリサイズすると、ボックスの幅が変わります。 さらに、ウィンドウを垂直方向にリサイズした場合、ボタンの高さがそれに応じて変わることを確認できるはずです。 これは、デフォルトで、垂直方向に伸縮可能であることが設定されているためです。</p> + +<p>この振る舞いは、<code><code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 属性を使ってコントロールできます。 水平ボックスの場合、子要素の垂直方向の配置をコントロールします。 垂直ボックスの場合、子要素の水平方向の配置をコントロールします。 指定できる値は、<code><code id="a-pack"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> に似ています。</p> + +<dl> + <dt>start </dt> + <dd>子要素を、水平ボックスの場合は上端に沿って、垂直ボックスの場合は左端に沿って配置します。</dd> + <dt>center </dt> + <dd>子要素をボックスの中央に配置します。</dd> + <dt>end </dt> + <dd>子要素を、水平ボックスの場合は下端に沿って、垂直ボックスの場合は右端に沿って配置します。</dd> + <dt>baseline </dt> + <dd>子要素を、テキストの基準線にそって配置します。この値は水平ボックスのみ意味を持ちます。</dd> + <dt>stretch </dt> + <dd>子要素をボックスのサイズに応じて<span style="border-bottom: 1px dashed green;" title="stretch">伸張</span>させます。この値がデフォルトです。これは<span style="border-bottom: 1px dashed green;" title="flexible">伸縮可能</span>な要素と似ていますが、伸縮する方向が異なります。</dd> +</dl> + +<p><code><code id="a-pack"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pack">pack</a></code></code> 属性と同様に、<code><code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 属性もそろえたい要素を含むボックスに設定するもので、そろえたい要素自身に設定するものではありません。</p> + +<p>例を示します。 下の最初のボックスは、デフォルトなので子要素を<span style="border-bottom: 1px dashed green;" title="stretch">伸張</span>させます。 2 番目のボックスは <code><code id="a-align"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/align">align</a></code></code> 属性が設定されているので、子要素は中央に置かれます。</p> + +<p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_5.xul">表示</a></p> + +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window id="yesno" title="Question" orient="horizontal" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <hbox> + <button label="Yes"/> + <button label="No"/> + </hbox> + <hbox align="center"> + <button label="Maybe"/> + <button label="Perhaps"/> + </hbox> + +</window> +</pre> + +<div class="float-right"><img alt="画像:boxstyle2-b.png"></div> + +<p>属性で指定する代わりに、スタイルプロパティ <a href="/ja/docs/Web/CSS/-moz-box-pack" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>-moz-box-pack</code></a> と <a href="/ja/docs/Web/CSS/-moz-box-align" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>-moz-box-align</code></a> を使うこともできます。</p> + +<div class="note"><a class="external" href="http://developer.mozilla.org/samples/xultu/examples/aligner.xul">Box Alignment Example</a> では、さまざまなボックスのプロパティを試してみることができて便利です。</div> + +<p><span id=""></span></p> + +<h2 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.AE.E5.88.87.E3.82.8A.E5.8F.96.E3.82.8A.E3.81.A8.E3.83.9C.E3.82.BF.E3.83.B3" name=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.AE.E5.88.87.E3.82.8A.E5.8F.96.E3.82.8A.E3.81.A8.E3.83.9C.E3.82.BF.E3.83.B3">テキストの切り取りとボタン</h2> + +<p>ボタンの最大幅以上の大きさのラベルをもつボタン要素を作ってしまう可能性があります。 通常は、その場合の動作としては、ボタンのサイズを大きくして解決します。 それ以外の方法として、ボタンなどのラベルを持った要素には、<code><code id="a-crop"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></code> と呼ばれる特別な属性があり、これを使うとテキストが大きくなりすぎた場合、その<span style="border-bottom: 1px dashed green;" title="crop">切り取り方</span>を指定できます。</p> + +<p>テキストが切り取られた場合、ボタンに、テキストが切り取られたことを示す<span style="border-bottom: 1px dashed green;" title="ellipsis">省略符号</span> (...) が表示されます。 以下の 4 つの値が有効です。</p> + +<dl> + <dt>left </dt> + <dd>テキストの左側が切り取られます。</dd> + <dt>right </dt> + <dd>テキストの右側が切り取られます。</dd> + <dt>center </dt> + <dd>テキストの両側が切り取られます。</dd> + <dt>none </dt> + <dd>テキストの切り取りは行われません。これがデフォルト値です。</dd> +</dl> + +<p>この属性は、実際には、ダイアログが任意のサイズで使えるように設計されている場合にのみ役立ちます。 <code><code id="a-crop"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code></code> 属性は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素や、<code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性を伴う要素とともに使うことができます。 次の例は、この属性の使用例を示しています。</p> + +<p><span id="%E4%BE%8B_6"><a id="%E4%BE%8B_6"></a><strong>例 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxstyle_6.xul">表示</a></p> + +<pre><button label="Push Me Please!" crop="right" flex="1"/> +</pre> + +<div class="float-right"><img alt="画像:boxstyle2.png"></div> + +<p>ウィンドウが小さくなった後、どのようにボタン上のテキストがその右側を切り取られたかを確認してください。 次は、ボックスモデルの要約といくつか付加的な詳細について説明します。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:The_Box_Model" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Box_Model_Details">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/features_of_a_window/index.html b/files/ja/archive/mozilla/xul/tutorial/features_of_a_window/index.html new file mode 100644 index 0000000000..276f9d11a5 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/features_of_a_window/index.html @@ -0,0 +1,69 @@ +--- +title: ウィンドウの機能 +slug: Archive/Mozilla/XUL/Tutorial/Features_of_a_Window +tags: + - Tutorials + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/Features_of_a_Window +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:XBL_Example" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Creating_Dialogs">次のページ »</a></p> +</div> +<p>これまでにも、ウィンドウの機能についてはいくつか見ていますが、 このセクションでは、さらにいくつかの機能について見ていきたいと思います。</p> +<h3 id=".E5.88.A5.E3.81.AE.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B" name=".E5.88.A5.E3.81.AE.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B">別のウィンドウを作成する</h3> +<p>XUL のアプリケーションでは、最初のウィンドウと同じ方法で 2 つ目のウィンドウを作成することが可能です。 このために必要なのは、そのウィンドウのコードを記述した 2 つ目の XUL ファイルを作成することだけです。 HTML の場合と同様に、2 つ目のウィンドウを開くためには <code><a href="/ja/docs/DOM/window.open">window.open()</a></code> 関数が使用できます。 この関数は、新しく開いたウィンドウへの参照を返します。 この参照を使うことで、新しく開いたウィンドウの関数を呼び出すことが可能になります。</p> +<p><code>open</code> 関数は引数を 3 つ取ります。 最初の引数には開きたいファイルの URL、 2 番目にはウィンドウの内部名、 3 番目には表示に関するフラグのリストを指定します。 フラグ「<code>chrome</code>」は、ウィンドウを<a href="/ja/docs/DOM/window.open#Toolbar_and_chrome_features">クロムファイル</a>として開くために指定する必要があるので重要です。 「<code>chrome</code>」フラグを引数で指定しない場合には、ファイルはブラウザウィンドウのコンテンツとして開かれることになります。</p> +<p>例を示します。</p> +<pre>var myWin = window.open("chrome://findfile/content/findfile.xul","findfile","chrome"); +</pre> +<h3 id=".E5.B9.85.E3.81.A8.E9.AB.98.E3.81.95.E3.82.92.E6.8C.87.E5.AE.9A.E3.81.99.E3.82.8B" name=".E5.B9.85.E3.81.A8.E9.AB.98.E3.81.95.E3.82.92.E6.8C.87.E5.AE.9A.E3.81.99.E3.82.8B">幅と高さを指定する</h3> +<p>ウィンドウに要素を追加すると、いつもウィンドウの幅が新しい要素に応じて拡張されることに気付いていると思います。 ウィンドウは、実際には、<span style="border-bottom: 1px dashed green;" title="flexible">伸縮可能</span>で<span style="border-bottom: 1px dashed green;" title="orientation">配置方向</span>のデフォルトが<span style="border-bottom: 1px dashed green;" title="vertical">垂直</span>であるボックスにすぎません。 明示的に、直接 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> タグに、幅と高さを指定することも可能です。 もちろん、この場合のウィンドウは、指定のサイズで表示されます。 指定を取り除けば、サイズはウィンドウにある要素から決定されることになります。</p> +<pre><window + id="findfile-window" + title="Find Files" + width="400" + height="450" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> +</pre> +<p>この例では、ウィンドウは 400 ピクセルの幅と 450 ピクセルの高さで開かれます。 このときには、このサイズのウィンドウを埋めるために必要な要素がない場合でも、 余った領域を空白で埋めて、このサイズでウィンドウが開かれることになります。 また逆に、要素が多すぎる場合でも、ウィンドウが要素を表示するために必要な大きさまで拡大されることはありません。 このために、利用者はダイアログをリサイズしなければならなくなります。 ウィンドウの幅と高さを指定するときは、ウィンドウが小さすぎたり大きすぎたりしないように注意する必要があります。 加えて、利用者が別のテーマやロケールを使用しているかもしれないということも考慮する必要があります。</p> +<p>サイズを指定する場合、幅と高さの両方を指定しなければならないことに注意してください。 片方しか指定しない場合、もう片方には 0 が設定されます。 ウィンドウのサイズを自動的に設定するためには、幅と高さの両方を省略する必要があります。</p> +<p>なお、幅と高さは、ウィンドウの初期サイズを指定しているにすぎません。 ウィンドウがリサイズ可能な場合、利用者はウィンドウをリサイズして、別のサイズに変更するかもしれません。</p> +<h3 id=".E4.BB.96.E3.81.AE.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E6.A9.9F.E8.83.BD" name=".E4.BB.96.E3.81.AE.E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E6.A9.9F.E8.83.BD">他のウィンドウの機能</h3> +<p>以下に <code>window.open</code> 関数の 3 番目の引数で渡すことが可能なフラグの一部を示します。 ただし、オペレーティングシステムによっては、すべてがサポートされない可能性もあります。 ここには、JavaScript のリファレンスに記載されている HTML の場合に指定可能な任意のフラグを指定することも可能です。 また、「<code>dialog=no</code>」のような形式で、「<code>no</code>」を設定することで機能を無効にすることも可能です。</p> +<dl> + <dt> + alwaysLowered</dt> + <dd> + ウィンドウは、常に他のウィンドウの背面に表示されます。</dd> + <dt> + alwaysRaised</dt> + <dd> + ウィンドウは、常に他のウィンドウの前面に表示されます。</dd> + <dt> + centerscreen</dt> + <dd> + ウィンドウが開かれたとき、画面の中央に表示されます。</dd> + <dt> + dependent</dt> + <dd> + ウィンドウは、開き元のウィンドウと、常に相対的な位置関係を維持して表示されます。つまり、開き元のウィンドウを移動した場合には、新しいウィンドウも相対的な位置関係を維持するために移動することになります。</dd> + <dt> + dialog</dt> + <dd> + ウィンドウは、ダイアログボックス用の外観で表示されます。</dd> + <dt> + modal</dt> + <dd> + ダイアログをモーダルにします。モーダルウィンドウが閉じられるまでは、開き元のウィンドウを操作することができなくなります。</dd> + <dt> + resizable</dt> + <dd> + 利用者はウィンドウをリサイズできます。</dd> +</dl> +<p><small><span id="%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8"><a id="%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8"></a><strong>関連ページ</strong></span> : <a href="/ja/docs/DOM/window.open">DOM window.open() リファレンス</a></small></p> +<p>次のセクションでは、<span style="border-bottom: 1px dashed green;" title="secondary">補助的な</span>ダイアログを開く方法について見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:XBL_Example" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Creating_Dialogs">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/focus_and_selection/index.html b/files/ja/archive/mozilla/xul/tutorial/focus_and_selection/index.html new file mode 100644 index 0000000000..1d49bb4d9d --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/focus_and_selection/index.html @@ -0,0 +1,224 @@ +--- +title: フォーカスと選択 +slug: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Keyboard_Shortcuts" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Commands">次のページ »</a></p> +</div> +<p>このセクションでは、要素のフォーカスと選択を取り扱う方法について説明します。 +</p><p><span id="Focused_Elements"></span> +</p> +<h3 id=".E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E5.BE.97.E3.81.A6.E3.81.84.E3.82.8B.E8.A6.81.E7.B4.A0" name=".E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E5.BE.97.E3.81.A6.E3.81.84.E3.82.8B.E8.A6.81.E7.B4.A0"> フォーカスを得ている要素 </h3> +<p>「フォーカスを得ている要素」とは、そのとき入力イベントを受け取っている要素のことです。 +ウィンドウに 3 つの<span style="border-bottom: 1px dashed green;" title="textbox">テキスト入力欄</span>がある場合、そのときフォーカスを得ているテキスト入力欄だけが、利用者によるテキスト入力を受け付けることができます。 +1 つのウィンドウについて、1 つの要素だけがフォーカスを得ることが可能です。 +</p><p>利用者は、要素をマウスでクリックするか TAB キーを押すことにより、フォーカスを移動することができます。 +TAB キーを押すと、次の要素にフォーカスが移ります。 +また、前の要素に戻るには、Shift キーを押しながら TAB キーを押します。 +</p><p><span id="Rearranging_the_tab_order"></span> +</p> +<h4 id="TAB_.E9.A0.86.E5.BA.8F.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name="TAB_.E9.A0.86.E5.BA.8F.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B"> TAB 順序を変更する </h4> +<p><code><code id="a-tabindex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></code> 属性を要素に付加することにより、 TAB キーが押されたときにフォーカスが移る順序 (TAB インデックス) を変更することができます。 +この属性には数値を設定する必要があります。 +TAB キーが押されたとき、その要素の次に大きい TAB インデックス値を持つ要素にフォーカスが移ります。 +つまり、要素にフォーカスを移動したい順に、一連のインデックスを与えていくことによって、任意の順序に変更できます。 +とはいっても、たいていの場合、<code><code id="a-tabindex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tabindex">tabindex</a></code></code> 属性は設定しないと思います。 +その場合は、 TAB キーによって、フォーカスは次に表示されている要素に移ります。 +順番を変えたい場合のみ TAB インデックス値を設定すればよいわけです。 +以下に例を示します。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_1.xul">表示</a> +</p> +<pre><button label="Button 1" tabindex="2"/> +<button label="Button 2" tabindex="1"/> +<button label="Button 3" tabindex="3"/> +</pre> +<p><span id="The_focus_event"></span> +</p> +<h4 id=".E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88" name=".E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88"> フォーカスイベント </h4> +<p>focus イベントは、要素がフォーカスを得たことに応じるために利用されます。 +blur イベントは、要素がフォーカスを失うことに応じるために利用されます。 +要素に <code><a href="ja/DOM/element.onfocus">onfocus</a></code> や <code><a href="ja/DOM/element.onblur">onblur</a></code> 属性を与えることによって、フォーカス状態の変化に対する反応が可能になります。 +これらの属性は、HTML における同名の属性と同様に機能します。 +これらのイベントハンドラは、要素のハイライトやステータスバーへのテキストの表示などに利用できると思います。 +以下に、focus イベントを処理するために、関数を設定する例を示します。 +</p><p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_2.xul">表示</a> +</p> +<pre><script> + +function displayFocus(){ + var elem=document.getElementById('sbar'); + elem.setAttribute('value','Enter your phone number.'); +} + +</script> + +<textbox id="tbox1"/> +<textbox id="tbox2" onfocus="displayFocus();"/> +<description id="sbar" value=""/> +</pre> +<p>この例で focus イベントが発生したとき、<code>displayFocus</code> 関数が呼び出され、 +この関数によって、テキストラベルの値が変更されます。 +この例を拡張して、blur イベントが発生したときに、テキストを取り除くようにすることも可能です。 +focus と blur イベントは、典型的には、利用者が選択した要素に応じてインターフェイスの一部を更新するために使われています。 +例えば、利用者によって、フィールドへの数値の入力が行われたときに、合計表示のフィールドを更新したり、入力された値を検証するために focus イベントを使うことができます。 +focus や blur イベントの処理中に、アラートダイアログを出してはいけません。 +この挙動は、利用者にとってわずらわしいため、ユーザーインターフェイス設計として劣悪です。 +</p><p>DOM 関数の <code><a href="ja/DOM/element.addEventListener">addEventListener</a></code> を使うことでも、要素にイベントハンドラを動的に追加できます。 +この方法は、どんな要素やイベント型に対しても使用できます。 +この関数は、3 つの引数、 +「イベント型」、「イベントが発生したときに実行される関数」、「イベントを<span style="border-bottom: 1px dashed green;" title="capturing">捕捉</span>フェーズで捉えるかどうかを指示する真偽値」、をとります。 +</p><p><span id="Getting_the_currently_focused_element"></span> +</p> +<h4 id=".E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E5.BE.97.E3.81.A6.E3.81.84.E3.82.8B.E8.A6.81.E7.B4.A0.E3.81.AE.E5.8F.96.E5.BE.97" name=".E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E5.BE.97.E3.81.A6.E3.81.84.E3.82.8B.E8.A6.81.E7.B4.A0.E3.81.AE.E5.8F.96.E5.BE.97"> フォーカスを得ている要素の取得 </h4> +<p>現在フォーカスを得ている要素は、ウインドウごとに 1 つだけ存在する、<span style="border-bottom: 1px dashed green;" title="command dispatcher">コマンドディスパッチャ</span>と呼ばれるオブジェクトに保持されています。 +コマンドディスパッチャは、利用者がインターフェイスを利用中にフォーカスを得ている要素を変更しても見失わないように追跡する役割を担っています。 +また、コマンドディスパッチャは、それ以外の役割も持っていますが、それについては後の<a href="ja/XUL_Tutorial/Commands">コマンドのセクション</a>で述べます。 +今回は、コマンドディスパッチャの機能のうち、フォーカスに関連したものについて見ていくことにします。 +</p><p>ウインドウのコマンドディスパッチャは、<span style="border-bottom: 1px dashed green;" title="document">文書</span>オブジェクトの <code>commandDispatcher</code> プロパティから取得できます。 +また、フォーカスを得ている要素は、コマンドディスパッチャの <code>focusedElement</code> プロパティから取得できます。 +以下にその例を示します。 +</p><p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_3.xul">表示</a> +</p> +<pre><window id="focus-example" title="Focus Example" + onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function init(){ + addEventListener("focus",setFocusedElement,true); +} + +function setFocusedElement(){ + var focused = document.commandDispatcher.focusedElement; + document.getElementById("focused").value = focused.tagName; +} +</script> + +<hbox> + <label control="username" value="User Name:"/> + <textbox id="username"/> +</hbox> + +<button label="Hello"/> +<checkbox label="Remember This Decision"/> + +<label id="focused" value="-No focus-"/> + +</window> +</pre> +<p>この例では、フォーカスイベントハンドラをウインドウに設定しています。 +<span style="border-bottom: 1px dashed green;" title="capturing">捕捉</span>フェーズ用のイベントハンドラを利用したいので、<code><a href="ja/DOM/element.addEventListener">addEventListener</a></code> メソッドを使う必要があります。 +このメソッドによって、ウインドウに <code>setFocusedElement</code> メソッドを呼び出す、捕捉イベントハンドラを登録しています。 +<code>setFocusedElement</code> メソッドは、フォーカスを得ている要素をコマンドディスパッチャから取得して、タグ名表示用ラベルの値として、その要素のタグ名を設定します。 +これらによって、フォーカスを得た要素が変更されるごとに、ラベルにはその要素のタグ名が表示されることになります。 +</p><p>注意点がいくつかあります。 +</p> +<ul><li> まず、 テキスト入力欄にフォーカスを与えたとき、タグ名の表示は「html:input」になり、期待される「textbox」にはなりません。これは、 XUL のテキスト入力欄が、HTML の input ウィジェットを使用して実装されており、フォーカスイベントは実装元の要素の方が受け取ることになるためです。 +</li><li> 次に、テキスト入力欄のラベルをクリックすると、フォーカスはテキスト入力欄に移ります。これは、ラベルにテキスト入力欄の id を指す <code><code id="a-control"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 属性が与えられているためです。 +</li><li> 最後に、タグ名を表示するラベルには <code><code id="a-control"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code></code> 属性が設定されていないため、クリックしても、フォーカスを得ている要素は変更されません。フォーカスは、フォーカス可能な要素のみが取得できます。 +</li></ul> +<p><span id="Making_a_label_focusable"></span> +</p> +<h4 id=".E3.83.A9.E3.83.99.E3.83.AB.E3.82.92.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E5.8F.AF.E8.83.BD.E3.81.AB.E3.81.99.E3.82.8B" name=".E3.83.A9.E3.83.99.E3.83.AB.E3.82.92.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E5.8F.AF.E8.83.BD.E3.81.AB.E3.81.99.E3.82.8B"> ラベルをフォーカス可能にする </h4> +<p><a href="ja/XUL_Tutorial/Introduction_to_XBL">カスタム要素の作成</a>を行おうとしたときに、その要素がフォーカス可能か否かを変更する必要があるかもしれません。 +そのためには、特殊なスタイルプロパティ <a href="/ja/docs/Web/CSS/-moz-user-focus" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>-moz-user-focus</code></a> を利用します。 +このプロパティは、要素がフォーカス可能かどうかを制御します。 +これにより、以下に例を示すように、ラベルをフォーカス可能にすることもできます。 +</p><p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_4.xul">表示</a> +</p> +<pre><label id="focused" style="-moz-user-focus: normal;" + onkeypress="alert('Label Focused');" value="Focus Me"/> +</pre> +<p>この例では、フォーカス可能にするために、スタイルプロパティに <code>normal</code> を設定しています。 +また、これを <code>ignore</code> に設定した場合、その要素はフォーカス不能になります。 +ただし、この挙動を要素を無効化するために利用すべきではありません。 +そのためには、要素を無効化するために設計されている <code>disabled</code> 属性か、プロパティの方を利用すべきです。 +上の例のラベルがフォーカスを得ると、キー入力に反応できるようになります。 +当然ですが、通常、ラベルはフォーカスを得ることを期待されていないため、ラベルがフォーカスを得ても、それを示すような表示は行いません。 +</p><p><span id="Changing_the_focus"></span> +</p> +<h4 id=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.8B.E3.82.89.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E5.88.B6.E5.BE.A1.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.8B.E3.82.89.E3.83.95.E3.82.A9.E3.83.BC.E3.82.AB.E3.82.B9.E3.82.92.E5.88.B6.E5.BE.A1.E3.81.99.E3.82.8B"> スクリプトからフォーカスを制御する </h4> +<p>スクリプトを使用して、フォーカスを別の要素に移動する方法はいくつかあります。 +最も単純な方法はフォーカスを与えたい XUL 要素に対して、<code><a href="ja/DOM/element.focus">focus</a></code> メソッドを呼び出すことです。 +または、<code><a href="ja/DOM/element.blur">blur</a></code> メソッドを使用して、要素からフォーカスを外すことも可能です。 +以下に例を示します。 +</p><p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_focus_5.xul">表示</a> +</p> +<pre><textbox id="addr"/> + +<button label="Focus" oncommand="document.getElementById('addr').focus()"/> +</pre> +<p>もしくは、コマンドディスパッチャの、<code>advanceFocus</code> と <code>rewindFocus</code> メソッドを利用することもできます。 +これらのメソッドは、それぞれ、規定の順序に従って、フォーカスを次の要素あるいは前の要素へと移動します。 +</p><p>テキスト入力欄 (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code>) には、フォーカスを得ている間、それを示すために専用の属性 <code>focused</code> が追加されます。 +この属性の有無をチェックすることにより、スクリプトあるいはスタイルシートから要素がフォーカスを得ているかどうかを知ることができます。 +テキスト入力欄がフォーカスを得ているときは、値として <code>true</code> をとり、 +テキスト入力欄がフォーカスを得ていないときは、この属性は存在しません。 +</p><p>フォーカスを、現在フォーカスを得ている場所から、ブラウザが次に移動させるはずの場所に移動させたいと考えているとします。 +利用者は、このために、通常 TAB キーを押します。 +スクリプトから実行する場合、どこからでも参照可能な、XUL ブラウザの<span style="border-bottom: 1px dashed green;" title="document">文書</span>オブジェクトを使用して、簡単に行うことが可能です。 +</p> +<pre> document.commandDispatcher.advanceFocus(); +</pre> +<p>実際には、commandDispatcher は、単純に <a href="ja/Interfaces">nsIDOMXULCommandDispatcher インターフェイス</a>を実装しています。 +なお、このインターフェイスでは、これ以外にも便利なメソッドをいくつか提供しています。 +</p><p><span id="Platform_Specific_Behaviors"></span> +</p> +<h4 id=".E3.83.97.E3.83.A9.E3.83.83.E3.83.88.E3.83.95.E3.82.A9.E3.83.BC.E3.83.A0.E5.9B.BA.E6.9C.89.E3.81.AE.E6.8C.99.E5.8B.95" name=".E3.83.97.E3.83.A9.E3.83.83.E3.83.88.E3.83.95.E3.82.A9.E3.83.BC.E3.83.A0.E5.9B.BA.E6.9C.89.E3.81.AE.E6.8C.99.E5.8B.95"> プラットフォーム固有の挙動 </h4> +<dl><dt>Mac OS X</dt><dd> Mac OS X には「Full Keyboard Access」(FKA) と呼ばれる<span style="border-bottom: 1px dashed green;" title="preference">設定</span>があります。 XUL が、この設定の影響を強く受けることに注意してください。 具体的には、FKA の設定が「off」である場合、テキスト入力欄とリスト、及びツリーだけが、キーボードから (コードから focus() を呼び出すように) フォーカスを与えることが可能であることを意味しています。 +</dd></dl> +<p><span id="Handling_Text_Changes"></span> +</p> +<h3 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.B8.E3.81.AE.E5.A4.89.E6.9B.B4.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E5.87.A6.E7.90.86" name=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.81.B8.E3.81.AE.E5.A4.89.E6.9B.B4.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E5.87.A6.E7.90.86"> テキストへの変更に対する処理 </h3> +<p>利用者が、テキスト入力欄の値を変更したことを検出するために、2 つのイベントを利用することができます。 +当然ですが、これらのイベントは、テキスト入力欄がフォーカスを得ている場合のみ送信されます。 +</p> +<ul><li> input イベントは、テキストがフィールド内で編集されるごとに発生します。つまり、このイベントの前後では、フィールドの値に差異があります。値の変更の監視には、キーイベントではなく、このイベントを利用する方が良いと思います。なぜなら、シフトキーなど、いくつかの値を変更しないキー操作や、テキスト入力欄に、上限まで文字が入力された以降に、文字キーが押された場合には、input イベントは発生しないからです。 +</li><li> change イベントは、フィールドへの変更が加えられたときに発生するという点では、input イベントと同じですが、このイベントは、テキスト入力欄がフォーカスを失うとき、つまり一連の変更が完了した場合にのみ、発生する点が異なります。 +</li></ul> +<p><span id="Text_Selection"></span> +</p> +<h3 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E9.81.B8.E6.8A.9E" name=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E9.81.B8.E6.8A.9E"> テキスト選択 </h3> +<p>テキスト入力欄の処理では、入力されたテキスト全部ではなく、利用者が選択した部分のみを取り出したいときがあります。 +あるいは、選択されている領域を変更したい場合もあるかもしれません。 +</p><p>XUL のテキスト入力欄は、選択部分の読み出しや選択領域の変更をサポートしています。 +最も単純なものは、テキスト入力欄が持っている、全てのテキストの選択です。 +これは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> オブジェクトの、<code><span id="m-select"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/select">select</a></code></span></code> メソッドを利用することで可能です。 +</p> +<pre>tbox.select(); +</pre> +<p>また、一部のみを選択させたい場合もあると思います。 +そのためには、<code><span id="m-setSelectionRange"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/setSelectionRange">setSelectionRange</a></code></span></code> 関数を利用します。 +この関数は、2 つの引数、選択範囲の先頭の文字の位置と、末尾の直後の文字の位置をとります。 +位置は 0 を基点に数えます。すなわち、最初の文字が 0 、2 番目が 1 といった具合に数えていきます。 +</p> +<pre>tbox.setSelectionRange(4,8); +</pre> +<p>この例では、表示されている 5 番目から 8 番目の文字を選択します。 +もしフィールド内に 6 文字しか入力されていない場合、 5 番目と 6 番目の文字のみが選択されます。このときエラーは発生しません。 +</p><p>２つの引数に同じ値を与えた場合、選択範囲の先頭と末尾は同じ位置を指すことになり、 +その場合は、結果としてテキスト入力欄のカーソル位置だけが変更されます。 +以下の例を使用して、カーソルをテキストの先頭に移動させることができます。 +</p> +<pre>tbox.setSelectionRange(0,0); +</pre> +<p>また、選択されている範囲は、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectionStart">selectionStart</a></span></code></code> と <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectionEnd">selectionEnd</a></span></code></code> プロパティから取得できます。 +これらのプロパティは、それぞれ選択範囲の先頭位置と末尾位置に設定されます。 +両方とも同じ値に設定されている場合は、テキストが選択されていないことを示しています。 +このとき、値としては現在のカーソル位置が設定されています。 +これらのプロパティを利用して、先頭と末尾の位置が得られれば、テキスト全体から該当する部分を <code>substring</code> で取り出すことが可能です。 +</p><p>なお、テキスト入力欄全体の内容は、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/value">value</a></span></code></code> プロパティによって、取得および設定することが可能です。 +</p><p>このとき、テキスト入力欄にある全文字数は、 <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/textLength">textLength</a></span></code></code> プロパティから取得することが可能です。 +</p><p>次のセクションでは、コマンドの使い方について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Keyboard_Shortcuts" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Commands">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/grids/index.html b/files/ja/archive/mozilla/xul/tutorial/grids/index.html new file mode 100644 index 0000000000..4e3f5c2fe8 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/grids/index.html @@ -0,0 +1,154 @@ +--- +title: グリッド +slug: Archive/Mozilla/XUL/Tutorial/Grids +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Grids +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Tabboxes" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Content_Panels">次のページ »</a></p> +</div></div> +<p>XUL には、表組み用のグリッドを作成するため、いくつかの要素が用意されています。</p> +<h2 id="XUL_Tabular_Layout" name="XUL_Tabular_Layout">XUL における表組みレイアウト</h2> +<p>XUL では、<code><a href="/ja/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code> 要素と、いくつかの関連要素を使用することで、要素を格子状に配置することが可能です。この要素は、HTML の <code>table</code> タグに、いくつかの点で類似していますが、全く同じではありません。例えば、グリッドは、単体では何も表示されず、いくつかの行と列からなる表形式に要素を配置するためだけに使用されます。</p> +<p>グリッドは、テーブルと同じように、要素をいくつかの行の中に並べて保持します。 <code><a href="/ja/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code> 内には、2 つのことを宣言します。 1 つは <code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> による列に使用される情報で、もう 1 つは <code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> による行に使用される情報です。グリッドでも、HTML のテーブルと同じように、行の中に、ラベルやボタンなどのコンテントを置いていくことになります。なお、グリッドでもコンテントは、行に置く方が一般的ではありますが、 <code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> に置けば行を基本に、<code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> に置けば列を基本にして構成することが可能であるため、どちらに置いても構いません。 <code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> の方にコンテントを置いて使用する場合であっても、<code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> の方も、グリッド内の列のサイズや外観を指定するために使用します。あるいは、コンテントを <code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> に置いて、<code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> を外観の指定に使うことも可能です。まずは、行を使って要素を構成する場合を見ていきます。</p> +<h3 id="Declaring_a_grid" name="Declaring_a_grid">グリッドを宣言する</h3> +<p>一連の行を宣言するために、<code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> タグを使います。 これは <code><a href="/ja/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code> の子要素でなければなりません。 この中には、個々の行として使用する <code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> 要素を追加します。 <code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> 要素の中には、その行に置くべきコンテントを配置します。</p> +<p>同じように、列は <code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> 要素を使って宣言されます。 これも <code><a href="/ja/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code> の子要素として置かなければなりません。 その中に、個々の <code><a href="/ja/docs/Mozilla/Tech/XUL/column" title="column">column</a></code> 要素を置きます。 これはグリッド内のそれぞれの列に対応します。</p> +<p>理解を容易にするために、以下に例を示して説明します。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_1.xul">表示</a></p> +<div class="float-right"> + <img height="88" src="/@api/deki/files/703/=Grids1.png" width="167"></div> +<pre class="brush:xml"><grid flex="1"> + <columns> + <column flex="2" /> + <column flex="1" /> + </columns> + + <rows> + <row> + <button label="Rabbit" /> + <button label="Elephant" /> + </row> + <row> + <button label="Koala" /> + <button label="Gorilla" /> + </row> + </rows> +</grid> +</pre> +<p>2 つの行と 2 つの列がグリッドに加えられています。各列は <code><a href="/ja/docs/Mozilla/Tech/XUL/column" title="column">column</a></code> タグを使って宣言されています。また、各列は <code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code> 属性を与えられています。 各行には 2 つの要素があり、どちらもボタンです。 それぞれの <code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> 要素の最初の要素は、グリッドの最初の列に置かれ、 各行の 2 番目の要素は、2 番目の列に配置されます。 セルを宣言するための要素は必要ないということに注意して下さい。 (HTML の <code>td</code> 要素に対応するものはありません)。 そのため、セルの内容は、直接 <code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> 要素の中に置きます。</p> +<h3 id="Grid_with_more_elements" name="Grid_with_more_elements">より多くの要素を含んだグリッド</h3> +<p>もちろん <code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code> 要素だけでなく、どんな要素でも使うことができます。 特定のセルに複数の要素を入れたい場合は、<code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code> か、別のボックス要素を、入れ子にして使うことが可能です。 水平ボックス (<code>hbox</code>) は 1 つの要素ですが、必要ならその中にはいくつでも要素を入れることができます。 例を示します。</p> +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_2.xul">表示</a></p> +<pre class="brush:xml"><grid flex="1"> + <columns> + <column /> + <column flex="1" /> + </columns> + + <rows> + <row> + <label control="doctitle" value="Document Title:" /> + <textbox id="doctitle" flex="1" /> + </row> + <row> + <label control="docpath" value="Path:" /> + <hbox flex="1"> + <textbox id="docpath" flex="1" /> + <button label="Browse..." /> + </hbox> + </row> + </rows> +</grid> +</pre> +<div class="float-right"> + <img height="85" src="/@api/deki/files/704/=Grids2.png" width="307"></div> +<p>画像から、ラベルが置かれている最初の要素の列には、各行に 1 つの要素しかないという点を確認してください。 2 列目は 2 行目にボックスが含まれており、テキスト入力欄 (<code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code>) と、ボタン (<code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code>) の 2 つの要素が順番に配置されています。 1 つのセルの中に、ボックスを入れ子に追加していくことが可能です。別のグリッドを入れ子に加えても構いません。</p> +<p>この例で表示されるウィンドウをリサイズすると、テキスト入力欄は伸縮するのに、他の要素は伸縮しないことが分かります。これは、テキスト入力欄と 2 つめの列に <code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code> 属性が追加されているためです。ラベルのサイズは変更する必要がないため、最初の列は伸縮可能である必要はありません。</p> +<p>列の幅の初期値は、列の中で最も大きい要素によって決められます。同様に、行の高さも、行の中の要素の大きさによって決まります。また、<code id="a-minwidth"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code> や、<code id="a-maxwidth"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code> といった属性や、<a href="/ja/docs/Web/CSS/min-width" title="min-width は、要素の最小幅を指定する CSS プロパティです。width プロパティの 使用値 が、min-width で指定した値を下回らないようにします。"><code>min-width</code></a> や <a href="/ja/docs/Web/CSS/max-width" title="max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。"><code>max-width</code></a> などの CSS プロパティで、サイズの定義を付け加えることも可能です。</p> +<h3 id="Column_based_organization" name="Column_based_organization">列に基づくグリッド</h3> +<p>また、行の代わりに <code><a href="/ja/docs/Mozilla/Tech/XUL/column" title="column">column</a></code> 要素の内部に要素を置くことも可能です。以下の例では、<code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> は行数を指定するためだけに宣言されています。</p> +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_3.xul">表示</a></p> +<pre class="brush:xml"><grid> + <rows> + <row/> + <row/> + <row/> + </rows> + + <columns> + <column> + <label control="first" value="First Name:" /> + <label control="middle" value="Middle Name:" /> + <label control="last" value="Last Name:" /> + </column> + <column> + <textbox id="first" /> + <textbox id="middle" /> + <textbox id="last" /> + </column> + </columns> + +</grid> +</pre> +<p>このグリッドには、3 つの行と 2 つの列があります。 <code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> 要素は、行数を指定するための、単なる<span style="border-bottom: 1px dashed green;" title="placeholders">数あわせ</span>として置かれています。 <code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> に <code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code> 属性を追加することで、その行を伸縮可能に設定することが可能です。コンテントは、各 <code><a href="/ja/docs/Mozilla/Tech/XUL/column" title="column">column</a></code> の中に置かれています。 各 <code><a href="/ja/docs/Mozilla/Tech/XUL/column" title="column">column</a></code> 要素内の最初の要素は最初の行に置かれ、2 番目の要素は 2 行目に、3 番目の要素は 3 行目に置かれます。</p> +<p>コンテントを <code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> と <code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> の両方に置いた場合、グリッド内の正しい値に配置されますが、互いに重なり合ってしまいます。これによって、スタック (<code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code>) 要素のグリッドとよく似た効果を得ることができます。</p> +<p><code><a href="/ja/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code> 内の要素の順序によって、どの要素が前面に表示され、どの要素が背面に配置されるかが決まります。 <code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> 要素が <code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> 要素の後に置かれると、<code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> の方のコンテントが前面に表示されます。 <code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> が <code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> 要素の後に置かれると、<code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> 内の方のコンテントが前面に表示されます。 スタックの場合と同様に、マウスボタンやキー入力などのイベントは、前面の要素だけに送られます。 このために、上の例では、<code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> が <code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> の後に宣言されています。 <code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code> が最初に置かれた場合、<code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> の方がイベントを捕らえてしまい、欄に入力できなくなるはずです。</p> +<h3 id="Flexibility_of_grids" name="Flexibility_of_grids">グリッドの伸縮性</h3> +<p>グリッドが、ボックスを入れ子に組み合わせていく方法と比べた場合に持つ利点の 1 つとして、水平・垂直両方向に<span style="border-bottom: 1px dashed green;" title="flexible">伸縮可能</span>なセルが作れるということがあります。これは、<code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> と <code><a href="/ja/docs/Mozilla/Tech/XUL/column" title="column">column</a></code> の両方に <code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code> 属性を設定することにより可能です。以下に例を示します。</p> +<p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_4.xul">表示</a></p> +<pre class="brush:xml"><grid flex="1"> + <columns> + <column flex="5" /> + <column /> + <column /> + </columns> + <rows> + <row flex="10"> + <button label="Cherry" /> + <button label="Lemon" /> + <button label="Grape" /> + </row> + <row flex="1"> + <button label="Strawberry" /> + <button label="Raspberry" /> + <button label="Peach" /> + </row> + </rows> +</grid> +</pre> +<p>1 列目及び、全ての行に伸縮可能を設定してあります。このため、1 列目のセルはすべて水平方向に伸縮します。さらに、全ての <code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> が伸縮可能であるため、全てのセルは垂直方向にも伸縮します。 ただし、1 行目の方が、flex の値が大きいため、より大きな割合で伸縮します。</p> +<p>第 1 行、1 列目のセル (Cherry ボタン) は、水平方向で 5 の度合、垂直方向で 10 の度合で伸縮可能です。隣のセル (Lemon) は、垂直方向にだけ伸縮します。</p> +<p><code>flex</code> 属性は <code><a href="/ja/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code> 要素にも加えることができます。これによってグリッド全体が伸縮可能になります。この指定をしない場合、グリッドは一方向にしか伸びません。</p> +<h2 id="Column_Spanning" name="Column_Spanning">列のスパン</h2> +<p>グリッドでは、セルを指定された列数や行数分だけスパンするように配置する手段は存在しません。 しかしながら、グリッドの全ての列をスパンした行か、全ての行をスパンした列を作ることは可能です。 列を全てスパンした行を作る場合、コンテントを <code><a href="/ja/docs/Mozilla/Tech/XUL/row" title="row">row</a></code> 要素ではなく、<code><a href="/ja/docs/Mozilla/Tech/XUL/rows" title="rows">rows</a></code> 要素の中に直接置くようにするだけです。 その中に、いくつかの要素を配置したい場合は、例えばボックス型の要素を使用して、置きたい要素を配置することで可能になります。 以下に、簡単な例を示します。</p> +<p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_grids_5.xul">表示</a></p> +<pre class="brush:xml"><grid> + <columns> + <column flex="1" /> + <column flex="1" /> + </columns> + + <rows> + <row> + <label value="Northwest" /> + <label value="Northeast" /> + </row> + <button label="Equator" /> + <row> + <label value="Southwest" /> + <label value="Southeast" /> + </row> + </rows> +</grid> +</pre> +<p>ボタンは、グリッドの行 (<span style="color: green;">row</span>) の中に置かれていないため、グリッドの幅一杯に伸張します。 同様に、<code><a href="/ja/docs/Mozilla/Tech/XUL/column" title="column">column</a></code> の間に要素を加えることで、行をスパンする列を作ることが可能です。 この場合、加えた要素はグリッドの高さ一杯に伸張します。 必要であれば、ひとつのグリッドで両方を行っても構いません。</p> +<p>次のセクションでは、コンテンツパネルを加える方法を見ていきます。</p> +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Tabboxes" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Content_Panels">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/groupboxes/index.html b/files/ja/archive/mozilla/xul/tutorial/groupboxes/index.html new file mode 100644 index 0000000000..9d0738e126 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/groupboxes/index.html @@ -0,0 +1,106 @@ +--- +title: グループボックス +slug: Archive/Mozilla/XUL/Tutorial/Groupboxes +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Box_Model_Details" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_More_Elements">次のページ »</a></p> +</div> +<p>このセクションでは、要素をグループにまとめる方法について説明します。 +</p><p><span id="Groupboxes"></span> +</p> +<h3 id=".E3.82.B0.E3.83.AB.E3.83.BC.E3.83.97.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9" name=".E3.82.B0.E3.83.AB.E3.83.BC.E3.83.97.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9"> グループボックス </h3> +<p>HTML では、関連する要素をグループ化するために使用可能な、<code>fieldset</code> 要素が提供されています。<span style="color: darkgreen; background: #ef9;">【訳注: HTML 4.0 以降です】</span> +多くの場合には、グループ化された要素が関連していることを示すために周囲に境界線が描画されます。 +具体例をあげるとチェックボックスをグループ化するような場合に使用されます。 +XUL でも、同等な要素として <code><code><a href="/ja/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> を提供しており、やはり同じような目的のために使用可能です。 +</p><p>その名前が示しているように、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/groupbox" title="groupbox">groupbox</a></code></code> はボックスの一種です。 +このため、内部の要素はボックスの規則に従って配置されます。 +グループボックスと通常のボックスには 2 つ違いがあります。 +</p> +<ol><li> デフォルトでグループボックスの周囲には、(<span style="border-bottom: 1px dashed green;" title="bevel">ベベル</span>のついた) 溝状スタイルの境界線が描画されます。この振る舞いは、CSS でスタイルを変えることによって変更できます。 +</li><li> グループボックスには、キャプションを設定できます。これは境界線の上辺にそって置かれます。 +</li></ol> +<p>ボックスの一種なので、グループボックスでも <code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> や <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> といったボックスと同じ属性を使うことができます。 +大抵の場合、グループボックスの内部には、何らかの形で関連性があるものを置きますが、必要ならばどんな要素を置いてもかまいません。 +</p><p>グループボックスの上辺にかかって表示されるラベルは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 要素を使って作ることができます。 +これは、HTML の <code>legend</code> 要素と同じような動作をします。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 要素は、グループ内の最初の子要素として、1 つだけ置いておけば十分です。 +</p><p><span id="A_simple_groupbox_example"></span> +</p> +<h4 id=".E5.8D.98.E7.B4.94.E3.81.AA.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.97.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E4.BE.8B" name=".E5.8D.98.E7.B4.94.E3.81.AA.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.97.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E4.BE.8B"> 単純なグループボックスの例 </h4> +<p>以下の例は、単純なグループボックスを示しています。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_1.xul">表示</a> +</p> +<div class="float-right"><img alt="画像:titledbox1.png"></div> +<pre><groupbox> + <caption label="Answer"/> + <description value="Banana"/> + <description value="Tangerine"/> + <description value="Phone Booth"/> + <description value="Kiwi"/> +</groupbox> +</pre> +<p>この例では、4 つのテキストが Answer というラベルをもつボックス内に表示されます。 +デフォルトではグループボックスは垂直配置であることに注意して下さい。 +垂直配置は、テキスト要素を 1 つのカラムに並べていくような場合に必要です。 +</p><p><span id="More_complex_captions"></span> +</p> +<h4 id=".E3.82.88.E3.82.8A.E8.A4.87.E9.9B.91.E3.81.AA.E3.82.AD.E3.83.A3.E3.83.97.E3.82.B7.E3.83.A7.E3.83.B3" name=".E3.82.88.E3.82.8A.E8.A4.87.E9.9B.91.E3.81.AA.E3.82.AD.E3.83.A3.E3.83.97.E3.82.B7.E3.83.A7.E3.83.B3"> より複雑なキャプション </h4> +<p>より複雑なキャプションを設定するために、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/caption" title="caption">caption</a></code></code> 要素を、開始と終了タグで構成して、間に子要素を加えることも可能です。 +例えば、Mozilla のフォント設定パネルでは、キャプションとしてドロップダウンメニューを使っています。 +キャプションとして、どんな要素でも使用することができますが、チェックボックスかドロップダウンメニューのどちらか使う場合が、ほとんどだと思います。 +</p><p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_2.xul">表示</a> +</p> +<div class="float-right"><img alt="画像:groupbox2.png"></div> +<pre><groupbox flex="1"> + <caption> + <checkbox label="Enable Backups"/> + </caption> + <hbox> + <label control="dir" value="Directory:"/> + <textbox id="dir" flex="1"/> + </hbox> + <checkbox label="Compress archived files"/> +</groupbox> +</pre> +<p>この例では、キャプションとしてチェックボックスが使われています。 +このチェックボックスのチェック状態が変更されるのに応じて、グループボックスに含まれるコンテントの<span style="border-bottom: 1px dashed green;" title="enable">有効</span>と<span style="border-bottom: 1px dashed green;" title="disable">無効</span>を切り替えるために、スクリプトが使用されるかもしれません。 +グループボックスにはラベルとテキスト入力欄をもつ水平ボックスが置かれています。 +ウィンドウが広げられたときにテキスト入力欄が広がるために、テキスト入力欄とグループボックスの両方が<span style="border-bottom: 1px dashed green;" title="flexible">伸縮可能</span>になっています。 +グループボックスは<span style="border-bottom: 1px dashed green;" title="vertical orientation">垂直配置</span>であるため、後ろのチェックボックスはテキスト入力欄の下に表示されます。 +なお、<a href="ja/XUL_Tutorial/Adding_More_Elements">次のセクション</a>では、ファイル検索ダイアログにグループボックスを加えてみる予定です。 +</p><p><span id="Radio_Groups"></span> +</p> +<h3 id=".E3.83.A9.E3.82.B8.E3.82.AA.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.97" name=".E3.83.A9.E3.82.B8.E3.82.AA.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.97"> ラジオグループ </h3> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 要素をグループ化するために、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 要素を使用します。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> も、ボックスの一種です。 +グループの内部には、どんな要素でも置くことができ、 +ラジオボタンのための特殊な処理を除けば、他種類のボックスと同じように動作します。 +</p><p>ラジオグループの内部に置かれたラジオボタンは、ネストしたボックスの中にあるものも含めて、全てグループ化されます。 +これは、次の例に示すように、ラジオグループの構造の中にラジオボタン以外の要素を加える場合に利用できます。 +</p><p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_titledbox_3.xul">表示</a> +</p> +<pre><radiogroup> + <radio id="no" value="no" label="No Number"/> + <radio id="random" value="random" label="Random Number"/> + <hbox> + <radio id="specify" value="specify" label="Specify Number:"/> + <textbox id="specificnumber"/> + </hbox> +</radiogroup> +</pre> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 要素では境界線は描画されないことを注記しておきます。 +もし、キャプションや境界線が必要な場合は、グループボックスで囲うようにしてください。 +</p><p>次のセクションでは、ファイル検索ダイアログに、これまで学んだ追加要素をいくつか追加してみます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Box_Model_Details" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_More_Elements">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/index.html b/files/ja/archive/mozilla/xul/tutorial/index.html new file mode 100644 index 0000000000..e0bae978d8 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/index.html @@ -0,0 +1,219 @@ +--- +title: XUL チュートリアル +slug: Archive/Mozilla/XUL/Tutorial +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial +--- +<p>このチュートリアルは XUL (XML User-interface Language) について述べています。この言語は Mozilla アプリケーション用に作成され、そのユーザインターフェイスを定義するのに使用されています。</p> + + + + + + +<h2 id="はじめに">はじめに</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Introduction">はじめに</a></li> + <li><a href="/ja/docs/XUL/Tutorial/XUL_Structure">XULの構造</a></li> + <li><a href="/ja/docs/XUL/Tutorial/The_Chrome_URL">Chrome URL</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Manifest_Files">マニフェストファイル</a></li> +</ul> + + + + + + +<h2 id="シンプルな要素">シンプルな要素</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Creating_a_Window">ウィンドウを作成する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Adding_Buttons">ボタンを追加する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Adding_Labels_and_Images">ラベルと画像を追加する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Input_Controls">入力コントロール</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Numeric_Controls">数値コントロール</a></li> + <li><a href="/ja/docs/XUL/Tutorial/List_Controls">リストコントロール</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Progress_Meters">プログレスメーター</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Adding_HTML_Elements">HTML 要素を追加する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Using_Spacers">スペーサーを使用する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/More_Button_Features">その他のボタン機能</a></li> +</ul> + + + + + + +<h2 id="ボックスモデル">ボックスモデル</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/The_Box_Model">ボックスモデル</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Element_Positioning">要素の配置</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Box_Model_Details">ボックスモデルの詳細</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Groupboxes">グループボックス</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Adding_More_Elements">さらに要素を追加する</a></li> +</ul> + + + + + + +<h2 id="その他のレイアウト要素">その他のレイアウト要素</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Stacks_and_Decks">スタックとデッキ</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Stack_Positioning">スタックの配置</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Tabboxes">タブボックス</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Grids">グリッド</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Content_Panels">コンテンツパネル</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Splitters">スプリッター</a></li> +</ul> + + + + + + +<h2 id="ツールバーとメニュー">ツールバーとメニュー</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Toolbars">ツールバー</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Simple_Menu_Bars">簡単なメニューバー</a></li> + <li><a href="/ja/docs/XUL/Tutorial/More_Menu_Features">より高度なメニュー機能</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Popup_Menus">ポップアップメニュー</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Scrolling_Menus">メニューのスクロール表示</a></li> +</ul> + + + + + + +<h2 id="イベントとスクリプト">イベントとスクリプト</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Adding_Event_Handlers">イベントハンドラを追加する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/More_Event_Handlers">イベントハンドラの詳細</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Keyboard_Shortcuts">キーボードショートカット</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Focus_and_Selection">フォーカスと選択</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Commands">コマンド</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Updating_Commands">コマンドの更新</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Broadcasters_and_Observers">ブロードキャスタとオブザーバ</a></li> +</ul> + + + + + + +<h2 id="ドキュメントオブジェクトモデル">ドキュメントオブジェクトモデル</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Document_Object_Model">ドキュメントオブジェクトモデル</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Modifying_a_XUL_Interface">XUL インターフェイスを変更する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Manipulating_Lists">リストを操作する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Box_Objects">ボックスオブジェクト</a></li> + <li><a href="/ja/docs/XUL/Tutorial/XPCOM_Interfaces">XPCOM インターフェイス</a></li> + <li><a href="/ja/docs/XUL/Tutorial/XPCOM_Examples">XPCOM の利用例</a></li> +</ul> + + + + + + +<h2 id="ツリー">ツリー</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Trees">ツリー</a></li> + <li><a href="/ja/docs/XUL/Tutorial/More_Tree_Features">より高度なツリー機能</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Tree_Selection">ツリーの選択</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Custom_Tree_Views">カスタムツリービュー</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Tree_View_Details">ツリービューの詳細</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Tree_Box_Objects">ツリーボックスオブジェクト</a></li> +</ul> + + + + + + +<h2 id="RDF_とテンプレート">RDF とテンプレート</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Introduction_to_RDF">RDF の概要</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Templates">テンプレート</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Trees_and_Templates">ツリーとテンプレート</a></li> + <li><a href="/ja/docs/XUL/Tutorial/RDF_Datasources">RDF データソース</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Advanced_Rules">高度なルール</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Persistent_Data">永続性のあるデータ</a></li> +</ul> + + + + + + +<h2 id="スキンとロケール">スキンとロケール</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Adding_Style_Sheets">スタイルシートを追加する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Styling_a_Tree">ツリーのスタイル付け</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Modifying_the_Default_Skin">デフォルトスキンを変更する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Creating_a_Skin">スキンを作成する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Localization">ローカライズ (地域化)</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Property_Files">プロパティファイル</a></li> +</ul> + + + + + + +<h2 id="バインディング">バインディング</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Introduction_to_XBL">XBL 入門</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Anonymous_Content">匿名コンテント</a></li> + <li><a href="/ja/docs/XUL/Tutorial/XBL_Attribute_Inheritance">XBL 属性の継承</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements">プロパティを追加する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements">メソッドを追加する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements">イベントハンドラを追加する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/XBL_Inheritance">XBL の継承</a></li> + <li><a href="/ja/docs/XUL/Tutorial/XBL_Example">XBL の例</a></li> +</ul> + + + + + + +<h2 id="特殊なウィンドウタイプ">特殊なウィンドウタイプ</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Features_of_a_Window">ウィンドウの機能</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Creating_Dialogs">ダイアログを作成する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Open_and_Save_Dialogs">「開く」「保存」ダイアログ</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Creating_a_Wizard">ウィザードを作成する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/More_Wizards">より高度なウィザード</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Overlays">オーバーレイ</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Cross_Package_Overlays">クロスパッケージオーバーレイ</a></li> +</ul> + + + + + + +<h2 id="インストール">インストール</h2> +<ul> + <li><a href="/ja/docs/XUL/Tutorial/Creating_an_Installer">インストーラを作成する</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Install_Scripts">インストールスクリプト</a></li> + <li><a href="/ja/docs/XUL/Tutorial/Additional_Install_Features">その他のインストール機能</a></li> +</ul> +<div class="note"> + <p>XULチュートリアルのオリジナルは、 <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>が作成しました。彼は親切なことに、我々に<a>MDC</a>の一部として使用する許可を与えてくれました。</p> +</div> + + + +<div class="originaldocinfo"> + <h2 id="原文に関する情報">原文に関する情報</h2> + <ul> + <li>著者: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li> + <li>著作権情報: © 1999-2005 XULPlanet.com</li> + </ul> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/input_controls/index.html b/files/ja/archive/mozilla/xul/tutorial/input_controls/index.html new file mode 100644 index 0000000000..fc7fe9f2c3 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/input_controls/index.html @@ -0,0 +1,81 @@ +--- +title: 入力コントロール +slug: Archive/Mozilla/XUL/Tutorial/Input_Controls +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Numeric_Controls">次のページ »</a></p> +</div> +<p>XUL にも、HTML の<a href="/ja/DOM/form" title="ja/DOM/form">フォーム</a>コントロールと同様な要素があります。</p> +<p><span id="Text_Entry_Fields"></span></p> +<h3 id=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E5.85.A5.E5.8A.9B.E6.AC.84" name=".E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E5.85.A5.E5.8A.9B.E6.AC.84">テキスト入力欄</h3> +<p>HTML には、テキスト入力をコントロールするために使用可能な input 要素があります。 XUL にも、テキスト入力のための同様な要素として、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 要素があります。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 要素は、何も属性を指定しなくとも、利用者がテキストを入力するためのボックス (テキスト入力欄) を作りますが、 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 要素に対しても、HTML の入力コントロールで使われるものと同様の属性が使用できます。 以下に、主な属性を示します。</p> +<dl><dt> <code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt><dd> テキスト入力欄を識別するための一意な識別子。 </dd><dt> <code id="a-class"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/class">class</a></code> </dt><dd> テキスト入力欄のスタイルクラス。 </dd><dt> <code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt><dd> テキスト入力欄にデフォルトのテキストを指定したい場合、value 属性で指定します。 </dd><dt> <code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt><dd> テキスト入力欄を無効にしたい場合、<code>true</code> を設定します。 </dd><dt> <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> </dt><dd> この属性に、特別な値 <code>password</code> を設定することで、入力した内容を伏せて表示するテキスト入力欄を作成することが出来ます。これは通常、パスワード入力欄に使用されます。 </dd><dt> <code id="a-maxlength"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxlength">maxlength</a></code> </dt><dd> テキスト入力欄に入力可能な最大文字数。 </dd></dl> +<p>HTML では、種類の異なる入力欄を <code>input</code> 要素で作ることができましたが、 XUL では、種類ごとに別々の要素が用意されています。 以下に、テキスト入力欄の例をいくつか示します。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_1.xul">表示</a></p> +<pre><label control="some-text" value="Enter some text"/> +<textbox id="some-text"/> +<label control="some-password" value="Enter a password"/> +<textbox id="some-password" type="password" maxlength="8"/> +</pre> +<p><span id="Multiline_textbox"></span></p> +<h4 id=".E8.A4.87.E6.95.B0.E8.A1.8C.E5.85.A5.E5.8A.9B.E3.81.8C.E5.8F.AF.E8.83.BD.E3.81.AA_textbox" name=".E8.A4.87.E6.95.B0.E8.A1.8C.E5.85.A5.E5.8A.9B.E3.81.8C.E5.8F.AF.E8.83.BD.E3.81.AA_textbox">複数行入力が可能な textbox</h4> +<p>上の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> の例では、1 行分のテキストだけが入力可能なテキスト入力欄が作成されます。 HTML では、より大きなテキスト入力領域を作成するために <code>textarea</code> 要素があります。 XUL では、同じ <code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 要素が使用できるため、別の要素は必要ありません。 <code><code id="a-multiline"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/multiline">multiline</a></code></code> 属性を <code>true</code> に設定することにより、複数行の入力が可能なテキスト入力欄が表示されます。</p> +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_2.xul">表示</a></p> +<pre><textbox multiline="true" + value="This is some text that could wrap onto multiple lines."/> +</pre> +<p>HTML の <code>textarea</code> と同様に、入力欄の大きさを設定するために <code>rows</code> と <code>cols</code> 属性が使用できます。 ここには、表示する行数と文字の桁数を指定します。</p> +<p><span id="Our_find_files_example"></span></p> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ファイル検索ダイアログの例</h4> +<div class="highlight"> +<p>それでは、ファイル検索ダイアログに検索の入力欄を追加してみましょう。 <code>textbox</code> 要素を使用してみます。</p> +<pre class="eval"><span class="highlightred"><label value="Search for:" control="find-text"/></span> +<span class="highlightred"><textbox id="find-text"/></span> + +<button id="find-button" label="Find"/> +</pre> +<div class="float-right"><img alt="画像:inputs1.png" class="internal" src="/@api/deki/files/1915/=Inputs1.png"></div> +<p>これらの行を、以前のセクションで作成したボタンの前に追加します。 このウィンドウを開くと、画像で示したのと同様のものが表示されるはずです。</p> +<p>ラベルと入力欄がウィンドウに表示されることが確認できると思います。 入力欄は完全に機能しますので、テキストを入力したり、選択することが可能です。 <code id="a-control"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/control">control</a></code> 属性の使用により、ラベル (<code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code>) がクリックされた時に入力欄が選択されることを確認してください。</p> +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-inputs.xul">表示</a></p> +</div> +<p><span id="Checkboxes_and_Radio_Buttons"></span></p> +<h3 id=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.A8.E3.83.A9.E3.82.B8.E3.82.AA.E3.83.9C.E3.82.BF.E3.83.B3" name=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.A8.E3.83.A9.E3.82.B8.E3.82.AA.E3.83.9C.E3.82.BF.E3.83.B3">チェックボックスとラジオボタン</h3> +<p>チェックボックスとラジオボタンを作成するための 2 つの要素について説明します。 これらはボタンの一種です。 チェックボックスは、オプションを有効にするか無効かを設定するために使用されます。 ラジオボタンも同様の目的で利用されますが、一群のオプションの中から 1 つだけを選択する場合に用います。</p> +<p>ボタンに設定可能な属性の多くが、チェックボックスとラジオボタンにも使用できます。 下の例は、単純なチェックボックスとラジオボタンを示します。</p> +<pre><checkbox id="case-sensitive" checked="true" label="Case sensitive"/> +<radio id="orange" label="Orange"/> +<radio id="violet" selected="true" label="Violet"/> +<radio id="yellow" label="Yellow"/> +</pre> +<p>最初の行は単純なチェックボックス (<code><a href="/ja/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code>) を作成します。 ユーザがチェックボックスをクリックすると、チェック状態と非チェック状態が切り替わります。 <code><code id="a-checked"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></code> 属性は、デフォルトの状態を指定するのに使用します。 ここには <code>true</code> または <code>false</code> のいずれかの値を設定します。 <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性によって、チェックボックスの横に表示されるラベルを設定することが出来ます。 ラジオボタン (<code><a href="/ja/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code>) では、<code><code id="a-checked"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/checked">checked</a></code></code> 属性の代わりに <code><code id="a-selected"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code> 属性を使用する必要があります。 デフォルトで選択されているラジオボタンに対して <code>true</code> を設定し、そのほかのラジオボタンでは、設定しないでおきます。</p> +<p><span id="Radiogroup_element"></span></p> +<h4 id="Radiogroup_.E8.A6.81.E7.B4.A0" name="Radiogroup_.E8.A6.81.E7.B4.A0">Radiogroup 要素</h4> +<p>ラジオボタンをグループ化するためには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 要素を使用する必要があります。 グループのラジオボタンは一度に 1 個しか選択できません。 1 つを選択すると、同じグループの他のものは選択されない状態になります。 下の例により、試すことができます。</p> +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_inputs_3.xul">表示</a></p> +<pre><radiogroup> + <radio id="orange" label="Orange"/> + <radio id="violet" selected="true" label="Violet"/> + <radio id="yellow" label="Yellow"/> +</radiogroup> +</pre> +<p><span id="Attributes"></span></p> +<h4 id=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.A8.E3.83.A9.E3.82.B8.E3.82.AA.E3.83.9C.E3.82.BF.E3.83.B3.E3.81.AE.E5.B1.9E.E6.80.A7" name=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.A8.E3.83.A9.E3.82.B8.E3.82.AA.E3.83.9C.E3.82.BF.E3.83.B3.E3.81.AE.E5.B1.9E.E6.80.A7">チェックボックスとラジオボタンの属性</h4> +<p>ボタンと同様、チェックボックスとラジオボタンも、ラベルと画像よって構成されています。 画像は、クリックされたときのチェック状態と非チェック状態の切り替わりに応じて切り替わります。 チェックボックスに使用できる属性の多くは、ボタンと同じです。</p> +<dl><dt> <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> </dt><dd> チェックボックスまたはラジオボタンのラベル。 </dd><dt> <code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code> </dt><dd> チェックボックスまたはラジオボタンの有効・無効を設定するために、<code>true</code> または <code>false</code> を設定します。 </dd><dt> <code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> </dt><dd> この要素を選択するためのショートカットキー。指定された文字は通常ラベルに下線付きで表示されます。 </dd></dl> +<p>次のセクションでは、数値の入力や選択を行うための要素について見て行きます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Numeric_Controls">次のページ »</a></p> +</div> + + + +<p> </p> +<div id="gm_minibuffer_container" style="background-color: rgb(0, 0, 0);"> + <span>$</span><input></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/install_scripts/index.html b/files/ja/archive/mozilla/xul/tutorial/install_scripts/index.html new file mode 100644 index 0000000000..64a80e60c9 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/install_scripts/index.html @@ -0,0 +1,104 @@ +--- +title: インストールスクリプト +slug: Archive/Mozilla/XUL/Tutorial/Install_Scripts +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_an_Installer" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Additional_Install_Features">次のページ »</a></p> +</div> +<p>このセクションでは、インストールスクリプトについて述べます。</p> +<h3 id=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.AE.E4.BD.9C.E6.88.90" name=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.82.B9.E3.82.AF.E3.83.AA.E3.83.97.E3.83.88.E3.81.AE.E4.BD.9C.E6.88.90">インストールスクリプトの作成</h3> +<div class="note"> + <b>注意</b>: Firefox の拡張 (<span style="color: green;">Extension</span>) では、<tt>install.js</tt> は、使用されていません。かわりに <tt><a href="ja/Install_Manifests">install.rdf</a></tt> を作成する必要があります。</div> +<p>たいていの場合、インストールの過程で何らかの形での制御を行ないたいと思うでしょう。 例えば、ファイルのバージョンを確認してアップデートされたファイルだけインストールしたいとか、すでにあるファイルにパッチを適用したいとか、です。 インストールスクリプトは、ファイルのアンインストールすら可能なほど柔軟です。 このため、インストーラにはインストール過程をコントロールするインストールスクリプトが入っています。</p> +<p>このインストールスクリプトは、install.js という名前でなければならず、インストーラのアーカイブのトップレベルになければなりません。 スクリプトには、いろいろなインストール関数を呼び出す JavaScript コードが記述されています。</p> +<p>HTML 文書や XML 文書では、window オブジェクトがルート・グローバル・オブジェクトです。 すなわち、window オブジェクトのメソッドは限定子を前に付けずにコールすることができ、<code>window.open(...)</code> は単に <code>open(...)</code> と記述できます。 インストールスクリプトでは、関連するウィンドウはありませんが、 + <i> + Install</i> + オブジェクトがグローバル・オブジェクトであり、インストール過程をカスタマイズする様々な関数を含んでいます。 Install オブジェクトの関数のいくつかは後述します。</p> +<p>インストールスクリプトは次のような手順を取ります：</p> +<ol> + <li>どのパッケージとバージョンがインストールされるかを指定し、インストールを初期化する。</li> + <li>Install 関数を使用して、どのファイルとディレクトリをインストールすべきかを指示する。ファイルの移動や削除も設定できます。</li> + <li>必要なファイルをインストールするプロセスを開始する。</li> +</ol> +<p>ステップ2においては、どのファイルがインストールされるかが指定されるだけで、他の動作は行なわれないことに注意してください。 ファイルがコピーされるのはステップ3です。 こうする事によって、インストールされるファイルの数を簡単に指定でき、何らかのエラーが生じた場合は、ユーザのシステムを変更することなく全過程を中止することができるのです。</p> +<h3 id=".E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88.E3.83.AC.E3.82.B8.E3.82.B9.E3.83.88.E3.83.AA" name=".E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88.E3.83.AC.E3.82.B8.E3.82.B9.E3.83.88.E3.83.AA">コンポーネントレジストリ</h3> +<p>Mozilla には、現在インストールされている全てのコンポーネントのレジストリになるファイルがあります。 このコンポーネントには、新しいクロームのパッケージ、スキン、プラグインが含まれます。 新しいコンポーネントがインストールされると、レジストリが更新されます。 これによって、あなたのコンポーネントのバージョンがすでに存在しているかをチェックして、必要な時だけアップデートする事が簡単にできます。</p> +<p>コンポーネントレジストリは、Windows のレジストリといくらか似た働きをします。 キーと値の階層構造です。 XUL アプリケーションを作成する場合、これについての深い知識は必要ありませんが、独自の <a href="ja/XUL_Tutorial/XPCOM_Interfaces">XPCOM</a> コンポーネントを作成している場合は別です。</p> +<p>インストールにおいて知っておかなければならない事は、レジストリが、ファイルのリストとバージョンなど、あなたのアプリケーションに関する情報を保存している、という事です。 これらの情報の全ては、（上記のステップ1で）あなたがインストールスクリプトで指定したキー（とサブキー）に保存されます。</p> +<p>このキーは次のような形で、ディレクトリのようなパス構造をしています：</p> +<pre>/Author/Package Name +</pre> +<p>Author をあなたの名前に、Package Name をあなたがインストールするパッケージの名称に変更しましょう。例えば：</p> +<pre>/Xulplanet/Find Files + +/Netscape/Personal Security Manager +</pre> +<p>最初の例は、私たちがファイル検索ダイアログに使用するものです。 次の例は、Personal Security Manager に使用されているキーです。</p> +<h3 id=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.81.AE.E5.88.9D.E6.9C.9F.E5.8C.96" name=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.81.AE.E5.88.9D.E6.9C.9F.E5.8C.96">インストールの初期化</h3> +<p>Install オブジェクトには、インストールを初期化する関数である initInstall があります。 これはインストールスクリプトの一番最初に呼び出されなければなりません。 この関数の書式は次のようなものです：</p> +<pre>initInstall( ''packageName'' , ''regPackage'' , ''version'' );</pre> +<p>An example</p> +<pre>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");</pre> +<ul> + <li>最初の引数は、ユーザが読める形式の、パッケージの名称です。</li> + <li>次の引数は、上述した、パッケージの情報を保持するレジストリキーです。</li> + <li>第三の引数は、インストールされるパッケージのバージョンです。</li> +</ul> +<p>次に、ファイルがインストールされるディレクトリを指定しなければなりません。 これには二つの方法があります。</p> +<ul> + <li>簡単な方法は、インストールするディレクトリを指定して、全てのファイルをそこにインストールする方法です。</li> + <li>二番目の方法では、目的地をファイルごと（あるいはディレクトリごと）に指定できます。最初の方法を以下に述べます。</li> +</ul> +<p><code>setPackageFolder</code> 関数は、インストールディレクトリを指定します。 ファイル検索ダイアログの場合、ファイルは chrome ディレクトリにインストールします（実際には、どこに置いてもかまわないのですが）。 <code>setPackageFolder</code> は、一つの引数しかなく、それはインストールするディレクトリです。 移植性を最大にするため、ディレクトリのパス文字列を指定する事はできません。 その代わりに、既知のディレクトリの識別子を指定し、そのサブディレクトリを得ます。 これによって、もしアプリケーションがシステムライブラリをインストールする必要があっても、ディレクトリの名称をあらかじめ知っておく必要はありません。</p> +<p>ディレクトリの識別子は、<a class="external" href="http://www.xulplanet.com/references/elemref/ref_Install.html#prop_getFolder">XULPlanet のリファレンス</a>に一覧が載っています。 chrome ディレクトリのディレクトリ識別子は 'Chrome' です。 <code>getFolder</code> 関数は、これらの特別なディレクトリを得るのに使用されます。 この関数には二つの引数があり、最初が識別子で、二番目がサブディレクトリです。 例えば：</p> +<pre>findDir = getFolder("Chrome","findfile"); +setPackageFolder(findDir); +</pre> +<p>ここでは、Chorome フォルダの中に findfile フォルダを得て、それをダイレクトに <code>setPackageFolder</code> 関数に渡しています。 <code>getFolder</code> の二番目の引数は、これからインストールするべきサブディレクトリで、あらかじめ存在していなくても構いません。 また、必要がなければ、この引数は省略できます。</p> +<h3 id=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.81.99.E3.82.8B.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B" name=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.81.99.E3.82.8B.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B">インストールするファイルを設定する</h3> +<p>次に、どのファイルがインストールされるかを指定します。 これには二つの関数、<code>addDirectory</code> と <code>addFile</code> が使用されます。 <code>addDirectory</code> 関数は、インストーラに、XPI アーカイブのディレクトリ（およびその中身全て）が特定の場所にインストールされるべきである事を知らせます。 <code>addFile</code> も同様ですが、一つのファイルだけです。</p> +<p><code>addDirectory</code> 関数と <code>addFile</code> 関数のどちらも様々な形式を取ります。 最も単純なものは一つの引数しかなく、上で指定したインストール先ディレクトリにインストールさせたいインストーラのディレクトリを渡します。</p> +<pre class="eval">addDirectory (<i>dir</i> ); +addFile (<i>dir</i> ); + +<b>Example:</b> + +addDirectory("findfile"); +</pre> +<p>上の例は、インストーラ・アーカイブの findfile ディレクトリをインストールする事を指示しています。 他のファイルをインストールするには、これらの関数を何回か使用します。</p> +<p>次に、find files をクロームシステムに登録して、クローム URL から使用できるようにします。 これには、<code>registerChrome</code> 関数を使用します。二つの引数があり、最初のものは登録するクロームの種類（content、skin あるいは locale）です。 二番目は、登録するべき contents.rdf ファイルのあるディレクトリです。 ファイル検索ダイアログには、content、skin ファイル、そして locale ファイルがあるので、<code>registerChrome</code> は三回コールされなければなりません。</p> +<pre>registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content")); +registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin")); +registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale")); +</pre> +<p>DELAYED_CHROME フラグは、クロームが Mozilla の再起動時にインストールされる事を示すのに使用します。</p> +<h3 id=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.81.AE.E5.AE.8C.E4.BA.86" name=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E3.81.AE.E5.AE.8C.E4.BA.86">インストールの完了</h3> +<p><code>addDirectory</code> と <code>addFile</code> 関数は、ファイルのコピーは行ないません。 どのファイルがインストールされるかを宣言するだけです。 同様に、<code>registerChrome</code> は、登録されるべきクロームを宣言するだけです。 プロセスを終了してファイルのコピーを開始するには、<code>performInstall</code> 関数をコールします。 これには引数はありません。</p> +<p>ファイル検索コンポーネントをインストールする最終的なスクリプトは、次のようになります：</p> +<div class="highlight"> + <p><a href="https://developer.mozilla.org/samples/xultu/examples/ex_xpiscript_1.js.txt">ソース</a></p> + <pre>initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0"); + +findDir = getFolder("Chrome","findfile"); +setPackageFolder(findDir); + +addDirectory("findfile"); + +registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content")); +registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin")); +registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale")); + +performInstall(); +</pre> +</div> +<p>次に、その他のインストール関数を見てみましょう。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_an_Installer" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Additional_Install_Features">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/introduction/index.html b/files/ja/archive/mozilla/xul/tutorial/introduction/index.html new file mode 100644 index 0000000000..0f35c50f7f --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/introduction/index.html @@ -0,0 +1,70 @@ +--- +title: はじめに +slug: Archive/Mozilla/XUL/Tutorial/Introduction +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial/XUL_Structure">次のページ »</a></p> +</div></div> + +<p>このチュートリアルでは、クロスプラットフォームなアプリケーションのユーザーインターフェイスを記述するための言語である、<abbr title="XML User Interface Language">XUL</abbr> (XML User-interface Language) の学習を手引きします。</p> + +<p>このチュートリアルでは、簡易なファイル検索ユーザーインターフェイスの作成に挑戦します。 これは Macintosh の Sherlock や Windows の ファイル検索ダイアログとよく似たものですが、ここでは機能がいくらか限定されたユーザーインターフェイスを作成するだけで、実際のファイル検索機能までは実装しません。 本文中では、ファイル検索ダイアログの変更を行う段落には、左端に青い線が表示してありますので、 それを目安に読んでいくことも可能です。</p> + +<h2 id="XUL_とは何であり、その目的は？">XUL とは何であり、その目的は？</h2> + +<p>XUL (発音は zool:ズール で、リズムは cool:クール) は Mozilla ブラウザの開発をより簡単に、より早く行えるようにするために作られました。 XUL は、<abbr title="Extensible Markup Language">XML</abbr> 言語 <span style="color: darkgreen; background: #ef9;">【訳注: 厳密には XML 応用言語】</span> であるので、XML で可能なことは全て XUL でも可能です。</p> + +<p>ほとんどのアプリケーションは、プラットフォーム固有の機能を用いて開発する必要があるため、クロスプラットフォームなソフトフェアの構築は、時間がかかりコスト高になってしまいます。 このため、過去にも多くのクロスプラットフォームソリューションが生み出されてきました。 例えば、Java は主なセールスポイントとして<span style="border-bottom: 1px dashed green;" title="portability">可搬性</span>をうたっています。 XUL もそのような言語のひとつで、特に可搬性のあるユーザインターフェイスを構築する為に設計されています。 また、アプリケーションの作成は、たった 1 つのプラットフォームのためだけでも長い時間がかかります。 コンパイルやデバッグに時間がかかるからです。 XUL を利用することで、素早く簡単にインターフェイスを実装し変更することができるようになります。</p> + +<p>XUL には他の XML 言語の利点をすべて備えています。例えば XHTML や <abbr title="Math Markup Language">MathML</abbr> あるいは <abbr title="Scalable Vector Graphics">SVG</abbr> といった他の XML 言語を中に含めることができます。 また、XUL で表示されるテキストは簡単にローカライズ (地域化) することが可能です。 これによって、わずかな労力で他言語への翻訳版を作成できます。</p> + +<h2 id="どのようなユーザインターフェイスを_XUL_で作れるのでしょうか？">どのようなユーザインターフェイスを XUL で作れるのでしょうか？</h2> + +<p>XUL には、現代のグラフィカルインターフェイスにあるほぼあらゆる要素を作る能力があります。作ることのできる要素としては次のようなものがあります：</p> + +<ul> + <li>テキスト入力欄やチェックボックスといった入力コントロール</li> + <li>ボタンや他のものを含むツールバー</li> + <li>メニューバーのメニューやポップアップメニュー</li> + <li>タブ式のダイアログ</li> + <li>階層木構造や表による情報</li> + <li>キーボードショートカット</li> +</ul> + +<p>表示コンテント (内容) は XUL ファイルのコンテンツからでも、データソースのデータからでも生成することが可能です。 Mozilla の場合、データソースとして、利用者のメールボックスやブックマーク、検索結果などが利用できます。 つまり、メニューやツリーなどの要素のコンテントは、Mozilla が提供するデータや、あるいは <abbr title="Resource Description Framework">RDF</abbr> ファイルを利用して供給する独自のデータから生成することが可能なわけです。</p> + +<p>また、XUL は、様々な方法で利用することが可能です。</p> + +<ul> + <li>Firefox 拡張機能 (<span style="color: green;">Extension</span>) -- 拡張機能はブラウザそのものに機能を追加します。多くの場合、追加のツールバー、コンテキストメニュー、あるいはブラウザのユーザーインターフェイスのカスタマイズという形になります。これは、<strong>オーバーレイ</strong>という XUL の機能を使用しており、単一ソース、この場合は Firefox ブラウザのユーザーインターフェイスに拡張機能のものを統合します。拡張機能はまた、Thunderbird といった他の Mozilla ベースの製品にも応用できます。</li> + <li>スタンドアローンな XULRunner アプリケーション -- XULRunner は、スタンドアローンな XUL アプリケーションを作成できる Mozilla プラットフォームのパッケージ版です。こうしたアプリケーションは、実行ファイルであるため、実行するにあたってブラウザは必要ありません。</li> + <li>XUL パッケージ -- その 2 つの中間にあるのは、拡張機能と同じように作成され、しかし別のウィンドウで別のアプリケーションのように動作するアプリケーションです。完全な XULRunner アプリケーションという大きなサイズは欲しくない、しかし、アプリケーションの実行に Mozilla ブラウザを要求してもかまわないという場合に採用されます。</li> + <li>リモートな XUL アプリケーション -- ちょうど Web ページ同じように、XUL コードを Web サーバに置いてブラウザ内で開くこともできます。 ただし、セキュリティ面での懸念から、「他のウィンドウを開く」といったようなことが制限されるため、この手法でできることには制限があります。</li> +</ul> + +<p>はじめの 3 タイプではすべて、利用者のマシンへのインストールが必要です。 しかしながら、こうしたタイプのアプリケーションにはセキュリティ上の制限がないため、 例えば、ローカルファイルへのアクセスや、設定の読み込み・書き込みなどが可能になります。 拡張機能にするには、アプリケーションが使用する XUL ファイルや関連するスクリプトおよび画像を 1 つのファイルにパッケージ化して、利用者がダウンロードとインストールができるようにします。 Firefox のような Mozilla アプリケーションでは、拡張機能マネージャーを提供しているため、多量の複雑なコードを作成しなくともパッケージのインストールができるようになっています。</p> + +<p>XUL ファイルは、ファイルシステムから直接でも、リモートの Web サイトからでも開くことが可能です。 しかしながら、リモートの場合は可能な操作の種類が制限されるため、XUL の一部は機能しません。 また、リモートなサイトから XUL コンテントをロードしたい場合には、必ず Web サーバ側で XUL ファイルを「application/vnd.mozilla.xul+xml」というコンテントタイプとして送信できるように設定しておく必要があります。 XUL は通常、<code>.xul</code> という拡張子がついたファイルとして保存されています。 このため、XUL ファイルは他の形式と同じように、「ファイル」メニューから「開く」コマンドを使ったり、アドレスバーに URL を入力したりして開くことが可能です。</p> + +<h2 id="このチュートリアルを読むために知っておくべき事は？">このチュートリアルを読むために知っておくべき事は？</h2> + +<p>少なくとも、 <abbr title="HyperText Markup Language">HTML</abbr> の理解と XML および <abbr title="Cascading Style Sheets">CSS</abbr> の基本的な理解をしていることが求められます。覚えておくべき指針を示します：</p> + +<ul> + <li>XML は (HTML とは異なり) 大文字小文字を区別するため XUL の要素および属性は全て小文字で入力されなければなりません。</li> + <li>XUL の属性値は引用符で括らなければなりません。それが数値であってもです。</li> + <li>XUL 関連のファイルは通常 4 種類のファイルに分けられます。 それらは、レイアウトと要素のため、スタイル宣言のため、実体宣言 (ローカライゼーションに利用されます) そしてスクリプトのためのものです。加えて、画像やプラットフォーム固有データのための追加ファイルも使用できます。</li> +</ul> + +<p>XUL は Mozilla および Netscape 6 以降や Mozilla Firefox などの Gecko エンジンベースのブラウザでサポートされています。XUL の文法は時につれて色々と変化してきたため、例を正しく動作させるには最新バージョンを利用することをお薦めします。例のほとんどは Mozilla 1.0 以降で動作します。カスタマイズ可能なツールバーのサポートといった特有の差異はありますが、 XUL は Firefox その他のブラウザでもほぼ同様です。</p> + +<p>このチュートリアルでは XUL の機能・関係のおおよそをカバーしようと試みましたが、全ての機能については言及出来ていません。一度 XUL に馴染んだら、各要素で提供している他の機能は <a href="/ja/docs/XUL_Reference">XUL リファレンス</a>を参照してください。</p> + +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial/XUL_Structure">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/introduction_to_rdf/index.html b/files/ja/archive/mozilla/xul/tutorial/introduction_to_rdf/index.html new file mode 100644 index 0000000000..a14d8afccb --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/introduction_to_rdf/index.html @@ -0,0 +1,119 @@ +--- +title: RDF の概要 +slug: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF +tags: + - RDF + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Tree_Box_Objects" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Templates">次のページ »</a></p> +</div> +<p>このセクションでは、 RDF (Resource Description Framework) について見ていきます。</p> +<p><span id="Resource_Description_Framework"></span></p> +<h3 id="RDF_.E3.81.A8.E3.81.AF" name="RDF_.E3.81.A8.E3.81.AF">RDF とは</h3> +<p>XUL では、<a href="ja/XUL_Tutorial/Trees">ツリー関連の要素</a>を使用することで、 ブックマークやメールメッセージといったデータの集合を表示させることができます。 しかし、そのために XUL ファイルに直接データまで記述しなければならないとすると、 不便なことがたくさんあります。 例えば、ブックマークの情報が、直接 XUL ファイルに書かれているとしたら、 変更処理は非常に難しいものになるはずです。 RDF <span style="border-bottom: 1px dashed green;" title="datasource">データソース</span>を利用することで、こういった問題を解決することが可能です。</p> +<p><a href="ja/RDF">RDF</a> (Resource Description Framework) は、ブックマークやメールなどのリソース情報を保存するときのフォーマットとして使用できます。 または、他のフォーマットで保存しておいて、ファイルを読み込んだときに RDF データを生成するようなコードを書くことも可能です。 後者の方法が、Mozilla がブックマークや履歴、メールメッセージなどのデータを読み込むときに行っている方法になります。 Mozilla では、こういった共通のデータに対するデータソースを提供しており、 XUL アプリケーションからも簡単に利用することが可能です。</p> +<p>ツリーで扱うデータの供給源として、Mozilla が提供する全ての RDF データソースを利用できます。 あるいは、XML 形式でデータを保存した、RDF ファイルを参照することも可能です。 これによって、多数の行が含まれるツリーを表示する場合の処理が非常に楽になります。 また、RDF はリストボックスやメニューといった他の要素で扱うデータの供給源としても利用できます。 これについては、次のセクションで見る予定です。</p> +<p>ここでは、RDF についてのごく簡単な概略を説明します。 なお、RDF についての詳しい説明は、XULPlanet の <a class="external" href="http://www.xulplanet.com/tutorials/mozsdk/rdfstart.php">Introduction to the RDF Model</a> を参照してください。 RDF についての知識がない方は、このガイドに目を通しておくことを薦めます。 <span style="color: darkgreen; background: #ef9;">【訳注: リンク先は英語なので、日本語の場合 <a class='"external"' href='"http://ja.wikipedia.org/wiki/Resource_Description_Framework"'>Wikipedia</a> の記載ぐらいを読んでおくのが適当かもしれません】</span></p> +<p>また、RDF についての詳細は、<a class="external" href="http://www.w3.org/RDF/">W3C の RDF のページ</a> から、RDF の仕様についての情報を参照してください。</p> +<h4 id="RDF.2FXML" name="RDF.2FXML">RDF/XML</h4> +<p>RDF は、データをグラフとして表現するモデルからなっています。<span style="color: darkgreen; background: #ef9;">【訳注: <a class='"external"' href='"http://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%95%E7%90%86%E8%AB%96"'>グラフ理論</a>のグラフです】</span> また、RDF/XML は RDF データを XML 言語の構文を使用して表現したもので、 適切かつシンプルにまとめられた要素のセットで構成されています。 以下に、簡単な RDF/XML ファイルの雛形を示します。</p> +<pre><?xml version="1.0"?> +<RDF:RDF + xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> + ... +</RDF:RDF> +</pre> +<p>上記から、XUL のヘッダ部分と類似していることが確認できます。 相違点としては、XUL では <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 要素だった場所に、<code>RDF</code> 要素が使用されていることと、 <code>RDF</code> 関連の要素が正しく認識されるようにするために、 RDF の名前空間が宣言されている点です。 この <code>RDF</code> 要素の内側にデータを記述していきます。 なお、RDF/XML ファイルの例としては、実際に Mozilla が提供しているものがいくつかあるので、それらを参考にするのがよいでしょう。 RDF/XML ファイルの拡張子は rdf になります。</p> +<p><span id="RDF_database"></span></p> +<h4 id="RDF_.E3.83.87.E3.83.BC.E3.82.BF.E3.83.99.E3.83.BC.E3.82.B9" name="RDF_.E3.83.87.E3.83.BC.E3.82.BF.E3.83.99.E3.83.BC.E3.82.B9">RDF データベース</h4> +<p>それでは、例として RDF から生成されるブックマークリストについて見てみることにします。 ブックマークリストは、レコードの集合からなっており、個々のレコードには URL、タイトル、訪問日といったデータが関連付けられています。</p> +<p>このためブックマーク情報は、データを多数のフィールドからなる大規模な表として保存するようなデータベースであると考えることができます。 ただし、このとき RDF では、リストに階層構造を持たせることが可能です。 これはブックマークにフォルダやカテゴリをに設定するために必要になります。 RDF データベース内の各フィールドはリソースで、それぞれリソースと結び付けられた名前が付けられており、それらの名前は URI で記述されます。</p> +<p>例として、 Mozilla のブックマークリストのフィールドから、URI の記述をいくつか示します。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Name</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> + <td>ブックマーク名</td> + </tr> + <tr> + <td>URL</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> + <td>リンク先 URL</td> + </tr> + <tr> + <td>Description</td> + <td><span class="nowiki">http://home.netscape.com/NC-rdf#Description</span></td> + <td>ブックマークの説明</td> + </tr> + <tr> + <td>Last Visited</td> + <td><span class="nowiki">http://home.netscape.com/WEB-rdf#LastVisitDate</span></td> + <td>最終訪問日</td> + </tr> + </tbody> +</table> +<p>これらの URI は、名前空間名にフィールド名を付加して生成されます。 次のセクションでは、これらを使ってフィールドの値を自動設定する方法について見ていきます。 なお、最終訪問日は他の 3 つのフィールドと若干異なる名前空間になっていることを注記しておきます。</p> +<p><span id="RDF/XML_file_example"></span></p> +<h4 id="RDF.2FXML_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E4.BE.8B" name="RDF.2FXML_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E4.BE.8B">RDF/XML ファイルの例</h4> +<p>以下に、3 つのレコードと 3 つのフィールドを持つ表のための RDF/XML ファイルの例を示します。</p> +<pre><RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#"> + + <RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals"> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion"> + <ANIMALS:name>Lion</ANIMALS:name> + <ANIMALS:species>Panthera leo</ANIMALS:species> + <ANIMALS:class>Mammal</ANIMALS:class> + </RDF:Description> + </RDF:li> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula"> + <ANIMALS:name>Tarantula</ANIMALS:name> + <ANIMALS:species>Avicularia avicularia</ANIMALS:species> + <ANIMALS:class>Arachnid</ANIMALS:class> + </RDF:Description> + </RDF:li> + <RDF:li> + <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus"> + <ANIMALS:name>Hippopotamus</ANIMALS:name> + <ANIMALS:species>Hippopotamus amphibius</ANIMALS:species> + <ANIMALS:class>Mammal</ANIMALS:class> + </RDF:Description> + </RDF:li> + </RDF:Seq> +</RDF:RDF> +</pre> +<p>ここでは、3 つのレコードが記述されていて、1 レコードが 1 つの動物 (animal) に対応しています。 1 つのレコードは、各 <code>RDF:Description</code> タグが対応します。 それぞれのレコードの内部には 3 つのフィールド、すなわち <code>name</code>、<code>species</code>、<code>class</code> が記述されています。 なお、すべてのレコードが同じフィールドで構成されていなければならないわけではありませんが、フィールドを揃えておくことで、より意味のあるデータになります。</p> +<p>3 つのフィールドは、すべて名前空間として <code>ANIMALS</code> が指定されており、その URL は <code>RDF</code> タグで宣言されています。 フィールド名は、この例ではデータの意味合いを元に設定していますが、別の基準で設定してもかまいません。 なお、名前空間の特性によって、<code>class</code> というフィールド名が、スタイルにある <code>class</code> と衝突するのを回避していることを補足しておきます。</p> +<p><code>Seq</code> 要素と <code>li</code> 要素は、レコードがリストになっていることを示すために使用します。 これは HTML でリストを宣言する方法と類似しています。 <code>Seq</code> 要素は、子要素の置かれる順番に意味があることを表すために使用します。 また、順番に意味がない場合は、<code>Seq</code> 要素ではなく <code>Bag</code> 要素を使用します。 なお、ここに <code>Alt</code> 要素を使用することで、データの各レコードが (ミラー URL のような) 代替の値を指定していることを表すことも可能です。</p> +<p>RDF のリソースは、名前空間の URL とそれに続くフィールド名によって、XUL ファイルから参照することが可能です。 上の例では、以下に示す URI が、特定のフィールドを指定した参照を可能にするために生成されます。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td>Name</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#name</span></td> + </tr> + <tr> + <td>Species</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#species</span></td> + </tr> + <tr> + <td>Class</td> + <td><span class="nowiki">http://www.some-fictitious-zoo.com/rdf#class</span></td> + </tr> + </tbody> +</table> +<p>次のセクションでは、RDF から供給されるデータに基づいて XUL 要素を生成する方法について見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Tree_Box_Objects" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Templates">次のページ »</a></p> +</div> +<p> </p> +<div class="noinclude"> + </div> diff --git a/files/ja/archive/mozilla/xul/tutorial/introduction_to_xbl/index.html b/files/ja/archive/mozilla/xul/tutorial/introduction_to_xbl/index.html new file mode 100644 index 0000000000..77bcc83a7f --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/introduction_to_xbl/index.html @@ -0,0 +1,124 @@ +--- +title: XBL 入門 +slug: Archive/Mozilla/XUL/Tutorial/Introduction_to_XBL +tags: + - Tutorials + - XBL + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_XBL +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Property_Files" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Anonymous_Content">次のページ »</a></p> +</div> +<p><a href="ja/XUL">XUL</a> には、姉妹言語として <a href="ja/XBL">XBL</a> (eXtensible Bindings Language) が用意されています。 +この言語を利用して、XUL ウィジェットの<span style="border-bottom: 1px dashed green;" title="behavior">振る舞い</span>を宣言することが可能です。 +</p> +<h3 id=".E3.83.90.E3.82.A4.E3.83.B3.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0" name=".E3.83.90.E3.82.A4.E3.83.B3.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0"> バインディング </h3> +<p>XUL を使用すれば、アプリケーションが提供するユーザーインターフェイスのレイアウトを定義することが可能です。 +また、それらに<a href="ja/XUL_Tutorial/Adding_Style_Sheets">スタイルを適用する</a>ことで、要素の外観をカスタマイズできます。 +さらに、スタイルを変更するために、<a href="ja/XUL_Tutorial/Creating_a_Skin">新しいスキンを作成する</a>ことも可能です。 +このとき、<a href="ja/XUL_Tutorial/Scroll_Bars">スクロールバー</a>や、<a href="ja/XUL_Tutorial/Input_Controls">チェックボックス</a>といった、すべての要素の基本的な外観については、スタイルを調整するか、要素に属性を設定することによって変更することが可能ですが、 +XUL では、要素の挙動については変更する手段がありません。 +例えば、スクロールバーについて、部分的に動作の内容を変更したい場合があるかもしれませんが、 +こういった場合は、<a href="ja/XBL">XBL</a> が必要になります。 +</p><p>XBL では、XUL ウィジェットの振る舞いをバインディング (<span style="color: green;">binging</span>) として記述することができ、 +XBL ファイルには、記述したいくつかのバインディングをまとめて置くことができます。 +例えば、スクロールバーに結びつけるためのバインディングを記述する場合、 +振る舞いとしては、 +スクロールバーを構成する XUL 要素についての記述に加えて、 +スクロールバーのプロパティとメソッドについても記述することになります。 +</p><p>XUL と同様に、XBL も XML 応用言語の一種であるため、構文規則も似たものになります。 +以下の例は、XBL ファイルの基本的な枠組みを示しています。 +</p> +<pre><?xml version="1.0"?> +<bindings xmlns="http://www.mozilla.org/xbl"> + <binding id="binding1"> + <!-- content, property, method and event descriptions go here --> + </binding> + <binding id="binding2"> + <!-- content, property, method and event descriptions go here --> + </binding> +</bindings> +</pre> +<p><code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></code> 要素は、XBL ファイルにおけるルート要素になっており、 +そこには、1 つ以上の <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code></code> 要素が含まれています。 +それぞれの <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code></code> 要素では、個々のバインディングを宣言します。 +そこに置かれている <code>id</code> 属性は、バインディングを識別するのに使用されることになります。 +上の雛形には、2 つのバインディングがあり、 +1 つは、<code>binding1</code> で、もう 1 つは、binding2 です。 +これらは、片方をスクロールバーに結びつけ、もう片方はメニューに結びつけるといったような具合に利用します。 +バインディングは、どの XUL 要素に対しても結びつけることが可能です。 +CSS クラスを使用すれば、異なったバインディングを必要なだけ利用できます。 +上記のテンプレートの <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></code> 要素に置かれている名前空間の指定に注目してください。 +これは、XBL の構文を使うことを宣言するものです。 +</p><p>バインディングを要素に割り当てるためには、CSS プロパティ <code><a href="ja/CSS/-moz-binding">-moz-binding</a></code> に、バインディングファイルを示す URL を設定します。 +例えば、次のようにします。 +</p> +<pre>scrollbar { + -moz-binding: url('chrome://findfile/content/findfile.xml#binding1'); +} +</pre> +<p>この URL は、<code><a class=" external" rel="freelink">chrome://findfile/content/findfile.xml</a></code> ファイル中に置かれている <code>binding1</code> という <code>id</code> を持ったバインディングを指しています。 +ここで、<code>#binding1</code> の部分の構文は、特定のバインディングを指すために使用され、これは HTML ファイルの中のアンカーを指すための方法とよく似ています。 +通常、バインディングは、すべて 1 つのファイルにまとめて置きます。 +この例の結果、すべてのスクロールバー要素は、 <code>binding1 </code>というバインディングで記述された振る舞いをもつことになります。 +</p><p>バインディングには、以下の 5 種類のものを宣言します。 +</p> +<ol><li> コンテント: バインディングが結びつけられた (バインドされた) 要素に追加する、子要素です。 +</li><li> プロパティ: バインドされた要素に追加する、スクリプトからアクセス可能なプロパティです。 +</li><li> メソッド: バインドされた要素に追加する、スクリプトからの呼び出し可能なメソッドです。 +</li><li> イベント: マウスクリックやキーの押下など、バインドされた要素が応答するイベントを設定します。バインディングでは、デフォルトの処理を規定するスクリプトを追加できます。加えて、新しいイベントを定義することも可能です。 +</li><li> スタイル: XBL により定義された要素がもっているカスタムスタイルプロパティです。 +</li></ol> +<h3 id=".E3.83.90.E3.82.A4.E3.83.B3.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.90.E3.82.A4.E3.83.B3.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0.E3.81.AE.E4.BE.8B"> バインディングの例 </h3> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 要素は汎用的なので、カスタムウィジェットの作成に利用するのに適しています。 +(といっても、必要ならば独自に作った要素まで含めて、任意の要素を利用することもできます)。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> タグに <code>class</code> 属性を設定することで、そのクラスに属するボックスだけにバインディングを関連付けることが可能になります。 +以下に例を示します。 +</p> +<pre class="eval"><b>XUL (example.xul):</b> + +<?xml version="1.0"?> +<?xml-stylesheet href="<a class=" external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<?xml-stylesheet href="<a class=" external" rel="freelink">chrome://example/skin/example.css</a>" type="text/css"?> + +<window + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + <box class="okcancelbuttons"/> +</window> + +<b>CSS (example.css):</b> + +box.okcancelbuttons { + -moz-binding: url('<a class=" external" rel="freelink">chrome://example/skin/example.xml#okcancel'</a>); +} + +<b>XBL (example.xml):</b> + +<?xml version="1.0"?> +<bindings xmlns="<span class="nowiki">http://www.mozilla.org/xbl</span>" + xmlns:xul="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + <binding id="okcancel"> + <content> + <xul:button label="OK"/> + <xul:button label="Cancel"/> + </content> + </binding> +</bindings> +</pre> +<p>この例では、ボックスを 1 つだけ持ったウィンドウを生成しています。 +このボックスは、<code>class</code> に <code>okcancelbuttons</code> を値として持つように宣言されています。 +そして、この XUL ファイルのためのスタイルシートでは、<code>okcancelbuttons</code> クラスを持つボックスは、XBL ファイルで定義された専用のバインディングを持っていることを指示しています。 +なお、バインディングの設定は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> だけでなく、独自のカスタムタグを含めて他の任意の要素に対しても使用することが可能です。 +</p><p>次のセクションでは、XBL についてさらに詳しく見ていきますが、 +その前に、上記の例についてまとめておきます。 +この例を実行した場合には、OK ボタンと Cancel ボタンの 2 つのボタンがボックスの中に自動的に追加されることになります。 +</p><p>次のセクションでは、XBL を使ったコンテントの生成について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Property_Files" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Anonymous_Content">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/keyboard_shortcuts/index.html b/files/ja/archive/mozilla/xul/tutorial/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..d6d6c911a5 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/keyboard_shortcuts/index.html @@ -0,0 +1,403 @@ +--- +title: キーボードショートカット +slug: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts +--- +<p> </p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:More_Event_Handlers" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Focus_and_Selection">次のページ »</a></p> +</div> + +<p>キーボードからの入力に反応できるようにするためには、キーボードイベントハンドラを使用することで可能ではあります。 しかしながら、全てのボタンとメニュー項目に、ひとつひとつ設定を行っていくのは退屈な作業だと思います。</p> + +<p><span id="Creating_a_Keyboard_Shortcut"></span></p> + +<h3 id=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.AB.E3.83.83.E3.83.88.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B" name=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.AB.E3.83.83.E3.83.88.E3.82.92.E4.BD.9C.E6.88.90.E3.81.99.E3.82.8B">キーボードショートカットを作成する</h3> + +<p>XUL では、キーボードショートカットを定義する方法を用意しています。 既に、<a href="ja/XUL_Tutorial/Simple_Menu_Bars">メニューを扱ったセクション</a>で、 <code><code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></code> 属性を使用することにより、メニューやメニュー項目を、特定のキーを押すことで<span style="border-bottom: 1px dashed green;" title="activate">活性化</span>できるように定義可能であることを確認しています。 下の例では、 Alt キーを押して F (あるいは、そのプラットフォームで該当するキーの組み合わせ) を押すことにより、File メニューが選択されます。 また、File メニューが開かれたときに、C を押すことによって、Close のメニュー項目を選択することが可能です。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_1.xul">表示</a></p> + +<pre><menubar id="sample-menubar"> + <menu id="file-menu" label="File" accesskey="f"> + <menupopup id="file-popup"> + <menuitem id="close-command" label="Close" accesskey="c"/> + </menupopup> + </menu> +</menubar> +</pre> + +<p><code><code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></code> 属性は、ボタンにも使用できます。 この場合、キーが押されることによってボタンが選択されます。</p> + +<p>しかしながら、もっと一般的なキーボードショートカットを設定したいこともあると思います。 例えば、Contol+C を押すことで、クリップボードにテキストをコピーするといったものです。 通常は、このようなショートカットは、ウィンドウが開かれている間であればいつでも動作しますが、その機能がいつ呼び出されても有効であるとは限りません。 通常、キーボードショートカットはいつでも利用できるようになっているため、スクリプトの方で、そのとき実際に動作を実行するべきかどうかをチェックする必要があります。 例えば、テキストをクリップボードにコピーする場合は、テキストが選択されているときだけ機能するべきです。</p> + +<p><span id="Key_element"></span></p> + +<h4 id="key_.E8.A6.81.E7.B4.A0" name="key_.E8.A6.81.E7.B4.A0">key 要素</h4> + +<p>XUL では <code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> という要素が用意されており、この要素を使って、そのウィンドウでのキーボードショートカットを定義することができます。 この要素には、対応するキーと必要な修飾 (<span style="color: green;">modifier</span>) キー (Shift や Control など) を指定するための属性があります。 以下に例を示します。</p> + +<pre><keyset> + <key id="sample-key" modifiers="shift" key="R"/> +</keyset> +</pre> + +<p>この例では、利用者が Shift キーと R を押したときに活性化されるキーボードショートカットが定義されています。 <code><code id="a-key"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 属性を使用して、どのキーが押されるべきであるのかを指示します。 この例では「R」です。(補足: <code>key</code> は、属性と要素自身の両方の名前になります) この属性には、どのキーが押されるべきかを要求するために、キーと対応する任意の文字を設定することができます。 <code><code id="a-modifiers"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/modifiers">modifiers</a></code></code> 属性を使用して、押さなければならない修飾キーを指定します。 ここには、以下に一覧で示す修飾キーを、空白区切りのリスト形式で指定します。</p> + +<dl> + <dt>alt </dt> + <dd>利用者が Alt キーを押す必要があります。Macintosh では Option キーになります。</dd> + <dt>control </dt> + <dd>利用者が Control キーを押す必要があります。</dd> + <dt>meta </dt> + <dd>利用者が Meta キーを押す必要があります。Macintosh では Command キーになります。</dd> + <dt>shift </dt> + <dd>利用者が Shift キーを押す必要があります。</dd> + <dt>accel </dt> + <dd>利用者が アクセラレータ用のキーを押す必要があります。このキーは、実際には利用者のプラットフォームに応じたキーボードショートカット用のキーになります。通常は、これが使用する値になると思います。</dd> +</dl> + +<p>なお、利用者が使っているキーボードに、全てのキーが存在する必要はありません。 キーがない場合は、実際にそのキーボードにある修飾キーが代わりに割り当てられています。</p> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/keyset" title="keyset">keyset</a></code></code> 要素内に置く必要があります。 この要素は、複数の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素を保持するように設計されており、全てのキー定義をファイル中の 1 つの場所にまとめて置く機能を提供しています。 なお、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素を <code><code><a href="/ja/docs/Mozilla/Tech/XUL/keyset" title="keyset">keyset</a></code></code> 要素の外に置いた場合、その定義は機能しません。</p> + +<p>一般的に、キーボードショートカットに使用するキーは、各プラットフォームで異なっています。 例えば、Windows では Controlキーを使い、Machintosh では Command キーを使用しています。 プラットフォームごとに、別々の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素を定義しなければならないとすれば面倒ですが、幸運なことに、それを解決する方法は存在します。 修飾キー <code>accel</code> は、そのプラットフォームで特にショートカット用として規定されているキーを指しています。 これは、他の修飾キーと全く同じように機能しますが、全てのプラットフォームで同一のキーではありません。</p> + +<p>いくつか例を追加します。</p> + +<pre><keyset> + <key id="copy-key" modifiers="control" key="C"/> + <key id="explore-key" modifiers="control alt" key="E"/> + <key id="paste-key" modifiers="accel" key="V"/> +</keyset> +</pre> + +<p><span id="Keycode_attribute"></span></p> + +<h4 id="keycode_.E5.B1.9E.E6.80.A7" name="keycode_.E5.B1.9E.E6.80.A7">keycode 属性</h4> + +<p><code><code id="a-key"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 属性は、押さなければならないキーを指定するのに使用されますが、表示可能な文字のみしか使用することができません。 しかしながら、文字として指定できない (Enter キーや機能キーのような) キーを参照したい場合もあると思います。 このためには、<code><code id="a-keycode"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/keycode">keycode</a></code></code> という別の属性を使用することになります。</p> + +<p><code><code id="a-keycode"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/keycode">keycode</a></code></code> 属性には、指定したいキーを表す、専用のコードを設定しなければなりません。 設定可能なキーのコードを以下の表に示します。 なお、全てのキーが、全てのキーボードで利用できるわけではありません。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td>VK_CANCEL</td> + <td>VK_BACK</td> + <td>VK_TAB</td> + <td>VK_CLEAR</td> + </tr> + <tr> + <td>VK_RETURN</td> + <td>VK_ENTER</td> + <td>VK_SHIFT</td> + <td>VK_CONTROL</td> + </tr> + <tr> + <td>VK_ALT</td> + <td>VK_PAUSE</td> + <td>VK_CAPS_LOCK</td> + <td>VK_ESCAPE</td> + </tr> + <tr> + <td>VK_SPACE</td> + <td>VK_PAGE_UP</td> + <td>VK_PAGE_DOWN</td> + <td>VK_END</td> + </tr> + <tr> + <td>VK_HOME</td> + <td>VK_LEFT</td> + <td>VK_UP</td> + <td>VK_RIGHT</td> + </tr> + <tr> + <td>VK_DOWN</td> + <td>VK_PRINTSCREEN</td> + <td>VK_INSERT</td> + <td>VK_DELETE</td> + </tr> + <tr> + <td>VK_0</td> + <td>VK_1</td> + <td>VK_2</td> + <td>VK_3</td> + </tr> + <tr> + <td>VK_4</td> + <td>VK_5</td> + <td>VK_6</td> + <td>VK_7</td> + </tr> + <tr> + <td>VK_8</td> + <td>VK_9</td> + <td>VK_SEMICOLON</td> + <td>VK_EQUALS</td> + </tr> + <tr> + <td>VK_A</td> + <td>VK_B</td> + <td>VK_C</td> + <td>VK_D</td> + </tr> + <tr> + <td>VK_E</td> + <td>VK_F</td> + <td>VK_G</td> + <td>VK_H</td> + </tr> + <tr> + <td>VK_I</td> + <td>VK_J</td> + <td>VK_K</td> + <td>VK_L</td> + </tr> + <tr> + <td>VK_M</td> + <td>VK_N</td> + <td>VK_O</td> + <td>VK_P</td> + </tr> + <tr> + <td>VK_Q</td> + <td>VK_R</td> + <td>VK_S</td> + <td>VK_T</td> + </tr> + <tr> + <td>VK_U</td> + <td>VK_V</td> + <td>VK_W</td> + <td>VK_X</td> + </tr> + <tr> + <td>VK_Y</td> + <td>VK_Z</td> + <td>VK_NUMPAD0</td> + <td>VK_NUMPAD1</td> + </tr> + <tr> + <td>VK_NUMPAD2</td> + <td>VK_NUMPAD3</td> + <td>VK_NUMPAD4</td> + <td>VK_NUMPAD5</td> + </tr> + <tr> + <td>VK_NUMPAD6</td> + <td>VK_NUMPAD7</td> + <td>VK_NUMPAD8</td> + <td>VK_NUMPAD9</td> + </tr> + <tr> + <td>VK_MULTIPLY</td> + <td>VK_ADD</td> + <td>VK_SEPARATOR</td> + <td>VK_SUBTRACT</td> + </tr> + <tr> + <td>VK_DECIMAL</td> + <td>VK_DIVIDE</td> + <td>VK_F1</td> + <td>VK_F2</td> + </tr> + <tr> + <td>VK_F3</td> + <td>VK_F4</td> + <td>VK_F5</td> + <td>VK_F6</td> + </tr> + <tr> + <td>VK_F7</td> + <td>VK_F8</td> + <td>VK_F9</td> + <td>VK_F10</td> + </tr> + <tr> + <td>VK_F11</td> + <td>VK_F12</td> + <td>VK_F13</td> + <td>VK_F14</td> + </tr> + <tr> + <td>VK_F15</td> + <td>VK_F16</td> + <td>VK_F17</td> + <td>VK_F18</td> + </tr> + <tr> + <td>VK_F19</td> + <td>VK_F20</td> + <td>VK_F21</td> + <td>VK_F22</td> + </tr> + <tr> + <td>VK_F23</td> + <td>VK_F24</td> + <td>VK_NUM_LOCK</td> + <td>VK_SCROLL_LOCK</td> + </tr> + <tr> + <td>VK_COMMA</td> + <td>VK_PERIOD</td> + <td>VK_SLASH</td> + <td>VK_BACK_QUOTE</td> + </tr> + <tr> + <td>VK_OPEN_BRACKET</td> + <td>VK_BACK_SLASH</td> + <td>VK_CLOSE_BRACKET</td> + <td>VK_QUOTE</td> + </tr> + <tr> + <td>VK_HELP</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> + +<p>例えば、利用者が Alt と F5 を押したときに活性化されるショートカットを作るには、次のようにします。</p> + +<pre><keyset> + <key id="test-key" modifiers="alt" keycode="VK_F5"/> +</keyset> +</pre> + +<p>さらに、いくつかのキーボードショートカットの例を以下に示します。</p> + +<pre><keyset> + <key id="copy-key" modifiers="accel" key="C"/> + <key id="find-key" keycode="VK_F3"/> + <key id="switch-key" modifiers="control alt" key="1"/> +</keyset> +</pre> + +<p>最初のキー定義は、利用者がそのプラットフォーム固有のショートカットキーと C を押した時に呼び出されます。 2 つ目は、利用者が F3 キーを押した時に呼び出されます。 3 つ目は、Control キー、Alt キーと 1 を押した時に呼び出されます。 もし、キーボードのメイン部分とテンキーの数字キーを区別したいのであれば、VK_NUMPAD 系のキーコード (例えば VK_NUMPAD1) を使用できます。</p> + +<div class="note"> +<p>アプリケーションでキーボードショートカットとして使用するキーを選択するときの注意事項や詳細情報のために、 <a class="external" href="http://www.mozilla-japan.org/access/keyboard/">Mozilla キーボード・プラン FAQ とクロスリファレンス</a>を参照してください。</p> +</div> + +<p><span id="Using_the_Keyboard_Shortcuts"></span></p> + +<h3 id=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.AB.E3.83.83.E3.83.88.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B" name=".E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.AB.E3.83.83.E3.83.88.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B">キーボードショートカットを使用する</h3> + +<p>キーボードショートカットを定義する方法は分かったので、次はそれをどのように使えばいいのかを見ていくことにします。 このための方法としては 2つあります。 1 つ目は、最も単純な方法で、keypress イベントのハンドラを <code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素に追加するだけです。 利用者がそのキーを押したとき、スクリプトが呼び出されます。 以下に例を示します。</p> + +<pre><keyset> + <key id="copy-key" modifiers="accel" key="C" onkeypress="DoCopy();"/> +</keyset> +</pre> + +<p>利用者が、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素で指定されたキーを押すと、関数 DoCopy が呼び出されます。 この例では、クリップボードにコピーするキーになります (Windows の場合は Control+C です)。 これは、ウィンドウが開かれている間、ずっと動作することになります。 <code>DoCopy</code> 関数は、テキストが選択されているか確認してから、テキストをクリップボードへとコピーする必要があります。 なお、テキスト入力欄には、クリップボードショートカットが組み込まれているため、各自で実装する必要がないことを補足しておきます。</p> + +<p><span id="Assigning_a_keyboard_shortcut_on_a_menu"></span></p> + +<h4 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AB.E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.AB.E3.83.83.E3.83.88.E3.82.92.E9.96.A2.E9.80.A3.E3.81.A5.E3.81.91.E3.82.8B" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AB.E3.82.AD.E3.83.BC.E3.83.9C.E3.83.BC.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.AB.E3.83.83.E3.83.88.E3.82.92.E9.96.A2.E9.80.A3.E3.81.A5.E3.81.91.E3.82.8B">メニューにキーボードショートカットを関連づける</h4> + +<p>メニューにも存在するコマンドを実行するキーボードショートカットを割り当てたい場合は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素を、直接メニューコマンドと関連づける事ができます。 このためには、<code><code id="a-key"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 属性を、関連づける <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> に追加してください。 値には、使用したい <code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素の <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> を設定します。 以下に、記述例を示します。</p> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_keyshort_2.xul">表示</a></p> + +<pre><keyset> + <key id="paste-key" modifiers="accel" key="V" + oncommand="alert('Paste invoked')"/> +</keyset> + +<menubar id="sample-menubar"> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem id="paste-command" + accesskey="p" key="paste-key" + label="Paste" oncommand="alert('Paste invoked')"/> + </menupopup> + </menu> +</menubar> +</pre> + +<div class="float-right"><img alt="画像:keyshort1.jpg"></div> + +<p>この例では、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> の <code><code id="a-key"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/key">key</a></code></code> 属性は、この例では <code>paste-key</code> に設定されています。これは、対応するキー定義の <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> と同じです。 この方法によって、付加的なキーについても同様に、キーボードショートカットを定義して、任意の数のメニュー項目に対応させることが可能です。</p> + +<p>画像から、Paste メニューコマンドを呼び出すのに、Control と V キーを押せばよいことを示すテキストが、そのメニューコマンドの横に置かれていることが分かると思います。 これは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素の <code><code id="a-modifiers"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/modifiers">modifiers</a></code></code> を元に追加されます。 メニューと結びつけたキーボードショートカットは、メニューが開いていないときでも機能します。</p> + +<p>キー定義の付加的な特徴の 1 つとして、簡単に無効状態にできるということがあります。 そのためには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/key" title="key">key</a></code></code> 要素に <code><code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></code> 属性を追加して、その値を true に設定します。 これでキーボードショートカットは無効になり、呼び出されなくなります。 スクリプトから、状況に応じて動的に <code><code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></code> 属性を変更すると便利です。</p> + +<div class="highlight"> +<p><span id="Our_find_files_example"></span></p> + +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B">ファイル検索ダイアログの例</h4> + +<p>それでは、ファイル検索ダイアログにキーボードショートカットを追加してみましょう。 4 つのキーボードショートカットを追加します。 Cut、Copy、Paste コマンドのそれぞれに 1 つと、ユーザが Escape キーを押したときにウィンドウを閉じるためのコマンドにも 1つです。</p> + +<pre class="eval"><span class="highlightred"><keyset> + <key id="cut_cmd" modifiers="accel" key="X"/> + <key id="copy_cmd" modifiers="accel" key="C"/> + <key id="paste_cmd" modifiers="accel" key="V"/> + <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> +</keyset></span> + +<vbox flex="1"> + <toolbox> + <menubar id="findfiles-menubar"> + <menu id="file-menu" label="File" accesskey="f"> + <menupopup id="file-popup"> + <menuitem label="Open Search..." accesskey="o"/> + <menuitem label="Save Search..." accesskey="s"/> + <menuseparator/> + <menuitem label="Close" accesskey="c" <span class="highlightred">key="close_cmd"</span> + oncommand="window.close();"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem label="Cut" accesskey="t" <span class="highlightred">key="cut_cmd"</span>/> + <menuitem label="Copy" accesskey="c" <span class="highlightred">key="copy_cmd"</span>/> + <menuitem label="Paste" accesskey="p" <span class="highlightred">key="paste_cmd"</span> disabled="true"/> + </menupopup> + </menu> +</pre> + +<p>これでコマンドを活性化するのにこれらのショートカットを使うことができます。 といっても、まだスクリプトは書いていないため、クリップボード系のコマンドは、実行されたとしても何もしません。</p> + +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-keyshort.xul">表示</a></p> +</div> + +<p><span id="Key_Events"></span></p> + +<h3 id=".E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88" name=".E3.82.AD.E3.83.BC.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88">キーイベント</h3> + +<p>キーボード入力関連のイベントは 3 つあります。 これらは、キーと機能を関連づけるために、上で説明した方法が適用できない場合に用いられることになります。 これらのイベントについて以下に記述します。</p> + +<dl> + <dt>keypress </dt> + <dd>要素がフォーカスを持っていて、キーが押されて離されたときに呼び出されます。フィールドに入力された文字が、許可されたものかどうかをチェックするために使用することができます。</dd> + <dt>keydown </dt> + <dd>要素がフォーカスを持っていて、キーが押されたときに呼び出されます。このイベントは、キーが押された直後に、まだ離されていない状態でも呼び出されることに注意してください。</dd> + <dt>keyup </dt> + <dd>要素がフォーカスを持っていて、キーが離されたときに呼び出されます。</dd> +</dl> + +<p><span style="color: darkgreen; background: #ef9;">【訳注: 日本語入力が ON のときは、いろいろ簡単ではないようです】</span></p> + +<p>キーイベントは、フォーカスを持つ要素へのみ送信されます。 通常、テキスト入力欄、ボタン、チェックボックスなどが該当します。 フォーカスを持つ要素がない場合には、キーイベントは、代わりに XUL 文書自身に対して送信されます。 この場合、イベントリスナーを <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> タグに追加することができます。 といっても、通常は、広くキーに応答したいのであれば、先に述べたようにキーボードショートカットを使います。</p> + +<p>キー<a href="ja/DOM/event">イベントオブジェクト</a>は、押されたキーを保持する 2 つのプロパティを持っています。 <code><a href="ja/DOM/event.keyCode">keyCode</a></code> プロパティは、キーコードを保持します。 目的のキーが押されたかを調べるためには、このセクションで既出のキーコード表で示されている定数のいずれかと比較することになります。 <code><a href="ja/DOM/event.charCode">charCode</a></code> は表示可能な文字の場合に用いられて、押されたキーの文字コードを保持します。</p> + +<p>次のセクションでは、フォーカスや選択の扱い方について学びます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:More_Event_Handlers" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Focus_and_Selection">次のページ »</a></p> +</div> + +<p> </p> + +<div class="noinclude"> </div> diff --git a/files/ja/archive/mozilla/xul/tutorial/list_controls/index.html b/files/ja/archive/mozilla/xul/tutorial/list_controls/index.html new file mode 100644 index 0000000000..bc9cf46837 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/list_controls/index.html @@ -0,0 +1,180 @@ +--- +title: リストコントロール +slug: Archive/Mozilla/XUL/Tutorial/List_Controls +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls +--- +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Numeric_Controls" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Progress_Meters">次のページ »</a></p> +</div></div> + +<p>XUL には、リストボックスを作成するための要素が何種類かあります。</p> + + + + + + + +<h2 id="List_Boxes" name="List_Boxes">リストボックス</h2> + +<p>リストボックスは、複数の項目をリストとして表示するために使用されます。 利用者はリストから項目を 1 つ選択できます。</p> + +<p>XUL には、リストを作成する要素が 2 種類用意されています。 <code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code> 要素は、複数行のリストボックスを作成するために、また <code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> 要素は、ドロップダウン・リストボックスを作成するのに使用されます。 これらは、両方の機能を持つ、HTML の <code>select</code> 要素と同様に動作しますが、 XUL 要素には、さらに機能が追加されています。</p> +<p>最も単純なリストボックスは、<code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code> 要素を使用してボックスを作成し、リストのそれぞれの項目は <code><a href="/ja/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> 要素を使用して作成します。 例えば、下に示すリストボックスには 4 つの行があり、各行は 1 つの項目を持っています。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_1.xul">表示</a></p> + +<div class="float-right"><img src="/@api/deki/files/743/=Lists1.png"></div> + +<pre class="brush:xml"><listbox> + <listitem label="Butter Pecan" /> + <listitem label="Chocolate Chip" /> + <listitem label="Raspberry Ripple" /> + <listitem label="Squash Swirl" /> +</listbox> +</pre> + + +<p>HTML の <code>option</code> 要素と同様に、<code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> 属性を使用してそれぞれの項目に値を設定することができます。 設定した値はスクリプトで使用できます。 リストボックスは、デフォルトでは適切な大きさになりますが、<code id="a-rows"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code> 属性を使用して、大きさを制御することも可能です。 この属性には、リストボックスに表示させたい行数を設定します。 利用者が表示しきれない行を表示できるように、スクロールバーが表示されるはずです。</p> + +<p>次の例は、これらの追加機能を示します。</p> +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_2.xul">表示</a></p> + +<pre class="brush:xml"><listbox rows="3"> + <listitem label="Butter Pecan" value="bpecan" /> + <listitem label="Chocolate Chip" value="chocchip" /> + <listitem label="Raspberry Ripple" value="raspripple" /> + <listitem label="Squash Swirl" value="squash" /> +</listbox> +</pre> + + +<p>この例では、一度に 3 行しか表示されないように変更が加えられました。 また、リストのそれぞれの項目に対して値を設定しています。 リストボックスには多くの追加機能がありますが、それについては後述します。</p> + + + + + + +<h2 id="Multi-Column_List_Boxes" name="Multi-Column_List_Boxes">複数列を持つリストボックス</h2> + +<p>リストボックスは複数列表示もサポートします。 各セルの内容は通常テキストのみが使用されますが、任意のものを含めてもかまいません。 利用者がリスト内の項目を選択すると行全体が選択されます。 セル 1 つだけを選択することはできません。</p> + +<p>リストボックスの列の指定には 2 種類のタグが用いられます。 <code><a href="/ja/docs/Mozilla/Tech/XUL/listcols" title="listcols">listcols</a></code> 要素は、列についての情報を保持するために使用され、 個々の列単位に指定する <code><a href="/ja/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code> 要素を囲います。 なお、一つの列に対して、一つの <code><a href="/ja/docs/Mozilla/Tech/XUL/listcol" title="listcol">listcol</a></code> 要素が必要になります。</p> + +<p>行内の個々のセルには、<code><a href="/ja/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> 要素を用います。 もし、3 列作りたい場合は、各 <code><a href="/ja/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> 内に、3 つずつ <code><a href="/ja/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> 要素が必要になります。 セルにテキストの内容を指定するには、<code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性を <code><a href="/ja/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> 要素に設定します。 1 列しか無い単純な場合は、前に示したリストボックスの例のように、<code><a href="/ja/docs/Mozilla/Tech/XUL/listcell" title="listcell">listcell</a></code> 要素を全く用いないで、 <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性を直接 <code><a href="/ja/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> 要素に設定してもかまいません。</p> + +<p>次の例は 3 行 2 列のリストボックスです。</p> +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_3.xul">表示</a></p> + + +<pre class="brush:xml"><listbox> + <listcols> + <listcol/> + <listcol/> + </listcols> + <listitem> + <listcell label="George" /> + <listcell label="House Painter" /> + </listitem> + <listitem> + <listcell label="Mary Ellen" /> + <listcell label="Candle Maker" /> + </listitem> + <listitem> + <listcell label="Roger" /> + <listcell label="Swashbuckler" /> + </listitem> +</listbox> +</pre> + + + + + + +<h2 id="Header_Rows" name="Header_Rows">見出し行</h2> +<p>リストボックスには、見出しとして特別な行を与えることができます。 これは通常の行と類似していますが、表示のされ方が異なります。 これを、列の見出しとして使うことが可能です。 このために 2 種類の新しい要素を使用します。</p> +<p>普通の行を表すのに <code><a href="/ja/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code> 要素を利用するのと同じ要領で、見出し行には <code><a href="/ja/docs/Mozilla/Tech/XUL/listhead" title="listhead">listhead</a></code> 要素を用いることが出来ます。 ただし、見出し行は普通の行とは異なるため、スクリプトから 1 行目を取得する際には無視されます。</p> +<p>見出し行の各セルには <code><a href="/ja/docs/Mozilla/Tech/XUL/listheader" title="listheader">listheader</a></code> 要素が利用されます。 セルに対するラベルは <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性で設定します。</p> +<p>前の例に見出し行を付加したものを示します。</p> +<p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_4.xul">表示</a></p> +<pre class="brush:xml"><listbox> + <listhead> + <listheader label="Name" /> + <listheader label="Occupation" /> + </listhead> + + <listcols> + <listcol/> + <listcol flex="1" /> + </listcols> + <listitem> + <listcell label="George" /> + <listcell label="House Painter" /> + </listitem> + <listitem> + <listcell label="Mary Ellen" /> + <listcell label="Candle Maker" /> + </listitem> + <listitem> + <listcell label="Roger" /> + <listcell label="Swashbuckler" /> + </listitem> +</listbox> +</pre> +<div class="float-right"> + <img src="/@api/deki/files/772/=Morelists1.png"></div> +<p>この例では、列を伸縮可能 (<span style="color: green;">flexible</span>) にするため <code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code> 属性が利用されています。 この属性については、<a href="/ja/docs/XUL/Tutorial/Using_Spacers">後のセクション</a>で述べますが、ここでは水平方向の余った空間を、この列が占めるようにするために指定しています。 ウィンドウをリサイズすることで、ウィンドウの幅に追随して、列が伸縮するのを見ることが出来ます。 幅を狭めるとラベルが自動的に短縮されて、一部が省略符号 (...) にされます。 この省略符号化を無効にしたい場合は、セルや項目の <code id="a-crop"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/crop">crop</a></code> 属性を <code>none</code> に設定します。</p> + + + + + + +<h2 id="Drop-down_Lists" name="Drop-down_Lists">ドロップダウンリスト</h2> +<p>HTML では、<code>select</code> 要素を使用してドロップダウンリストを作成できます。 利用者はテキストボックスに単一の選択された内容を見ることができ、テキストボックスの横にある矢印か、それと類似のボタンをクリックすることで、別の選択肢を選ぶことができます。 このとき選択肢はポップアップウィンドウに表示されます。 XUL にも、この目的で使用可能な <code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> 要素があります。 この要素は、テキストボックスとその横のボタンから構成されています。 <code>menulist</code> の名称は、それが選択肢を含んだメニューをポップアップする事から来ています。</p> +<p>ドロップダウンボックスを記述するには、3 つの要素が必要です。 最初は、<code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code> 要素で、これはボタンが横にあるテキストボックスを作成します。 2 番目は <code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code> で、ボタンがクリックされたときに表示されるポップアップウィンドウを作成します。3 番目は <code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> で、個々の選択肢を作成します。</p> +<p>構文を以下の例で示します。</p> +<p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_5.xul">表示</a></p> +<div class="float-right"> + <img src="/@api/deki/files/732/=Inputs2.png"></div> +<pre class="brush:xml"><menulist label="Bus"> + <menupopup> + <menuitem label="Car" /> + <menuitem label="Taxi" /> + <menuitem label="Bus" selected="true" /> + <menuitem label="Train" /> + </menupopup> +</menulist> +</pre> +<p>このメニューリストには、それぞれの <code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code> 要素で規定された、4 つの選択肢があります。 選択肢を表示するには、メニューリストの矢印ボタンをクリックします。 どれか 1 つが選択されると、選択されたものがメニューリストに表示されます。 <code id="a-selected"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code> 属性は、デフォルトで選択される値を指定するのに使用されます。</p> + + + + + + +<h3 id="Editable_menulist" name="Editable_menulist">編集可能なメニューリスト</h3> +<p>デフォルトでは、リストからの選択しかできないため、選択肢以外の値を直接入力する事はできません。 メニューリストの変種には、入力欄の編集が可能なものもあります。 例えば、ブラウザの URL 欄は以前に入力した URL を選択するドロップダウンが表示されますが、それを自分で直接入力することもできます。</p> +<p>編集可能なメニューリストを作成するには、次の例のように <code id="a-editable"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/editable">editable</a></code> 属性を追加します。</p> +<p><span id="%E4%BE%8B_6"><a id="%E4%BE%8B_6"></a><strong>例 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_lists_6.xul">表示</a></p> +<pre class="brush:xml"><menulist editable="true"> + <menupopup> + <menuitem label="www.mozilla.org" /> + <menuitem label="www.xulplanet.com" /> + <menuitem label="www.dmoz.org" /> + </menupopup> +</menulist> +</pre> + +<p>ここで作成された URL 欄は、<span style="border-bottom: 1px dashed green;" title="pre-populated">既登録</span>の選択肢 3 つがあるため、利用者はこれらから選択することが出来ますが、自分が設定したい値を欄に直接入力する事も可能です。 なお利用者が入力した値は、新しい選択肢としては追加されません。 この例では <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性が使用されていないので、デフォルト値は空白です。</p> +<p>次のセクションでは、プログレスメーターの作成について学びます。</p> + +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Numeric_Controls" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Progress_Meters">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/localization/index.html b/files/ja/archive/mozilla/xul/tutorial/localization/index.html new file mode 100644 index 0000000000..276474926f --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/localization/index.html @@ -0,0 +1,337 @@ +--- +title: ローカライズ (地域化) +slug: Archive/Mozilla/XUL/Tutorial/Localization +tags: + - Internationalization + - Localization + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Localization +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_a_Skin" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Property_Files">次のページ »</a></p> +</div> +<p>XUL と XML には、実体 (<span style="color: green;">entity</span>)という仕組みがあり、これを利用すればアプリケーションの<span style="border-bottom: 1px dashed green;" title="localization">ローカライズ (地域化)</span>を簡単に行うことができます。 +</p> +<h3 id=".E5.AE.9F.E4.BD.93.E5.AE.A3.E8.A8.80.E3.81.A8.E5.AE.9F.E4.BD.93.E5.8F.82.E7.85.A7" name=".E5.AE.9F.E4.BD.93.E5.AE.A3.E8.A8.80.E3.81.A8.E5.AE.9F.E4.BD.93.E5.8F.82.E7.85.A7"> 実体宣言と実体参照 </h3> +<p>一般的に、多くのアプリケーションでは、インターフェイス中の文字列を他の言語に翻訳した版を、可能な限り簡単に構築できるような工夫がされています。 +このためには、通常は文字列のテーブルを対応する言語ごとに作成します。 +つまり、テキストを直接アプリケーションにハードコーディングする代わりに、 +文字列テーブルを参照するために使用する短いテキストだけを置くようにします。 <a href="ja/XML">XML</a> の提供する仕組みである<span style="border-bottom: 1px dashed green;" title="entity">実体</span>も、同様の目的に利用できます。 +</p><p><a href="ja/HTML">HTML</a> の利用経験があれば、実体については既にお馴染みのはずです。 +例えば、HTML の中に不等号の記号 ('<' と '>') を記述するために使用するコードである <code>&lt;</code> と <code>&gt;</code> は実体を参照する例になります。 +XML には、独自の実体を宣言するための構文があり、これを利用してテキストの列を実体として宣言できます。 +それらは実体参照を使用して参照され、宣言した値と置換されることになります。 +実体参照は、テキストが置ける場所ならば、属性値も含めてどこにでも置くことが可能です。 +以下は、ボタンに対して実体参照を使用する例になります。 +</p> +<pre><button label="&findLabel;"/> +</pre> +<p>実体参照 <code>&findLabel;</code> に対応する実体の値が、ラベルに表示されるテキストになります。 +ローカライズをするためには、サポートする各言語ごとに、その言語によって実体を宣言したファイルを作成します。 +例えば、英語の場合は、<code>&findLabel;</code>に対応する実体は、テキスト "Find" が値になるように宣言します。 +</p> +<h3 id="DTD_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB" name="DTD_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB"> DTD ファイル </h3> +<p>実体は、DTD (<i>Document Type Declaration</i>) ファイルで宣言します。 +通常、DTD ファイルは、特定 (同じ種類) の XML ファイルに対して構文と意味内容を宣言するために使用されますが、 +実体を宣言するためにも利用できます。 +Mozilla の chrome システムでは、DTD ファイルは、<tt>locales</tt> サブディレクトリに置かれています。 +なお、通常は、1 つの XUL ファイルに対して 1 つの DTD ファイル (拡張子が <tt>.dtd</tt> のファイル) を作成します。 +</p><p>chrome ディレクトリの中を探していくと、利用している言語に対応したアーカイブが見つかるはずです (英語の場合は、デフォルトでは <code>en-US.jar</code> です)。 +ここには、例えば、 米国英語 (en-US) とフランス語 (fr) といったように、複数の言語に対応するために、複数のロケールファイルが置かれていることもあります。 +これらのアーカイブの中には、それぞれのウインドウのためのローカライズされたテキストが入っています。 +また、このアーカイブの構造は、<a href="ja/XUL_Tutorial/Creating_a_Skin">スキン</a>で使用しているディレクトリ構造と非常に良く似たものになります。 +</p><p>このアーカイブの中は、実体宣言を記述した DTD ファイルを置きます。 +また、DTD ファイルは、各 XUL ファイルに対して 1 つずつ作成し、ファイル名は、通常 <tt>.dtd</tt> 拡張子を除いて同じにします。 +したがって、ファイル検索ダイアログの場合は、<tt>findfile.dtd</tt> という名前のファイルが必要になります。 +</p><p>なお、インストールされていない chrome ファイルに対してなら、 +DTD ファイルは単に XUL ファイルと同じディレクトリに置いておいても構いません。 +</p> +<div class="note"><b>注意:</b> 非 ASCII 文字を含む DTD ファイルは、UTF-8 でエンコードしなければなりません。言い換えると (<a class="external" href="http://www.mozdev.org/notes/l10n/unicode/editors-en.html">BOM なしの</a>) UTF-8 で保存する必要があります。 詳細は、<a class="external" href="http://www.mozilla-japan.org/projects/l10n/mlp_chrome.html#text">Mozilla の言語パック</a> を参照してください。</div> +<p>XUL に対して DTD ファイルを作成した場合には、 XUL ファイルにその DTD ファイルを利用するよう指示する記述を加える必要があります。 +このために、以下の形式の行を XUL ファイルの先頭近くに加えてください。 +これを忘れた場合、実体の参照ができないためエラーが発生します。 +</p> +<pre><!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd"> +</pre> +<p>この行によって、この XUL ファイルでは、URL で指定したファイルを DTD として利用するように指示します。 +この場合は、<tt>findfile.dtd</tt> を DTD ファイルとして利用することを宣言しています。 +通常、この行は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 要素の直前に置くことになります。 +</p> +<h3 id=".E5.AE.9F.E4.BD.93.E5.AE.A3.E8.A8.80" name=".E5.AE.9F.E4.BD.93.E5.AE.A3.E8.A8.80"> 実体宣言 </h3> +<p>実体は、以下に示すような簡単な構文で宣言します。 +</p> +<pre><!ENTITY findLabel "Find"> +</pre> +<p>この例では、<code>findLabel</code> という名前の実体を、「Find」という値で宣言しています。 +これによって、XUL ファイル中ならばどこであっても「<code>&findLabel;</code>」というテキストが現れた場合は、「Find」というテキストに置き換えられるようになります。 +実体宣言の場合は (空要素で行うように) 最後にスラッシュを置かないことに注意してください。 +別の言語用の DTD ファイルでは、下記のように、その言語のテキストを代わりに置くことになります。 +</p> +<pre class="eval"><b>日本語用:</b> +<!ENTITY findLabel "検索"> +</pre> +<p>例えば、以下のテキストは... +</p> +<pre><description value="&findLabel;"/> +</pre> +<p>以下のように変換されます。 +</p> +<pre class="eval"><b>英語版:</b> +<description value="Find"/> + +<b>日本語版:</b> +<description value="検索"/> +</pre> +<p>上記のように、ローカライズをするためには、インターフェイスに含まれている各ラベルやテキストに対して実体を宣言していくことになります。 +このため XUL ファイルには、直接表示されるテキストは、一切含めるべきではありません。 +</p><p>また、実体は、テキストラベルに加えて、言語環境が変わると異なる可能性がある任意の値に対して使用しておく必要があります。 +具体的には、<a href="ja/XUL_Tutorial/Keyboard_Shortcuts">アクセスキーやキーボードショートカット</a>などが考えられます。 +</p> +<pre class="eval"> <b>XUL</b> + <menuitem label="&undo.label;" accesskey="&undo.key;"/> + <b>DTD</b> + <!ENTITY undo.label "Undo"> + <!ENTITY undo.key "u"> +</pre> +<p>上記の例では、Undo メニュー項目のラベルとアクセスキーの 2 つに実体が使用されています。 +</p> +<h3 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B"> ファイル検索ダイアログを変更する </h3> +<div class="highlight"> +<p>それでは、ここまでの内容をまとめて適用する方法を確認するために、 +ファイル検索ダイアログを変更してみることにします。 +このために、すべてのテキスト文字列を DTD を使用するように変更します。 +変更後の XUL ファイル全体を下記に示します。 +今回の変更部分は赤い文字で示されています。 +</p> +<pre class="eval"><?xml version="1.0"?> + +<?xml-stylesheet href="<a class=" external" rel="freelink">chrome://global/skin/</a>" type="text/css"?> +<?xml-stylesheet href="findfile.css" type="text/css"?> + +<span class="highlightred"><!DOCTYPE window SYSTEM "<a class=" external" rel="freelink">chrome://findfile/locale/findfile.dtd</a>"></span> + +<window + id="findfile-window" + title="<span class="highlightred">&findWindow.title;</span>" + persist="screenX screenY width height" + orient="horizontal" + onload="initSearchList()" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> + +<script src="findfile.js"/> + +<popupset> + <popup id="editpopup"> + <menuitem label="Cut" accesskey="<span class="highlightred">&cutCmd.accesskey;</span>"/> + <menuitem label="Copy" accesskey="<span class="highlightred">&copyCmd.accesskey;</span>"/> + <menuitem label="Paste" accesskey="<span class="highlightred">&pasteCmd.accesskey;</span>" disabled="true"/> + </popup> +</popupset> + +<keyset> + <key id="cut_cmd" modifiers="accel" key="<span class="highlightred">&cutCmd.commandkey;</span>"/> + <key id="copy_cmd" modifiers="accel" key="<span class="highlightred">&copyCmd.commandkey;</span>"/> + <key id="paste_cmd" modifiers="accel" key="<span class="highlightred">&pasteCmd.commandkey;</span>"/> + <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/> +</keyset> + +<vbox flex="1"> + + <toolbox> + + <menubar id="findfiles-menubar"> + <menu id="file-menu" label="<span class="highlightred">&fileMenu.label;</span>" + accesskey="<span class="highlightred">&fileMenu.accesskey;</span>"> + <menupopup id="file-popup"> + <menuitem label="<span class="highlightred">&openCmd.label;</span>" + accesskey="<span class="highlightred">&openCmd.accesskey;</span>"/> + <menuitem label="<span class="highlightred">&saveCmd.label;</span>" + accesskey="<span class="highlightred">&saveCmd.accesskey;</span>"/> + <menuseparator/> + <menuitem label="<span class="highlightred">&closeCmd.label;</span>" + accesskey="<span class="highlightred">&closeCmd.accesskey;" key="close_cmd" oncommand="window.close();</span>"/> + </menupopup> + </menu> + <menu id="edit-menu" label="<span class="highlightred">&editMenu.label;</span>" + accesskey="<span class="highlightred">&editMenu.accesskey;</span>"> + <menupopup id="edit-popup"> + <menuitem label="<span class="highlightred">&cutCmd.label;</span>" + accesskey="<span class="highlightred">&cutCmd.accesskey;</span>" key="cut_cmd"/> + <menuitem label="<span class="highlightred">&copyCmd.label;</span>" + accesskey="<span class="highlightred">&copyCmd.accesskey;</span>" key="copy_cmd"/> + <menuitem label="<span class="highlightred">&pasteCmd.label;</span>" + accesskey="<span class="highlightred">&pasteCmd.accesskey;</span>" key="paste_cmd" disabled="true"/> + </menupopup> + </menu> + </menubar> + + <toolbar id="findfiles-toolbar"> + <toolbarbutton id="opensearch" label="<span class="highlightred">&openCmdToolbar.label;</span>"/> + <toolbarbutton id="savesearch" label="<span class="highlightred">&saveCmdToolbar.label;</span>"/> + </toolbar> + </toolbox> + + <tabbox> + <tabs> + <tab label="<span class="highlightred">&searchTab;</span>" selected="true"/> + <tab label="<span class="highlightred">&optionsTab;</span>"/> + </tabs> + + <tabpanels> + + <tabpanel id="searchpanel" orient="vertical" context="editpopup"> + + <description> + <span class="highlightred">&findDescription;</span> + </description> + + <spacer class="titlespace"/> + + <groupbox orient="horizontal"> + <caption label="<span class="highlightred">&findCriteria;</span>"/> + + <menulist id="searchtype"> + <menupopup> + <menuitem label="<span class="highlightred">&type.name;</span>"/> + <menuitem label="<span class="highlightred">&type.size;</span>"/> + <menuitem label="<span class="highlightred">&type.date;</span>"/> + </menupopup> + </menulist> + <spacer class="springspace"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="<span class="highlightred">&mode.is;</span>"/> + <menuitem label="<span class="highlightred">&mode.isnot;</span>"/> + </menupopup> + </menulist> + <spacer class="springspace"/> + + <menulist id="find-text" flex="1" + editable="true" + datasources="<a class=" external" rel="freelink">file:///mozilla/recents.rdf</a>" + ref="<span class="nowiki">http://www.xulplanet.com/rdf/recent/all</span>"> + <template> + <menupopup> + <menuitem label="<span class="nowiki">rdf:http://www.xulplanet.com/rdf/recent#Label</span>" uri="rdf:*"/> + </menupopup> + </template> + </menulist> + + </groupbox> + + </tabpanel> + + <tabpanel id="optionspanel" orient="vertical"> + <checkbox id="casecheck" label="<span class="highlightred">&casesensitive;</span>"/> + <checkbox id="wordscheck" label="<span class="highlightred">&matchfilename;</span>"/> + </tabpanel> + + </tabpanels> + </tabbox> + + <tree id="results" style="display: none;" flex="1"> + <treecols> + <treecol id="name" label="<span class="highlightred">&results.filename;</span>" flex="1"/> + <treecol id="location" label="<span class="highlightred">&results.location;</span>" flex="2"/> + <treecol id="size" label="<span class="highlightred">&results.size;</span>" flex="1"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="mozilla"/> + <treecell label="/usr/local"/> + <treecell label="<span class="highlightred">&bytes.before;</span>2520<span class="highlightred">&bytes.after;</span>"/> + </treerow> + </treeitem> + </treechildren> + </tree> + + <splitter id="splitbar" resizeafter="grow" style="display: none;"/> + + <spacer class="titlespace"/> + + <hbox> + <progressmeter id="progmeter" value="50%" style="display: none;"/> + <spacer flex="1"/> + <button id="find-button" label="<span class="highlightred">&button.find;</span>" + oncommand="doFind()"/> + <button id="cancel-button" label="<span class="highlightred">&button.cancel;</span>" + oncommand="window.close();"/> + </hbox> +</vbox> + +</window> +</pre> +<p>各テキスト文字列は、実体参照に置き換えられています。 +また、DTD ファイルを読み込む指定は、XUL ファイルの先頭近くで行われています。 +今回追加した各実体は、この DTD ファイルで宣言されている必要があります。 +対応する宣言のない実体参照が XUL ファイルで行われていた場合、ウインドウは表示されません。 +</p><p>なお、実体の名前は重要でないことを補足しておきます。 +上記の例では、実体の名前に単語をピリオドで区切ったものを用いていますが、 +特に必要なわけではありません。 +上記の実体の命名規則は、Mozilla のコードでの慣例をまねているだけです。 +</p><p>「2520 bytes」というテキストが、2 つの実体を使用するように置き換えられていることに気が付いたでしょうか。 +これは、この部分のフレーズの組み立てが、ロケールによって異なる可能性があるからです。 +例えば、(英語のように) 「数値」「bytes」 の順ではなく、逆の順番で表示する必要がある言語も存在するかもしれません。 +もちろん、必要に応じて「KB」や「MB」に表示を変更したい場合は、さらに複雑なコードが必要になります。 +</p><p>また、アクセスキーとキーボードショートカットもロケールによって異なる可能性があるため実体参照に変更しています。 +</p><p>次に DTD ファイル (findfile.dtd) を示します。 +</p> +<pre><!ENTITY findWindow.title "Find Files"> +<!ENTITY fileMenu.label "File"> +<!ENTITY editMenu.label "Edit"> +<!ENTITY fileMenu.accesskey "f"> +<!ENTITY editMenu.accesskey "e"> +<!ENTITY openCmd.label "Open Search..."> +<!ENTITY saveCmd.label "Save Search..."> +<!ENTITY closeCmd.label "Close"> +<!ENTITY openCmd.accesskey "o"> +<!ENTITY saveCmd.accesskey "s"> +<!ENTITY closeCmd.accesskey "c"> +<!ENTITY cutCmd.label "Cut"> +<!ENTITY copyCmd.label "Copy"> +<!ENTITY pasteCmd.label "Paste"> +<!ENTITY cutCmd.accesskey "t"> +<!ENTITY copyCmd.accesskey "c"> +<!ENTITY pasteCmd.accesskey "p"> +<!ENTITY cutCmd.commandkey "X"> +<!ENTITY copyCmd.commandkey "C"> +<!ENTITY pasteCmd.commandkey "V"> +<!ENTITY openCmdToolbar.label "Open"> +<!ENTITY saveCmdToolbar.label "Save"> +<!ENTITY searchTab "Search"> +<!ENTITY optionsTab "Options"> +<!ENTITY findDescription "Enter your search criteria below and select the Find button to begin the search."> +<!ENTITY findCriteria "Search Criteria"> +<!ENTITY type.name "Name"> +<!ENTITY type.size "Size"> +<!ENTITY type.date "Date Modified"> +<!ENTITY mode.is "Is"> +<!ENTITY mode.isnot "Is Not"> +<!ENTITY casesensitive "Case Sensitive Search"> +<!ENTITY matchfilename "Match Entire Filename"> +<!ENTITY results.filename "Filename"> +<!ENTITY results.location "Location"> +<!ENTITY results.size "Size"> +<!ENTITY bytes.before ""> +<!ENTITY bytes.after "bytes"> +<!ENTITY button.find "Find"> +<!ENTITY button.cancel "Cancel"> +</pre> +<p>これで、別の DTD ファイルを作るだけで、新しい言語に対応することが可能になりました。 +このように、chrome システムにより、異なるロケールごとに DTD ファイルを与えるようにしておけば、 +同じ XUL ファイルを任意の言語で利用することが可能です。 +</p><p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples//findfile/findfile-locale.xul.txt">ソース</a> +</p> +</div> +<p>次のセクションでは、プロパティ ファイルについて見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_a_Skin" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Property_Files">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/manifest_files/index.html b/files/ja/archive/mozilla/xul/tutorial/manifest_files/index.html new file mode 100644 index 0000000000..c53cb451cd --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/manifest_files/index.html @@ -0,0 +1,123 @@ +--- +title: マニフェストファイル +slug: Archive/Mozilla/XUL/Tutorial/Manifest_Files +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/The_Chrome_URL" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Creating_a_Window">次のページ »</a></p> +</div></div> +<p>このセクションでは、chrome と XUL ファイルをパッケージする方法と、それらのためにマニフェストファイルを作成する方法について確認します。</p> +<h2 id="Packages" name="Packages">パッケージ</h2> +<p><span style="border-bottom: 1px dashed green;" title="package">パッケージ</span>とは、ユーザインタフェースの機能を定義する 一式の XUL ファイルとスクリプトのことです。 パッケージは、Mozilla にインストールされた後、通常は chrome URL によって参照されることになります。 パッケージには、どんな種類のファイルでも含めることができ、多くの場合、パッケージを構成するパートごとに、サブディレクトリに振り分けて置かれます。 パッケージはディレクトリとしても、JAR アーカイブとしても保存することが可能です。</p> +<h2 id="Manifest_Files" name="Manifest_Files">マニフェストファイル</h2> +<p><span style="border-bottom: 1px dashed green;" title="manifest file">マニフェストファイル</span>は、パッケージについての記述を行い、パッケージのディスク上の位置を chrome URL へマッピングする情報を提供します。 chrome ディレクトリに置かれたマニフェストファイルは、Mozilla アプリケーションが起動するときに、インストールされているパッケージを確認するために調べられていきます。 つまり、新しいパッケージをインストールするために必要なことは、マニフェストファイルを、アプリケーションの chrome ディレクトリかユーザ固有の chrome ディレクトリのどちらかに追加することだけになります。 通常、ユーザ固有の chrome ディレクトリは、パッケージのインストール時、アプリケーションディレクトリに書き込むために十分な権限がない場合に使用されます。</p> +<p>もし Firefox ブラウザで特権が必要な XUL コードをテストしてみたいのであれば、以下の手順で 1 行だけのマニフェストを作成するだけで簡単に行うことが可能です。</p> +<ol> + <li>新しいディレクトリをどこかに作成します。 例として、Windows マシンで、C:\testfiles を使用することにします。</li> + <li>Firefox がインストールされているディレクトリにある chrome ディレクトリに test.manifest という名前で新しいファイルを ASCII<sup>1</sup> 形式で作成します <sub>(1. BOM 付の UTF-8 形式では動作しません) </sub>。 実際には、<code>.manifest</code> 拡張子になってさえいればよいため、(拡張子を除いた) ファイル名の部分は重要ではありません。</li> + <li>そのファイルに以下の行を加えます。</li> +</ol> +<pre>content tests file:///C:/testfiles/ +</pre> +<p>加えた行に含まれているファイルパスは、上で作成したディレクトリを指す必要があります。 もし、ディレクトリのファイルパスがわからないのであれば、ブラウザでそのディレクトリを開いて、アドレス欄から URL をコピーしてください。</p> +<p>これだけで完了です! 後は、いくつかの XUL ファイルを、作成したディレクトリに追加することが必要なだけです。 それが済めば、<code>chrome://tests/content/</code><ファイル名> の形式の chrome URL をタイプすることにより、それらのファイルをロードすることができるはずです。 ただし、変更を有効にするためには、一度ブラウザを再起動する必要はあります。 もし、ファイルがロードされない場合は、ファイルパスが正しいかをもう一度確認してみてください。</p> +<p>コンテントパッケージのためのマニフェストファイルの基本的な文法は以下になります。</p> + +<pre>'content <packagename> <filepath>'</pre> + +<p>最初のフィールドに置かれた「content」は、コンテントパッケージであることを示しています。 テーマの場合は「skin」を、ロケール の場合は「locale」を置くことになります。 packagename は、上の例では 「tests」になります。 これは、<code>chrome://tests/content/sample.xul</code> の「tests」のように、chrome URL における最初のフィールドになります。 パッケージ名が「browser」の場合は、chrome URL は <code>chrome://browser/content/</code> になります。 最後のフィールドはファイルが置かれているパスです。 ここには、ファイル URL によるローカルなファイルパスか、jar URL による JAR アーカイブのどちらかで指定することが可能です。 (jar アーカイブについては、もう少し後で説明します)。 マニフェストァイルに、別の行を加えることで、複数のパッケージを指定することも可能です。</p> +<p>Firefox が使用する browser.manifest ファイルは以下のようになります。</p> +<pre>content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes +content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes +overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul +overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul +overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul +</pre> +<p>ここでは「branding」と「browser」の 2 個のパッケージがリストされています。 また、他のパッケージに含まれているコンテンツに結合させるための 3 つの<span style="border-bottom: 1px dashed green;" title="overlay">オーバーレイ</span>が指定されています。 このオーバーレイは、<span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span>によって追加される UI (ユーザインタフェース) を、元のブラウザの UI に統合するために、最も多く利用されることになると思います。</p> +<p>branding と browser パッケージのファイルパスは、コンテントがアーカイブにまとめられているため、jar URL を使用しています。 JAR アーカイブは、ZIP ユーティリティで作成することができます。 chrome ディレクトリに置かれた JAR ファイルを指定するための文法は、いたって単純です。</p> +<pre>jar:<filename.jar>!/<path_in_archive></pre> +<p>browser パッケージの場合、アーカイブファイルは browser.jar で、(ファイル名だけが記述されているため) chrome ディレクトリに置かれているマニフェストファイルと同じ場所に置かれていることを示しています。 パス「content/browser」は、アーカイブ中で XUL ファイルが置かれている場所を指定しています。 もしアーカイブにディレクトリが含まれない場合は、パスを指定する必要はありません。 今回の場合は、branding パッケージのファイルが同じアーカイブに異なったパスで格納されているため指定する必要があります。</p> +<p>上に作成された 「tests」パッケージでは、ファイルはアーカイブにまとめられていないので、ファイルへの直接パスが代わりに使用されています。 開発中であれば、ファイルを変更したときに毎回すべてのファイルをアーカイブし直す必要がないため、この方法が良いと思います。 しかし、完成したアプリケーションや拡張機能を配布するときは、小さなファイルがたくさんインストールされるのを避けるためにアーカイブにまとめたくなると思います。</p> +<p>マニフェスト行の終わりにある xpcnativewrappers=yes の部分は、付加的に使用されるフラグです。 JavaScript では、Web ページが自前のコードで組込み関数をオーバライドすることが可能です。 xpcnativewrappers フラグが指定されている場合、それらのスクリプトが、特権を持ったコンテキストで実行されるとき、オーバライドされた方の関数ではなく、オリジナルの組み込み関数を呼ぶことを指定します。 そうしないと、もし拡張機能が変更された方の関数を呼ぶことを試みた場合、おそらく適切に動作しないと思われますし、さらに悪いケースではセキュリティ ホールになる可能性もあります。 このフラグは、こういった問題を防ぐために加えられたため、新しい拡張機能では、常に使用されるべきですが、この変更に対して互換性がないかもしれない古い拡張機能のために、使用しない指定も残されています。 この機能についての詳細は <a href="/ja/docs/XPCNativeWrapper">XPCNativeWrapper</a> を参照してください。</p> +<h2 id="Themes_and_Locales" name="Themes_and_Locales">テーマとロケール</h2> +<p><span style="border-bottom: 1px dashed green;" title="theme">テーマ</span>と <span style="border-bottom: 1px dashed green;" title="locale">ロケール</span>パッケージの文法は コンテントパッケージと類似していますが、コンテントパッケージで指定したのと同じフィールドに加えて、何のテーマまたはロケールを提供するのかを指定する必要があります。 以下に例を示します。</p> +<pre>skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/ +locale browser en-US jar:en-US.jar!/locale/browser/ +</pre> +<p>これらには、browser に適用されるスキンとロケールについて示すために、専用のフィールドが加えられています。 このスキンの名前は 「classic/1.0」になります。 バージョン番号がテーマ名の一部として使用されていますが、独自にテーマを作成する場合、バージョン番号の使用は任意でかまいません。 Mozilla ではバージョン番号を扱うための特別な方法はなく、バージョン番号は単にテーマ名の一部です。 ロケールの方は「en-US」であることを示しています。 これらの chrome URL は、<code>chrome://browser/skin</code> と、<code>chrome://browser/locale</code> にマッピングされます。 もし、ブラウザのために、独自のテーマかロケールを作成しているのであれば、必要な作業は、上記の 2 行のうちの必要な方を書いたマニフェストファイルを作成して、作成するテーマかロケールに合うように変更することだけです。</p> +<p>テーマに関する詳しい情報に関しては、<a href="/ja/docs/Themes">Themes</a> を参照してください。 ロケールに関する詳しい情報に関しては、<a href="/ja/docs/Localization">Localization</a> を参照してください。</p> +<h2 id="Our_example_find_files_dialog" name="Our_example_find_files_dialog">ファイル検索ダイアログの例</h2> +<div class="highlight"> + <p>それでは、これから作成していくファイル検索ダイアログのために、マニフェストファイルを作成してみましょう。 必要なら、上記の 3 つのタイプのすべてを 1つのファイルに結合することも可能です。 これは 1 個のファイルの中に全てのパートがあるような拡張を作成するような場合などに利用されます。 ファイル検索ダイアログでは、これを利用してみることにします。 chrome ディレクトリに findfile.manifest という名前でファイルを作成し、以下をファイルに追加してください。</p> + <pre>content findfile file:///findfile/content/ +skin findfile classic/1.0 file:///findfile/skin/ +locale findfile en-US file:///findfile/locale/ +</pre> + <p>上でリストされたように新規のディレクトリを作成してください。 実のところ、ディレクトリは、どこに作成してもかまいませんが、マニフェストファイルのファイルパスが、そのディレクトリを示している必要があります。 当然のことですが、実際には自分のシステムに応じたディレクトリパスを使用したいはずです。 もし、このパッケージを配布するのであれば、JAR ファイルにパッケージして、パスを変更したいと思うでしょう。 今回は、マニフェストファイルの実例を示すことと、今後のセクションで作成していく例のためにディレクトリを準備することが目的のため、このように作成しておきます。</p> + <p>また、skin と locale の行の 2番目のフィールドが「findfile」を指定していることにも注意してください。 これは、skin と locale が、最初の行で指定された「findfile」パッケージを変更するものであることを示しています。</p> + <p>上の 3 つのパスは、各パートのためのサブディレクトリを指定しています。 各パートのファイルを分けたままにしたい場合は、このようにサブディレクトリを作成しておきます。</p> +</div> +<h2 id="Installing_a_Package" name="Installing_a_Package">パッケージのインストール</h2> +<p>どのようなアプリケーションを作成しているかによって方法は変わると思いますが、一般的にアプリケーションをインストールするためには、そのためにインストーラを作成するか、または別のアプリケーションの一部として含めておく必要があると思います。</p> +<p><span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span>の場合、「何がインストールされるか」、「その拡張機能の作者」、「ブラウザまたは他のアプリケーションのどのバージョンに適合するか」を記述するために、インストールファイルとして <code><a href="/ja/docs/Install_Manifests">install.rdf</a></code> を作成する必要があります。 拡張機能は、ファイルインストール先に制限があるため、それにあわせた<a href="/ja/docs/Bundles">専用のディレクトリ構造</a>も必要です。 拡張機能は <a href="/ja/docs/XPI">XPI</a> ファイルの中にパッケージされます。 XPI は、<a href="/ja/docs/XPInstall">XPInstall</a> の短縮であり、Mozilla によってコンポーネントをインストールするのに使用されます。 JAR ファイルのように、XPI ファイルは単に拡張子が異なるだけの ZIP ファイルであるため、ZIP ユーティリティによって XPI ファイルを作成したり、見たりすることが可能です。</p> +<p>Firefox の拡張機能マネージャは、XPI ファイルの中にパッケージされた拡張機能を自動的に扱いインストールします。 作成した拡張機能を <a class="link-https" href="https://addons.mozilla.org/">Mozilla Add-onsサイト</a>にアップロードするのはお勧めです。 そうしておけば、利用者がインストールしたいとき、簡単に配布元を見つけることができるようになります。 拡張機能は、どんなサイトからでもインストールすることは可能ですが、Firefox は、それ以外のサイトでは、デフォルトでインストールを許容するように構成されていません。</p> +<p>ファイルをインストールするために JavaScript に書かれたインストールスクリプトを使用することも可能です。 この方法では、どんな位置にもファイルをコピーすることが可能で、他のファイル管理タスクの実行することも出来ます。 しかしながら、スクリプトでインストールされたアプリケーションは、拡張機能マネージャによってリストされず、それらをアンインストールするための自動化された方法もありません。 この理由のために、インストールスクリプトは頻繁に使用されることはありません。</p> +<p>スタンドアローンなアプリケーションは、XULRunner を使用してパッケージすることが可能です。 これによって、実行可能ファイルを分離して、アプリケーションをブラウザによらずに配布することができるようになります。</p> +<p>拡張機能を作成することに関する詳しい情報に関しては、<a href="/ja/docs/Extensions">Extensions</a> を参照してください。 XULRunner に関する詳しい情報に関しては、<a href="/ja/docs/XULRunner">XULRunner</a> を参照してください。</p> +<h2 id="Older_Applications" name="Older_Applications">古いアプリケーション</h2> +<p>もし、Mozilla ソフトウェアの旧式のバージョンのアプリケーションを作成する場合、すなわち、Firefox 1.5 か Mozilla1.8 のより前の版のためには、プロセスはもう少し込み入っています。 以下は、以前のバージョンのためのパッケージをセットアップする方法を説明します。 もし、新しい拡張か XUL アプリケーションを書いているのであれば、このセクションはスキップしてもかまいません。</p> +<div class="note"> + <b>注意</b>: このより古い手順は、新しい SeaMonkey1.0 にも適用されます。SeaMonkey1.0 のコードベースでは、まだ「マニフェスト」形式を採用していません。</div> +<pre class="brush:xml"><?xml version="1.0"?> + +<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> + + <RDF:Seq about="urn:mozilla:package:root"> + <RDF:li resource="urn:mozilla:package:myapplication" /> + </RDF:Seq> + + <RDF:Description about="urn:mozilla:package:myapplication" + chrome:displayName="Application Title" + chrome:author="Author Name" + chrome:name="myapplication" + chrome:extension="true" /> + +</RDF:RDF> +</pre> +<pre>content,install,url,file:///main/app/ +</pre> +<ol> + <li>ディレクトリをディスクの上のどこかに作成してください。 多くの人は、サブディレクトリとして Mozilla の chrome ディレクトリに作成しますが、必須ではありません。ディレクトリは、どこでも、どんなディスクの上に置いてもかまいません。その作成したディレクトリに XUL ファイルを入れてください。</li> + <li>contents.rdf と呼ばれるファイルを作成し、同じディレクトリに置いてください。以下の囲いのテキストを、新しい contents.rdf ファイルにコピーしてください。 このファイルは、アプリケーションID、名前、作者、バージョンなどを特定するのに使用されます。</li> + <li>ファイルで上で強調された部分をあなた自身の情報に変更してください。 赤いテキスト「myapplication」はあなたの作成するアプリケーションの ID である必要があります。この内容を設定するとき、多くの場合、ID はあなたのアプリケーションの名前と類似したものします。 上で青く強調されたテキストはあなたのアプリケーションのタイトルと作者に置き換えてください。</li> + <li>もし、「chrome:extension」フィールドが true ならば、アプリケーションは Mozilla Firefox の<span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span>であることを示します。このため、ブラウザの 拡張のウィンドウに表示されるはずです。false の場合は、表示されません。</li> + <li>contents.rdf を保存して、それがあなたがステップ 1 で作成したディレクトリに置かれていることを確認して下さい。</li> + <li>ファイル <mozilla-directory>/chrome/installed-chrome.txt を開いてください。<mozilla-directory> は Mozilla がインストールされているディレクトリです。開く前に Mozilla を終了させて下さい。</li> + <li>次に、Mozilla に新しいアプリケーションを登録することによって、Mozilla がどこから新しいアプリケーションを見つけるかを理解します。まず、あなたが ステップ 1 で作成した新しいディレクトリを示すための行を、installed-chrome.txt の最後に加えてください。以下の強調されたテキストで示されるファイル URL のディレクトリ部分を変更して下さい。URL が確実に スラッシュで終わっていることと、行の最後で改行が押されたことを確認して下さい。URL が何であるかを確認出来ないのであれば、ステップ 1 で作成したディレクトリを Mozilla ブラウザに開いてください。そして、ロケーションフィールドから URL をコピーしてください。この参照がファイルでなく、常にディレクトリであるべきであることに注意してください。</li> + <li>ファイル <mozilla-directory>/chrome/chrome.rdf を削除してください。</li> + <li>Mozilla を起動します。<code>chrome://applicationid/content/file.xul</code> (<code>file.xul</code> はファイル名) の形式でディレクトリに置かれた任意の XUL ファイルを参照することが可能なはずです。メインの XUL ファイルの名前は <code>chrome://applicationid/content/</code> のショートカット URL を使用してロード可能な applicationid.xul にするべきです。</li> +</ol> +<p>スキン、そして/または、ロケールの部分を作成しているのであれば、contents.rdf ファイルの形式がわずかに異なっているのを除き、上のステップを繰り返してください。詳細は他のアプリケーションにおける contents.rdf ファイルを見てください。</p> +<h2 id="Troubleshooting" name="Troubleshooting">トラブルシューティング</h2> +<p>クロムパッケージを作成するとき、しばしばトリッキーなことがあり、それが問題の原因を判断するのを難しくしています。ここに、あなたが立ち往生したときのためにいくつかの Tipsを書いておきます。<span style="color: darkgreen; background: #ef9;">【訳注: この部分の記述は、「古いアプリケーション」のためのものがほとんどのようです】</span></p> +<ul> + <li>ファイル <mozilla-directory>/chrome/chrome.rdf を開きます。そこで、あなたのアプリケーションIDのへの参照が見つけられるはずです。見つからないなら、登録に何か問題があります。見つかった場合は、ファイルをロードするときに、間違った chrome URL を使用しているのかもしれません。</li> + <li><mozilla-directory>/chrome/chrome.rdf ファイルを削除してみます。 削除しても作り直されるはずです。 また、あなたがオーバレイを使用しているなら、(<mozilla-directory>)/chrome/overlayinfo/ ディレクトリ全体を削除してみます。</li> + <li>あなたが installed-chrome.txt に加えた行の URL がスラッシュで終わっていることと、そのファイルが空白行で終わっているのを確認します。</li> + <li>Windows では、ファイルURLの形式は <code>file:///C|/files/app/</code> 、C はドライブ名になります。(C:でもかまいません)</li> + <li>contents.rdf ファイルが正しいディレクトリにあって、形式に誤りがないことを確認します。正しい形式の XML として解釈されているかどうかを確認するためには、Mozilla で contents.rdf ファイルを開きます。形式に誤りがある場合、黄色い背景色によりエラー箇所を見つけることが出来ます。</li> + <li>デバッグ用にビルドされた Mozilla を使用すれば、起動時にチェックされた chrome アプリケーションについていくつかの情報が端末に表示されるはずです。あなたのアプリケーションがリストされているかどうかを確認します。</li> + <li>「XML Parsing Error: undefined entity」というエラーメッセージが XUL ファイルで出力された場合は、マニフェストファイルか、そのマニフェストが参照している jar ファイルに誤りがあります。例えば、XUL ファイルに「<code><!DOCTYPE window SYSTEM "chrome://fireclipse/locale/fireclipse.dtd"></code> という記述がある場合は、その DTD が存在して、かつマニフェストの <code>locale</code> で、正しく指定されていないと、「XML の解析 (<span style="color: green;">parsing</span>)」に失敗することになます。</li> +</ul> +<p>マニフェストファイルについての詳細な情報が必要な場合は、<a href="/ja/docs/Chrome_Registration">Chrome Registration</a> を参照してください。</p> +<p>次のセクションでは、 XUL 言語についての説明を始めます。</p> +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/The_Chrome_URL" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Creating_a_Window">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/manipulating_lists/index.html b/files/ja/archive/mozilla/xul/tutorial/manipulating_lists/index.html new file mode 100644 index 0000000000..327c07b4a5 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/manipulating_lists/index.html @@ -0,0 +1,202 @@ +--- +title: リストを操作する +slug: Archive/Mozilla/XUL/Tutorial/Manipulating_Lists +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Manipulating_Lists +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Modifying_a_XUL_Interface" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Box_Objects">次のページ »</a></p> +</div> +<p>XUL では、リストボックスを操作するために、いくつか専用のメソッドが用意されています。 +</p><p><span id="List_Manipulation"></span> +</p> +<h3 id=".E3.83.AA.E3.82.B9.E3.83.88.E3.81.AE.E6.93.8D.E4.BD.9C" name=".E3.83.AA.E3.82.B9.E3.83.88.E3.81.AE.E6.93.8D.E4.BD.9C"> リストの操作 </h3> +<p>リストボックス (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code>) 要素には、中の項目を取得したり操作したりするメソッドがいくつか用意されています。 +これらを使わず、標準の <a href="ja/DOM">DOM</a> 関数の方を使用して、<a href="ja/XUL_Tutorial/List_Controls">リストボックス</a>を操作しても問題はないのですが、 +専用関数の方が若干簡単で、かつ (意識しなくても) 正しい操作を行うことができるため、 +可能な限り、リストボックス専用関数の方を利用することを推奨します。 +</p><p>リストの末尾に、新たに項目を追加するには、<code><span id="m-appendItem"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem()</a></code></span></code> 関数を使用します。 +この関数は、文字列ラベルを引数にとることを除いて、<a href="ja/DOM/element.appendChild">DOM の appendChild()</a> 関数と類似していますが、リストを構成する要素のどれに追加すればよいのかについて悩まずに済みます。 +以下に例を示します。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_1.xul">表示</a> +</p> +<pre><script> +function addItem(){ + document.getElementById('thelist').appendItem("Thursday", "thu"); +} +</script> + +<listbox id="thelist"/> + +<button label="Add" oncommand="addItem();"/> +</pre> +<p><code><span id="m-appendItem"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem()</a></code></span></code> は、2 つの引数をとり、1 つめの <code>label</code> には「Thursday」を、 2 つめの <code>value</code> には「thu」を渡しています。 +この 2 つの引数は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/listitem" title="listitem">listitem</a></code></code> 要素の、<code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性と <code><code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 属性に対応しています。 +この <code>value</code> はオプションで、項目にスクリプトからアクセスするときのみに使用する専用の値を結びつけたいときに使用します。 +</p><p>また、同様に新たな項目を挿入するための <code><span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/insertItemAt">insertItemAt()</a></code></span></code> 関数と、既存の項目を削除する <code><span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt()</a></code></span></code> 関数も存在します。 +これらの構文は以下のようになります。 +</p> +<pre>list.insertItemAt(3, "Thursday", "thu"); +list.removeItemAt(3); +</pre> +<p><code><span id="m-insertItemAt"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/insertItemAt">insertItemAt()</a></code></span></code> 関数には、新規の項目を挿入する位置を示す引数が追加で必要です。 +新規の項目は、インデックスとして指定された位置に挿入されます。 +つまり、この例では、新規項目は、位置「3」に挿入され、元々あった項目は位置「4」にずれることになります。 +最初の項目は、位置「0」であることに留意してください。 +また、<code><span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt()</a></code></span></code> 関数は、インデックスとして指定された項目を取り除きます。 +</p><p>これらの 3 つのメソッドは、リスト以外のいくつかの XUL 要素でも利用可能で、同じ流儀で項目を扱うことができます。 +実は、これらのメソッドは、<a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULSelectControlElement.html">nsIDOMXULSelectControlElement</a> インターフェイスに含まれているため、 +このインターフェイスを実装している全ての XUL 要素が、これらのメソッドを持っていることになります。 +そこに含まれる要素としては、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code>、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> があります。 +例えば、<a href="ja/XUL_Tutorial/Simple_Menu_Bars">メニューリスト</a>に新規項目を追加する場合も、<a href="ja/XUL_Tutorial/List_Controls">リストボックス</a>と同じ構文を使うことが可能です。 +また、これらの関数を利用した場合は、状況に応じて、適切な種類の要素が追加されます。 +</p><p><span id="List_Selection"></span> +</p> +<h3 id=".E3.83.AA.E3.82.B9.E3.83.88.E9.A0.85.E7.9B.AE.E3.81.AE.E9.81.B8.E6.8A.9E" name=".E3.83.AA.E3.82.B9.E3.83.88.E9.A0.85.E7.9B.AE.E3.81.AE.E9.81.B8.E6.8A.9E"> リスト項目の選択 </h3> +<p><code>nsIDOMXULSelectControlElement</code> インターフェイスには、他にも 2 つのプロパティ <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> と <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedItem">selectedItem</a></span></code></code> が用意されています。 +前者は、選択されている項目のインデックスを返し、後者は選択されている要素を返します。 +具体的には、メニューリストに対して <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedItem">selectedItem</a></span></code></code> を呼び出した場合、選択された <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> が返ります。 +また、選択されている項目が無い場合は、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> は -1 を返し、 <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedItem">selectedItem</a></span></code></code> は null を返します。 +</p><p><span id="Getting_the_selected_item"></span> +</p> +<h4 id=".E9.81.B8.E6.8A.9E.E3.81.95.E3.82.8C.E3.81.9F.E9.A0.85.E7.9B.AE.E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B" name=".E9.81.B8.E6.8A.9E.E3.81.95.E3.82.8C.E3.81.9F.E9.A0.85.E7.9B.AE.E3.82.92.E5.8F.96.E5.BE.97.E3.81.99.E3.82.8B"> 選択された項目を取得する </h4> +<p>この 2 つのプロパティは、主として select イベントの処理から参照されます。 +以下に、例を示します。 +</p><p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_2.xul">表示</a> +</p> +<pre><listbox id="thelist" onselect="alert(this.selectedItem.label);"> + <listitem label="Short"/> + <listitem label="Medium"/> + <listitem label="Tall"/> +</listbox> +</pre> +<p>リスト内の項目が選択されたときに、リストボックスに対して、select イベントが発生します。 +このとき、select ハンドラは、リスト内で選択された項目のラベルを含んだアラートを表示します。 なお、ハンドラの処理では、select イベントが発生したことを契機に呼び出されるため、呼び出されたときには、必ず項目は選択されているものと見なしてもかまいませんが、 +それ以外の処理では、まず <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedItem">selectedItem</a></span></code></code> が null でないことを確認してから、処理を続けるようにする必要があります。 +</p><p>また、select イベントは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 要素内のラジオボタンが選択された場合や、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素内のタブが選択された場合にも発生します。 +しかしながら、メニューリストでは select イベントは発生しません。 +そのかわり、項目が選択されたときの処理のために command イベントを利用することが可能です。 +</p><p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素を処理する場合は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> 要素の関数を利用する方が便利な場合がしばしばあります。 +具体的には、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素にも <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> プロパティがあり、選択されているタブのインデックスを返しますが、 +選択項目を取得する場合は、通常タブボックスの <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedTab">selectedTab</a></span></code></code> プロパティの方を利用します。 +あるいは、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedPanel">selectedPanel</a></span></code></code> プロパティによって、選択されているパネル、つまりタブに結びつけられている内容を取得することも可能です。 +</p><p><span id="Changing_the_selection"></span> +</p> +<h4 id=".E9.81.B8.E6.8A.9E.E7.AF.84.E5.9B.B2.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B" name=".E9.81.B8.E6.8A.9E.E7.AF.84.E5.9B.B2.E3.82.92.E5.A4.89.E6.9B.B4.E3.81.99.E3.82.8B"> 選択範囲を変更する </h4> +<p>上記の選択に関するプロパティは、すべて選択を変更するために新たな値を代入することが可能です。 +次の例では、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/radiogroup" title="radiogroup">radiogroup</a></code></code> 要素の <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> プロパティを、テキスト入力欄に入力された値で変更します。 +このコードは、UI をフールプルーフにするために必要な、入力値が範囲外でないかをチェックするような処理は行っていません。 +この手のエラーチェックは、実際のアプリケーションを作成するときには、確実に追加しておくべきだと思います。 +</p><p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_3.xul">表示</a> +</p> +<pre><script> +function doSelect(){ + var val = document.getElementById('number').value; + val = Number(val); + if (val != null) + document.getElementById('level').selectedIndex = val - 1; +} +</script> + +<hbox align="center"> + <label value="Enter a number from 1 to 3:"/> + <textbox id="number"/> + <button label="Select" oncommand="doSelect();"/> +</hbox> + +<radiogroup id="level"> + <radio label="Excellent"/> + <radio label="Good"/> + <radio label="Poor"/> +</radiogroup> +</pre> +<p>リストボックスは、複数項目の選択のために <a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> インターフェイスもサポートします。 +このインターフェイスには、複数項目の選択を取り扱うための専用関数がいくつか用意されています。 +例えば、 <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedItems">selectedItems</a></span></code></code> プロパティは、選択状態の項目のリストを保持し、 <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedCount">selectedCount</a></span></code></code> プロパティはその項目数を保持しています。 +これらのプロパティは、リストの内容を繰り返し、各項目に対して何らかの処理を行ためによく利用されます。 +選択項目のリストに対して繰り返し処理を行うときには注意が必要です。 +処理中にリスト内の項目を変更した場合、リストの内容は変更され、選択を取り扱うプロパティは異なる値を返すようになるかもしれません。 +リストを操作する場合、項目を使用する方が、インデックスを使用するよりも便利な理由の 1 つはここにあります。 +</p><p><span id="Deleting_selected_items"></span> +</p> +<h4 id=".E9.81.B8.E6.8A.9E.E9.A0.85.E7.9B.AE.E3.82.92.E5.89.8A.E9.99.A4.E3.81.99.E3.82.8B" name=".E9.81.B8.E6.8A.9E.E9.A0.85.E7.9B.AE.E3.82.92.E5.89.8A.E9.99.A4.E3.81.99.E3.82.8B"> 選択項目を削除する </h4> +<p>選択項目を正しく削除する方法を、以下の例に示します。 +</p><p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_4.xul">表示</a> +</p> +<pre><script> +function deleteSelection(){ + var list = document.getElementById('thelist'); + var count = list.selectedCount; + while (count--){ + var item = list.selectedItems[0]; + list.removeItemAt(list.getIndexOfItem(item)); + } +} +</script> + +<button label="Delete" oncommand="deleteSelection();"/> + +<listbox id="thelist" seltype="multiple"> + <listitem label="Cheddar"/> + <listitem label="Cheshire"/> + <listitem label="Edam"/> + <listitem label="Gouda"/> + <listitem label="Havartie"/> +</listbox> +</pre> +<p>while ループ内では... +</p> +<ul><li> 最初に選択項目 (selectedItem) のインデックス 0 の値を取得しています。項目が削除されて、配列のサイズが小さくなっても、最初の選択項目は常に取得可能だからです。 +</li><li> 次に、<code><span id="m-removeItemAt"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/removeItemAt">removeItemAt()</a></code></span></code> 関数を使用して、取得した項目を削除しますが、この関数にはインデックスを渡す必要があります。 +</li><li> このため、<code><span id="m-getIndexOfItem"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getIndexOfItem">getIndexOfItem()</a></code></span></code> 関数を利用して、項目からインデックスへの変換を行います。なお、逆にインデックスから項目を求めるには、<code><span id="m-getItemAtIndex"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/getItemAtIndex">getItemAtIndex()</a></code></span></code> 関数を用います。 +</li></ul> +<p><br> +<a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIDOMXULMultiSelectControlElement.html">nsIDOMXULMultiSelectControlElement</a> インターフェイスには、項目の選択状態を変更するためのメソッドも用意されています。 +具体的には、<code><span id="m-addItemToSelection"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/addItemToSelection">addItemToSelection()</a></code></span></code> 関数は、そのとき選択されている項目は残したまま、項目を 1 つ選択されている状態に追加します。 +また、<code><span id="m-removeItemFromSelection"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/removeItemFromSelection">removeItemFromSelection()</a></code></span></code> 関数は、選択されている項目群から 1 項目を除外します。 +</p><p><span id="List_Scrolling"></span> +</p> +<h3 id=".E3.83.AA.E3.82.B9.E3.83.88.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB" name=".E3.83.AA.E3.82.B9.E3.83.88.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB"> リストのスクロール </h3> +<p>リストボックス (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code>) の行数が表示枠を超えるような場合、利用者がリストのスクロールを行えるようにスクロールバーが表示されます。 +このときスクロール位置は、リストボックスの 2 つのメソッドによって調整することが可能です。 +</p><p><code><span id="m-scrollToIndex"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/scrollToIndex">scrollToIndex()</a></code></span></code> メソッドは、指定された行へスクロールを行います。 +このときスクロールは、対象行が項目リストの末尾近くにあるときを除いて、その行が表示枠の上端に位置するように行われます。 +<code><span id="m-ensureIndexIsVisible"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/ensureIndexIsVisible">ensureIndexIsVisible()</a></code></span></code> メソッドも、同様に指定された行を表示するようにスクロールを行いますが、項目がすでに表示されている場合は何もしません。 +つまり、前者の関数は特定の行へのスクロールに、後者は行が見えるようにするために利用します。 +また、インデックスの代わりに項目を引数にとる <code><span id="m-ensureItemIsVisible"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/ensureItemIsVisible">ensureItemIsVisible()</a></code></span></code> メソッドもあります。 +以下の例で、スクロール位置をいろいろ変えながら、2 つの関数の効果の違いを比べてみてください。 +</p><p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_domlists_5.xul">表示</a> +</p> +<pre><button label="scrollToIndex" + oncommand="document.getElementById('thelist').scrollToIndex(4);"/> +<button label="ensureIndexIsVisible" + oncommand="document.getElementById('thelist').ensureIndexIsVisible(4);"/> + +<listbox id="thelist" rows="5"> + <listitem label="1"/> + <listitem label="2"/> + <listitem label="3"/> + <listitem label="4"/> + <listitem label="5"/> + <listitem label="6"/> + <listitem label="7"/> + <listitem label="8"/> + <listitem label="9"/> + <listitem label="10"/> + <listitem label="11"/> + <listitem label="12"/> +</listbox> +</pre> +<p>次のセクションでは、XUL ボックスオブジェクトについて見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Modifying_a_XUL_Interface" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Box_Objects">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/modifying_a_xul_interface/index.html b/files/ja/archive/mozilla/xul/tutorial/modifying_a_xul_interface/index.html new file mode 100644 index 0000000000..cb1a4e3ae0 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/modifying_a_xul_interface/index.html @@ -0,0 +1,125 @@ +--- +title: XUL インターフェイスを変更する +slug: Archive/Mozilla/XUL/Tutorial/Modifying_a_XUL_Interface +tags: + - DOM + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_a_XUL_Interface +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Document_Object_Model" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Manipulating_Lists">次のページ »</a></p> +</div> +<p>DOM には文書を変更するために、色々な関数が用意されています。</p> +<p><span id="Creating_New_Elements"></span></p> +<h3 id=".E8.A6.81.E7.B4.A0.E3.81.AE.E6.96.B0.E8.A6.8F.E4.BD.9C.E6.88.90" name=".E8.A6.81.E7.B4.A0.E3.81.AE.E6.96.B0.E8.A6.8F.E4.BD.9C.E6.88.90">要素の新規作成</h3> +<p>文書 (<code>document</code>) の <code><a href="ja/DOM/document.createElement">createElement()</a></code> 関数を使うことで、新規の要素を作成することが可能です。 この関数は、引数を 1 つ取り、そこに作成する要素のタグ名を渡します。 作成した後は、 その要素に対して、<code><a href="ja/DOM/element.setAttribute">setAttribute()</a></code> 関数を使用して属性の設定を行っていき、 完了したら、<code><a href="ja/DOM/element.appendChild">appendChild()</a></code> 関数を使用して XUL 文書に追加することができます。 XUL ウインドウにボタンを追加する例を、以下に示します。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_1.xul">表示</a></p> +<pre><script> +function addButton(){ + var aBox = document.getElementById("aBox"); + var button = document.createElement("button"); + button.setAttribute("label","A new Button"); + aBox.appendChild(button); +} +</script> + +<box id="aBox" width="200"> + <button label="Add" oncommand="addButton();"/> +</box> +</pre> +<ul> + <li>このスクリプトでは、まず、新規ボタンを追加するためのコンテナとして使用するボックスへの参照を、<code><a href="ja/DOM/document.getElementById">getElementById()</a></code> 関数によって取得します。</li> + <li>次に、<code><a href="ja/DOM/document.createElement">createElement()</a></code> 関数で新規にボタンを作成します。</li> + <li>続いて、<code><a href="ja/DOM/element.setAttribute">setAttribute()</a></code> 関数でボタンのラベルに「A Button」を設定します。</li> + <li>最後に、ボックスに対して <code><a href="ja/DOM/element.appendChild">appendChild()</a></code> 関数を呼び出して、ボタンをボックスに追加します。</li> +</ul> +<p><code><a href="ja/DOM/document.createElement">createElement()</a></code> 関数は、その文書に応じたデフォルトの型の要素を作成します。 つまり、XUL 文書の場合は、一般に XUL 要素が作成されることを意味します。 また、HTML 文書の場合は、かわりに HTML 要素が作成されて HTML 要素の特徴と機能を持つことになります。 なお、異なる名前空間の要素を作成するには <code><a href="ja/DOM/document.createElementNS">createElementNS()</a></code> 関数が利用できます。</p> +<p><code><a href="ja/DOM/element.appendChild">appendChild()</a></code> 関数は、要素を別の要素の子要素として追加するときに使用します。 これに関連する関数として、<code><a href="ja/DOM/element.insertBefore">insertBefore()</a></code>、<code><a href="ja/DOM/element.replaceChild">replaceChild()</a></code>、<code><a href="ja/DOM/element.removeChild">removeChild</a></code> の 3 つがあります。 この 3 つの関数の構文を、以下に示します。</p> +<pre>parent.appendChild(child); +parent.insertBefore(child, referenceChild); +parent.replaceChild(newChild, oldChild); +parent.removeChild(child); +</pre> +<p>これらの関数の機能は、その名前が示すままのものになります。</p> +<ul> + <li><code><a href="ja/DOM/element.insertBefore">insertBefore()</a></code> 関数は、新しい子ノードを、既存の別の子ノードの前に挿入します。これは <code><a href="ja/DOM/element.appendChild">appendChild()</a></code> が、要素を一連の子要素の最後に追加するのに対し、間のどこかに挿入したい場合に使用します。</li> + <li><code><a href="ja/DOM/element.replaceChild">replaceChild()</a></code> 関数は、既存の子要素を削除して、その場所に新たな要素を追加します。</li> + <li>最後の <code><a href="ja/DOM/element.removeChild">removeChild()</a></code> 関数は、既存のノードを削除します。</li> +</ul> +<p>これらのどの関数においても、参照する子要素、あるいは取り除かれることになる子要素は、存在していないとエラーになる点に注意してください。</p> +<p>既存の要素を、取り除いて別のどこかに追加したくなることはしばしばあります。 その場合は、要素を取り除く操作は必要はなく、単に追加するだけでかまいません。 ノードは、DOM 上には、同時に 1 つの場所にしか置くことができないため、挿入系の呼び出しでは、まず最初に、追加するノードを元の場所から取り除くことが常に行われます。 これは、文書内でノードの位置を動かすときに便利な方法です。</p> +<p><span id="Copying_Nodes"></span></p> +<h4 id=".E3.83.8E.E3.83.BC.E3.83.89.E3.81.AE.E3.82.B3.E3.83.94.E3.83.BC" name=".E3.83.8E.E3.83.BC.E3.83.89.E3.81.AE.E3.82.B3.E3.83.94.E3.83.BC">ノードのコピー</h4> +<p>また、ノードをコピーするためには <code><a href="ja/DOM/element.cloneNode">cloneNode()</a></code> 関数を使用します。 この関数は、既存のノードのコピーを作成して、どこか別の場所に追加します。 このとき、元のノードは元の場所に残されます。 また、この関数は真偽値の引数を 1 つ取って、子ノードも全てコピーするかどうかを指示します。 この値が false の場合は、ノード自身のみがコピーされ、子ノードのコピーは行われません。 また、値が true の場合は、全ての子ノードが同じようにコピーされます。 この動作は再帰的に行われるので、大きなツリー構造を持つノードの場合は、<code><a href="ja/DOM/element.cloneNode">cloneNode()</a></code> 関数に true を渡す前に、本当に必要かどうかを確かめておくべきでしょう。 以下に例を示します。</p> +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_2.xul">表示</a></p> +<pre><hbox height="400"> + <button label="Copy" + oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/> + + <vbox> + <button label="First"/> + <button label="Second"/> + </vbox> +</hbox> +</pre> +<p>Copy ボタンが押されると..</p> +<ul> + <li><code><a href="ja/DOM/element.nextSibling">nextSibling</a></code> 関数によって、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> に隣接する次の要素である <code><code><a href="/ja/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> が取得されます。</li> + <li><code><a href="ja/DOM/element.cloneNode">cloneNode()</a></code> 関数によって、取得した要素のコピーが作成されます。</li> + <li><code><a href="ja/DOM/element.appendChild">appendChild()</a></code> 関数によって、作成したコピーを DOM に追加します。</li> +</ul> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/listbox" title="listbox">listbox</a></code></code> や <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> などの一部の要素には、変更操作のために専用の関数が追加で用意されています。 これらの要素を変更する場合は、可能なら専用の関数の方を使うべきであることに注意してください。 これらについては、<a href="ja/XUL_Tutorial/Manipulating_Lists">次のセクション</a>で説明する予定です。</p> +<p><span id="Manipulating_Basic_Elements"></span></p> +<h3 id=".E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA.E8.A6.81.E7.B4.A0.E3.81.AE.E6.93.8D.E4.BD.9C" name=".E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA.E8.A6.81.E7.B4.A0.E3.81.AE.E6.93.8D.E4.BD.9C">基本的な要素の操作</h3> +<p>ボタンやチェックボックス、ラジオボタンといった主要な XUL 要素は、いくつかのスクリプトプロパティを通して操作することが可能です。 利用できるプロパティは各要素で異なっているため、詳細は <a href="ja/XUL_Reference">XUL 要素リファレンス</a>の一覧で確認してください。 これらの要素を操作するための共通プロパティとしては、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/label">label</a></span></code></code>、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/value">value</a></span></code></code>、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/checked">checked</a></span></code></code>、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/disabled">disabled</a></span></code></code> などがあります。 これらのプロパティは、必要に応じて対応する属性の設定や消去を行います。</p> +<p><span id="Label_and_value_properties_examples"></span></p> +<h4 id="label_.E3.81.A8_value_.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E4.BE.8B" name="label_.E3.81.A8_value_.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E4.BE.8B">label と value プロパティの例</h4> +<p>以下に、ボタンのラベルを変更するための簡単な例を示します。</p> +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_3.xul">表示</a></p> +<pre><button label="Hello" oncommand="this.label = 'Goodbye';"/> +</pre> +<p>ボタンが押されたとき、そのボタンのラベルが変更されます。 この技法は、ラベルを持っている他のたくさんの要素に対しても有効です。 また、<span style="border-bottom: 1px dashed green;" title="textbox">テキスト入力欄</span>については、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/value">value</a></span></code></code> プロパティを使って類似のことが可能です。</p> +<p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_4.xul">表示</a></p> +<pre><button label="Add" oncommand="this.nextSibling.value += '1';"/> +<textbox/> +</pre> +<p>この例では、ボタンが押される度にテキスト入力欄に<code>'1'</code> が追加されていきます。 <code><a href="ja/DOM/element.nextSibling">nextSibling</a></code> プロパティによって、ボタン (this) から次の隣接要素であるテキスト入力欄へ誘導しています。 そして、<code>+=</code> 演算子は、現在の値に加算するために使われるため、そのとき入力されているテキストの末尾に 1 が付加されることになります。 この場合も、依然としてテキスト入力欄へ入力することも可能であることを補足しておきます。 また、これらのプロパティを通して、現在のラベルや要素の値を取得することも可能です。 以下に、例を示します。</p> +<p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_5.xul">表示</a></p> +<pre><button label="Hello" oncommand="alert(this.label);"/> +</pre> +<p><span id="Toggling_a_checkbox"></span></p> +<h4 id=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E7.8A.B6.E6.85.8B.E5.A4.89.E6.9B.B4" name=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E7.8A.B6.E6.85.8B.E5.A4.89.E6.9B.B4">チェックボックスの状態変更</h4> +<p>チェックボックスには <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/checked">checked</a></span></code></code> プロパティがあり、チェックボックスをチェックしたり解除したりするために使用できます。 このプロパティの使い方は、あなたが考えている内容とおそらく同じです。 次の例では、ボタンが押されるごとに、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/checked">checked</a></span></code></code> プロパティの状態を反転させます。 なお、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/label">label</a></span></code></code> や <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/value">value</a></span></code></code> が文字列プロパティであるのに対して、 <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/checked">checked</a></span></code></code> は、true か false のみが設定可能な、真偽値プロパティであることに注意してください。</p> +<p><span id="%E4%BE%8B_6"><a id="%E4%BE%8B_6"></a><strong>例 6</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_6.xul">表示</a></p> +<pre><button label="Change" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/> +<checkbox label="Check for messages"/> +</pre> +<p>ラジオボタン (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code>) もプロパティを用いて選択可能ですが、グループ内で選択できるのは、同時に 1 つだけなので、1 つがチェックされた場合、他のものはチェックされていないようにしなければなりません。 もちろん、この処理をアプリケーション開発者がいちいち行う必要はなく、ラジオグループ の <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> プロパティを利用して、自動的に行わせることが可能です。 また、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> プロパティは、変更だけではなく、グループ内で何番目のラジオボタンが選択されているかを示すインデックスを取得するためにも利用できます。</p> +<p><span id="Changing_a_element_disabled_or_enabled"></span></p> +<h4 id=".E8.A6.81.E7.B4.A0.E3.81.AE.E7.84.A1.E5.8A.B9.E5.8C.96.E3.81.A8.E6.9C.89.E5.8A.B9.E5.8C.96" name=".E8.A6.81.E7.B4.A0.E3.81.AE.E7.84.A1.E5.8A.B9.E5.8C.96.E3.81.A8.E6.9C.89.E5.8A.B9.E5.8C.96">要素の無効化と有効化</h4> +<p>状況に応じて、特定のフィールドが適用されないように無効にしておくのは、ありふれた手法だと思います。 例えば、いくつかの選択肢から 1 つを選ぶような入力があり、その中の 1 つを選んだ場合だけ、さらに詳細なカスタマイズが可能になるような設定ダイアログを作成する場合、この手法が使用できます。 以下に、このようなインターフェイスを作成する例を示します。</p> +<p><span id="%E4%BE%8B_7"><a id="%E4%BE%8B_7"></a><strong>例 7</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_dommodify_7.xul">表示</a></p> +<pre><script> +function updateState(){ + var name = document.getElementById("name"); + var sindex = document.getElementById("group").selectedIndex; + name.disabled = sindex == 0; +} +</script> + +<radiogroup id="group" onselect="updateState();"> + <radio label="Random name" selected="true"/> + <hbox> + <radio label="Specify a name:"/> + <textbox id="name" value="Jim" disabled="true"/> + </hbox> +</radiogroup> +</pre> +<p>この例では、ラジオグループに対して select イベントが発生したときに <code>updateState()</code> 関数が呼び出されます。 (この呼び出しは、ラジオボタンが選択されるたびに発生します)。 この関数は、現在選択されている <code><code><a href="/ja/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 要素を、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/selectedIndex">selectedIndex</a></span></code></code> プロパティから取得します。 このとき、ラジオボタンのうちの 1 つは、直接ラジオグループには置かれず、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 内に置かれていますが、これも依然としてラジオグループに含まれていることを注記しておきます。 最初のラジオボタンが選択されると、(インデックスが 0) テキスト入力欄の <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/disabled">disabled</a></span></code></code> プロパティは true にされるため、無効になります。 また、2 番目のラジオボタンが選択されると、テキスト入力欄は有効になります。</p> +<p>次のセクションでは、ラジオグループとリストに対する操作の詳細について説明します。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Document_Object_Model" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Manipulating_Lists">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/modifying_the_default_skin/index.html b/files/ja/archive/mozilla/xul/tutorial/modifying_the_default_skin/index.html new file mode 100644 index 0000000000..dbfc7651c0 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/modifying_the_default_skin/index.html @@ -0,0 +1,87 @@ +--- +title: デフォルトスキンの変更 +slug: Archive/Mozilla/XUL/Tutorial/Modifying_the_Default_Skin +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_the_Default_Skin +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Styling_a_Tree" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Creating_a_Skin">次のページ »</a></p> +</div> +<p>このセクションでは、ウィンドウのスキンを変更する方法について記述します。 +</p> +<h3 id=".E3.82.B9.E3.82.AD.E3.83.B3.E3.81.AE.E5.9F.BA.E7.A4.8E" name=".E3.82.B9.E3.82.AD.E3.83.B3.E3.81.AE.E5.9F.BA.E7.A4.8E"> スキンの基礎 </h3> +<p><a href="ja/Creating_a_Skin_for_Firefox/Getting_Started">スキン</a>は、スタイルシートや画像といった XUL ファイルに適用される<span style="border-bottom: 1px dashed green;" title="behavior">振る舞いの情報</span>をまとめたものです。 +異なるスキンを適用することで、機能的な部分を変更しなくてもウィンドウの外観を変更することが可能です。 +Firefox では、デフォルトでは 1 つのスキンが提供されていますが、 +それ以外のスキンをダウンロードすることも可能です。 +なお、異なるスキンを使用する場合も、XUL ファイル自体は同じになりますが、 +使用されるスタイルシートや画像は、異なったものが使用されます。 +</p><p>Firefox ウィンドウの外観を単純に個人的に変更したい場合は、単にウィンドウと関連付けられたスタイルシートを変更するだけで可能です。 +また、より大きな変更は、新規に<span style="border-bottom: 1px dashed green;" title="entirely">全体をカバーする</span>スキンを作成することで行うことができます。 +Firefox では、デフォルトのスキンを変更するために、テーママネージャを提供しています。 +(Mozilla の内部コードからは「スキン」、利用者のインターフェイスからは「テーマ」と呼ばれますが、これらは同じものを指しています)。 +</p><p>スキンは <a href="ja/CSS">CSS</a> を使用して記述し、 +要素を描画するとき使用する<a href="ja/CSS/Getting_Started/Color">色</a>、<a href="ja/CSS/Getting_Started/Boxes">境界線</a>、画像といったものを定義することが可能です。 +例えば、<code>classic.jar</code> ファイルには、デフォルトのスキンの定義が含まれています。 +このアーカイブ中のグローバルディレクトリには、様々な XUL 要素の表示方法を指定するための主要なスタイル定義が含まれています。 +このため、これらのファイルを変更することで、XUL アプリケーションの外観が変更できるようになります。 +</p> +<h3 id="userChrome.css_.E3.81.AB.E3.82.88.E3.82.8B.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.9E.E3.82.A4.E3.82.BA" name="userChrome.css_.E3.81.AB.E3.82.88.E3.82.8B.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.9E.E3.82.A4.E3.82.BA"> userChrome.css によるカスタマイズ </h3> +<p>ユーザープロファイルディレクトリにある <code>chrome</code> ディレクトリに <code>userChrome.css</code> という名前のファイルを置くことで、アーカイブ自身は変更せずに、設定を上書きすることが可能です。 +このディレクトリは、プロファイルを作成したときに作成され、いくつかの例が置かれているはずです。 +また、<code>userChrome.css</code> でクロムファイルをカスタマイズするのと同様に、 +ここに <code>userContent.css</code> ファイルを置くことで、ウェブページの表示をカスタマイズすることも可能です。 +</p><p>例えば、<code>userChrome.css</code> ファイルの一番最後に、次のような記述を追加すると、 +すべての <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> 要素の背景を赤に変更することができます。 +</p> +<pre>menubar { + background-color: red; +} +</pre> +<p>上記の変更をした後に開く Firefox のウィンドウは、すべてメニューバーが赤くなっているはずです。 +この変更はユーザースタイルシートで行われたため、すべてのウィンドウに対して影響することになります。 +つまり、ブラウザやブックマークのメニューバーはもちろん、チュートリアルで作成中のファイル検索ダイアログのメニューバーでさえも赤くなります。 +</p> +<h3 id=".E3.82.B9.E3.82.AD.E3.83.B3.E3.81.AE.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8" name=".E3.82.B9.E3.82.AD.E3.83.B3.E3.81.AE.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8"> スキンのパッケージ </h3> +<p>特定のウィンドウに対してのみ変更を有効にするには、その XUL ファイルに関連付けられているスタイルシートを変更する必要があります。 +たとえば、ブックマーク管理ウィンドウのメニューコマンドの周りに赤い枠をつけるのであれば、 <code>classic.jar</code> か、利用中のスキンのアーカイブにある <code>bookmarksManager.css</code> に、以下のような記述を追加します。 +</p> +<pre>menuitem { + border: 1px solid red; +} +</pre> +<p>スキンのアーカイブのいずれかを見れば、それらには多くのスタイルシートと多くの画像が含まれていることに気づくはずです。 +これらの画像は、スタイルシートから参照されるようになっています。 +XUL で作成するコンテントをスキン対応にすることを考慮する場合、直接 XUL ファイルから画像への参照を置くことは避けなければなりません。 +これはスキンのデザインによっては、画像は使用しない場合も、さらに複雑なデザインを必要とする可能性もあるからです。 +CSS から画像を参照するように変更することで、XUL から直接参照している箇所を取り除くことは容易にできます。 +また、これによって、XUL ファイルが特定の画像ファイル名に依存することも取り除くことが可能です。 +</p><p>CSS から、画像をボタンやチェックボックスなどの要素に設定するためには、 +以下のように、<code>list-style-image</code> プロパティを使用します。 +</p> +<pre>checkbox { + list-style-image: url("chrome://findfile/skin/images/check-off.jpg"); +} + +checkbox[checked="true"] { + list-style-image: url("chrome://findfile/skin/images/check-on.jpg"); +} +</pre> +<p>このコードは、チェックボックスと関連付けられている画像を変更します。 +1 つめのスタイルでは、通常のチェックボックスの画像を設定し、 +2 つめのスタイルでは、チェックボックスがチェックされたときの画像を設定しています。 +2 つめセレクタにある「<code>checked=true</code>」の<span style="border-bottom: 1px dashed green;" title="modifier">修飾</span>によって、<code>checked</code> 属性が <code>true</code> になった要素にのみスタイルが適用されるようになっています。 +</p><p><small> +<span id="%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8"><a id="%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8"></a><strong>関連ページ</strong></span> : <a href="ja/Creating_a_Skin_for_Firefox">Firefox のためのスキンの作成方法</a>、<a href="ja/CSS/Getting_Started">CSS:はじめに</a> +</small> +</p><p>次のセクションでは、新しいスキンを作成する方法について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Styling_a_Tree" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Creating_a_Skin">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/more_button_features/index.html b/files/ja/archive/mozilla/xul/tutorial/more_button_features/index.html new file mode 100644 index 0000000000..dc6482c087 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/more_button_features/index.html @@ -0,0 +1,111 @@ +--- +title: その他のボタン機能 +slug: Archive/Mozilla/XUL/Tutorial/More_Button_Features +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Using_Spacers" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:The_Box_Model">次のページ »</a></p> +</div> + +<p>このセクションでは、ボタンが持っている付加的な機能について見ていきます。</p> + +<p><span id="Adding_an_Image"></span></p> + +<h2 id=".E7.94.BB.E5.83.8F.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E7.94.BB.E5.83.8F.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">画像を追加する</h2> + +<p>ボタンに画像を追加するには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 要素に対して、 URL を指定した <code><code id="a-image"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></code> 属性を設定します。 画像は、この URL から読み込まれてボタンに表示されます。URL は、相対 URL でも、絶対 URL でもかまいません。</p> + +<p>下に示すボタンは、ラベルと「happy.png」という画像の両方を持っています。 画像はラベルの左側に表示されるはずです。 画像の表示位置は、後述する 2 つの属性を使用することで変更することができます。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_1.xul">表示</a></p> + +<pre><button label="Help" image="happy.png"/> +</pre> + +<p><span id="Button_with_CSS_image"></span></p> + +<h3 id="CSS_.E3.81.AB.E3.82.88.E3.82.8B.E7.94.BB.E5.83.8F.E3.81.AE.E6.8C.87.E5.AE.9A" name="CSS_.E3.81.AB.E3.82.88.E3.82.8B.E7.94.BB.E5.83.8F.E3.81.AE.E6.8C.87.E5.AE.9A">CSS による画像の指定</h3> + +<p>画像を指定するもう 1 つの方法として、CSS の <code><a href="ja/CSS/list-style-type">list-style-image</a></code> スタイルプロパティをボタンに対して設定する方法があります。 この方法は、XUL ファイルを変更することなく、「スキン」（この場合、表示される画像の内容）の変更することを可能にするために設計されています。 以下に例を示します。</p> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_2.xul">表示</a></p> + +<pre><button id="find-button" + label="Find" style="list-style-image: url('happy.png')"/> +</pre> + +<p>この例では、「happy.png」画像がボタンに表示されます。 <code><code id="a-style"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> 属性の機能は、HTML のものと同様です。 仕様上は、<code><code id="a-style"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> 属性は全ての XUL 要素に対して使用できます。 実際には、スタイルの宣言は XUL ファイルから分離された、スタイルシートの方で行なうべきであるという事に注意してください。</p> + +<p><span id="Positioning_the_Images"></span></p> + +<h2 id=".E7.94.BB.E5.83.8F.E3.81.AE.E8.A1.A8.E7.A4.BA.E4.BD.8D.E7.BD.AE" name=".E7.94.BB.E5.83.8F.E3.81.AE.E8.A1.A8.E7.A4.BA.E4.BD.8D.E7.BD.AE">画像の表示位置</h2> + +<p>デフォルトでは、ボタンの画像はラベルの左側に表示されます。 2 つの属性を使用して、表示位置を制御することが可能です。</p> + +<p><code><code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code> 属性は、画像とテキストの並びの順序 (<span style="color: green;">direction</span>) をコントロールします。 この属性に、<code>reverse</code> という値を設定することで、画像はテキストの右側に表示されます。 値を、<code>normal</code> にするか、この属性を設定しなければ、画像はテキストの左側に表示されます。</p> + +<p><code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性は、画像をテキストの上または下に配置する場合に使用します。 デフォルト値は <code>horizontal</code> で、画像は右または左に配置されます。 <code>vertical</code> という値を設定することで、画像を上または下に配置することが可能です。 <code>vertical</code> に設定した場合、<code><code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code> 属性は、画像が上か下かをコントロールします。 値は左右の場合と同じものが使用され、<code>normal</code> は、画像をテキストの上に配置するという意味になり、<code>reverse</code> は、画像をテキストの下に配置するという意味になります。</p> + +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_3.xul">表示</a></p> + +<div class="float-right"><img alt="画像:advbtns1.png"></div> + +<pre><button label="Left" image="happy.png"/> +<button label="Right" image="happy.png" dir="reverse"/> +<button label="Above" image="happy.png" orient="vertical"/> +<button label="Below" image="happy.png" orient="vertical" dir="reverse"/> +</pre> + +<p>この例は、ボタンの配置について 4 種類全てを示しています。 属性の値にデフォルト値が使用できる場合は、属性の指定が省略されていますので注意してください。</p> + +<p><span id="Buttons_with_Extra_Content"></span></p> + +<h2 id=".E4.BB.96.E3.81.AE.E8.A6.81.E7.B4.A0.E3.82.92.E5.90.AB.E3.82.80.E3.83.9C.E3.82.BF.E3.83.B3" name=".E4.BB.96.E3.81.AE.E8.A6.81.E7.B4.A0.E3.82.92.E5.90.AB.E3.82.80.E3.83.9C.E3.82.BF.E3.83.B3">他の要素を含むボタン</h2> + +<p>ボタンの開始と終了タグによって任意の要素を囲むことにより、ボタンの内部にその内容を生成させることが可能です。 これは頻繁に使うようなものではないと思いますが、カスタム要素を作成するような場合には使用する事になるかもしれません。</p> + +<p>次の例は、途中の 2 つの単語が赤で表示されるボタンを作成します。</p> + +<p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_4.xul">表示</a></p> + +<pre><button> + <description value="This is a"/> + <description value="rather strange" style="color: red;"/> + <description value="button"/> +</button> +</pre> + +<p>ボタンの中には、どんな XUL 要素でも置くことが出来ます。 HTML 要素は無視されるため、置きたい場合は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素によってラップする必要があります。 ボタンに <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性が指定されていた場合、ボタン内部に置かれた全ての内容をラベルがオーバライドするため、ラベルの値のみが表示されます。</p> + +<p><span id="Button_with_menupopup"></span></p> + +<h3 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E4.BB.98.E3.81.8D.E3.83.9C.E3.82.BF.E3.83.B3" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E4.BB.98.E3.81.8D.E3.83.9C.E3.82.BF.E3.83.B3">メニュー付きボタン</h3> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> をボタンの内部に置くことによって、ボタンが押されたときに <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> のようにメニューをドロップダウンさせる事が可能です。 但し、この場合は、<code><a href="ja/XUL/Attribute/button.type">type</a></code> 属性の値として <code>menu</code> を設定する必要があります。</p> + +<p><span id="%E4%BE%8B_5"><a id="%E4%BE%8B_5"></a><strong>例 5</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advbtns_5.xul">表示</a></p> + +<div class="float-right"><img alt="画像:advbtns2.jpg"></div> + +<pre><button type="menu" label="Device"> + <menupopup> + <menuitem label="Printer"/> + <menuitem label="Mouse"/> + <menuitem label="Keyboard"/> + </menupopup> +</button> +</pre> + +<p>この例では、ユーザがボタンをクリックすると 3 つの項目を含んだメニューがポップアップします。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> と違って、ポップアップしたメニューの項目をクリックしてもボタンのラベルが変化しないことに注意してください。 このタイプのボタンは、メニューの各項目に実行するタスクのスクリプトを関連付けることで、実行したい操作を選択するためのメニューとして使われます。 メニューについての詳細は、もう少し後のセクションで見ていく予定です。</p> + +<p><code><a href="ja/XUL/Attribute/button.type">type</a></code> 属性の値として <code>menu-button</code> を設定することもできます。 この場合もメニューの付いたボタンが作成されますが、外見が違っています。 上の画像で違いを示します。 左のボタンが「<code>menu</code>」で、右のボタンが「<code>menu-button</code>」で作成したものです。 どちらにも、メニューが存在する事を示す矢印が表示されています。 左の「<code>menu</code>」の方は、ユーザがボタンのどこをクリックしてもメニューが表示されます。 右の「<code>menu-button</code>」の方は、ユーザがメニューを出すには矢印をクリックしなければなりません。</p> + +<p>次のセクションでは、XUL 要素がウィンドウ内でどのように配置されるかについて、さらに詳しく学びます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Using_Spacers" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:The_Box_Model">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/more_event_handlers/index.html b/files/ja/archive/mozilla/xul/tutorial/more_event_handlers/index.html new file mode 100644 index 0000000000..ca57dce8e2 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/more_event_handlers/index.html @@ -0,0 +1,148 @@ +--- +title: イベントハンドラの詳細 +slug: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Event_Handlers" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Keyboard_Shortcuts">次のページ »</a></p> +</div> +<p>このセクションでは、イベントオブジェクトについて調査し、その後、付加的なイベントについても説明します。</p> +<p><span id="The_Event_Object"></span></p> +<h3 id=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88" name=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88">イベントオブジェクト</h3> +<p>それぞれのイベントハンドラは、<a href="ja/DOM/event">イベントオブジェクト</a>を保持する引数を、1 つとります。 属性形式のイベントリスナーでは、このイベントは、スクリプトコードから「<code>event</code>」という名前で参照可能な暗黙の引数になります。 <a href="ja/DOM/element.addEventListener">addEventListener</a> 形式の場合は、リスナー関数の第 1 引数がイベントオブジェクトになります。 イベントオブジェクトには、イベント処理の間に調査可能なプロパティがたくさんあります。 プロパティの完全な一覧は、<a class="external" href="http://xulplanet.com/references/objref/Event.html">XULPlanet のオブジェクトリファレンス</a> で参照可能です。</p> +<p>前のセクションでは、イベントが発生した要素への参照を保持する、<code><a href="ja/DOM/event">event</a></code> の <code><a href="ja/DOM/event.target">target</a></code> プロパティについて見ています。 それと類似したプロパティである <code><a href="ja/DOM/event.currentTarget">currentTarget</a></code> は、現在処理中のイベントリスナーを持っている要素を保持しています。 下の例では、<code><a href="ja/DOM/event.currentTarget">currentTarget</a></code> は常に <code>vbox</code> を保持しますが、 <code><a href="ja/DOM/event.target">target</a></code> は、特定の要素、つまり <code>button</code> か <code>checkbox</code> のどちらか活性化された方を保持します。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_1.xul">表示</a></p> +<pre><vbox oncommand="alert(event.currentTarget.tagName);"> + <button label="OK"/> + <checkbox label="Show images"/> +</vbox> +</pre> +<p><span id="Stop_Event_Propagation"></span></p> +<h4 id=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E4.BC.9D.E6.92.AD.E3.81.AE.E4.B8.AD.E6.AD.A2" name=".E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E4.BC.9D.E6.92.AD.E3.81.AE.E4.B8.AD.E6.AD.A2">イベント伝播の中止</h4> +<p>どこかでイベントを処理したのなら、そのイベントがどこまで<span style="border-bottom: 1px dashed green;" title="propagation">伝播</span> されたかに関係なく、そのイベントが他の要素にも送信されるのを止めたい、 言い換えると、<span style="border-bottom: 1px dashed green;" title="capturing">捕捉</span>フェーズや、<span style="border-bottom: 1px dashed green;" title="bubbling">浮上</span>フェーズが続かないように停止したいことがあると思います。 イベント伝播を停止する方法は、イベントリスナーを要素へ結びつける方法に依存して、いくつかの手段があります。</p> +<p>イベントの捕捉フェーズは、浮上フェーズの前に行われることを思い出してください。 捕捉リスナーは、常に浮上リスナーの前に起動されます。 イベント捕捉処理によって、イベントの伝播が中止された場合、後続の捕捉リスナーや全ての浮上リスナーは、イベントの通知を受けることはありません。 イベントの伝播を中止させるには、以下の例で示すように、イベントオブジェクトの <code><a href="ja/DOM/event.stopPropagation">stopPropagation</a></code> メソッドを呼び出します。</p> +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_2.xul">表示</a></p> +<pre><hbox id="outerbox"> + <button id="okbutton" label="OK"/> +</hbox> + +<script> +function buttonPressed(event){ + alert('Button was pressed!'); +} + +function boxPressed(event){ + alert('Box was pressed!'); + event.stopPropagation(); +} + +var button = document.getElementById("okbutton"); +button.addEventListener('command',buttonPressed,true); + +var outerbox = document.getElementById("outerbox"); +outerbox.addEventListener('command',boxPressed,true); +</script> +</pre> +<p>この例では、個別のイベントリスナーがボタンとボックスのそれぞれに設定されています。 <code><a href="ja/DOM/event.stopPropagation">stopPropagation</a></code> メソッドが、ボックスのリスナーから呼び出されるため、ボタンのリスナーが呼び出されることはありません。 <code><a href="ja/DOM/event.stopPropagation">stopPropagation</a></code> の呼び出しを取り除いた場合、両方のリスナーが呼び出され、両方のアラートが現れることになります。</p> +<p><span id="Prevent_Default_Action"></span></p> +<h4 id=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.81.AE.E5.8B.95.E4.BD.9C.E3.82.92.E5.A6.A8.E3.81.92.E3.82.8B" name=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.81.AE.E5.8B.95.E4.BD.9C.E3.82.92.E5.A6.A8.E3.81.92.E3.82.8B">デフォルトの動作を妨げる</h4> +<p>イベントに対応するイベントハンドラが登録されていない場合は、捕捉と浮上の両方のフェーズが終了した後、要素はそのイベントをデフォルトの方法で処理します。 何が行われるかは、イベントの種類と要素の種類に依存します。 例えば、「popupshowing」イベントは、ポップアップへ表示直前に送られて、デフォルトの動作はポップアップの表示になります。 このデフォルトの動作を妨げた場合、ポップアップは表示されなくなります。 デフォルトの動作を<span style="border-bottom: 1px dashed green;" title="prevent">妨げる</span>には、イベントオブジェクトの <code><a href="ja/DOM/event.preventDefault">preventDefault</a></code> メソッドを、以下の例のように呼び出すことで可能です。</p> +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_3.xul">表示</a></p> +<pre><button label="Types" type="menu"> + <menupopup onpopupshowing="event.preventDefault();"> + <menuitem label="Glass"/> + <menuitem label="Plastic"/> + </menupopup> +</button> +</pre> +<p>あるいは、属性イベントリスナーの場合は、単にコードから false を返すことでも可能です。 デフォルトの動作をさせないことと、 <code><a href="ja/DOM/event.stopPropagation">stopPropagation</a></code> メソッドで、イベントの伝播を中止することとは同じではないことに注意してください。 デフォルトの動作が妨げられたとしても、イベントの伝播は続行されます。 同様に <code><a href="ja/DOM/event.stopPropagation">stopPropagation</a></code> メソッドは、デフォルトの動作を妨げません。 両方とも止めたい場合は、両方のメソッドを呼び出さなければなりません。</p> +<p>伝播、あるいはデフォルトの動作のいずれにおいても、いったん中止された場合、そのイベントに対しては、どちらも再開させることはできないことに注意してください。</p> +<p>以下に、利用可能なイベントの一部について記述します。 完全な一覧は、<a class="external" href="http://www.xulplanet.com/references/elemref/ref_EventHandlers.html">XULPlanet のイベントリファレンス</a> で参照することができます。</p> +<p><span id="Mouse_Events"></span></p> +<h3 id=".E3.83.9E.E3.82.A6.E3.82.B9.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88" name=".E3.83.9E.E3.82.A6.E3.82.B9.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88">マウスイベント</h3> +<p>マウス固有の動作に対する処理に用いられるイベントを、以下に記述します。</p> +<dl> + <dt> + click </dt> + <dd> + 要素の上で、マウスボタンが押されて離されたときに呼び出されます。</dd> +</dl> +<dl> + <dt> + dblclick </dt> + <dd> + マウスボタンがダブルクリックされたときに呼び出されます。</dd> +</dl> +<dl> + <dt> + mousedown </dt> + <dd> + 要素の上で、マウスボタンが押された瞬間に呼び出されます。イベントハンドラはマウスボタンが押された直後に、離されるのを待たず、呼び出されます。</dd> +</dl> +<dl> + <dt> + mouseup </dt> + <dd> + 要素の上で、マウスボタンが離されたときに呼び出されます。</dd> +</dl> +<dl> + <dt> + mouseover </dt> + <dd> + 要素の上に、マウスポインタが重なったときに呼び出されます。これを要素のハイライト処理に利用することもできますが、 CSS で自動的に行う方法が提供されているため、イベント処理で行うべきではありません。といっても、ステータスバーに何らかのヘルプを表示させたい場合には使う必要があるでしょう。</dd> +</dl> +<dl> + <dt> + mousemove </dt> + <dd> + 要素の上で、マウスポインタが動いたときに呼び出されます。ユーザがマウスを動かすたびにイベントが呼び出されるため、このハンドラで時間を要する処理を行うことは避けるべきです。</dd> +</dl> +<dl> + <dt> + mouseout </dt> + <dd> + 要素の上から、マウスポインタが離れたときに呼び出されます。要素のハイライトを消したり、ステータスバーのテキストを取り除くために利用できます。</dd> +</dl> +<p>利用者が、マウスボタンを押し下げたまま、マウスをあちこちに動かすときに発生する、ドラッグ関連のイベントもあります。 それらのイベントは、<a href="ja/Drag_and_Drop">ドラッグ＆ドロップ</a>に記述されています。</p> +<p><span id="Mouse_Button_Event_Properties"></span></p> +<h4 id=".E3.83.9E.E3.82.A6.E3.82.B9.E3.83.9C.E3.82.BF.E3.83.B3.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.83.9E.E3.82.A6.E3.82.B9.E3.83.9C.E3.82.BF.E3.83.B3.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">マウスボタンイベントプロパティ</h4> +<p>マウスボタンイベントが発生した場合、イベントオブジェクトにはどのマウスボタンが押されたかや、マウスポインタの位置などを表す、付加的なプロパティが多数利用可能になります。 どのマウスボタンが押されたかは、<code><a href="ja/DOM/event">event</a></code> の <code><a href="ja/DOM/event.button">button</a></code> プロパティにより得られます。 設定される値は、 0 が左ボタン、1 が中央ボタン、2 右はボタンになります。 ただし、マウスの設定を変えた場合、これらの値とは異なっていることがあります。</p> +<p><code><a href="ja/DOM/event.detail">detail</a></code> プロパティは、ボタンが何回連続して素早くクリックされたかを保持しています。 これによりシングルクリック、ダブルクリック、トリプルクリックの判別が可能になります。 もちろん、ダブルクリックのみのチェックを行いたい場合は、代わりに dblclick を使うことができます。 click イベントは最初のクリックで一度、次のクリックでもう一度、３度目のクリックで更にもう一度といった具合に送出されますが、 dblclick イベントは、ダブルクリックごとに、一度だけ送出されます。</p> +<p><code><a href="ja/DOM/event.button">button</a></code> と <code><a href="ja/DOM/event.detail">detail</a></code> プロパティは、マウスボタン関連のイベントにのみ設定され、マウスポインタ移動関連のイベントには設定されません。 例えば、mousemove イベントでは、両プロパティとも 0 に設定されます。</p> +<p><span id="Mouse_Position_Event_Properties"></span></p> +<h4 id=".E3.83.9E.E3.82.A6.E3.82.B9.E4.BD.8D.E7.BD.AE.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.83.9E.E3.82.A6.E3.82.B9.E4.BD.8D.E7.BD.AE.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">マウス位置イベントプロパティ</h4> +<p>また、イベントが発生したときのマウス位置の座標を保持するプロパティについては、すべてのマウスイベントで設定されます。 設定される座標は、2 つあり、それぞれ基点が異なっています。 まず、<code><a href="ja/DOM/event.screenX">screenX</a></code> と <code><a href="ja/DOM/event.screenY">screenY</a></code> プロパティは、画面 (screen) の左上隅からの相対座標を示しています。 次に、<code><a href="ja/DOM/event.clientX">clientX</a></code> と <code><a href="ja/DOM/event.clientY">clientY</a></code> プロパティは、文書の左上隅からの相対座標を示しています。 マウス座標を表示する例を、以下に示します。</p> +<p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advevents_4.xul">表示</a></p> +<pre><script> + +function updateMouseCoordinates(event){ + var text = "X:" + event.clientX + " Y:" + event.clientY; + document.getElementById("xy").value = text; +} +</script> + +<label id="xy"/> +<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/> +</pre> +<p>この例では、効果の確認を容易にするために、ボックスのサイズを明示的に指定しています。 イベントハンドラは、<code><a href="ja/DOM/event.clientX">clientX</a></code> と <code><a href="ja/DOM/event.clientY">clientY</a></code> プロパティを取得して文字列に変換し、ラベルの <code>value</code> プロパティに代入しています。 引数として、「<code>event</code>」を <code>updateMouseCoordinates</code> 関数に渡さなければならないことに注意してください。 また、マウスを、ボックスの境界を越して素早く動かしたとき、座標の更新がボックスの境界である 400 の手前で止まることが確認できると思います。 これは、mousemove イベントが、マウスの動く速さに依存した間隔で発生するために、 マウスが境界から若干離れたところにある場合でも、次のイベントが発生するまでの間に、境界を越した位置まで移動することができるためです。 明らかに、マウスの軌跡にあるすべての画素を通過するごとに mousemove イベントを送出するのが非効率すぎるということは理解してもらえる思います。</p> +<p><span id="Element_Relative_Coordinates"></span></p> +<h4 id=".E8.A6.81.E7.B4.A0.E7.9B.B8.E5.AF.BE.E3.81.AE.E5.BA.A7.E6.A8.99" name=".E8.A6.81.E7.B4.A0.E7.9B.B8.E5.AF.BE.E3.81.AE.E5.BA.A7.E6.A8.99">要素相対の座標</h4> +<p>イベントが発生した場所を、ウインドウ全体ではなく、その要素との相対的な座標で取得したいことは、しばしばあると思います。 そのためには、次のコードで示すように、イベントの位置から要素の位置を引き算することで求めることが可能です。</p> +<pre>var element = event.target; +var elementX = event.clientX - element.boxObject.x; +var elementY = event.clientY - element.boxObject.y; +</pre> +<p>XUL 要素は、ボックスオブジェクトを持っており、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/boxObject">boxObject</a></span></code></code> プロパティを利用して取得できます。 ボックスオブジェクトについての詳細は、<a href="ja/XUL_Tutorial/Box_Objects">後のセクション</a>で学ぶことになりますが、 ここでは、とりあえず要素の x, y 座標を含む、要素の表示のされ方に関係する情報を保持しているものであると理解してください。 この例のコードでは、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/boxObject">boxObject</a></span></code></code> から得られる要素の座標と、イベントの座標の引き算を行うことで、要素内の相対的なイベントの位置を算出しています。</p> +<p><span id="Load_Events"></span></p> +<h3 id="load_.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88" name="load_.E3.82.A4.E3.83.99.E3.83.B3.E3.83.88">load イベント</h3> +<p>load イベントは、XUL ファイルの読み込みが完了して、内容が表示される直前に、文書 (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> タグ) に送出されます。 通常、このイベントは、利用者にウインドウが使用可能になる前に行う必要のある、フィールドの初期化などの処理を行うために使用されます。 なお、こういった初期化処理は、スクリプトを関数の外のトップレベルに追加するのではなく、load イベントを利用して行うべきです。 そうしないと、XUL 要素が読み込まれる前だったり、完全に初期化されていないことがあるため、何かが予期した動作にならない可能性があります。 load イベントを使うには、 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> タグ内に <code><code id="a-onload"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onload">onload</a></code></code> 属性を設定します。 必要に応じて、インターフェイスを初期化するコードを load ハンドラから呼び出すようにしてください。</p> +<p>ウインドウが閉じられたとき、あるいはブラウザに表示されている場合で、ページが別の URL に変えられたときに呼び出される、unload イベントというのもあります。 このイベントは、例えば変更された情報を保存する場合などに利用できます。</p> +<p>次のセクションでは、キーボードショートカットの追加方法について見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Event_Handlers" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Keyboard_Shortcuts">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/more_menu_features/index.html b/files/ja/archive/mozilla/xul/tutorial/more_menu_features/index.html new file mode 100644 index 0000000000..3b6aba21f6 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/more_menu_features/index.html @@ -0,0 +1,114 @@ +--- +title: より高度なメニュー機能 +slug: Archive/Mozilla/XUL/Tutorial/More_Menu_Features +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Simple_Menu_Bars" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Popup_Menus">次のページ »</a></p> +</div></div> +<p>このセクションでは、サブメニューとチェック付きメニューの作り方を見て行きます。</p> +<p><span id="Creating_Submenus"></span></p> +<h3 id=".E3.82.B5.E3.83.96.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90" name=".E3.82.B5.E3.83.96.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90">サブメニューの作成</h3> +<p>ここまでに説明した要素を使って、他のメニューを入れ子にした、サブメニューを作ることが可能です。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> の中には、任意の要素を配置可能であることを思い出してください。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> の中に、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> と <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code> を配置する場合については、前のセクションで説明していますが、 サブメニューを作る場合は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素の中に 、単に <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 要素を配置するだけで可能です。 この記述は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 要素が、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> の中に直接配置されていない場合も有効なことからも問題なく動作することが分かると思います。</p> +<p>以下に、File メニューの中に簡単なサブメニューを作成する例を示します。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_1.xul">表示</a></p> +<div class="float-right"> + <img alt="画像:menubar-ex3.png" src="/@api/deki/files/757/=Menubar-ex3.png"></div> +<pre><toolbox flex="1"> + <menubar id="sample-menubar"> + <menu id="file-menu" label="File"> + <menupopup id="file-popup"> + <menu id="new-menu" label="New"> + <menupopup id="new-popup"> + <menuitem label="Window"/> + <menuitem label="Message"/> + </menupopup> + </menu> + <menuitem label="Open"/> + <menuitem label="Save"/> + <menuseparator/> + <menuitem label="Exit"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p><span id="Adding_a_menu_to_our_Find_Files_example"></span></p> +<h3 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0">ファイル検索ダイアログにメニューを追加</h3> +<div class="highlight"> + <p>それでは、ファイル検索ダイアログにメニューを追加してみましょう。 File メニューと Edit メニューに、簡単な<span style="border-bottom: 1px dashed green;" title="command">操作項目</span>をいくつか追加してみます。 追加する内容は、上の例と似たものになります。</p> + <pre class="eval"><toolbox> + + <span class="highlightred"><menubar id="findfiles-menubar"> + <menu id="file-menu" label="File" accesskey="f"> + <menupopup id="file-popup"> + <menuitem label="Open Search..." accesskey="o"/> + <menuitem label="Save Search..." accesskey="s"/> + <menuseparator/> + <menuitem label="Close" accesskey="c"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit" accesskey="e"> + <menupopup id="edit-popup"> + <menuitem label="Cut" accesskey="t"/> + <menuitem label="Copy" accesskey="c"/> + <menuitem label="Paste" accesskey="p" disabled="true"/> + </menupopup> + </menu> + </menubar></span> + +<toolbar id="findfiles-toolbar> +</pre> + <p><img alt="画像:menubar1.png" src="https://developer.mozilla.org/@api/deki/files/759/=Menubar1.png"></p> + <p>ここでは、いくつかの操作項目を持った、2 つのメニューを追加しています。 まず、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> の中に <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> が追加されていることを確認してください。 ここで、操作項目「Open Search」と「Save Search」で続いて置かれている 3 つのドットは、利用者に、その操作項目を選ぶとダイアログが開くことを示すための一般的は表記方法になります。 また、それぞれのメニューとメニュー項目にはアクセスキーが追加されています。 画像から、メニューラベルでアクセスキーに該当する文字に下線が引かれていることがわかると思います。 また、なにも貼り付けるものがないと仮定して、Paste 操作は無効にしてあります。</p> + <p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-advmenu.xul">表示</a></p> +</div> +<p><span id="Adding_Checkmarks_to_Menus"></span></p> +<h3 id=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9E.E3.83.BC.E3.82.AF.E3.82.92.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AB.E8.BF.BD.E5.8A.A0" name=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9E.E3.83.BC.E3.82.AF.E3.82.92.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AB.E8.BF.BD.E5.8A.A0">チェックマークをメニューに追加</h3> +<p>多くのアプリケーションでは、メニュー項目にチェックをつけることが可能です。 例えば、操作項目のテキストの横に、チェックがついてる場合は有効になり、チェックがついてない場合は無効になるような機能があげられます。 このメニューは、利用者がメニューを選択したときに、チェックの状態が切り替わります。 同じように、メニュー項目にラジオボタンを作りたいと思うことがあるかもしれません。</p> +<p>メニューのチェックは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/checkbox" title="checkbox">checkbox</a></code></code> 要素や <code><code><a href="/ja/docs/Mozilla/Tech/XUL/radio" title="radio">radio</a></code></code> 要素と同じように作成します。 まず 2 つの属性、<code><a href="ja/XUL/Attribute/button.type">type</a></code> と、<code><a href="ja/XUL/Attribute/menuitem.name">name</a></code> が必要となります。 <code><a href="ja/XUL/Attribute/button.type">type</a></code> は、チェックのタイプを指示し、<code><a href="ja/XUL/Attribute/menuitem.name">name</a></code> は、コマンドをまとめてグループ化するために使用します。 以下の例は、チェックつきの項目を持つメニューを作成します。</p> +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_2.xul">表示</a></p> +<pre><toolbox> + <menubar id="options-menubar"> + <menu id="options_menu" label="Options"> + <menupopup> + <menuitem id="backups" label="Make Backups" type="checkbox"/> + <menuitem id="backups" label="Email Administrator" type="checkbox" checked="true"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p><code><a href="ja/XUL/Attribute/button.type">type</a></code> 属性を、メニュー項目 (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code>) をチェック可能にするために追加しています。 この属性の値を <code>checkbox</code> に設定すると、メニュー項目は選択するごとにチェックのオンとオフが切り替わります。</p> +<p><span id="Menu_with_radios"></span></p> +<h4 id=".E3.83.A9.E3.82.B8.E3.82.AA.E3.83.9C.E3.82.BF.E3.83.B3.E5.9E.8B.E3.81.AE.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC" name=".E3.83.A9.E3.82.B8.E3.82.AA.E3.83.9C.E3.82.BF.E3.83.B3.E5.9E.8B.E3.81.AE.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC">ラジオボタン型のメニュー</h4> +<p>基本的なチェックに加えて、<code><a href="ja/XUL/Attribute/button.type">type</a></code> の値に <code>radio</code> と設定することで、ラジオボタン型のチェックを作ることができます。 ラジオボタン型のチェックは、メニュー項目のグループのうち、1 つの項目だけがチェックされるようにするために使用します。 例としては、複数のフォントから利用したい 1 つのフォントを選択するような、フォントメニューを挙げることができます。 ラジオボタン型では、違うメニュー項目を選択したとき、前に選択されていた項目のチェックは自動的に外されます。</p> +<p>メニュー項目を、まとめてグループ化するためには、<code><a href="ja/XUL/Attribute/menuitem.name">name</a></code> 属性をグループ化する <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 要素に置く必要があります。 <code><a href="ja/XUL/Attribute/menuitem.name">name</a></code> 属性の値には同じ文字列を指定します。 以下に、ラジオボタン型のメニューの実例を示します。</p> +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advmenu_3.xul">表示</a></p> +<pre><toolbox> + <menubar id="planets-menubar"> + <menu id="planet-menu" label="Planet"> + <menupopup> + <menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/> + <menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/> + <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/> + <menuseparator/> + <menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/> + <menuitem id="moon" label="Moon" type="radio" name="inhabited"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p>この例を試してみることによって、最初の 3 つのメニュー項目のうち、1 つだけがチェックできることが確認できるはずです。 これらは、全て同じ <code><a href="ja/XUL/Attribute/menuitem.name">name</a></code> 属性を持っているため、まとめてグループ化されています。 その後のメニュー項目である「Earth」もラジオボタン型ですが、<code><a href="ja/XUL/Attribute/menuitem.name">name</a></code> 属性に違う値が設定されているため、グループに含まれていません。</p> +<p>当然ですが、グループ化する項目は、すべて同じメニューに置く必要があります。 なお (できなくても問題になる状況はあまりないとは思いますが) グループ化するそれぞれのメニュー項目が、互いに隣接している必要はありません。</p> +<p>次のセクションでは、ポップアップメニューの作り方を見て行きます。</p> +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Simple_Menu_Bars" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Popup_Menus">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/more_tree_features/index.html b/files/ja/archive/mozilla/xul/tutorial/more_tree_features/index.html new file mode 100644 index 0000000000..a0c9d151ab --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/more_tree_features/index.html @@ -0,0 +1,116 @@ +--- +title: 高度なツリー機能 +slug: Archive/Mozilla/XUL/Tutorial/More_Tree_Features +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/More_Tree_Features +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Trees" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Tree_Selection">次のページ »</a></p> +</div></div> +<p>このセクションでは、さらに高度なツリーの機能について見ていきます。</p> +<h2 id="Hierarchical_trees" name="Hierarchical_trees">階層ツリー</h2> +<p>ツリー要素は、ファイルマネージャやブラウザのブックマーク一覧に見られるような、階層を持ったリストの作成に利用することもできます。 このためにツリービューには、項目が位置しているツリー階層を指定するための関数がいくつかあります。 ツリーに置かれた各項目には、0 から始まる (階層の) レベルが設定されています。 ツリーの最上位にある項目のレベルは 0 で、その子項目のレベルが 1 、さらにその子項目のレベルは 2 といった具合に設定されることになります。 ツリーは、行部分の描画内容を確定するために、ビューに対して各項目のレベルを問い合わせます。</p> +<p>ツリーでは、親項目の開閉状態を示すアイコンや、親子間を結ぶ線の描画を行うとともに、行の描画では階層レベルに応じたインデントも行ってくれます。 ただし、このために、ビュー側では必要な行のレベルを記録しておく必要があります。 この処理は、しばしば非常にややこしくなりますが、 幸い、組み込みのコンテントツリービューは、こういった難しい処理はすべて引き受けてくれます。</p> +<p>入れ子の行を作成するために必要なことは、2 つめの <code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> 要素を、親となる <code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> 要素の中に加えることだけです。 あとは、加えた <code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> の中に項目を加えるだけで、その項目の子となる行を加えていくことができます。 なお、内側の <code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> 要素を <code><a href="/ja/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code> 要素の中に置くのは<u>正しい記述ではない</u>ため動作しません。 必ず <code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> の中に置くようにしてください。</p> +<p>この手順を繰り返せば、深く入れ子になったツリーを作成することができます。 つまり、<code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> 要素には、 <code><a href="/ja/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code> 要素による (その項目自身の内容と対応する) 単一の行の宣言と、 <code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> 要素による複数の子項目の宣言を含むことができるということです。</p> +<p>また、これ以外に階層が正しく動作するために必要なことが 2 つあります。 まず、子を持つ <code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> 要素に対して、コンテナであることを明示しておく必要があります。 これは、以下のように <code id="a-container"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code> 属性を使用して設定します。</p> +<pre class="brush:xml"><treeitem container="true" /> +</pre> +<p>これにより、利用者が <code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> 要素に該当する列をクリックすることで、内部の行を開閉することができるようになります。 子の行を、最初から開いた状態にしておくには <code id="a-open"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code> 属性を設定します。 利用者が、親項目を開閉する操作をしたとき、項目の開閉状態を切り替えるためにビューの <code>toggleOpenState()</code> 関数が呼び出されることになります。 コンテントツリービューでは、この関数の処理によって <code id="a-open"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/open">open</a></code> 属性への状態の反映が行われます。</p> +<p>次に、最初の列 (<code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code>) に <code id="a-primary"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/primary">primary</a></code> 属性を設定することが必要です。 これによって、行が開閉可能かどうかを示す「+ 記号」や「小さな三角形」といったアイコンが最初の列にあるセルの先頭に付加され、 子の行はインデントされて表示されるようになります。 なお、<code id="a-primary"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/primary">primary</a></code> を設定した列は、利用者が列右端のドロップダウンリストで非表示にする操作ができないことに注意してください。</p> +<h3 id="Example_hierarchical_tree" name="Example_hierarchical_tree">階層ツリーの例</h3> +<p>階層ツリーの簡単な例を、以下に示します。</p> +<div> + <span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_1.xul">表示</a></div> +<pre class="brush:xml"><tree rows="6"> + <treecols> + <treecol id="firstname" label="First Name" primary="true" flex="3" /> + <treecol id="lastname" label="Last Name" flex="7" /> + </treecols> + + <treechildren> + <treeitem container="true" open="true"> + <treerow> + <treecell label="Guys" /> + </treerow> + + <treechildren> + <treeitem> + <treerow> + <treecell label="Bob" /> + <treecell label="Carpenter" /> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Jerry" /> + <treecell label="Hodge" /> + </treerow> + </treeitem> + </treechildren> + </treeitem> + </treechildren> +</tree> +</pre> +<div class="float-right"> + <img height="121" src="https://mdn.mozillademos.org/files/126/advtrees1.png" width="250"></div> +<p>この例によって、階層ツリーが作成されています。 画像から、最初の行の先頭に小さな「+」または「-」記号が表示されているのがわかると思います。 これは子の行が存在することを示していて、しばしば 「<span style="border-bottom: 1px dashed green;" title="twisty">ツイスティ</span>」と呼ばれます。 利用者は、その行をクリックすることでリストを開閉することができます。 また、子の行はインデントされています。 なお、親の「Guys」の行は、単に子の行をまとめるためにのみ存在するので、列は 1 つしか必要としません。</p> +<p>外側の <code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code> 要素は、<code><a href="/ja/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code> 要素と <code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code> 要素を 1 つずつ含んでいます。 前者は親の行のためのデータを作成し、後者は子の項目を含みます。</p> +<p>同様にすることで、行の入れ子を深くすることもできます。 子を含む行には <code id="a-container"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code> 属性を設定する必要があることを覚えておいてください。 単に子の行が存在するかどうかだけでは、コンテナとして扱うべきかを判断するのに十分ではないため、 子の行の存在の有無にかかわらず、コンテナとして扱うべき行に <code id="a-container"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/container">container</a></code> 属性を設定する仕様になっています。 例えば、ファイルが存在しない空のディレクトリは、ファイルではなくコンテナとして扱われるべきだろうということです。</p> +<h2 id="More_about_Tree_Columns" name="More_about_Tree_Columns">ツリーの列の詳細</h2> +<p>ツリー追加可能な属性に <code>enableColumnDrag</code> があります (注:名前に大文字が混じっています)。 この値を <code>true</code> に設定すると、利用者が列の見出しをドラッグすることで、列を並び替えることが可能になります。</p> +<p>また、利用者が列の幅を変更したいと思うケースも多いはずです。 それを実現するには <code><a href="/ja/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> 要素を、各 <code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code> 要素の間に加えます。 これにより、小さなノッチが各列の見出しの間に表示され、 利用者はこれをドラッグして列の幅を変えることができるようになります。 なお、スタイルクラス <code>tree-splitter</code> を指定することで、このノッチを隠した外観にすることも可能です。 この場合も機能に影響はないため、依然として列幅を変更することは可能です。</p> +<p>列幅の下限と上限は、それぞれ <code id="a-minwidth"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/minwidth">minwidth</a></code> と <code id="a-maxwidth"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxwidth">maxwidth</a></code> 属性で設定することができます。</p> +<p>列の <code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code> 属性の値を <code>true</code> にすると、列は非表示がデフォルトになります。 このときも、利用者は見出し行の端にあるドロップダウンリストからその列を選択することで、その列を表示するように変更できます。</p> +<h3 id="Remembering_State_of_Columns" name="Remembering_State_of_Columns">列の状態を保存する</h3> +<div class="float-right"> + <img height="112" src="https://mdn.mozillademos.org/files/922/XUL_rememberingStatofColumns.png" width="408"></div> +<p>詳細は<a href="/ja/docs/XUL/Tutorial/Persistent_Data">後のセクション</a>で説明する予定ですが、 XUL の全ての要素は、 <code id="a-persist"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code> 属性を設定することでセッション終了時に要素の状態を保存できるため、 これを利用することで、列の状態をセッション間で保存することが可能です。 つまり、利用者が列のレイアウトを自分の好みで変更したとき、その内容を自動的に保存して、次回の表示時に再現するように指定できます。 このためには、以下の例で示すように、いくつかの属性を保存する必要があります。</p> +<div> + <span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advtrees_2.xul">表示</a></div> +<pre class="brush:xml"><tree enableColumnDrag="true" flex="1"> + <treecols> + <treecol id="runner" label="Runner" flex="2" persist="width ordinal hidden" /> + <splitter class="tree-splitter" /> + <treecol id="city" label="Home City" flex="2" persist="width ordinal hidden" /> + <splitter class="tree-splitter" /> + <treecol id="starttime" label="Start Time" flex="1" persist="width ordinal hidden" /> + <splitter class="tree-splitter" /> + <treecol id="endtime" label="End Time" flex="1" persist="width ordinal hidden" /> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="Joshua Granville" /> + <treecell label="Vancouver" /> + <treecell label="7:06:00" /> + <treecell label="9:10:26" /> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Robert Valhalla" /> + <treecell label="Seattle" /> + <treecell label="7:08:00" /> + <treecell label="9:15:51" /> + </treerow> + </treeitem> + </treechildren> +</tree> +</pre> +<p>永続性 (persist) を持たせることで保存する必要があるのは、以下の 3 つの属性になります。</p> +<ul> + <li>列の幅を保持する <code id="a-width"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code> 属性</li> + <li>列の並び順を保持する <code id="a-ordinal"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ordinal">ordinal</a></code> 属性</li> + <li>列が表示か非表示かを保持する <code id="a-hidden"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidden">hidden</a></code> 属性</li> +</ul> +<p>次のセクションでは、ツリーで選択されている項目の取得と設定について見ていきます。</p> +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL/Tutorial/Trees" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL/Tutorial/Tree_Selection">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/more_wizards/index.html b/files/ja/archive/mozilla/xul/tutorial/more_wizards/index.html new file mode 100644 index 0000000000..a408482cf8 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/more_wizards/index.html @@ -0,0 +1,101 @@ +--- +title: 高度なウィザード +slug: Archive/Mozilla/XUL/Tutorial/More_Wizards +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/More_Wizards +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_a_Wizard" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Overlays">次のページ »</a></p> +</div> +<p>このセクションでは、いくつかのウィザードの付加的な機能について説明していきます。 +</p> +<h3 id=".E8.A4.87.E9.9B.91.E3.81.AA.E3.83.8A.E3.83.93.E3.82.B2.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3" name=".E8.A4.87.E9.9B.91.E3.81.AA.E3.83.8A.E3.83.93.E3.82.B2.E3.83.BC.E3.82.B7.E3.83.A7.E3.83.B3"> 複雑なナビゲーション </h3> +<p>通常、ウィザードでは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/wizardpage" title="wizardpage">wizardpage</a></code></code> を、XUL ファイルに記述された順に表示します。 +しかしながら、場合によっては、利用者がそれまでのページで選択した内容によって、 +ウィザードの異なるページを表示させたいこともあると思います。 +</p><p>このためには、まず各ページに <code>pageid</code> 属性を置くことで、 +それぞれに識別子を設定する必要があります。 +次に、以下の 2 つの方法のいずれかを使用して、ページの移動を行います。 +</p> +<ol><li> 各ページに <code>next</code> 属性を置いて、次に移動するページのページ ID を設定します。 必要ならば、この属性を変更することで、移動するページを変更することも可能です。 +</li><li> ウィザードの <code>goTo()</code> メソッドを呼び出します。 このメソッドは、引数として移動するページのページ ID を 1 つ取ります。 このメソッドは <code>onpageadvanced</code> や <code>onwizardnext</code> のようなハンドラから呼び出すことも可能です。 ただし、この場合 <code>goTo()</code> によるページ移動が上書きされないように、ハンドラには false を返して、デフォルトのページ移動を抑止する必要があります。 また、<code>goTo()</code> メソッドによるページ変更のために、イベントが再送出されることも覚えておいてください。 このため、ハンドラでは再送出されたイベントを適切に処理する必要があります。 +</li></ol> +<p>以下に、一連のウィザードページの例を示します。 +(内部のコンテンツは除いてあります) +</p> +<pre><wizardpage pageid="type" next="font"> +<wizardpage pageid="font" next="done"> +<wizardpage pageid="color" next="done"> +<wizardpage pageid="done"> +</pre> +<ul><li> ウィザードは、常に最初のページから始まります。 この例の場合は、ページ ID が <code>type</code> のページです。 次のページには、ページ ID が <code>font</code> のページが指定されているため、ウィザードは、次にそのページに移動します。 +</li><li> ページ ID が <code>font</code> のページでは、次のページどして <code>done</code> が指定されているため、次は、そのページが表示されることになります。 +</li><li> ページ ID が、<code>done</code> のページは <code>next</code> 属性が設定されていないため、最後のページになります。 +</li></ul> +<p>なお、ページ ID が、<code>color</code> のページに移動する必要があるときには、 +スクリプトにより、必要に応じて <code>next</code> 属性の調整を行います。 +</p> +<h3 id=".E3.82.A6.E3.82.A3.E3.82.B6.E3.83.BC.E3.83.89.E9.96.A2.E6.95.B0" name=".E3.82.A6.E3.82.A3.E3.82.B6.E3.83.BC.E3.83.89.E9.96.A2.E6.95.B0"> ウィザード関数 </h3> +<p>ウィザードは、<a href="ja/XUL_Tutorial/Tabboxes">タブ付きパネル</a>と良く似た動作をします。 +主な相違点は、タブが表示されないことと、利用者が下部のボタンを使用してページ間を移動することぐらいです。 +ウィザードは、全てのページが同じ XUL ファイル上に記述されることになるため、 +表示時には、全てのページの全フィールド値が、常に保持されることになります。 +このため、ページを移動するときに、情報をロードしたりセーブしたりする必要がありません。 +</p><p>しかしながら、いくつかのフィールドの検査については、各ページで行いたいと思うかもしれません。 +このためには、前のセクションで説明したハンドラが使用できます。 +これを利用して、フィールドの値が不適当だった場合には、アラートの表示を行うのが常套ではありますが、 +場合によっては、正しい入力が行われるまで、「次へ (<span style="color: green;">Next</span>)」ボタンを<span style="border-bottom: 1px dashed green;" title="disable">無効</span>にしておく方がよい場合もあると思います。 +</p><p>ウィザードのプロパティの <code>canAdvance</code> に true を設定することで「次へ」ボタンが有効であることを指示できます。 +ここに false を設定すると「次へ」ボタンは無効化されます。 +このプロパティは、ページに入力されたデータが不適切になったか、あるいは適切になったことを検出したとき、変更することが可能です。 +</p> +<h4 id=".E3.82.A6.E3.82.A3.E3.82.B6.E3.83.BC.E3.83.89.E3.81.AE.E4.BE.8B" name=".E3.82.A6.E3.82.A3.E3.82.B6.E3.83.BC.E3.83.89.E3.81.AE.E4.BE.8B"> ウィザードの例 </h4> +<p>以下の例では、利用者は、ウィザードの最初のページで、テキスト入力欄にシークレットコードを入力しなければなりません。 +<code>checkCode()</code> 関数は、<code>onpageshow</code> 属性で指定されているため、最初のページが表示されるときには常に呼び出されます。 +また、この関数はテキスト入力欄でキーが押されるたびにも呼び出されて、 +「次へ」ボタンを再び有効にするかどうかの判定を行います。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_advwiz_1.xul.txt">ソース</a> +</p> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<wizard id="theWizard" title="Secret Code Wizard" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +function checkCode(){ + document.getElementById('theWizard').canAdvance = (document.getElementById('secretCode').value == "cabbage"); +} +</script> + + <wizardpage onpageshow="checkCode(); return true;"> + <label value="Enter the secret code:"/> + <textbox id="secretCode" onkeyup="checkCode();"/> + </wizardpage> + + <wizardpage> + <label value="That is the correct secret code."/> + </wizardpage> + +</wizard> +</pre> +<p>また、関連するプロパティに、「戻る (<span style="color: green;">Back</span>)」ボタンの有効と無効を切り替えるための <code>canRewind</code> プロパティもあります。 +どちらのプロパティも、ページを移動するたびに自動的に調整されます。 +このため、最初のページで「戻る」ボタンを明示的に無効にする必要はありません。 +</p><p>さらに、ウィザードには、<code>currentPage</code> という便利なプロパティもあります。 +このプロパティは、現在表示されている <code>wizardpage</code> の参照を持っています。 +また、このプロパティを変更することで、現在のページを変更することも可能です。 +なお、このプロパティの変更によりページを変更した場合であっても、 +各種のページ変更イベントは、変わることなく送出されます。 +</p><p>次のセクションでは、共通のコンテントを扱うためのオーバーレイの使い方について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_a_Wizard" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Overlays">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/numeric_controls/index.html b/files/ja/archive/mozilla/xul/tutorial/numeric_controls/index.html new file mode 100644 index 0000000000..c03bfc1e67 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/numeric_controls/index.html @@ -0,0 +1,120 @@ +--- +title: 数値コントロール +slug: Archive/Mozilla/XUL/Tutorial/Numeric_Controls +tags: + - Firefox 3 + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Numeric_Controls +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:List_Controls">次のページ »</a></p> +</div> + +<p>XUL には、数値や数の範囲の入力に使用するための要素が 2 つあり、 +日付や時刻の入力に使用する要素も 2 つあります。 +これらの要素は、Firefox 3 かそれ以降でのみ利用できます。 +</p><p><span id="Number_Fields"></span> +</p> +<h3 id=".E6.95.B0.E5.80.A4.E5.85.A5.E5.8A.9B.E6.AC.84" name=".E6.95.B0.E5.80.A4.E5.85.A5.E5.8A.9B.E6.AC.84"> 数値入力欄 </h3> +<p>テキスト入力欄 (<span style="color: green;">textbox</span>)の <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性に、値 <code>number</code> を設定することで、数値を入力するために利用できるようになります。 +このタイプのテキスト入力欄は、数値の入力だけに使用することができます。 +それ以外の文字は許可されないため、入力しようした場合は単純に無視されます。 +加えて、利用者が<span style="border-bottom: 1px dashed green;" title="cycle through the values">選択可能な値を循環させる</span>ことができるように、矢印ボタンが入力欄の横に表示されます。 +</p> +<div class="float-right"><img alt="Image:Controlguide-textbox-number.gif"></div> +<p>これ以外のテキスト入力欄と同様に、<code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> 属性によってデフォルト値を指定することが可能です。 +当然ではありますが、ここに指定する値は数値である必要があります。 +また、<code id="a-min"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code> と <code id="a-max"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code> 属性によって、最大値と最小値を指定することも可能です。 +これらの値を設定することで、欄に入力可能な値の範囲を制御することが可能になります。 +もしも利用者が範囲よりも大きいか小さい値を入力しようとした場合は、必要に応じて最大値か最小値にリセットされることになるはずです。 +例えば、以下の数値入力欄は 1 から 20 の間の範囲を持ちます。 +</p> +<pre><textbox type="number" min="1" max="20"/> +</pre> +<p>上例では、デフォルト値が指定されていないため、デフォルト値は選択範囲の最小の値である 1 になります。 +また、<code id="a-min"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code> 属性に <code>1</code> を設定することで、設定できる値の下限が 1 であることを示し、 +<code id="a-max"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code> 属性に <code>20</code> を設定することで、値の上限が 20 であることを示しています。 +なお、最小値を指定しない場合、デフォルトの最小値は 0 になり、最大値を指定しない場合は、制限がないことを示す特殊な値である <code>Infinity</code> がデフォルトになります。 +</p><p><span id="Other_numeric_textbox_attributes"></span> +</p> +<h4 id=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E6.95.B0.E5.80.A4.E5.85.A5.E5.8A.9B.E6.AC.84.E3.81.AE.E5.B1.9E.E6.80.A7" name=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E6.95.B0.E5.80.A4.E5.85.A5.E5.8A.9B.E6.AC.84.E3.81.AE.E5.B1.9E.E6.80.A7">その他の数値入力欄の属性</h4> +<p><code id="a-increment"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> 属性は、矢印を押した場合に値を変化させる量を指定するために使用されます。 +この値のデフォルトは 1 であるため、それ以外の値を指定すれば、より大きな量で数値を変化させることが可能になります。 +例えば、以下の例は 10 の倍数単位で増減します。 +</p> +<pre><textbox type="number" increment="10" max="100"/> +</pre> +<p>この入力欄は、0 から 100 までを 10 の倍数単位で増減します。 +<code id="a-min"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code> 属性が設定されていないため、デフォルトの 0 になっています。 この例のような場合でも、利用者が直接キーボードから入力すれば、それ以外の値も入力可能であることに注意してください。 +<code id="a-increment"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> 属性は、矢印ボタンに対してのみ影響を与えます。 +もしくは、利用者がカーソルキーの上下を、入力欄にフォーカスがあるときに使用する場合には、increment の値単位で値が増加または減少します。 +</p><p>また、<code id="a-decimalplaces"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/decimalplaces">decimalplaces</a></code> 属性によって、小数点以下を何桁表示するかを示すことができます。 +デフォルト値は 0 で、これは整数のみを表示することを意味します。 +0 以外の値を指定すれば、小数を表示することができるようになります。 +</p> +<pre><textbox type="number" decimalplaces="2"/> +</pre> +<p>この例では、小数点以下は、2 桁まで表示されます。 +小数点以下の桁数がそれより多い場合には、2 桁で丸められます。 +</p><p><span id="Scales"></span> +</p> +<h3 id=".E3.82.B9.E3.82.B1.E3.83.BC.E3.83.AB" name=".E3.82.B9.E3.82.B1.E3.83.BC.E3.83.AB"> スケール </h3> +<p><code><a href="/ja/docs/Mozilla/Tech/XUL/scale" title="scale">scale</a></code> 要素も、値を範囲の中から選択するのに使用できます。 +この要素では、入力欄の代わりにスライドするスケールが使用されます。 +利用者は、スケールの<span style="border-bottom: 1px dashed green;" title="thumb">つまみ</span>をドラッグすることで、値を調整できます。 +</p> +<div class="float-right"><img alt="Image:Controlguide-scale.gif"></div> +<p>多数の数値入力欄と同じ属性が、スケールに対しても使用できます。 +<code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code>、 <code id="a-min"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/min">min</a></code>、 <code id="a-max"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/max">max</a></code> と <code id="a-increment"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> は、すべて類似の流儀で利用可能です。 +スケールは、実際には数値として値を表示しませんが、値はスクリプトから使用できます。 +スケールの値が変更された場合には、常に <code>change</code> イベントがスケールから送出されることになります。 </p> +<pre><scale value="40" min="1" max="50"/> +</pre> +<p>このスケールのデフォルトは 40 で、範囲は 1 から 50 です。 +</p><p>通常、数値入力欄は利用者にとって値が重要である場合、 +例えば、日数を入力する欄や、ファイルの最大サイズといったものに対して使用します。 +対して、スケールは、スケールのスライド操作に応じて状態が増加または減少しさえすれば、実際の値は重要でない場合、 +例えば、ボリュームスライダーや、ズームレベルといったものに対して使用します。 +</p><p>デフォルトでは、スケールは水平 (<span style="color: green;">horizontal</span>)に、左側が小さく、右側が大きくなるように配置されますが、 +方向 (縦横) は、<code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> 属性で、大小の向きは <code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code> 属性で変更することが可能です。 +</p> +<pre><scale orient="vertical" dir="reverse"/> +</pre> +<p>このスケールは、垂直 (<span style="color: green;">vertical</span>)で、低い値が下に、高い値が上になるように表示されることになるはずです。 +</p><p><span id="Date_and_Time_Entry_Fields"></span> +</p> +<h3 id=".E6.97.A5.E4.BB.98.E3.81.A8.E6.99.82.E5.88.BB.E3.81.AE.E5.85.A5.E5.8A.9B.E6.AC.84" name=".E6.97.A5.E4.BB.98.E3.81.A8.E6.99.82.E5.88.BB.E3.81.AE.E5.85.A5.E5.8A.9B.E6.AC.84"> 日付と時刻の入力欄 </h3> +<p><code><a href="/ja/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code> と、<code><a href="/ja/docs/Mozilla/Tech/XUL/timepicker" title="timepicker">timepicker</a></code> 要素は、利用者に日付と時刻を入力させるために使用できます。 +利用者に対しては、日付と時刻を構成する数値を入力するために、それぞれに対する数値入力欄が表示されます。 +</p> +<pre><datepicker value="2004/3/24"/> +<timepicker value="15:30:00"/> +</pre> +<div class="float-right"><img alt="Image:Controlguide-timepicker.gif"></div> +<p><code>value</code> 属性は、デフォルト値を設定するために使用されます。 +この属性が省略された場合は、欄は現在の日付か時刻で初期化されることになります。 +なお、この属性の書式は、厳密に上記のようにする必要があります。 +つまり、日付は YYYY/MM/DD の形式で、時刻は HH:MM:SS の形式です。(ただし、秒とその直前のコロンは省略可能です) +</p><p>これらの 2 つの要素により、利用者に対して日付や時刻の入力を確実に行わせることができます。 +これらを利用する場合には、アプリケーション側での日付の妥当性確認は行う必要がありません。 +この要素では、確実に日付がその月の日数を越えないことや、うるう年の取り扱いなどが行われます。 +</p><p>現時点では、<code><a href="/ja/docs/Mozilla/Tech/XUL/timepicker" title="timepicker">timepicker</a></code> は 1 つのスタイルしかありませんが、<code><a href="/ja/docs/Mozilla/Tech/XUL/datepicker" title="datepicker">datepicker</a></code> は 3 つのバリエーションがあります。 +デフォルトのスタイルは、年と月および日を入力するための 3 つの欄を表示します。 +それ以外の 2 つを選択するためには <code id="a-type"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/type">type</a></code> 属性を使用します。 +ここに、値 <code>grid</code> を指定すると、以下のイメージで示すようなグリッド形式のカレンダーが使用されます。 +</p><p><img alt="Image:Controlsguide-datepicker-grid.png"> +</p><p>また、値 <code>popup</code> を使用すれば、先述の 2 つのタイプを組み合わせたようなスタイルになります。 +このタイプは、日付を選択するためのグリッド形式のカレンダーをドロップダウンボタンでポップアップ表示させるだけでなく、 +年と月および日を入力するための 3 つの欄も持っています。 +</p> +<pre><datepicker type="popup"/> +</pre> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Labels_and_Images" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:List_Controls">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/open_and_save_dialogs/index.html b/files/ja/archive/mozilla/xul/tutorial/open_and_save_dialogs/index.html new file mode 100644 index 0000000000..9dc42317ba --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/open_and_save_dialogs/index.html @@ -0,0 +1,96 @@ +--- +title: 「開く」「保存」ダイアログ +slug: Archive/Mozilla/XUL/Tutorial/Open_and_Save_Dialogs +tags: + - Tutorials + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/Open_and_Save_Dialogs +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_Dialogs" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Creating_a_Wizard">次のページ »</a></p> +</div> + +<p>一般的に使われる種類のダイアログのひとつに、利用者がファイルを開いたり保存したりする際に利用されるファイル選択ダイアログがあります。</p> + +<h3 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.83.94.E3.83.83.E3.82.AB.E3.83.BC" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.83.94.E3.83.83.E3.82.AB.E3.83.BC">ファイルピッカー</h3> + +<p>利用者がファイルを選択するために使用するダイアログは、ファイルピッカー (<span style="color: green;">file picker</span>) と呼ばれています。 これは、「開く」と「保存」メニューコマンドでよく使われますが、 利用者がファイルを選択する必要のある場所ならばどこでも使用することが可能です。 ファイルピッカーの実装は、<a href="/ja/docs/XPCOM">XPCOM</a> の <a href="/ja/docs/NsIFilePicker">nsIFilePicker</a> インタフェースから利用できます。</p> + +<div class="note">ファイルピッカーは、chrome URL からのみ利用可能なことに注意してください。</div> + +<p>ファイルピッカーは、以下の 3 つのモードで使用できます。</p> + +<ul> + <li><strong><span style="border-bottom: 1px dashed green;" title="Open">開く</span></strong> - 利用者に、開くファイルの選択を求めます。</li> + <li><strong><span style="border-bottom: 1px dashed green;" title="Get Folder">フォルダ選択</span></strong> - 利用者に、フォルダ (ディレクトリ) の選択を求めます。</li> + <li><strong><span style="border-bottom: 1px dashed green;" title="Save">保存</span></strong> - 利用者に、保存するファイル名を選択するよう求めます。</li> +</ul> + +<p>ダイアログの外観は、モードによって異なり、 プラットフォームによっても変化することになります。 また、利用者がダイアログで選択したファイルやフォルダは、アプリケーションから読み書きすることが可能です。</p> + +<p>ファイルピッカーのインタフェースである <a href="/ja/docs/NsIFilePicker">nsIFilePicker</a> は、ダイアログを 3 つのモードのいずれかで表示する機能を担当しています。 このインタフェースを使用して、ダイアログにいくつかの機能を設定することが可能です。 また、ダイアログが閉じられるときの処理では、このインタフェースのプロパティから、選択されたファイルを取得することが可能です。</p> + +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.83.94.E3.83.83.E3.82.AB.E3.83.BC.E3.81.AE.E7.94.9F.E6.88.90" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.83.94.E3.83.83.E3.82.AB.E3.83.BC.E3.81.AE.E7.94.9F.E6.88.90">ファイルピッカーの生成</h4> + +<p>最初に、ファイルピッカーコンポーネントを作成して、初期化する必要があります。</p> + +<pre>var nsIFilePicker = Components.interfaces.nsIFilePicker; +var fp = Components.classes["@mozilla.org/filepicker;1"].createInstance(nsIFilePicker); +fp.init(window, "Select a File", nsIFilePicker.modeOpen); +</pre> + +<p>まず、新しいファイルピッカーオブジェクトを作成して、変数 <code>fp</code> に保存します。 次に <code>init</code> 関数を使用して、ファイルピッカーの初期化を行います。 この関数は、引数として、ダイアログの開き元のウィンドウ、ダイアログのタイトル、モードの 3 つの引数を取ります。 この例の場合、モードは <code>modeOpen</code> で、これは「開く」用のダイアログにするために使用します。 また、これ以外に <code>modeGetFolder</code> と <code>modeSave</code> の 2 つのモードも使用することが可能です。 なお、これらのモードは、<code>nsIFilePicker</code> インタフェースの定数として定義されています。</p> + +<h4 id=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.83.87.E3.82.A3.E3.83.AC.E3.82.AF.E3.83.88.E3.83.AA.E3.81.A8.E3.83.95.E3.82.A3.E3.83.AB.E3.82.BF" name=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.83.87.E3.82.A3.E3.83.AC.E3.82.AF.E3.83.88.E3.83.AA.E3.81.A8.E3.83.95.E3.82.A3.E3.83.AB.E3.82.BF">デフォルトディレクトリとフィルタ</h4> + +<p>ダイアログを表示する前に可能な設定が 2 つあります。</p> + +<ul> + <li>1 つ目はデフォルトディレクトリで、これによってダイアログが開かれたときに表示されるディレクトリを指定します。</li> + <li>2 つ目はフィルタで、これによってダイアログに表示するべきファイル種別のリストを指定します。これを使うことで、例えば、HTML ファイル以外を非表示にすることが可能です。</li> +</ul> + +<p>デフォルトディレクトリは、ファイルピッカーオブジェクトの <code>displayDirectory</code> プロパティにディレクトリを設定することで指定できます。 このときのディレクトリは、<code><a href="/ja/docs/NsILocalFile">nsILocalFile</a></code> オブジェクトで指定する必要があります。 なお、設定を行わない場合には、デフォルトとして適当なものが選択されることになります。 また、フィルタを追加する場合は、<code>appendFilters()</code> 関数を呼び出すことで、 表示させたいファイル種別の設定を行います。</p> + +<pre>fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterImages); +fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll); +</pre> + +<ul> + <li>最初の例は、HTML と画像ファイルのためのフィルタを追加します。この場合、利用者は、この種類のファイルからしか選択できません。このときの利用者の操作手順は、プラットフォームごとに固有になります。例えば、いくつかのプラットフォームでは、利用者には個々のフィルタ項目が分けて提示されることになるため、利用者は、HTML ファイル群と画像ファイル群のどちらを利用するかを選ぶことが可能です。</li> + <li>2 番目の例は、テキストファイルとすべてのファイルのためのフィルタを追加します。これによって、利用者はテキストファイルだけを表示するか、すべてのファイルを表示するかを選択することができます。</li> +</ul> + +<p>また、フィルタには、 XML ファイルのための <code>filterXML</code> と、XUL ファイルのための <code>filterXUL</code> も使用することが可能です。 さらに、フィルタ対象のファイルを独自に指定したい場合には、以下のように <code>appendFilter()</code> 関数を使用することが可能です。</p> + +<pre>fp.appendFilter("Audio Files","*.wav; *.mp3"); +</pre> + +<p>この行は、Wave と MP3 のオーディオファイルのためのフィルタを追加します。 最初の引数はファイルの種類を示すタイトルで、2 番目はファイルマスクのリストをセミコロンで区切って指定します。 必要ならば、リストに指定するマスクは、増やしても減らしても構いません。 また別のフィルタを追加するために、必要なだけ何度でも <code>appendFilter()</code> を呼び出すことが可能です。 フィルタの優先度は追加された順番によって決定され、 通常は最初に追加したものがデフォルトで選択された状態になります。</p> + +<h4 id=".E9.81.B8.E6.8A.9E.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E5.8F.96.E5.BE.97" name=".E9.81.B8.E6.8A.9E.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E5.8F.96.E5.BE.97">選択ファイルの取得</h4> + +<p>最後に <code>show()</code> 関数を呼び出すことで、ダイアログが表示されます。 この関数は引数を取りませんが、返り値には利用者が選択した操作を示すステータスコードが返されます。 なお、この関数を呼び出した場合、利用者がファイル選択を行うまで処理が戻らないことに注意してください。 また、この関数の返り値は、以下の 3 つの定数のうちのどれかになります。</p> + +<ul> + <li><strong>returnOK</strong> - 利用者によってファイルの選択が行われ、OK が押されました。このとき利用者が選択したファイルは、ファイルピッカーの <code>file</code> プロパティに格納されます。</li> + <li><strong>returnCancel</strong> - 利用者によって Cancel が押されました。</li> + <li><strong>returnReplace</strong> - 保存モードのときに、利用者が既存のファイルを置き換えることを選択したことを示しています。(利用者が新規のファイル名を入力したときには、returnOK が返されます)</li> +</ul> + +<p>このため、ファイルピッカーの <code>file</code> プロパティからファイルオブジェクトの取得を行う場合には、 以下のように、まず返り値のチェックを行う必要があります。</p> + +<pre>var res = fp.show(); +if (res == nsIFilePicker.returnOK){ + var thefile = fp.file; + // --- do something with the file here --- +} +</pre> + +<p>次のセクションでは、ウィザードの作り方について見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Creating_Dialogs" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Creating_a_Wizard">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/persistent_data/index.html b/files/ja/archive/mozilla/xul/tutorial/persistent_data/index.html new file mode 100644 index 0000000000..cd207fd0dd --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/persistent_data/index.html @@ -0,0 +1,74 @@ +--- +title: 永続性のあるデータ +slug: Archive/Mozilla/XUL/Tutorial/Persistent_Data +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Persistent_Data +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Advanced_Rules" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Style_Sheets">次のページ »</a></p> +</div> +<p>このセクションでは、XUL ウィンドウの状態を保存する方法について説明します。 +</p> +<h3 id=".E7.8A.B6.E6.85.8B.E3.82.92.E4.BF.9D.E5.AD.98.E3.81.99.E3.82.8B" name=".E7.8A.B6.E6.85.8B.E3.82.92.E4.BF.9D.E5.AD.98.E3.81.99.E3.82.8B"> 状態を保存する </h3> +<p>大きなアプリケーションを作るときには、しばしば、セッションを越えてウィンドウの状態を保存したい場合があると思います。 +例えば、利用者がアプリケーションを終了したときに、そのウィンドウでは、どのツールバーが<span style="border-bottom: 1px dashed green;" title="collapsed">折り畳まれて</span>いたかが保存されるほうが、利用者にとっての利便性が向上します。 +</p><p>このためには、スクリプトを作成して保存しておきたい情報の収集を行い、それをファイルに保存する方法も考えられますが、 +すべてのアプリケーションについて同様の処理を作成していくのは、苦痛でしかないと思います。 +幸いなことに、XUL では、ウィンドウの状態を保存するメカニズムが提供されているため、これを利用するのがより便利な方法になります。 +</p><p>この方法を利用すると、必要な情報が収集されて、利用者の他の<span style="border-bottom: 1px dashed green;" title="preferences">設定情報</span>を置くのと同じディレクトリに、RDF ファイル <code>localstore.rdf</code> として保存されるようになります。 +つまり、この RDF ファイルに、個々のウィンドウの状態についての情報が保持されるということです。 +また、この方法には、Mozilla のユーザプロファイルと連動するという利点もあります。 +これは、個々の利用者ごとに異なった設定が可能になることを意味しています。 +</p><p>XUL では、どの要素の状態も保存できます。 +通常は、ツールバーの状態やウィンドウの位置、あるいはパネルが表示されているかどうかといった情報を保存させたい場合が多いと思いますが、機能としては、ほとんど何でも保存することが可能です。 +</p> +<h4 id="persist_.E5.B1.9E.E6.80.A7" name="persist_.E5.B1.9E.E6.80.A7"> persist 属性 </h4> +<p>状態を保存可能にするためには、保存したい値をもつ要素に <code>persist</code> 属性を追加するだけです。<span style="color: darkgreen; background: #ef9;">【訳注: persist は「持続する」あるいは「永続する」といった意味】</span> +<code><code id="a-persist"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></code> 属性の値には、その要素で保存したい属性を、空白区切りのリスト形式で指定します。 +なお、<code>persist</code> を設定する要素には、その要素を識別できるように <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性を設定する必要があります。 +</p><p>ウィンドウの大きさを保存する例を、以下に示します。 +</p> +<pre><window + id="someWindow" + width="200" + height="300" + persist="width height" + . + . + . +</pre> +<p>これによって、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 要素の 2 つの属性、<code><code id="a-width"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code> と <code><code id="a-height"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/height">height</a></code></code> が保存されます。 +また、<code><code id="a-persist"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></code> 属性に、別の属性名を空白で区切って加えることで、その属性も保存させることが可能です。 +<code><code id="a-persist"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></code> 属性は、どの要素にも加えることができ、どの属性でも保存することができます。 +なお、スクリプトを使って属性を操作した場合、通常ありえない値が保存される可能性があります。 +</p> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B"> ファイル検索ダイアログの例 </h4> +<div class="highlight"> +<p>それでは、<code>persist</code> 属性を、ファイル検索ダイアログのいくつかの要素に追加してみることにしましょう。 +ここでは、ウィンドウの位置を保存したいとします。 +このためには、<code>window</code> を変更する必要があります。 +</p> +<pre class="eval"><window + id="findfile-window" + title="Find Files" + <span class="highlightred">persist="screenX screenY width height"</span> + orient="horizontal" + xmlns="<span class="nowiki">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</span>"> +</pre> +<p>これによって、ウィンドウの x 座標と y 座標、ウィンドウの幅と高さが保存されます。 +また、さらにスプリッターの折り畳みについての状態を保存するように拡張するのもよいと思います。 +しかしながら、現在のタブの状態については、保存したとしても利用者の利便の向上にはあまり役に立たないでしょう。 +</p><p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-persist.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-persist.xul">表示</a> +</p> +</div> +<p>次のセクションでは、XUL ファイルに対してスタイルシートを使う方法を見ることにします。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Advanced_Rules" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Style_Sheets">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/popup_menus/index.html b/files/ja/archive/mozilla/xul/tutorial/popup_menus/index.html new file mode 100644 index 0000000000..dfff2b271a --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/popup_menus/index.html @@ -0,0 +1,213 @@ +--- +title: ポップアップメニュー +slug: Archive/Mozilla/XUL/Tutorial/Popup_Menus +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Popup_Menus +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:More_Menu_Features" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Scrolling_Menus">次のページ »</a></p> +</div> + +<p>前のセクションでは、メニューバーを使ったメニューの作り方を見てきました。 加えて、XUL ではポップアップメニューを作る機能も持っています。 ポップアップメニューとしては、利用者がマウスの右ボタンを押したときに表示されるメニューが典型的です。</p> + +<p><span id="Creating_a_Popup_Menu"></span></p> + +<h3 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90">ポップアップメニューの作成</h3> + +<p>XUL には、3 種類の異なるポップアップがあります。 これらは、主にポップアップを表示させるための方法が異なっています。 以下に概要を示します。</p> + +<dl> + <dt>プレインポップアップ</dt> + <dd>プレインポップアップは、要素の上でマウスの左ボタンを押したときに表示されるポップアップウィンドウです。これはメニューバー上のメニューと似ていますが、任意の場所に配置できるここと、任意の内容を持つことができる点が異なります。ブラウザウィンドウで「戻る」や「進む」ボタンの右下にある、小さな下向き三角をクリックした時に表示されるドロップダウンメニューが、この良い例としてあげられます。</dd> +</dl> + +<dl> + <dt>コンテキストポップアップ</dt> + <dd>コンテキストポップアップは、利用者がコンテキストメニューボタン (たいていは右マウスボタン) を押したときに表示されるポップアップウィンドウです。 厳密には、コンテキストメニューを開く方法はプラットフォームごとに異なります。 Macintosh を例にあげると、利用者は Control キーとマウスボタンを一緒に押すか、マウスボタンを数秒押したままにします。 また、コンテキストメニューをマウスを使用せずに、キーボードのメニューキーを押すといったような方法で開くことも可能であることを付け加えておきます。</dd> + <dt>ツールチップ</dt> + <dd>ツールチップ のポップアップウィンドウは、利用者がマウスカーソルを要素の上に移動したときに表示されます。この種類のポップアップは、主にボタン上の表示よりも、もっと詳しいボタンについての説明を提供するために使われます。</dd> +</dl> + +<p>これら 3 つのポップアップは利用者が呼び出すときの方法が異なります。 また、ポップアップの種類は、ポップアップを呼び出す要素の側で指定されることになります。</p> + +<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.99.E3.82.8B.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.99.E3.82.8B.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.81.AE.E5.AE.9A.E7.BE.A9">ポップアップするコンテントの定義</h4> + +<p>ポップアップは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素を使って記述されます。 この要素はボックスの一種で、特別な属性は存在しません。 ポップアップが呼び出されると、ウィンドウが表示され、そこには <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素の中に置かれた全てのものが含まれています。 また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素の <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性は、ポップアップを、出したい要素と関連付けるのに必要なため、必ず設定する必要があります。 以下に例を示して、その後に意味を説明していきます。</p> + +<pre><popupset> + <menupopup id="clipmenu"> + <menuitem label="Cut"/> + <menuitem label="Copy"/> + <menuitem label="Paste"/> + </menupopup> +</popupset> +</pre> + +<p>この例は、3 つの操作項目を持つ、単純なポップアップメニューを生成します。 この例では、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素は、3 つの <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 要素を囲っています。 また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素に <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> が設定されていることも確認してください。</p> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> 要素は、ポップアップメニューの宣言全体を囲みます。 これは、ポップアップのための汎用的なコンテナですが、使用は必須ではありません。 この要素によって、画面上に何かが描画されることはありませんが、全てのポップアップを一箇所にまとめて宣言するための置き場所として使用します。 この <code><code><a href="/ja/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> という名前は、複数のポップアップ宣言を内側に置くことができるということから付けられています。 また、別のポップアップの定義を追加する場合には、最初の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素の後に置くだけで構いません。 複数の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> をファイルに置いても構いませんが、通常は 1 つにまとめるようにします。</p> + +<h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E8.A6.81.E7.B4.A0.E3.81.AB.E9.96.A2.E9.80.A3.E4.BB.98.E3.81.91.E3.82.8B" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E8.A6.81.E7.B4.A0.E3.81.AB.E9.96.A2.E9.80.A3.E4.BB.98.E3.81.91.E3.82.8B">ポップアップを要素に関連付ける</h4> + +<p>これで、ポップアップの作成はできましたので、いよいよポップアップを表示させてみることにします。 このためには、ポップアップを出現させる要素と関係づける必要があります。 これは、ポップアップを、利用者がウィンドウのある一定のエリアをクリックした場合のみに出現させるために必要です。 ポップアップを表示させるエリアは、主にボタンかボックスを用いて指定します。</p> + +<p>ポップアップと要素と関係付けるためには、次に示す 3 つの属性のうちの 1 つを要素に加えます。 どの属性を加えるかは、作りたいポップアップの種類に応じて決定されます。 プレインポップアップを作成するには、<code><code id="a-popup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/popup">popup</a></code></code> 属性を要素に加えます。 また、コンテキストポップアップには、<code><code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 属性を加えます。 最後に、ツールチップポップアップの場合は、<code><code id="a-tooltip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code></code> 属性を加えます。</p> + +<p>これらの属性の値として、表示させるポップアップの <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性の値を指定する必要があります。 このために、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素には、必ず <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性を設定しなければなりません。 この仕様によって、簡単に複数のポップアップ宣言を 1 つのファイルにまとめておくことができるようになっています。</p> + +<p>上記の例に追加して、コンテキストメニューのポップアップを作ってみることにします。 そのためには、 <code><code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 属性を使用する必要があります。 これは、ポップアップを関係づけたい要素の方に追加します。 以下に、適用した例を示します。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_1.xul">表示</a></p> + +<div class="float-right"><img alt="画像:popups-ex1.png"></div> + +<pre><popupset> + <menupopup id="clipmenu"> + <menuitem label="Cut"/> + <menuitem label="Copy"/> + <menuitem label="Paste"/> + </menupopup> +</popupset> + +<box context="clipmenu"> + <description value="Context click for menu"/> +</box> +</pre> + +<p>ここでは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素をボックスと関係づけています。 ボックス内部の任意の場所で、context-click (右クリック) をすれば、ポップアップメニューが表示されます。 ポップアップは、ボックスの子要素の上でクリックした場合であっても表示されます。 したがって、この例で <code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素の上でクリックした場合であっても、ポップアップは表示されます。 <code><code id="a-context"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/context">context</a></code></code> 属性は、同じ id を持つ<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> とボックスを結びつけるのに用いられています。 この例では、<code>clipmenu</code> という id を持つ<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> が表示されることになります。 これによって、たくさんのポップアップを作成して、それぞれを異なる要素に結びつけることが可能になります。</p> + +<p>1 つの要素に対して、ポップアップの種類が異なる属性を追加することで、複数のポップアップを結びつけることも可能です。 また、同じポップアップを複数の要素と結びつけることも可能です。(これは、このポップアップための構文を採用したことによる優位点のひとつです)。 なお、ポップアップは、XUL 要素にのみ結びつけることが可能で、HTML 要素と結びつけることはできません。</p> + +<h3 id=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97" name=".E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97">ツールチップ</h3> + +<p>ここでは、ツールチップを作るための簡単な方法を見て行きます。 ツールチップを作る方法は、2 つあります。 最も簡単な方法は、<code><code id="a-tooltiptext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltiptext">tooltiptext</a></code></code> 属性を、ツールチップを設定したい要素に追加することです。(通常は、こちらの方が多く使われています)</p> + +<p>2 つめの方法は、ツールチップに表示する内容を含めるために <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> 要素を使用します。 この方法では、個々のツールチップの内容部分を分離するか、またはツールチップの内容を設定するようなスクリプトを用意する必要があります。 しかしながら、この方法を用いた場合、ツールチップにテキストだけでなく任意の内容を使用できます。</p> + +<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_2.xul">表示</a></p> + +<pre><button label="Save" tooltiptext="Click here to save your stuff"/> + +<popupset> + <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;"> + <description value="Click here to see more information"/> + <description value="Really!" style="color: red;"/> + </tooltip> +</popupset> + +<button label="More" tooltip="moretip"/> +</pre> + +<p>この例にある 2 つのボタンは、それぞれツールチップを持っています。 最初のボタンは、デフォルトのツールチップのスタイルを使用します。 2 つ目のボタンは、背景色とテキストのスタイルを変更した、カスタムツールチップを使用します。 More ボタンには <code><code id="a-tooltip"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/tooltip">tooltip</a></code></code> 属性が使われていて、対応する <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> 要素の <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> の値が設定されています。 なお、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tooltip" title="tooltip">tooltip</a></code></code> 要素も、他のポップアップ系の要素と同様に <code><code><a href="/ja/docs/Mozilla/Tech/XUL/popupset" title="popupset">popupset</a></code></code> の中に配置可能です。</p> + +<h3 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E8.A1.A8.E7.A4.BA.E4.BD.8D.E7.BD.AE" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.81.AE.E8.A1.A8.E7.A4.BA.E4.BD.8D.E7.BD.AE">ポップアップの表示位置</h3> + +<p>デフォルトでは、プレインとコンテキストポップアップのウィンドウは、マウスポインタの位置に表示されます。 また、ツールチップは、マウスポインタと重なって隠されることが無いように、要素の少し下に表示されます。 しかしながら、ポップアップの表示位置を、もっと詳細に指示したい場合もあると思います。 例えば、ブラウザのバックボタンをクリックした時に出現するポップアップメニューは、「バックボタンの下」に表示されるべきですが、それはプレインポップアップのデフォルトの表示位置である「マウスポインタの位置」とは異なります。</p> + +<p>ポップアップの表示位置を変更するためには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> に付加的な属性である <code><code id="a-position"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code></code> を使うことで可能です。 また、<code><code id="a-position"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/position">position</a></code></code> 属性は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素にも設定可能です。 この属性は、ポップアップの表示位置と、ポップアップの呼び出し元の要素の位置関係を指示するために使用します。 ここには、いくつかの値が設定可能です。以下に概要を示します。</p> + +<dl> + <dt>after_start</dt> + <dd>ポップアップは、要素の下に、要素とポップアップウィンドウの左端を揃えて表示されます。ポップアップウィンドウが要素よりも大きい場合は、右の方に広がります。この値は、ブラウザの「戻る」と「進む」ボタンに結びついているドロップダウンメニューに使われています。</dd> +</dl> + +<dl> + <dt>after_end</dt> + <dd>ポップアップは、要素の下に、要素とポップアップウィンドウの右端を揃えて表示されます。</dd> +</dl> + +<dl> + <dt>before_start</dt> + <dd>ポップアップは、要素の上に、要素とポップアップウィンドウの左端を揃えて表示されます。</dd> +</dl> + +<dl> + <dt>before_end</dt> + <dd>ポップアップは、要素の上に、要素とポップアップウィンドウの右端を揃えて表示されます。</dd> +</dl> + +<dl> + <dt>end_after</dt> + <dd>ポップアップは、要素の右に、要素とポップアップウィンドウの下端を揃えて表示されます。</dd> +</dl> + +<dl> + <dt>end_before</dt> + <dd>ポップアップは、要素の右に、要素とポップアップウィンドウの上端を揃えて表示されます。</dd> +</dl> + +<dl> + <dt>start_after</dt> + <dd>ポップアップは、要素の左に、要素とポップアップウィンドウの下端を揃えて表示されます。</dd> +</dl> + +<dl> + <dt>start_before</dt> + <dd>ポップアップは、要素の左に、要素とポップアップウィンドウの上端を揃えて表示されます。</dd> +</dl> + +<dl> + <dt>overlap</dt> + <dd>ポップアップは、要素と同じ位置に重なって表示されます。</dd> +</dl> + +<dl> + <dt>at_pointer</dt> + <dd>ポップアップはマウスポインタの位置に出現します。</dd> +</dl> + +<dl> + <dt>after_pointer</dt> + <dd>ポップアップはマウスポインタと水平位置は同じで、要素の下に表示されます。これはツールチップの表示に使われます。</dd> +</dl> + +<p><code>position</code> 属性を <code>popup</code> 要素に加えることで、ポップアップの表示位置を正確に指定することができます。 ポップアップに対して、位置指定を直接ピクセル値で行うことはできません。 <code>position</code> 属性は、3 種類の全てのポップアップで使うことが可能です。 もっとも、ツールチップでは、ほとんど値を変える状況はないと思います。</p> + +<p>以下に、ポップアップメニューを持った戻るボタンを作る例を示します。</p> + +<p><span id="Example_3"><a id="Example_3"></a><strong>Example 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_popups_3.xul">表示</a></p> + +<pre><popupset> + <menupopup id="backpopup" position="after_start"> + <menuitem label="Page 1"/> + <menuitem label="Page 2"/> + </menupopup> +</popupset> + +<button label="Pop Me Up" popup="backpopup"/> +</pre> + +<h3 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E8.BF.BD.E5.8A.A0" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97.E3.82.92.E8.BF.BD.E5.8A.A0">ファイル検索ダイアログにポップアップを追加</h3> + +<div class="highlight"> +<p>それでは、ファイル検索ダイアログに、簡単なポップアップメニューを追加してみましょう。 簡単にするために、Edit メニューの内容を複製することにします。 また、ポップアップは、最初のタブパネルの上でクリックした時に表示されるようにしたいと思います。</p> + +<pre class="eval"><span class="highlightred"><popupset> + <menupopup id="editpopup"> + <menuitem label="Cut" accesskey="t"/> + <menuitem label="Copy" accesskey="c"/> + <menuitem label="Paste" accesskey="p" disabled="true"/> + </menupopup> +</popupset></span> + +<vbox flex="1"> +. +. +. + +<span class="highlightred"><tabpanel id="searchpanel" orient="vertical" context="editpopup"></span> +</pre> + +<p>この簡単なポップアップは、最初のタブパネルに追加されている Edit メニューと同じようなものになります。 最初のパネル上のどこかで右クリック (Macintosh ではControl+クリック) すれば、ポップアップが表示されるはずです。 また、ポップアップは、それ以外の場所でクリックした場合は表示されません。 テキスト入力欄 (<span style="color: green;">textbox</span>) は、要素自身に組み込まれたポップアップメニューを持っているため、こちらで指定しても上書きされてしまうことに注意してください。</p> + +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-popups.xul">表示</a></p> +</div> + +<p>次のセクションでは、どのようにスクロールメニューを作るかを見て行きます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:More_Menu_Features" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Scrolling_Menus">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/progress_meters/index.html b/files/ja/archive/mozilla/xul/tutorial/progress_meters/index.html new file mode 100644 index 0000000000..1928828e3c --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/progress_meters/index.html @@ -0,0 +1,72 @@ +--- +title: プログレスメーター +slug: Archive/Mozilla/XUL/Tutorial/Progress_Meters +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Progress_Meters +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:List_Controls" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_HTML_Elements">次のページ »</a></p> +</div> +<p>このセクションでは、プログレスメーターの作り方を見ていきます。 +</p><p><span id="Adding_a_Progress_Meter"></span> +</p> +<h3 id=".E3.83.97.E3.83.AD.E3.82.B0.E3.83.AC.E3.82.B9.E3.83.A1.E3.83.BC.E3.82.BF.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.83.97.E3.83.AD.E3.82.B0.E3.83.AC.E3.82.B9.E3.83.A1.E3.83.BC.E3.82.BF.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B"> プログレスメーターを追加する </h3> +<p>プログレスメーターは、実行中の操作がどのくらい進んだかを表示するためのバーです。 +このメーターを見かける典型的な場面は、ファイルをダウンロードしているときや、時間のかかる操作を実行しているときです。 +XUL には、こういったメーターを作るために使える、 +プログレスメーター (<code><a href="/ja/docs/Mozilla/Tech/XUL/progressmeter" title="progressmeter">progressmeter</a></code>) 要素があります。 +プログレスメーターには 2 種類あり、1 つは「既定 (<span style="color: green;">determinate</span>) 」、もう 1 つは「未定 (<span style="color: green;">undeterminate</span>) 」プログレスメーターになります。 +</p><p>既定プログレスメーターは、操作に必要な時間が判明しているときに使用します。 +このプログレスメーターは、操作の進み具合に応じて増えていき、端まで一杯になったときには、操作が完了しているはずであることを示します。 +このメーターは、サイズがわかっているファイルを、ダウンロードするダイアログなどで利用できます。 +</p><p>未定プログレスメーターは、操作にかかる時間が不明な場合に使用します。 +このプログレスメーターは、使用しているプラットフォームやテーマに応じて、「理髪店の回転灯」や「箱が左右にスライドする」ようなアニメーションをします。 +</p><p>既定プログレスメーター: +<img alt="画像:prog-det.png"> +</p><p>未定プログレスメーター: +<img alt="画像:prog-udet.png"> +</p><p>プログレスメーターの文法は以下の通りです。 +</p> +<pre><progressmeter + id="identifier" + mode="determined" + value="50"/> +</pre> +<p>各属性は以下の通りです。 +</p> +<dl><dt> <code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> </dt><dd> プログレスメーターの一意な識別子です +</dd><dt> <a href="ja/XUL/Attribute/progressmeter.mode">mode</a> </dt><dd> プログレスメーターの種類です。この属性を <code>determined</code> と指定すると、そのプログレスメーターは、端まで達したことで処理の完了を示す、既定プログレスメーターになります。この属性を <code>undetermined</code> に指定すると、そのプログレスメーターは、処理にかかる時間が不明な場合に使う、未定プログレスメーターになります。この属性を指定しない場合、デフォルトの値は既定 (<code>determined</code>) になります。 +</dd><dt> <code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code> </dt><dd> プログレスメーターの現在の値です。 この属性は既定プログレスメーターでのみ意味があります。 設定値は 0 から 100 の間の<span style="border-bottom: 1px dashed green;" title="percentage">割合</span>を示す整数で指定しなければなりません。 設定値は処理の進行に合わせてスクリプトから変更していきます。 +</dd></dl> +<p><span id="The_find_files_example"></span> +</p> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B"> ファイル検索ダイアログの例 </h4> +<div class="highlight"> +<p>それでは、作成中のファイル検索ダイアログにプログレスメーターを追加してみましょう。 +普通なら、検索にかかるファイルがいくつなのか、検索にどれだけ時間がかかるかのかは、事前にわからないため、未定プログレスメーターを使うところです。 +でも、開発中にずっとアニメーションしているのは気が散りますから、とりあえずは普通のやつを追加することにします。 +通常、プログレスメーターは、検索を実行している間だけ表示されると思います。プログレスメーターを出したり消したりするスクリプトは後のセクションで追加する予定です。 +</p> +<pre class="eval"><hbox> + <span class="highlightred"><progressmeter value="50" style="margin: 4px;"/></span> + <spacer flex="1"/> +</hbox> +</pre> +<p><img alt="画像:progress1.png"> +</p><p>ウィンドウ上でメーターが見えるように、<code>value</code> 属性を 50% と指定してあります。 +また、ウィンドウの端にくっつかないようにマージンを 4 ピクセルに指定しています。 +既に述べたように、検索が行なわれている間だけプログレスバーを表示させたいので、必要に応じて、スクリプトで表示したり隠したりします。 +</p><p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-progress.xul">表示</a> +</p> +</div> +<p>次のセクションでは、ウィンドウに、HTML を使って要素を追加する方法について学びます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:List_Controls" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_HTML_Elements">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/property_files/index.html b/files/ja/archive/mozilla/xul/tutorial/property_files/index.html new file mode 100644 index 0000000000..96443b857c --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/property_files/index.html @@ -0,0 +1,67 @@ +--- +title: プロパティ ファイル +slug: Archive/Mozilla/XUL/Tutorial/Property_Files +tags: + - Internationalization + - Localization + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Property_Files +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Localization" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Introduction_to_XBL">次のページ »</a></p> +</div></div> +<p>スクリプトからは、ローカライズのために実体を参照することができないため、 代わりにプロパティファイルを利用することになります。</p> +<h2 id="Properties" name="Properties">プロパティ</h2> +<p>DTD ファイルは、XUL ファイルに置かれているテキストをローカライズするために利用するのには適していますが、 スクリプトに対しては、実体参照を処理するように適用することはできません。<span style="color: darkgreen; background: #ef9;">【訳注: XUL ファイルに直接スクリプトを埋め込んである場合は除きます】</span> 加えて、スクリプトでは、単純に固定のテキストを表示するのではなく、 動的にメッセージ生成を行って表示するような場合もあると思います。 このような用途のためには、プロパティファイルが利用できます。</p> +<p>プロパティファイルには、スクリプトから利用可能な文字列情報が含まれています。 プロパティファイルは DTD ファイルと同じ場所に、拡張子 <code>.properties</code> で置いておきます。 このファイルで扱う情報はプロパティと呼ばれ、「名前=値」という形式で宣言されます。 以下に例を示します。</p> +<pre>notFoundAlert=No files were found matching the criteria. +deleteAlert=Click OK to have all your files deleted. +resultMessage=%2$S files found in the %1$S directory. +</pre> +<p>この例のプロパティファイルには、3 つのプロパティが含まれています。 これらはスクリプトから読み込まれて、利用者に表示されることになります。</p> +<h2 id="Stringbundles" name="Stringbundles">文字列バンドル</h2> +<p>プロパティファイルを読み込むコードは、独自に記述することも可能かもしれませんが、 XUL では、この用途のために <code><code><a href="/ja/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code> 要素を提供しています。 この要素は、指定されたプロパティファイルの内容を読み込んで、 内部にプロパティのリストを構築して保持し (このリストは<span style="border-bottom: 1px dashed green;" title="bundle">バンドル</span>と呼ばれます)、 プロパティに対応する文字列の取得をはじめ、 いくつかのロケール関連の情報を取得するための機能を提供しています。 スクリプトからは、この要素を利用して、名前を元に対応するプロパティの値を参照することが可能になります。</p> +<pre class="brush:xml"><stringbundleset id="strbundles"> +<stringbundle id="strings" src="strings.properties"/> +</stringbundleset> +</pre> +<p>上記の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code> 要素を追加することで、XUL ファイルと同じディレクトリに置いた <code>strings.properties</code> ファイルから、プロパティが読み込まれます。 これをロケールパッケージから読み込むように変更するためには、chrome URL で指定することになります (通常はロケールパッケージから読み込むようにしてください)。 また、他の表示されない要素と同様に、<code>stringbundle</code> 要素は、まとめて <code><code><a href="/ja/docs/Mozilla/Tech/XUL/stringbundleset" title="stringbundleset">stringbundleset</a></code></code> の中に置くようにします。</p> +<h3 id="Getting_a_String_from_the_Bundle" name="Getting_a_String_from_the_Bundle">バンドルから文字列を取り出す</h3> +<p>この <code><code><a href="/ja/docs/Mozilla/Tech/XUL/stringbundle" title="stringbundle">stringbundle</a></code></code> 要素には、いくつかの (JavaScript オブジェクトの) プロパティが用意されています。 最初の <code>getString</code> は、スクリプトからバンドルに含まれている文字列を取り出すために利用できます。</p> +<pre class="brush:js">var strbundle = document.getElementById("strings"); +var nofilesfound=strbundle.getString("notFoundAlert"); + +alert(nofilesfound); +</pre> +<p>この例では...</p> +<ul> + <li>最初に id からバンドルへの参照を取得します。</li> + <li>次に、<code>getString()</code> 関数によって、プロパティファイルから「<code>notFoundAlert</code>」に対応する文字列を探します。もし存在しない場合は null が返ります。</li> + <li>最後に、取得した文字列がアラートボックスに表示されます。</li> +</ul> +<h3 id="Text_Formatting" name="Text_Formatting">テキストのフォーマット</h3> +<p>次のメソッドは、<code>getFormattedString()</code> です。 このメソッドも、キーになる名前に対応する文字列をバンドルから取得しますが、 加えて、フォーマット指定 (例: <code>%S</code>) が現れるたびに、順番に引数で指定した配列の値で置き換えていきます。</p> +<pre class="brush:js">var dir = "/usr/local/document"; +var count = 10; + +var strbundle = document.getElementById("strings"); +var result = strbundle.getFormattedString("resultMessage", [ dir, count ]); + +alert(result); +</pre> +<p>この例は、以下のメッセージをアラートボックスに表示します。</p> +<pre>10 files found in the /usr/local/document directory. +</pre> +<p>この例では、フォーマット指定として、<code>%1$S</code> と <code>%2$S</code> が使用されていて、 メッセージでは、配列に格納されているのとは異なる順番で置き換えが行われていることに気付いたかもしれません。 <code>%</code><em>n</em><code>$S</code> というフォーマット指定を使用すると、対応するパラメータの位置を直接指定することが可能になります。 すべての言語で単語の並び順が同じではないことに対応するために、<code>getFormattedString()</code> を使用して、並びの指定を (ロケールに置かれている) プロパティファイルに追い出すことが可能です。</p> +<h2 id="Escape_non-ASCII_Characters" name="Escape_non-ASCII_Characters">非 ASCII 文字をエスケープする</h2> +<p>多くの言語で、非 ASCII 文字が必要になるにもかかわらず、プロパティファイルは、ASCII 文字の範囲だけで記述する必要があります。 しかしながら、プロパティファイルでは、それ以外の文字を <code>\u</code><em>XXXX</em> (<em>XXXX</em> は Unicode による文字コード) のエスケープシーケンスで表現することをサポートしています。 このため、非 ASCII 文字を含むプロパティファイルは、'escaped-unicode' 形式に変換する必要があります。 これは、Sun の JDK (Java Development Kit) に含まれている native2ascii コマンドを利用して行うことが可能です。</p> +<p><span style="color: darkgreen; background: #ef9;">【訳注: ローカライズ関連の情報は、<a href="http://forums.firehacks.org/l10n/index.php">もじふぉ</a> をはじめとして日本語独自のリソースが充実しています】</span></p> +<p>Gecko 1.8.x 以降は UTF-8 でコード化されたプロパティファイルをサポートしています。この場合は、非 ASCII 文字をエスケープせずに記述することができます。</p> +<p>次のセクションでは、XBL について見ていきます。これを使用することで要素の<span style="border-bottom: 1px dashed green;" title="behavior">振る舞い</span>を定義することが可能になります。</p> +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Localization" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Introduction_to_XBL">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/rdf_datasources/index.html b/files/ja/archive/mozilla/xul/tutorial/rdf_datasources/index.html new file mode 100644 index 0000000000..6db19549e5 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/rdf_datasources/index.html @@ -0,0 +1,295 @@ +--- +title: RDF データソース +slug: Archive/Mozilla/XUL/Tutorial/RDF_Datasources +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/RDF_Datasources +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Trees_and_Templates" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Advanced_Rules">次のページ »</a></p> +</div> +<p>このセクションでは、いくつかのデータソースと、独自の RDF ファイルをデータソースとして使用する方法を見ていきます。 +</p> +<h3 id=".E3.81.84.E3.82.8D.E3.81.84.E3.82.8D.E3.81.AA_Mozilla_.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9" name=".E3.81.84.E3.82.8D.E3.81.84.E3.82.8D.E3.81.AA_Mozilla_.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9"> いろいろな Mozilla データソース </h3> +<p>Mozilla では、多くの組み込みのデータソースを提供しています。 +ここでは、そのうちのいくつかを例と一覧で示していきます。 +それらは、フィールドについては対応するデータに応じて異なりますが、動作については、ブックマークの場合と非常によく似た挙動を示します。 +</p> +<h3 id=".E5.B1.A5.E6.AD.B4.E3.83.AA.E3.82.B9.E3.83.88" name=".E5.B1.A5.E6.AD.B4.E3.83.AA.E3.82.B9.E3.83.88"> 履歴リスト </h3> +<p>履歴 (history) データソースは、利用者の履歴リスト、つまり利用者が最近訪れた URL のリストへのアクセスを提供します。 +リソースは、データソースとして、<code>rdf:history</code> を指定することで参照できます。 +以下の表は、履歴データソースから取得できるリソース (あるいはフィールド) を示しています。 +テンプレートを作成するとき、リソースの値を使いたい場所に、表中の URL の値を置いてください。 +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td>Date</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#Date</span></td> +<td>最後に訪れた日付</td> +</tr> +<tr> +<td>Name</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> +<td>ページのタイトル</td> +</tr> +<tr> +<td>Page</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#Page</span></td> +<td>ページの名前</td> +</tr> +<tr> +<td>Referrer</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#Referrer</span></td> +<td>ページの参照元</td> +</tr> +<tr> +<td>URL</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> +<td>ページの URL</td> +</tr> +<tr> +<td>Visit Count</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#VisitCount</span></td> +<td>ページの訪問回数</td> +</tr> +</tbody></table> +<p>履歴リストを表示する場合、通常はツリーを利用して、上記のフィールドから表示する必要があるものを選択して表示させることになります。 +テンプレートから使用するためには、上の URL 値を、<code>button</code> や <code>treecell</code> の <code>label</code> 属性に置いてください。 +また、<code>ref</code> 属性の値としては、<code>NC:HistoryRoot</code> を指定できます。 +もしくは、<code>NC:HistoryByDate</code> を指定することで、日付単位でまとめられた履歴を取得することも可能です。 +</p> +<h4 id=".E5.B1.A5.E6.AD.B4.E3.83.AA.E3.82.B9.E3.83.88.E3.81.AE.E4.BE.8B" name=".E5.B1.A5.E6.AD.B4.E3.83.AA.E3.82.B9.E3.83.88.E3.81.AE.E4.BE.8B"> 履歴リストの例 </h4> +<p>それでは、履歴リストを表示する例を見ることにしましょう。 +履歴を、Name、URL、Date という 3 つのカラムからなるツリー内に表示させることにします。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_1.xul.txt">ソース</a> +</p> +<pre><tree flex="1" datasources="rdf:history" ref="NC:HistoryRoot"> + + <treecols> + <treecol id="name" label="Name" flex="1"/> + <treecol id="url" label="URL" flex="1"/> + <treecol id="date" label="Date" flex="1"/> + </treecols> + + <template> + + <rule> + <treechildren> + <treeitem uri="rdf:*"> + <treerow> + <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <treecell label="rdf:http://home.netscape.com/NC-rdf#URL"/> + <treecell label="rdf:http://home.netscape.com/NC-rdf#Date"/> + </treerow> + </treeitem> + </treechildren> + </rule> + + </template> +</tree> +</pre> +<h3 id=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9" name=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9"> その他のデータソース </h3> +<p>以下の表では、Mozilla で利用可能な、それ以外のデータソースをいくつかリストしています。 +これらのリソースは、どれでも必要に応じて使用することが可能です。 +</p> +<dl><dt> Bookmarks (<span class="nowiki">rdf:bookmarks</span>) </dt><dd> ブックマークは、利用者のブックマークリストから生成されます。 +</dd></dl> +<table class="fullwidth-table"> +<tbody><tr> +<th colspan="3">リソース</th> +</tr> +<tr> +<td>Added Date</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#BookmarkAddDate</span></td> +<td>ブックマークが追加された日付</td> +</tr> +<tr> +<td>Description</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#Description</span></td> +<td>ブックマークの説明</td> +</tr> +<tr> +<td>Last Modified</td> +<td><span class="nowiki">http://home.netscape.com/WEB-rdf#LastModifiedDate</span></td> +<td>最終更新日付</td> +</tr> +<tr> +<td>Last Visited</td> +<td><span class="nowiki">http://home.netscape.com/WEB-rdf#LastVisitDate</span></td> +<td>最後に訪れた日付</td> +</tr> +<tr> +<td>Name</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> +<td>ブックマークの名前</td> +</tr> +<tr> +<td>Shortcut URL</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#ShortcutURL</span></td> +<td>カスタムキーワードフィールド</td> +</tr> +<tr> +<td>URL</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> +<td>リンク先 URL</td> +</tr> +</tbody></table> +<table class="fullwidth-table"> +<tbody><tr> +<th colspan="2">Bookmarks のルートとして指定可能な値</th> +</tr> +<tr> +<td>NC:BookmarksRoot</td> +<td>ブックマーク階層のトップレベル</td> +</tr> +<tr> +<td>NC:IEFavoritesRoot</td> +<td>利用者の IE のお気に入りに対応するブックマークフォルダ</td> +</tr> +<tr> +<td>NC:PersonalToolbarFolder</td> +<td>パーソナルなツールバーフォルダに対応するブックマークフォルダ</td> +</tr> +</tbody></table> +<dl><dt> Files (<span class="nowiki">rdf:files</span>) +</dt><dd>利用者環境の (ローカルな) ファイルの情報を参照します。 +</dd></dl> +<table class="fullwidth-table"> +<tbody><tr> +<th colspan="3">リソース</th> +</tr> +<tr> +<td>Name</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#Name</span></td> +<td>ファイルの名前</td> +</tr> +<tr> +<td>URL</td> +<td><span class="nowiki">http://home.netscape.com/NC-rdf#URL</span></td> +<td>ファイルの URL</td> +</tr> +</tbody></table> +<table class="fullwidth-table"> +<tbody><tr> +<th colspan="2">Files のルートとして指定可能な値</th> +</tr> +<tr> +<td>NC:FilesRoot</td> +<td>ファイルシステムのトップレベル。(通常、ドライブのリスト)</td> +</tr> +<tr> +<td>ファイルの URL</td> +<td><code>ref</code> 属性に、ファイル URL を指定することで、特定のディレクトリを参照するように選択できます。例えば、<code><a class=" external" rel="freelink">file:///windows</a></code> や <code><a class=" external" rel="freelink">files:///usr/local</a></code> のような指定が可能です。</td> +</tr> +</tbody></table> +<p>ファイルデータソースは、実際に必要になったときにリソースの確定を行うタイプのデータソースの一例になります。 +ツリーやメニューを表示させるとき、実際にデータが表示される前に、ファイルシステム中のすべてのファイルを走査してリソース情報として確定するのは望ましい動作ではないはずです。 +実際のファイルデータソースは、その時点でツリー要素 (あるいはその他の要素) が表示する必要があるファイルとディレクトリについてだけが走査されて確定するように動作します。 +</p> +<h3 id=".E8.A4.87.E5.90.88.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9" name=".E8.A4.87.E5.90.88.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9"> 複合データソース </h3> +<p>以下の例で示すように、<code>datasources</code> 属性には複数のデータソースを空白文字 (whitespace) で区切って指定できます。 +これは、指定されたすべてのデータソースからデータを読み込む効果があります。 +</p> +<pre><tree datasources="rdf:bookmarks rdf:history animals.rdf" ref="NC:BookmarksRoot"> +</pre> +<p>この例は、リソースを、ブックマークと履歴の組み込みデータソースと、<code>animals.rdf</code> ファイルから読み込みます。 +これらは 1 つの複合データソースに結合されるため、あたかも 1 つのデータソースであるかのように使用することが可能です。 +</p><p>また、特殊なデータソースである <code>rdf:null</code> は、何にも対応しません。 +このデータソースは、スクリプトを使用してデータソースを動的に設定する場合に、 +初期値としてどのデータソースも指定したくない場合や、指定する URL が正確に分からない場合に使うことができます。 +</p> +<h3 id=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0_RDF_.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9" name=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0_RDF_.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9"> カスタム RDF データソース </h3> +<p>上記の組み込みのデータソースは、どれでも必要に応じて使用することが可能です。 +これ以外にも、メールやアドレス帳、検索などについてもデータソースが提供されています。 +しかしながら、RDF ファイルに保存された、独自の RDF データソースを使いたい場合もあるかもしれません。 +このために必要なことは、RDF ファイルの URL を <code><code id="a-datasources"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code></code> 属性に置くだけです。 +このときの RDF ファイルは、ローカルでもリモートでも構いません。 +</p><p>RDF ファイルを使用する場合にも、組み込みのデータソースの場合と完全に同等の機能が提供されています。 +例えば、特定の型にマッチしたコンテントを生成するためにルールを指定することが可能です。 +このときは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code></code> 要素に指定した属性が、RDF の <code>Description</code> 要素の属性とマッチした場合に、マッチしたことになります。 +また、階層的な RDF ファイルを作ることも可能です。 +</p> +<h4 id="RDF_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.9F.E4.BE.8B" name="RDF_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E4.BD.BF.E7.94.A8.E3.81.97.E3.81.9F.E4.BE.8B"> RDF ファイルを使用した例 </h4> +<p>以下の例は、RDF ファイルをデータソースとして使用する方法を示しています。 +使用する RDF ファイルは結構大きいため、 +別ファイルで参照するようにしておきます: <a href="https://developer.mozilla.org/samples/xultu/examples/animals.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/animals.rdf">RDF</a> +</p><p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_2.xul">表示</a> +</p> +<pre><tree flex="1" width="200" height="200" + datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> + + <treecols> + <treecol id="name" label="Name" primary="true" flex="1"/> + <treecol id="species" label="Species" flex="1"/> + </treecols> + + <template> + <rule> + <treechildren> + <treeitem uri="rdf:*"> + <treerow> + <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> + <treecell label="rdf:http://www.some-fictitious-zoo.com/rdf#species"/> + </treerow> + </treeitem> + </treechildren> + </rule> + + </template> +</tree> +</pre> +<p><img alt="画像:datasrc1.jpg"> +</p><p>ここでは、データはファイルから生成されています。 +また、<code><code id="a-ref"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> 属性は、RDF ファイルのルート要素、つまり、トップレベルの <code>Seq</code> に設定されています。 +これによって、animals に含まれている完全なリストが取得できます。 +なお、必要であれば、<code><code id="a-ref"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> 属性の値を、それ以外の <code>about</code> 属性の値に変更することで、返されるデータの範囲を制限することが可能です。 +例えば、reptiles (爬虫類) だけを表示するには、<code><span class="nowiki">http://www.some-fictitious-zoo.com/reptiles</span></code> という値を指定します。 +</p> +<h4 id="ref_.E5.B1.9E.E6.80.A7.E3.81.AE.E8.A8.AD.E5.AE.9A.E4.BE.8B" name="ref_.E5.B1.9E.E6.80.A7.E3.81.AE.E8.A8.AD.E5.AE.9A.E4.BE.8B"> ref 属性の設定例 </h4> +<p>以下の例は、<code><code id="a-ref"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> 属性を設定することで、RDF データソースの特定部分を表示する方法を示しています。 +</p><p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_datasrc_3.xul">表示</a> +</p> +<pre><window + id="example-window" + title="History List" + xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<button label="Click here to see the mammals the zoo has" type="menu" + datasources="animals.rdf" ref="http://www.some-fictitious-zoo.com/mammals"> + <template> + <rule ANIMALS:specimens="0"></rule> + <rule> + <menupopup> + <menuitem uri="rdf:*" label="rdf:http://www.some-fictitious-zoo.com/rdf#name"/> + </menupopup> + </rule> + </template> +</button> + +</window> +</pre> +<p>この例では、mammals (哺乳類) だけを求めたい場合を想定して、mammals リストの URI を選択しています。 +例の中で、<code><code id="a-ref"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> 属性の値が、<code><span class="nowiki">http://www.some-fictitious-zoo.com/mammals</span></code> に設定されていて、 +これが、RDF ファイル の <code>Seq</code> 要素の 1 つと対応していることを確認してください。 +この設定によって、このリストの子孫だけが返されることになります。 +</p><p>また、ここでは、ルールが 2 つ使われています。 +最初のルールは、ANIMALS:specimens 属性が 0 に設定されたリソースすべてをキャッチします。 +<span style="color: darkgreen; background: #ef9;">【訳注: specimen は「見本」という意味 -- この場合は、飼育されている頭数のことと思われる】</span> +RDF ファイルを参照して、各 <code>Description</code> 要素に対してこの属性が設定されていることと、 +その中に、値が 0 で設定されているのものがあることを確認してみてください。 +これらの値が 0 で設定されている要素には、最初のルールがマッチすることになりますが、 +このルールにはコンテントがないため、これらのリソースに対しては何の表示も行われません。 +この方法は、表示したくないデータを隠す場合に役に立ちます。 +</p><p>2 番目のルールは、それ以外のすべてのリソースに適用され、ポップアップメニューの行を生成します。 +最終的には、specimen に 0 以外が設定された、すべての mammals を含んだポップアップメニューが得られることになります。 +</p><p>次のセクションでは、ルールに関する全ての構文について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Trees_and_Templates" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Advanced_Rules">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/scroll_bars/index.html b/files/ja/archive/mozilla/xul/tutorial/scroll_bars/index.html new file mode 100644 index 0000000000..f52e886673 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/scroll_bars/index.html @@ -0,0 +1,77 @@ +--- +title: スクロールバー +slug: Archive/Mozilla/XUL/Tutorial/Scroll_Bars +translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Splitters" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Toolbars">次のページ »</a></p> +</div> +<p>今回は、ウィンドウにスクロールバーを追加する方法を見ていこうと思います。 +</p><p><span id="Adding_Scroll_Bars"></span> +</p> +<h3 id=".E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB.E3.83.90.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B"> スクロールバーを追加する </h3> +<p>スクロールバーは、多くの場合、利用者が大きな文書内を移動できるようにするために使用されます。 +それ以外では、特定の範囲の値を入力する必要がある場合にも使うことができます。 +スクロールバーを作成する方法はたくさんありますが、 +XUL では <code><code><a href="/ja/docs/Mozilla/Tech/XUL/scrollbar" title="scrollbar">scrollbar</a></code></code> タグを使って作ることができます。 +また、テキスト入力欄のような要素では、その内容が非常に大きい場合には、必要に応じて自動的にスクロールバーが追加されます。 +</p><p>このセクションでは、単独で動作するスクロールバーの作り方について説明します。 +これは、おそらく、それほど頻繁に使用されることはないと思いますが、 +利用者はスクロールバーを調整することによって、入力値を設定することができます。 +スクロールバーは、いくつかの部品で構成されています。 +まず、スライダーがあります。これはスクロールバーの主要部分で、調整用のボックスを持っています。 +それと、両端の 2 つの矢印ボタンです。 +スクロールバーは、これらの要素すべてを、自動的に生成します。 +</p><p>スクロールバーの画像を、以下に示します。 +</p><p><img alt="画像:scroll1.png"> +</p><p>スクロールバーの構文を、以下に示します。 +</p> +<pre><scrollbar + id="identifier" + orient="horizontal" + curpos="20" + maxpos="100" + increment="1" + pageincrement="10"/> +</pre> +<p>スクロールバーの属性は以下のようになります。 +</p> +<dl><dt> <code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code> +</dt><dd> スクロールバーの一意な識別子です。 +</dd></dl> +<dl><dt> <code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code> +</dt><dd> スクロールバーの向きを指定します。デフォルトは <code>horizontal</code> で、左から右の方へ広げるためのスクロールバーを生成します。<code>vertical</code> を指定した場合は、上から下の方へ広げるためのスクロールバーを生成します。 +</dd></dl> +<dl><dt> <code id="a-curpos"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code> +</dt><dd> スクロールバー上で、前後にスライドできるボックスである、<span style="border-bottom: 1px dashed green;" title="thumb">サム</span>の現在の位置を指定します。指定可能な値の範囲は、0 から <code><code id="a-maxpos"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxpos">maxpos</a></code></code> の間になります。値に単位は必要はありません。デフォルト値は 0 になります。 +</dd></dl> +<dl><dt> <code id="a-maxpos"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxpos">maxpos</a></code> +</dt><dd> スクロールバーのサムを最大位置に移動したときの値を指定します。値は数値で、単位はありません。デフォルト値は 100 になります。 +</dd></dl> +<dl><dt> <code id="a-increment"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code> +</dt><dd> 利用者が、スクロールバーの矢印をクリックしたとき、 <code><code id="a-curpos"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code></code> の値がどれだけ変化するかを指定します。 デフォルト値は 1 になります。 +</dd></dl> +<dl><dt> <code id="a-pageincrement"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/pageincrement">pageincrement</a></code> +</dt><dd> 利用者がスクロールバーでページ送り操作をしたとき、 <code><code id="a-curpos"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code></code> の値がどれだけ変化するかを指定します。ページ送りは、スクロールバーのサムと矢印の間のトレイ部分をクリックすることで可能です。デフォルト値は 10 になります。 +</dd></dl> +<p>上の構文として示した例では、0 から 100 までの値をもつことのできるスクロールバーを作ります。 +この 100 という値は、この例からは何と対応するものかはわかりませんが、ひょっとしたら、何かのリストの行数と対応しているのかもしれません。 +ここには必要な任意の値を設定することが可能です。 +この例のスクロールバーの初期値は <code><code id="a-curpos"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/curpos">curpos</a></code></code>で指定されている値 20 になります。 +スクロールバーの矢印をクリックすると、値は 1 増減します。 +スクロールバーでページ送り操作をすると、値は 10 変化します。 +</p><p>利用者がスクロールバーの矢印をクリックすると、サムは <code><code id="a-increment"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/increment">increment</a></code></code> の値によって指定された量だけ動きます。 +この属性の値を増やすと、スクロールバーはクリックのたびにもっとたくさん動くことになります。 +スクロールバーの左端または上端の位置の値は、0 で、 +スクロールバーの右端または下端の値は、<code><code id="a-maxpos"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/maxpos">maxpos</a></code></code> によって指定した値になります。 +</p><p>スクロールバーの値を調整することによって、サムを好きな位置に移動することが可能です。 +また、利用者が矢印をクリックしたときに動く量も、好きな値に設定することができます。 +</p><p>次のセクションでは、ツールバーの作り方を見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Splitters" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Toolbars">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/scrolling_menus/index.html b/files/ja/archive/mozilla/xul/tutorial/scrolling_menus/index.html new file mode 100644 index 0000000000..dfaf3422d6 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/scrolling_menus/index.html @@ -0,0 +1,69 @@ +--- +title: メニューのスクロール表示 +slug: Archive/Mozilla/XUL/Tutorial/Scrolling_Menus +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Scrolling_Menus +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Popup_Menus" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Event_Handlers">次のページ »</a></p> +</div> +<p>このセクションでは、メニューのスクロール表示についての説明と、その仕組みを他の要素に対しても使う方法を見ていきます。 +</p><p><span id="Creating_a_Large_Menu"></span> +</p> +<h3 id=".E5.A4.A7.E3.81.8D.E3.81.AA.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E4.BD.9C.E3.82.8B" name=".E5.A4.A7.E3.81.8D.E3.81.AA.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.82.92.E4.BD.9C.E3.82.8B"> 大きなメニューを作る </h3> +<p>全ての項目が、1 回で画面に入りきらないぐらい多くの操作項目を持つようなメニューを作った場合、どのように処理されるのかを疑問に思ったことがあるかと思います。 +Mozilla では、全ての項目をスクロールさせながら見ることができるように、スクロール表示機能を提供しています。 +</p> +<div class="float-right"><img alt="画像:menuscroll1.png"></div> +<p>利用可能なスペースが、メニュー表示に必要な大きさより小さい場合、メニューの両端に矢印が現れます。 +この矢印の上にマウスを置くことによって、メニューは上下にスクロールします。 +利用できるスペースが十分にあれば、矢印は表示されません。 +なお、正確には、スクロール表示の動作は、現在のテーマに依存する事に注意してください。 +</p><p>この動作は自動的に発動します。 +メニューをスクロール表示にするために、何もする必要はありません。 +スクロールの自動表示は、ポップアップ (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/popup" title="popup">popup</a></code></code>)、メニューリスト (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code>)、メニューバー (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code>) 上のメニュー (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code>) に対して適用されます。 +この機能は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> 要素を使って実装されています。 +この要素は、矢印付きのスクロール表示ボックスを作るために使うことが可能です。 +</p><p>また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> は、通常のボックスを使うことができる場所なら、どこでも使用可能です。 +なお、メニューの中で明示的に使う必要はありません。 +このボックスは、常に垂直配置で、内部にどんな要素でも含むことができます。 +これは、リストをドロップダウンではない方法で実装するときに使うことができると思います。 +</p><p><span id="Example_-_scrolling_list_of_buttons"></span> +</p> +<h4 id=".E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB.E8.A1.A8.E7.A4.BA.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E4.BE.8B" name=".E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB.E8.A1.A8.E7.A4.BA.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E4.BE.8B"> スクロール表示ボックスの例 </h4> +<p>以下の例は、スクロール表示されるボタンのリストの作り方です (矢印ボタンを見るにはウィンドウをリサイズする必要があります) +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menuscroll_1.xul">表示</a> +</p> +<pre><arrowscrollbox orient="vertical" flex="1"> + <button label="Red"/> + <button label="Blue"/> + <button label="Green"/> + <button label="Yellow"/> + <button label="Orange"/> + <button label="Silver"/> + <button label="Lavender"/> + <button label="Gold"/> + <button label="Turquoise"/> + <button label="Peach"/> + <button label="Maroon"/> + <button label="Black"/> +</arrowscrollbox> +</pre> +<p>この例を表示させた場合、まずフルサイズで開かれると思います。 +その場合も、ウィンドウの高さを縮めていけば、スクロールの矢印が現れます。 +また、ウィンドウを再度大きくしていくと矢印は消えるはずです。 +</p><p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> に対して CSS の <a href="/ja/docs/Web/CSS/max-height" title="CSS の max-height プロパティは要素の最大の高さを設定するのに使われます。height プロパティの使用値は、max-height に設定した値よりも大きくなりません。"><code>max-height</code></a> プロパティを設定する事で、スクロール表示ボックスの大きさを制限することができます。 +これを利用して、常に矢印を表示させておくことが可能です。 +</p><p>とはいっても、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/arrowscrollbox" title="arrowscrollbox">arrowscrollbox</a></code></code> が主に使われるのは、やはり、メニューとポップアップの中になります。 +</p><p>次のセクションでは、XUL 要素にイベントハンドラを追加する方法を見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Popup_Menus" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Event_Handlers">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/simple_menu_bars/index.html b/files/ja/archive/mozilla/xul/tutorial/simple_menu_bars/index.html new file mode 100644 index 0000000000..a1b0e693f6 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/simple_menu_bars/index.html @@ -0,0 +1,171 @@ +--- +title: 簡単なメニューバー +slug: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Toolbars" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Menu_Features">次のページ »</a></p> +</div> + +<p>このセクションでは、複数のメニューを持つメニューバーの作成方法を見て行きます。</p> + +<p><span id="Creating_a_Menu"></span></p> + +<h2 id=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90" name=".E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90">メニューの作成</h2> + +<p>XUL には、メニューを作る方法がいくつかあります。 最も基本的な方法は、他の多くのアプリケーションが持っているような、複数のメニューが 1 列に並んだメニューバーを追加することです。 また、ポップアップメニューも作成可能です。 XUL のメニュー機能は、いくつかの異なる要素で構成されており、これらを利用してメニューバーやポップアップメニューを作ることができます。 メニューの項目をカスタマイズするのはとても簡単です。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> を使用した<a href="/ja/XUL_Tutorial/List_Controls#Drop-down_Lists" title="ja/XUL_Tutorial/List_Controls#Drop-down_Lists">メニューを作成する方法</a>の一部については既に説明しています。 このセクションはそれを前提に構成しています。</p> + +<p>メニューバーは、おおむねツールバーと同じように作成されます。 また、メニューバーはオプションで <code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> の中に置くことができます。 メニューは他のツールバーと同じように動作します。 XUL は、メニュー固有の特殊な機能を提供するために専用の要素をいくつか持っています。</p> + +<p>メニューバーと、メニューの作成に関係する要素は 5 つあります。 以下で簡単に紹介した後、詳細な説明を行っていきます。</p> + +<dl> + <dt><code id="a-menubar"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/menubar">menubar</a></code></dt> + <dd>メニューの列を入れるためのコンテナです。</dd> +</dl> + +<dl> + <dt><code id="a-menu"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/menu">menu</a></code></dt> + <dd>「menu」という名前ですが、実際にはメニューバーに表示されるメニューのタイトルだけを持っています。この要素はメニューバーの中に置くことが可能です。またはメニューバーとは別の場所に置くこともできます。</dd> +</dl> + +<dl> + <dt><code id="a-menupopup"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/menupopup">menupopup</a></code></dt> + <dd>メニューのタイトルをクリックした時に、ポップアップして表示されるボックスです。このボックスには、利用者に提示する操作項目のリストが含まれます。</dd> +</dl> + +<dl> + <dt><code id="a-menuitem"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/menuitem">menuitem</a></code></dt> + <dd>メニュー上の個々の<span style="border-bottom: 1px dashed green;" title="command">操作項目</span>です。 この要素は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> の中に置かれます。</dd> +</dl> + +<dl> + <dt><code id="a-menuseparator"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/menuseparator">menuseparator</a></code></dt> + <dd>メニューを分割するための線です。この要素は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> の中に置かれます。</dd> +</dl> + +<div class="note"> +<p>メニューバーのメニューは Macintosh を除く全てのプラットフォームで、何でも好きなようにカスタマイズできます。 Macintosh では、システムによって制御されている OS 自身の特別なメニューが画面の上部に置かれるため、その制限を超えたカスタマイズはできません。 どのような特別なスタイル定義や、非メニュー要素を含んだカスタムメニューでも作成する事ができますが、メニューの上に配置した場合に適用されていない可能性があります。 このことは、メニューを作る時には常に留意してください。</p> +</div> + +<p><span id="Example_of_a_simple_menu_bar"></span></p> + +<h4 id=".E7.B0.A1.E5.8D.98.E3.81.AA.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.83.90.E3.83.BC.E3.81.AE.E4.BE.8B" name=".E7.B0.A1.E5.8D.98.E3.81.AA.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.83.90.E3.83.BC.E3.81.AE.E4.BE.8B">簡単なメニューバーの例</h4> + +<p>簡単なメニューバーの例を以下に示します。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_menubar_1.xul">表示</a></p> + +<pre><toolbox flex="1"> + <menubar id="sample-menubar"> + <menu id="file-menu" label="File"> + <menupopup id="file-popup"> + <menuitem label="New"/> + <menuitem label="Open"/> + <menuitem label="Save"/> + <menuseparator/> + <menuitem label="Exit"/> + </menupopup> + </menu> + <menu id="edit-menu" label="Edit"> + <menupopup id="edit-popup"> + <menuitem label="Undo"/> + <menuitem label="Redo"/> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> + +<div class="float-right"><img alt="画像:menubar-ex1.png" class="internal" src="/@api/deki/files/1923/=Menubar-ex1.png"></div> + +<p>この画像は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> 要素を使って作成した簡単なメニューバーです。 この要素は、メニューを置くための行部分を作ります。 2 つのメニュー、File と Edit が作られています。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 要素は、メニューの一番上にあるタイトルの部分を作り、メニューバーの所に表示されます。 ポップアップは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素を使って作ります。 これは、利用者が親メニューのタイトルをクリックしたときにポップアップされます。 ポップアップのサイズは、その中にある<span style="border-bottom: 1px dashed green;" title="command">操作項目</span>に合わせて大きくなります。 操作項目自体は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 要素を使って作成されます。 それぞれが、メニューのポップアップ中の 1 つの操作項目を表しています。</p> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code> 要素を使って、メニューに分割線を作るも可能です。 この要素は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> をグループに分割するために使用します。 英語版章題 <span id="menubar_element"></span></p> + +<h3 id="menubar_.E8.A6.81.E7.B4.A0" name="menubar_.E8.A6.81.E7.B4.A0">menubar 要素</h3> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> 要素は、メニューを含んでいるボックスです。 例では、この要素が伸縮可能な <code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> の中に置かれていることに注目してください。 この要素には特別な属性はありませんが、これもボックスの一種です。 このことは、<code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性に <code>vertical</code> を設定することで、垂直配置のメニューバーが作成可能であることを意味しています。</p> + +<p><span id="menu_element"></span></p> + +<h3 id="menu_.E8.A6.81.E7.B4.A0" name="menu_.E8.A6.81.E7.B4.A0">menu 要素</h3> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code>要素は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code>に似たような動作をします。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> と同じ属性と、いくつかの付加的な属性を受け付けます。</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> + <dd>メニューのタイトルボタンのための一意な識別子。</dd> +</dl> + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> + <dd>File や Edit といったメニューに表示するテキスト。</dd> +</dl> + +<dl> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> + <dd>この論理型の属性は、メニュー項目を無効にするかどうかを決めます。この設定は可能ですが、メニュー全体を無効にする必要があることは、めったにないと思います。この属性には <code>true</code> と <code>false</code>が設定可能です。もちろん、初期値は後者になります。</dd> +</dl> + +<dl> + <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> + <dd>この属性は、利用者がメニューのアイテムをアクティブにするために押すキーです。この文字は、通常メニュータイトルに下線をつけて表示されます。Mozilla は <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> 属性の値を参照し、この属性で指定された文字に下線を付けて表示させます。このため、<code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code> の値には <code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code> のテキストに存在する文字を指定するべきです。(そうしない場合でも、キーによる入力は依然動作します)。<span style="color: darkgreen; background: #ef9;">【訳注: 日本語の場合、英字がメニューのラベルに直接現れることはまれなので、「(キー)」をラベルに付加して置きます】</span></dd> +</dl> + +<div class="float-right"><img alt="画像:menubar-ex2.jpg" class="internal" src="/@api/deki/files/1924/=Menubar-ex2.jpg"></div> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 要素は、通常は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> 要素の中に配置されます。 しかしながら、このことは必須ではありません。 ただし、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menubar" title="menubar">menubar</a></code></code> 要素の中に置かない場合は、見た目が変わります。 この画像は、前の例からメニューバーを無くしたものを示しています。</p> + +<p><span id="menupopup_element"></span></p> + +<h3 id="menupopup_.E8.A6.81.E7.B4.A0" name="menupopup_.E8.A6.81.E7.B4.A0">menupopup 要素</h3> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> 要素は、メニューの操作項目を含むポップアップウインドウを作成します。 この要素もボックスの一種で、デフォルトでは垂直配置になります。 必要なら水平配置に変更することも可能で、その場合 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> は、横一列に配置されます。 通常、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> と <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code> のみが <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> に配置されます。 それ以外のどんな要素でも <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menupopup" title="menupopup">menupopup</a></code></code> に配置することも可能ではありますが、その場合は Macintosh を無視することになります。</p> + +<p><span id="menuitem_element"></span></p> + +<h3 id="menuitem_.E8.A6.81.E7.B4.A0" name="menuitem_.E8.A6.81.E7.B4.A0">menuitem 要素</h3> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 要素は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menu" title="menu">menu</a></code></code> 要素とよく似ており、同じ属性を持っています。</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> + <dd>メニュー項目の一意な識別子。</dd> +</dl> + +<dl> + <dt><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></dt> + <dd>Open や Save といったメニュー項目に加えるテキスト。</dd> +</dl> + +<dl> + <dt><code id="a-disabled"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/disabled">disabled</a></code></dt> + <dd>この論理型の属性は、メニュー項目を無効にするかどうかを決めます。この属性には<code>true</code>と<code>false</code>が設定可能で、初期値は後者になります。</dd> +</dl> + +<dl> + <dt><code id="a-accesskey"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/accesskey">accesskey</a></code></dt> + <dd>この属性は、利用者がメニューのアイテムをアクティブにするために押すキーです。この文字は、通常メニュータイトルに下線をつけて表示されます。Mozilla は label 属性の値を参照し、この属性で指定された文字に下線を付けて表示させます。このため、accesskey の値には label のテキストに存在する文字を指定するべきです。</dd> +</dl> + +<dl> + <dt><code id="a-acceltext"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/acceltext">acceltext</a></code></dt> + <dd>ここには、メニューの操作項目のテキストの隣に表示されている (Ctrl+Zのような) ショートカットキーのテキストを指定します。これは (表示テキストの指定だけであり) メニュー項目をキーボード操作と関係づけるものではありません。メニュー項目とキーを関連づける方法は、<a href="/ja/XUL_Tutorial/Keyboard_Shortcuts" title="ja/XUL_Tutorial/Keyboard_Shortcuts">後のセクション</a>で説明する予定です。</dd> +</dl> + +<p><span id="menuseparator_element"></span></p> + +<h3 id="menuseparator_.E8.A6.81.E7.B4.A0" name="menuseparator_.E8.A6.81.E7.B4.A0">menuseparator 要素</h3> + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuseparator" title="menuseparator">menuseparator</a></code></code> には特別な属性はありません。 これは、単に次の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> との間に水平な線を作るだけです。</p> + +<p>次のセクションでは、よりたくさんのメニューの機能を学びます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Toolbars" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Menu_Features">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/skinning_xul_files_by_hand/index.html b/files/ja/archive/mozilla/xul/tutorial/skinning_xul_files_by_hand/index.html new file mode 100644 index 0000000000..2d61617786 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/skinning_xul_files_by_hand/index.html @@ -0,0 +1,244 @@ +--- +title: Skinning XUL Files by Hand +slug: Archive/Mozilla/XUL/Tutorial/Skinning_XUL_Files_by_Hand +tags: + - XUL + - 移行 +translation_of: Archive/Mozilla/XUL/Tutorial/Skinning_XUL_Files_by_Hand +--- +<h3 id=".E3.82.B9.E3.82.AD.E3.83.B3.E3.81.A8.E3.81.AF.E4.BD.95.E3.81.8B.3F" name=".E3.82.B9.E3.82.AD.E3.83.B3.E3.81.A8.E3.81.AF.E4.BD.95.E3.81.8B.3F">スキンとは何か?</h3> + +<p>XULファイルの<em>スキン</em>とは、その外観や全体的なスタイルのことです。XULでは、スキンは CSS と画像から生成されます。 XULファイルをスキニングするとは、そのファイルのスタイル情報を変更して、全体的な外観を変えることです。もうすぐ XUL ファイルを動的かつ完全にスキニングすることができるようになります ―― ボタンを押したり、メニューからスキンを選択したり、Webからスキンを受け入れたりといった方法によって。 その日が来たら、グローバルスキンファイルで定義されているスキンが、全てのアプリケーション ―― Mozillaブラウザのような ―― に適用されるでしょう。そして、色々なウィンドウやパーツ全ては統一的に見えるようになります。 しかしそれまでは、ファイルをスキニングするのにいくばくかは手でやらなければなりません。この記事は、スキンというものと XULのスキン作成を理解する始めの助けとなり得ます。 この記事は、あなたが少なくとも XUL とそれを記述する Application Object Model についての基礎的な理解があることを仮定しています。 ここの説明をたどっていくにつれて、XULのスキンを作って、対象とするエレメント全てのクラスを指定してそのスキンを適用する過程をたどることになります。 スキンが単一の CSS に存在するとしましょう、名前は drxul.css とします。後に分かりますが、CSS はひとつひとつの要素、要素クラス、擬似クラス、無名クラスのスタイルを定義できるような柔軟性を提供しています。</p> + +<p>一方、スキンという術語と対照的に、「クロム(chrome)」はスキン<em>と</em>その内容<em>と</em>アプリケーションやウィンドウの一部に必要とされる地域化やプラットフォーム固有のものを示します。スキンはインターフェースのスタイルや見え方それだけですが、クロムはスタイルと内容と構造です。クロムはアプリケーションのフロントエンド全てです。</p> + +<p>XULの見え方(と動作!)を規定するもののほとんどは、それぞれの XUL エレメントへの CSS です。たとえば CSS-2 では、全てのエレメントにその親エレメント中での絶対位置を指定することができます。また、ボタンの挙動の多くはスタイル群とそれらを動的に交換する JavaScript に基いたイベントモデルによります。 現在の Mozilla のグローバルスキンは、ボタンのいくつかのクラスにこの基本的な挙動を定義しています。ボタンの class 属性がグローバルスキンで定義されたあるクラスにセットされると、そのボタンはグローバルスキンでスタイリングされます。 例えば、ボタンを以下のように定義した場合:</p> + +<pre><titledbutton '''class="push"''' value="Push Me" /> +</pre> + +<p>次のかなり単純なスタイル定義が適用されます。</p> + +<pre>titledbutton.push {border: 1px.;} +</pre> + +<p>これらいくつかのボタンクラスや、たくさんの他の要素が定義されているグローバルスキンは、以下のセクションで説明されています。 あなたのエレメントのスタイルに Mozilla のグローバルスキンで既に定義されているクラスを使いたいなら、そのようにして構いません。 しかし、あなたの XUL ファイルに特別の新たなボタンクラスを定義したいかもしれません。その場合はスタイル情報はあなたのカスタムCSSファイル中で全て定義されることになるでしょう。</p> + +<h3 id=".E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E3.82.B9.E3.82.AD.E3.83.B3.E3.82.92.E8.AA.AD.E3.82.80" name=".E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E3.82.B9.E3.82.AD.E3.83.B3.E3.82.92.E8.AA.AD.E3.82.80">グローバルスキンを読む</h3> + +<p>独自のスタイルシートを作り始める前に、グローバルスキン中の基本的なスタイル定義に慣れておくことはとても重要です。カスケーディングスタイルシートは、あっという間に複雑なものになり得ます。ある型の要素や個別の要素、要素クラスなどにスタイルを適用できる能力は、スタイル情報に冗長性や衝突の可能性を作り出します。 これを避けるために、カスケーディングスタイルシート仕様の作成者たちは、先行優位のルールを決めました。 このルールは、あるエレメントにいくつの異なったルールが定義されているのか、どこにスタイル定義が現れるか(CSSファイルの外部か内部かなど)、どこに要素自身が現れるか、さらに他の難解な変量を見ます。 たとえば、あなたのカスタムスタイルシートに特定の ID を持つボタンへのスタイルを作るとすると、グローバルスキン中のボタンに対するより基本的なスタイル情報が、あなたの新しいスタイルの前に適用され、あなたのスタイルは適用されません。 グローバルスキンがそのスキンを定義するやり方と、一般的にどのエレメントを指定しているのかを確実に意識しておいてください。</p> + +<p>グローバルスキンの目的は、アプリケーション全体の外見や、動的に変更されるクロムを作ることなので、本当にそうしたいのでなければ、カスタムCSSファイル中にグローバルスキンに反するスタイル情報を作るべきではありません。 もしあなたの XUL ファイルが Mozilla のような、スキン可能なより大きなアプリケーションの一部となるのでしたら、アプリケーションが動的に再スキニングされた時には XULファイルでグローバルな変更を拾いあげてほしいでしょう。 あなたの XUL ファイルが外観を一貫し、全体でスキンが壊れないように保つために(画像のように、あなたのスタイルがグローバルスキンの一部に依存している場合)、グローバルスキンとあなたのカスタムCSSファイルを一緒にロードするか、以下のような指示でグローバルスキンをあなたのスタイルシートにインポートするかして、グローバルスキンでスタイルルールを使います。</p> + +<pre>@import url(chrome://global/skin/) +</pre> + +<p>グローバルスキン、XUL、そして Mozilla に友好的なスキンの作り方についてのガイドラインとしては、<em><a class="external" href="http://www.mozilla.org/xpfe/skins.html">Writing Skinnable XUL and CSS</a></em> のドキュメントを参照のこと。</p> + +<h4 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.81.AE.E6.A7.8B.E6.96.87" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.81.AE.E6.A7.8B.E6.96.87">スタイルシートの構文</h4> + +<p>グローバルスキンに親しむために、Mozillaアプリケーションの bin/chrome/global/skin ディレクトリ中にある global.css というテキストファイルを開いてください。カスケーディングスタイルシートでは、スタイル定義は以下のような基本的な形式を持ちます:</p> + +<pre>element { + style attribute1: value; + style attribute2: value; + style attribute3: value; +} +</pre> + +<p>たとえば、次の定義 ―― グローバルスキンの多くのメニューのスタイル定義との重大な衝突は無いものとします ―― は全ての XUL メニューが 1ピクセルのボーダー、light blue の背景色、10ポイントフォントで表示されるようにします:</p> + +<pre>menu { + border: 1px; + background-color: lightblue; + font-size: 10pt.; +} +</pre> + +<p>これら基本的な要素スタイルルールに加えて、CSS はまたスタイル情報の適用において要素クラスと要素ID を提供します。以下の表に、これら 2つの共通なスタイル定義の型の基本的な形式を示します:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Class</td> + <td class="header">ID</td> + </tr> + <tr> + <td><em>element.class { attribute: value;}</em></td> + <td><em>element#id { attribute: value;}</em></td> + </tr> + <tr> + <td> + <pre> +menu.baseline { + border: 0px; + font-size: 9pt; +} +</pre> + </td> + <td> + <pre> +menu#edit { color: red;} +</pre> + </td> + </tr> + </tbody> +</table> + +<h4 id="Other_Style_Subgroups" name="Other_Style_Subgroups">Other Style Subgroups</h4> + +<p><em>文脈上の</em>下位のもの ―― <span class="nowiki"><p>要素や <div>要素</span>中のイタリック体テキストのような、他の要素中にある要素 ―― は CSS ではグループ化できます。 しかし、XUL のスタイリングのためにはこれは極めて役に立たない方法で、Mozilla開発コミュニティで顰蹙を買っています(詳しくは、もう一度<em><a class="external" href="http://www.mozilla.org/xpfe/skins.html">Writing Skinnable XUL and CSS</a></em> のスキニングガイドラインを参照してください)。 CSS2 もまたスタイルに要素をグループにするいくつかの新たな方法を提供します。これらは Mozilla でよく出てくるのでここで簡単にまとめておきますが、詳しくは他の記事に周します:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">擬似クラス</td> + <td class="header">親子</td> + </tr> + <tr> + <td><em>element:pseudo-class { attribute: value;}</em></td> + <td><em>parent > child { attribute: value;}</em></td> + </tr> + <tr> + <td> + <pre> +button:hover{border: 1px;} +</pre> + </td> + <td> + <pre> +menu#file > menuitem { } +</pre> + </td> + </tr> + <tr> + <td>擬似クラスは要素の状態を反映します: たとえばマウスがボタンの上を動いたときには、hoverイベントが発火して、適切な擬似クラススタイルシートルールが適用されます。</td> + <td>親子関係は、前述の文脈サブグループよりも軽いものです。これは要素の全ての部分木から下位要素を探します。</td> + </tr> + </tbody> +</table> + +<p>最後に、Mozilla はいくつか特別の拡張を CSS 仕様に加えています。これは XUL がブラウザ中でスキニングされるような方法を、さらにコントロールできるようにするためです。これらの拡張はやがて別の記事、<em>[xulnote_moz-ext.html Mozilla's CSS Extensions]</em> に述べられます。</p> + +<p>実際のグローバルスキンファイル: いくつかのコメントの後に、<window>とダイアログオブジェクトの基本的なスタイル情報が始まります。 それらの後に、グローバルスキンは全ての基本的な XULウィジェットのスタイルを定義します: box, toolbar, いくつかの button クラスなど。 これらのルールにあるほとんどのスタイル属性はボーダー、フォント情報、カラー、マージンに関係するものであることに注意してください。 一般的に、これらはアプリケーションのグローバルスキン中でのみ定義されるべきスタイルタイプです。というのも、これらはアプリケーションに一定の全体的外観を与えるようなスタイルだからです。多くのエレメント、特にボタンは、次のようなスタイル文で付随される画像を持ちます:</p> + +<pre>titledbutton.button32 { + background-repeat: no-repeat; + background-position: 50% 0px; + background-color: transparent; + color: #CCFFFF; + min-width: 36px; + min-height: 36px; + border: 1px solid transparent; + padding: 0px; + margin-left: 1px; + margin-bottom: 1px; + margin-top: 6px; + margin-right: 6px; + font-size: smaller; + background-image:url("chrome://global/skin/button32-bg.gif"); +} +</pre> + +<p>どのひとつのボタンクラスにも、いくつかの擬似クラスと<em>属性セレクタ</em>スタイルが定義されているだろうことに注意してください(この後者のものについては、[xulnote_moz-ext.html CSS and Mozilla] で述べようと思います)。あなたの XUL 中にボタンをあるクラスで定義した場合、そのボタンの様々な状態へのスタイル定義の全てを利用します。この理由により、グローバルスキン中に現れるボタンクラスを使い、必要なときにのみ新たなクラスを作ることはかなり効果的になり得ます。</p> + +<p>グローバルスキンをブラウズして、何があるかに慣れ親しんでください。次のいくつかの節では、このスタイル情報をカスタムスタイルシートにインポートして、あなたのXULの新たなスタイルルールで拡張することになります。</p> + +<h3 id="XUL.E4.B8.AD.E3.81.A7.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.82.92.E3.83.AD.E3.83.BC.E3.83.89.E3.81.99.E3.82.8B" name="XUL.E4.B8.AD.E3.81.A7.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.82.92.E3.83.AD.E3.83.BC.E3.83.89.E3.81.99.E3.82.8B">XUL中でスタイルシートをロードする</h3> + +<p>XULファイルをスキニングしましょう、カスタムスキンは [xulnote_sample1.txt xulnote_sample1.xul] です。この XUL ファイルで作業するために、ローカルに<em>sample1.xul</em> と名前を変えて保存してください。</p> + +<p>インラインでスタイルを適用するのは XUL でも完全に正しい動作ですし、いくつかの稀なケースでは良い考えです。しかし、一般的に XUL スキンは実際の XUL 構造と分けるようにするべきです。機能と形式とのこの独立は、XUL のすばらしい利点であり、見落とすべきではありません。</p> + +<p>CSSファイルは拡張子が .css である通常のテキストファイルです。 この CSS ファイルは XUL ファイルのかなり上の方にある処理指示で適用されます。 XULファイルがXULパッケージかクロムに入っていれば、スタイルシートの処理指示はパッケージの階層を反映します。後にこの特別な URL の型を議論します。 スタイルシートが外部にあり、同じディレクトリに置かれている現在の例のように、XULファイルがスタンドアロンであれば、ファイル先頭の処理指示は次のようになります:</p> + +<pre><?xml-stylesheet href="sample.css" type="text/css"?> +</pre> + +<p>XULファイルは実際にはいくつのスタイルシート処理指示でも持てます: それぞれのスタイルシートは XUL がロードするものです。 しかし一般的には、あなたの新たなスタイルルールを作るスタイルシートへグローバルスキンを<em>import</em> してから、新たなスタイルシートをロードして、グローバルスキンとあなた自身のスタイルシート中にあるスタイルの全てを得るのがより望ましい形式です。</p> + +<h3 id=".E6.96.B0.E3.81.97.E3.81.84.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.82.92.E4.BD.9C.E3.82.8B" name=".E6.96.B0.E3.81.97.E3.81.84.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.82.92.E4.BD.9C.E3.82.8B">新しいスタイルシートを作る</h3> + +<p>XULファイルとは異なり、CSSファイルはどんな特有の構造も、先頭の前文情報も必要としません。CSS は階層構造にあるエレメントにスタイルを定義することができますが、グローバルスキンで見たように、それ自身が階層的であるということではありません。 その代わりに、CSSファイルは通常は単に、レンダリングエンジンによりそれぞれの要素やクラスに適用されるスタイル定義のリストです。</p> + +<p>ここにとても短い(しかし完全な!)、XULファイルで参照・利用されるだろうカスケーディングスタイルシートがあります:</p> + +<pre>toolbar.nav-bar { + background-image: url("chrome://navigator/skin/navbar-bg.gif"); + padding: 0px; + padding-bottom: 2px; +} + +box#navbar { + background-color: lightblue; +} + +A:link { + color: #FA8072; +} +</pre> + +<p>このスタイルシートは、上で述べてある 3つの異ったスタイル定義の型を見せています。それぞれの型は異なったエレメントのグループ化をしています。 最初の定義では、"."クラスセレクタを利用して "nav-bar" というクラスの全ての XUL ツールバーのスタイル情報を定義しています。同様にセレクタとして使用されますが、ユニークでなければならない ID とは異なり、<strong>class</strong> 属性は、選びたい XUL エレメントの集まりに、指定したスタイル情報を使用することができます。 次のように定義されたツールバーエレメントは:</p> + +<pre><toolbar '''class="nav-bar"''' id="nav3"> + <titledbutton value="click me" /> + <titledbutton value="don't click me" /> + ... +</toolbar> +</pre> + +<p>上の CSSの例にある toolbar.nav-bar セレクタの後のブロックにある CSS プロパティでスタイリングされます。 同様に、次の要素は ID セレクタを用いて単独の XUL 要素にスタイル情報を適用します。<strong>id</strong>属性は XUL 中でユニークでなければなりませんので、"navbar" という ID の XUL box だけが、そのブロック中のスタイル情報をとりあげます。</p> + +<p>3番目のセレクタのタイプである<em>擬似クラス</em>は、HTMLドキュメント中に普通に見られるハイパーリンクのインラインスタイル定義中に見るであろうもののひとつです。 擬似クラスは ":"セレクタで、あるエレメントに結び付けらています(そうでないこともあります: 擬似クラスで表される状態のどのエレメントにもスタイルを適用するように定義することもできます)。この 3番目のスタイル定義タイプでは、"A"要素が link として活きているときのみ、そのブロック中にあるスタイル定義をとりあげます。 最後のタイプは、CSS2 での新らしいものです。</p> + +<div class="highlight"> +<p><strong>XULスキンを作り始めるために:</strong></p> + +<ol> + <li>XULファイルの先頭にスタイルシート処理指示を加える。 + <pre><?xml-stylesheet href="sample.css" type="text/css"?></pre> + </li> + <li><em>sample.css</em>という名の新しいファイルを作る。</li> + <li>そのファイルに次の行を加える: + <pre>@import url(chrome://global/skin/) + +box#bbox { background-color: lightgrey; } + +titledbutton#rd {background-color: red; color: white;} +</pre> + </li> + <li>これを XUL ファイルと同じディレクトリに保存する。</li> +</ol> +</div> + +<p>作業している XUL ファイルをリロードすると、XULファイルのナビゲーションエリアに作った box要素は次のように現れます:</p> + +<p><img alt="スタイルシート無し"></p> + +<p><img alt="グローバルスキンだけ"></p> + +<p><img alt="グローバルスキンをインポートした sample.css"></p> + +<p>スキンで覆われたブラウザはそのままで全て見ることはできません ―― この基本的なスキンは、色情報をオーバーライドしていますので、<a class="external" href="http://www.mozilla.org/xpfe/skins.html">skinning guidelines</a> に少し違反していることに注意した方がいいでしょう。しかし、XUL構造と CSS のスタイルルールの組み合わせにどんな可能性があるか感覚をつかむことができます。</p> + +<h3 id="Thinking_Skins" name="Thinking_Skins">Thinking Skins</h3> + +<p>XUL や他の Mozillaクロスプラットフォームツールの細目に立ち入りすぎてしまい、これらの技術の目的やインパクトの景色を失うことが時にはあります。XUL と CSS の結合はかなりの柔軟性を提供するので、おそろしいと思われることもあるでしょう。</p> + +<p>XULとそのスキンを分離する目的 ―― そしてグローバルスキンと、あなたの作るものも含めて全てのカスタムスタイルとの分離の目的 ―― は、Mozillaブラウザのようなアプリケーションの動的なスキニングを可能にすることです。 この記事であなたが手で行なったことは、<em>chrome registry</em>という機構によって、動的にかつより完璧に行われるようになります。chrome registry は Windows registry のような、ユーザーのソフトウェアと環境についての情報が必要なときに記録されアクセスされるデータベースです。 ソフトウェアコンポーネント、ユーザー、そして Mozillaブラウザからアクセスされる Webページでさえもが、この chrome registry を更新し、グローバルスキンを変更することができます。 さらに、位置指定(positioning)のような新たな CSS2 convention が到来すれば、XULファイル中の基本構造の表現や動作の変更は劇的なものになるでしょう。</p> + +<p>この情報全てをテキストで ―― 分布された自然状態と、単一のクロムとして定義される必要があるテキストの単なるかたまりに追加されるテキストで ―― 作成する構文は、ときにはprogress普及を遅くするように思えます。 しかし、XUL を利用する利点は、標準の C++ ツールキットを使う利点よりもかなり上回っているので、XULのオーサリングは別の開発のカテゴリで正しく考えられるべきです。 XULは、あるエヴァンジェリストが表現したように、インターフェース設計と<em>アプリケーション開発の</em>「民主化」を意味します。このことについては最後のアーティクルで詳しく話すつもりです。</p> + +<p>手短かにいえば、XUL は誰もが C++/MFC/Visual IDE/テンプレートツールキットのユーザーが作るのと同じくらいに複雑で魅力的なインターフェースを作るツールを提供します。さらに、XUL はそれをあるやり方で行うので、それらのインターフェースはどのプラットフォームでも利用できます。 あなたは第四世代プログラミング言語(4GL)の vagueries について知る必要はありませんし、他のものを犠牲にして特定のプラットフォームやそのネイティブウィジェットの機構について熟知する必要もありません。</p> + +<p>XUL技術は相互運用可能であり、一貫していて、クロスプラットフォームで、freeで、そしてすぐに利用できるようになります。 このようなインターフェースの製作物が民主化されているだけでなく、言い替えるならば、これらのインターフェースの消費と配布も同等に民主的です。 真に民主的なあらゆるもののように、それらを動作させるには少しばかり騒ぎたてなければなりません。しかしひとたび事態を収めれば、XULファイルとスキンを作るのは、HTML で基礎的な Webページを作るのと同じくらい易しいことに気付くでしょう。</p> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): <a class="link-mailto" href="mailto:oeschger@netscape.com">Ian Oeschger</a></li> + <li>Last Updated Date: October 3, 2004</li> + <li>Copyright Information: Copyright (C) <a class="link-mailto" href="mailto:oeschger@netscape.com">Ian Oeschger</a></li> +</ul> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/splitters/index.html b/files/ja/archive/mozilla/xul/tutorial/splitters/index.html new file mode 100644 index 0000000000..d880979158 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/splitters/index.html @@ -0,0 +1,148 @@ +--- +title: スプリッター +slug: Archive/Mozilla/XUL/Tutorial/Splitters +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Splitters +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Content_Panels" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Toolbars">次のページ »</a></p> +</div> + +<p>ここでは、ウィンドウにスプリッターを追加する方法を見ていきます。</p> + +<p><span id="Splitting_a_Box"></span></p> + +<h2 id=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.82.92.E5.88.86.E5.89.B2.E3.81.99.E3.82.8B" name=".E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.82.92.E5.88.86.E5.89.B2.E3.81.99.E3.82.8B">ボックスを分割する</h2> + +<p>1 つのウィンドウ内を 2 つのセクションに分割し、利用者がそれぞれのセクションに割り当てる大きさを変更できるようにしたい場合が、しばしばあると思います。 1 つの例として、Mozilla のブラウザウィンドウがあります。 サイドバーパネルのサイズは、2 つのフレーム間にあるバーをドラッグすることで変更可能です。 また、<span style="border-bottom: 1px dashed green;" title="notch">ノッチ</span>の部分をクリックすることで、サイドバーを隠すこともできます。</p> + +<p><span id="Splitter_element"></span></p> + +<h3 id=".E3.82.B9.E3.83.97.E3.83.AA.E3.83.83.E3.82.BF.E3.83.BC.E8.A6.81.E7.B4.A0" name=".E3.82.B9.E3.83.97.E3.83.AA.E3.83.83.E3.82.BF.E3.83.BC.E8.A6.81.E7.B4.A0">スプリッター要素</h3> + +<p>この機能は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code></code> と呼ばれる要素によって実現されています。 スプリッター要素は、2 つのセクション間に細いバーを作り、それぞれに割り当てる大きさを変更できるようにします。 スプリッターは、必要ならばどこにでも配置することができ、同じボックス内でそれより前の要素と、後の要素をリサイズすることが可能になります。</p> + +<p>スプリッターを水平ボックス内に置くと、水平方向でリサイズ可能になります。 また、垂直ボックス内に置くと、垂直方向でリサイズ可能になります。</p> + +<p>スプリッターの構文を以下に示します。</p> + +<pre class="brush: xml"><splitter + id="identifier" + state="open" + collapse="before" + resizebefore="closest" + resizeafter="closest"> +</pre> + +<p>スプリッターの属性を以下に示します。</p> + +<dl> + <dt><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></dt> + <dd>スプリッターの一意な識別子です。</dd> +</dl> + +<dl> + <dt><code id="a-state"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/state">state</a></code></dt> + <dd>スプリッターの状態を指示します。これをデフォルトの <code>open</code> に設定すると、分割されたパネルは最初から開いた状態になります。<code>collapsed</code> (折り畳む) に設定すると、片方のパネルは縮小して折り畳まれ、もう一方のパネルがスペース全体を占有した状態になります。</dd> +</dl> + +<dl> + <dt><code id="a-collapse"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></dt> + <dd>グリッピー (<span style="color: green;">grippy</span>) と呼ばれる、スプリッターについているノッチがクリックされるか、または状態が <code>collapsed</code> に設定された場合に、パネルのどちら側を折り畳むかを指示します。<code>before</code> に設定するとスプリッターの前の要素が、<code>after</code> にするとスプリッターの後の要素が折り畳まれます。デフォルトの <code>none</code> にすると、スプリッターグリッピーがクリックされても、どちら側のパネルも折り畳まれません。</dd> +</dl> + +<dl> + <dt><code id="a-resizebefore"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/resizebefore">resizebefore</a></code></dt> + <dd>スプリッターのドラッグによって、要素のリサイズが発生します。この属性は、左側 (垂直配置では上側) に置かれた要素に対して、どの要素がリサイズされるべきかを指示します。これを <code>closest</code> に設定すると、スプリッターのすぐ左にある要素がリサイズされます。<code>farthest</code> に設定すると、スプリッターの左側で最も離れた要素 (ボックス内の最初の要素) がリサイズされます。デフォルトは <code>closest</code> になります。</dd> +</dl> + +<dl> + <dt><code id="a-resizeafter"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></dt> + <dd>スプリッターのドラッグによって、要素のリサイズが発生します。この属性は、右側 (垂直配置では下側) に置かれた要素に対して、どの要素がリサイズされるべきかを指示します。これを <code>closest</code> に設定すると、スプリッターのすぐ右にある要素がリサイズされます。<code>farthest</code> に設定すると、スプリッターの右側で最も離れた要素 (ボックス内の最後の要素) がリサイズされます。また、<code>grow</code> という値も設定可能です。この場合、スプリッターがドラッグされても、スプリッターの右側にある要素のサイズは変化せず、ボックス全体のサイズが変化します。デフォルトは <code>closest</code> になります。</dd> +</dl> + +<p><code><code id="a-collapse"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></code> 属性を設定する場合は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code></code> 内に、利用者が要素を折り畳むために使用する、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/grippy" title="grippy">grippy</a></code></code> 要素を加える必要があります。</p> + +<p><span id="Splitter_example"></span></p> + +<h3 id=".E3.82.B9.E3.83.97.E3.83.AA.E3.83.83.E3.82.BF.E3.83.BC.E3.81.AE.E4.BE.8B" name=".E3.82.B9.E3.83.97.E3.83.AA.E3.83.83.E3.82.BF.E3.83.BC.E3.81.AE.E4.BE.8B">スプリッターの例</h3> + +<p>参考のために、例を示します。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_splitter_1.xul">表示</a></p> + +<pre class="brush: xml"><vbox flex="1"> + <iframe id="content-1" width="60" height="20" src="w1.html"/> + <splitter collapse="before" resizeafter="farthest"> + <grippy/> + </splitter> + <iframe id="content-2" width="60" height="20" src="w2.html"/> + <iframe id="content-3" width="60" height="20" src="w3.html"/> + <iframe id="content-4" width="60" height="20" src="w4.html"/> +</vbox> +</pre> + +<div class="float-right"><img alt="画像:splitter-ex1.jpg"></div> + +<p>この例では、4 つの iframe が作られ、スプリッターが最初のフレームと 2 番目のフレームの間に置かれています。 スプリッターの <code><code id="a-collapse"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></code> 属性には <code>before</code> という値に設定されています。 このため、スプリッターグリッピーがクリックされると、最初のフレームが折り畳まれ、スプリッターと残りのフレームは左に移動します。 スプリッターグリッピーはスプリッターの中央に表示されます。</p> + +<p>スプリッターの <code><code id="a-resizeafter"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></code> 属性には <code>farthest</code> という値が与えられています。 このため、スプリッターがドラッグされると、スプリッターの後ろの最も離れた要素のサイズが変更されます。 この例の場合、4 番目のフレームのサイズが変更されることになります。</p> + +<p>スプリッターの <code><code id="a-resizebefore"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/resizebefore">resizebefore</a></code></code> 属性には、値が指定されていません。 そのため、デフォルト値である <code>closest</code> が適用されます。 この例では、スプリッターの前には一つしかフレームがないため、その最初のフレームのサイズが変更されることになります。</p> + +<p>2 番目と 3 番目のフレームは、スプリッターを 4 番目のフレームが最小サイズになる位置よりも右にドラッグした場合のみ、サイズが変わります。</p> + +<div class="float-right"><img alt="画像:splitter-ex2.jpg"></div> + +<p>この画像は、4 つのパネルの例で、スプリッターを折り畳んだ状態に変更したものです。</p> + +<div class="float-right"><img alt="画像:splitter-ex3.jpg"></div> + +<p>この画像は、 4 つのパネルの例で、スプリッターを右にリサイズしたものです。 中央の 2 つのパネルのサイズが変わっていないことに注目してください。 1 番目のパネルと 4 番目のパネルのサイズだけが変わっていることがわかると思います。 4 番目のパネルは、最小限の部分だけが見えています。 スプリッターを右にドラッグし続けた場合、残りの 2 つのパネルが小さくなります。 ボックスの最小または最大の幅や高さを指定するために、iframe に <a href="/ja/docs/Web/CSS/min-width" title="min-width は、要素の最小幅を指定する CSS プロパティです。width プロパティの 使用値 が、min-width で指定した値を下回らないようにします。"><code>min-width</code></a> や <a href="/ja/docs/Web/CSS/max-height" title="CSS の max-height プロパティは要素の最大の高さを設定するのに使われます。height プロパティの使用値は、max-height に設定した値よりも大きくなりません。"><code>max-height</code></a> などのスタイルプロパティを使うことが可能です。 これらの設定を行った場合、スプリッターによって設定が検出され、利用者が最小サイズや最大サイズを超えて、スプリッターをドラッグできないようになります。</p> + +<p>例えば、上の 4 番目のパネルに 30 ピクセルの最小幅を指定すると、パネルは、そのサイズよりも小さくなることはありません。 その分、他の 2 つのパネルのサイズが小さくなります。 1 番目のパネルの最小幅を 50 ピクセルに設定した場合、(60 ピクセル幅が初期値であるため) スプリッターは、左に 10 ピクセルしかドラッグできません。 ただし、この場合でも、スプリッターを折り畳むことは可能です。</p> + +<p>必要なら、1 つのボックスに複数のスプリッターを置くことも可能です。 この場合、ボックスの別々の場所を折り畳むことができます。 また、iframe だけが折り畳めるということはありません。 どんな要素でも折り畳むことが可能です。</p> + +<p><span id="Our_find_files_example"></span></p> + +<h2 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.82.B9.E3.83.97.E3.83.AA.E3.83.83.E3.82.BF.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.82.B9.E3.83.97.E3.83.AA.E3.83.83.E3.82.BF.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">ファイル検索ダイアログにスプリッターを追加する</h2> + +<div class="highlight"> +<p>それでは、ファイル検索ダイアログにスプリッターを加えてみることにしましょう。 スプリッターを使用可能な箇所はいくつか考えられると思いますが、今回はダイアログ内に検索結果を追加するために使用してみることにします。 具体的には、検索条件と下部にあるボタンの間に検索結果のためのエリアを追加し、 スプリッターによって、このエリアを折り畳むか隠すことができるようにします。</p> + +<pre class="brush: xml"></tabbox> + + + <span class="highlightred"><iframe src="results.html"/> + <splitter resizeafter="grow"/></span> + + + <hbox> +</pre> + +<p>この例では、スプリッターと iframe がダイアログに追加されています。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> の後の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> は、もう必要ないため、削除してもかまいません。 フレームのコンテンツは、「<tt>results.html</tt>」という名前のファイルから読み込まれます。 このファイルを作り、中身は何でもよいので適当に好きなものを入れておいてください。 iframe は、<a href="ja/XUL_Tutorial/Trees">後のセクション</a>で結果リストの作り方を学んだときに、その結果リストで置き換えることにしましょう。 今回は、スプリッターの例を示すのが目的であるため、とりあえず iframe を使うことにします。</p> + +<p>このスプリッターの <code><code id="a-collapse"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/collapse">collapse</a></code></code> 属性の値は、<code>before</code> に設定されています。 このため、スプリッターの直前の要素が折り畳まれることになります。 この例では、iframe がそれに当たります。 下の画像が示しているように、グリッピーがクリックされると、iframe が折り畳まれ、ボタンが上に移動します。</p> + +<p><code><code id="a-resizeafter"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/resizeafter">resizeafter</a></code></code> 属性の値は、<code>grow</code> に設定されています。 このため、スプリッターの後ろにある要素は、スプリッターが下方向にドラッグされた場合、スプリッターに押し下げられます。 その結果、フレームのコンテンツ部分を任意の大きさに広げることが可能です。 ただし、コンテンツ部分が大きくなっても、ウィンドウ自身は自動的にリサイズされない点は注意しておく必要があります。 また、垂直配置のボックスの中に置かれているため、スプリッターが水平になっていることにも注意して下さい。</p> + +<p>通常の状態:</p> + +<p><img alt="画像:splitter1.png"></p> + +<p>折り畳まれた状態:</p> + +<p><img alt="画像:splitter2.png"></p> +</div> + +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-splitter.xul">表示</a></p> + +<p>次は、ツールバーの作り方を見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Content_Panels" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Toolbars">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/stack_positioning/index.html b/files/ja/archive/mozilla/xul/tutorial/stack_positioning/index.html new file mode 100644 index 0000000000..52889353cd --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/stack_positioning/index.html @@ -0,0 +1,60 @@ +--- +title: スタックの配置 +slug: Archive/Mozilla/XUL/Tutorial/Stack_Positioning +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Stack_Positioning +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Stacks_and_Decks" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Tabboxes">次のページ »</a></p> +</div> +<p>このセクションでは、スタック内への要素の配置方法について説明します。 +</p><p><span id="Placement_of_Stack_Children"></span> +</p> +<h3 id=".E3.82.B9.E3.82.BF.E3.83.83.E3.82.AF.E3.81.AE.E5.AD.90.E8.A6.81.E7.B4.A0.E3.81.AE.E9.85.8D.E7.BD.AE" name=".E3.82.B9.E3.82.BF.E3.83.83.E3.82.AF.E3.81.AE.E5.AD.90.E8.A6.81.E7.B4.A0.E3.81.AE.E9.85.8D.E7.BD.AE"> スタックの子要素の配置 </h3> +<p>スタック (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code>) の子要素は、スタックのサイズに応じて伸縮する動作がデフォルトですが、 +指定の座標に明示的に配置することも可能です。 +例えば、スタックの子要素として 2 つのボタンがある場合、 +1 番目のボタンを、左端から 20 ピクセル、上端から 50 ピクセルの位置に置き、 +2 番目を、左端から 100 ピクセル、上端から 5 ピクセルの位置に置くといった具合です。 +</p><p>子要素の位置は、要素に 2 つの属性を設定することによって指示します。 +水平方向の位置には <code><code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code></code> 属性を、垂直方向の位置には <code><code id="a-top"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code></code> 属性を使用します。 +スタックの子要素にこれらの属性を指定しない場合、子要素はスタックのサイズに応じて伸縮します。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_bulletins_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_bulletins_1.xul">表示</a> +</p> +<div class="float-right"><img alt="Image:bulletins1.png"></div> +<pre><stack> + <button label="Goblins" left="5" top="5"/> + <button label="Trolls" left="60" top="20"/> + <button label="Vampires" left="10" top="60"/> +</stack> +</pre> +<p>この <code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> には、3 つの要素があり、 +それぞれは、<code><code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code></code> と <code><code id="a-top"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code></code> 属性によって与えられた座標に位置しています。 +この例では、3 つの子要素はすべてボタンですが、同じ型である必要はありません。 +子要素として任意の要素を置くことが可能です。 +ボックスやスタックを、入れ子に置いても構いません。 +</p><p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> のサイズは、常に全ての子要素が表示可能になるような大きさに調整されるため、子要素の位置によって決定されることになります。 +具体的には、<code><code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code></code> 属性を 400 に設定すると、スタックは 400 ピクセルに要素の幅を加えた幅になります。 +このサイズは、 <a href="/ja/docs/Web/CSS/width" title="CSS の width プロパティは、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 box-sizing を border-box に設定すると、境界領域の幅を設定します。"><code>width</code></a> や <a href="/ja/docs/Web/CSS/max-width" title="max-width は要素に与えられる幅の上限を指定する為に用いる CSS プロパティです。このプロパティは、 width プロパティの値が max-width で指定された値より大きくなることを防ぎます。"><code>max-width</code></a> などの色々なスタイルプロパティによって上書きすることが可能です。 +</p><p>スクリプトを使用して、<code><code id="a-left"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/left">left</a></code></code> と <code><code id="a-top"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/top">top</a></code></code> 属性の値を変更していくことで、要素を動き回らせることが可能です。 +スタックには、1 つの要素の絶対位置を変えても、他の要素の位置は影響を受けないという利点があります。 +通常のボックスで要素を動かそうとすると、周囲にある要素の配置が乱れてしまうかもしれません。 +</p><p>子要素を重ね合わせるように置くことも可能です。 +子要素は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 内に現われる順番で描画されていきます。 +つまり、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> の最初の子要素が最背面に表示され、次の子要素がその手前に表示されるという具合です。 +最後の要素が最前面に表示されます。 +DOM 関数を使用することによって、要素の表示順を変更することが可能です。 +</p><p>マウスイベントに応答するとき、一番上にある要素が最初にイベントを捉えます。 +つまり、2 つのボタンが重なっている場合、重なっている場所でのマウスクリックは、上にあるボタンの方が捉えるということになります。 +</p><p>次のセクションでは、タブボックスを説明します。 +これはデッキに似ていますが、要素単体でナビゲーション機能を提供しています。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Stacks_and_Decks" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Tabboxes">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/stacks_and_decks/index.html b/files/ja/archive/mozilla/xul/tutorial/stacks_and_decks/index.html new file mode 100644 index 0000000000..22305731a1 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/stacks_and_decks/index.html @@ -0,0 +1,113 @@ +--- +title: スタックとデッキ +slug: Archive/Mozilla/XUL/Tutorial/Stacks_and_Decks +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Stacks_and_Decks +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_More_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Stack_Positioning">次のページ »</a></p> +</div> +<p>要素を重なった一組のカードのように扱えると便利なときがあります。 +スタック (<span style="color: green;">stack</span>) 要素と、デッキ (<span style="color: green;">deck</span>) 要素がこのために用意されています。 +</p><p><span id="Containers"></span> +</p> +<h3 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A"> コンテナ </h3> +<p>XUL のボックスは、それぞれが任意の要素を含むことのできるコンテナとして位置づけられます。 +<a href="ja/XUL_Tutorial/Toolbars">ツールバー</a>や<a href="ja/XUL_Tutorial/Tabboxes">タブ付きパネル</a>のようないくつかの要素も、特定の用途のために特化したボックスの一種という位置づけになります。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> タグは、特別な性質のない最も単純なボックスを作ります。 +特化型のボックスは、内部に要素を配置するという点においては、通常のボックスと同じように動作しますが、それ以外の機能も追加されています。 +</p><p>実際のところ、多くのコンポーネントが、他の要素を含むことができます。 +これは「ボタンにラベル以外の要素も含めることができる」といった、 +ここまでのセクションで説明した例の中でも既に見ています。 +極端な話、スクロールバーも、明示的に子要素を作成しない限り、自動で子要素を作成する機能を持った、特化型のボックスの 1 つにすぎません。 +スクロールバーのもう 1 つの特殊な機能は、子要素の<span style="border-bottom: 1px dashed green;" title="thumb">サム</span>の移動を自動で処理することです。 +</p><p>ここからの数セクションにわたって、他の要素を保持するために設計された要素をいくつか紹介することにします。 +これらは特化型のボックスで、ボックスの属性をすべて使うことができます。 +</p><p><span id="Stacks"></span> +</p> +<h3 id=".E3.82.B9.E3.82.BF.E3.83.83.E3.82.AF" name=".E3.82.B9.E3.82.BF.E3.83.83.E3.82.AF"> スタック </h3> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 要素は、単純なボックスです。 +この要素は他のボックスと同じように動作しますが、子要素を重なり合うようにレイアウトできるという特質を持っています。 +スタック上の最初の子要素が一番下に描かれ、次に 2 番目の子要素がその上に描かれます。 +3 番目以降についても同様に続いていきます。 +スタックに積み重ねることができる子要素の数に制限はありません。 +</p><p>スタック要素では、<code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> プロパティはあまり意味がありません。 +スタックでは、子要素は並んでレイアウトされるのではなく、重なり合ってレイアウトされるからです。 +スタック要素のサイズは、最も大きな子要素によって決められます。 +または、スタック要素とその子要素のどちらに対しても、CSS プロパティの <a href="/ja/docs/Web/CSS/width" title="CSS の width プロパティは、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 box-sizing を border-box に設定すると、境界領域の幅を設定します。"><code>width</code></a>、<a href="/ja/docs/Web/CSS/height" title="CSS の height プロパティは、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 box-sizing が border-box に設定されていた場合は、 境界領域の高さを定義します。"><code>height</code></a>、<a href="/ja/docs/Web/CSS/min-width" title="min-width は、要素の最小幅を指定する CSS プロパティです。width プロパティの 使用値 が、min-width で指定した値を下回らないようにします。"><code>min-width</code></a> 及びその他の関連するプロパティを使って明示的にサイズを指定することも可能です。 +</p><p>スタック要素は、既にある要素に重ねてステータス表示を追加する必要があるといった場合に使うことができます。 +例えば、プログレスバーで、バーの上にラベルを表示さたいといった場合です。 +</p><p><span id="Shadowing_with_stacks"></span> +</p> +<h4 id=".E3.82.B9.E3.82.BF.E3.83.83.E3.82.AF.E3.81.A7.E5.BD.B1.E3.81.A4.E3.81.8D.E6.96.87.E5.AD.97.E3.82.92.E8.A1.A8.E7.8F.BE.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.82.BF.E3.83.83.E3.82.AF.E3.81.A7.E5.BD.B1.E3.81.A4.E3.81.8D.E6.96.87.E5.AD.97.E3.82.92.E8.A1.A8.E7.8F.BE.E3.81.99.E3.82.8B"> スタックで影つき文字を表現する </h4> +<p>また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 要素の便利な用法のひとつとして、 CSS プロパティの多くをエミュレートできるというものがあります。 +例えば、以下のようにして、<a href="/ja/docs/Web/CSS/text-shadow" title="CSS の text-shadow プロパティはテキストに影を追加します。文字列及びその装飾に適用される影のコンマで区切られたリストを受け付けます。"><code>text-shadow</code></a> プロパティに似た効果を作ることができます。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_1.xul">表示</a> +</p> +<pre><stack> + <description value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/> + <description value="Shadowed" style="color: red; font-size: 15pt;"/> +</stack> +</pre> +<div class="float-right"><img alt="画像:stacks1.png"></div> +<p>2 つの <code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素は、両方とも 15 ポイントのサイズのテキストを作ります。 +ただし、最初の要素は、その左端と上端にパディングを加えることによって、右下に 1 ピクセルずらされています。 +この結果、2 番目めの要素も、同じ「Shadowed」というテキストを描画しますが、最初のものから少しずれた位置になっています。2 番目の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/description" title="description">description</a></code></code> 要素は、効果がよくわかるように、赤で描画されています。 +</p><p>この方法は、影の部分のスタイルを、本体とは完全に独立して設定できるため、 +<a href="/ja/docs/Web/CSS/text-shadow" title="CSS の text-shadow プロパティはテキストに影を追加します。文字列及びその装飾に適用される影のコンマで区切られたリストを受け付けます。"><code>text-shadow</code></a> にはない利点を持っています。 +具体的には、影に、独自のフォント、下線、サイズを持つことができます (影を点滅させることさえ可能です)。 +また、現バージョンの Mozilla では、CSS のテキストの影付きスタイルをサポートしていないのため、この方法のみが使用できます。 +この方法の欠点としては、影のために取られた領域がスタックサイズを大きくしてしまうことがあります。 +影付けは、無効状態のボタンの外観を作る場合に、非常に役立ちます。 +</p><p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_2.xul">表示</a> +</p> +<pre><stack style="background-color: #C0C0C0"> + <description value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> + <description value="Disabled" style="color: grey;"/> +</stack> +</pre> +<p>いくつかのプラットフォームでは、このテキスト配置と影の配色によって、無効の外観が作り出されています。 +</p><p>マウスクリックやキー入力といったイベントは、スタックの一番上にある要素、つまり、スタックに最後に入れられた要素に渡されるということに注意して下さい。 +これは、ボタンをスタックに入れる場合、最後に置かれた場合のみ、正しく動作するということを意味しています。 +</p><p><span id="Decks"></span> +</p> +<h3 id=".E3.83.87.E3.83.83.E3.82.AD" name=".E3.83.87.E3.83.83.E3.82.AD"> デッキ </h3> +<p>デッキ (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>) 要素も、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/stack" title="stack">stack</a></code></code> 要素と同様に、子要素を順に重ねてレイアウトしますが、デッキでは一度に 1 つの子要素しか表示されない点が異なります。 +これは、一連の類似したパネルを順番に表示していく、ウィザード型のインターフェイスに使うことができます。 +パネルごとに別々のウィンドウを作成し、それぞれにナビゲーションボタンを加えたりする代わりに、 +内容が変わる部分にデッキを使用することによって、ウィンドウを 1 つ作るだけで済ますことができます。 +</p><p>スタックと同様に、デッキ内のページは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> 要素の直接の子要素から構成されます。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> 要素の中に子要素が 3 つあるとすると、デッキは 3 つの ページをもつことになります。 +表示するデッキのページは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> 要素の <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 属性を設定することによって、変更することができます。 +このインデックスは、どのページを表示するかを指定する数値で、 +ページの番号は、0 から始まります。 +そのため、デッキの最初の子要素はページ 0 で、 2 番目はページ 1 といった具合に続いていきます。 +</p><p>以下は、デッキの例です。 +</p><p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_stacks_3.xul">表示</a> +</p> +<pre><deck selectedIndex="2"> + <description value="This is the first page"/> + <button label="This is the second page"/> + <box> + <description value="This is the third page"/> + <button label="This is also the third page"/> + </box> +</deck> +</pre> +<p>この例では、ページが 3 つあり、デフォルトは、3 番目のページです。 +3 番目のページは、内部に 2 つの要素をもつボックスです。 +そのボックスと内部の要素がページを構成しています。 +デッキは最大の子要素と同じ大きさになりますので、ここでは、3 番目のページと同じ大きさになるはずです。 +</p><p>スクリプトを使って <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 属性を変更することにより、ページを切り替えることができます。 +これについては、イベントと DOM に関するセクションでもっと詳しく説明します。 +</p><p>次のセクションでは、スタックを使用する場合の子要素の配置方法について説明します。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_More_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Stack_Positioning">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/styling_a_tree/index.html b/files/ja/archive/mozilla/xul/tutorial/styling_a_tree/index.html new file mode 100644 index 0000000000..117b4cbab3 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/styling_a_tree/index.html @@ -0,0 +1,166 @@ +--- +title: ツリーのスタイル付け +slug: Archive/Mozilla/XUL/Tutorial/Styling_a_Tree +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Styling_a_Tree +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Style_Sheets" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Modifying_the_Default_Skin">次のページ »</a></p> +</div> +<p>このセクションでは、ツリーに対してスタイルを設定する方法を説明します。 +</p> +<h3 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B"> ツリーにスタイルを設定する </h3> +<p>ツリーにスタイルを設定する場合、枠か列の見出しについて設定したいのであれば、他の要素と同じ方法で行うことが可能です。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> 要素に設定されたスタイルは、ツリー全体 (枠) に適用されることになり、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素に設定れたスタイルは、 +列全体には適用されず、列の見出しの部分に対してのみ適用されることになります。 +</p><p>そして、ツリーの本体へのスタイル設定は、他の要素とは若干異なる方法で行う必要があります。 +これは、ツリー本体が他の要素とは異なった方法で格納されていることに起因する制約になります。 +つまり、ツリー本体では最も外側の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素のみが実在する要素で、 +内側の要素は直接表示されるわけではなく、単にツリーに供給するデータを定義するために置かれているに過ぎないからです。 +</p> +<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.A8.AD.E5.AE.9A" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.A8.AD.E5.AE.9A"> プロパティの設定 </h4> +<p>このために、まず、行またはセルに対して <code><code id="a-properties"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/properties">properties</a></code></code> 属性を使用して、名前の付いたプロパティを設定する必要があります (属性の値がプロパティの名前になります)。 +これは、ツリーが静的なコンテントを利用する場合はもちろん、<a href="ja/XUL_Tutorial/Trees_and_Templates">RDF から生成されたコンテント</a>や、<a href="ja/XUL_Tutorial/Custom_Tree_Views">カスタムビュー</a>を使用する場合でも利用可能です。 +</p><p>それでは、例として、特定の行の背景色を青色にしてみることにしましょう。 +これは Mozilla メールのラベルに関する機能の実装にも利用されています。 +ここでは「<code>makeItBlue</code>」と呼ばれるプロパティを使用することにしますが、好きな名前を使っても構いません。 +なお、複数のプロパティを設定したい場合は、空白文字で区切って設定することが可能です。 +</p><p>以下に、行またはセルにプロパティを設定する例を示します。 +</p> +<pre><treerow properties="makeItBlue"> +</pre> +<h4 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B_CSS_.E3.82.BB.E3.83.AC.E3.82.AF.E3.82.BF" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B_CSS_.E3.82.BB.E3.83.AC.E3.82.AF.E3.82.BF"> ツリーに対する CSS セレクタ </h4> +<p>スタイルシートからは、このプロパティを目印に使って、未読メッセージやラベルに対応する行の外観を変更することになります。 +つまり、この場合のプロパティとは、スタイルクラスとよく似た働きをするものだと考えてもよいでしょう。 +ただし、プロパティの方は、セルなどのツリーを構成するたくさんのパーツに対して、個別にスタイルを指定できるようにする必要があるため、 +スタイルシートから指定するときには、スタイルクラスより若干複雑な構文が必要になります。 +また、スタイルは、セルやその中のテキストだけでなく、<span style="border-bottom: 1px dashed green;" title="twisty">ツイスティ</span>に設定したりインデントの設定のために使用することも可能です。 +具体的には、以下のような構文が必要になります。 +</p> +<pre>treechildren::-moz-tree-row(makeItBlue) +{ + background-color: blue; +} +</pre> +<p>このスタイルは、複雑なセレクタを持っていて、「<code>makeItBlue</code>」プロパティを持つ行に、スタイルとして背景色を設定するために使用されます。 +この特別な構文は、それぞれのセルが独立した要素ではないために必要になります。 +つまり、ツリー本体部分に含まれている全てのコンテントは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素により描画されることになりますが、 +CSS が持つ、要素の一部分だけを、<span style="border-bottom: 1px dashed green;" title="pseudo-element">疑似要素</span>とみなしてアクセスするというコンセプトを利用して、 +このセレクタは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素に含まれているいくつかの行を、疑似要素とみなして選択します。 +このため、このスタイルは、表示されている要素の特定の部分に対してのみスタイルルールを設定することになります。 +したがって、上のスタイルルールは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素の中の 「<code>makeItBlue</code>」プロパティを持つすべてのツリー行の背景色を青色に設定することを意味します。 +</p><p>このセレクタに含まれる文字列 <code>::-moz-tree-row</code> は、どのコンテント領域を選択するかを指定するもので、この場合は行になります。 +ここに指定可能な値を以下に示します。 +</p> +<ul><li> <b>::-moz-tree-cell</b>: セルに対応し、境界と背景色を設定するために利用します。 +</li><li> <b>::-moz-tree-cell-text</b>: セルに含まれるテキストに対応し、フォントやテキストの色を設定するために利用します。 +</li><li> <b>::-moz-tree-twisty</b>: 対応するツイスティの外観の設定をします。ツイスティとは子の行を開閉するための「+」のアイコンのことです。 +</li><li> <b>::-moz-tree-image</b>: セルの画像に対応します。画像は <a href="ja/CSS/list-style-image">list-style-image</a> プロパティで設定することができます。 +</li><li> <b>::-moz-tree-row</b>: 行に対応し、行の背景色を設定するために利用します。 +</li><li> <b>::-moz-tree-indentation</b>: 子の行の左側のインデントに対応します。 +</li><li> <b>::-moz-tree-column</b>: 列に対応します。 +</li><li> <b>::-moz-tree-line</b>: 親子の行を結ぶ線に対応します。 +</li><li> <b>::-moz-tree-separator</b>: ツリーに置かれたセパレータに対応します。 +</li><li> <b>::-moz-tree-progressmeter</b>: プログレスメーターセルのコンテントに対応します。列の <code>type</code> 属性を <code>progressmeter</code> に設定することで、プログレスメーターの列を作成することができます。 +</li><li> <b>::-moz-tree-drop-feedback</b>: ドラッグ＆ドロップからのフィードバックに対応します。 +</li><li> <b>::-moz-tree-checkbox</b>: チェックボックスの列で使用する画像に対応します。 +</li></ul> +<p>また、コンマで区切って指定することで、複数のプロパティをチェックすることも可能です。 +以下の例は、「<code>readonly</code>」と「<code>unread</code>」プロパティを持つ行の背景色を灰色に設定します。 +加えて、「<code>readonly</code>」プロパティを持つ行に対しては、赤い枠線が描画されます。 +なお、最初のルールは、「<code>readonly</code>」が設定されている全ての行に対し適用され、 +「<code>unread</code>」など他のプロパティの設定の有無には影響を受けないことを注記しておきます。 +</p> +<pre>treechildren::-moz-tree-row(readonly) +{ + border: 1px solid red; +} +treechildren::-moz-tree-row(readonly, unread) +{ + background-color: rgb(80%, 80%, 80%); +} +</pre> +<h4 id=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.83.87.E3.83.95.E3.82.A9.E3.83.AB.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3"> デフォルトのプロパティ </h4> +<p>ツリー関連の要素が持つプロパティのリストには、いくつかのデフォルトで設定されるプロパティが含まれており、これらもスタイルシートから利用することが可能です。 +以下に示す特別なプロパティは、コンテナや選択された行の外観を設定するために利用できます。 +これらのプロパティは、必要に応じて自動的に設定されます。 +</p> +<dl><dt> focus</dt><dd> このプロパティは、ツリーが現在フォーカスを得ているときに設定されます。 +</dd><dt> selected</dt><dd> このプロパティは、行やセルが選択されているときに設定されます。 +</dd><dt> current</dt><dd> このプロパティは、カーソルがその行にあるときに設定されます。このプロパティが設定される行は、一度に 1 行だけになります。 +</dd><dt> container</dt><dd> このプロパティは、子を持つことが可能な行やセルに対して設定されます。 +</dd><dt> leaf</dt><dd> このプロパティは、子を持つことができない行やセルに対して設定されます。 +</dd><dt> open</dt><dd> このプロパティは、展開されている行やセルに対して設定されます。 +</dd><dt> closed</dt><dd> このプロパティは、畳まれている行やセルに対して設定されます。 +</dd><dt> primary</dt><dd> このプロパティは primary 属性が設定された列のセルに対して設定されます。 +</dd><dt> sorted</dt><dd> このプロパティは、現在ソート対象になっている列のセルに対して設定されます。 +</dd><dt> even</dt><dd> このプロパティは、偶数番目の行に対し設定されます。 +</dd><dt> odd</dt><dd> このプロパティは、奇数番目の行に対し設定されます。例えば、このプロパティと <code>even</code> プロパティを使用して、行ごとに交互に行の色を変えることができます。 +</dd><dt> dragSession</dt><dd> このプロパティは、何かがドラッグされているときに設定されます。 +</dd><dt> dropOn</dt><dd> このプロパティは、ツリー上で何かがドラッグされているときに、そのときマウスポインタが重なっている行に対して、重なっている間を通して設定されています。 +</dd><dt> dropBefore</dt><dd> このプロパティは、何かがドラッグされているときに、その行にマウスポインタが重なる直前にだけ設定されます。 +</dd><dt> dropAfter</dt><dd> このプロパティは、何かがドラッグされているときに、その行にマウスポインタが重ならなくなった直後にだけ設定されます。 +</dd><dt> progressNormal</dt><dd> このプロパティは、プログレスメーターセルで通常のプログレスメータの場合に設定されます。 +</dd><dt> progressUndetermined</dt><dd> このプロパティは、プログレスメーターセルで未定 (undeterminate) のプログレスメータの場合に設定されます。 +</dd><dt> progressNone</dt><dd> このプロパティは、プログレスメーターセルでプログレスメータが表示されていない場合に設定されます。 +</dd></dl> +<p>これらのプロパティは、行や行に含まれるセルに対して、状態の変化に応じて設定されます。 +加えて、列とセルに対しては、プロパティとして、その列あるいはセルの属する列の <code>id</code> が設定されます。 +</p> +<h4 id="RDF_.E7.94.9F.E6.88.90.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.A8.AD.E5.AE.9A" name="RDF_.E7.94.9F.E6.88.90.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.A8.AD.E5.AE.9A"> RDF 生成ツリーに対するプロパティの設定 </h4> +<p><a href="ja/XUL_Tutorial/RDF_Datasources">RDF から構築されているツリー</a>に対しても、静的なコンテントの場合と同じ構文が利用できます。 +しかしながら、プロパティはデータソースの値を基にして設定することが多いと思います。 +</p> +<h4 id=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.93.E3.83.A5.E3.83.BC.E3.81.A7.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.A8.AD.E5.AE.9A" name=".E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.93.E3.83.A5.E3.83.BC.E3.81.A7.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.A8.AD.E5.AE.9A"> カスタムビューでのプロパティの設定 </h4> +<p>カスタムビューから構築されているツリーについても、ビューに <code>getRowProperties()</code>、<code>getColumnProperties()</code>、<code>getCellProperties()</code> 関数を実装して応答することによりプロパティを設定できます。 +これらは、それぞれ個々の行、列、セルについての情報を返します。 +これらの関数への引数には、対象となる行か列 (セルに対しては行と列) が設定されます。 +また、それぞれの関数の最後の引数は出力用で、ビューでは返すべきプロパティのリストを設定する必要があります (後の例で詳述します)。 +なお、<code>getColumnProperties()</code> 関数では、引数として対象となる列の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素に対応する TreeColumn オブジェクトも設定されます。 +</p> +<pre>getRowProperties : function(row,prop){} +getColumnProperties : function(column,columnElement,prop){} +getCellProperties : function(row,column,prop){} +</pre> +<p>それでは、特定のセルの表示を変更する例を見てみましょう。 +<a href="ja/XUL_Tutorial/Custom_Tree_Views">以前のセクション</a>の例を、4 行に 1 回、テキストが青色になるようにしてみましょう。 +このためには、<code>getCellProperties()</code> 関数にコードを追加して、4 行に 1 回、セルに対して「<code>makeItBlue</code>」プロパティを設定する必要があります。 +(注:テキストの色は行からセルへ継承されないので、<code>getRowProperties()</code> を使うことはできません） +</p><p><code>getCellProperties()</code> への最後の引数として渡されているプロパティオブジェクトは、<code>nsISupportsArray</code> インターフェイスを実装した <a href="ja/XPCOM">XPCOM</a> オブジェクトです。 +これは、単に配列の XPCOM 版で、この配列に要素を追加するために使用する <code>AppendElement()</code> 関数を持っています。 +また、プロパティとして使用する文字列<span style="border-bottom: 1px dashed green;" title="string atom">アトム</span>を構築するために <code>nsIAtomService</code> インターフェイスを利用します。 +</p> +<pre>getCellProperties: function(row,col,props){ + if ((row %4) == 0){ + var aserv=Components.classes["@mozilla.org/atom-service;1"]. + getService(Components.interfaces.nsIAtomService); + props.AppendElement(aserv.getAtom("makeItBlue")); + } +} +</pre> +<p>この関数は、ビューオブジェクトの一部として定義されることになります。 +まず、何行目が要求されているかをチェックして、4 行に 1 回、セルに対するプロパティを設定します。 +引数で渡されるプロパティのリスト (props) では、アトムオブジェクト (文字列定数だと考えてもらって構いません) の配列が要求されます。 +このため、XPCOM の <code>nsIAtomService</code> インターフェイスを利用して作成した後、 <code>AppendElement()</code> 関数を使用してその配列に追加します。 +ここでは、アトムとして「<code>makeItBlue</code>」を作成しています。 +必要なら、さらに <code>AppendElement()</code> を呼び出して、他のプロパティを追加することも可能です。 +</p> +<h4 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.81.AE.E4.BE.8B" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.82.B7.E3.83.BC.E3.83.88.E3.81.AE.E4.BE.8B"> スタイルシートの例 </h4> +<pre>treechildren::-moz-tree-row(selected) { background-color: #FFFFAA; } +treechildren::-moz-tree-row(odd) { background-color: #EEEEEE; } +treechildren::-moz-tree-row(odd, selected) { background-color: #FFFFAA; } +treechildren::-moz-tree-cell-text(selected) { color: #000000; } +treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } +</pre> +<p>次のセクションでは、デフォルトのスキンを変更する方法について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Style_Sheets" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Modifying_the_Default_Skin">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/tabboxes/index.html b/files/ja/archive/mozilla/xul/tutorial/tabboxes/index.html new file mode 100644 index 0000000000..6f58dce074 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/tabboxes/index.html @@ -0,0 +1,192 @@ +--- +title: タブボックス +slug: Archive/Mozilla/XUL/Tutorial/Tabboxes +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Tabboxes +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Stack_Positioning" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Grids">次のページ »</a></p> +</div> +<p>設定ダイアログでは、タブ付きページを使用したものをよく見かけると思います。 +ここでは、その作り方を見ていきます。 +</p><p><span id="Tabboxes"></span> +</p> +<h3 id=".E3.82.BF.E3.83.96.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9" name=".E3.82.BF.E3.83.96.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9"> タブボックス </h3> +<p>タブボックスは、アプリケーションの設定ウィンドウでよく利用されます。 +タブボックスでは、ウィンドウの上部にタブが並んで表示されます。 +利用者は、個々のタブをクリックすることで、異なったオプション設定を表示させることが可能です。 +これは、1 つの画面に収まらないほどオプションがあるような場合に使用すると便利です。 +</p><p>XUL では、こうしたダイアログを作るための方法を提供しています。 +このために、5 つの新しい要素を使用します。 +その概要を以下に示した後、詳細の説明に移ります。 +</p> +<dl><dt> <code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code> +</dt><dd> 上部のタブとタブページ全体を含む外側のボックスです。 +</dd><dt> <code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code> +</dt><dd> 個々のタブを含んだ内部のボックス。言い換えれば、タブの並びの部分です。 +</dd><dt> <code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code> +</dt><dd> 特定の 1 つのタブです。タブをクリックすると、タブページが前面に表示されます。 +</dd><dt> <code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code> +</dt><dd> 一連のページを含むコンテナになります。 +</dd><dt> <code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code> +</dt><dd> 特定の 1 ページの本文です。ページの内容はこの要素内に置きます。最初の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> は最初のタブに対応し、2 番目の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> は 2 番目のタブに対応するという具合になります。 +</dd></dl> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> は、タブボックス全体を含む、最も外側に位置する要素です。 +これは、タブの並びの部分を含む <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素と、 +タブ付けされたページ部分を含む <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> 要素の、 +2 つの子要素からなっています。 +</p><p>以下に、タブボックスの一般的な構文を示します。 +</p> +<pre><tabbox id="tablist"> + <tabs> + <!-- tab 要素をここに記述 --> + </tabs> + <tabpanels> + <!-- tabpanel 要素をここに記述 --> + </tabpanels> +</tabbox> +</pre> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code> 要素は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素の内部に置かれます。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素は、機能的には通常のボックスとほとんど同じです。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素自身は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> 要素の内部に置かれます。 +また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> には、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> 要素も含まれています。 +タブボックス全体は垂直配置であるため、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> 要素は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素の下に表示されます。 +</p><p>実際のところ、タブ関係の要素と通常のボックスの違いで、特殊なものは 1 つもありません。 +ボックスと同様に、タブの内容にも任意の要素を含めることが可能です。 +違いとしては、タブの部分が少々異なった風に描画されるということと、 +タブのパネル部分の内容は、デッキ (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code>) と同様、一度に 1 つしか可視化されないということです。 +</p><p>個々のタブページの内容は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> 要素の中に入れる必要があります。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code> 要素の方ではありません。 +こちらには上部に並ぶタブの内容 (見出し文字列) が入ります。 +</p><p>個々の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> 要素は、タブ付きで表示されるページになります。 +最初のパネルは最初のタブに対応し、パネル内の 2 番目の要素は 2 番目の要素に対応するといった具合です。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code> 要素と <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> 要素の間には、1 対 1 の関係があります。 +</p><p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> のサイズを決めるために、一番大きいページのサイズが使われます。 +具体的には、あるタブページに 10 個のテキスト入力欄があり、別のタブページには 1 個しかない場合、 +10 個の方がより多くのスペースを必要とするため、1 個の方も 10 個の方に合わせたサイズに拡大されるということです。 +タブボックスにより占められる領域は、利用者が新しいタブのページに切り替えても変化しません。 +</p><p><span id="Tabbox_example"></span> +</p> +<h4 id=".E3.82.BF.E3.83.96.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E4.BE.8B" name=".E3.82.BF.E3.83.96.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.81.AE.E4.BE.8B"> タブボックスの例 </h4> +<p>それでは、以下にタブボックスの例を示します。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_tabpanel_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_tabpanel_1.xul">表示</a> +</p> +<pre><tabbox> + <tabs> + <tab label="Mail"/> + <tab label="News"/> + </tabs> + <tabpanels> + <tabpanel id="mailtab"> + <checkbox label="Automatically check for mail"/> + </tabpanel> + <tabpanel id="newstab"> + <button label="Clear News Buffer"/> + </tabpanel> + </tabpanels> +</tabbox> +</pre> +<div class="float-right"><img alt="画像:tabpanel1.png"></div> +<p>この例では、最初に「Mail」というラベルを付けたタブを、2 番目に「News」というラベルを付けたタブを追加しています。 +ユーザーが「Mail」タブをクリックすると、最初のページの内容が表示されます。 +この場合は「Automatically check for mail」というラベルのチェックボックスがあるページが表示されます。 +また、2 番目のタブをクリックすると「Clear News Buffer」というラベルのボタンを持つページが表示されます。 +</p><p>現在選択されている <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tab" title="tab">tab</a></code></code> 要素には、true に設定された <code><code id="a-selected"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selected">selected</a></code></code> 属性が付加されます。 +これは、現在選択されているタブを、選択されていることがわかる外見に変更するために使われます。 +この属性に true が設定されるのは、一度に 1 つのタブだけです。 +</p><p><span id="Position_of_the_tabs"></span> +</p> +<h4 id=".E3.82.BF.E3.83.96.E3.81.AE.E8.A1.A8.E7.A4.BA.E4.BD.8D.E7.BD.AE" name=".E3.82.BF.E3.83.96.E3.81.AE.E8.A1.A8.E7.A4.BA.E4.BD.8D.E7.BD.AE"> タブの表示位置 </h4> +<p>最後に、タブの位置を変更して、タブページの任意の辺に沿って表示させる方法について説明します。 +といっても、このために特別な構文があるわけではありません。 +単純に、必要に応じて、<code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性と <code><code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code>属性を設定するだけです。 +タブ関連の要素は、レイアウトという点では通常のボックスとほとんど同じであるということを思い出してください。 +もう少し詳しく述べると、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> 要素は、垂直配置がデフォルトの通常のコンテナ用ボックスとほとんど同じであり、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素は、水平配置がデフォルトのコンテナ用ボックスとほとんど同じであるということがいえます。 +</p><p>例えば、タブを左側に並べるには、まず、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> の <code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性を垂直配置に変更して、縦に積み上げるように表示させます。 +さらに、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> も合わせて水平配置に変更します。 +これで、タブはタブページの上ではなく左に表示されるようになるはずです。 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanel" title="tabpanel">tabpanel</a></code></code> の <code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性を変更しても、タブの表示位置には何の影響も無いことを補足しておきます。これは、タブページが (タブ関係の要素の包含関係を層構造ととらえたとき) 一番上の層に位置するためです。 +</p><p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabs" title="tabs">tabs</a></code></code> 要素を移動して <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabpanels" title="tabpanels">tabpanels</a></code></code> の後に置くことによって、タブを右側や下側に置くことができます。 +もしくは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbox" title="tabbox">tabbox</a></code></code> 要素の <code><code id="a-dir"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/dir">dir</a></code></code> 属性を <code>reverse</code> に設定しても、同様になります。 +このように、タブは任意の辺に配置可能ではありますが、できるだけ上部に置いたほうが無難です。それ以外では、一部のテーマで見栄えがよくならない可能性があります。 +</p><p><span id="Adding_Tabs_to_our_Find_Files_Dialog"></span> +</p> +<h3 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.82.BF.E3.83.96.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.82.BF.E3.83.96.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B"> ファイル検索ダイアログにタブを追加する </h3> +<div class="highlight"> +<p>それでは、2 番目のパネルを、ファイル検索ダイアログに追加してみましょう。 +いくつかの検索オプションを含む「Options」タブを作ります。(これがデフォルトになるようにします)。 +この仕様は、検索オプションの指定を行なう方法としては、最善のインターフェイスではないかもしれませんが、タブの実例を示すために使ってみることにします。 +まず、上部にわたって表示されるラベルと検索条件入力ボックスを、最初のタブに移す必要があります。 +そして、2 番目のタブには、オプションをいくつか追加することにします。 +プログレスバーとボタンは、タブの外側のメインダイアログ上に残します。 +</p> +<pre class="eval"><vbox flex="1"> + +<span class="highlightred"><tabbox selectedIndex="1"> + <tabs> + <tab label="Search"/> + <tab label="Options"/> + </tabs> + + <tabpanels> + <tabpanel id="searchpanel" orient="vertical"></span> + + <description> + Enter your search criteria below and select the Find button to begin + the search. + </description> + + <spacer style="height: 10px"/> + + <groupbox orient="horizontal"> + <span class="nowiki"><caption label="Search Criteria"/></span> + + <menulist id="searchtype"> + <menupopup> + <menuitem label="Name"/> + <menuitem label="Size"/> + <menuitem label="Date Modified"/> + </menupopup> + </menulist> + <spacer style="width: 10px;"/> + <menulist id="searchmode"> + <menupopup> + <menuitem label="Is"/> + <menuitem label="Is Not"/> + </menupopup> + </menulist> + + <spacer style="height: 10px"/> + <textbox id="find-text" flex="1" style="min-width: 15em;"/> + + </groupbox> + <span class="highlightred"></tabpanel> + + <tabpanel id="optionspanel" orient="vertical"> + <checkbox id="casecheck" label="Case Sensitive Search"/> + <checkbox id="wordscheck" label="Match Entire Filename"/> + </tabpanel> + + </tabpanels> +</tabbox></span> +</pre> +<p><img alt="画像:tabpanel2.png"> +</p><p>タブ関連の要素がウィンドウの主な内容を囲んで置かれました。 +「Search」と「Options」の 2 つのタブを確認できます。 +それぞれのタブをクリックすると、対応するタブページが引き出されます。 +画像で示すように、2 つのオプションが 2 番目のタブに表示されています。 +最初のタブは、上にタブが並ぶことを除けば、変更前のものからほとんどかわりません。 +</p><p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-tabpanel.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-tabpanel.xul">表示</a> +</p> +</div> +<p>次のセクションでは、内容をグリッド状に並べる方法を見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Stack_Positioning" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Grids">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/templates/index.html b/files/ja/archive/mozilla/xul/tutorial/templates/index.html new file mode 100644 index 0000000000..7ac626b111 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/templates/index.html @@ -0,0 +1,284 @@ +--- +title: テンプレート +slug: Archive/Mozilla/XUL/Tutorial/Templates +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Templates +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Introduction_to_RDF" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Trees_and_Templates">次のページ »</a></p> +</div> +<p>このセクションでは、データに基づいて要素を生成する方法について見ていきます。 +</p><p><span id="Populating_Elements"></span> +</p> +<h3 id=".E3.83.87.E3.83.BC.E3.82.BF.E3.81.AB.E5.9F.BA.E3.81.A5.E3.81.8F.E8.A6.81.E7.B4.A0.E3.81.AE.E7.94.9F.E6.88.90" name=".E3.83.87.E3.83.BC.E3.82.BF.E3.81.AB.E5.9F.BA.E3.81.A5.E3.81.8F.E8.A6.81.E7.B4.A0.E3.81.AE.E7.94.9F.E6.88.90"> データに基づく要素の生成 </h3> +<p>XUL には、RDF によって供給されるデータに基づいて要素を生成する機能が存在します。 +このための供給源として、RDF ファイルと内部データソース (<span style="color: green;">datasource</span>)の両方を利用することが可能です。 +Mozilla では、ブックマークや履歴、あるいはメールメッセージなど、多くの情報がデータソースとして提供されます。 +これらについては、<a href="ja/XUL_Tutorial/RDF_Datasources">後のセクション</a>で詳細に扱う予定です。 +</p><p>通常は、ツリー項目 (<span style="color: green;">treeitem</span>)やメニュー項目 (<span style="color: green;">menuitem</span>)といった要素が、データに基づいて生成されることになります。 +また、必要な状況は限られているとしても、必要ならば他の要素を生成することも可能です。 +といってもツリーやメニュー項目を生成するためには多くのコードを記述する必要があるので、 +とりあえず簡単に記述可能なそれ以外の要素を例にして説明を始めたいと思います。 +</p><p>RDF データに基づいた要素の生成を行うためには、 +簡単なテンプレートを生成される各要素の雛形になるように作成する必要があります。 +言い換えれば、最初の要素だけを作成しておいて、残りの要素はそれを元に自動構築させるのと本質的には変わらない作業になります。 +</p><p>テンプレートは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/template" title="template">template</a></code></code> 要素を使用して、 +その中に自動構築される各要素の雛形となる要素を置いていくことで作成できます。 +なお、<code>template</code> 要素は、その場所に展開されることになるため、 +構築された要素を置くのに適したコンテナ要素の中に置く必要があります。 +例えばツリーの場合は、<code>template</code> 要素を <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> 要素内に置く必要があります。 +</p><p><span id="Simple_Template_Example"></span> +</p> +<h4 id=".E7.B0.A1.E5.8D.98.E3.81.AA.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.81.AE.E4.BE.8B" name=".E7.B0.A1.E5.8D.98.E3.81.AA.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.81.AE.E4.BE.8B"> 簡単なテンプレートの例 </h4> +<p>例を見ながら説明する方が良さそうなので、 +簡単な例として、トップレベルにあるブックマークを基にしてボタンを生成してみることにします。 +データの取得には、Mozilla が提供するブックマークデータソースを利用します。 +この例では、ボタンを生成するためにトップレベルのブックマーク (あるいはブックマークフォルダ) のみを取得します。 +なお、下層のブックマークを表示するためには、ボタンではなくツリーやメニューのような階層表示に対応した要素を使う必要があります。 +</p> +<div class="note"> +<p>この例のように、内部の RDF データソースを参照するコードは、chrome URL から読み込まれた場合のみ動作します。セキュリティ上の理由から、 Mozilla はそれ以外の場所 (URL) から読み込まれたコードに対して、こういったデータソースへのアクセスを許可しません。 +</p> +</div> +<p>この例を実際に見るためには、chrome パッケージを作成してファイルをそこから読み込ませる必要があります。 +(簡単な方法で可能です。詳細は <a href="ja/XUL_Tutorial/Manifest_Files">マニフェストファイル</a>を参照してください) +パッケージを認識させることができたら、ブラウザの URL フィールドに作成したファイルの chrome URL を入力することで呼び出すことが可能です。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_1.xul.txt">ソース</a> +</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </template> +</vbox> +</pre> +<div class="float-right"><img alt="画像:templates1.jpg"></div> +<p>この例を実行すると垂直ボックスが作成され、その中にトップレベルのブックマークに基づいて生成されたボタン群が 1 列に並んで配置されます。 +このコードでは、<code>template</code> 要素には <code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 要素 1 つだけが含まれていますが、 +このボタンを元にして、すべての必要なボタンが生成されることになります。 +画像から、一連のボタンが生成され、それぞれが各ブックマークに対応していることが確認できると思います。 +</p><p>この例のウインドウを開いたままにして、ブラウザでブックマークを追加すると、 +例で生成したボタンに即座に反映されることが確認できるはずです。 +(ウインドウにフォーカスを与えないとだめな場合もあります)。 +</p><p><span id="Container_and_Datasources"></span> +</p> +<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A.E8.A6.81.E7.B4.A0.E3.81.A8.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A.E8.A6.81.E7.B4.A0.E3.81.A8.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9"> コンテナ要素とデータソース </h4> +<p>このテンプレート自体は、垂直ボックスの中に置かれています。 +このボックスには、テンプレートのコンテナとして使用するために設定された 2 つの特別な属性があり、これによってテンプレートが利用するデータの取得元を指定しています。 +最初の属性の <code>datasources </code> は、テンプレートから要素を生成するときに、どの RDF データソースをデータの供給源として利用するかを宣言するために使用します。 +この例では、<code>rdf:bookmarks</code> を指定しており、 +言うまでもなく、これはブックマークデータソースを利用することを意味しています。 +また、このデータソースは Mozilla が提供していますが、 +独自のデータソースを使用する場合は、以下の例で示すように <code>datasources</code> 属性に、その RDF ファイルの URL を指定します。 +</p> +<pre><box datasources="chrome://zoo/content/animals.rdf" + ref="http://www.some-fictitious-zoo.com/all-animals"> +</pre> +<p>なお、この属性値には、空白文字で区切ることによって、一度に複数のデータソースを指定することも可能です。 +複数のソースからデータを表示させる必要がある場合は、この方法で指定します。 +</p><p>次の <code>ref</code> 属性では、データソース内で、どのデータを取得するかを指定します。 +上記のブックマークの例の場合は、値として <code>NC:BookmarksRoot</code> が、ブックマーク階層のルートを指定するために使用されています。 +なお、ここに指定可能な値は、利用するデータソースに依存します。 +例えば、独自の RDF ファイルをデータソースとして使用する場合は、 +通常 RDF の <code>Bag</code>、<code>Seq</code>、<code>Alt</code> 要素の <code>about</code> 属性と対応する値が指定可能になります。 +</p><p><span id="Inside_the_Template"></span> +</p> +<h4 id=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E5.86.85.E9.83.A8.E3.81.AE.E8.A8.98.E8.BF.B0" name=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E5.86.85.E9.83.A8.E3.81.AE.E8.A8.98.E8.BF.B0"> テンプレート内部の記述 </h4> +<p>テンプレートから要素を生成するためには、これら 2 つの属性を上記のボックスに設定する必要ありますが、 +加えて、テンプレートの中の要素についても通常とは異なった宣言が必要になります。 +上記の例からも、<code>button</code> 要素に <code>uri</code> 属性が設定されていて、 <code>label</code> 属性の値も通常とは異なった値が設定されていることが確認できると思います。 +</p><p>上記の例の、<code>label</code> 属性で行っているように、 +テンプレートの中にある属性値では「rdf:」で始めることにより、データソースから値を取得すべきであることを指示できます。 +このとき、属性値の残りの部分で、参照するデータソースの name プロパティを指定します。 +これは、データソースが使用する名前空間の URL に、プロパティ名を付加したもので構成されます。 +(もし、この意味が分からない場合は、<a href="ja/XUL_Tutorial/Introduction_to_RDF">前のセクション</a>の最後の方で、RDF で供給されるリソースの参照方法を説明しているので、その部分を読み直してみるとよいでしょう)。 +なお、この例ではブックマーク名しか利用していませんが、利用可能なフィールドは、この他にも多数あります。 +</p><p>このボタンには、ラベルとしてブックマーク名を使用するために、<code>label</code> 属性に特別な URI を設定しています。 +こういった URI は、 <code>button</code> 要素の任意の属性や、それ以外の要素の属性に設定することも可能で、 +URI が設定された属性の値は、データソース (この例ではブックマーク) から供給されるデータに置き換えられます。 +その結果、最終的にボタンのラベルとしてブックマーク名が設定されることになります。 +</p><p>以下の例で、ボタンのラベル以外の属性に対して、データソースを利用して値を設定する方法を示します。 +もちろん、この架空のデータソースからは適切なリソースが供給されることが前提ですが、 +もし属性に対応するリソースが見つからない場合は、その属性の値には空の文字列が設定されます。 +</p> +<pre><button class="rdf:http://www.example.com/rdf#class" + uri="rdf:*" + label="rdf:http://www.example.com/rdf#name" + crop="rdf:http://www.example.com/rdf#crop"/> +</pre> +<p>また、これを応用して、別々のデータソースから供給される属性値を持った一連の要素を動的に生成させることも可能です。 +</p><p><code>uri</code> 属性は、コンテント生成時に起点となる要素を指定するために使用します。 +これ以前のコンテントは 1 回だけ生成されるのに対し、この要素と内部のコンテントはリソースごとに生成されることになります。 +この挙動は、<a href="ja/XUL_Tutorial/Trees_and_Templates">ツリー用のテンプレートの作成</a>について見るときに詳細に説明する予定です。 +</p><p><span id="More_Examples"></span> +</p> +<h4 id=".E3.81.84.E3.82.8D.E3.81.84.E3.82.8D.E3.81.AA.E4.BE.8B" name=".E3.81.84.E3.82.8D.E3.81.84.E3.82.8D.E3.81.AA.E4.BE.8B"> いろいろな例 </h4> +<p>こういった設定をテンプレートのコンテナ (この例ではボックス) と、テンプレート中の要素に付加することで、 +いろいろと興味深いコンテントのリストを外部のデータから生成させることができます。 +もちろん、テンプレートの中には複数の要素を置いてもよく、それらの任意の要素に RDF を参照するための特別な URI を設定することが可能です。 +以下に、記述例を示します。 +</p><p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_2.xul.txt">ソース</a> +</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + <vbox uri="rdf:*"> + <button label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <label value="rdf:http://home.netscape.com/NC-rdf#URL"/> + </vbox> + </template> +</vbox> +</pre> +<p>この例は、各ブックマークに対応するボタンとラベルを持つ垂直ボックスを生成します。 +ボタンはブックマーク名、ラベルには URL を持つことになります。 +</p><p>機能的には、テンプレートから生成された新たな要素と、XUL 内に直接記述された要素とでは、何も違いはありません。 +テンプレートから生成されるすべての要素には、リソースを特定するために <code>id</code> 属性が設定されます。 +これを利用することで、要素に対応するリソースを特定することが可能です。 +</p><p>また、以下の例のように、同じ属性に複数のリソース値を空白文字で区切って指定することもできます。 +リソース構文の詳細については、XULPlanet の <a class="external" href="http://www.xulplanet.com/tutorials/xultu/templateex.html">Template Syntax Examples</a> を参照してください。 +</p><p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_3.xul.txt">ソース</a> +</p> +<pre><vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" + flex="1"> + <template> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/> + </template> +</vbox> +</pre> +<p><span id="How_Templates_are_Built"></span> +</p> +<h3 id=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.81.AE.E3.83.93.E3.83.AB.E3.83.89.E5.8B.95.E4.BD.9C" name=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.81.AE.E3.83.93.E3.83.AB.E3.83.89.E5.8B.95.E4.BD.9C"> テンプレートのビルド動作 </h3> +<p>要素に <code>datasources</code> 属性が設定されることが、その要素がテンプレートからビルドされることを示すことになります。 +コンテントをビルドする必要があるかどうかは、<code>template</code> タグではなく、 +<code>datasources</code> 属性で判定されることに注意してください。 +この属性が存在するとき、ビルダー (<span style="color: green;">builder</span>)と呼ばれるオブジェクトが要素に付加されて、 +テンプレートからコンテントをビルドする動作を遂行します。 +なお、JavaScript からも、<code>builder</code> プロパティで、ビルダーオブジェクトにアクセスすることが可能です。 +もっとも、通常、ビルダーへのアクセスは、コンテント生成が自動的に行われないときに、コンテントの再生成を行わせる場合にのみ必要なだけです。 +</p><p>ビルダーには 2 種類あります。 +1 つは、コンテントビルダーで、これはほとんど場面で利用されます。 +もう 1 つは、ツリービルダーで、これはツリーに対してのみ利用されます。 +</p><p><span id="Content_Builder"></span> +</p> +<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.93.E3.83.AB.E3.83.80.E3.83.BC" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.93.E3.83.AB.E3.83.80.E3.83.BC"> コンテントビルダー </h4> +<p>コンテントビルダーは、<code>template</code> 要素の中のコンテントを取り出して、 +データソースから取得される<span style="border-bottom: 1px dashed green;" title="row">行</span>ごとに複製します。 +具体的には、上記の例では、利用者が 10 個のブックマークを持っている場合、 +10 個の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 要素が生成されて、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> 要素の子要素として追加されることになります。 +DOM 関数を利用して文書ツリーを走査することで、生成された要素を見つけてプロパティを調べることが可能です。 +なお、テンプレートから生成された要素は画面に表示されますが、<code>template</code> 要素自体は表示はされません。 +ただし、<code>template</code> 要素も文書ツリー中には存在しています。 +加えて、生成された各ラベルの <code>id</code> 属性には、RDF リソースの対応する行を示す値が設定されます。 +</p><p>コンテントビルダーは、常に <code>uri="rdf:*"</code> が指定されたところから生成を開始します。 +<code>uri</code> 属性が、要素ツリーで下位の要素に設定されている場合、それより上位 (外側) の要素は、1 回だけ作成されることになります。 +以下の例では、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> が 1 つ作成され、その中は項目ごとに生成されるラベルで埋められることになります。 +</p> +<pre><template> + <hbox> + <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/> + </hbox> +</template> +</pre> +<p>また、<code>datasources</code> 属性を持つ要素の中で、テンプレートの外側にそれ以外のコンテントが存在する場合も表示されます。 +このように、テンプレートを使用する場合、静的なコンテントと、動的なコンテントを混合することが可能です。 +</p><p><span id="Tree_Builder"></span> +</p> +<h4 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.AB.E3.83.80.E3.83.BC" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.AB.E3.83.80.E3.83.BC"> ツリービルダー </h4> +<p>一方のツリービルダーは、行ごとに DOM 要素を生成したりはしません。 +その代わり、必要になるたびに RDF データソースからデータを直接取得します。 +ツリーは、しばしば何千もの行を表示することが想定されるので、この方法の方が効率的に動作します。 +つまり、個々のセルに対して要素を生成するのは、コストが高すぎて現実的ではないわけです。 +ただし、このためツリーには、テキストや画像といった限られた種類の情報しか表示できず、 +個々の要素が生成されないために、通常の方法では CSS プロパティを利用して、ツリーのセルにスタイルを設定することもできないという制約があります。 +</p><p>ツリービルダーは、ツリーのみが利用し、他の要素は、コンテントビルダーのみを利用します。 +といっても、メニューなどの他の要素は、ツリーのように多数の項目を表示することは想定されていないため、問題はありません。 +また、コンテントビルダーをツリーに利用することも可能で、この場合は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> 要素と関連する要素が行ごとに作成されます。 +</p><p><span id="Rules"></span> +</p> +<h3 id=".E3.83.AB.E3.83.BC.E3.83.AB" name=".E3.83.AB.E3.83.BC.E3.83.AB"> ルール </h3> +<p>先ほどテンプレートの記述例として示した画像で、 +3 番目のボタンがハイフンのみの表示であることが気にならなかったでしょうか。 +これは、ブックマークリストに、セパレータが含まれているため発生しています。 +これまでの方法では、 RDF ブックマークデータソースからは、 +セパレータは通常のブックマークと同じものとして供給されます。 +しかしながら、本当はセパレータのリソースに対しては、ボタンのかわりに小さな隙間を置きたいところです。 +このためには、通常のブックマークとセパレータとで、異なる種類のコンテントを生成させる必要があります。 +</p><p>これは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/rule" title="rule">rule</a></code></code> 要素を利用することで可能になります。 +このために、ルールをテンプレートから生成させたい要素のバリエーションに対応して定義する必要があります。 +この場合、ブックマークに対するルールと、セパレータに対するルールが必要になります。 +<code>rule</code> 要素に設定する属性によって、どのルールが、どの RDF リソースに適用されるかが判断されます。 +</p><p>データに適用するルールを走査するときは、それぞれの <code>rule</code> 要素について順番に、そのデータとマッチするかを調べていきます。 +この挙動は、ルールを定義する順番が重要であることを意味しています。 +つまり、先に定義されているルールの方が、後で定義されているルールよりも優先されるということです。 +</p><p><span id="Rule_Example"></span> +</p> +<h4 id=".E3.83.AB.E3.83.BC.E3.83.AB.E3.81.AE.E4.BE.8B" name=".E3.83.AB.E3.83.BC.E3.83.AB.E3.81.AE.E4.BE.8B"> ルールの例 </h4> +<p>以下の例は、先ほどの例に 2 つのルールを加えたものです。 +</p><p><span id="%E4%BE%8B_4"><a id="%E4%BE%8B_4"></a><strong>例 4</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_templates_4.xul.txt">ソース</a> +</p> +<pre><window + id="example-window" + title="Bookmarks List" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + + <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1"> + <template> + + <rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator"> + <spacer uri="rdf:*" height="16"/> + </rule> + + <rule> + <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + + </template> + </vbox> + +</window> +</pre> +<div class="float-right"><img alt="画像:templates2.jpg"></div> +<p>2 つのルールを使用することで、テンプレート中のコンテントは選択的に生成されることになります。 +最初の <code>rule</code> 要素では、ブックマークセパレータだけが選択されます。 +この条件は、<code>rdf:type</code> 属性によって設定されています。 +また、後のルールでは、<code>rule</code> 要素に属性が何も設定されていないため、すべてのデータがマッチします。 +</p><p><code>rule</code> タグに置かれたすべての属性が、マッチ条件として使用されます。 +この例の場合、ブックマークデータソースが供給する <code>rdf:type</code> プロパティを利用することで、セパレータの区別を行います。 +RDF ブックマークデータソースでは、データがセパレータの場合、この属性にセパレータを示す固有の値が設定されることになるため、 +この方法で、セパレータをそれ以外のものから区別することが可能です。 +また、このテクニックは、RDF の <code>Description</code> 要素に設定される任意の属性に対しても応用できます。 +</p><p>上記の例で、最初のルールに設定されている URL は、セパレータを示すための固有 URL で、セパレータを区別するために使用されています。 +このため、セパレータの場合は、最初のルールが適用されることになり、 +16 ピクセルの隙間を空ける <code><code><a href="/ja/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code> 要素が生成されます。 +また、セパレータ以外の要素は、すべて最初のルールにはマッチしないので、2 番目のルールのチェックに移ることになります。 +2 番目のルールには、属性が一切指定されていないので、すべてのデータがマッチすることになります。 +したがって、ここでは、セパレータ以外のデータに対して行いたいことが、行われることになります。 +</p><p>また、RDF 名前空間 (<code>rdf:type</code>) から属性を取り出すために、 +名前空間の宣言を <code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> タグに追加する必要があることも確認してください。 +そうしない場合、属性は XUL 名前空間から探されますが、 +当然、そこには存在しないので、ルールにマッチしないことになります。 +独自の名前空間の属性を利用する場合も、ルールにマッチさせるためには、名前空間の宣言が必要になります。 +</p><p>2 番目のルールを取り除いた場合は、予想されるとおり、 +その結果は、セパレータが 1 つ表示されるだけで、 +ブックマークは、マッチするルールが無いので表示されなくなります。 +</p><p>簡単にまとめると、ルールは <code>rule</code> 要素に設定された全ての属性について、 +対応する RDF リソースの属性とマッチしたとき、そのルールはマッチしたことになります。 +また、RDF ファイルを利用する場合、リソースは <code>Description</code> 要素になります。 +</p><p>ただし、若干の例外はあり、 +ルールでは、属性 <code>id</code>、<code>rdf:property</code>、<code>rdf:instanceOf</code> に基づいてマッチさせることはできません。 +といっても、必要なら自前の属性を自前の名前空間で用意すれば済むことなので、この制限が問題になることは無いと思います。 +</p><p>また、最初の例のように、ルールが存在しないテンプレートについては、 +機能的には属性を持たないルールが 1 つだけ指定されているのと完全に同じであることを補足しておきます。 +</p><p>次のセクションでは、テンプレートをツリーに対して利用する方法を見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Introduction_to_RDF" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Trees_and_Templates">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/the_box_model/index.html b/files/ja/archive/mozilla/xul/tutorial/the_box_model/index.html new file mode 100644 index 0000000000..5e34a7294e --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/the_box_model/index.html @@ -0,0 +1,143 @@ +--- +title: ボックスモデル +slug: Archive/Mozilla/XUL/Tutorial/The_Box_Model +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:More_Button_Features" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Element_Positioning">次のページ »</a></p> +</div></div> +<p>このセクションでは、どのように XUL がレイアウトを処理するかを見ていきます。</p> +<h2 id="Introduction_to_Boxes" name="Introduction_to_Boxes">ボックス入門</h2> +<p>XUL でレイアウトを行うための主な仕組みは「ボックスモデル (<span style="color: green;">Box Model</span>) 」と呼ばれるものです。 このモデルでは、ウィンドウを一連のボックスに分割し、それぞれのボックス内では要素を水平方向または垂直方向に並べることでレイアウトを行っていきます。 つまり、一連のボックスやスペーサー、<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性をもった要素を組み合わせることによって、ウィンドウのレイアウトをコントロールすることを可能にしています。</p> +<p>ボックスは、XUL 要素をレイアウトするための基礎となる部分ではありますが、それ自身は極めて単純ないくつかのルールに従って動作します。 ボックスでは、その子要素を水平方向か垂直方向かのいずれかの配置でレイアウトすることが可能です。 水平 (<span style="color: green;">horizontal</span>) ボックスは、子要素を水平方向に並べ、垂直 (<span style="color: green;">vertical</span>) ボックスは、子要素を垂直方向に並べます。 つまり、ボックスは 1 行だけ、または 1 列だけの HTML のテーブルようなものだと考えることができます。 子要素の方に設定される様々な属性と、いくつか CSS によるスタイルプロパティを加えることによって、子要素の正確な位置とサイズをコントロールすることが可能になります。</p> +<h3 id="Box_elements" name="Box_elements">ボックス要素</h3> +<p>ボックスの基本的な構文は、以下のようになります。</p> + + +<pre class="brush:xml"><hbox> + <!-- ここに置かれた要素は水平に並べて配置される --> +</hbox> + +<vbox> + <!-- ここに置かれた要素は垂直に並べて配置される --> +</vbox> +</pre> + + +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 要素は、水平配置のボックスを作るのに使われます。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 内に置かれた個々の要素は、1 行で水平に配置されます。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> 要素は、垂直配置のボックスを作るのに使われます。 この中に要素を追加すると、その列の一番下に配置されます。</p> +<p>これ以外に、汎用的な <code><code><a href="/ja/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 要素もあります。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code> 要素は、水平配置がデフォルトなので、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> と同等です。 ただし、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/box" title="box">box</a></code></code>は、<code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code> 属性を使って、ボックスの配置方向をコントロールすることができます。 水平配置のボックスを作る場合には、この属性に <code>horizontal</code> という値を設定し、垂直配置のボックスを作るには <code>vertical</code> という値を設定します。</p> +<p>このため、以下の 2 つも同等です。</p> + + + +<pre class="brush:xml"><vbox></vbox> + +<box orient="vertical"></box> +</pre> + + +<p>次の例は、3 つのボタンを垂直方向に置く方法を示しています。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_1.xul">表示</a></p> +<div class="float-right"> + <img height="128" src="/@api/deki/files/559/=Boxes-ex1.png" width="123"></div> + + +<pre class="brush:xml"><vbox> + <button id="yes" label="Yes" /> + <button id="no" label="No" /> + <button id="maybe" label="Maybe" /> +</vbox> +</pre> + + +<p>3 つのボタンは、ボックスで指定されるとおり、垂直方向に配置されています。 ボタンが水平に配置されるように変更する場合、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/vbox" title="vbox">vbox</a></code></code> 要素を <code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 要素に変更するだけで完了します。</p> +<h3 id="Login_prompt_example" name="Login_prompt_example">ログインプロンプトの例</h3> +<p>ボックスの中には、必要なだけ要素を追加することが可能です。 また、要素としてボックスを入れ子に追加することも可能です。 水平ボックスの場合、追加された要素は、その直前にある要素の右側に置かれていきます。 要素をどれだけ追加しても、ウィンドウの幅が広くなるだけで、途中で折り返されることはありません。 同様に、垂直ボックスにの場合、追加された要素は、その直前にある要素の下に置かれていきます。 以下の例は、簡単なログインプロンプトです。</p> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_2.xul">表示</a></p> + + + +<pre class="brush:xml"><vbox> + <hbox> + <label control="login" value="Login:" /> + <textbox id="login" /> + </hbox> + <hbox> + <label control="pass" value="Password:" /> + <textbox id="pass" /> + </hbox> + <button id="ok" label="OK" /> + <button id="cancel" label="Cancel" /> +</vbox> +</pre> + + +<div class="float-right"> + <img height="136" src="/@api/deki/files/561/=Boxes-ex2.png" width="203"></div> +<p>この例では、4 つの要素が、垂直方向に配置されています。 2 つは内部の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> タグで、残りの 2 つは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 要素です。 外側のボックスの直接の子要素だけが垂直方向に配置されていることが確認できます。 ラベルとテキスト入力欄は、内部の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/hbox" title="hbox">hbox</a></code></code> 要素の中にあるため、そちらに従って水平に配置されています。 ラベルとテキスト入力欄が水平方向に配置されていることも画像から確認できます。</p> +<h4 id="Aligning_textboxes" name="Aligning_textboxes">入力欄の水平位置をそろえる</h4> +<p>上のログインダイアログのレイアウトをよく見ると、2 つのテキスト入力欄の水平位置がきちんとそろっていない点が気になります。 改善のため、そろえてみることにします。 そのためにはボックスをいくつか追加する必要があります。</p> +<p><span id="%E4%BE%8B_3"><a id="%E4%BE%8B_3"></a><strong>例 3</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_3.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_boxes_3.xul">表示</a></p> + + +<pre class="brush:xml"><vbox> + <hbox> + <vbox> + <label control="login" value="Login:" /> + <label control="pass" value="Password:" /> + </vbox> + <vbox> + <textbox id="login" /> + <textbox id="pass" /> + </vbox> + </hbox> + <button id="ok" label="OK" /> + <button id="cancel" label="Cancel" /> +</vbox> +</pre> + + +<div class="float-right"> + <img height="136" src="/@api/deki/files/563/=Boxes-ex3.png" width="203"></div> +<p>テキスト入力欄をそろえるための方法を見ていきます。 このためには、メインとなるボックスの内部にボックスを追加する必要があります。 とりあえず、2 つのラベルと 2 つのテキスト入力欄は、すべて同じ水平ボックス内に置きます。 さらに、その中でラベルとテキスト入力欄の組を、それぞれ分けて別の垂直ボックスに置きます。 内側のボックスは、要素を垂直に配置するために使用します。 水平ボックスは、ラベル用 vbox とテキスト入力欄用 vbox を水平方向に並べるために必要です。 水平ボックスを取り除いた場合、テキスト入力欄は、両方ともラベルの下に表示されてしまいます。</p> +<p>新しい例では、「Password」というラベルの位置が上すぎるという問題があります。 実際にこれを解決するためには、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/grid" title="grid">grid</a></code></code> 要素を使う必要がありますが、この要素についてはもう少し<a href="/ja/docs/XUL_Tutorial/Grids">後のセクション</a>で説明する予定です。</p> +<h3 id="Our_Find_Files_Dialog_example" name="Our_Find_Files_Dialog_example">ファイル検索ダイアログにボックスを追加</h3> +<p>それでは、ファイル検索ダイアログにボックスをいくつか追加してみましょう。 垂直ボックスを要素全体の外側に追加し、水平ボックスをテキスト入力欄とボタンの外側に追加します。 その結果、ボタンは、テキスト入力欄の下に表示されます。</p> + + +<pre class="brush:xml"><vbox flex="1"> + <description> + Enter your search criteria below and select the Find button to begin + the search. + </description> + + <hbox> + <label value="Search for:" control="find-text" /> + <textbox id="find-text" /> + </hbox> + + <hbox> + <spacer flex="1" /> + + <button id="find-button" label="Find" /> + <button id="cancel-button" label="Cancel" /> + </hbox> +</vbox> +</pre> + + + +<p>垂直ボックスによって、メインとなるテキストとテキスト入力欄からなるボックス、ボタンからなるボックスは、垂直方向に配置されます。 内部のボックスは、その中の要素を水平方向に配置します。 下の画像から分かるように、ラベルとテキスト入力欄は、並んで配置されます。 スペーサ (<code><a href="/ja/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code>) と 2 つのボタンも、ボックス内に水平方向に置かれます。 スペーサが伸縮可能であることによって、ボタンが右側に表示されていることに注意して下さい。</p> +<p><img height="110" src="/@api/deki/files/565/=Boxes1.png" width="469"></p> +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxes.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-boxes.xul">表示</a></p> +<p>次のセクションでは、個々の要素のサイズの指定と、そのサイズを制約する方法を見ていきます。</p> +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:More_Button_Features" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Element_Positioning">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/the_chrome_url/index.html b/files/ja/archive/mozilla/xul/tutorial/the_chrome_url/index.html new file mode 100644 index 0000000000..b746177c80 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/the_chrome_url/index.html @@ -0,0 +1,66 @@ +--- +title: Chrome URL +slug: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL +--- +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial/XUL_Structure" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial/Manifest_Files">次のページ »</a></p> +</div></div> + +<p>このセクションでは、XUL ドキュメントをはじめとする chrome ファイルを参照する方法を説明します。</p> + +<h2 id="Chrome_URL" name="Chrome_URL">Chrome URL</h2> + +<p>HTML ファイルを参照する場合とまったく同様に、 XUL ファイルも標準的な HTTP の URL を用いて参照することができます。(それ以外の 任意の URLでもかまいません)。 しかし、それが Mozilla の chrome システムにインストールされたパッケージに含まれている場合は、特別な chrome URL によって参照することになります。 こういったパッケージとしては、Mozilla に同梱のものが最初からインストールされていますが、利用者が自分で登録することも可能です。</p> + +<p>インストールされているパッケージには、実行時にセキュリティ上の制限が加えられないという利点があります。 (このことは、多くのアプリケーションが必要としています)。 また、他の種類の URL を使ってアクセスする場合と比べて、 複数のテーマ (theme)やロケール (locale)を自動的に扱うことができるという利点もあります。 例えば、chrome URL を使うと、利用者がどのテーマを利用しているかを意識することなく、そのテーマに含まれている画像などのファイルを参照することができます。 各テーマで同じファイル名を使ってさえいれば、chrome URL を使うことで該当するファイルを参照することが可能になります。 このために、Mozilla はファイルが置かれている場所を特定して、正しいデータを返すような処理をしています。 また、これはパッケージをどこにインストールしたかによらずに、その内容にアクセスできることも意味しています。 つまり、chrome URL は、ファイルの物理的な位置には依存していないということです。 これにより、ファイルを置く場所の詳細について悩む必要がなくなるため、たくさんのファイルを持つアプリケーションの作成がさらに簡単になります。</p> + +<p>chrome URL の基本的な構文は、以下になります。</p> + +<pre><a rel="freelink">chrome://</a><em><package name></em>/<em><part></em>/<em><file.xul></em> +</pre> + +<p><package name> は、「messenger」や 「editor」といったパッケージ名を示すテキストになります。 また、<part> は、アクセスしたいパートによって 「<code>content</code>」、「<code>skin</code>」、「<code>locale</code>」からどれかを選択します。 最後の <file.xul> は単純にファイル名に対応します。</p> + +<p><strong>例</strong>: <code>chrome://messenger/content/messenger.xul</code></p> + +<p>この例は、メッセンジャーウィンドウを記述する XUL ファイルを参照します。 また、スキンを構成するファイルを示したいときは、 「<code>content</code>」を「<code>skin</code>」に置き換えた後、ファイル名を変更します。 同様に、ロケールを構成するファイルを示す場合は、「<code>content</code>」 ではなく 「<code>locale</code>」を用いることになります。</p> + +<p>chrome URL を開くために、 Mozilla は、インストールしたパッケージのリストを走査して、パッケージ名とパートにマッチする JAR ファイル、またはディレクトリの位置の特定をしようとします。 このとき chrome URL と JAR ファイルの対応付けは、 chrome ディレクトリに置かれているマニフェストファイル (manifest file)によって指定されます。 Thunderbird は、これを利用して特定のインストール位置に依存しないようにしているため、 <code>messenger.jar</code> ファイルを別の場所へ移動したとしても、 それに応じてマニフェストファイルを更新しておけば、問題なく動作するはずです。 このように、chrome URL を使うことで、詳細な環境の違いは Mozilla に任せてしまうことができます。 同様になりますが、利用者がテーマを変更した場合についても、chrome URL の「<code>skin</code>」パートが異なるファイル群を指すように変更されるだけで、 XUL ファイルやスクリプトを変更する必要はありません。</p> + +<p>以下にいくつかの例をあげます。 どの URL にも、特定のテーマやロケールに対する指定や、(インストール先などの) 特定のディレクトリの指定が含まれていないことを確認してください。</p> + +<pre>chrome://messenger/content/messenger.xul +chrome://messenger/content/attach.js +chrome://messenger/skin/icons/folder-inbox.gif +chrome://messenger/locale/messenger.dtd +</pre> + +<p>なお、サブディレクトリを参照したい場合は、単純に chrome URL の最後の部分に追加するだけでかまいません。 以下に ブックマークウィンドウを参照する URL を示します。 (Mozilla suite と Firefox ではパッケージ名が異なっているため両方を並べておきます)。</p> + +<pre>chrome://communicator/content/bookma...rksManager.xul (Mozilla) +chrome://browser/content/bookmarks/b...rksManager.xul (Firefox) +</pre> + +<p>chrome URL は、通常 URL が使用できる所ならば、どこからでも入力することが可能です。 極端な話、Mozilla のブラウザウィンドウの URL バーから直接入力してもかまいません。 上記の URL を、ブラウザのアドレスバーに入力した場合、ウィンドウはウェブページを開いたように (ブラウザの中に) 表示されますが、 ほとんどの部分は、独立したウィンドウであるかのように機能します。 ただし、ダイアログボックスの中には、 おそらくは開いたウィンドウから引数が渡されることを前提としているために、上記の方法では正しく動かないものもあります。</p> + +<p>また、以下のようにファイル名を指定しない chrome URL もあります。</p> + +<pre>chrome://browser/content/ +</pre> + +<p>この例では、パッケージ名とパートのみが指定されています。 このようにファイル名を省略した URL を使って参照した場合は、そのディレクトリの用途に応じて適切なファイルが自動的に選択されることになります。 具体的には、コンテントであれば、パッケージ名に <code>.xul</code> を拡張子として加えたファイルが選択されます。 上記の例では、<code>browser.xul</code> ファイルが選択されることになり、 <code>messenger</code> パッケージでは、 <code>messenger.xul</code> が選択されることになります。 おそらく、あなたも独自のアプリケーションを作成するときには、ファイル名を省略してメインウィンドウを参照できるように、 メインウィンドウのファイル名をパッケージと同じ名前にしたいと思うはずです。 また、この方法は、利用者にとってもパッケージ名を知ってさえいれば、アプリケーションを開くことができるため便利です。 (もちろん、拡張機能 (Extension)は、ブラウザのインタフェースを変更することで、UI の一部として拡張機能へのアクセス方法を提供するため、一般の利用者が URL を知る必要はありませんが)</p> + +<p>また、スキンのパートでファイル名を省略したときは、<em><package name></em>.css ファイルが選択され、ロケールの場合は<em><package name></em>.dtd ファイルが選択されることになります。</p> + +<p>chrome URL は、ディスク上の場所とは関係していないことを覚えておいてください。 chrome URL の最初の 2 つの部分は、パッケージ名とパート (「content」「skin」「locale」のどれか) になります。 通常は、「content」パートのファイルは「content」というディレクトリに置きますが、 これは、単に慣習であり、規定されているわけではないため、 全く異なるディレクトリ構造を作成してファイルを置いてもかまいません。</p> + +<p>次のセクションでは、マニフェストファイル (<code>.manifest</code> 拡張子がついたファイル) と、パッケージの作り方について見ていきます。</p> + +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial/XUL_Structure" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial/Manifest_Files">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/toolbars/index.html b/files/ja/archive/mozilla/xul/tutorial/toolbars/index.html new file mode 100644 index 0000000000..c77292c936 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/toolbars/index.html @@ -0,0 +1,68 @@ +--- +title: ツールバー +slug: Archive/Mozilla/XUL/Tutorial/Toolbars +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Toolbars +--- +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Splitters" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Simple_Menu_Bars">次のページ »</a></p> +</div></div> +<p>ツールバーは、通常ウィンドウの上部に置かれ、よく使う機能を実行するための多数のボタンを持っています。 XUL では、ツールバーを作るための方法を提供しています。</p> +<h2 id="Adding_a_Toolbar" name="Adding_a_Toolbar">ツールバーを追加する</h2> +<p>XUL にはボックス型の要素がたくさんありますが、ツールバーもボックスの一種になります。 ツールバーには、ボタンが 1 行に並んで表示されるのが一般的ですが、どんな要素を置いてもかまいません。 例えば、 Mozilla のブラウザウィンドウのツールバーには、ページの URL を表示するテキスト入力欄があります。</p> +<p>ツールバーは、ウィンドウの任意のサイドに、水平・垂直どちらでも好きな向きで置くことが可能です。もちろん、普通はテキスト入力欄を垂直ツールバーに置くようなことはしませんが、 実際のところ、ツールバーはボックスにすぎないため、ウィンドウ内の好きな場所に置くことができます。 極端なことをいえば、ウィンドウの真中に置いてもかまいません。 といっても、たいていは、ツールバーはまとめてウィンドウの上部に置かれます。 1 つ以上のツールバーを並べて置く場合、通常はツールボックスと呼ばれるものでグループ化しておきます。</p> +<h3 id="A_simple_toolbar_inside_a_toolbox" name="A_simple_toolbar_inside_a_toolbox">単純なツールバー</h3> +<p>以下は、ツールボックスに置かれた単純なツールバーの例です。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_toolbar_1.xul">表示</a></p> +<pre><toolbox> + <toolbar id="nav-toolbar"> + <toolbarbutton label="Back"/> + <toolbarbutton label="Forward"/> + </toolbar> +</toolbox> +</pre> +<p><img alt="画像:toolbar1.jpg" src="/@api/deki/files/892/=Toolbar1.jpg"></p> +<p>この例では、Back ボタンと Forward ボタンという 2 つのボタンを持つツールバーが 1 つ作られています。 そのツールバーは、ツールボックスの内に置かれます。 この例には、4 つの新しいタグが含まれています。 これらについて、以下に説明します。</p> +<dl> + <dt> + <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></dt> + <dd> + ツールバーを置くためのボックスです。</dd> + <dt> + <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></dt> + <dd> + 1 つのツールバーです。ここには、ボタンなどのツールバーが持つアイテムが含まれます。</dd> + <dt> + <code><a href="/ja/docs/Mozilla/Tech/XUL/toolbarbutton" title="toolbarbutton">toolbarbutton</a></code></dt> + <dd> + ツールバー内のボタンです。このボタンは、普通のボタンと機能的には同じですが、通常は異なった外見をしています。</dd> +</dl> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> は、実際にツールバーを生成する、主となる要素です。 その内部には、個々のツールバーアイテムが置かれます。 通常はボタンですが、他の要素でもかまいません。</p> +<p>上の例では、ツールバーは 1 つだけ作られています。 複数のツールバーを作ることも簡単で、 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> 要素を、元からあるものの後に追加していくだけです。</p> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> は、ツールバーのコンテナです。 アプリケーションによっては、ウィンドウの上部に複数のツールバーがあるものもあります。 それら全てを、1 つの <code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> 内に置くことができます。</p> +<p>なお、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code></code> 要素を、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/toolbox" title="toolbox">toolbox</a></code></code> 内部に置くことは必須ではありません。</p> +<h3 id="Customizable_toolbars" name="Customizable_toolbars">カスタマイズ可能なツールバー</h3> +<p>Firefox などの Toolkit アプリケーションは、カスタマイズ可能なツールバーを持っています。 このため、多くの拡張機能ではツールバーボタンをツールバーに直接追加するのではなく、ツールバーパレットに追加しています。 カスタマイズ可能なツールバーについての詳細は、「<a href="/ja/docs/Creating_toolbar_buttons">ツールバーボタンの作成</a>」を参照してください。</p> +<h2 id="Our_find_files_example" name="Our_find_files_example">ファイル検索ダイアログの例</h2> +<p>それでは、ファイル検索ダイアログにツールバーを追加してみましょう。 実際の機能としては必要ありませんが、例を示すという目的で追加することにします。 2 つのボタン、Open ボタンと Save ボタンを追加します。 これらのボタンは、利用者が検索結果を保存し、後でそれを再び開くような機能を想定しています。</p> +<pre><vbox flex="1"> + <span class="highlightred"><toolbox> + <toolbar id="findfiles-toolbar"> + <toolbarbutton id="opensearch" label="Open"/> + <toolbarbutton id="savesearch" label="Save"/> + </toolbar> + </toolbox></span> + <tabbox> +</pre> +<p>この例では、2 つのボタンを持つツールバーが追加されています。 画像から、これらが上辺にそって水平に表示されているのが分かると思います。 グリッピーも、ツールバーの左端に表示されています。 ツールバーを、タブボックス (<span style="color: green;">tabbox</span>) のすぐ上に、垂直ボックスで囲って置いている点に注意して下さい。 ツールバーを、それ以外の全てのものの上に表示させるためには、垂直配置が必要になります。</p> +<p><img alt="画像:toolbar5.png" src="/@api/deki/files/896/=Toolbar5.png"></p> +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-toolbar.xul">表示</a></p> +<p>次のセクションでは、ウィンドウへのメニューバーの追加の仕方を見ていきます。</p> +<div> + <div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Splitters" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Simple_Menu_Bars">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/tree_box_objects/index.html b/files/ja/archive/mozilla/xul/tutorial/tree_box_objects/index.html new file mode 100644 index 0000000000..bd0124755d --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/tree_box_objects/index.html @@ -0,0 +1,204 @@ +--- +title: ツリーボックスオブジェクト +slug: Archive/Mozilla/XUL/Tutorial/Tree_Box_Objects +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Box_Objects +--- +<p> </p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Tree_View_Details" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Introduction_to_RDF">次のページ »</a></p> +</div> + +<p>このセクションでは、ツリーの描画方法を制御するために利用できる、ツリーボックスオブジェクトについて説明します。</p> + +<p><span id="About_the_Tree_Box_Object"></span></p> + +<h3 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E6.A6.82.E8.A6.81" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E6.A6.82.E8.A6.81">ツリーボックスオブジェクトの概要</h3> + +<p>ボックスオブジェクトについては、<a href="ja/XUL_Tutorial/Box_Objects">少し前のセクション</a>で既に説明しましたが、 ツリーボックスオブジェクトは、ツリーでの利用に特化した専用のボックスオブジェクトで、 <a class="external" href="http://www.xulplanet.com/references/objref/TreeBoxObject.html">TreeBoxObject</a> インターフェイスを実装しています。</p> + +<p><span id="Redrawing_the_Tree"></span></p> + +<h4 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E5.86.8D.E6.8F.8F.E7.94.BB.E3.82.92.E8.A6.81.E6.B1.82.E3.81.99.E3.82.8B" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E5.86.8D.E6.8F.8F.E7.94.BB.E3.82.92.E8.A6.81.E6.B1.82.E3.81.99.E3.82.8B">ツリーの再描画を要求する</h4> + +<p>ツリーボックスオブジェクトの <code>rowCountChanged()</code> 関数は、前のセクションで既に見ています。 この関数は、ツリーに対して 1 つ以上の行が、追加または削除されたことを通知するもので、 ツリーでは影響を受ける領域についての再描画を行うことになります。 しかし、単に 1 つの行が何らかの方法で変更された場合、 例えばセルのラベルが変更されたときなどであれば、<code>rowCountChanged()</code> 関数を呼び出す必要はありません。 こういった場合には、かわりに別のいくつかの描画関数を利用します。 最も簡単なのは、<code>invalidateRow()</code> を呼び出すことで、これはツリーの中の指定した行の再描画を要求します。 このとき、ツリーはビューから更新されたデータを取得して画面上のツリーの内容を更新することになります。</p> + +<p>また、それ以外の再描画関数としては以下があります。</p> + +<ul> + <li><code>invalidateCell()</code> は、1 つのセルのみの再描画を要求します。</li> + <li><code>invalidateColumn()</code> は、1 つの列の再描画を要求します。</li> + <li><code>invalidateRange()</code> は、指定範囲の行についての再描画を要求します。</li> + <li><code>invalidate()</code> は、ツリー全体に対する再描画を要求します。</li> +</ul> + +<p>なお、Mozilla は再描画処理をバックグラウンドで平行して行うことはしないため、実際の再描画は呼び出したスクリプトが終了するまでは行われないことに注意してください。</p> + +<p><span id="Scrolling_the_Tree"></span></p> + +<h4 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.82.92.E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB.E3.81.95.E3.81.9B.E3.82.8B" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.82.92.E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB.E3.81.95.E3.81.9B.E3.82.8B">ツリーをスクロールさせる</h4> + +<p>ツリーボックスオブジェクトから、ツリーをスクロールさせることも可能です。 このためには、4 つのメソッドが利用でき、これらは <a href="ja/XUL_Tutorial/Manipulating_Lists#.E3.83.AA.E3.82.B9.E3.83.88.E3.81.AE.E3.82.B9.E3.82.AF.E3.83.AD.E3.83.BC.E3.83.AB">リストボックス</a>にあるものと類似しています。 まず、特定の行へスクロールさせるために <code>scrollToRow()</code> 関数が利用できます。 以下に、簡単な例を示します。</p> + +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_1.xul">表示</a></p> + +<pre><script> +function doScroll(){ + var value = document.getElementById("tbox").value; + var tree = document.getElementById("thetree"); + + var boxobject = tree.boxObject; + boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject); + boxobject.scrollToRow(value); +} +</script> + +<tree id="thetree" rows="4"> + <treecols> + <treecol id="row" label="Row" primary="true" flex="1"/> + </treecols> + <treechildren> + <treeitem label="Row 0"/> + <treeitem label="Row 1"/> + <treeitem label="Row 2"/> + <treeitem label="Row 3"/> + <treeitem label="Row 4"/> + <treeitem label="Row 5"/> + <treeitem label="Row 6"/> + <treeitem label="Row 7"/> + <treeitem label="Row 8"/> + <treeitem label="Row 9"/> + </treechildren> +</tree> + +<hbox align="center"> + <label value="Scroll to row:"/> + <textbox id="tbox"/> + <button label="Scroll" oncommand="doScroll();"/> +</hbox> +</pre> + +<p>この例では、スクロール動作を確認しやすいように、 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> 要素の <code>rows</code> 属性を設定して、同時に 4 行しか表示されないようにしてあるので注意してください。 また、最初の行へスクロールするためには 0 を与える必要があることにも注意してください。</p> + +<p>この、<code>doScroll()</code> 関数では、ツリーボックスオブジェクトの取得を行い、テキスト入力欄への入力値を引数に渡して、<code>scrollToRow()</code> 関数を呼び出しています。 また、この例から確認できるように、ツリーボックスオブジェクトも他のボックスオブジェクトと同様に <a class="external" href="http://www.xulplanet.com/references/objref/BoxObject.html">boxObject</a> プロパティから取得できます。 ただし、取得後に <code>QueryInterface()</code> を呼び出して、汎用のボックスオブジェクトを、専用のツリーボックスオブジェクトにキャストする必要があります。 なお、ツリーボックスオブジェクトにキャストした後でも、汎用のボックスオブジェクトの関数も利用可能です。</p> + +<p>それ以外スクロールのメソッドとしては、 <code>scrollByLines()</code>、<code>scrollByPages()</code>、<code>ensureRowIsVisible()</code> 関数があります。</p> + +<p><code>scrollByLines()</code> 関数は、指定した行数に応じてスクロールを行います。 このとき、正数を指定した場合は下方向に、負数の場合は上方向になります。 次の <code>scrollByPages()</code> 関数は、指定したページ数に応じたスクロールを行います。 この関数は、ツリーにフォーカスがあるときに、利用者が page up または page down キーの操作を行った場合にも自動的に呼び出されます。 なお、この場合の 1 ページはツリーに表示可能な行数と同じになります。 つまり、ツリーに同時に 10 行表示可能なときは、１ページは 10 行分の大きさになるということです。 ツリーが<span style="border-bottom: 1px dashed green;" title="flexible">伸縮可能</span>な場合に、利用者がリサイズを行うと、 ページの大きさもそれに応じて変わることになりますが、 このメソッドを利用すれば、そういった場合にもページサイズを自分で計算をする必要がないため便利です。 もっとも、ツリーボックスオブジェクトには、1 ページの行数を返す <code>getPageLength()</code> 関数もあるため、この計算自体は特段難しくはありません。 上の例では、<code>getPageLength()</code> は 4 を返すことになります。</p> + +<div class="note"> +<p>Firefox 1.0 と Mozilla 1.7、またはそれ以前のバージョンでは、<code>getPageLength()</code> 関数は <code>getPageCount()</code> という名前で呼ばれていました。名前が <code>getPageLength()</code> に変更されたのは、以前の名前では、その関数が 1 ページの行数を返すもので、全体のページ数を返すものではないということがわかりにくかったためです。なお、ページ数が必要な場合は、行の総数を 1 ページの行数で割れば算出できます。</p> +</div> + +<p>最後の <code>ensureRowIsVisible()</code> 関数は、<code>scrollToRow()</code> と同様にスクロールを行いますが、 対象の行が、既に表示中の場合にはスクロールを行わない点が異なっています。</p> + +<p><span id="Cell_Coordinate"></span></p> + +<h3 id=".E3.82.BB.E3.83.AB.E3.81.AE.E5.BA.A7.E6.A8.99" name=".E3.82.BB.E3.83.AB.E3.81.AE.E5.BA.A7.E6.A8.99">セルの座標</h3> + +<p>ツリーボックスオブジェクトが提供している関数の中で最も興味を引くのは、 指定座標がツリーのどの部分に該当するかを調べたり、 逆にツリーの特定の部分が位置している座標を調べたりするための関数群でしょう。</p> + +<ul> + <li><code>getCellAt()</code> 関数は、特定の位置にあるセルを取得します。位置はピクセル単位で指定します。</li> + <li><code>getRowAt()</code> 関数は、特定の位置にある行を取得します。<code>getRowAt()</code> 関数は、座標を表す x と y の 2 つの引数をとります。</li> +</ul> + +<pre>tree.boxObject.getRowAt( 50, 100 ); +</pre> + +<p>この例は、水平位置 50, 垂直位置 100 にある行のインデックスを返すことになります。 もっとも、行はツリーの左端から右端までを常に占めることになるため、 x 座標を指定することに実質意味はありません。</p> + +<div class="note">重要: 座標系は、ツリーが置かれている<span style="border-bottom: 1px dashed green;" title="document">文書</span>の左上隅が原点になります。ツリー要素の左上隅ではないので注意してください。</div> + +<p>なお、文書の左上隅を原点としているため、これらの関数に対しては、 以下の例の <code>getCellAt()</code> 関数の呼び出しのように イベントから取得した座標をそのまま渡してもかまいません。</p> + +<p><span id="%E4%BE%8B_2"><a id="%E4%BE%8B_2"></a><strong>例 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treeboxobject_2.xul">表示</a></p> + +<pre><script> +function updateFields(event){ + var row = {}, column = {}, part = {}; + var tree = document.getElementById("thetree"); + + var boxobject = tree.boxObject; + boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject); + boxobject.getCellAt(event.clientX, event.clientY, row, column, part); + + if (column.value && typeof column.value != "string") + column.value = column.value.id; + + document.getElementById("row").value = row.value; + document.getElementById("column").value = column.value; + document.getElementById("part").value = part.value; +} +</script> + +<tree id="thetree" flex="1" onmousemove="updateFields(event);"> + <treecols> + <treecol id="utensil" label="Utensil" primary="true" flex="1"/> + <treecol id="count" label="Count" flex="1"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="Fork"/> + <treecell label="5"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Knife"/> + <treecell label="2"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="Spoon"/> + <treecell label="8"/> + </treerow> + </treeitem> + </treechildren> +</tree> + +<label value="Row:"/> +<label id="row"/> +<label value="Column:"/> +<label id="column"/> +<label value="Child Type:"/> +<label id="part"/> +</pre> + +<p><code>getCellAt()</code> 関数は、座標の指定用に 2 つと、結果の<span style="border-bottom: 1px dashed green;" title="out parameter">出力用パラメータ</span>として 3 つの、合計 5 つの引数をとります。 この関数では複数の値を返す必要があるため、出力用パラメータを使用して関数から戻り値以外の値を受け取ることになります。 なお、出力用パラメータを使用するインターフェイスはこの他にもいくつかあり、 <a class="external" href="http://www.xulplanet.com/references/objref/">XULPlanet の オブジェクトリファレンス</a> で確認することが可能です。 (リファレンスでは、出力用パラメータは引数の前に「out」というキーワードを付けて区別されています)。 関数を呼び出すとき、こういった出力用パラメータには、空のオブジェクトを渡す必要があり、 呼び出された関数は、渡されたオブジェクトの <code>value</code> プロパティに必要な値を設定して返します。</p> + +<p><code>getCellAt()</code> 関数の 3 つの出力用パラメータには、「行 (<span style="color: green;">row</span>)」と「列 (<span style="color: green;">column</span>)」および「子の種類 (<span style="color: green;">part</span>)」が設定されて戻ります。 この例を実行した場合は、<code>mousemove</code> イベントのイベント座標を引数として渡すため、 <code>row</code> 引数の値には、マウスが重なっている行のインデックスが 設定されることになります。 なお、指定の座標が行とは重なっていない場合には、値として -1 が設定されます。 また、<code>column</code> 引数には、座標が指す列の情報として、 Mozilla 1.8 (<a href="ja/Firefox_1.5">Firefox 1.5</a>) 以降の場合は、対応する列オブジェクト (TreeColumn) が設定されます。 それより古いバージョンの場合は、ツリーの列の識別は、列に設定された id の文字列で行っていましたが、 新しいバージョンからは、個々の列に対応した列オブジェクトが存在しており、ここから列のデータを取得することが可能になっています。</p> + +<p>以下に示すコードにより、上の例はすべてのバージョンで動作するようになっています。</p> + +<pre>if (column.value && typeof column.value != "string") column.value = column.value.id; +</pre> + +<p>column が文字列のときは、 Mozilla 1.7 かそれ以前のバージョンで動作している場合なのでそのままスキップし、 それ以外は、それ以降のバージョンであるため、列オブジェクトから列 id を取得して column に設定することによって、旧バージョンと同等になるようにしています。 もしも、複数のバージョンで動作するコードを書く必要がある場合には、上記のチェックは必ず行わなければなりません。</p> + +<p><code>getCellAt()</code> の最後のパラメータは子の種類、つまり指定した座標はセルのどの部分にあたるかを示す文字列が設定されます。 前の例を実行してマウスをいろいろ動かすと、場所によってラベルが「text」か「cell」に変わることが確認できるはずです。 ここに設定された値が「text」の場合は、その領域はテキストの描画領域であることを、 「cell」の場合は、テキストの周辺部、 例えば通常は行の開閉に使う<span style="border-bottom: 1px dashed green;" title="twisty">ツイスティ</span>が描かれる左側の余白などであることを示しています。 ただし、そこにツイスティがある場合には、値として 「twisty」が設定されます。 これは利用者がツイスティをクリックしたか、行の他の部分をクリックしたかを判別したいときに使用すると便利です。 実際、これは利用者がツイスティをクリックしたときの内部コードでも使用されています。 また、値として「image」が設定される場合は、座標がセル内に置かれた画像にあたることを示しています。 なお、実際のアプリケーション開発では、たいていの場合は、座標が指す点がセルのどの部分にあたるかまでを気にする必要はなく、 単に、座標が指す点が、どの行のどの列に該当するかのみが分かれば十分である場合がほとんどです。</p> + +<p>また、<code>getCellAt()</code> の逆の動作、 つまり指定したセルが位置する座標を取得したい場合は、<code>getCoordsForCellItem()</code> 関数を使用します。 この関数は、以下に示すように 7 つの引数をとります。</p> + +<pre>var x = {}, y = {}, width = {}, height = {}; +if (typeof tree.columns != "undefined") column = tree.columns[column]; +tree.boxObject.getCoordsForCellItem( row, column, part, x, y, width, height ); +</pre> + +<p><code>row</code>、<code>column</code>、<code>part</code> の各引数は、 <code>getCellAt()</code> 関数で返ってくる値と同様のものを指定します。 ここでも、<code>column</code> に設定する値は、動作する Mozilla のバージョンに応じて、文字列と列オブジェクトの適切な方を使用する必要があります。 また part 引数でセル領域の種類を指定することで、テキスト (<span style="color: green;">text</span>)、セル全体 (<span style="color: green;">cell</span>)、 ツイスティ (<span style="color: green;">twisty</span>)、セル内の画像 (<span style="color: green;">image</span>) のいずれかの領域の座標を取得することが可能です。 領域の種類の指定には、<code>getCellAt()</code> 関数から返される値と同じものを使用します。 <code>getCoordsForCellItem()</code> 関数は、取得した x, y 座標の値、および幅と高さの値を、すべて出力用パラメータに返します。</p> + +<p>次のセクションでは、ツリーなどの要素の内容を自動的に設定するために利用可能な RDF について見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Tree_View_Details" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Introduction_to_RDF">次のページ »</a></p> +</div> + +<p> </p> + +<div class="noinclude"> </div> diff --git a/files/ja/archive/mozilla/xul/tutorial/tree_selection/index.html b/files/ja/archive/mozilla/xul/tutorial/tree_selection/index.html new file mode 100644 index 0000000000..0a63e19bca --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/tree_selection/index.html @@ -0,0 +1,137 @@ +--- +title: ツリーでの選択 +slug: Archive/Mozilla/XUL/Tutorial/Tree_Selection +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Selection +--- +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:More_Tree_Features" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Custom_Tree_Views">次のページ »</a></p> +</div></div> + + + +<p>このセクションでは、選択されているツリー項目の取得と選択範囲の設定の方法について説明します。</p> + + + + + +<h2 id="Getting_the_Selected_Tree_Items" name="Getting_the_Selected_Tree_Items">選択されているツリー項目の取得</h2> + + +<p>ツリーにおける各項目 (コンテントツリービューの場合は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> 要素と対応) は、それぞれ個別に選択することが可能です。 ツリーに <code><code id="a-seltype"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code></code> 属性を加えて、値 <code>single</code> を設定することで、利用者は同時に 1 行だけしか選択できなくなります。 この設定をしない限りは、複数の行を一度に選択することが可能で、 選択した項目が連続している必要もありません。 このために、ツリーには項目の選択状態を確認するための関数が、いくつか用意されています。</p> + + + + +<h3 id="Handling_the_Select_Event" name="Handling_the_Select_Event">select イベントの処理</h3> + +<p>まず、項目の選択操作が行われたことを検出する方法について見てみます。 そのためには、<a href="/ja/docs/XUL/Attribute/tree.onselect"><code>onselect()</code></a> イベントハンドラを <code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code> 要素に設定します。 利用者がツリー項目の選択を行ったときに、このイベントハンドラが呼び出されることになります。 また、利用者はカーソルキーを使って選択を変更することも可能です。 このときに項目表示を素早くスクロールさせるためにキーを押し続けると、押されている間はイベントハンドラが呼び出されません。 この挙動はパフォーマンスの面で効果があります。 またこのことから、カーソルが通過した多数の項目でのハイライト処理は、select イベントの発生とは関係なく行われているということも知ることができます。</p> + +<p><code>onselect</code> イベントハンドラの構文は、以下のようになります。</p> + +<pre class="brush:xml"><tree id="treeset" onselect="alert('You selected something!');"> +</pre> + + + +<h3 id="Tree_Indicies" name="Tree_Indicies">ツリーのインデックス</h3> + +<p>ツリーには、<code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/currentIndex">currentIndex</a></span></code></code> プロパティがあり、そのときに選択されている項目のインデックスを取得するために利用できます。 このプロパティは、最初の行が選択されているときには 0 になります。</p> + + +<p>インデックスを数えるとき、子の項目は、親の項目の直後に続けて含めるように数えていきます。 例えば、3 つのトップレベルの項目があり、それぞれが 2 つずつ子を持つとすると、全体では 9 項目になります。 このとき、最初の位置にあたる項目 (インデックスが 0) は、最初のトップレベルの項目になります。 次のインデックスが 1 の項目は、その最初の子になり、2 番目の子のインデックスは 2 になります。 また、2 番目のトップレベルの項目のインデックスは 3 になり、以下同様にして数えていきます。</p> + + +<div class="float-right"> + <img height="305" src="https://mdn.mozillademos.org/files/2400/seltree1.png" width="283"></div> + + +<p>上の画像のツリーでは 8 行が表示されていて、そのうちの 2 行が選択されています。 最初の選択行のインデックスは 4 で、後の選択行のインデックスは 7 になります。 なお、閉じているため表示されていない行は、インデックスにはカウントされません。</p> + + + + +<h3 id="Multiple_Selection" name="Multiple_Selection">複数行の選択</h3> + + +<p>複数項目の選択が可能なツリーで、選択状態の行のリストを取得するためには、もう少し複雑な手順が必要になります。 選択されている行についての情報は、そのツリーに対応するビューの <code>selection</code> プロパティに保持されており、 その実体は <a href="http://xulplanet.com/references/objref/TreeSelection.html">TreeSelection</a> オブジェクトになります。 なお、ビュー側では、このオブジェクト自体の処理を実装する必要はありません。 ツリーにビューが結びつけられるときに、ツリーの方からビューの <code>selection</code> プロパティに自動的に設定されます。 ツリーから選択オブジェクトを取得するときは、 まず、ツリーの <code>view</code> プロパティでビューを取得し、 そのビューの <code>selection</code> プロパティから取得します。 取得した選択オブジェクトのメソッドを利用して、選択されている項目の集合を取得したり、選択状態を変更することが可能です。</p> + + + +<p>複数項目が選択可能なツリーでは、選択された項目が連続している必要はありません。 このため、<code>getRangeCount()</code> と <code>getRangeAt()</code> 関数を使って、連続した選択範囲ごとにブロックとして取得することになります。 最初の関数は、選択範囲のブロックがいくつあるかを返します。 つまり、1 項目だけが選択されている状態なら 1 が返されます。 この返り値の回数だけ <code>getRangeAt()</code> を繰り返し呼び出すコードを記述すれば、全ての選択範囲について先頭と末尾の項目のインデックスを取得することができます。</p> + + + +<p><code>getRangeAt()</code> 関数は、3 つの引数をとります。</p> + +<ul> + <li>最初の引数は、取得したい選択範囲を指定するためのインデックス値です。</li> + <li>2 番目の引数はオブジェクトで、関数によって選択範囲の先頭の項目のインデックスが設定されます。</li> + <li>3 番目の引数はオブジェクトで、関数によって選択範囲の末尾の項目のインデックスが設定されます。</li> +</ul> + + +<h4 id="getRangeAt_Example" name="getRangeAt_Example">getRangeAt の使用例</h4> + +<pre class="brush:js">var start = new Object(); +var end = new Object(); +var numRanges = tree.view.selection.getRangeCount(); + +for (var t = 0; t < numRanges; t++){ + tree.view.selection.getRangeAt(t,start,end); + for (var v = start.value; v <= end.value; v++){ + alert("Item " + v + " is selected."); + } +} +</pre> + + + +<p>まず、「start」と「end」という名前で、2 つのオブジェクトを作成します。 次に、<code>getRangeCount()</code> 関数で選択範囲がいくつあるかを取得し、その数だけ繰り返して全ての選択範囲を処理します。 <code>getRangeAt()</code> 関数は、取得する選択範囲のインデックスと、「start」と「end」オブジェクトを渡して呼び出します。 関数では、先頭と末尾のインデックスを、それぞれ「start」と「end」オブジェクトの「value」プロパティに設定します。 したがって、最初の選択範囲が 3 番目から 7 番目の項目であるなら、<code>start.value</code> は 2 、 <code>end.value</code> は 6 になります。(インデックスは 0 から始まるので 1 減らす必要があります)。 また、この例を実行すると、選択中の項目のインデックスが alert ダイアログで表示されることになります。</p> + + +<p>もし、単に特定の行が選択されているかどうかを知りたいだけならば <code>isSelected()</code> 関数を利用できます。 この関数に、調べたい行のインデックスを引数に渡して呼び出し、 値 true が返されれば、その行は選択されています。</p> + +<pre class="brush:js">alert(tree.view.selection.isSelected(3)); +</pre> + + + + + +<h2 id="Modifying_the_Tree_Selection" name="Modifying_the_Tree_Selection">ツリー項目の選択状態を変更する</h2> + + +<p>選択オブジェクトには、項目の選択状態を変更するために利用可能な関数が、いくつか用意されています。 このうち、最も単純な関数は <a href="/ja/docs/XUL/Method/select"><code>select()</code></a> 関数で、 これはすべての選択を解除した後に、特定の１行を選択状態にします。 例えば、以下のコードは、インデックスが 5 の行を選択します。</p> + +<pre class="brush:js">tree.view.selection.select(5); +</pre> + +<p>単純にツリーの <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/currentIndex">currentIndex</a></span></code></code> プロパティを変更しても、選択されている項目を変更することはできません。 上の例で示したように、<code>selection</code> の <a href="/ja/docs/XUL/Method/select"><code>select()</code></a> 関数を使う必要があります。</p> + +<p>複数行の選択が可能なツリーの場合、 全ての行を選択するために、<a href="/ja/docs/XUL/Method/selectAll"><code>selectAll()</code></a> 関数を使うことができます。 ただし、入れ子になっている行のうち、閉じた状態のコンテナに置かれて表示されていないものは、選択されないことに注意してください。 また、選択を解除するには <a href="/ja/docs/XUL/Method/clearSelection"><code>clearSelection()</code></a> 関数を使います。 さらに、 <a href="/ja/docs/XUL/Method/invertSelection"><code>invertSelection()</code></a> 関数によって項目の選択状態を反転、 つまり、全ての選択されている行の選択解除と、全ての選択されていない行の選択を行うことも可能です。</p> + +<p>特定の範囲にある行のみを選択するためには、<code>rangedSelect()</code> 関数を使うことができます。 この関数は、2 つのインデックスの間にある全ての行を選択します。 以下にインデックスが 2 から 7 の行までを選択する例を示します。 なお、このとき、2 と 7 の行も選択されることを補足しておきます。</p> + + +<pre class="brush:js">tree.view.selection.rangedSelect(2, 7, true); +</pre> + +<p><code>rangedSelect()</code> の最後の引数では、現在の選択内容に追加するかどうかを指示します。 <code>true</code> の場合、現在の選択内容は維持したまま指定の範囲を追加し、 false の場合は、現在の選択内容は解除されます。</p> + +<p>また、<code>clearRange()</code> 関数を使用すれば、 特定の範囲に含まれる行の選択のみを解除することが可能です。 このとき、範囲外の行については選択内容は変化しません。</p> + +<pre class="brush:js">tree.view.selection.clearRange(2, 7); +</pre> + +<p>次のセクションでは、カスタムツリービューの作り方を見ていきます。</p> + + + +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:More_Tree_Features" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Custom_Tree_Views">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/tree_view_details/index.html b/files/ja/archive/mozilla/xul/tutorial/tree_view_details/index.html new file mode 100644 index 0000000000..6cf9cc6e09 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/tree_view_details/index.html @@ -0,0 +1,309 @@ +--- +title: ツリービューの詳細 +slug: Archive/Mozilla/XUL/Tutorial/Tree_View_Details +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_View_Details +--- +<p> </p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Custom_Tree_Views" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Tree_Box_Objects">次のページ »</a></p> +</div> +<p>このセクションでは、高度なツリービューの機能について見ていきます。</p> +<p><span id="Creating_a_Hierarchical_Custom_View"></span></p> +<h3 id=".E9.9A.8E.E5.B1.A4.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90" name=".E9.9A.8E.E5.B1.A4.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E4.BD.9C.E6.88.90">階層カスタムビューの作成</h3> +<p>前のセクションでは、最低限の機能のみを実装した簡単なツリービューを作成しました。 続いては、ビューに実装可能な追加機能について、いくつかを見ていきたいと思います。 今回はカスタムビューを使用して、階層的な項目のセットを作成する方法について学習します。 そのためには各項目について子の有無や開閉状態を管理する必要があり、かなり技巧を要する処理が必要になります。</p> +<p><span id="Nesting_Level"></span></p> +<h4 id=".E5.85.A5.E3.82.8C.E5.AD.90.E3.81.AE.E3.83.AC.E3.83.99.E3.83.AB" name=".E5.85.A5.E3.82.8C.E5.AD.90.E3.81.AE.E3.83.AC.E3.83.99.E3.83.AB">入れ子のレベル</h4> +<p>ツリーでは、全ての行に入れ子のレベルが設定されます。 最上位の行は、レベル 0 で、それらの子のレベルは 1、更にその子のレベルは 2 といったように設定していきます。 ツリーは、ビューに対して、各行の入れ子のレベルを問い合わせるために、<code>getLevel()</code> メソッドを呼び出します。 呼び出されたビューの方では、(表に直接置かれることになる) 最も外側の行については 0 を返し、入れ子になっている行については、外側の行より大きな値を返さなければなりません。 そしてツリーでは、ビューから得られたレベル情報を基にして行の階層構造を把握し、描画を行うことになります。</p> +<p>さらにビューでは、<code>getLevel()</code> メソッドによるレベル情報に加えて、 <code>hasNextSibling()</code> 関数を提供して、引数で指定された行について同レベルで後続行が存在するか否かの判定を行えるようにする必要あります。 この関数は後続行が存在するときに true を返す必要があり、ツリーでは、主にツリーの左端にある入れ子関係を表す線の描画で利用します。</p> +<p>またビューでは、<code>getParentIndex()</code> メソッドによって、引数で指定された行の親の行、 つまり「その行より前にあって、レベル値がその行より小さいものの中で、その行に一番近いもの」を取得できるようにする必要もあります。 ツリーで、行の入れ子を正しく処理させるためには、これらの全てのメソッドをビューに実装する必要があります。</p> +<p><span id="Containers"></span></p> +<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.8A">コンテナ</h4> +<p>加えてビューでは、ツリーが親項目を処理するために利用する関数として、 <code>isContainer()</code>、<code>isContainerEmpty()</code>、<code>isContainerOpen()</code> の 3 つも提供しなければなりません。</p> +<ul> + <li><code>isContainer()</code> メソッドは、行がコンテナ、つまり子を持つことが可能であるかを判定して、コンテナの場合は true を返す必要があります。</li> + <li><code>isContainerEmpty()</code> メソッドは、行が空のコンテナであるとき、例えばディレクトリで中にファイルが存在していない場合などに true を返す必要があります。</li> + <li><code>isContainerOpen()</code> メソッドは、どの項目が開いているか、または閉じているかを調べるために呼び出されます。このため、ビューは項目の開閉について管理しておかなければなりません。ツリーはコンテナの開閉状態を知るために、このメソッドを呼び出します。</li> +</ul> +<p>なお、ツリーは <code>isContainer()</code> メソッドの返り値によって、コンテナでないことが提示された行については、<code>isContainerEmpty()</code> と <code>isContainerOpen()</code> の呼び出しを行わないことを補足しておきます。</p> +<p>コンテナは、コンテナでない行とは異なった表示をされます。 具体的には、(多くのテーマでは) コンテナにはフォルダを表すアイコンが横に表示されます。 また、項目のスタイル付けを行うために、スタイルシートを利用することも可能です。 これによって、行の開閉状態など、いくつかのプロパティに応じたスタイルを設定することができます。 これについては、<a href="ja/XUL_Tutorial/Styling_a_Tree">後のセクション</a>で述べます。 さらに、空でないコンテナには、利用者が子の項目を見るために開閉操作ができるように、<span style="border-bottom: 1px dashed green;" title="twisty">ツイスティ</span> ([+] のアイコン) が表示されます。 なお、空のコンテナにはツイスティは表示されませんが、コンテナとして扱われます。</p> +<p>利用者が行を開くためにツイスティをクリックすると、ツリーはビューの <code>toggleOpenState()</code> メソッドを呼び出します。 呼び出されたビューのメソッドでは、必要な処理によって子の行の取得を行ったあと、 ツリーに表示の更新を要求します。</p> +<p><span id="Review_of_the_Methods"></span></p> +<h4 id=".E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.AE.E3.81.BE.E3.81.A8.E3.82.81" name=".E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.AE.E3.81.BE.E3.81.A8.E3.82.81">メソッドのまとめ</h4> +<p>階層ビューを実装するために必要なメソッドを以下にまとめます。</p> +<pre>getLevel(row) +hasNextSibling(row, afterIndex) +getParentIndex(row) +isContainer(row) +isContainerEmpty(row) +isContainerOpen(row) +toggleOpenClose(row) +</pre> +<p><code>hasNextSibling()</code> 関数の引数 + <i> + afterIndex</i> + は、後続行の有無を調べるとき、最適化のために、その位置以降から調べれば済むように渡されます。 例えば、行にいくつかの子行があって、それらにさらに子行があり、いくつかは開いている様な状況を想像してみてください。 このような場合、ビューの実装によっては次の隣接行のインデックスの算出に時間がかかるかもしれません。 呼び出し元 (ツリー) は、隣接行があるとすれば、どこに存在するかを知っている場合があるため、ビュー側の最適化をサポートするために、その値を渡してくれます。</p> +<p><span id="Example_of_Hierarchical_Custom_View"></span></p> +<h3 id=".E9.9A.8E.E5.B1.A4.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E4.BE.8B" name=".E9.9A.8E.E5.B1.A4.E3.82.AB.E3.82.B9.E3.82.BF.E3.83.A0.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E4.BE.8B">階層カスタムビューの例</h3> +<p>それでは、ここまでに説明したことをまとめて簡単な例を作成してみましょう。 配列に格納されたデータからツリーを構築してみることにします。 このツリーでは、親子の階層は 1 レベルしかサポートしませんが、 追加のレベルをサポートするように拡張することもそれほど困難ではありません。 大きな例なので、部分単位で順番に確認していくことにします。</p> +<pre><window onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<tree id="elementList" flex="1"> + <treecols> + <treecol id="element" label="Element" primary="true" flex="1"/> + </treecols> + <treechildren/> +</tree> + +</window> +</pre> +<p>ここでは、ツリーには <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素にデータを何も含まない単純なものを使用します。 ウィンドウが読み込まれたとき、ツリーを初期化するための <code>init()</code> 関数が呼び出されます。 この関数は、以下に示すようにツリー要素を取得して、その <code>view</code> プロパティに、<code>treeView</code>の名前で作成されるカスタムビューを設定します。</p> +<pre>function init() { + document.getElementById("elementList").view = treeView; +} +</pre> +<p>次に <code>treeView</code> を定義します。 このカスタムツリービューには、多くのメソッドを実装する必要があります。 このうち、重要なものについては個別に見ていくことにします。 まずは、ツリーのデータを保持するために 2 つのデータ構造を定義します。 1 つは、親の項目と属している子の項目の対応を保持し、もう 1 つは表示状態 (<span style="color: green;">visible</span>)になっている項目の配列を保持するものです。 カスタムビューは、どの項目が表示状態にあるかを管理しなければならないことに留意してください。</p> +<pre>var treeView = { + childData : { + Solids: ["Silver", "Gold", "Lead"], + Liquids: ["Mercury"], + Gases: ["Helium", "Nitrogen"] + }, + + visibleData : [ + ["Solids", true, false], + ["Liquids", true, false], + ["Gases", true, false] + ], +</pre> +<p><code>childData</code> は、3 つの親ノードについて、それぞれに対応する子の配列を保持しています。 配列 <code>visibleData</code> は、3 つのトップレベルの親項目のみが表示されるように初期化されています。 この配列には、項目の開閉に応じて項目の追加と削除が行われることになります。 つまり、親の行が開かれたときに、その子項目を <code>childData</code> から取得して <code>visibleData</code> に挿入することになります。 例えば、「Liquids」の行が開かれた場合、<code>childData</code> から対応する配列が取得されて、 そこに含まれる「Mercury」 1 つだけが <code>visibleData</code> の「Liquids」と「Gases」の間に挿入され、 配列のサイズは 1 つ増えます。 また、<code>visibleData</code> の各行にある 2 つの真偽値は、順に行がコンテナであるかどうかと開かれているかどうかを表します。 このため、挿入される子項目については、両方とも false を設定することになります。</p> +<p><span id="Implement_the_Tree_View_Interface"></span></p> +<h4 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.A5.E3.83.BC.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.82.A4.E3.82.B9.E3.81.AE.E5.AE.9F.E8.A3.85" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.A5.E3.83.BC.E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.82.A4.E3.82.B9.E3.81.AE.E5.AE.9F.E8.A3.85">ツリービューインターフェイスの実装</h4> +<p>続いて、ツリービューのインターフェイスを実装する必要があります。 まずは単純なものをまとめて示します。</p> +<pre> treeBox: null, + selection: null, + + get rowCount() { return this.visibleData.length; }, + setTree: function(treeBox) { this.treeBox = treeBox; }, + getCellText: function(idx, column) { return this.visibleData[idx][0]; }, + isContainer: function(idx) { return this.visibleData[idx][1]; }, + isContainerOpen: function(idx) { return this.visibleData[idx][2]; }, + isContainerEmpty: function(idx) { return false; }, + isSeparator: function(idx) { return false; }, + isSorted: function() { return false; }, + isEditable: function(idx, column) { return false; }, +</pre> +<p><code>rowCount()</code> 関数は、配列 <code>visibleData</code> の長さを返します。 これは全行数ではなく、そのとき表示状態になっている行数を返す必要があることに注意してください。 この例の場合、初期状態では 3 項目のみが表示されているため、<code>rowCount()</code> は 3 を返す必要があり、隠されている 6 項目を数えてはいけません。</p> +<p><code>setTree()</code> 関数は、ビューにツリーのボックスオブジェクトを設定するために呼び出されます。 ツリーボックスオブジェクトは、ボックスオブジェクトの一種で、 ツリー特有の仕様に対応するために拡張された、ツリー専用のボックスオブジェクトです。 これについての詳細は、次のセクションで説明する予定ですが、主にツリーの描画を補助するために使用されます。 この例の場合、項目の追加や削除が行われたときにツリーを再描画するために、ボックスオブジェクトの関数を 1 つだけ必要としています。</p> +<p>また、<code>getCellText()</code>、<code>isContainer()</code>、<code>isContainerOpen()</code> 関数は、 単に配列 <code>visibleData</code> から対応する値を返すだけです。 残りの関数については、ここでは不要な機能なので、単に false を返しています。 なお、子を持たないコンテナ行がある場合、<code>isContainerEmpty()</code> 関数がそれらの行に対して true を返すように実装しなければなりません。</p> +<p>次は <code>getParentIndex()</code> 関数です。</p> +<pre> getParentIndex: function(idx) { + if (this.isContainer(idx)) return -1; + for (var t = idx - 1; t >= 0 ; t--) { + if (this.isContainer(t)) return t; + } + }, +</pre> +<p><code>getParentIndex()</code> は、引数 (インデックス) で指定された行の親を探す必要があります。 今回の単純な例では、レベルは 2 つだけで、コンテナは親を持たないことがわかっているため、コンテナの場合には、即 -1 を返しています。 それ以外の場合は、行を逆方向に走査してコンテナであるものを探し出します。</p> +<p>次は <code>getLevel()</code> 関数です。</p> +<pre> getLevel: function(idx) { + if (this.isContainer(idx)) return 0; + return 1; + }, +</pre> +<p><code>getLevel()</code> 関数も、 今回の例の「レベルは 2 つだけで、コンテナは親を持たない」ことと 「トップレベルにはコンテナのみが置かれている」ことを前提にして単純に実装しています。 つまり、コンテナ行に対しては 0 で、そうでないものに対しては 1 を返すだけです。 もし入れ子レベルを１つ増やす場合、後者の行のレベルは 2 になる可能性もあり、複雑な実装が必要になってきます。</p> +<p>次は <code>hasNextSibling()</code> 関数です。</p> +<pre> hasNextSibling: function(idx, after) { + var thisLevel = this.getLevel(idx); + for (var t = idx + 1; t < this.visibleData.length; t++) { + var nextLevel = this.getLevel(t) + if (nextLevel == thisLevel) return true; + else if (nextLevel < thisLevel) return false; + } + }, +</pre> +<p><code>hasNextSibling()</code> 関数は、引数で指定された行と同レベルの後続行が存在するときに true を返す必要があります。 上のコードは、<span style="border-bottom: 1px dashed green;" title="brute force">力技</span>、 つまり単に次々に行を調べていって同レベルの行が見つかれば true を、 一度でもより小さいレベルの行が見つかれば false を返す方法で実装しています。 今回の単純な例では、このやり方でも十分ですが、より多数のデータを扱うツリーの場合には、 後続の隣接行の有無を調べるために、もっと最適化された方法を検討することになるでしょう。</p> +<p><span id="Opening_or_Closing_a_Row"></span></p> +<h4 id=".E8.A1.8C.E3.81.AE.E9.96.8B.E9.96.89.E5.87.A6.E7.90.86" name=".E8.A1.8C.E3.81.AE.E9.96.8B.E9.96.89.E5.87.A6.E7.90.86">行の開閉処理</h4> +<p>最後に説明する関数は、<code>toggleOpenState()</code> で、今回の例の中で、最も複雑なものになります。 行の開閉が行われたときには、配列 <code>visibleData</code> の内容を更新する必要があるからです。</p> +<pre> toggleOpenState: function(idx) { + var item = this.visibleData[idx]; + if (!item[1]) return; + + if (item[2]) { + item[2] = false; + + var thisLevel = this.getLevel(idx); + var deletecount = 0; + for (var t = idx + 1; t < this.visibleData.length; t++) { + if (this.getLevel(t) > thisLevel) deletecount++; + else break; + } + if (deletecount) { + this.visibleData.splice(idx + 1, deletecount); + this.treeBox.rowCountChanged(idx + 1, -deletecount); + } + } + else { + item[2] = true; + + var label = this.visibleData[idx][0]; + var toinsert = this.childData[label]; + for (var i = 0; i < toinsert.length; i++) { + this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]); + } + this.treeBox.rowCountChanged(idx + 1, toinsert.length); + } + }, +</pre> +<p>まず、行がコンテナかどうかをチェックする必要があります。 コンテナでない場合は開閉できないので、そのまま return で戻ります。 次に、 <code>item</code> 配列の 3 番目の値 (配列のインデックス値は 2) で、行の開閉状態を保持しているため、この値を判定して処理の分岐を行います。 最初の方 (if ブロック) が行を閉じる処理で、後の方 (else ブロック) が開く処理になります。 それぞれのコードをブロック単位で確認していきますが、 順番は入れ替えて、まず行を開く処理を行う 2 番目のブロックから見ていくことにします。</p> +<pre> item[2] = true; + + var label = this.visibleData[idx][0]; + var toinsert = this.childData[label]; + for (var i = 0; i < toinsert.length; i++) { + this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]); + } + this.treeBox.rowCountChanged(idx + 1, toinsert.length); +</pre> +<p>最初に、<code>item</code> 配列が保持する行の開閉状態を true にしています。 これは、次回 <code>toggleOpenState()</code> 関数が呼び出されたときには、 この処理ではなく行を閉じる処理を行わせるために必要です。 次に、今回開く行について <code>childData</code> からデータを取得します。 取得結果は <code>toinsert</code> に代入され、これは子行の配列のひとつ、例えば 「Solids」が開かれる場合は <code>["Silver", "Gold", "Lead"]</code> になります。 続いて、<code>visibleData</code> 配列に <code>splice()</code> 関数を利用して各項目に対応する新しい行を挿入していきます。 行「Solids」の場合は、3 つの項目が挿入されることになります。</p> +<p>最後に、ツリーボックスの <code>rowCountChanged()</code> 関数を呼び出す必要があります。 この <code>treeBox</code> には、既に <code>setTree()</code> 関数によってツリーボックスオブジェクトが設定されていることを思い出してください。 ツリーボックスオブジェクトはツリーによって作成されて、アプリケーション側に提供されるものであるため、 アプリケーションのコードからそれらの関数を呼び出すことが可能です。 ここでは <code>rowCountChanged()</code> 関数を使って、元になるデータにいくつかの行が追加されたことを、ツリーに対して通知しています。 それを受けて、ツリーでは必要な箇所の再描画を行い、その結果コンテナ内に子行が表示されることになります。 このとき、上で実装した <code>getLevel()</code> や <code>isContainer()</code> などの種々の関数が、 ツリーに描画する内容の確定に利用するために、ツリーから呼び出されることになります。</p> +<p>この <code>rowCountChanged()</code> 関数は、引数として、行の挿入開始位置のインデックスと、挿入される行の総数の 2 つをとります。 上のコードでは、開始行は <code>idx</code> の値に１を加えたもので、その親の最初の子行の位置になります。 ツリーでは、この情報を利用して、適切な行数分の空間を作成するために後続の行を下方にずらします。 このため正しい数値を渡すようにしないと、ツリーの再描画が正しく行われなかったり、必要以上の行数の描画が行われてしまう可能性があります。</p> +<p>以下は、行が閉じられたときに行の削除を行うためのコードです。</p> +<pre> item[2] = false; + + var thisLevel = this.getLevel(idx); + var deletecount = 0; + for (var t = idx + 1; t < this.visibleData.length; t++) { + if (this.getLevel(t) > thisLevel) deletecount++; + else break; + } + if (deletecount) { + this.visibleData.splice(idx + 1, deletecount); + this.treeBox.rowCountChanged(idx + 1, -deletecount); + } +</pre> +<p>まず、<code>item</code> 配列の開閉状態を false にして、閉じていることにします。 次に、各行を同レベルの行に遭遇するまで順に走査していきます。 そのときスキップした、よりレベル値の大きい行は削除する必要がありますが、見つかった同レベルの行は次のコンテナであるため、削除対象ではありません。</p> +<p>最後に <code>splice()</code> 関数を使用して配列 <code>visibleData</code> から行を削除し、<code>rowCountChanged()</code> 関数を呼び出してツリーの再描画を要求します。 なお、行を削除する場合には、<code>rowCountChanged()</code> の 2 番目の引数に削除した行数を負の値で渡す必要があります。</p> +<p><span id="Complete_Example"></span></p> +<h4 id=".E5.AE.8C.E5.85.A8.E3.81.AA.E4.BE.8B" name=".E5.AE.8C.E5.85.A8.E3.81.AA.E4.BE.8B">完全な例</h4> +<p>他にもまだいくつかの実装可能なビューの関数はありますが、 この例では必要無いため、何もしない関数を作成しておきます。 それらを最後の方に加えた完全な例を以下に示します。</p> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> + +<window onload="init();" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<tree id="elementList" flex="1"> + <treecols> + <treecol id="element" label="Element" primary="true" flex="1"/> + </treecols> + <treechildren/> +</tree> + +<script> +<![CDATA[ + +var treeView = { + childData : { + Solids: ["Silver", "Gold", "Lead"], + Liquids: ["Mercury"], + Gases: ["Helium", "Nitrogen"] + }, + + visibleData : [ + ["Solids", true, false], + ["Liquids", true, false], + ["Gases", true, false] + ], + + treeBox: null, + selection: null, + + get rowCount() { return this.visibleData.length; }, + setTree: function(treeBox) { this.treeBox = treeBox; }, + getCellText: function(idx, column) { return this.visibleData[idx][0]; }, + isContainer: function(idx) { return this.visibleData[idx][1]; }, + isContainerOpen: function(idx) { return this.visibleData[idx][2]; }, + isContainerEmpty: function(idx) { return false; }, + isSeparator: function(idx) { return false; }, + isSorted: function() { return false; }, + isEditable: function(idx, column) { return false; }, + + getParentIndex: function(idx) { + if (this.isContainer(idx)) return -1; + for (var t = idx - 1; t >= 0 ; t--) { + if (this.isContainer(t)) return t; + } + }, + getLevel: function(idx) { + if (this.isContainer(idx)) return 0; + return 1; + }, + hasNextSibling: function(idx, after) { + var thisLevel = this.getLevel(idx); + for (var t = idx + 1; t < this.visibleData.length; t++) { + var nextLevel = this.getLevel(t) + if (nextLevel == thisLevel) return true; + else if (nextLevel < thisLevel) return false; + } + }, + toggleOpenState: function(idx) { + var item = this.visibleData[idx]; + if (!item[1]) return; + + if (item[2]) { + item[2] = false; + + var thisLevel = this.getLevel(idx); + var deletecount = 0; + for (var t = idx + 1; t < this.visibleData.length; t++) { + if (this.getLevel(t) > thisLevel) deletecount++; + else break; + } + if (deletecount) { + this.visibleData.splice(idx + 1, deletecount); + this.treeBox.rowCountChanged(idx + 1, -deletecount); + } + } + else { + item[2] = true; + + var label = this.visibleData[idx][0]; + var toinsert = this.childData[label]; + for (var i = 0; i < toinsert.length; i++) { + this.visibleData.splice(idx + i + 1, 0, [toinsert[i], false]); + } + this.treeBox.rowCountChanged(idx + 1, toinsert.length); + } + }, + + getImageSrc: function(idx, column) {}, + getProgressMode : function(idx,column) {}, + getCellValue: function(idx, column) {}, + cycleHeader: function(col, elem) {}, + selectionChanged: function() {}, + cycleCell: function(idx, column) {}, + performAction: function(action) {}, + performActionOnCell: function(action, index, column) {}, + getRowProperties: function(idx, column, prop) {}, + getCellProperties: function(idx, column, prop) {}, + getColumnProperties: function(column, element, prop) {}, +}; + +function init() { + document.getElementById("elementList").view = treeView; +} + +]]></script> + +</window> +</pre> +<p>次のセクションでは、ツリーボックスオブジェクトの詳細を見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Custom_Tree_Views" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Tree_Box_Objects">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/trees/index.html b/files/ja/archive/mozilla/xul/tutorial/trees/index.html new file mode 100644 index 0000000000..0590085a34 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/trees/index.html @@ -0,0 +1,199 @@ +--- +title: ツリー +slug: Archive/Mozilla/XUL/Tutorial/Trees +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Trees +--- +<div class="prevnext" style="text-align: right;"> +<p><a href="/ja/docs/XUL_Tutorial:XPCOM_Examples" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Tree_Features">次のページ »</a></p> +</div> + +<p>XUL では、ツリーを利用して表や階層リストを作成する方法を提供しています。</p> + + + +<h3 id=".E3.83.84.E3.83.AA.E3.83.BC" name=".E3.83.84.E3.83.AA.E3.83.BC">ツリー</h3> + +<p>XUL の要素の中で最も複雑ものの 1 つに、<a href="ja/XUL/tree">ツリー</a>があります。 ツリーは、テキスト行を複数の列に分けて表示するために使用されます。 このとき、行はフラットに並べたり、階層を作って整理したりすることができます。 ツリーでは、利用者による行の並べ替えや、個々の列の非表示化、表示幅の変更を行う操作も可能です。 ツリーの例としては、メールアプリケーションのメッセージリストや Mozilla のブックマークウィンドウなどがあります。</p> + +<p>いくつかの点で、ツリーは<a href="ja/XUL/listbox">リストボックス</a>と類似しています。 どちらも複数の行と列を持った表を作成するのに利用でき、 どちらも各列に見出しをつけることができます。 また、相違点もあります。 行の入れ子は、ツリーでのみサポートされ、リストボックスではできません。 逆に、中に含むことができる内容については、リストボックスでは任意の種類のものが可能ですが、ツリーではテキストと画像のみに限られます。</p> + +<p>ツリーは 2 つの部分、「列のセット」と「本体」から構成されています。</p> + +<ul> + <li>列のセットは、一連の <code><a href="ja/XUL/treecol">treecol</a></code> 要素で定義されます。個々の <code>treecol</code> は 1 つの列に対応しており、ツリーの上端に見出しとして表示されることになります。</li> + <li>ツリー本体は、ツリーに表示されるデータを保持するもので、<code><a href="ja/XUL/treechildren">treechildren</a></code> タグによって作成されます。</li> +</ul> + +<p>ツリーは、その本体が単一のウィジェットから構成されていて、それがツリー内のすべてのデータの描画を行います。 これはツリー独特の構造で、 例えばリストボックスの場合は、本体は <code><a href="ja/XUL/listitem">listitem</a></code> と <code><a href="ja/XUL/listcell">listcell</a></code> タグで指定される個々の行の集合として構成されています。 このために、ツリーでは、表示される全てのデータは、ツリービューと呼ばれる別のオブジェクトから供給されます。 具体的には、セルを実際に表示するタイミングで、ツリーのウィジェットからツリービューへ表示する内容について問い合わせが行われ、その結果がツリーへ描画されることになります。 ツリーは、実際に表示が必要な行の情報のみをビューへ問い合わせる点で効率的です。 これにより、表示中の内容に必要なデータのみを読み込むようにビューを最適化することができます。 極端な話、たとえツリーに数千の行があったとしても、ほとんどの行は表示エリアの境界の外にあって、スクロールさせない限りは見えないため、ツリーでは情報を保持しません。 このため、ツリーは行数がどれだけ増加しても、パフォーマンスの問題が発生しないスケーラブルなオブジェクトであるといえます。 ただし、ビューオブジェクトのパフォーマンスは、別途考慮する必要があります。</p> + +<p>ツリービューとは、<a href="ja/NsITreeView">nsITreeView</a> インターフェイスを実装したオブジェクトのことです。 このインターフェイスには 30 のプロパティと関数があるので、ツリービューを作成するためには、それらを適宜実装していくことになります。 これらの関数は、ツリーオブジェクトから、対応するデータや状態を取得するために必要に応じて呼び出されます。 例えば、<code>getCellText()</code> 関数は、ツリー中の個別のセルに対してつけるべきラベルを取得するときに呼び出されます。</p> + +<p>ツリービューを使用する利点としては、 対象のデータを、そのデータにおける最適な方法で保持できることや、データをその行の表示に応じてオンデマンドで読み込めることがあります。 これらによって、ツリーを利用する場合に高い柔軟性を得ることができるわけです。</p> + +<p>単純なツリーの場合は特にそうなのですが、ツリーごとに毎回 30 ものプロパティやメソッドを持ったツリービューを実装するのは、当然ながら非常に面倒な作業になります。 幸い、XUL には、面倒な作業のほとんどが済んでいるビューの実装が 2 つ、組み込みで用意されています。 ほとんどのツリー、特に初めてツリーを使うような場合には、この組み込みビューのどちらかを利用することになると思います。 また、必要ならビューを完全にスクラッチから実装することもできます。 その場合は、データを<a href="ja/A_re-introduction_to_JavaScript#Arrays">配列</a>や JavaScript のデータ構造として保持するか、あるいは XML ファイルから読み込むことを検討するとよいかもしれません。</p> + +<p>ツリーの本体全部が単一のウィジェットであるため、 通常のやり方では、個別に行や列のスタイルを変えることはできません。 これは、<a href="ja/XUL_Tutorial/List_Controls#.E8.A4.87.E6.95.B0.E5.88.97.E3.82.92.E6.8C.81.E3.81.A4.E3.83.AA.E3.82.B9.E3.83.88.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9">リストボックス</a>のように、 個々のセルを表示するための要素が存在しないことに起因しています。 子要素を持つ代わりに、ツリー本体のすべての描画は、ビューから供給されるデータを元に行われることになります。 これは重要な点なのですが、多くの XUL 開発者がこの側面を理解するのに難儀しています。 なお、ツリーのセルの外観を変更するためには、ビュー側でいくつかのキーワードを行と列に関連付けるようにする必要があります。 そして特別な CSS 構文を使って、ツリー本体の構成部分でキーワードと対応するものについてスタイルを設定します。 これは、ある意味 CSS クラスを利用した場合と似ています。 ツリーのスタイル付けの詳細については、<a href="ja/XUL_Tutorial/Styling_a_Tree">後のセクション</a>で説明する予定です。</p> + + + +<h3 id=".E3.83.84.E3.83.AA.E3.83.BC.E9.96.A2.E9.80.A3.E3.81.AE.E8.A6.81.E7.B4.A0" name=".E3.83.84.E3.83.AA.E3.83.BC.E9.96.A2.E9.80.A3.E3.81.AE.E8.A6.81.E7.B4.A0">ツリー関連の要素</h3> + +<p>詳細はこの後に説明しますが、 ツリーは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> 要素で作成することが可能です。 また、それ以外にツリーに表示される列の定義に関する要素が 2 つあります。</p> + +<dl> + <dt><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></dt> + <dd>ツリーの最も外側の要素です。</dd> + <dt><code><a href="/ja/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></dt> + <dd><code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素を<span style="border-bottom: 1px dashed green;" title="placeholder">置くための場所</span>です。</dd> + <dt><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></dt> + <dd>ツリーの 1 つの列を宣言します。この要素には、列内のデータをどのような順で並べるかや、ユーザが列幅を変えられるかといった追加情報も指定できます。また <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性は常に指定しておく必要があります。Mozilla 1.8 以降で必須ではなくなりましたが、以前の Mozilla は列を並べ替えたり隠したりする際に <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> によって列を識別したため必須でした。なお必須ではなくとも、列に <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> を指定しておくことは良い考えだと思います。</dd> + <dt><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></dt> + <dd>表示される個々の行や列を含んだツリーの本体です。</dd> +</dl> + + + +<h5 id="2_.E3.81.A4.E3.81.AE.E5.88.97.E3.82.92.E6.8C.81.E3.81.A4.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E4.BE.8B" name="2_.E3.81.A4.E3.81.AE.E5.88.97.E3.82.92.E6.8C.81.E3.81.A4.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E4.BE.8B">2 つの列を持つツリーの例</h5> + +<p>以下に 2 つの列を持つツリーの例を示します。</p> + +<p><span id="%E4%BE%8B1"><a id="%E4%BE%8B1"></a><strong>例1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_1.xul">表示</a></p> + +<pre><tree flex="1"> + + <treecols> + <treecol id="nameColumn" label="Name" flex="1"/> + <treecol id="addressColumn" label="Address" flex="2"/> + </treecols> + + <treechildren/> + +</tree> +</pre> + +<p>まず、表全体が <code><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> 要素で囲われています。 これにより、表またはツリーとして使用される部分を 1 つの要素として宣言します。 また、HTML のテーブルと同様に、ツリー内のデータは、常に行に基づいて構成されます。 そのため、列は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></code> タグの中にまとめて指定することになります。</p> + +<p>ツリーには、いくつ列を追加してもかまいません。 <a href="ja/XUL_Tutorial/List_Controls">リストボックス</a>と同様に、ツリーでも列の見出し行が表示されます。 また、利用者が個々の列について表示の有無を設定できるように、ツリーの右上隅にドロップダウンメニューが表示されます。 個々の列は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素により作成することができ、 見出しに表示するラベルは、この要素の <code>label</code> 属性を使用して設定できます。 また、ツリーが <span style="border-bottom: 1px dashed green;" title="flexible">伸縮可能</span>な場合、列もツリーに応じて伸縮できるように、伸縮可能に設定したいはずです。 この例では、<code>flex</code> 属性の比率に従って、2 番目の列の幅は、最初の列のおおよそ 2 倍になります。 なお、ツリーでは全ての列は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecols" title="treecols">treecols</a></code></code> 要素内に直接置く必要があります。</p> + +<p>この例では、ツリーにデータを与えるためのビューが指定されていないため、 列の見出しと空のツリー本体以外は見ることはできません。 さらに表示するべきデータがないため、本体部分を見るためには、ウィンドウをリサイズする必要があります。 このツリーは伸縮可能であるため、本体も利用可能なスペースに応じて伸張します。 ツリーを伸縮可能に設定することは、ごく普通に行われています。 ツリーのデータは、表示されている情報の中でも最も重要であることが多いため、 リサイズに応じてツリーが大きくなるようにするのは有意義なことが多いからです。 しかしながら、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> 要素に <code><code id="a-rows"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> 属性を設定することで、 ツリー内に、特定の行数のみを表示させるようにすることも可能です。 なお、この属性はユーザインターフェイスにおいて何行表示させるかを指定するものであり、データが何行あるかを指定するものではありません。 全体の行数はツリービューによって与えられます。 データの行数が表示行数を超える場合、利用者が残りの部分を閲覧できるようにスクロールバーが表示されます。 <code><code id="a-rows"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> 属性を指定しない場合、デフォルト値は 0 なので、データがないときは、なにも表示されません。 この場合も、ツリーを伸縮可能にしておくことで、利用できるスペースがあるときには、あわせて大きくなるようにできるため <code><code id="a-rows"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/rows">rows</a></code></code> 属性を明示的に設定する必要はありません。</p> + + + +<h3 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.A5.E3.83.BC" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.A5.E3.83.BC">コンテントツリービュー</h3> + +<p>ツリーに表示するデータは、XULタグではなくビューから与えられると述べたところですが、 偶然にも、組み込みのツリービューに、XUL タグからデータを取り出すような仕組みになっているものがあります。 少し混乱するかもしれませんが、 つまり組み込みビューのうちの 1 つでは、ツリーに供給するデータに関する情報を指定するために、いくつかのタグを使用できるということです。</p> + +<dl> + <dt><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></dt> + <dd>ツリーの親となる単独の行と、その子孫を含んでいます。この要素は、利用者に選択されうる項目としても働きます。<code>treeitem</code> タグは、選択時に子孫も含めて選択されるように、行全体を囲みます。</dd> + <dt><code><a href="/ja/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></dt> + <dd>ツリー中の 1 つの行に対応します。<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> タグの中に置く必要があります。</dd> + <dt><code><a href="/ja/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></dt> + <dd>ツリー中の 1 つのセルに対応します。この要素は、<code>treerow</code> 要素の中に置きます。</dd> +</dl> + +<p>便利なことに、これらのタグは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> タグの中に直接置くことができます。 これらのタグを、上に記述した順で入れ子に置いていくことで、ツリー本体に表示するデータを定義することができます。 この場合、ツリーは組み込みのツリービューを利用することになります。 このツリービューは、コンテントツリービューと呼ばれ、これらの要素で指定されたラベルと値をツリーのデータとして供給します。 つまり、ツリーで行の表示が必要になったとき、 ツリーはコンテントツリービューの <code>getCellText()</code> 関数を呼び出してセルのラベルを問い合わせ、 該当する <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> 要素のラベルとして設定されているデータを取得することになります。</p> + +<p>なお、これらの 3 つの要素は、直接表示されることはなく、 ビューが供給するデータの取得元としてのみ使用されます。 したがって、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> 要素と、その関連要素に対して適用可能な属性は、ほんの一握りです。 具体的には、<code><code id="a-style"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/style">style</a></code></code> 属性などの CSS プロパティを利用して外観を変えたり、 伸縮可能性 (<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code>) や、方向 (<code><code id="a-orient"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/orient">orient</a></code></code>) などボックス関連の機能を利用するようなことはできません。</p> + +<p>実際、ツリー固有の属性を別にすれば、 有効な属性は、セルのテキストラベルを設定するための <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性と、画像を設定する <code><code id="a-src"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code></code> 属性のみです。 なお、ツリーには、スタイルを付けたり、他の機能についての設定するために特別な方法が用意されており、 それらについては、<a href="ja/XUL_Tutorial/Styling_a_Tree">後のセクション</a>で説明する予定です。</p> + +<p>また、イベントについても <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> や、その子要素へは送信されず、全て <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素へ送信されます。</p> + +<p><code>treeitem</code> 系の要素が、他の XUL 要素と異質であることが、XUL 開発者を混乱させる共通の原因になっています。 コンテントツリービューの本質はビューであり、単にツリーに供給するセルのデータをツリー内に置かれたタグから取得しているだけに過ぎません。 したがって、別の種類のビューを利用する場合、データは他のところから供給されるため、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> 系の要素はまったく必要ありません。</p> + + + +<h4 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E4.BE.8B" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.84.E3.83.AA.E3.83.BC.E3.83.93.E3.83.A5.E3.83.BC.E3.81.AE.E4.BE.8B">コンテントツリービューの例</h4> + +<p>それでは、コンテントツリービューを利用して、複数の列を持つ単純なツリーの作り方を見てみましょう。 メールメッセージのリストとして使えるものを作成してみることにします。 したがって、このリストには、送信者 (<span style="color: green;">Sender</span>) や題名 (<span style="color: green;">Subject</span>) など、複数の列を作成します。</p> + +<p><span id="%E4%BE%8B2"><a id="%E4%BE%8B2"></a><strong>例2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/ex_trees_2.xul">表示</a></p> + +<pre><tree flex="1"> + + <treecols> + <treecol id="sender" label="Sender" flex="1"/> + <treecol id="subject" label="Subject" flex="2"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="joe@somewhere.com"/> + <treecell label="Top secret plans"/> + </treerow> + </treeitem> + <treeitem> + <treerow> + <treecell label="mel@whereever.com"/> + <treecell label="Let's do lunch"/> + </treerow> + </treeitem> + </treechildren> + +</tree> +</pre> + +<div class="float-right"></div> + +<p>画像から明らかなように、2 つの行 (<span style="color: green;">row</span>) を持ったツリーが作成されています。</p> + +<p>また、このツリーは 2 つの列 (<span style="color: green;">column</span>) を持ち、 2 列目は 1 列目よりも幅が広くとられています。 通常、列は伸縮可能にすると思いますが、<code><code id="a-width"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/width">width</a></code></code> 属性により明示的に幅を指定することも可能です。 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素は、ツリーの列の数と同じ数を置く必要があります。 そうしないと、おかしな挙動が発生するかもしれません。</p> + +<p>見出し行は自動的に生成されます。 また、右上隅のボタンで、列を隠したり表示させたりすることができます。 このボタンを表示したくない場合は、ツリーに対して <code><code id="a-hidecolumnpicker"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/hidecolumnpicker">hidecolumnpicker</a></code></code> 属性を置いて、値 <code>true</code> を設定します。 このボタンを非表示にすることで、利用者が列を隠すことを抑止できます。</p> + +<p>各列に <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性を設定するようにしてください。 そうしないと、Mozilla の古いバージョンで、列の表示と非表示の切り替えが動作しません。</p> + +<p><code>treechildren</code> 要素は、すべての行を囲むように置きます。 その中には個々の行が置かれており、場合によって入れ子の行を含んでいることがあります。 単純なツリーでは、各行は <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> と <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treerow" title="treerow">treerow</a></code></code> 要素からなっています。 <code>treerow</code> 要素は、1 つの行に含まれるすべてのセルを囲み、<code>treeitem</code> 要素は、1 つの行と、そのすべての子孫を囲みます。 なお、入れ子になった行を持つツリーについては、<a href="ja/XUL_Tutorial/More_Tree_Features">次のセクション</a>で説明します。</p> + +<p>行の中には、個々のツリーのセルを置きます。 これらのセルは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> 要素を使用して作成します。 セルのテキストは <code>label</code> 属性で与えます。 ツリーに表示されるときは、その行で最初の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> 要素が、最初の列に表示される内容と対応し、 2 番目の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecell" title="treecell">treecell</a></code></code> 要素が 2 列目に表示される内容に対応するといったように、順に対応しています。</p> + +<p>利用者は、マウスクリックかキーボードからのハイライト操作によって、ツリーの行を選択することができます。 シフトキーかコントロールキーを押した状態で、追加したい行をクリックすることで、複数の項目を選択することも可能です。 複数選択を無効にしたい場合は、ツリーに <code><code id="a-seltype"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/seltype">seltype</a></code></code> 属性を置いて、値 を <code>single</code> に設定します。 これにより、利用者は 1 度に 1 行しか選択できないようになります。</p> + +<div class="highlight"> + + +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.83.84.E3.83.AA.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AB.E3.83.84.E3.83.AA.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0">ファイル検索ダイアログにツリーを追加</h4> + +<p>それでは、ファイル検索ダイアログに検索結果の表示のためにツリーを加えてみましょう。 このツリーでは、コンテントツリービューを使用します。 <a href="ja/XUL_Tutorial/Splitters">スプリッター</a>のときに、当座の間に合わせとして、<a href="ja/XUL_Tutorial/Content_Panels">iframe</a> を置いた場所に、次のコードを加える必要があります。</p> + +<pre class="eval"><span class="highlightred"><tree flex="1"> + <treecols> + <treecol id="name" label="Filename" flex="1"/> + <treecol id="location" label="Location" flex="2"/> + <treecol id="size" label="Size" flex="1"/> + </treecols> + + <treechildren> + <treeitem> + <treerow> + <treecell label="mozilla"/> + <treecell label="/usr/local"/> + <treecell label="2520 bytes"/> + </treerow> + </treeitem> + </treechildren> +</tree></span> + +<splitter collapse="before" resizeafter="grow"/> +</pre> + +<p>追加したツリーに「ファイル名」「場所」「サイズ」の 3 つの列が加えられています。 2 列目の幅は、2 倍の伸縮性を設定しているので、2 倍広く表示されます。 ここでは、行の情報は、とりあえず行を持った表の外観を確認するために、1 行だけを加えてあります。 現実の実装では、行の情報は、検索を実行するスクリプトによって動的に追加されるか、 検索結果のデータを保持するカスタムビューを作成することになるでしょう。</p> + +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-trees.xul">表示</a></p> +</div> + +<p>次のセクションでは、さらに高度なツリーの作成について学びます。</p> + +<div class="prevnext" style="text-align: right;"> +<p><a href="/ja/docs/XUL_Tutorial:XPCOM_Examples" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Tree_Features">次のページ »</a></p> +</div> + + + +<div class="noinclude"></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/trees_and_templates/index.html b/files/ja/archive/mozilla/xul/tutorial/trees_and_templates/index.html new file mode 100644 index 0000000000..7522ebb935 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/trees_and_templates/index.html @@ -0,0 +1,169 @@ +--- +title: ツリーとテンプレート +slug: Archive/Mozilla/XUL/Tutorial/Trees_and_Templates +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Trees_and_Templates +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Templates" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:RDF_Datasources">次のページ »</a></p> +</div> +<p>このセクションでは、テンプレートからツリーを生成する方法について説明します。 +</p><p><span id="Adding_Datasources_to_Trees"></span> +</p> +<h3 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AB.E3.83.87.E3.83.BC.E3.82.BF.E3.82.BD.E3.83.BC.E3.82.B9.E3.82.92.E8.A8.AD.E5.AE.9A.E3.81.99.E3.82.8B"> ツリーにデータソースを設定する </h3> +<p>ツリーを利用する場合、多量の階層データを取り扱うために、しばしばテンプレートを使用してコンテントをビルドすることになると思います。 +テンプレートをツリーに対して使用するときも、構文についてはそれ以外の要素の場合とほとんど同じです。 +つまり、データソースを指定する <code><code id="a-datasources"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/datasources">datasources</a></code></code> 属性と、 +表示するルートノードを指定する <code><code id="a-ref"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/ref">ref</a></code></code> 属性を、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> 要素に設定する必要があります。 +また、種類の異なるデータに対して異なったコンテントを生成する必要があるときには、複数のルールを設定することも可能です。 +</p><p>以下に、ツリーのために履歴データソースを使用する例を示します。 +</p> +<pre><tree datasources="rdf:history" ref="NC:HistoryByDate" + flags="dont-build-content"> +</pre> +<p>前のセクションで説明したように、ツリーをテンプレートから生成するためには、おおむね通常のコンテントビルダーではなく、ツリービルダーの方が利用されます。 +言い換えれば、ツリーの行ごとに要素を生成するのではなく、もっと効率のよい方法が利用されているということです。 +上記の例のように、<code><code id="a-flags"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flags">flags</a></code></code> 属性に <code>dont-build-content</code> を値として設定することでツリービルダーの使用を指示します。 +この属性を削除した場合は、コンテントビルダーが使用されることになります。 +なお、Mozilla の DOM インスペクタを使用して、フラグの有るツリーと無いツリーを比較することによって、相違点を確認することが可能です。 +</p><p>また、コンテントビルダーの方を利用する場合は、通常、コンテントは実際に必要になるまでビルドされないことに注意してください。 +つまり、階層ツリーのときは、利用者が親項目を開くまで子項目は生成されません。 +</p><p>テンプレートでは、ツリーの各列に対し treecell 要素が存在することになります。 各セルに対しラベルを設定するために、セルは label 属性を持つ必要があります。 +これには通常、ラベルをデータソースから取得するために、 RDF プロパティを設定することになるでしょう。 +</p><p><span id="Template-built_Tree_Example"></span> +</p> +<h4 id=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.81.8B.E3.82.89.E7.94.9F.E6.88.90.E3.81.97.E3.81.9F.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E4.BE.8B" name=".E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.81.8B.E3.82.89.E7.94.9F.E6.88.90.E3.81.97.E3.81.9F.E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E4.BE.8B"> テンプレートから生成したツリーの例 </h4> +<p>以下の例は、テンプレートから生成したツリーを示しています。 +表示データとしては、ファイルシステムを利用します。 +</p><p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_treetempl_1.xul.txt">ソース</a> +</p> +<pre><tree id="my-tree" flex="1" + datasources="rdf:files" ref="file:///" flags="dont-build-content"> + <treecols> + <treecol id="Name" label="Name" primary="true" flex="1"/> + <splitter/> + <treecol id="Date" label="Date" flex="1"/> + </treecols> + + <template> + <rule> + <treechildren> + <treeitem uri="rdf:*"> + <treerow> + <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/> + <treecell label="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> + </treerow> + </treeitem> + </treechildren> + </rule> + </template> +</tree> +</pre> +<p>これにより、ファイル名と更新日の 2 列からなるツリーが生成されます。 +このツリーには、ルートディレクトリにあるファイルの一覧が表示されているはずです。 +今回、ルールは 1 つしか使用していませんが、必要であれば追加しても構いません。 +また、要素の <code>uri</code> 属性は、他のテンプレートの場合と同様に、コンテント生成の起点を示しています。 +行の中に置かれる 2 つのセルは、データソースから名前と日付を受け取り、その値をセルのラベルに設定します。 +</p><p>また、この例からは、テンプレートで <code>uri</code> 属性により生成の起点を指定することの使い勝手の良さも確認することができます。 +まず、この例では、<code>uri</code> 属性が <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> 要素に設定されていますが、 +この要素は <code>rule</code> 要素の直接の子要素ではないことに注目してください。 +<code>uri</code> 属性は、各リソースごとに繰り返し生成させたい要素に対してのみ設定する必要があるので、 +複数生成する必要のない <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素には設定せず、 +<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treeitem" title="treeitem">treeitem</a></code></code> 要素に設定しています。 +つまり、<code><code id="a-uri"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code></code> 属性が設定された要素の外側 (あるいは上位) の要素は複製されず、 +<code><code id="a-uri"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/uri">uri</a></code></code> 属性が設定された要素とその内側の要素が各リソースごとに複製されることになります。 +</p><p>なお、コンテントビルダーではなくツリービルダーを利用する場合、 +テンプレート中の要素は、上記の例で示したような、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/treechildren" title="treechildren">treechildren</a></code></code> 要素をルールの中に置く構造でなければなりません。 +ツリービルダーは、テンプレート中の要素を実際にはビルドしませんが、生成するべき内容を正しく認識させるために、テンプレートの中をこの構造にしておく必要があります。 +</p> +<div class="float-right"><img alt="画像:rdfoutl1.jpg"></div> +<p>画像から、トップレベルの要素の下に、自動的に入れ子の要素が付加されていることが確認できます。 +XUL には、テンプレートやルールにツリー関連の要素やメニュー関連の要素が含まれているときに、自動的に入れ子の要素を追加する機能が実装されています。 +このため、ツリー関連の要素は、RDF データが入れ子の構造を持ってさえいれば、 +それに基づいて必要なだけ入れ子で生成されます。 +</p><p>このときの RDF データソースの興味深い挙動のひとつとして、 +リソースの値は「必要になったときに必要な範囲だけが確定される」ということがあります。 +つまり、リソース階層の深い位置にある値は、利用者が下位の階層を表示させるツリー操作を行い、実際にそのノードを表示させるまで値は確定されません。 +これは、特にデータが動的に変化する種類のデータソースで有効に作用します。 +</p><p><span id="Sorting_Columns"></span> +</p> +<h3 id=".E5.88.97.E3.81.AE.E3.82.BD.E3.83.BC.E3.83.88" name=".E5.88.97.E3.81.AE.E3.82.BD.E3.83.BC.E3.83.88"> 列のソート </h3> +<p>先述の例を実際に動作させたとき、ファイルがソートされていないことが気になるかもしれません。 +ツリーをデータソースから生成する場合は、オプションでデータをソートさせることが可能です。 +このとき、ツリーの任意の列をキーにして、昇順にも降順にもソートできます。 +また、利用者が列の見出しをクリックすることで、ソートする列を選択したり、ソートの方向 (昇順 / 降順) の切り替えを行うことも可能です。 +このソート機能は、静的コンテントから生成されたツリーにはありません。 +(静的コンテントの場合もデータをソートするスクリプトを作成することは可能です)。 +</p><p>ソート処理は、列 (<code>treecol</code>) に設定する必要がある 3 つの属性によって指定します。 +最初の <code>sort</code> 属性には、ソートキーとして利用するための RDF プロパティを設定する必要があります。 +通常、ここには、その列のセルのラベルに設定するものと同じ値を設定します。 +この属性を列に設定することで、その列のデータはソートされ、 +利用者が列の見出しをクリックしてソート方向を切り替えられる様になります。 +<code>sort</code> 属性の指定を取り除いた場合には、その列でデータをソートすることはできなくなります。 +</p><p>次の <code>sortDirection</code> 属性 (大文字が混ざっていることに注意) は、列のデフォルトのソート方向を指定するために使用します。 +ここには、以下の 3 つの値が指定可能です。 +</p> +<dl><dt> ascending </dt><dd> データは昇順で表示されます。 +</dd><dt> descending </dt><dd> データは降順で表示されます。 +</dd><dt> natural </dt><dd> データはそのままの順で表示されます。つまり、 RDF データソースに格納されている順番で表示されます。 +</dd></dl> +<p>最後の <code>sortActive</code> 属性は、デフォルトでソートする列に対して、<code>true</code> を値にして設定します。 +</p><p>ソート処理は上記の属性のみで正しく機能しますが、加えて、ソート可能な列には、スタイルクラス (<code>class</code> 属性) に <code>sortDirectionIndicator</code> を設定することも可能です。 +これによって、列の見出しにソート方向を示す小さな三角形が表示されるようになります。 +これを設定しない場合も、利用者が列をソートすることは可能ですが、どの列でソートされているかの表示がされなくなってしまいます。 +</p><p>以下に、前例の列の部分に上記の追加設定を加えたものを示します。 +</p> +<pre><treecols> + <treecol id="Name" label="Name" flex="1" primary="true" + class="sortDirectionIndicator" sortActive="true" + sortDirection="ascending" + sort="rdf:http://home.netscape.com/NC-rdf#Name"/> + <splitter/> + <treecol id="Date" label="Date" flex="1" class="sortDirectionIndicator" + sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> +</treecols> +</pre> +<p><span id="Persisting_Column_State"></span> +</p> +<h3 id=".E5.88.97.E3.81.AE.E7.8A.B6.E6.85.8B.E3.82.92.E4.BF.9D.E5.AD.98.E3.81.99.E3.82.8B" name=".E5.88.97.E3.81.AE.E7.8A.B6.E6.85.8B.E3.82.92.E4.BF.9D.E5.AD.98.E3.81.99.E3.82.8B"> 列の状態を保存する </h3> +<p>現在どの列でソートされているかをセッション間で保存して、設定内容が<span style="border-bottom: 1px dashed green;" title="persist">持続する</span>ようにしたい場合があると思います。 +このためには、<code><code id="a-persist"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></code> 属性を、各 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素に対して設定します。 +設定を持続させるためには、<code>treecol</code> 要素が持つ、 +「列の幅 (<span style="color: green;">width</span>)」「列の並び順 (<span style="color: green;">ordinal</span>)」「列が可視であるか (<span style="color: green;">hidden</span>)」「現在ソートのために使用されている列 (<span style="color: green;">sortActive</span>)」「列のソート方向 (<span style="color: green;">sortDirection</span>)」 +の 5 つの属性を保存する必要があります。 +以下に、列に対してこれらを設定した例を示します。 +</p> +<pre><treecol id="Date" label="Date" flex="1" + class="sortDirectionIndicator" + persist="width ordinal hidden sortActive sortDirection" + sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/> +</pre> +<p>なお、<code><code id="a-persist"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/persist">persist</a></code></code> 属性についての詳細は、<a href="ja/XUL_Tutorial/Persistent_Data">後のセクション</a>で説明する予定です。 +</p><p><span id="Additional_Rule_Attributes"></span> +</p> +<h3 id=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E3.83.AB.E3.83.BC.E3.83.AB.E5.B1.9E.E6.80.A7" name=".E3.83.84.E3.83.AA.E3.83.BC.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AE.E3.83.AB.E3.83.BC.E3.83.AB.E5.B1.9E.E6.80.A7"> ツリーのためのルール属性 </h3> +<p>また、<code>rule</code> 要素に対して、ツリー固有の特殊な条件にマッチさせるために使用可能な 2 つの属性があります。 +</p> +<dl><dt> iscontainer +</dt><dd> この属性を値 <code>true</code> で設定した場合、ルールは子を持つことができるすべてのリソースにマッチします。例えば、このルールをブックマークフォルダにマッチさせるために使用することが可能です。これにより、 RDF データソース側にコンテナであることを示すための専用の属性を含めておく必要が無くなります。 +</dd><dt> isempty +</dt><dd> この属性を値 <code>true</code> で設定した場合、ルールは子を持たないすべてのリソースにマッチすることになります。 +</dd></dl> +<p>リソースは、コンテナである場合にも空であることもあります。 +この場合、リソースが空であることは、コンテナではないことを意味しません。 +例えば、ブックマークフォルダはコンテナですが、子を持つことも持たないこともあります。 +といっても、単一のブックマークやセパレータがコンテナになることはありません。 +</p><p>これらの属性を他の属性と組み合わせることで、より細かい条件にマッチするルールを作成することが可能です。 +</p><p>次のセクションでは、Mozilla が提供するデータソースについて、いくつかを見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Templates" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:RDF_Datasources">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/updating_commands/index.html b/files/ja/archive/mozilla/xul/tutorial/updating_commands/index.html new file mode 100644 index 0000000000..7fca3d1e88 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/updating_commands/index.html @@ -0,0 +1,93 @@ +--- +title: コマンドの更新 +slug: Archive/Mozilla/XUL/Tutorial/Updating_Commands +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Updating_Commands +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Commands" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Broadcasters_and_Observers">次のページ »</a></p> +</div> + +<p>このセクションでは、コマンドの状態を、タイムリーに更新する方法について見ていきます。</p> + +<h3 id=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.81.AE.E8.B5.B7.E5.8B.95" name=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.81.AE.E8.B5.B7.E5.8B.95">コマンドの起動</h3> + +<p>コマンド (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/command" title="command">command</a></code></code>) に <code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> 属性が与えられている場合は、コマンドか、そのコマンドに結びつけられた要素に対して <code><span id="m-doCommand"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/doCommand">doCommand</a></code></span></code> メソッドを呼び出すことによりコマンドを起動できますが、 それ以外の場合は、起動するために数行のコードが必要になります。 コントローラとして実装されたコマンドを起動するためには、この追加の手順を踏む必要があります。 具体的には、独自のメニューコマンドを作成する場合、 例えば、実際のアプリケーションを開発するときに、編集メニュー用のコマンドを実装するような場面で、この手順が必要になると思います。</p> + +<p>幸い、この追加コードは非常に簡単です。 必要なことは、使用するコントローラを取得してコマンドを呼び出すだけです。 簡単に記述した例を以下に示します。</p> + +<pre>var controller = document.commandDispatcher.getControllerForCommand("cmd_paste"); +if (controller && controller.isCommandEnabled("cmd_paste")){ + controller.doCommand(command); +} +</pre> + +<p>上のコードでは、まず、コマンドディスパッチャから「cmd_paste」コマンドに対するコントローラを取得しています。 次に、コマンドが有効かどうかをチェックし、有効な場合は、コントローラの <code>doCommand</code> メソッドを使って、コマンドを実行します。 このとき、どの要素、あるいは、どのコントローラを利用すべきかについては、コマンドディスパッチャの方で考慮しているため、呼び出し側では意識する必要がないことを補足しておきます。 また、ほとんどの場合でするべきではないことですが、 コマンドが有効かどうかをチェックせずに、単に <code>doCommand</code> を呼び出しても、かまわないことになっています。</p> + +<p>上のコードを、コマンドを引数として渡せば、そのコマンドを実行するように関数化すれば、十分な汎用性を持たせることができます。 関数化しておけば、どんなコマンドを起動する場合にも、そのまま再利用が可能です。 実際、この関数は共通コードとして十分な機能なので、同じものが Mozilla のライブラリにも含まれています。 ライブラリの方の関数を使うためには、XUL ファイルから、スクリプト「<a class="external" rel="freelink">chrome://global/content/globalOverlay.js</a>」を読み込んでおき、 実行したいコマンドを引数で渡して、<code>goDoCommand</code> メソッドを呼び出します。 この関数のコードは、上記のものより若干長いだけなので、何かの理由でライブラリ全体を読み込みたくない場合は、このコードだけを直接、開発中のコードに取り込んでもかまわないと思います。</p> + +<pre><script src="chrome://global/content/globalOverlay.js"/> + +<command id="cmd_paste" oncommand="goDoCommand('cmd_paste');"/> +<button label="Paste" command="cmd_paste"/> +</pre> + +<p>上の例では「貼り付け」ボタンを実装しています。 このボタンはコマンド要素に結びつけられています。 このコマンド要素は、ボタンから呼び出されたときに、必要なコントローラを探して、そこに実装されたコマンドを起動することになります。 上記のコードは、アプリケーションに「貼り付け」コマンドを作る場合に、機能面で実装するべきの内容の全てになります。 それ以外に必要なことは、「貼り付け」コマンドつまりボタンについても、有効か無効かを、以下に示すような方法によって、タイムリーに更新されるようにするだけです。</p> + +<h3 id=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.82.A2.E3.83.83.E3.83.97.E3.83.87.E3.83.BC.E3.82.BF" name=".E3.82.B3.E3.83.9E.E3.83.B3.E3.83.89.E3.82.A2.E3.83.83.E3.83.97.E3.83.87.E3.83.BC.E3.82.BF">コマンドアップデータ</h3> + +<p>コマンドアップデータは <code><code><a href="/ja/docs/Mozilla/Tech/XUL/commandset" title="commandset">commandset</a></code></code> 要素に追加された機能で、指定されたイベントが発生したときに、1 つ、もしくは複数のコマンドの、有効かどうかの状態を更新します。 この機能を使用する場合、開発者は、コマンドがいつ有効になり、いつ無効になるのかを考えておく必要があります。 つまり、状態が変更されるタイミングと、コマンドを更新するべきタイミングを検討する必要があります。</p> + +<p>例えば、貼り付けコマンドは、テキスト入力欄がフォーカスを得ていて、かつ、クリップボード内に、貼り付け可能なものがあるときにのみ有効です。 このため、コマンドは、テキスト入力欄がフォーカスを得ている間に、クリップボードの内容が変化したときに有効 (または無効) になる可能性があります。 コマンドアップデータは、上記の状況が満たされるタイミングを監視しており、 状況が満たされたときに、コマンドの有効状態を更新するために必要なコードを実行させることが可能です。</p> + +<p>以下に、単純なコマンドアップデータの例を示します。</p> + +<pre><commandset id="updatePasteItem" + commandupdater="true" + events="focus" + oncommandupdate="goUpdateCommand('cmd_paste');"/> +</pre> + +<p>コマンドアップデータは、<code><code id="a-commandupdater"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/commandupdater">commandupdater</a></code></code> 属性を使用して指示されます。 このとき、属性値としては <code>true</code> を設定する必要があります。 <code><code id="a-events"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/events">events</a></code></code> 属性は、コマンドアップデータが監視するイベントのリストを設定するために使用されます。 イベントが複数の場合、コンマで区切って指定できます。 上の例では、コマンドアップデータは フォーカスイベントを監視しています。 これによって、要素がフォーカスを得たときにコマンドが更新されることになります。</p> + +<p>フォーカスイベントが発生したとき、 <code><code id="a-oncommandupdate"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommandupdate">oncommandupdate</a></code></code> 属性に指定されたコードが呼び出されます。 この例では、前に述べたスクリプト globalOverlay.js に含まれている <code>goUpdateCommand</code> メソッドが呼び出されます。 このメソッドは、コマンドを更新し、コマンドと結び付けられたボタンやメニュー項目は、それに応じて有効または無効になります。 このメソッドのコードは単純なものです。 必要なコントローラを得て、その <code>isCommandEnabled</code> メソッドを呼び出し、その結果からコマンドを有効化または無効化します。 複数のコマンドを更新したい場合は、それぞれのコマンドに対して、<code>goUpdateCommand</code> メソッドを呼び出すようにします。</p> + +<p>コマンドアップデータは、すべての要素に対する、すべてのフォーカスイベントについて、他のイベントハンドラが応答した場合でさえも、通知を受けることに注意して下さい。 本質的に、コマンドアップデータは、大域的なイベントハンドラと類似しています。</p> + +<p>コマンドアップデータが反応することが可能なイベントを以下に示します。 必要なら、独自に作成することも可能です。</p> + +<ul> + <li><strong>focus</strong>: フォーカスを得ている要素が変更されたとき発生</li> + <li><strong>select</strong>: テキストの選択が変更されたとき発生</li> + <li><strong>undo</strong>: アンドゥ用のバッファが変更されたとき発生</li> + <li><strong>clipboard</strong>: クリップボードの内容が変更されたとき発生</li> +</ul> + +<p>以下の例は、Mozilla ブラウザで利用されている、編集メニューコマンドを更新するための、コマンドアップデータです。 使われている関数は、「<a class="external" rel="freelink">chrome://communicator/content/utilityOverlay.js</a>」で定義されています。</p> + +<pre><commandset id="globalEditMenuItems" + commandupdater="true" + events="focus" + oncommandupdate="goUpdateGlobalEditMenuItems()"/> +<commandset id="selectEditMenuItems" + commandupdater="true" + events="select" + oncommandupdate="goUpdateSelectEditMenuItems()"/> +<commandset id="undoEditMenuItems" + commandupdater="true" + events="undo" + oncommandupdate="goUpdateUndoEditMenuItems()"/> +<commandset id="clipboardEditMenuItems" + commandupdater="true" + events="clipboard" + oncommandupdate="goUpdatePasteMenuItems()"/> +</pre> + +<p>次のセクションでは、オブザーバについて見ていきます。</p> + +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Commands" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Broadcasters_and_Observers">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/using_spacers/index.html b/files/ja/archive/mozilla/xul/tutorial/using_spacers/index.html new file mode 100644 index 0000000000..f0179a772d --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/using_spacers/index.html @@ -0,0 +1,157 @@ +--- +title: スペーサーを使用する +slug: Archive/Mozilla/XUL/Tutorial/Using_Spacers +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_HTML_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Button_Features">次のページ »</a></p> +</div> +<p>このセクションでは、複数の要素を作成したときに、要素間のスペースを調整する方法について学びます。 +</p><p><span id="Adding_Spacers"></span> +</p> +<h3 id=".E3.82.B9.E3.83.9A.E3.83.BC.E3.82.B5.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.82.B9.E3.83.9A.E3.83.BC.E3.82.B5.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B"> スペーサーを追加する </h3> +<p>ユーザーインターフェイスを開発する上で考慮するべき問題の 1 つとして、利用者によって使っているディスプレイが異なっているということがあります。 +高解像度の大型ディスプレイ装置を使う利用者もいれば、低解像度のものを使う利用者もいます。 +さらに、異なったプラットフォームには、ユーザーインターフェイスの点で特殊な用件を考慮する必要があるものもあります。 +また複数の言語をサポートする場合は、同じテキストでも他の言語より広いスペースが必要になるような言語があるかもしれません。 +</p><p>複数のプラットフォームや言語をサポートする必要のあるアプリケーションでは、こういった問題に配慮して、ウィンドウのレイアウトで多めにスペースを置いておくのが普通です。 +また、プラットフォームやユーザーインターフェイスのツールキットの中には、利用者に表示する内容に応じて、自動的にリサイズと再配置を行うような賢いコンポーネントを提供している物もあります。(例えば、Java で使用しているレイアウトマネージャーなどです) +</p><p>XUL にも、要素の配置とサイズ変更を自動的に行なう機能があります。 +これまでのファイル検索ダイアログの作成作業で見てきたように、ウィンドウは内部にある要素に適した大きさで表示され、何かを追加するたびに大きくなっていきます。 +</p><p>XUL は、「ボックス・モデル」という名称のレイアウト・システムを使用しています。 +詳細については、<a href="ja/XUL_Tutorial/The_Box_Model">後のセクション</a>で触れますが、基本的にはウィンドウ上の要素を一連のボックスに所属させることで分割していき、各ボックスの位置と大きさを、開発者が定義可能な仕様に基づいて動的に変更することで最適なレイアウトを行います。 +現時点では、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/window" title="window">window</a></code></code> 要素がボックスのひとつであるという事だけ押さえておいてください。 +</p><p>ボックスの詳細に進む前に、レイアウトに有用な XUL 要素である、スペーサー (<code><code><a href="/ja/docs/Mozilla/Tech/XUL/spacer" title="spacer">spacer</a></code></code>) を、まずは導入しておきます。 +スペーサーは非常に単純で、例の後で説明する 1 つの属性しか必要ありません。 +最も簡単なスペーサーは以下のようになります。 +</p> +<pre class="eval"><spacer flex="1"/> +</pre> +<p>スペーサーはウィンドウに何もないスペースを設定するのに使用します。 +スペーサーの最も有効な能力は、利用者がウィンドウのサイズを変更するのに合わせて、大きくなったり小さくなったりすることです。 +これは、ボタンをウィンドウの右端または一番下に設定する際、ウィンドウの大きさが変化しても右端または一番下から動かないようにするために使うことができます。 +後で説明しますが、複数のスペーサーを組み合わせることで、いろいろなレイアウト効果を作成できます。 +</p><p>上記の構文が示す通り、スペーサーは <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> という名称の属性を 1 つ持っています。 +これはスペーサーの伸縮性 (<span style="color: green;">flexibility</span>) を定義するために使用します。 +上の例では、スペーサーの <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> の値に 1 を設定しています。 +これにより、スペーサー要素は伸縮性のあるものになります。 +このスペーサーをウィンドウの中に直接置いた場合、ウィンドウのサイズが変化すると、合わせてスペーサーも伸縮します。 +</p><p>ファイル検索ダイアログにスペーサーを追加する作業を始める前に、まず現在のダイアログがリサイズされたらどうなるかを見てみることにします。 +</p><p><img alt="画像:springs1.jpg"> +</p><p>ファイル検索ウィンドウの大きさを変更しても、要素は最初の位置から動かない事がわかります。 +ウィンドウのスペースは広くなりましたが、移動したり大きさが変更された要素は 1 つも無いはずです。 +</p><p>次に、スペーサーをテキストボックスと Find ボタンの間に追加したら、どのように変わるかを見てみます。 +</p><p><img alt="画像:springs2.jpg"> +</p><p>スペーサーを追加してウィンドウをサイズ変更すると、スペーサーが出来たスペースを埋めるようにして拡大されるのがわかると思います。 +拡大したスペーサーに押されて、ボタンは右に移動しています。 +</p> +<div class="highlight"> +<p><span id="Our_find_file_example"></span> +</p> +<h4 id=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B" name=".E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E6.A4.9C.E7.B4.A2.E3.83.80.E3.82.A4.E3.82.A2.E3.83.AD.E3.82.B0.E3.81.AE.E4.BE.8B"> ファイル検索ダイアログの例 </h4> +<p>それでは、ファイル検索ダイアログの正しい位置に、スペーサーを追加しましょう。 +以下のコードのように Find ボタンの直前に挿入してください。 +</p> +<pre class="eval"><span class="highlightred"><spacer flex="1"/></span> + +<button id="find-button" label="Find"/> +</pre> +<p><span id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"><a id="%E3%81%93%E3%81%93%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A4%9C%E7%B4%A2%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E4%BE%8B"></a><strong>ここまでのファイル検索ダイアログの例</strong></span>: <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul.txt">ソース</a> <a href="https://developer.mozilla.org/samples/xultu/examples/findfile/findfile-springs.xul">表示</a> +</p> +</div> +<p><span id="More_About_Flexibility"></span> +</p> +<h3 id=".E4.BC.B8.E7.B8.AE.E6.80.A7.E3.81.AB.E3.81.A4.E3.81.84.E3.81.A6.E3.82.82.E3.81.86.E5.B0.91.E3.81.97" name=".E4.BC.B8.E7.B8.AE.E6.80.A7.E3.81.AB.E3.81.A4.E3.81.84.E3.81.A6.E3.82.82.E3.81.86.E5.B0.91.E3.81.97"> 伸縮性についてもう少し </h3> +<p>XUL がウィンドウ内に要素をレイアウトする時には、その要素の適切な幅と高さを計算し、もしその要素が伸縮性を持つものであればスペースを追加します。 +要素の幅と高さについての情報を指定しなければ、要素のデフォルトの大きさはその内容から決定されます。 +このことはダイアログの Cancel ボタンが、いつも中のテキストに応じた幅に設定されていることから確認できると思います。 +非常に長いラベルを持つボタンを作成すれば、そのボタンのデフォルトの大きさは、ラベル全体を保持するのに充分な大きさになるはずです。 +また、テキストボックスなどの他の要素も、それぞれ適切なデフォルトサイズを決める方法を持っています。 +</p><p><code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性は、その要素が所属するボックス (この例では、ウィンドウ) に合わせて大きさを変更可能かどうかを指定するのに使用されます。 +これまで、<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性を、スペーサーに適用する例について説明してきましたが、実は、<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性は他の任意の要素にも適用することが可能です。 +Find ボタンの方をリサイズさせる場合の例を示します。 +</p><p><img alt="画像:springs3.jpg"> +</p><p>画像で示すように、Find ボタンに <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性を与えると、ウィンドウのリサイズ時にボタンもリサイズされるようになります。 +このことから、スペーサーは特別な要素でもなんでもなく、ただの隠れたボタンのようなものだと考えることも出来ます。 +スペーサーの動作は、画面に表示されるものが何も無いこと以外、ボタンとほとんど変わりません。 +</p><p>上の画像から、Find ボタンが大きくなっているだけではなく、メインラベルとボタンの間のスペースも大きくなっていることも確認できます。 +このスペースは、その前に追加したスペーサーによるものなのですが、このスペーサーもまたリサイズされています。 +注意深く見ると、ウィンドウのサイズが変化した分が、スペーサーとボタンに対して均等に分配されていることがわかると思います。 +増えたスペースの半分はスペーサーが受け取り、残りの半分はボタンが受け取っています。 +</p><p>この効果は、スペーサーと Find ボタンの双方が <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性を持っていることから生じています。 +ボタンとスペーサーのどちらにも伸縮性があるため、両方とも同じようにサイズ変更された訳です。 +</p><p>では、ある要素を別の要素の 2 倍大きくしたいような時はどうすればいいでしょう？ <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性の値には、1 より大きな数値を使用することもできます。 +<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性の値は、伸縮する割合を示します。 +ある要素の <code>flex</code> が 1 で、次の要素の <code>flex</code> が 2 であれば、2 番目の要素は最初の要素の 2 倍拡大されることになります。 +要するに、<code>flex</code> が 2 であるということは、その要素の持っている伸縮性は、<code>flex</code> が 1 である要素の 2 倍であるという意味になります。 +</p><p><code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性は、要素の実際の大きさを指定している訳ではなく、 +空きスペースを子供のコンテナボックスの間に分配する方法を示しています。 +(ボックスについては後のセクションで見ていきます)。 +伸縮性の値は、子供のボックスのデフォルトサイズが確定した後に、ボックスに残った空きスペースを分配するために使用されます。 +例えば、200 ピクセルのボックスがあり、その中に伸縮性のあるボタンが 2 つあるとします。最初のボタンは 50 ピクセルで、もう一つは 90 ピクセルであるとすると、60 ピクセル分のスペースが残っているはずです。 +両方のボタンの <code>flex</code>の値が 1 である場合、スペースが分配されることにより、各ボタンに 30 ピクセル分の幅が追加されます。 +もし、2 つめのボタンの伸縮性を 2 に増やすと、最初のボタンは 20 ピクセル分の追加スペースを受け取って拡大され、2 つめのボタンは 40 ピクセル分の追加スペースを受け取ることになります。 +</p><p><code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性は、あらゆる要素に設定できますが、 +XUL ボックス中に、直接置いた要素に設定した場合のみ意味を持ちます。 +つまり、<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性自体は、HTML 要素を含めて、何にでも設定することが可能ですが、設定した要素がボックス要素の中に無い場合は、なんの効果も発生しないという事です。 +</p><p><span id="Flex_examples"></span> +</p> +<h4 id="flex_.E6.8C.87.E5.AE.9A.E3.81.AE.E4.BE.8B" name="flex_.E6.8C.87.E5.AE.9A.E3.81.AE.E4.BE.8B"> flex 指定の例 </h4> +<p>flex の指定について、いくつかの例を示します。 +</p> +<pre class="eval">Example 1: + <button label="Find" flex="1"/> + <button label="Cancel" flex="1"/> + +Example 2: + <button label="Find" flex="10"/> + <button label="Cancel" flex="1"/> + +Example 3: + <button label="Find" flex="2"/> + <button label="Replace"/> + <button label="Cancel" flex="4"/> + +Example 4: + <button label="Find" flex="2"/> + <button label="Replace" flex="2"/> + <button label="Cancel" flex="3"/> + +Example 5: + <html:div> + <button label="Find" flex="2"/> + <button label="Replace" flex="2"/> + </html:div> + +Example 6: + <button label="Find" flex="145"/> + <button label="Replace" flex="145"/> +</pre> +<dl><dt> Example 1 </dt><dd> この例では、伸縮性は 2 つのボタンに均等に分配されます。どちらのボタンも同じ長さでサイズが変更されます。 +</dd><dt> Example 2 </dt><dd> この例では、どちらのボタンも大きくなりますが、Find ボタンは Cancel ボタンが大きくなった分の 10 倍大きくなります。 Find ボタンは 10 倍の <code>flex</code> 値を持っているためです。 利用可能なスペースは、10 対 1 の割合で Find ボタンと 、Cancel ボタンに割り振られることになります。 +</dd><dt> Example 3 </dt><dd> この例では、2 つのボタンだけが伸縮可能なものとして設定されています。Replace ボタンの大きさが変更されることはありませんが、他の 2 つは可変です。Cancel ボタンは、<code>flex</code>の値が、Find ボタンの 2 倍大きく設定されているため、リサイズされる度合いも、常に Find ボタンの 2 倍になります。 +</dd><dt> Example 4 </dt><dd> この例では、3 つのボタン全てが伸縮可能です。Find ボタンと Replace ボタンは常に同じ大きさですが、Cancel ボタンはこれらよりやや大きく (正確には 50% 大きく) なります。 +</dd><dt> Example 5 </dt><dd> この例では、2 つのボタンが <code>div</code> 要素の中に置かれています。ボタンはボックスの中に直接あるわけではないので、伸縮性は無意味です。<code>flex</code> 属性を削除しても、何の影響もありません。 +</dd><dt> Example 6 </dt><dd> この例では、2 つのボタンの <code>flex</code> の値が同じなので、同じように伸縮します。<code>flex</code> の値を 145 の代わりに 1 にしても効果は全く変わりません。この例では違いがありませんので、読みやすくするため、もっと小さい数字を使用することを推奨します。 +</dd></dl> +<p>伸縮性以外の、ボタンのラベルや、ボタンの最小サイズといった要因も実際のボタンのサイズに影響することに注意してください。 +例えば、ボタンはラベルの表示に必要なサイズよりも、小さく縮小されることはありません。 +</p><p><code>flex</code> の値に 0 を指定する事は、<code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性を設定しないのと同じ意味になります。 +つまり、その要素は伸縮可能ではないという事を示します。 +実際の XUL ファイルでは、<code>flex</code> 値がパーセント表記で指定されている場合もあります。 +このパーセント表記には (処理上は) 特別な意味はなく、単にパーセント記号がないものとして扱われます。 +</p><p>ファイル検索ダイアログを垂直方向にリサイズすると、ボタンがウィンドウの高さに合うようにリサイズされる事が確認できます。 +これは、全てのボタンが、ウィンドウによって暗黙に与えられた垂直方向の伸縮性を持っているためです。 +これを変更する方法については、次のセクションで説明します。 +</p><p>次のセクションでは、いくつかのボタンの追加機能について学びます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_HTML_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:More_Button_Features">次のページ »</a></p> +</div> + +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/using_xbl_from_stylesheets/index.html b/files/ja/archive/mozilla/xul/tutorial/using_xbl_from_stylesheets/index.html new file mode 100644 index 0000000000..0d3c3433f8 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/using_xbl_from_stylesheets/index.html @@ -0,0 +1,165 @@ +--- +title: CSS と XBL で再利用可能なコンテンツを作成する +slug: Archive/Mozilla/XUL/Tutorial/Using_XBL_from_stylesheets +tags: + - Advanced + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Web + - XBL +translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>このページでは、Mozilla の <a href="/docs/Web/CSS">CSS</a> をどのように使えば、複雑なアプリケーションの構造を改善し、コードとリソースのより簡単に再利用可能にする方法について解説します。</p> +<div class="note"> +<p><strong>注意:</strong> XBL は <a href="/docs/Web/HTTP">HTTP</a> プロトコルで読み込むことができないため、このテクニックは、ローカルのコンテンツを <code>file:///</code> スキームを使ってアクセスする場合か <a href="/Add-ons">add-on</a> コードからアクセスする場合のみに使用できます。</p> +</div> +<p>簡単なデモでこのテクニックを使ってみましょう。</p> + +<h3 id="Information_XBL_bindings" name="Information:_XBL_bindings">XBL バインディングについて</h3> +<p>複雑なアプリケーションでは、全体を構成するパーツがそれぞれ自己完結しており再利用可能でなければならないため、マークアップ言語と CSS による構造は理想的とは言えません。スタイルシートやスクリプトをそれぞれ別のファイルに置くことはできます。しかし、document から全体的にそれらのファイルへリンクしなければなりません。</p> +<p>マークアップ言語と CSS の別の構造的な制限はコンテンツです。CSS を使って選択した要素にコンテンツを指定することができますが、そのコンテンツとはテキストと画像のみに限られ、その配置は選択した要素の前後に限定されてしまいます。</p> +<p>Mozilla では、これらの制限を解消するメカニズム、<em>XBL</em> (XML Bindings Language) を使うことができます。 XBL を使えば、選択した要素にそれぞれ次のものをリンクできます。</p> +<ul> + <li>スタイルシート</li> + <li>コンテンツ</li> + <li>プロパティとメソッド</li> + <li>イベントハンドラ</li> +</ul> +<p>document レベルですべてをリンクすることを回避できるため、保守と再利用が簡単な自己完結型であるパーツを作成できます。</p> + +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(244, 244, 244); margin-bottom: 1em; width: 100%;"> + <caption>さらに詳しく</caption> + <tbody> + <tr> + <td>XBL バインディングについての詳しい情報は、<a href="/docs/XBL" title="XBL">XBL</a> ページをご覧ください。</td> + </tr> + </tbody> +</table> + +<h3 id="Action_An_XBL_demonstration" name="Action:_An_XBL_demonstration">実習: XBL デモ</h3> +<p>HTML ドキュメントの <code>doc6.html</code> を新規作成します。以下のコンテンツをコピー＆ペーストしてください:</p> +<div style="width: 56em;"> + <pre class="brush: html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE> +<LINK rel="stylesheet" type="text/css" href="style6.css"> +</HEAD> + +<BODY> +<H1>XBL demonstration</H1> +<DIV id="square">Click Me</DIV> +</BODY> + +</HTML> +</pre> +</div> +<p>CSS ファイルの <code>style6.css</code> を新規作成します。このスタイルシートは document スタイルを含んでいます。以下のコンテンツをコピー＆ペーストしてください:</p> +<div style="width: 56em;"> + <pre class="brush: css">/*** XBL demonstration ***/ +#square { + -moz-binding: url("square.xbl#square"); + } +</pre> +</div> +<p>テキストファイルの <code>square.xbl</code> を新規作成します。このファイルは XBL バインディングを含んでいます。以下のコンテンツをコピー＆ペーストしてください。</p> + +<div style="overflow: auto; width: 56em;"> + <pre class="brush: xml"><?xml version="1.0"?> +<!DOCTYPE bindings> +<bindings xmlns="http://www.mozilla.org/xbl" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + +<binding id="square"> + + <resources> + <stylesheet src="bind6.css"> + </stylesheet></resources> + + <content> + <html:div anonid="square"> + <xul:button anonid="button" type="button"> + <children> + </children></xul:button> + </html:div></content> + + <implementation> + + <field name="square"></field> + + <field name="button"></field> + + <method name="doDemo"> + + </method> + + <method name="clearDemo"> + <parameter name="me"> + + </parameter></method> + + </implementation> + + <handlers> + <handler button="0" event="click"></handler> + </handlers> + + </binding> + +</bindings> +</pre> +</div> +<p>CSS ファイルの <code>bind6.css</code> を新規作成します。この 2 個目のスタイルシートはバインディングのスタイルを含んでいます。以下のコンテンツをコピー＆ペーストしてください。</p> +<div style="width: 56em;"> + <pre class="brush: css">/*** XBL demonstration ***/ +[anonid="square"] { + width: 20em; + height: 20em; + border: 2px inset gray; + } + +[anonid="button"] { + margin-top: 1em; + padding: .5em 2em; + } +</pre> +</div> + +<p>ドキュメントファイルの <code>doc6.html</code> をブラウザで開き、ボタンをクリックしてください。</p> +<p>この wiki ではページ内に JavaScript を持つことができないため、ここでデモをお見せできませんが、ボタンをクリックする前と後は次のようになります:</p> +<table> + <tbody> + <tr> + <td><img alt="xbldemo0.png" class="internal default" src="/@api/deki/files/3377/=xbldemo0.png" style="width: 322px; height: 224px;"></td> + <td><img alt="xbldemo1.png" class="internal default" src="/@api/deki/files/3378/=xbldemo1.png" style="width: 322px; height: 224px;"></td> + </tr> + </tbody> +</table> +<p>このデモには以下の注意点があります:</p> +<ul> + <li>HTML ドキュメントは document スタイルシートにリンクしていますが、JavaScript コードには一切リンクしていません。</li> + <li>ドキュメントにはボタンがありません。ボタンのテキストラベルのみがあります。ボタンはバインディングよって追加されています。</li> + <li>document スタイルシートはバインディングにリンクしています。</li> + <li>バインディングは専用のスタイルシートにリンクし、専用のコンテンツと JavaScript コードを持っています。つまり、このバインディングは自己完結型です。</li> +</ul> +<p>チャレンジ</p> +<table style="border: 1px solid rgb(51, 102, 187); padding: 1em; background-color: rgb(255, 255, 244); margin-bottom: 0.5em;"> + <caption> + </caption> + <tbody> + <tr> + <td>正方形の色が変わるときに右にジャンプするのではなく、幅が 2 倍になるように XBL ファイルを変更してください。 + <p>DOM Inspector ツールを使用してドキュメントを調べ、追加されたコンテンツを確認してください。</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="What_next.3F" name="What_next.3F">さて次は？</h3> +<p>このページに分かりづらいところやご意見があれば <a href="/Talk:en/CSS/Getting_Started/XBL_bindings" title="Talk:en/CSS/Getting_Started/XBL_bindings">Discussion</a> ページに参加してください。</p> +<p>このデモでは、正方形やボタンが自己完結型の <em>ウィジェット</em> を HTML ドキュメント内に作成してました。Mozilla には、特化したユーザインターフェース作成用のマークアップ言語があります。次のページでは、<strong><a href="/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL ユーザインターフェース</a></strong> のデモをします。</p> diff --git a/files/ja/archive/mozilla/xul/tutorial/xbl_attribute_inheritance/index.html b/files/ja/archive/mozilla/xul/tutorial/xbl_attribute_inheritance/index.html new file mode 100644 index 0000000000..135ef84820 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/xbl_attribute_inheritance/index.html @@ -0,0 +1,97 @@ +--- +title: XBL 属性の継承 +slug: Archive/Mozilla/XUL/Tutorial/XBL_Attribute_Inheritance +tags: + - Tutorials + - XBL + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Attribute_Inheritance +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Anonymous_Content" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Properties_to_XBL-defined_Elements">次のページ »</a></p> +</div> +<p>このセクションでは、匿名コンテントの要素に属性を継承する方法を見ていきます。</p> +<h3 id=".E5.B1.9E.E6.80.A7.E3.82.92.E7.B6.99.E6.89.BF.E3.81.99.E3.82.8B" name=".E5.B1.9E.E6.80.A7.E3.82.92.E7.B6.99.E6.89.BF.E3.81.99.E3.82.8B">属性を継承する</h3> +<p><a href="/ja/docs/XBL">XBL</a> を使うことによって、実際の実装を隠したまま、複合ウィジェットを構築することが可能です。 しかしながら、ここまでに説明した機能を使うだけでは、毎回同じような匿名コンテントしか生成させることはできません。 外枠のバインドされた要素に属性を付加することで、内部の要素に変更を加えることができるようになれば利用範囲が広がるはずです。</p> +<pre><b>XUL:</b> + +<searchbox/> + +<b>XBL:</b> + +<binding id="searchBinding"> + <content> + <xul:textbox/> + <xul:button label="Search"/> + </content> +</binding> +</pre> +<p>この例では、内部の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 要素に直接 <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性が置かれています。 このため、このバインディングを使用すると毎回同じラベルになってしまい、利用する側の意図とは合わない可能性があります。 この例の場合ならば、ラベルを指定するための属性は <code>searchbox</code> 側に置けた方が望ましいはずです。 こういった場合のために、XBL では <code>inherits</code> 属性が用意されており、これによってバインドされた要素の方に設定された属性情報を、XBL 側の要素に継承させることが可能になります。 <code>inherits</code> 属性は、XBL 側に置かれた、外枠の要素から属性を継承させたい要素、つまりこの例の場合はボタンに置く必要があります。 なお、この属性の値には、継承したい属性の名前をカンマで区切ったリストを設定します。</p> +<pre><xul:textbox xbl:inherits="flex"/> +<xul:button xbl:inherits="label"/> +</pre> +<p>上記により、コンテントが生成されるときには、 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 要素は <code>searchbox</code> 要素から <code>flex</code> 属性を受け取り、 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/button" title="button">button</a></code></code> 要素は <code>searchbox</code> 要素 から <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性を受け取ることになります。 この結果、テキスト入力欄の<span style="border-bottom: 1px dashed green;" title="flexibility">伸縮性</span>とボタンのラベルは、いずれもバインディングが使われるたびごとに変更できるようになります。 さらに、<code>searchbox</code> 要素の方の属性値をスクリプトで変更することで、テキスト入力欄とボタンの属性値を更新することが可能です。 なお、<code>inherits</code> 属性を設定できる要素の数には制限はなく、1 つの要素に複数の属性を継承させても構いません。</p> +<p><code>inherits</code> 属性には XBL 名前空間に置くために、「<code>xbl:</code>」という接頭辞が付加されていることを確認してください。 この名前空間は、これらの行以前のどこかで宣言する必要がありますが、 通常は <code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#bindings">bindings</a></code></code> 要素に置くようにします。 以下に例を示します。</p> +<pre><bindings xmlns:xbl="http://www.mozilla.org/xbl" + xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<xbl:binding id="buttonBinding"> + <xbl:content> + <xul:button label="OK" xbl:inherits="label"/> + </xbl:content> +</xbl:binding> +</pre> +<p>この例のボタンは、<code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性について継承が行われますが、 XBL の方でも、その属性に対する値が直接設定されています。 このテクニックは、バインドされた要素に属性が設定されないときのために、デフォルト値を設定しておく必要があるときに使用します。 つまり、このボタンの場合は、外枠の要素から <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性を継承することになりますが、 もしも <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性がない場合には、<code>OK</code> というデフォルト値が使用されることになります。</p> +<p>また、XBL から生成される 2 つの要素に同じ名前の属性を継承させる必要があることもしばしばあると思います。 例えば、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 要素と <code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 要素から、ラベル付きのテキスト入力欄 (横に説明用のテキストがあるテキスト入力欄) を作成する場合、 ラベルは表示するテキストのために <code><code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 属性を継承する必要があり、 またテキストボックスも、デフォルト値のため同様に <code><code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 属性を継承する必要があります。 これを解決するためには、外枠の要素では片方には別の名前の属性を割り当てておき、XBL 側では別の名前にした方の <code>inherits</code> 属性で、対応する属性名を明示するようにします。 以下の例は、これを行うためのものです。</p> +<pre><b>XUL:</b> + +<box class="labeledtextbox" title="Enter some text:" value="OK"/> + +<b>CSS:</b> + +box.labeledtextbox { + -moz-binding: url('<a rel="freelink">chrome://example/skin/example.xml#labeledtextbox'</a>); +} + +<b>XBL:</b> + +<binding id="labeledtextbox"> + <content> + <xul:label xbl:inherits="value=title"/> + <xul:textbox xbl:inherits="value"/> + </content> +</binding> +</pre> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 要素は、<code><code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 属性を直接継承しています。 このため、ラベルの方に <code><code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 属性を設定するためには、別の属性名を使っておいて、その値をマップする必要があります。 ラベルに設定された <code>inherits</code> 属性は、<code>labeledtextbox</code> 要素に設定された <code>title</code> 属性を捉え、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> 要素の <code><code id="a-value"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/value">value</a></code></code> 属性にマップしています。 「<内側の属性名>=<外枠の属性名>」が、属性を別の属性にマップするための構文になります。 もう 1 つ、別の例を示します。</p> +<pre><b>XUL:</b> + +<box class="okcancel" oktitle="OK" canceltitle="Cancel" image="happy.png"/> + +<b>CSS:</b> + +box.okcancel { + -moz-binding: url('<a rel="freelink">chrome://example/skin/example.xml#okcancel'</a>); +} + +<b>XBL:</b> + +<binding id="okcancel"> + <content> + <xul:button xbl:inherits="label=oktitle,image"/> + <xul:button xbl:inherits="label=canceltitle"/> + </content> +</binding> +</pre> +<p>この例の <code>oktitle</code> 属性の値は、最初のボタンの <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性にマップされます。 また、<code>canceltitle</code> 属性は、2 番目のボタンの <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性にマップされます。 さらに、最初のボタンには <code><code id="a-image"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/image">image</a></code></code> 属性も継承されます。 その結果、以下のようになります。</p> +<pre><box class="okcancel" oktitle="OK" canceltitle="Cancel" image="happy.png"> + <button label="OK" image="happy.png"/> + <button label="Cancel"/> +</box> +</pre> +<p>これらの属性は、内部の (匿名) コンテントに<span style="border-bottom: 1px dashed green;" title="duplicated">複製される</span>点に注意して下さい。 このため、<code>okcancel</code> クラスを持ったボックスの属性を変更した場合には、内部のボタンの値も自動的に更新されることになります。 また、属性名として独自のものを使用したことにも気が付いたかもしれません。 XUL では、これは正当な指定として扱われます。</p> +<p>次のセクションでは、バインディングに対して、プロパティ、メソッド、イベントを追加する方法を見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Anonymous_Content" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Adding_Properties_to_XBL-defined_Elements">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/xbl_example/index.html b/files/ja/archive/mozilla/xul/tutorial/xbl_example/index.html new file mode 100644 index 0000000000..ac4d8f3b34 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/xbl_example/index.html @@ -0,0 +1,172 @@ +--- +title: XBL の例 +slug: Archive/Mozilla/XUL/Tutorial/XBL_Example +tags: + - Tutorials + - XBL + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Example +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:XBL_Inheritance" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Features_of_a_Window">次のページ »</a></p> +</div> +<p>このセクションでは、XBL 要素について例を用いて説明します。</p> +<h3 id=".E3.82.B9.E3.83.A9.E3.82.A4.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E8.A6.81.E7.B4.A0" name=".E3.82.B9.E3.83.A9.E3.82.A4.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E8.A6.81.E7.B4.A0">スライドショー要素</h3> +<p>それでは、XBL 要素の完全な例を作ってみることにしましょう。 作成するのは、オブジェクトを<a href="/ja/docs/XUL_Tutorial/Stacks_and_Decks#.E3.83.87.E3.83.83.E3.82.AD" title="XUL_Tutorial/Stacks_and_Decks#.E3.83.87.E3.83.83.E3.82.AD">デッキ</a>で保持して 1 つずつ表示していくウィジェットです。 下辺付近にナビゲーションボタンを置いて、利用者がオブジェクトを巡回できるようにするとともに、 ボタンの間にあるテキストウィジェットで現在のページ番号を表示するようにします。 この要素の中には、ページとしてどんな要素でも置くことが可能ですが、一連の画像を順に表示させるために使用するのがよいと思います。 ここでは、この要素を スライドショー (<span style="color: green;">slideshow</span>) 要素と呼ぶことにします。</p> +<h4 id=".E3.82.B9.E3.83.A9.E3.82.A4.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E3.81.AE.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88" name=".E3.82.B9.E3.83.A9.E3.82.A4.E3.83.89.E3.82.B7.E3.83.A7.E3.83.BC.E3.81.AE.E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88">スライドショーのコンテント</h4> +<p>まず、XBL のコンテントとして必要な要素を決めることにしましょう。 ページの切り替えを行う必要があるので、ページのコンテンツを保持するために、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> 要素を利用するのが最適だと思います。 また、ページのコンテンツは XBL ではなく XUL ファイルの側に置く必要がありますが、 それらは<span style="border-bottom: 1px dashed green;" title="deck">デッキ</span>の中に追加する必要があるため、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#children">children</a></code></code> タグを使う必要がありそうです。 さらに、下辺付近には、前のページに戻るためのボタン、現在のページ番号を表示するテキストウィジェット、次のページに進むボタンを置くことにします。</p> +<p><span id="%E4%BE%8B_1"><a id="%E4%BE%8B_1"></a><strong>例 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblex_1.xml.txt">ソース</a></p> +<pre><binding id="slideshow"> + <content> + <xul:vbox flex="1"> + <xul:deck xbl:inherits="selectedIndex" selectedIndex="0" flex="1"> + <children/> + </xul:deck> + <xul:hbox> + <xul:button xbl:inherits="label=previoustext"/> + <xul:label flex="1"/> + <xul:button xbl:inherits="label=nexttext"/> + </xul:hbox> + </xul:vbox> + </content> +</binding> +</pre> +<p>このバインディングによって、スライドショーのために必要な構造が作成されます。 いくつかの要素には、適切に伸縮が行われるように <code><code id="a-flex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/flex">flex</a></code></code> 属性が追加されています。 また、2 つのボタンの <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性には、 バインドされた要素に設定される 2 つのカスタム属性、<code>previoustext</code> と <code>nexttext</code> が継承されます。 これによって、ボタンのラベルの変更が簡単になります。 また、XBL がバインドされた要素の子要素は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> の中に配置されることになります。 さらに、<code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> が <code><code><a href="/ja/docs/Mozilla/Tech/XUL/deck" title="deck">deck</a></code></code> に継承されているため、 XUL 側で最初のページを設定することが可能です。</p> +<p>以下の XUL ファイルの表示結果を、その下の画像で示します。</p> +<pre><box class="slideshow" previoustext="Previous" nexttext="Next" flex="1"> + <button label="Button 1"/> + <checkbox label="Checkbox 2"/> + <textbox/> +</box> +</pre> +<p>使用するスタイルシート:</p> +<pre>.slideshow { + -moz-binding: url("slideshow.xml#slideshow"); +} +</pre> +<div class="float-right"> + <img alt="画像:xblex1.jpg" src="/@api/deki/files/2045/=Xblex1.jpg"></div> +<p>最初の「Button 1」ボタンは、デッキの最初のページとして使われているものです。 また、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/label" title="label">label</a></code></code> ウィジェットは <code>value</code> が指定されていないため表示されていません。 この値は、後で自動計算されるようにするため、設定せずに置いてあります。</p> +<h4 id="page_.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name="page_.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">page プロパティ</h4> +<p>次は、現在のページを保持するためのプロパティを追加します。 このカスタムプロパティの値を取得する場合、 デッキから現在表示されているページの番号を保持している <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 属性の値を取得する必要があります。 同様に、このプロパティを設定する場合は、デッキの <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 属性を変更する必要があり、 加えて現在のページ番号を表示しているテキストウィジェットについても更新する必要があります。</p> +<pre><property name="page" + onget="return parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));" + onset="this.setPage(val);"/> +</pre> +<p><code>page</code> プロパティの値を取得する場合、 まず匿名コンテント配列の最初の要素を参照します。 得られる要素は垂直ボックスなので、デッキを取得するためには、このボックスの最初の子ノードを取得する必要があります。 なお、ボックスから見れば、デッキは匿名ではないため、匿名コンテント配列は使用しません。 最後に、デッキの <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 属性を取得して返します。 また、<code>page</code> を設定するためには、後で定義する <code>setPage()</code> メソッドを呼び出します。</p> +<p>また、Previous ボタンと Next ボタンには、ボタンが押されたときにページを変更するための、<code><code id="a-oncommand"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/oncommand">oncommand</a></code></code> ハンドラを追加する必要があります。 都合よく、たった今追加したカスタムプロパティの <code>page</code> を使えば、ページを変更することが可能です。</p> +<pre><xul:button xbl:inherits="label=previoustext" + oncommand="parentNode.parentNode.parentNode.page--;"/> +<xul:description flex="1"/> +<xul:button xbl:inherits="label=nexttext" + oncommand="parentNode.parentNode.parentNode.page++;"/> +</pre> +<p><code>page</code> プロパティは、<span style="border-bottom: 1px dashed green;" title="outer">外枠</span>の XUL 要素だけに存在するため、取得するためには <code><a href="/ja/docs/DOM/element.parentNode" title="DOM/element.parentNode">parentNode</a></code> プロパティを使う必要があります。 最初の <code><a href="/ja/docs/DOM/element.parentNode" title="DOM/element.parentNode">parentNode</a></code> は、ボタンの親である水平ボックスを返し、2 つめはその親である垂直ボックスを返します。 そして、最後の <code><a href="/ja/docs/DOM/element.parentNode" title="DOM/element.parentNode">parentNode</a></code> が、その親の外枠のボックスを返します。 返された <code>page</code> プロパティは、インクリメント (++ 演算)、またはデクリメント (-- 演算) されます。 これにより、値を取得するために <code>onget</code> スクリプトが呼び出され、 その値に 1 の加算または減算を行った後、値を設定するために <code>onset</code> ハンドラが呼び出されることになります。</p> +<h4 id="setPage_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89" name="setPage_.E3.83.A1.E3.82.BD.E3.83.83.E3.83.89">setPage メソッド</h4> +<p>続いては、<code>setPage</code> メソッドの定義にかかります。 このメソッドは、パラメータを 1 つ取り、そこに設定するページ番号を渡します。 また、このメソッドでは、ページが範囲外ではないことの確認と、デッキの <code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 属性の設定、及びテキストウィジェットの <code><code id="a-label"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/label">label</a></code></code> 属性の変更を行う必要があります。</p> +<pre><method name="setPage"> + <parameter name="newidx"/> + <body> + <![CDATA[ + var thedeck=document.getAnonymousNodes(this)[0].childNodes[0]; + var totalpages=this.childNodes.length; + + if (newidx<0) return 0; + if (newidx>=totalpages) return totalpages; + thedeck.setAttribute("selectedIndex",newidx); + document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1] + .setAttribute("value",(newidx+1)+" of "+totalpages); + return newidx; + ]]> + </body> +</method> +</pre> +<p>この関数の名前は、<code>setPage</code> で、<code>newidx</code> というパラメータを 1 つ取ります。 メソッドの本体は「<code><![CDATA[</code> ～ <code>]]></code>」の内側に置かれています。 これは、XML ファイルで一般的に使用可能なメカニズムで、 この中に置かれたテキストは、すべてエスケープされることになります。 これによって、テキストに含まれる小なり記号 ('<')と 大なり記号 ('>') を、その都度エスケープする必要がなくなります。</p> +<p>次に、コードを細分化して詳細に見ていくことにしましょう。</p> +<ul> + <li><pre>var thedeck=document.getAnonymousNodes(this)[0].childNodes[0]; +</pre> + 匿名コンテント配列から、垂直ボックスに該当する最初の要素を取得し、次に、デッキ要素に該当する最初の子要素を取得します。</li> + <li><pre>var totalpages=this.childNodes.length; +</pre> + バインドされたボックスが持っている子要素の数を取得します。これは存在するページの総数を示すことになります。</li> + <li><pre>if (newidx<0) return 0; +</pre> + ページが、最初のページより前に変更されないように、新しいインデックスが、最初のページよりも前を指定している場合は、ページの変更は行わずに 0 を返します。</li> + <li><pre>if (newidx>=totalpages) return totalpages; +</pre> + ページが、最後のページより後に変更されないように、新しいインデックスが最後のページよりも後の場合は、ページの変更は行わずに、最後の ページのインデックスを返します。</li> + <li><pre>thedeck.setAttribute("selectedIndex",newidx); +</pre> + デッキの <code>selectedIndex</code> 属性を変更します。これによって、リクエストされたページが表示されます。</li> + <li><pre>document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1].setAttribute("value",(newidx+1)+" of "+totalpages); +</pre> + この行では、現在のページインデックスを表示するラベル要素の変更を行います。ラベル要素を取得するために、匿名コンテントから最初の要素 (垂直ボックス) を取得し、その 2 番目の子要素 (水平ボックス) の、2 番目の子要素を取得しています。そして、取得した要素の <code>value</code> 属性を、「1 of 3」のような形式のテキストに変更します。インデックスは 0 から始まるため、ページ番号として表示する場合は 1 を加えていることに注意してください。</li> +</ul> +<h4 id=".E3.82.B3.E3.83.B3.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF" name=".E3.82.B3.E3.83.B3.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF">コンストラクタ</h4> +<p>スライドショーを最初に表示したときから、ページ番号が正しく表示されるようにするためには、 コンストラクタを作成して、ラベル要素を初期化しておく必要があります。 ページ番号を設定するためには、先述のメソッドと類似のコードを使用します。 下記の <code>this.page</code> による参照は <code>page</code> プロパティの <code>onget</code> スクリプトを呼び出し、 メソッドのときとは逆に、<code><code id="a-selectedIndex"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/selectedIndex">selectedIndex</a></code></code> 属性を初期ページを取得するために使用します。</p> +<pre><constructor> + var totalpages=this.childNodes.length; + document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1] + .setAttribute("value",(this.page+1)+" of "+totalpages); +</constructor> +</pre> +<h4 id=".E8.BF.BD.E5.8A.A0.E5.8F.AF.E8.83.BD.E3.81.AA.E6.A9.9F.E8.83.BD" name=".E8.BF.BD.E5.8A.A0.E5.8F.AF.E8.83.BD.E3.81.AA.E6.A9.9F.E8.83.BD">追加可能な機能</h4> +<p>これ以外にもいくつかの機能を加えることが可能です。 Previous ボタンと Next ボタンにキーボードショートカット (例えば、バックスペースと Enter キー) を設定したり、 最初のページと最後のページに行くための First ボタンと Last ボタンの追加することが考えられます。 さらに、ラベル要素を入力欄に変更して、ユーザが行きたいページを入力できるようにしたり、 ポップアップを追加して、メニューからページの選択ができるようにすることも可能でしょう。 また、CSS を使ってデッキの周囲に境界を付ければ、見栄えが若干よくなるはずです。</p> +<h4 id=".E6.9C.80.E7.B5.82.E7.9A.84.E3.81.AA.E3.82.B3.E3.83.BC.E3.83.89" name=".E6.9C.80.E7.B5.82.E7.9A.84.E3.81.AA.E3.82.B3.E3.83.BC.E3.83.89">最終的なコード</h4> +<p>最終的なコードは以下のようになります。</p> +<p><span id="Example_2"><a id="Example_2"></a><strong>Example 2</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblex_2.xml.txt">ソース</a></p> +<pre><binding id="slideshow"> + <content> + <xul:vbox flex="1"> + <xul:deck xbl:inherits="selectedIndex" selectedIndex="0" flex="1"> + <children/> + </xul:deck> + <xul:hbox> + <xul:button xbl:inherits="label=previoustext" + oncommand="parentNode.parentNode.parentNode.page--;"/> + <xul:description flex="1"/> + <xul:button xbl:inherits="label=nexttext" + oncommand="parentNode.parentNode.parentNode.page++;"/> + </xul:hbox> + </xul:vbox> + </content> + + <implementation> + + <constructor> + var totalpages=this.childNodes.length; + document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1] + .setAttribute("value",(this.page+1)+" of "+totalpages); + </constructor> + + <property name="page" + onget="return parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));" + onset="this.setPage(val);"/> + + <method name="setPage"> + <parameter name="newidx"/> + <body> + <![CDATA[ + var thedeck=document.getAnonymousNodes(this)[0].childNodes[0]; + var totalpages=this.childNodes.length; + + if (newidx<0) return 0; + if (newidx>=totalpages) return totalpages; + thedeck.setAttribute("selectedIndex",newidx); + document.getAnonymousNodes(this)[0].childNodes[1].childNodes[1] + .setAttribute("value",(newidx+1)+" of "+totalpages); + return newidx; + ]]> + </body> + </method> + </implementation> + +</binding> +</pre> +<p>次のセクションでは、ウィンドウの付加的な機能についていくつか見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:XBL_Inheritance" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Features_of_a_Window">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/xbl_inheritance/index.html b/files/ja/archive/mozilla/xul/tutorial/xbl_inheritance/index.html new file mode 100644 index 0000000000..9ac1cb2816 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/xbl_inheritance/index.html @@ -0,0 +1,42 @@ +--- +title: XBL の継承 +slug: Archive/Mozilla/XUL/Tutorial/XBL_Inheritance +tags: + - Tutorials + - XBL + - XUL + - XUL_Tutorial + - 要更新 +translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Inheritance +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Event_Handlers_to_XBL-defined_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XBL_Example">次のページ »</a></p> +</div> +<p>このセクションでは、既存の <a href="/ja/docs/XBL">XBL</a> 定義を拡張する方法について見ていきます。</p> +<h3 id=".E3.83.90.E3.82.A4.E3.83.B3.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0.E3.81.AE.E7.B6.99.E6.89.BF" name=".E3.83.90.E3.82.A4.E3.83.B3.E3.83.87.E3.82.A3.E3.83.B3.E3.82.B0.E3.81.AE.E7.B6.99.E6.89.BF">バインディングの継承</h3> +<p>新たに作成したいと考えている XBL ウィジェットが既存のウィジェットに類似していることは、しばしばあると思います。 例えば、 XBL でポップアップの付いたボタンの作成を行いたい場合、 作成するボタンのために既存の XBL コードをコピーして使用するのも 1 つの方法ですが、 既存のボタンのコードから派生させて、単純に拡張する部分だけを作成すれば済むのであれば、 それに越したことは無いはずです</p> +<p>どんなバインディングでも、他のバインディングの拡張として派生させることができます。 派生したバインディングに対しては、プロパティやメソッド、イベントハンドラを追加することが可能です。 また、派生バインディングは、継承元になるバインディング (および、継承ツリーで更に上流にあるバインディング) が定義するすべての機能を持っています。</p> +<p>バインディングを、既存のバインディングの拡張として派生させるためには、<code><code><a href="/ja/docs/XBL/XBL_1.0_Reference/Elements#binding">binding</a></code></code> タグに <code>extends</code> 属性を追加します。 例えば、以下のバインディングは、F4 キーが押された場合に、 値の先頭に「<tt><span class="nowiki">http://www</span></tt>」というテキストを追加する機能をもったテキスト入力欄を作成します。</p> +<p><span id="Example_1"><a id="Example_1"></a><strong>Example 1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xblinherit_1.xml.txt">ソース</a></p> +<pre><binding id="textboxwithhttp" + extends="chrome://global/content/bindings/textbox.xml#textbox"> + <handlers> + <handler event="keypress" keycode="VK_F4"> + this.value="http://www"+value; + </handler> + </handlers> +</binding> +</pre> +<p>この XBL は、XUL の <code><code><a href="/ja/docs/Mozilla/Tech/XUL/textbox" title="textbox">textbox</a></code></code> 要素を拡張しています。 上記の <code>extends</code> 属性に設定されているバインディングの URL は、<code>textbox</code> のためのバインディングの URL になります。 この指定によって、このバインディングには <code>textbox</code> のバインディングが提供するコンテントと振る舞いがすべて継承されることになります。 また、それに加えて、キーの押下イベントに応答するハンドラを追加しています。</p> +<h3 id=".E8.87.AA.E5.8B.95.E8.A3.9C.E5.AE.8C.E6.A9.9F.E8.83.BD.E3.81.A4.E3.81.8D.E3.81.AE.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E5.85.A5.E5.8A.9B.E6.AC.84" name=".E8.87.AA.E5.8B.95.E8.A3.9C.E5.AE.8C.E6.A9.9F.E8.83.BD.E3.81.A4.E3.81.8D.E3.81.AE.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E5.85.A5.E5.8A.9B.E6.AC.84">自動補完機能つきのテキスト入力欄</h3> +<p>前述の例は、Mozilla の URL 自動補完機能の仕組みと類似しています。 自動補完をサポートしたテキスト入力欄も、基本となるテキスト入力欄を拡張した XBL バインディングを持っているだけです。</p> +<p><a href="/ja/docs/XUL/textbox_(Mozilla_autocomplete)">自動補完機能つきのテキスト入力欄</a>には、 URL が打ち込まれていくたびに補完候補のメニューをポップアップ表示するために、新たなイベント処理が追加されています。 この自動補完つきの入力欄は、独自のアプリケーションからでも使用できます。 このために必要なことは、単に 2 つの拡張属性を設定したテキスト入力欄を作ることだけです。</p> +<pre><textbox type="autocomplete" searchSessions="history"/> +</pre> +<p>既存のテキスト入力欄に自動補完機能を追加するためには、<code>type</code> に <code>autocomplete</code> を設定します。 また、補完のために探すデータの種類を指示するために、<code>searchSessions</code> を設定します。 この場合は、値として <code>history</code> を使用しているため、アクセス履歴にある URL を探すことになります。 (アドレスブックにあるアドレスを探すために、<code>addrbook</code> という値も使用できます)。</p> +<div class="note"> + Firefox では、自動補完機能の仕組みが Mozilla suite とは異なっています。詳細は <a href="/ja/docs/XUL/textbox_(Firefox_autocomplete)">XUL:textbox (Firefox autocomplete)</a> を参照してください。</div> +<p>次のセクションでは、XBL で定義したウィジェットの例を見ていきます。</p> +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Adding_Event_Handlers_to_XBL-defined_Elements" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XBL_Example">次のページ »</a></p> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/xpcom_examples/index.html b/files/ja/archive/mozilla/xul/tutorial/xpcom_examples/index.html new file mode 100644 index 0000000000..ab1f7f0f20 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/xpcom_examples/index.html @@ -0,0 +1,176 @@ +--- +title: XPCOM の利用例 +slug: Archive/Mozilla/XUL/Tutorial/XPCOM_Examples +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Examples +--- +<p> +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:XPCOM_Interfaces" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Trees">次のページ »</a></p> +</div> +<p>このセクションでは、XPCOM の利用例を、いくつかの新しいインターフェイスを用いて紹介します。 +</p><p><span id="Window_Management"></span> +</p> +<h3 id=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E7.AE.A1.E7.90.86" name=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.81.AE.E7.AE.A1.E7.90.86"> ウィンドウの管理 </h3> +<div class="note"> +この例には、<a href="ja/XUL_Tutorial/Templates">もう少しあとのセクション</a>で説明する RDF データソースが使用されています。既にこれに関する知識を持っているのでなければ、とりあえずこの例はスキップして、後にまわした方がよいかもしれません。</div> +<p><span id="Creating_a_Window_menu"></span> +</p> +<h4 id="Window_.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E7.94.9F.E6.88.90" name="Window_.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.81.AE.E7.94.9F.E6.88.90"> Window メニューの生成 </h4> +<p>Mozilla では、そのときに開いているウィンドウのリストを RDF データソースとして利用できます。 +これによって、アプリケーションで開いているウィンドウのリストを表示する Window メニューを作成することが可能です。 +このためのデータソースは、<code>rdf:window-mediator</code> になります。 +<span style="color: darkgreen; background: #ef9;">【訳注: Mediator は、GoF による 23 のデザインパターンの 1 つで「仲介者」といった意味】</span> +以下に使用例を示します。 +</p><p><span id="%E4%BE%8B1"><a id="%E4%BE%8B1"></a><strong>例1</strong></span> : <a href="https://developer.mozilla.org/samples/xultu/examples/ex_xpcomex_1.xul.txt">ソース</a> +</p> +<pre><toolbox> + <menubar id="windowlist-menubar"> + <menu label="Window"> + <menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"> + <template> + <rule> + <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + </template> + </menupopup> + </menu> + </menubar> +</toolbox> +</pre> +<p>これによって、Window メニューが作成され、開いている全てのウィンドウの一覧を表示することが可能になります。 +たくさんのブラウザウィンドウを開いてからこの例を試して、それらのウィンドウがメニューに現れることを確かめてみてください。 +</p><p><span id="Window_mediator_component"></span> +</p> +<h4 id=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.83.A1.E3.83.87.E3.82.A3.E3.82.A8.E3.83.BC.E3.82.BF_.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88" name=".E3.82.A6.E3.82.A3.E3.83.B3.E3.83.89.E3.82.A6.E3.83.A1.E3.83.87.E3.82.A3.E3.82.A8.E3.83.BC.E3.82.BF_.E3.82.B3.E3.83.B3.E3.83.9D.E3.83.BC.E3.83.8D.E3.83.B3.E3.83.88"> ウィンドウメディエータ コンポーネント </h4> +<p>これでウィンドウの一覧表示は十分なので、 +次にメニュー項目をクリックすることでウィンドウを切り替えられるように拡張することを考えます。 +これは、ウィンドウメディエータ コンポーネントを利用することで実現できます。 +このコンポーネントは、<code>nsIWindowDataSource</code> インターフェイスを実装しています。 +以下に、コンポーネントを取得する例を示します。 +</p> +<pre>var wmdata = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService(); +wmdata.QueryInterface(Components.interfaces.nsIWindowDataSource); +</pre> +<p>このコードは、<a class="external" href="http://xulplanet.com/references/xpcomref/comps/c_rdfdatasource1namewindowmediator.html">ウィンドウメディエータのデータソースのコンポーネント</a>を取得します。 +ここで利用するコンポーネントは、最初の例で (内部的に) window-mediator RDF データソースを処理しているものと同じです。 +なお、このコンポーネントは、RDF サービス (RDF データソースを管理する別のサービス) から取得することも可能です。 +</p><p><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIWindowDataSource.html">nsIWindowDataSource</a> インターフェイスには、<code>getWindowForResource</code> 関数があり、これを利用してリソースに対応するウィンドウオブジェクトを取得することができます。 +最初の例で、ウィンドウのリストを生成し、テンプレート経由でメニューに加えています。 +このときテンプレートは、各 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/menuitem" title="menuitem">menuitem</a></code></code> 要素に対して、それぞれ <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性を生成します。 +この id 属性に設定される値がリソースとして利用できます。 +まとめると、ウィンドウのフォーカスを切り替えるためには、以下のことを行う必要があります。 +</p> +<ol><li> ユーザがクリックした要素を特定する。 +</li><li> その要素から <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性の値を取得する。 +</li><li> その値を <code>getWindowFromResource()</code> に渡して、ウィンドウオブジェクトを取得する。 +</li><li> 取得したウィンドウにフォーカスを切り替える。 +</li></ol> +<p>以下に、これを行った例を示します。 +</p> +<pre><toolbox> + <menubar id="windowlist-menubar"> + <menu label="Window" oncommand="switchFocus(event.target);"> + <menupopup id="window-menu" datasources="rdf:window-mediator" ref="NC:WindowMediatorRoot"> + <template> + <rule> + <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/> + </rule> + </template> + </menupopup> + </menu> + </menubar> +</toolbox> + +<script> +function switchFocus(elem) +{ + var mediator = Components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getService(); + mediator.QueryInterface(Components.interfaces.nsIWindowDataSource); + + var resource = elem.getAttribute('id'); + switchwindow = mediator.getWindowForResource(resource); + + if (switchwindow){ + switchwindow.focus(); + } +} +</script> +</pre> +<p>この例では、メニュー要素に対してコマンドハンドラが設定され、メニュー項目が選択されたときに選択された要素を引数として関数 <code>switchFocus()</code> を呼び出すようになっています。 +</p><p>関数 <code>switchFocus()</code> は、以下の動作を行います。 +</p> +<ul><li> 最初に、ウィンドウメディエータのデータソースのインターフェイスを実装するコンポーネントを取得します。 +</li><li> 次に、要素の <code><code id="a-id"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/id">id</a></code></code> 属性を取得します。ここには、リソースとして利用可能な値が設定されています。 +</li><li> 関数 <code>getWindowForResource()</code> は、渡されたリソースに対応するウィンドウを返します。これによって取得され <code>switchwindow</code> 変数に格納されたウィンドウは、JavaScript のウィンドウオブジェクトと同様に扱うことができます。 +</li><li> ここでは <code><span id="m-focus"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/focus">focus()</a></code></span></code> 関数を呼び出していますが、そのオブジェクトが提供する関数であれば任意のものを呼び出すことが可能です。 +</li></ul> +<p><span id="Cookies"></span> +</p> +<h3 id=".E3.82.AF.E3.83.83.E3.82.AD.E3.83.BC" name=".E3.82.AF.E3.83.83.E3.82.AD.E3.83.BC"> クッキー </h3> +<p>次の例として、ブラウザに保存されているクッキーのリストを取得してみます。 +これは、クッキーサービスを利用することで実現できます。 +クッキーサービスは、<code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsICookieManager.html">nsICookieManager</a></code> インターフェイス実装しており、これを利用してすべてのクッキーを列挙することが可能です。 +ここでは、例として MozillaZine から設定されたすべてのクッキーの名前を表示するメニューリストを構築してみます。 +</p> +<pre><script> + +function getCookies() +{ + var menu = document.getElementById("cookieMenu"); + menu.removeAllItems(); + + var cookieManager = Components.classes["@mozilla.org/cookiemanager;1"] + .getService(Components.interfaces.nsICookieManager); + + var iter = cookieManager.enumerator; + while (iter.hasMoreElements()){ + var cookie = iter.getNext(); + if (cookie instanceof Components.interfaces.nsICookie){ + if (cookie.host == "www.mozillazine.org") + menu.appendItem(cookie.name,cookie.value); + } + } +} +</script> + +<hbox> + <menulist id="cookieMenu" onpopupshowing="getCookies();"/> +</hbox> +</pre> +<p><code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 要素に <code><code id="a-onpopupshowing"><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Attribute/onpopupshowing">onpopupshowing</a></code></code> 属性を設定することで、 +<code>getCookies()</code> 関数がメニューが開かれるたびごとに呼び出されるようにしています。 +<code>getCookies()</code> の最初の 2 行は、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/menulist" title="menulist">menulist</a></code></code> 要素を取得して、すべての項目をメニューから削除しています。 +<code>getCookies()</code> は、メニューが開かれるたびに繰り返し呼び出されることになるので、 +以前の項目が残ったままにならないように最初に削除する必要があるわけです。 +</p><p>次に、クッキーマネージャを取得します。 +このクッキーマネージャには <code>enumerator</code> メソッドがあり、 +このメソッドは <code><a href="ja/NsISimpleEnumerator">nsISimpleEnumerator</a></code> を実装した<span style="border-bottom: 1px dashed green;" title="enumerator">列挙</span>オブジェクトを返します。 +このオブジェクトを使用することで、全てのクッキーに対して反復処理が行えます。 +列挙オブジェクトには <code>hasMoreElements()</code> メソッドがあり、これは最後のクッキーが得られるまで true を返し続けます。 +また、<code>getNext()</code> メソッドは、クッキーを取得して、列挙オブジェクトのインデックスを次のクッキーに進めます。 +このメソッドは、単に<span style="border-bottom: 1px dashed green;" title="generic">汎用</span>オブジェクトを返すため、 +使用する前に <code>QueryInterface()</code> を使って <code><a class="external" href="http://xulplanet.com/references/xpcomref/ifaces/nsICookie.html">nsICookie</a></code> にする必要がありますが、 +ここでは <code>instanceof</code> 演算子を使っているため、このとき同様の効果が得られています。 +</p><p>最後に、クッキーのメニューに項目を追加します。 +このためにクッキーの <code>host</code>、<code>name</code>、<code>value</code> プロパティを利用します。 +メニューには、項目を追加する <code><span id="m-appendItem"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/appendItem">appendItem()</a></code></span></code> 関数があるので、これにラベルと値を与えて項目を追加します。 +</p><p><span id="See_also"></span> +</p> +<h3 id=".E3.81.9D.E3.82.8C.E4.BB.A5.E5.A4.96.E3.81.AE.E4.BE.8B" name=".E3.81.9D.E3.82.8C.E4.BB.A5.E5.A4.96.E3.81.AE.E4.BE.8B"> それ以外の例 </h3> +<p>以下のページでは、さらにたくさんの例が紹介されています。 +</p> +<ul><li> <a href="ja/Code_snippets">Code snippets</a> +</li><li> <a class=" external" href="http://kb.mozillazine.org/Category:XPCOM_example_code" rel="freelink">http://kb.mozillazine.org/Category:XPCOM_example_code</a> +</li></ul> +<p>次のセクションでは、ツリーの作成について見ていきます。 +</p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:XPCOM_Interfaces" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:Trees">次のページ »</a></p> +</div> +<p><br> +</p> +<div class="noinclude"> +</div> diff --git a/files/ja/archive/mozilla/xul/tutorial/xpcom_interfaces/index.html b/files/ja/archive/mozilla/xul/tutorial/xpcom_interfaces/index.html new file mode 100644 index 0000000000..e893ac9687 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/xpcom_interfaces/index.html @@ -0,0 +1,193 @@ +--- +title: XPCOM インターフェイス +slug: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces +tags: + - Tutorials + - 'XPCOM:Language Bindings' + - XPConnect + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces +--- +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Box_Objects" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XPCOM_Examples">次のページ »</a></p> +</div></div> + +<p>このセクションでは、 Mozilla が利用しているオブジェクトシステムである <a href="/ja/docs/XPCOM">XPCOM</a> (Cross-platform Component Object Model) の概要を見ていきます。</p> + +<p><span id="Calling_Native_Objects"></span></p> + +<h3 id=".E3.83.8D.E3.82.A4.E3.83.86.E3.82.A3.E3.83.96.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.82.92.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.99" name=".E3.83.8D.E3.82.A4.E3.83.86.E3.82.A3.E3.83.96.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.82.92.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.99">ネイティブオブジェクトを呼び出す</h3> + +<p>これまで見てきたように、 XUL を使用することで、複雑なユーザインターフェイスを構築することができます。 さらに、XUL にスクリプトを付加することで、インターフェイスを変化させたり、要求されたタスクを実行させることも可能です。 しかしながら、JavaScript からは直接できないことも、たくさんあります。 例えば、メールアプリケーションを作成する場合、メールサーバに接続して、メールの送受信を行うスクリプトを書く必要がありますが、 JavaScript は、こういった処理を記述するために必要な能力は持っていません。</p> + +<p>こういった処理を実装するための唯一の方法は、メールを取得するためにネイティブコードを書くことになります。 また、スクリプトからネイティブコードを呼び出す方法も必要です。 このために、Mozilla ではネイティブコードを <a href="/ja/docs/XPCOM">XPCOM</a> (Cross-platform Component Object Model) を利用して起動するためのメソッドを提供しています。</p> + +<div class="note">Mozilla では、多数の XPCOM のコンポーネントとインターフェイスを提供しています。このため、ほとんどの場合、アプリケーションで独自にネイティブコードを書く必要はありません。このセクションを読み終えたら、<a class="external" href="http://xulplanet.com/references/xpcomref/">XULPlanet の XPCOM リファレンス</a>で、利用できそうなインターフェイスを探してみてください。</div> + +<p><span id="About_XPCOM"></span></p> + +<h3 id="XPCOM_.E3.81.AB.E3.81.A4.E3.81.84.E3.81.A6" name="XPCOM_.E3.81.AB.E3.81.A4.E3.81.84.E3.81.A6">XPCOM について</h3> + +<p>Mozilla は、それぞれが決まった役割を持ったコンポーネントの集合として構成されています。 例えば、「メニュー」や「ボタン」あるいは「要素」について、それぞれに対応するコンポーネントが存在しています。 また、コンポーネントは、インターフェイスと呼ばれる、いくつかの定義から構成されています。</p> + +<p>Mozilla では、インターフェイスは「コンポーネントが実装する必要のある機能のセット」を定義したものを指しています。 また、コンポーネントは「Mozilla の中で、何かをするためのコードを実装したもの」になります。 これらのコンポーネントは、インターフェイスで記述された機能を実装しています。 このとき、1 つのコンポーネントが複数のインターフェイスを実装することも、 複数のコンポーネントが同じインターフェイスを実装することもあります。</p> + +<p>例として、ファイルコンポーネントをとりあげてみることにします。 まず、ファイルが持っているプロパティと、ファイルに対して実行可能な関数を記述したインターフェイスを作成する必要があります。 ファイルのプロパティとしては、名前、変更日、サイズが必要で、 関数としては、そのファイルに対して、移動、コピー、削除などを行う機能が含まれるでしょう。</p> + +<p>この File インターフェイスには、ファイルの特徴的な性質についてのみを記述し、実装はしません。 File インターフェイスの実装は、コンポーネントに任されています。 このインターフェイスを実装するコンポーネントは、ファイルの名前、日付、サイズを得るためのコードに加えて、 コピーや名前の変更のためのコードも持つことになります。</p> + +<p>コンポーネントが、インターフェイスをどのように実装するかは、(実装に問題がある場合を除いて) コンポーネントを利用する側では意識する必要はありません。 もちろん、意識しようとしても実装はプラットフォームごとに異なっています。 例えば、Windows と Macintosh 版のファイルコンポーネントは、大きく異なっています。 しかしながら、両方とも同じインターフェイスを実装しているため、 このインターフェイスで規定された関数を利用してアクセスすることで、プラットフォームを意識せずにコンポーネントを利用できるわけです。</p> + +<p>Mozilla では、インターフェイス名の先頭に「nsI」または「mozI」を付加することで、それがインターフェイスであることが簡単に判別できるようになっています。 例えば、<code>nsIAddressBook</code> は、アドレス帳とやりとりするためのインターフェイスであり、 <code>nsISound</code> は、サウンドファイルを鳴らすために、 <code>nsILocalFile</code> は、ローカルファイルのために利用されます。 Mozilla に含まれているインターフェイスの一覧は、<a href="/ja/docs/Interfaces">Interfaces</a> を参照してください。</p> + +<p>多くの場合、 XPCOM コンポーネントは、一般的に JavaScript 単独ではできないことを行うため、ネイティブに実装されます。 このため、JavaScript からもそれらを呼び出す方法が用意されています。 詳細はもう少し後で説明しますが、これによって、コンポーネントから提供される任意の関数を、実装したインターフェイスの記述に従って呼び出すことができます。 例えば、一度コンポーネントが得られれば、<code>nsISound</code> が実装されているかをチェックすることができ、 実装されていれば、それを利用してサウンドを鳴らすことが可能になります。</p> + +<p>スクリプトから XPCOM を呼び出す処理は <a href="/ja/docs/XPConnect">XPConnect</a> と呼ばれ、 これはスクリプトオブジェクトからネイティブオブジェクトへの変換を行うレイヤーとして位置づけられています。</p> + +<p><span id="Creating_XPCOM_Objects"></span></p> + +<h3 id="XPCOM_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E7.94.9F.E6.88.90" name="XPCOM_.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E7.94.9F.E6.88.90">XPCOM オブジェクトの生成</h3> + +<p>XPCOM コンポーネントを呼び出すには、3 つの手順を踏む必要があります。</p> + +<ol> + <li>コンポーネントを取得</li> + <li>コンポーネントから、利用したいインターフェイスを実装しているパートを取得</li> + <li>必要な関数を呼び出す</li> +</ol> + +<p>一度、最初の 2 つの手順を行えば、最後の手順は何度でも必要なだけ繰り返すことができます。 例えば、ファイル名の変更を行いたいと考えているとします。 このためには、<code>nsILocalFile</code> インターフェイスが利用できます。 まず、最初の手順としてファイルコンポーネントを取得します。 次に、ファイルコンポーネントに問い合わせを行い、<code>nsILocalFile</code> インターフェイスを実装しているパートを取得します。 最後に、そのインターフェイスが提供している関数を呼び出します。 なお、このインターフェイスは、 1 つのファイルを表すために使用されます。 (訳注:言い換えると、このインターフェイスから生成されるインスタンスは 1 つのファイルに対応することになります)</p> + +<p>既に説明したように、インターフェイスはほとんど「nsI」か「mozI」で始まる名前を持っています。 一方、コンポーネントは URI に似た文字列を使用して参照することになります。 Mozilla は、利用可能なすべてのコンポーネントのリストを、自身のレジストリに登録しています。 また、特定の利用者は、必要に応じて新しいコンポーネントをインストールすることもでき、 これはプラグインとよく似た働きをします。</p> + +<p>Mozilla は、ファイルコンポーネントとして <code><a href="/ja/docs/NsILocalFile">nsILocalFile</a></code> インターフェイスを実装したコンポーネントを提供しています。 このコンポーネントは、文字列「<code>@mozilla.org/file/local;1</code>」で参照することができます。 この文字列は、コントラクト ID (<span style="color: green;">contract ID</span>) と呼ばれ、以下の構文を持っています。</p> + +<pre class="eval"> @<internetdomain>/module[/submodule[...]];<version>[?<name>=<value>[&<name>=<value>[...]]] +</pre> + +<p>また、他のコンポーネントについても同様の方法で参照できます。 <span style="color: darkgreen; background: #ef9;">【訳注: 「contract ID」は、カタカナで「コントラクト ID」としましたが、訳語として「契約 ID」を当てているページも存在します】</span></p> + +<p>コンポーネントのコントラクト ID を利用して、コンポーネントを取得することが可能です。 JavaScript コードでは、以下のように記述することができます。</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +</pre> + +<p>上の例では、ファイルコンポーネントが取得され、変数<em>aFile</em> に代入されています。 この、<code><a href="/ja/docs/Components_object">Components</a></code> によって、コンポーネントに関するいくつかの関数を提供する一般オブジェクトを参照することができます。 ここでは、<code>classes</code> プロパティから、コンポーネントクラスを取得しています。 この <code>classes</code> プロパティは、利用可能なコンポーネントをすべて含む配列なので、 別のコンポーネントを取得する場合は、単に角括弧の中のコントラクト ID を、利用したいコンポーネントのコントラクト ID に置き換えるだけで済みます。 そして、最後の <code>createInstance()</code> 関数によってインスタンスが作成されます。</p> + +<p>なお、<code>createInstance()</code> は、コンポーネントが存在しない場合に null を戻すため、戻り値が null でないことをチェックする必要があります。</p> + +<p>ここまでの手順では、まだファイルコンポーネント自身の参照が得られただけです。 続いて、コンポーネントが実装する関数を呼び出すために、その関数が記述されているインターフェイス、 この例の場合は <code><a href="/ja/docs/NsILocalFile">nsILocalFile</a></code> を取得する必要があります。 このためには、2 行目に以下のようなコードに追加します。</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile) aFile.QueryInterface(Components.interfaces.nsILocalFile); +</pre> + +<p>関数 <code>QueryInterface()</code> は、すべてのコンポーネントで提供されており、 コンポーネントから指定のインターフェイスを取得します。 この関数は 1 つの引数をとり、そこに取得したいインターフェイスを渡します。 <code>Components</code> オブジェクトの <code>interfaces</code> プロパティは、利用可能なすべてのインターフェイスのリストを含んでいます。 ここでは <code>nsILocalFile</code> インターフェイスを利用するため、これを <code>QueryInterface()</code> への引数として渡します。 これによって、変数 aFile は、コンポーネントの <code>nsILocalFile</code> インターフェイスを実装するパートを参照するようになります。</p> + +<p>上記の 2 行の JavaScript を使用すれば、任意のコンポーネントの任意のインターフェイスを取得することができます。 必要なことは、コンポーネントのコントラクト ID を、利用したいもののコントラクト ID に置き換え、インターフェイス名を変えるだけです。 もちろん名前を変数で指定してもかまいません。 例えば、サウンドインターフェイスは、以下のように取得することができます。</p> + +<pre>var sound = Components.classes["@mozilla.org/sound;1"].createInstance(); +if (sound) sound.QueryInterface(Components.interfaces.nsISound); +</pre> + +<p>XPCOM のインターフェイスを作成するとき、別の XPCOM のインターフェイスを継承させることが可能です。 継承したインターフェイスは、そのインターフェイス独自の関数に加えて継承したすべての関数を持ちます。 すべてのインターフェイスは、<code>nsISupports</code> と呼ばれるトップレベルのインターフェイスを継承しています。 このインターフェイスは、JavaScript では、先述の関数 <code>QueryInterface()</code> 1 つだけを提供しています。 <code>QueryInterface()</code> 関数が、すべてのコンポーネントで利用できるのは、 <code>nsISupports</code> インターフェイスを、すべてのコンポーネントが実装していることによっています。</p> + +<p>XPCOM では、複数のコンポーネントで、同じインターフェイスを実装している場合があります。 多くの場合、それらはオリジナルのサブクラスですが、そうである必要はありません。 極端な話、<code>nsILocalFile </code> の機能を、別の任意のコンポーネントに実装することも可能です。 また、1 つのコンポーネントが複数のインターフェイスを実装する場合もあります。 これらに対応するために、関数を呼び出すためのインターフェイスの取得には、2 つの手順を踏む必要があるのです。</p> + +<p>といっても、上の 2 行は頻繁に使われるため、ショートカットも用意されています。</p> + +<pre>var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile); +</pre> + +<p>これは上の 2 行と同じことをしますが、1 行に収められています。 これによって、インスタンスの作成とインターフェイスの問い合わせを、2 つの別の手順として分ける必要がなくなります。</p> + +<p>オブジェクトに対して <code>QueryInterface()</code> を呼び出したとき、要求したインターフェイスがオブジェクトでサポートされていない場合、<span style="border-bottom: 1px dashed green;" title="exception">例外</span>が送出されます。 インターフェイスがコンポーネントでサポートされているかどうか不明な場合は、チェックするために <code><a href="/ja/docs/JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></code> 演算子を使用することができます。</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile instanceof Components.interfaces.nsILocalFile){ + // do something +} +</pre> + +<p><code>instanceof</code> 演算子 は、aFile が <code>nsILocalFile</code> インターフェイスを実装している場合に true を返します。 なお、このチェックを行った場合、<code>QueryInterface()</code> を呼び出したのと同じ副作用が発生します。 このため、それ以降、aFile は <code>nsILocalFile</code> が有効な状態になります。</p> + +<p><span id="Calling_the_Functions_of_an_Interface"></span></p> + +<h3 id=".E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.82.A4.E3.82.B9.E3.81.AE.E9.96.A2.E6.95.B0.E3.82.92.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.99" name=".E3.82.A4.E3.83.B3.E3.82.BF.E3.83.BC.E3.83.95.E3.82.A7.E3.82.A4.E3.82.B9.E3.81.AE.E9.96.A2.E6.95.B0.E3.82.92.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.99">インターフェイスの関数を呼び出す</h3> + +<p>これで <code>nsILocalFile</code> インターフェイスを持ったコンポーネントを参照するオブジェクトを取得できたので、 このオブジェクトを通して <code>nsILocalFile</code> の関数を呼び出すことができるようになりました。 以下に、<code>nsILocalFile</code> インターフェイスのプロパティとメソッドの一部を示します。</p> + +<dl> + <dt>initWithPath</dt> + <dd>このメソッドは、パスとファイル名を与えて nsILocalFile オブジェクトを初期化します。最初の引数が「<code>/usr/local/mozilla</code>」といったようなファイルパスになります。(フルパスで指定する必要があります)</dd> + <dt>leafName</dt> + <dd>ディレクトリ部分を除いたファイル名になります。</dd> + <dt>fileSize</dt> + <dd>ファイルのサイズです。</dd> + <dt>isDirectory()</dt> + <dd>この nsILocalFile オブジェクトが保持するファイルパスが、ディレクトリである場合に true を返します。</dd> + <dt>remove(recursive)</dt> + <dd>ファイルを削除します。引数 recursive が true の場合、ディレクトリに含まれるすべてのファイルとサブディレクトリが再帰的に削除されます。</dd> + <dt>copyTo(directory,newname)</dt> + <dd>ファイルを他のディレクトリへコピーします。オプションで名前を変更することも可能です。引数 directory は、コピー先のディレクトリを保持する nsILocalFile オブジェクトである必要があります。</dd> + <dt>moveTo(directory,newname)</dt> + <dd>ファイルを別のディレクトリに移動するか、ファイル名の変更を行います。引数 directory は移動先のディレクトリを保持する nsILocalFile オブジェクトである必要があります。</dd> +</dl> + +<p>これらを利用して、ファイルを削除する機能を作成する場合、 まず、nsILocalFile オブジェクトにファイルを対応させる必要があります。 このとき、どのファイルに対応させるかは、<code>initWithPath()</code> メソッドを呼び出すことで指示できます。 なお、この呼び出しでは、オブジェクトのプロパティに、ファイルのパスが代入されることだけが行われ、 与えられたパスが正しく存在するかといったチェックは行われません。 次に <code>remove()</code> 関数を呼び出します。 この関数は、真偽値 の引数を 1 つとり、そこで再帰的に削除するかどうかを指定します。 以下コードは、このファイル削除処理の記述例になります。</p> + +<pre>var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance(); +if (aFile instanceof Components.interfaces.nsILocalFile){ + aFile.initWithPath("/mozilla/testfile.txt"); + aFile.remove(false); +} +</pre> + +<p>このコードは、ファイル <code>/mozilla/testfile.txt</code> を取り出して削除します。 このコードを (作成中のファイル検索ダイアログの) イベントハンドラに追加して、この例の動作を試してみてください。 なお、その際ファイル名を削除したい実在のファイルに変更する必要があります。</p> + +<p>上の一覧には、<code>copyTo()</code> と <code>moveTo()</code> という、それぞれファイルのコピーと移動に利用可能な 2 つの関数があります。 これらは、コピー先あるいは移動先のディレクトリとして、文字列ではなく nsILocalFile オブジェクトを引数にとることに注意してください。 つまり、ファイルコンポーネントを 2 つ取得する必要があるということです。 以下に、ファイルをコピーする例を示します。</p> + +<pre>function copyFile(sourcefile,destdir) +{ + // get a component for the file to copy + var aFile = Components.classes["@mozilla.org/file/local;1"] + .createInstance(Components.interfaces.nsILocalFile); + if (!aFile) return false; + + // get a component for the directory to copy to + var aDir = Components.classes["@mozilla.org/file/local;1"] + .createInstance(Components.interfaces.nsILocalFile); + if (!aDir) return false; + + // next, assign URLs to the file components + aFile.initWithPath(sourcefile); + aDir.initWithPath(destdir); + + // finally, copy the file, without renaming it + aFile.copyTo(aDir,null); +} + +copyFile("/mozilla/testfile.txt","/etc"); +</pre> + +<p><span id="XPCOM_Services"></span></p> + +<h3 id="XPCOM_.E3.82.B5.E3.83.BC.E3.83.93.E3.82.B9" name="XPCOM_.E3.82.B5.E3.83.BC.E3.83.93.E3.82.B9">XPCOM サービス</h3> + +<p>XPCOM コンポーネントの中には、サービスと呼ばれる特別なコンポーネントがいくつかあります。 サービスは、大域的なデータの取得と設定や、他のオブジェクトに対する処理を行う汎用的な関数を提供します。 サービスのインスタンスは、1 つだけが存在するようにするために、使用時に <code>createInstance()</code> によるインスタンス作成は行わず、 代わりに <code>getService()</code> を呼び出すことで、サービスコンポーネントへの参照を取得します。 それ以外の点では、サービスと他のコンポーネントに大きな違いはありません。</p> + +<p>Mozilla で提供されているサービスの 1 つとして、ブックマークサービスがあります。 これを利用して、利用者のカレントのブックマークリストにブックマークを追加することができます。 以下に例を示します。</p> + +<pre>var bmarks = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService(); +bmarks.QueryInterface(Components.interfaces.nsIBookmarksService); +bmarks.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null); +</pre> + +<p>最初に、コンポーネント <code>"@mozilla.org/browser/bookmarks-service;1"</code> を取得して、そのサービスを、変数 <code>bmarks</code> に代入します。 次に、<code>QueryInterface()</code> を使用して、nsIBookmarksService インターフェイスを取得します。 これにより、このインターフェイスで提供されているブックマークを追加する関数 <code>addBookmarkImmediately()</code> が利用できるようになります。 この関数の最初の 2 つの引数は、ブックマークする URL とタイトルです。 3 番目の引数は、ブックマークの種類で、通常は 0 です。 また、最後の引数は、ブックマークするの文書の文字エンコーディングで、指定する必要がなければ null を渡してもかまいません。 この例を実行した場合、ブックマークに <code><span class="nowiki">http://www.mozilla.org</span></code> が Mozilla というタイトルで追加されるはずです。</p> + +<p>次のセクションでは、Mozilla で利用可能なインターフェイスのいくつかを見ていきます。</p> + +<div><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Box_Objects" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:XPCOM_Examples">次のページ »</a></p> +</div></div> diff --git a/files/ja/archive/mozilla/xul/tutorial/xul_structure/index.html b/files/ja/archive/mozilla/xul/tutorial/xul_structure/index.html new file mode 100644 index 0000000000..c4ef232518 --- /dev/null +++ b/files/ja/archive/mozilla/xul/tutorial/xul_structure/index.html @@ -0,0 +1,182 @@ +--- +title: XULの構造 +slug: Archive/Mozilla/XUL/Tutorial/XUL_Structure +tags: + - Tutorials + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure +--- +<div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Introduction" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:The_Chrome_URL">次のページ »</a></p> +</div> + +<p><br> + まず、最初に XUL が Mozilla でどのように処理されるかについて見てみることにします。</p> + +<p><span id="How_XUL_is_Handled"></span></p> + +<h3 id="XUL_.E3.81.AE.E5.87.A6.E7.90.86" name="XUL_.E3.81.AE.E5.87.A6.E7.90.86">XUL の処理</h3> + +<p>Mozilla における XUL の処理は、HTML などのコンテンツを処理する方法によく似ています。 HTML の場合、ブラウザのアドレス入力欄に HTML ページの URL が入力されると、ブラウザは Web サイトを見つけ出して、そのコンテンツをダウンロードします。 Mozilla の<span style="border-bottom: 1px dashed green;" title="rendering">描画</span>エンジンは、HTML のソースからコンテンツを取り出して<span style="border-bottom: 1px dashed green;" title="document tree">文書ツリー</span>の形に変換した後、そのツリーを画面上に表示可能なオブジェクトの集合に変換します。 さらに、スタイルシート (<a href="ja/CSS">CSS</a>) や画像、その他の技術が<span style="border-bottom: 1px dashed green;" title="presentation">表示</span>の制御に利用されます。 XUL の場合も、これとほぼ同様の動作になります。</p> + +<p>実際、Mozilla では、全ての<span style="border-bottom: 1px dashed green;" title="">文書型</span>を同じ基本コードで処理しています。 HTML と XUL はもちろん、 <a href="ja/SVG">SVG</a> さえも同じです。 これは HTML と XUL のいずれに対しても、スタイルを付けるために同じ CSS プロパティが利用できたり、多くの機能が双方で共有できるということを意味します。 ただし、フォームのように HTML に特有な機能や、<a href="ja/XUL_Tutorial/Overlays">オーバーレイ</a>のように XUL に特有な機能も一部あります。 XUL と HTML は同じ方法で処理されるため、どちらのファイルも「利用者のウェブページ」、「拡張機能」、「スタンドアローンな <a href="ja/XULRunner">XULRunner</a> 用のアプリケーション」から読み込むことが可能です。</p> + +<p>リモートから読み込まれるコンテンツ (例えば<code><span class="nowiki">http://localhost/~username/</span></code>) は、文書の型を問わず、セキュリティ上の理由から実行可能な命令が制限されます。 HTML や XUL はもちろん、他のタイプの文書も含めたすべてが制限の対象になります。 このため、Mozilla はローカルにコンテンツをインストールする手段と、インストールされたファイルを <strong><a href="ja/Chrome">chrome</a></strong> システムの一部として登録する手段を提供しています。 ファイルは、ローカルにインストールして「<code><a class="external" rel="freelink">chrome://</a></code>」で始まる chrome URL と呼ばれる特殊な URL から呼び出すことによってのみ、制限されている命令の実行が許可されるようになります。 chrome URL を用いてファイルにアクセスした場合、ファイルはローカルファイルや<span style="border-bottom: 1px dashed green;" title="preferences">設定情報</span>、ブックマークへのアクセスを含めた特権的な操作を実行可能な高い権限を得ます。 言うまでもないことですが、ウェブページは、デジタル証明書による署名がされていて、かつ利用者がそれらの命令を実行するための許可を与えたものでもないかぎり、こういった特権は取得できません。 <span style="color: darkgreen; background: #ef9;">【訳注: <a class='"external"' href='"http://www.mozilla.org/projects/security/components/signed-scripts.html"'>スクリプトに署名して特権を与える方法</a>】</span></p> + +<p><strong>chrome</strong> パッケージの登録は Firefox の<span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span>がブラウザに機能を追加するための方法です。 拡張機能は複数の XULファイル、Javascript、スタイルシート、画像を1つのファイルにまとめたファイルです。 このファイルは ZIP ユーティリティを用いて作ることが出来ます。 利用者がそのファイルをダウンロードしたとき、それは利用者のマシンにインストールされることになります。 拡張機能は、<a href="ja/Overlay">オーバーレイ</a>と呼ばれる XUL 特有の機能を使用して、拡張機能の中の XUL と、ブラウザの持つ XUL を結合することにより、ブラウザの中に組み込まれます。 利用者からは、この挙動は、拡張機能がブラウザを<em>修正している</em>ように見えるかもしれません。 しかし、実際には、コードは完全に分けられているため、拡張機能は簡単にアンインストールすることが可能になっています。 もちろん、登録されたパッケージが、必ずオーバーレイを使用しなければならないわけではありません。 オーバーレイを使わない場合、メインのブラウザインターフェースからはアクセスすることは出来ませんが、 chrome URL がわかっている場合、その URL を経由してアクセスすることが可能です。</p> + +<p>スタンドアローンな XUL アプリケーションにも、同様の方法で XUL コードを含めることができます。 もちろん同様とはいっても、アプリケーションのための XUL は、拡張機能のように別々にインストールされるのではなく、アプリケーションの一部としてインストールされることになるはずです。 どちらにしても、この XUL コードも、アプリケーションが UI を表示できるように chrome システムに登録されることになります。</p> + +<p>実は Mozilla ブラウザ自身が、XUL ファイル、JavaScript、スタイルシートを含んだパッケージの集合体であることは注目に値すると思います。 ブラウザは、ほとんどの拡張機能より、ずっと大きく洗練されたものではありますが、 ブラウザのファイルも、chrome URL を通してアクセスされることによって強化された権限を持ち、他のパッケージと同様に動作します。 Firefox や Thunderbird をはじめとする他の様々なコンポーネントはすべて XUL で書かれていて、どれも chrome URL からアクセスすることが可能です。</p> + +<p>chrome URL は常に 「<a class="external" rel="freelink">chrome://</a>」 で始まります。 「<span class="nowiki">http://</span>」 URL が常にリモートの Web サイトを指し、「<a class="external" rel="freelink">file://</a>」 URL が常にローカルファイルを指すのと同様に、「<a class="external" rel="freelink">chrome://</a>」 URL は、常にインストールされているパッケージや拡張機能を指しています。 次のセクションでは chrome URL の記法についてより詳しく見ていきます。 chrome URL を通してコンテンツへアクセスする場合、他の URL では得られない、上で述べた様な<span style="border-bottom: 1px dashed green;" title="privilege">特権</span>が与えられることに特に注意してください。 例えば、HTTP URL には何ら特権が与えられることはなく、ローカルファイルを読ませようとしたりするとエラーが生じます。 一方、chrome URL から読み込まれたファイルからは、制約無しにファイルを読むことが可能です。</p> + +<p>この違いは重要です。 つまり、利用者のブックマークを読み出すといった、Web ページのコンテンツからはできないことが、いくつか存在します。 この違いは表示されているコンテンツの種類には関係なく、URL の種類にのみ依存します。 HTML と XUL のどちらであっても、ウェブサイトに置かれた場合は、特別の権限が付与されることはありません。 一方 chrome URL により読み込まれた場合、HTML と XUL は、両方とも強化された権限を得ることになります。</p> + +<p>XUL をウェブサイトで利用するには、 HTML ファイルのときと同様に、単にウェブサイトに置いて、その URL をブラウザで読み込みます。 ウェブサーバ側では、 XUL ファイルのコンテントタイプを「<strong><code>application/vnd.mozilla.xul+xml</code></strong>」として送信する様に設定しておく必要があります。(例えば PHP を利用する場合は、「<code>header('Content-type: application/vnd.mozilla.xul+xml');</code>」のようにします)。 このコンテントタイプによって Mozilla は HTML か XUL かの違いを識別します。 Mozilla はファイルシステムから読み出す場合を除いてファイル名の拡張子を利用しません。 とはいっても、全ての XUL ファイルの拡張子は .xul にしておくべきだと思います。 これによって、あなたのマシンにある XUL ファイルを、ブラウザから開いたり、ファイルマネージャーでダブルクリックすることにより読み出すことができるようになるからです。</p> + +<div class="note">リモートから XUL を読み込む場合には、出来ることに大きな制約がかけられていることを覚えておいてください。</div> + +<p><span id="Document_types:_HTML_XML_XUL_CSS"></span></p> + +<h4 id="HTML.E3.80.81XML_.E3.81.A8_XUL_.E6.96.87.E6.9B.B8.E5.9E.8B.E3.81.AB.E3.81.A4.E3.81.84.E3.81.A6" name="HTML.E3.80.81XML_.E3.81.A8_XUL_.E6.96.87.E6.9B.B8.E5.9E.8B.E3.81.AB.E3.81.A4.E3.81.84.E3.81.A6">HTML、XML と XUL 文書型について</h4> + +<p>Mozilla は、機能の大部分が共有されているにもかかわらず、HTML と XUL のために明確に違った種類の<span style="border-bottom: 1px dashed green;" title="document object">文書オブジェクト</span> (<a href="ja/DOM">DOM</a>) を使っています。 Mozilla には、3 種類の主要な文書「HTML」「XML」「XUL」があります。 当然ですが、HTML 文書オブジェクトは HTML 文書のために使われており、XUL 文書オブジェクトは XUL 文書のために使われています。 XML 文書オブジェクトは、それ以外のタイプの XML 文書に使われています。 XUL も XML であるため、XUL 文書オブジェクトは、汎用的な XML 文書オブジェクトのサブタイプになります。 これらの機能面での違いはわずかです。 例えば HTML ページのフォームコントロールには 「<code>document.forms</code>」 プロパティからアクセス可能ですが、XUL には HTML の意味でのフォームというものがないため、このプロパティは XUL 文書には存在しません。 逆に、オーバーレイやテンプレートといった XUL 特有の機能は XUL 文書でしか利用できません。</p> + +<p>この文書型の違いは重要です。 XUL の多くの機能は、文書型に依存しないため HTML や XML 文書で利用することが可能です。ただし、それ以外の機能では適切な文書型が必要になります。 例えば、 XUL のレイアウト型の要素 は XUL 文書型には機能的に依存していないため、他の文書型でも使うことが可能です。</p> + +<p>上で述べた点を要約します。</p> + +<ul> + <li>Mozilla では <a href="ja/HTML">HTML</a> と <a href="ja/XUL">XUL</a> のいずれに対しても同じエンジンを使用してレンダリングを実行し、外観の指定には <a href="ja/CSS">CSS</a> が用いられます。</li> + <li>XUL は「リモートサイト」、「ローカルファイルシステム」、あるいは「パッケージとしてインストールされた後に <a href="ja/Chrome">chrome</a> URL からアクセスされる」ことによって読み込まれます。最後のものがブラウザの<span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span> が行う動作になります。</li> + <li>chrome URL を用いれば、インストールされたパッケージにアクセスすることができ、それらを強い権限を与えて開くことが可能です。</li> + <li>HTML 、XML 、 XUL はそれぞれ異なる文書型です。いくつかの機能はどの文書型でも利用できますが、いくつかの機能は特定の文書型に固有のものになります。</li> +</ul> + +<p><br> + ここから数セクションに渡って Mozilla にインストールできる chrome パッケージの基本的な構造について説明していきます。 ですが、簡単なアプリケーションの作成に早くとりかかりたいのであれば、「<a href="Creating_a_Window">ウィンドウを作成する</a>」までスキップして、このセクションの残りは後回しにしてもかまいません。</p> + +<p><span id="Package_Organization"></span></p> + +<h3 id=".E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.81.AE.E7.B7.A8.E6.88.90" name=".E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.81.AE.E7.B7.A8.E6.88.90">パッケージの編成</h3> + +<p>Mozilla は、コンポーネントを、必要ならばいくつでも初期インストールに含めることが可能な構成になっています。 また、個々の拡張は 別々の chrome URL を持つコンポーネントになります。 さらに、インストールされる個々の<span style="border-bottom: 1px dashed green;" title="skin">スキン</span>や<span style="border-bottom: 1px dashed green;" title="locale">ロケール</span>についても、1 つのコンポーネントが含まれることになります。 これらのコンポーネント、あるいはパッケージのそれぞれが、ユーザーインターフェイスを記述した一連のファイルで構成されています。 例えば、メッセンジャーコンポーネントには、メールメッセージ一覧ウィンドウ、 編集ウィンドウ、アドレス帳ダイアログについての記述が含まれています。</p> + +<p>Mozilla に付属して提供されるパッケージは、 Mozilla をインストールしたディレクトリにある chrome ディレクトリの下に置かれています。 Mozilla のブラウザやメールクライアント、その他アプリケーションで利用されるユーザインターフェイスを記述するファイルは、全て chrome ディレクトリの下に置かれます。 通常は、利用者が個別にインストールした<span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span> (利用者ごとの拡張機能のためのディレクトリにインストールされます) を除いて、アプリケーションの XUL ファイルはこのディレクトリに置かれます。 単純にファイルを「chrome」ディレクトリにコピーするだけで、特権を与えたり、chrome URL からアクセス可能にはなりません。 特権を得るためには、<span style="border-bottom: 1px dashed green;" title="manifest file">マニフェストファイル</span>を作成して、chrome ディレクトリに置いてください。 このファイルは、1 行が長めですが 2 行程度の記述ですむため、簡単に作成することができます。 このファイルは、chrome URL と、XUL ファイルが置かれているディスク上のディレクトリパスとの対応付けのために使われます。 このファイルを作る方法の詳細は、<a href="ja/XUL_Tutorial/Manifest_Files">後のセクション</a>で説明します。</p> + +<p>chrom URL を通してアクセス可能なコンテンツを作成する唯一の方法は、次の数セクションで説明するように、パッケージを作成することになります。 なお、ディレクトリ名を「chrome」としたのは、Mozilla に付属する chrome パッケージを保持するディレクトリ名としてふさわしいと思われたためです。</p> + +<p>更に紛らわしいのですが、chrome という単語が現れる場所が、他にも 2 つあります。 1 つは 「-chrome」 コマンドライン引数で、もう 1 つは <a href="ja/DOM/window.open">window.open()</a> 関数の chrome 修飾子です。 いずれにおいても特権が付与されるわけではありません。 これらはメニューバーやツールバーなどの、ブラウザ UI (ユーザーインターフェイス) を持たない、トップレベルの新規ウィンドウを開くためのものです。 この機能は、もっと複雑な XUL アプリケーションでは頻繁に利用されます。 (ダイアログボックスの周囲からはブラウザ UI は消したいはずです)。</p> + +<p>パッケージのファイルは、通常 1 つの JAR ファイルにまとめられます。 JAR ファイルは、ZIP ユーティリティで作成したり、中身を調べたりすることが可能です。 例えば、パッケージの基本的な構造を確認するために、 Mozilla の chrome ディレクトリ内の JAR ファイルをいくつか開いてみることができます。 パッケージは、通常 JAR ファイルにまとめられますが、ディレクトリ内に展開された形で置いて、アクセスすることも可能です。 通常、パッケージをそのような形で配布することは無いと思いますが、開発時には、再パッケージや再インストールをせずに、ファイルを直接編集するだけで XUL ファイルを再読み込みさせることができるため便利です。</p> + +<p>ただし、デフォルトでは、Mozilla は、アプリケーションのセッションが再度呼び出されたときのために、アプリケーションの XUL ファイルやスクリプトを解析したあと、コンパイル前のものをキャッシュとしてメモリに保存します。 このことは、処理性能の改善に効果がありますが、 XUL のソースファイルを変更しても、再読み込みされなくなってしまう副作用が発生します。 開発作業の便宜のために、この機構を停止するためには、設定の「nglayout.debug.disable_xul_cache」を変更する必要があります。 Firefox では、アドレス入力欄に「about:config」と入力して、上記の値を「true」に設定するか、user.js 設定ファイルを手で編集して、以下の行を追加します。</p> + +<pre class="eval">pref("nglayout.debug.disable_xul_cache", true); +</pre> + +<p>chrome パッケージは、通常３つの異なる「パート」からなりますが、どのパートも必須ではありません。 各パートはそれぞれ異なるディレクトリ下に格納されます。 その 3 つとは、以下で述べる「コンテント」、「スキン」、「ロケール」です。 パッケージには、1 つかまたは複数のスキンやロケールを提供していて、利用者が、それをインストールすることによって、元からあるものを置き換えるようなものもあります。 付け加えれば、そのパッケージは、それぞれ異なる chrome URL でアクセスする、いくつかの異なるアプリケーションを含んでいるかもしれません。 以上のように、このパッケージシステムは、必要ならば、どんなパートでも含めることが可能である一方、他国の言語のテキストといった、他のパートを一部だけ別途ダウンロードすることも可能であるといった具合いに十分な柔軟性があります。</p> + +<p>3 種類の chrome パッケージについて以下に説明します。</p> + +<ul> + <li><strong>コンテント</strong> - ウィンドウとスクリプト<br> + ウィンドウとそれに含まれるユーザインターフェイス要素の定義です。 これらは拡張子 xul を持つ XUL ファイルに収められます。 コンテントパッケージには複数の XUL ファイルが含まれることがありますが、メインウィンドウのファイル名はパッケージ名と同じにする必要があります。 例えば editor パッケージには editor.xul というファイルが含まれます。 スクリプトは、別ファイルに分けて、 XUL ファイルと同じ場所に置いておきます。</li> + <li><strong>スキン</strong> - スタイルシートと画像、その他テーマ専用のファイル<br> + スタイルシートはウィンドウの外観の詳細を記述するもので、アプリケーションのスキン (テーマ) の変更を容易にするために XUL ファイルとは分けて収められます。 また、画像もここに収められます。</li> + <li><strong>ロケール</strong> - ロケール専用のファイル<br> + ウィンドウに表示されるあらゆるテキストが、ここに分けて収められます。 これにより、利用者が自身の言語用セットを持つことが可能になります。</li> +</ul> + +<p><span id="Content_Packages"></span></p> + +<h3 id=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8" name=".E3.82.B3.E3.83.B3.E3.83.86.E3.83.B3.E3.83.88.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8">コンテントパッケージ</h3> + +<p>JAR ファイルは、ファイル名から内容を推測することはできるものの、実際に中身を見てみないと、確かにそうだとは言えないと思いますので、 実際に Firefox に含まれているブラウザパッケージを例に使って見てみることにします。 このパッケージファイルである <code>browser.jar</code> を展開した場合、以下のようなディレクトリ階層になっていることが確認できるはずです。</p> + +<pre>content + browser + browser.xul + browser.js + -- その他のブラウザ用 XUL や JavaScript ファイル -- + bookmarks + -- ブックマークファイル -- + preferences + -- 設定ファイル -- +. +. +. +</pre> + +<p>まず、トップレベルのディレクトリ名が <code>content</code> であることから、これがコンテントパッケージであることが簡単にわかります。 このディレクトリ名は、もしスキンであれば、通常 <code>skin</code> となり、ロケールであれば、通常 <code>locale</code> になります。 この命名規則は絶対ではないのですが、パッケージのパートを判り易くするために、一般的な慣習として使われています。 パッケージによっては、コンテント、スキン、ロケールの全てを持っているものもあります。 その場合は、各パートごとのサブディレクトリが全て作成されているのが確認できるはずです。 例えば、Chatzilla が、この形式で配布されています。</p> + +<p>次に、<code>content/browser</code> ディレクトリには、拡張子が <code>.xul</code> や、 <code>.js</code> のファイルが多数含まれています。 このうち、XUL ファイルは、拡張子 <code>.xul</code> を持つものです。 また、拡張子が <code>.js</code> のものは JavaScript ファイルで、 ウィンドウが提供する機能を実装したスクリプトが置かれています。 多くの XUL ファイルは、そのファイルに関連付けられたスクリプトファイルを持っており、また、そのうちのいくつかは複数のスクリプトファイルを持っています。</p> + +<p>上のリストには 2 つのファイルが含まれています。 もちろん、これ以外のファイルもあるのですが、簡単にするため省略しています。 この、<code>browser.xul</code> は、メインのブラウザウィンドウを記述する XUL ファイルになります。 コンテントパッケージのメインウィンドウは、パッケージ名に拡張子 <code>.xul</code>を付加した名前にする必要があります。 したがって、この場合はパッケージ名が 「<code>browser</code>」 なので、「<code>browser.xul</code>」 は必ず存在することが期待できます。 また、いくつかのそれ以外の XUL ファイルは、別のウィンドウの記述に使われています。 例えば、<code>pageInfo.xul</code> ファイルは、「ページの情報」ダイアログの記述になります。</p> + +<p>既存の多くのパッケージには、パッケージ情報、作者、使用するオーバーレイを記述した <code>contents.rdf</code> が含まれています。 しかし、このファイルを使う方法は旧式になり、簡単な機構に変更されています。 新しい方法は、上述のマニフェストファイルによるもので、このファイルは、chrome ディレクトリ内で <code>.manifest</code> という拡張子を持ったファイルとして見つかるはずです。 具体的には、<code>browser.manifest</code> ファイルが、ブラウザパッケージについての記述に使用されることになります。</p> + +<p>また、<code>bookmarks</code> や <code>preferences</code> といった、いくつかのサブディレクトリは、ブラウザコンポーネントの付加的な部分と対応しています。 これらが別ディレクトリに置かれているのは、単にファイルの置き場所を整理しておくためです。</p> + +<p><span id="Skins_or_Themes"></span></p> + +<h3 id=".E3.82.B9.E3.82.AD.E3.83.B3.E3.81.BE.E3.81.9F.E3.81.AF.E3.83.86.E3.83.BC.E3.83.9E" name=".E3.82.B9.E3.82.AD.E3.83.B3.E3.81.BE.E3.81.9F.E3.81.AF.E3.83.86.E3.83.BC.E3.83.9E">スキンまたはテーマ</h3> + +<p>Mozilla の内部コードから「スキン」と呼ばれているものと、ユーザインターフェイスから「テーマ」と呼ばれているものは、どちらも同じものを指しています。 例えば、<code>classic.jar</code> ファイルは、Firefox と一緒に配布されるデフォルトのテーマが記述されているファイルです。 このファイルはコンテントパッケージと類似の構造を持っています。 以下に、<code>classic.jar</code> ファイルを調べた結果を示します。</p> + +<pre>skin + classic + browser + browser.css + -- その他のブラウザスキンファイル -- + global + -- グローバルスキンファイル -- +. +. +. +</pre> + +<p>このディレクトリ構造も、必須ではないものの便利に使うことができます。 極端なことをいえば、すべてのファイルをトップディレクトリに置いて、サブディレクトリを使わないような構造でもかまいませんが、 大きなアプリケーションでは、ファイルをコンポーネント単位でサブディレクトリに分けておくのが普通です。 上記の例では、ブラウザのテーマに関するファイルのためのディレクトリと、グローバルなテーマに関するファイルのためのディレクトリが存在しています。 <code>global</code> ディレクトリには、すべてのパッケージに適用可能な、汎用のスキンファイルが含まれています。 これらのファイルは、独自に開発されたスタンドアローンなアプリケーションも含めて、すべてのコンポーネントに適用されます。 また、<code>global</code> の部分には、共通の XUL ウィジェットすべての外観が定義されているのに対して、 それ以外のディレクトリは、そのディレクトリ名が示すアプリケーションに限定したファイルが置かれています。 なお、Firefox では、グローバルとブラウザのテーマファイルを、1 つのアーカイブにまとめていますが、それらを別のアーカイブに分けておくことも可能です。</p> + +<p>スキンは、CSS ファイルとたくさんの画像ファイルから構成されていて、インターフェイスの外観を定義するために使用されます。 <code>browser.css</code> ファイルは、<code>browser.xul</code> から利用されて、ブラウザインターフェイスの様々な部分の外観を定義するスタイルが含まれています。 ここでも、<code>browser.css</code> ファイルの名前が、パッケージ名と同じであることに注意してください。 機能面での変更を行うことなく、この CSS ファイルを変更するだけで、ウィンドウの外観を調整することが可能です。 XUL の部分は元のものを残し、スキンの部分だけを単独で変更することで、 新しいテーマを作成することができます。</p> + +<p><span id="Locales"></span></p> + +<h3 id=".E3.83.AD.E3.82.B1.E3.83.BC.E3.83.AB" name=".E3.83.AD.E3.82.B1.E3.83.BC.E3.83.AB">ロケール</h3> + +<p>ファイル <code>en-US.jar</code> は、各コンポーネントに対する言語情報が記述されており、このファイルの場合は、米国英語 (US English) 用になります。 スキンと同様に、それぞれ言語ファイルには、対象とするパッケージで使用するテキスト情報を特定の言語に翻訳したものが含まれています。 ロケールのファイル構造については、他のパッケージとほとんど同じであるため、ここでは内容のリストは省略します。</p> + +<p>ローカライズ (地域化) されたテキスト情報は、パッケージ中の DTD ファイルと、プロパティファイルの 2 種類のファイルに収められています。 DTD ファイルは、拡張子が <code>.dtd</code> のファイルで、このファイルには、ウィンドウで使用される個々のテキストの実体 (<span style="color: green;">entity</span>) 宣言が含まれています。 例えば、<code>browser.dtd</code> ファイルは、ブラウザの各メニューにある操作項目テキストの実体宣言を含んでいます。 また、各メニュー操作に対応するキーボードショートカットも、言語によって異なる可能性があるため、この DTD ファイルで定義されています。 DTD ファイルは、XUL ファイルから参照されますが、通常、各 XUL ファイルから参照する DTD ファイル は 1 つだけにします。 また、パッケージの <code>locale</code> パートには、プロパティファイルも含まれています。 このファイルも、 DTD ファイルと類似していますが、スクリプトから利用される点が異なります。 例えば、<code>browser.properties</code> には、ブラウザで利用されるローカライズされた文字列がいくつか含まれています。</p> + +<blockquote>訳注: 実体宣言は、XML の仕様の 1 つで、特定の文字(列)を「実体」として XML の文書型定義 (DTD) の中で宣言し、各 XML ファイルでは、割り当てたキーワードを元に参照するようにすることで、用語 (言語) の変更の影響が個々の XML 文書に及ばないようにする仕組みです。</blockquote> + +<p>上記の構造によって、別の言語用の新しいロケールを追加するだけで、 Mozilla やコンポーネントをその言語に対応させることができます。 このとき、XUL のコードには、何も変更を加える必要はありません。 さらに、他の開発者が、あなたが作成したコンテントパートに適用するためのスキンやロケールを、別のパッケージとして提供することも可能です。 このとき、新しいテーマや言語をサポートを提供するために元のパッケージに変更を加える必要はありません。</p> + +<blockquote>訳注:上記は、元のパッケージが、ロケールを作成できるように XUL ファイルには直接文字列を書き込まず、実体参照を使っている場合の話です。 もし、XUL ファイルに、直接文字列が埋め込まれている場合は、まずそれらの文字列を洗い出して、実体宣言にまとめ、XUL ファイルは 実体参照を使うように変更するといった作業が必要になります。</blockquote> + +<p><span id="Other_Packages"></span></p> + +<h3 id=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8" name=".E3.81.9D.E3.81.AE.E4.BB.96.E3.81.AE.E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8">その他のパッケージ</h3> + +<p>Mozilla の chrome ディレクトリには、ツールキット (<span style="color: green;">toolkit</span>)、またはグローバル (<span style="color: green;">global</span>) と呼ばれる特別なパッケージが存在します。 <code>global</code> ディレクトリについては、スキンの説明のところで触れましたが、 <code>toolkit.jar</code> ファイルには、それに対応するコンテントパート、 つまり、グローバルなダイアログなどの定義が含まれています。 また、テキスト入力欄やボタンといった、共通して利用される様々なウィジェットに対するデフォルトの外観や機能も定義されています。 このため、スキンパッケージの <code>global</code> パートに置かれたファイルは、 すべての XUL インターフェイス要素に対するデフォルトの外観に関する記述を含むことになります。 なお、このツールキットパッケージは、すべての XUL アプリケーションから使用されます。</p> + +<p><span id="Adding_a_Package"></span></p> + +<h3 id=".E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.83.91.E3.83.83.E3.82.B1.E3.83.BC.E3.82.B8.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">パッケージを追加する</h3> + +<p>Mozilla と同時にインストールされるパッケージは、<code>chrome</code> ディレクトリに置かれますが、 必ずしも、そこに置く必要はありません。 追加でパッケージをインストールするとき、パッケージファイルは、マニフェストファイルが指してさえいれば、ディスク上のどこであってもかまいません。 便宜上、新しいパッケージは、<code>chrome</code> ディレクトリ内に配置するのが普通ですが、 別のディレクトリであればもちろん、(Windows の場合だと、UNC パスによってアクセス可能な) ローカルネットワーク上ですら、どこに置いても同じように働きます。 ただし、(ローカルファイルシステム上にマウントされている場合を除いて) リモートサイトに置くことはできません。</p> + +<p>XUL アプリケーションにパッケージを追加するときにインストール先として使用する <code>chrome</code> ディレクトリは 2 つあります。 1 つはアプリケーションがインストールされたのと同じ場所で、 もう 1 つは利用者のプロフィールを格納する場所の中になります。 前者にインストールされたパッケージは、すべての利用者で共有することが許可され、 後者にインストールされたパッケージは、固有、または特定の利用者に対してのみ許可されます。 拡張機能専用のディレクトリにインストールされた<span style="border-bottom: 1px dashed green;" title="Extension">拡張機能</span>も、通常はインストールした利用者に固有になります。 起動時に、これらの両方の chrome ディレクトリに置かれたすべてのマニフェストファイルは、 インストールされているパッケージを確認するために調べられます。</p> + +<p><br> + 次のセクションでは、chrome URL を使用して、chrome パッケージを参照する方法について見ていきます。 </p><div class="prevnext" style="text-align: right;"> + <p><a href="/ja/docs/XUL_Tutorial:Introduction" style="float: left;">« 前のページ</a><a href="/ja/docs/XUL_Tutorial:The_Chrome_URL">次のページ »</a></p> +</div> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p> </p> + +<div class="noinclude"> </div> |