WolframシステムのGrid,Row,Column

基本的コンストラクト

Wolfram言語は,スクリーンあるいはページ上に内容をレイアウトするための,後半に及ぶパワフルなコンストラクトを提供する.このコンストラクトは,初心者にとってもすぐに役立つものとして設計されており,しかも,あらゆる外観の部分に対しても細かい調整が可能である.

これらのコンストラクトは,タイプセット構造としてノートブック内に現れるコンストラクト,格子上に配列される内容を持つグラフィックスを生成する関数,フォーマットの詳細を調節するために格子内部に現れるコンストラクトの3つに分けることができる.

GridColumnRowはこのチュートリアルでGrid族と呼ぶ,最初のグループを形成する.Grid族を定義付ける特徴は,それがWolfram言語のタイプセットシステムと密接に統合された部分であるということである.つまり,どのような式であろうと内容として現れ,コンストラクト自身がウィンドウ幅あるいはその要素の大きさ等の変更に反応するということである.他のタイプセットコンストラクトと同様,Grid族のメンバは不活性なコンストラクトであり,評価されて別の形式になることはない.

Click for copyable input

これに匹敵するコンストラクトであるGraphics Grid族は,グラフィックスを扱う場合に特に便利な機能をサポートする.これらのコンストラクトはGraphicsGridGraphicsColumnGraphicsRowである.グラフィックスはGrid族で使うことができるが,サイズ変更と編集をサポートするGraphics Grid族はよりグラフィックスに向いている.Graphics Grid族は引数を取り新しいグラフィックス式へと評価される関数である.このことは,生成された格子をその環境での変化に反応させることは難しいが,インタラクティブに任意の注釈を加えたり,グラフィックスを追加したりが簡単にできるということを意味する.

Click for copyable input

最後の族である埋め込まれたコンストラクト族は格子自身の中に埋め込まれているコンストラクトから構成され,その内部から格子の外観を変更する.Itemは格子の要素が現れる領域を表すためにその周りをラップする.SpanFromLeftSpanFromAboveSpanFromBothは複数の行や列に渡り伸張する領域を生成するために使われる.

Click for copyable input

これらすべてのコンストラクトの基本的な例を以下に挙げる.

Grid族

Grid[{{expr11,expr12,},{expr21,expr22,},}]
二次元の格子に配列された でフォーマットするオブジェクト
Column[{expr1,expr2,}] の上,というように列に配列された でフォーマットするオブジェクト
Row[{expr1,expr2,}]数行に伸張する可能性のある行に配列された でフォーマットするオブジェクト

二次元フォーマットコンストラクトのGrid族

要素の格子.
In[684]:=
Click for copyable input
Out[684]=
要素の列.
In[686]:=
Click for copyable input
Out[686]=
要素の行.
In[685]:=
Click for copyable input
Out[685]=

Graphics Grid族

GraphicsGrid[{{g11,g12,},}] が二次元格子にレイアウトされるようなグラフィックスを生成する
GraphicsColumn[{g1,g2,}] の上というように, が列にレイアウトされるようなグラフィックスを生成する
GraphicsRow[{g1,g2,}] が行にレイアウトされるようなグラフィックスを生成する

二次元グラフィックスレイアウト関数のGraphics Grid族

グラフィックスの格子に要素を表示する.
In[678]:=
Click for copyable input
Out[678]=
グラフィックスの列に要素を表示する.
In[689]:=
Click for copyable input
Out[689]=
グラフィックスの行に要素を表示する.
In[691]:=
Click for copyable input
Out[691]=

埋め込まれたコンストラクト族

Item[expr,options]expr を内容として,また,指定されたオプションを expr を含む領域に適用して表示する
SpanFromLeft位置が左側の内容により占められていることを示す
SpanFromAbove位置が上の内容により占められていることを示す
SpanFromBoth位置が上と左の両方から占められていることを示す

GridおよびGraphics Grid族の中の要素として埋め込まれたときに特殊な意味を持つコンストラクト

要素の周りにスタイル情報を埋め込む.
In[708]:=
Click for copyable input
Out[708]=
最初の2列に渡りを伸張する.
In[709]:=
Click for copyable input
Out[709]=
最初の2行に渡りを伸張する.
In[710]:=
Click for copyable input
Out[710]=
最初の2列と2行に渡りを伸張する.
In[711]:=
Click for copyable input
Out[711]=

機能のクラス

Gridおよびその関連コンストラクトは,通常非常に少ないシンタックスでかなり外観をカスタマイズすることができる.下の表はサポートされる機能の種類を示している.詳細は後で説明する.

    • 格子の領域を分割するために,枠と分割線をどこにおいてもよい.
    • 格子とその内容は,多くの方法で配列および配置することができる.
    • 背景色とスタイルはどの領域にも適用できる.
    • 構造は伸張要素や自身が格子である要素を使って,精巧なものにすることができる.
    • 格子の大きさと間隔は調整することができる.

    上記のスタイル機能の他,さまざまな形式のインタラクティブな編集および動的動作が可能である.

オプションのシンタックス

格子の外観の詳細を調整するために,多数のオプションが使える.このセクションでは,そのようなオプションの多くで共有される共通のシンタックスを説明する.このシンタックスは格子全体にオプション値を割り当てるだけでなく,個々の行,列,さらには項目にまでオプション値を割り当てる方法を提供する.

Background等,多くのオプションに対する全体的なシンタックスは,Background->{specx,specy}のような形式に基づく.ここで は各列に対する値を含むモジュラシンタックスであり, は各列に対する値を含む.

specspec をすべての項目に適用する
{specx} を連続した水平の位置で適用する
{specx,specy} を連続した水平および垂直の位置で適用する
{specx,specy,rules}個々の 要素に対する明示的な規則も許可する

一般的なオプションのシンタックス

はどちらも,以下に説明する2つの形式を取ることができる.最初の形式は,指標の集合で所望の値に対する規則を与えるだけのものである.2つ目の形式は,値の列をリストで与えるということに基づいている.

列の指標とその背景色を指定する規則である.
In[8]:=
Click for copyable input
Out[8]=
上と等価である,連続した列に対して使用する背景色の値のリスト.
In[9]:=
Click for copyable input
Out[9]=

この2つのメソッドには,「規則の使用」および「リストの使用」に示すようにそれぞれ異なる利点がある.

規則の使用

規則は指定の行および列に指定の値を与えるという,直接的で判読可能なメソッドを提供する.

特定の列に背景色を設定する.
In[16]:=
Click for copyable input
Out[16]=
特定の行に背景色を設定する.
In[26]:=
Click for copyable input
Out[26]=

行数や列数が多いときは,規則を使うとそのいくつかに属性を設定するのに便利である.

可能な位置の中でわずかな数だけにオプションを適用する.
In[25]:=
Click for copyable input
Out[25]=

規則は,特定の格子要素や部分領域に値を与えるためにも使える.しかし,次に示すシンタックスは,概念的には同様でも および とは別のものである.

位置で要素の背景色を設定する.
In[27]:=
Click for copyable input
Out[27]=
要素からまでの領域に背景色を設定する.
In[28]:=
Click for copyable input
Out[28]=

規則は,規則の例外が存在する場合に,それが簡単に指定できる.しかし,格子のそれぞれの要素に手動で値を指定しようとしている場合は,それほど効率的とはいえない.

規則を使い,交互のパターンを手動で指定する.
In[31]:=
Click for copyable input
Out[31]=

反復パターンを作成するためには,代りに次のセクションで説明するリストシンタックスを使った方がよい.

リストの使用

リストで連続した値を与えることは,隣接行および列に対する多数のオプション値を指定するのに簡単で便利な方法である.

連続した列に対して使用する値をリストする.
In[52]:=
Click for copyable input
Out[52]=

また,値を循環的に使うことを表す部分リストを使うこともできる.

リストを循環的に使うよう指定する.
In[53]:=
Click for copyable input
Out[53]=

このような循環的な部分リストは,最初か最後で充填することができる.

循環部分の前に初期値の集合を与える.
In[58]:=
Click for copyable input
Out[58]=
値の最終値を与える.
In[57]:=
Click for copyable input
Out[57]=
中をデフォルトにする.
In[7]:=
Click for copyable input
Out[7]=

リストの位置は格子の位置に対応しているので,中ほどで単独の値を指定するためにはその前までの値をすべて与えなければならない.これをより直接的に行うためには,「規則の使用」で説明した規則を使う.

リストシンタックスを使い,5列目を赤にする.
In[61]:=
Click for copyable input
Out[61]=
背景色を直接割り当てるために規則を使う.
In[62]:=
Click for copyable input
Out[62]=

両方の使用

両方の長所を取り,格子の反復部分の指定にはリストシンタックスを,例外の指定には規則シンタックスを使うことができる.

最初と最後は赤にして,その他は青と緑を交互にした列.
In[746]:=
Click for copyable input
Out[746]=
最初と5番目の列以外はすべて青を使う.
In[89]:=
Click for copyable input
Out[89]=
{s1,s2,,sn} から まで使う.その後はデフォルトを使う
{{c}}すべての場合に c を使う
{{c1,c2}} を交互に使う
{{c1,c2,}}すべての を循環的に使う
{s,{c}}s を使う.その後は c を反復的に使う
{s1,{c},sn}を使う.その後は c を反復的に使い,最後に を使う
{s1,s2,,{c1,c2,},sm,,sn} 最初に の最初の列を使う.その後 を循環的に使用し,最後に の最後の列を使う
{s1,s2,,{},sm,,sn}最初に の最初の列を使い,サイトに最後の列を使う
{i1->v1,i2->v2,}位置 で何を使うかを指定する
{spec,rules}spec の指定をオーバーライドするために rules を使う

のシンタックスのまとめ

列,行,溝,項目

前のセクションで紹介した通り,Wolfram言語は格子の部分に応じてオプション値を変更するための柔軟なシンタックスを提供する.このセクションでは,その言語のコンテキストを提供し,細かい違いを述べる.

格子の用語

column項目の垂直の列
row項目の水平の列
item格子要素を含む領域
gutter連続する行あるいは列の境界

二次元格子の各部分

GridおよびGraphicsGridは格子の各部分を記述する場合と同じ慣習に従う.ColumnGraphicsColumnGraphicsRowも同じ一般的な慣習に従うが,2つの可能な次元のうちのひとつだけしか扱わない.また,Rowはこのシステムには入らない.

オプションの名前

以下の表は,それぞれのオプションが対処することのできる部分を示したものである.すべてのコンストラクトに対してすべてのオプションが有効であるとは限らない.任意のコンストラクトに対して生じ得るオプションは以下の凡例を参照.

Out[54]=
Out[53]=

Rowはどのようなオプションも取らない.

列の次に行

オプションに対するシンタックスを覚えるときに,最も重要なステップは列に対する値をまず指定し,次に行に対する値を指定するということである.

opt->valすべての項目に対して val を使う
opt->{colspec,rowspec}列に colspec を,行に rowpec を使う
opt->{colspec}列に colspec を,行にデフォルトを使う

GridおよびGraphicsGridに対するオプション構造

Wolfram言語では,水平設定 h,垂直設定 v のオプションは と指定する.この慣例が使われる代表的なオプションにImageSizePlotRangeがある.

格子では,これらの水平および垂直設定はそれぞれ列と行の値に対応する.これは,列は水平に重なっており,幅や位置等その他の属性も水平次元に対応しているためである.同様に行は垂直に重なっており,それらの属性は水平次元に対応している.

高さの2倍の幅のあるグラフィックスである.
In[37]:=
Click for copyable input
Out[37]=
下の格子では,項目の幅が2em,高さが1exである.
In[1]:=
Click for copyable input
Out[1]=
すべての列に同一の幅を使う代りに,各列に別の設定を与える.
In[29]:=
Click for copyable input
Out[29]=
In[2]:=
Click for copyable input
Out[2]=
連続する水平位置に異なる背景色を与えることもできる.
In[6]:=
Click for copyable input
Out[6]=

多くのGridオプションは,最終的に列,行,または格子内の項目に関連付けることができる.

しかし,行と列の間の溝を扱うオプションもある.

Dividers格子のどこに仕切り線を引くか
Spacings水平および垂直のスペース

行と列の間の溝に対するオプション

どの行および列にも関連付けられていない線.
In[85]:=
Click for copyable input
Out[85]=
これと枠を比較してみる.
In[86]:=
Click for copyable input
Out[86]=

DividersSpacingsのシンタックスは,他のオプションのシンタックスと全く同じである.特定の方向の n 項目の格子では,DividersSpacingsは,最初の要素の前から始めて最後の要素の後で終わるようにして,要素間に の隙間を指定することができる.

Item

最も細かい記述レベルはItemである.格子の中の各項目は,BackgroundAlignmentFrame等のオプションに対して,それぞれの値を持つことができる.

Itemは所望の設定を示すために明示的に使うことができる.
In[100]:=
Click for copyable input
Out[100]=
あるいは要素の 指標を使い,全体的な格子レベルで値を割り当てることもできる.
In[101]:=
Click for copyable input
Out[101]=
プログラムで生成された格子.
In[103]:=
Click for copyable input
Out[103]=
格子の全領域に設定を与える.
In[105]:=
Click for copyable input
Out[105]=
In[109]:=
Click for copyable input
Out[109]=

仕切り線と枠

Wolfram言語は格子にどのような仕切り線と枠を描画するかを記述するための広範なシステムを提供する.

Dividers列か行の間に仕切り線を描画する
Frame格子の領域の周りに枠を描画する
FrameStyle線に対して全体的なスタイルを使う

仕切り線と枠の描画のためのオプション

Frameを使い,領域あるいは領域の集合の4方すべてに線を引く.
In[131]:=
Click for copyable input
Out[131]=
特定の列あるいは行を強調する.
In[141]:=
Click for copyable input
Out[141]=

Frameは常に囲まれた領域の4方すべてに線を描画する.Dividersを使うとより細かく指定することができる.

In[140]:=
Click for copyable input
Out[140]=

仕切り線を使うときは,結果の線は1つの方向だけである.

In[147]:=
Click for copyable input
Out[147]=
In[146]:=
Click for copyable input
Out[146]=
中の仕切り線を描画する.
In[150]:=
Click for copyable input
Out[150]=

仕切り線と枠のスタイル

FrameStyleFrameDividersの両方に対して使われる基本スタイルを設定する.
In[94]:=
Click for copyable input
Out[94]=
In[95]:=
Click for copyable input
Out[95]=
FrameDividersはどちらもスタイルを値として許す.
In[50]:=
Click for copyable input
Out[50]=
In[48]:=
Click for copyable input
Out[48]=

一般に,HueThicknessDashingDotted等を含むどのような線あるいは色の指示子を使うこともできる.複数の指示子はDirectiveで組み合せることができる.

優先

矛盾したスタイルが与えられると,DividersFrameに優先する.またこれらはどちらもFrameStyleに優先する.Itemのスタイルは他のすべてに優先する.

仕切り線と枠は同時に加えることができる.
In[177]:=
Click for copyable input
Out[177]=
異なるソースからのスタイルは一緒にすることができる.
In[185]:=
Click for copyable input
Out[185]=

整列と位置

美しい格子には整列を必要とすることが多い.Wolfram言語では格子の整列方法を多数サポートしている.

Alignmentオプションはグリッド全体に渡すことができる.

内容を右に整列させる.
In[53]:=
Click for copyable input
Out[53]=

異なる列に対して異なる水平整列を,異なる行に対して異なる垂直整列を指定することができる.

最初の列を右に整列させ,2番目の列を左に整列させる.
In[61]:=
Click for copyable input
Out[61]=

格子の各項目に異なる整列を指定することができる.

位置の要素を左に,位置の要素を右に整列させる.
In[62]:=
Click for copyable input
Out[62]=
AlignmentItemで設定することもできる.Itemの指定は優先される.
In[63]:=
Click for copyable input
Out[63]=

小数点,あるいは他の文字を整列させることができる.

"."で整列させる.
In[65]:=
Click for copyable input
Out[65]=

取り囲まれた環境の中で格子の位置を決めるにはBaselinePositionを使うとよい.

デフォルトの位置.
In[67]:=
Click for copyable input
Out[67]=
格子の下を周囲の式のベースラインに揃える.
In[73]:=
Click for copyable input
Out[73]=
要素のベースラインが全体的なベースラインになるよう格子を整列させる.
In[74]:=
Click for copyable input
Out[74]=

背景とスタイル

一般的な場合

要素の集まりを扱う場合,Gridを使うとそれを一様な背景で設定することができる.

要素にはそれ自身の背景色があることもあるが,要素を並べただけでは不格好な隙間ができることがある.

In[193]:=
Click for copyable input
Out[193]=

Gridおよびその関連関数は,その要素を含むすべての項目全体に背景色を施す.

In[194]:=
Click for copyable input
Out[194]=

より高度なシンタックスを使うと,さまざまなパターンを作成することができる.

背景を交互にする.
In[195]:=
Click for copyable input
Out[195]=
In[196]:=
Click for copyable input
Out[196]=
交差する2つの行および列をハイライトする.
In[197]:=
Click for copyable input
Out[197]=
格子の内部に,特別な項目を持つ背景を埋め込む.
In[107]:=
Click for copyable input
Out[107]=

オーバーラップする背景設定の優先順位

以下のリストシンタックスで与えられる背景は交差する.
In[198]:=
Click for copyable input
Out[198]=
指標を使い,特に指定された背景が優先となる.
In[199]:=
Click for copyable input
Out[199]=
指標の付いた列は指標の付いた行に優先する.
In[200]:=
Click for copyable input
Out[200]=
Itemで指定された背景は最も優先順位が高い.
In[201]:=
Click for copyable input
Out[201]=

伸張とネスト

二次元空間の高度な分割は,ネストされた格子のコンストラクトおよび/または伸張要素の使用で実現できる.

名前の通り,伸張要素とは項目が複数の列,行,その両方に渡り伸びるものである.

を最初の2列に渡り伸張させる.
In[709]:=
Click for copyable input
Out[709]=
を最初の2行に渡り伸張させる.
In[710]:=
Click for copyable input
Out[710]=
を最初の2行および2列に渡り伸張させる.
In[711]:=
Click for copyable input
Out[711]=

伸張領域は長方形でなければならない.長方形に収まらない項目は伸張させることができないため,伸張文字を表示する.

伸張は長方形でのみ可能である.
In[75]:=
Click for copyable input
Out[75]=
伸張要素を使うと多数のレイアウトが実現できるが,グリッドコンストラクトをネストしただけの方が速く簡単なことがある.
In[81]:=
Click for copyable input
Out[81]=
In[84]:=
Click for copyable input
Out[84]=

複雑な格子では特にそうであるが,特別に所望される構造を生成するためには,伸張の複雑なシステムを設計しようとするよりも,RowおよびColumnを使った方が簡単である.

サイズ変更とスペース

格子のサイズ変更

Gridは通常その要素の大きさを変更しない.また,行と列はデフォルトで内容が表示できるようできるだけ狭くなっている.

In[275]:=
Click for copyable input
Out[275]=

上の例では,2行目の方が1行目よりずっと高く,2列目の方が1列目よりも狭くなっており,要素の大きさは全く変更されていない.

もし格子の中の要素がインタラクティブに,または動的に変更されると,格子全体の大きさが適切に調整される.

例外として,Buttonはデフォルトで利用可能なスペースを満たすよう拡張する.

In[277]:=
Click for copyable input
Out[277]=

ItemSizeを使うとデフォルトの動作をオーバーライドすることができる.

すべての項目を同じ大きさにする.
In[278]:=
Click for copyable input
Out[278]=
個々の列と行に幅と高さを割り当てる.
In[256]:=
Click for copyable input
Out[256]=

ItemSize対して使われる単位は「ex」,「em」として知られるタイプセット単位である.

Scaledを使うと,囲んでいる領域の割合として幅を指定することもできる.

最初の2つの列をそれぞれページ幅の.3に指定する.
In[274]:=
Click for copyable input
Out[274]=

格子の中の改行

列が狭すぎる場合,テキスト的な項目は改行される.この場合行は指定の最小値よりも高くなる.

In[266]:=
Click for copyable input
Out[266]=
ItemSize->Automaticでは,テキスト項目はページ幅で改行される.
In[271]:=
Click for copyable input
Out[271]=
ItemSize->Fullでは,改行は禁止される.
In[273]:=
Click for copyable input
Out[273]=

GraphicsGridのサイズ変更

GraphicsGridはデフォルトで項目がすべて同じ大きさの格子を返す.

In[286]:=
Click for copyable input
In[289]:=
Click for copyable input
Out[289]=

これは要素全体に対して適切な縦横比を自動的に選ぶ.

これとGridの例を比較してみると,後者は全体の大きさも縦横比も考慮しないことが分かる.

In[290]:=
Click for copyable input
Out[290]=

GraphicsGridItemSizeオプションはサポートしないがImageSizeはサポートする.

In[294]:=
Click for copyable input
Out[294]=