My Note
複数の図形（Svg）描画領域の作成
既に図形描画の練習中に図形を描画する点がずれてしまうとか、書いた図形が書きたい場所とは違った場所に描かれるとかの不具合が起きるなどプログラムにバグがあると思った方もいるのではないでしょうか。文書Topに設けられた図形領域はクリックされた画面上のポイントを基準点からの位置として図形を描こうとするので画面のTop位置がずれると相対的にずれた図形が描かれる結果となります。My Noteでは画面がスクロールされてもスクロール量を把握して図を描く方法を取らず、文書上の各所に基準点を設け局所的な範囲（画面サイズの範囲）で図を描くことを選択しました。多少不便と思うところもありますが、逆に文書上の各所に基準点を設け各所で描いた局所図形の方が再利用し易いし、イメージ図や落書き程度の絵を描くには十分ではないかと考えた次第です。ということで結論としては文書中に複数の作図基準点を作って文書上の複数個所で図が書けるような仕組みを考えました。2種類の図形領域を設けることが出来ます。１つはSub型と名付けますが文書作成時に最初から文書Topに付随している形式のものと同類の図形領域を文書中に複数作れるもの、もう一つはDiv型と名付けますが大枠（Div）タグや横小枠・縦小枠タグなどのDivタグの中に図形領域を文書中の複数個所に作れるというものです。この２種類の図形領域の作り方・使い方などについて詳しく説明したいと思います。
Sub型図形領域（補Svg）の作成
このページの最初に書いたように文書Topにある図形領域は画面サイズの大きさという制限があって画面がスクロールされて画面サイズを超える領域には続けて図をかけないということがあります。画面サイズ内で図を書いてその図をDragして移動することは出来るのですが、それもスクロールした遠ところいところまで図を移動させるのはやっかいです。文書サイズが大きくなって文書の後ろのところにも図を入れたいと思うのは当然です。そこで文書Topに備え付け図形領域(top_svg)と同種類の図形領域（画面左端を基準点とする図形領域）を必要に応じて複数個所で定義できるようにしたものです。さっそくこの文の下に新しい段落をつくってその段落の横を基準点とするSun型図形領域を作って見ました。下の「新規のSub図形領域です。」を選択状態にしてGreen Lineが出ている状態で下のメニューから補Svgボタンをクリックすると、「新規のSub図形領域です。」の左端に青色の四角が現れました。これで新規のSub型図形領域ができました。Div型図形領域の見出しのすぐ上に「新規の段落です。」を置いていますので読者の方は上と同じ方法でSub型図形領域をもうひとつ作って見て下さい。今度は「svg_02」が出来たでしょうか。
新規のSub図形領域です。
では、この図形領域に図を描いて見ましょう。下のメニュー左端で「文書の編集」から「Svg図の編集」に切り替えて下さい。すると「Svg図の編集」と下のメニュー群も図形関連のメニューに切り替わり、それと伴に文書Topの図形領域(top_svg)が画面左上となる位置に飛びました。top_svgを基準とした位置に移動したのです。ここで「Svg図の編集」メニューのすぐ右のメニュー「top_svg」のドロップダウンを開いて下さい。すると「top_svg」に並んで「svg_01]とものが見えるましたか？これが先ほど作成したSub型図形領域なのです。[svg_01」を選んで下さい。すると「新規の段落です。」の左端の青い四角が画面最上部左の位置に移動します。これで「svg_01」の図形領域に基準が合わされて図が描けるようになりました。画面下の「描画」メニューから適当な描画メニューを選んで図形を描いて見てください。すぐ下にある「新規の段落です。」の左端に「svg_02」を新たに作って[svg_02」でも何か図を描いて「svg_01」の図形と「svg_92」の図形を選択したり移動したりしながら各領域の図形がどのように干渉するかしないかなど試して見て下さい。
新規の段落です。
Div型図形領域（div_Svg)の作成
次はDiv型図形領域について説明します。Div型図形領域は熟練者向けの図形領域とも言えるものでSub型図形領域が文書に重ねて自由自在に描く方式に対してDiv型は図形領域として特別領域を設けて図を描いたり、又は絵や写真などの素材とそれに対する説明図のような素材間の関係が重要で一度作られた図形領域は固定的に確保する方式です。Div領域内に設ける図形領域なので、周辺の文書が編集が加わって変化しても、Div型図形領域は固定されるし、またそのままの形で別の文書へも持っていけるような図形領域を作れるということです。Div型図形領域をその中に作る横小枠(flex)タグを作ります。
この３つの小枠divを含む大枠（横小枠(felx)）内にDiv[型図形領域を作る方法の説明です。この文を選択状態にしてWebdesinボタンでHtml＿Design画面を開け、
右の図1.で説明するようにGreen Lineが横小枠全体を示す位置（div_Svgを作りたい位置）に移動させ追加タグでdiv_Svgを選んでHtml＿Design画面の追加タグをクリックすると下の図2.に示すように横小枠の左上角に青色の矩形が現れdiv_Svg領域が出来たことを確認すると同時に画面下のメニューも「Svg図の編集」に変化し、他のメニュー群も図形関連のメニューに切り替わる。描画できるようになります。描画を終わるときには左下メニューを「Svg図の編集」から「文書の編集」に切り替えて下さい。
div_Svg図形領域の再編集に入るには図3.に
示すようにsvd_Svgボタンを押すだけで良いのですが、作成時のGreen Lineを正しく示すことが大事です。
Div型図形領域（div_Svg）の作成手順説明
図1.Div型図形領域の作成
図2.Div型図形領域が生成された瞬間
図3.Div型図形領域の描画編集に入る場合
Sub型図形領域とDiv型図形領域を使い分ける
これで文書内で複数の描画領域を設定し、文書内の各所で必要に応じて自在に絵や図形を書くことが出来ます。Sub型図形領域は使い方は至って簡単で文章との関係性は２の次にして思い立ったアイデアや落書き程度イメージ図を書き残すのに適しています。出来栄えや見栄えを気にしなくてよい場合などは使い勝手が良いのではないかと思います。それに対してDiv型図形領域は多少使い勝手は良いとは言えないですが、上のDiv型図形領域の作成の項で使っているように写真など各種の素材を使って複雑な関係性を説明したり、コメントを付け加えたり、第3者への説明や報告が必要と思われる場合に使えるのではないかと思います。