[Login] 
兄弟は基本的には重なっていないという前提で,重なり部分が32pixelより小さい場合は兄弟のつもりが誤差で重なってしまったとして兄弟を結び,大きい場合は兄弟にするつもりがなくて重なってしまったとみなして兄弟関係を結ばないように変更しました.(ver. 0.58以降)

意図的に重ねる場合は親子関係のほうを使います.
2007/06/26 16:48:14link

編集モードでは,自動配置の参考となるように,ガイドを表示することができます.

コントロールパネルの「Guide」にチェックを入れると,兄弟関係と距離を示す青いラインが表示されます.

adminユーザの場合,「Frame」にチェックを入れると,すべてのスプライトの範囲を示す枠が表示されます.兄弟間の枠が重ならず,その間に青い兄弟のラインが表示されていれば,大抵の場合,自動配置はうまく実行されます.

4.自動配置のガイド表示

link

(注意)

兄弟の関係は親子よりも流動的です.弟にとってはもっとも上下方向に近接するスプライトが兄となります.スプライトを保存したときの最近接スプライトは,表示のときには表示環境や周りの親子兄弟の自動配置の結果により変わることがあり,兄弟間の位置関係はこの新たな兄を基準として再現されます.

次の場合のみは必ず保存したときのスプライトを兄として扱います.
・保存のとき,兄弟が重なり合っている場合
・Sibling-TB,BBで,表示のとき,保存したときの兄が弟よりも上方にある場合
・Sibling-BT,TTで,表示のとき,保存したときの兄が弟よりも下方にある場合

link
Sibling-BT(Bottom-Top),Sibling-TT(Top-Top)
 上記を上下方向に逆転させたものです.
 両スプライトともに親との関係がBTの場合,基本的には兄の底辺と弟の上辺との距離によって位置関係が定められます(Sibling-BT(a)).
 両スプライトが重なり合っている場合は,距離が兄の高さの半分に満たないとき,Sibling-BTに分類されます(Sibling-BT(b)参照).
 この距離が兄の高さよりも大きいときは,Sibling-TTに分類されます.Sibling-TTでは兄の上辺と弟の上辺との距離によって位置関係が定められます
link
Sibling-BB
Sibling-TB(b)
Sibling-TB(a)
図中,青い矢印は記録される兄と子の上下の余白を示します.編集モードのコントロールパネル上にある「Guide」チェックボックスを入れてスプライトを選択すると,この関係が表示されます.
link
兄弟の範囲

 ・ここでは,同じ親を持つスプライトのうち,もっとも上下方向に近接するスプライトのみ兄弟として扱います.
 ・左辺,右辺を上下に延長したとき,交わり合わないスプライト同士は,ここでは兄弟として扱いません.
 ・TTの親子関係を持つスプライトとBTの親子関係を持つスプライトは,ここでは兄弟として扱いません.

兄弟の区別

 兄と弟との区別のつけ方は,親との関係によって変わります.

 ・両スプライトともに親との関係がTT,あるいはTBの場合は,底辺の位置を比較してより上方にあるスプライトのほうが弟
 ・両スプライトともに親との関係がBTの場合は,上辺の位置を比較してより下方にあるスプライトのほうが弟.
 ・一方がTTの親子関係を持ち,もう一方がBTの親子関係を持つ場合,BTのほうが弟.
link
Sibling-TB(Top-Bottom),Sibling-BB(Bottom-Bottom)
 両スプライトともに親との関係がTT,あるいはTBの場合,基本的には兄の上辺と弟の底辺との距離によって位置関係が定められます(Sibling-TB(a)).
 両スプライトが重なり合っている場合は,距離が兄の高さの半分に満たないとき,Sibling-TBに分類されます(Sibling-TB(b)参照).
 この距離が兄の高さよりも大きいときは,Sibling-BBに分類されます.Sibling-BBでは兄の底辺と弟の底辺との距離によって位置関係が定められます.
link
2つのスプライトが同じ親を持つ兄弟関係であるとき,兄(E)弟(Y)間の位置関係は4つの型に分類されています.配置調整はこの分類と兄弟間の余白の値を再現する位置へ弟スプライトを移動することによって行われます.
link

3.2 兄弟間の配置調整

link
PositLogマニュアル・目次
例外など
 親を持たないスプライトもページの原点を仮想的な親として持って自動配置調整を受けます.原点はDocumentタイプのページではHOME位置のページ左上に,MapタイプのページではHOME位置のページ中央にあります.
 編集モードでGuide表示をすると,この仮想的な親からの矢印も表示されます. 原点をスプライト内に含む場合,そのスプライトのみ例外的に親子関係による配置調整を受けません.
link
図中,見やすくするため親と子のスプライトは重ねていませんが,重なっていても同様のルールで分類されます.
BT(c)
BT(b)
BT(a)
BT(Bottom-Top)
 親の下辺と子の上辺との距離によって位置関係が定められます.
 子の上辺が親の上辺よりも下にあるときは基本的この型です.
 TT(b)がその例外です.TT(b)に似た場合として,子の上辺が親の上辺よりも下,子の下辺が親の下辺よりも上,しかし親子に関して上辺間の距離が下辺間の距離よりも大きいときはBT(a)となります.
link
TT(b)
TT(a)
TB(c)
TB(b)
TB(a)
図中,赤い矢印は記録される親と子の上下の余白を示します.下向きを正として,負の値もとります.子を選択するとこの矢印がオレンジ色で表示されます.ただし矢印の始点終点は親子関係が判りやすいよう各辺の中点となっています.
TT(Top-Top)
 親の上辺と子の上辺との距離によって位置関係が定められます.

 子の上辺が親の上辺よりも上にあって,子の下辺が親の下辺よりも下にあるとき,子が親よりも下へ突き出ている部分が大きいとTT(a)になります.(TT(a)における余白の絶対値が子の高さの半分よりも大きい場合はTB(c)型と分類されます.)
 また,子の上辺が親の上辺よりも下にあって,子の下辺が親の下辺よりも上にあって,なおかつ,親子に関して上辺間の距離が下辺間の距離よりも小さいときはTT(b)となります.
link
TB(Top-Bottom)
 親の上辺と子の底辺との距離によって位置関係が定められます.
 子の上辺が親の上辺よりも上にあるときは基本的にこの型です.
link
2つのスプライトが親子関係を持つとき,親(P)と子(C)の間の位置関係は次の3つの型に分類されています.配置調整はこの分類と親子間の余白の値を再現する位置へ子スプライトを移動することによって行われます.
link

3.1 親子間の配置調整

link

3.自動配置調整のルール

link

スプライトのリスト表示

作成者スタイルシートを利用しないようにしたり,ユーザスタイルシートを用いるなどしてabosolute指定を解除すると,PositLogのスプライトは順序なしリスト(<ul>)中のアイテム(<li>)としての表示に従います.この順序なしリストは,上方に配置されているスプライトから順に並べられています(順序なしリストの順を言うのも変ですが……).また,親子関係がある場合は入れ子のリストとなっています.

link

 absolute配置の場合,とくに要素のボックスの高さが表示環境によって大きく変わるため,自動配置調整は上下方向にのみ行われます.スプライトの高さが変化したためにスプライト同士が意図せず重なりあうことがないように,上下へ移動させます.自動配置調整によって左右方向へのスプライトの移動は行われません.

 自動配置調整は,ページの編集時に記録されたスプライトの座標や相互関係についての情報を元に行われます.処理は次の2つの手順に大きく分けられます.

1.配置の記録

 ユーザがスプライトを移動,保存,削除したときに,配置の記録が行われます.記録される情報は,各スプライトについて,その配置された座標,上(あるいは下)方向に置かれた兄弟スプライト(同じ親を持つスプライト)との位置関係の型と上下の余白を示す数値,親との位置関係の型と上下の余白を示す数値です.

2.配置の調整

 自動配置処理はページがロードされた直後あるいはブラウザの文字サイズが変更されたときに行われます.文字サイズの変更はページ中のid="footer"要素の高さを監視することによって行っています.微妙な文字サイズの変更は検出できない場合がありますが,今後修正予定です.

 スプライトは記録されたそれぞれの座標に従って配置された後,親との位置関係が調整されます.最後に,上下方向の兄弟スプライトとの位置関係が調整されます.

link

2.処理の概要

link

1.背景

link

 Webページは多くの場合,スタイルシートや文字サイズその他の設定によってレイアウトが変化します.PositLogではスプライトごとに自由に配置を定めることができますが,このように自由に配置した場合,レイアウトの変化にともなって文字や絵が重なったりと読みにくい配置になることがあります.このためPositLogはスプライトの配置を自動調整する機構を備えています.

 自動調整の様子を簡単に試して確認するには,ブラウザの文字のサイズを変更してみてください.文字が重なって読みにくくならないように,スプライトが自動的に再配置されるのが判ると思います.

 以下では自動調整が行われる際のルールについて説明します.詳しい技術的な話も交じっていますので,知らなくても特に問題ないように設計しています(したつもりです)が,レイアウトに細かく凝りたい方は参考にしてください.

link

 PositLogはCSSを用いてスプライト(spriteというクラス名のli要素)の配置を定めています.CSSにおいて要素の配置方式はpositionプロパティによって定められます.

 positionプロパティの初期値はstaticであり,とくに指定のない場合,この値が用いられます.おおまかな説明ではありますが,staticの場合,要素はブラウザのウィンドウ内に順序良く詰めて流し込むように配置されます.また,ブラウザのウィンドウサイズや文字のサイズによらず,要素同士が相互の位置関係を保ち,文字や画像が重なって読み辛くなるようなことがないように調整されて配置されます.

 一方で,PositLogではスプライトのpositionプロパティをabsoluteに指定しています.absoluteの場合,要素はブラウザ上の任意の位置に配置することができます.ただし,staticの場合のような調整が行われないため,スタイルシートによる行間隔設定の違いやブラウザの文字のサイズ設定次第で文字や画像が重なり合って見づらい表示となることがあります.

 absolute配置の場合,とくに要素のボックスの高さが表示環境によって大きく変わるため,あるスプライトの下端と別のスプライトの上端とが重なることがよく起こります.ボックスの高さが変わる理由にはおよそ以下のようなことが考えられます.

・ブラウザごとのデフォルトのスタイルシートによるmarginやpadding,line-height等プロパティの違いによるもの
・ユーザスタイルシートの違いによるもの
・OS,ブラウザごとのフォントの違いによるもの
・ブラウザの文字サイズ設定によるもの

 こうした場合の見づらさに対処するため,PositLogではユーザが指定した各スプライトの配置と,スプライト間の位置関係を出来るだけ保ちつつ,見づらい表示とならないように,JavaScriptを用いてスプライトを移動する処理を行っています.

link

スプライトの自動配置調整

positlog.storybook.jp