記録もメモも自由自在 図・写真貼付 各種文書をすべて同じ画面で編集・保存・管理できる リンク保存 Google検索やWeb画面も保存

　　　　　　　　　　　

記録もメモも自由自在 | My Noteのスマートワークス 



	
		  
		  Graphics
		
		  
		  Svg文字ですよ！
		
		  
		  
			Text
		  
		
		  
		  Text
		
		  
		  My Note
		
	        
	      
	        
	      
	        
	      
	        
	      


どれくらいの人がSvg文字というのが計算機上で定義されていて、自由に使えるということを知っているのでしょうか。SvgとはScarable Vector Graphicsの略で平たく言ったら画像で定義された文字ということで文字をその形状をなぞる線を繋いだデータで持っています。計算機上で一般に使っている文字（Html文字）は漢字などは２バイトのコード（＝記号として決められたもの）として持っていて形状でもつSvg文字と較べるとHtmlは情報量が小さいので計算機的には効率的なので一般にはHtml文字が使われているわけです。特に多くの情報を送信受信するWebの世界ではHtml文字だったのですが、計算機の処理速度や送信受信の転送速度が飛躍的に早くなったので最近はWebの世界でも写真も含めて図的な情報も多く使われるようになって来ています。但し、Webの世界では動画も含めて写真の方が圧倒的に多く使われています。恐らく写真を取り扱うソフト系が簡便だからだと思います。写真の情報をサーバー上に置いて、そこにリンクを張れば簡単にWeb上に情報を出力することができるからだと思います。Svg文字も含めてSvg図形はなぜかあまり使われていません。グラフィックデザインという芸術的専門分野でしか使われていないように思います。その理由は専門的な分野に特化した特別なソフトとして開発され、簡便に使えるソフトとしては考えて来なかったのではないでしょうか。Html文字が行の単位でしかディスプレイ画面上に置けないのに対して、Svg文字やSvg図形はディスプレイ画面上のどの場所にもピクセル単位で大きさも自由で何処にでも置くことができて表現の自由度は格段に向上するように思います。My NoteはChromeブラウザさえあればSvg文字やSvg図形を簡単に使えて表現を楽しめるソフトでもあります。My Noteの作者は芸術家ではないので旨く例題を示すことは出来ないのですが、この文書の下側にこの文書に上書きした形でのSvg文字やSvg図形を散りばめたHtml＋Svg文書を示します。小学生の低学年の子供たちもソフトウェアを全く知らない大人でもMy Noteを使って楽しめますし、Web上の誰とでもHtml＋Svg文書の作品を送受信することが出来るようになります。



	
文書（HTML）の編集（１）

My Noteの開発の当初は絵的なイメージ図が描ければ文章の方はベタ書きメモ程度のもので良いと思ってましたが、メモとして書き残したものをレポートや報告書としてアピール力のある文書に編集する機能が必要だと思いました。また、自身のホームページなどを何度も立ち上げたりして来たのですが、その時に必要なHTML言語やホーページを作成するツール類などがが苦手で多様なタグ類やスタイルシートの使い方など覚えることが多くて、暫く使わないと忘れてしまって学び直しを繰り返してやっと使っている状況なのです。Svg言語を意識せずに図を描くような仕組みを考えたと同様にHTML言語を意識せずにHTML文書が書けるにはどうしたら良いか、基本的なことさえ理解したら数多くのタグ類やタグを装飾するスタイルパラメータを覚える必要なく、簡単に使えるものに出来ないものかと考えてみました。HTML文書の本文を書くのに必要と思われる最低限のタグに絞り、まずはディフォルトで文書の構成・骨格をを決めることとし、文書を飾り付けるスタイルの設定は後で変更する方式を採用することとしました。また、仕上がりを見ながら編集できるWYSIWIG（ウィジウィグ＝What You See Is What You Get）型のものを試みています。さらなる簡単化を目指して自分のスタイルが決まったら文書スタイルをレシピとして登録出来るようにすることやメニューなども英語版メニューや自分好みのメニューなどが作れるようなことも試みています。以下でMy Noteでの文書作成の考え方や編集方法について具体的に説明致しますが、My Noteを試してみることで、HTML文書への理解が深まり、多少ともWeb世界へのハードルが低くなったと思って頂けることを期待致します。

My NoteのHTML文書編集の基本 

		  
		  大枠＝DIV（header部）
		
		  
		  文章部分
		
		  
		  大枠＝DIV（区分box）
		
		  
		  横小枠（flex box)photoなど
		
		  
		  段落
		
		  
		  見出し（H1～H6）
		
		  
		  ナビゲートメニュー
		
		  
		  文章部分
		
		  
		  段落
		
		  
		  横小枠（flex box)photoなど
		
		  
		  横小枠（flex box)photoなど
		
		  
		  見出し（H1～H6）
		
       















　　　　　　　　　図１．文書構成の一般例  
左の図１．は一般的なHTML文書作成のイメージを示すものですが、HTML文書ではタグと呼ばれる文書上に区分的な名札付けを用いて出来上がりの画面なり印刷用紙上に分割配置していくことで文書は出来上がります。 文書の下方向への積み木を積み上げる作業だと考えたら簡単に思えてくると思います。HTML言語には数多くのタグが定義されていますが、My Noteでは必要最低限のタグに絞り込んで組み込んでいます（不足するものがあれば随時追加する予定です）。HTML文書を作成する場合には最初に出来上がりのドキュメントとしての骨格や構成を決めていく場合や大よそ出来上がってる文章を中心に写真や図などの素材を配置しながらドキュメントとしての体裁を整える場合などあろうかと思いますが、 
My NoteではHTML文書作成の要点を以下の２項目とし
・最初に構成・骨格を決める（Html_Design画面）
・文書の体裁は最後の段階で決める（Html_Design付属のStyle設定)
の順番に進めていけるように操作の画面メニューをそのような構成としています。以下順次操作について具体的に説明致します。

①WebDesign(Html_Designポップアップメニー)の紹介

「表示のみ」から「文書の編集」を選び編集モードにした状態でどこでも良いので文の一部を選択状態にして（文の一部をマウスでDragして青色の状態にする）画面下のメニューでWebDesignをクリックすると図2.のHtml＿Designが現れます。さらに選択した文の一部を含む一群の下側にGreen Lineが現れます。実際にこの場で確かめて見てください。例えばこのページの先頭にある見出しの「文書（HTML）の編集」の一部を選んで画面下のメニューから「WebDesign」を押して下さい。Html_design画面と同時にGreen Lineが現れたと思います。次に見出しの下の文章の一部を選んだ状態で同じことをやって見て下さい。ページのどこの文でも良いので次々に同じことを繰り返して見て下さい。この時Html＿Designのポップアップ画面が邪魔して見たい部分が見えない場合はHtml＿Designの見出し部分をDragして移動させることが出来ます。このようにMy Noteでの文書編集作業は文の一部を選択してWebDesignメニューをクリックすることの繰り返しなのです。このGeen Lineが編集の現在地を示す道しるべとなり、これから説明するタグの挿入はGrren Lineの後ろに配置されることになります。
　　
html_design01.jpg
図２.Html_Designポップアップ画面
html_design02.jpg
図3.Html_Design画面でのタグの挿入
左の図2.がHtml_Design画面ですが、大雑把に説明しますと、
・先頭行のtag、Level。figは現在のGreen Lineで示すタグ領域の情報を示しています。タグ名は何か（図2.ではタグＰ＝段落）、Topレベル０に対してタグの階層（図2.ではLevel=1　階層については別途解説）であるか、figはタグの別名を示しています。
・green off はテンポラリーにGreen Lineをoff／onする機能です。
・その下のcopy／pasteボタンは現Green Lineが示す領域をStyle情報を含めてc opyし、pasteではcopyした一群をGreen Lineの後ろに貼り付けます。Green Lineを別の場所に移動後pasteすることもできます。また、別のドキュメントでcopyした領域をpasteすることも可能にしています。
・svg_divはDIV領域中に図形領域を設定するものでが、別途説明します。
・delボタンはGreen Line領域を削除します。
・追加タグについてはこの後詳しくのべます。
・style登録とstyleレシピは現在開発中で近々公開予定です。
・最下段の４つの矢印↑← →↓ はGreen Lineの階層間移動用のボタンですが、普段は文の選択とWebDesignボタンで移動したら良いのですが、DIV中に埋め込んだ絵写真(photo）にGreen Lineを移動する場合、例えば　　図２.Html_Designポップアップ画面の上のphotoに移動する場合は図２.Html_Designポップアップ画面の文の一部を選択しGreen Lineを移動後 ← にてphotoに照準を合わせる必要があります。↑は上の階層への移動、←は手前の兄弟要素への移動、→は下の兄弟要素への移動、↓は子要素があれば最初の子要素に移動します。
・追加は追加タグの項で選んだタグを追加するものですが、この後詳しく説明します。
・最後のstyle表示のボタンは現在のGreen Lineが示すタグに関してのStyleにどんなパラメータ（属性）が設定されているかを確認したり、異なる属性に変更する場合に使用する４つのStyle画面から構成されています、これも別途説明する予定です。

②新規タグの挿入
追加タグのリストから何れかを選んで追加ボタンを押すことで新たなタグを作成することができますが、最初に述べたように文書の骨格・構成を決めるタグは大枠（DIV)、横小枠（flex）、縦小枠（colmn)の３つのタグが基本で骨格型（私の勝手な呼び名)。箇条書(ui_li）、数列挙(ol_li)、見出し（Hx）、段落（P)、テーブル(tbl)、メニュー（navi)は中間型、そして絵写真(img)、強調(span)、ボタン(a)、リンク(a)、Icon(i)は文章の一部を飾り付ける役目の修飾型（これも私の勝手な呼び名）の３種類のタグに分けて骨格型を使って文書の構成を決め、中間型を使って各種の文型を作り、最後に修飾型を使って細部を飾り付けたら文書が出来上がる。と考えるとHTMLへの理解がしやすいのではないでしょうか。追加タグリストの中で取り上げていないSVG in divとstyleレシピの2つはMy Note独自のもので少し特殊ですので別途の説明とさせて下さい。

③骨格型タグの作成
具体的に骨格型タグの大枠(DIV)、横小枠(flex)と縦小枠(colmn）を作成して見ましょう。この行を一部を選んでWebDesignをクリックして下さい。そうすると既に説明したようにHtml＿Design画面とGreen Lineが現れます。ここで大枠DIVを選んで追加ボタンを押して見てください。
DIVタグ＆Pタグを挿入しました。
?その結果下側にGreen Lineが付いた行半分の横幅をもつ矩形（四角形）が現れ、「DIVタグ＆Pタグを挿入しました。」の一文を含んでいます。ディフォルトではこのように定義されているからです。また、この大枠DIVは左寄せで右側には文章が回り込めるように定義されていますので大枠DIVの右側の領域に文章を書き込めるようになっています。すでに大枠DIVの下側にすでに文章があれば文章の初めにカーソルを置いてBS（BackSpace）を打ち込むと大枠DIVの右側に文章が回り込んで来ると思います。ここでEnterキー（又はReturnキー）を押して下さい。
コンテンツが入ります
コンテンツが入ります
コンテンツが入ります
文書編集実践①でも述べたようにEnterキーは新しい段落をつくるのと同じ働きを持っていますので上の文章の一群とは間隔が少し離れた新しい文の一群になりました。上の段落の下に今度は横小枠(flex)を作りましょう。大枠(DIV）を作った時と同様に上の段落の文の一部を選んでWebDesignをクリックした後、Html_Design画面の追加タグで横小枠(flex）を選んで追加ボタンを押します。３分割の横小枠が現れたと思います。更にここで新たに段落をつくって縦小枠（colmn）を作って見てください。
コンテンツが入ります
コンテンツが入ります
コンテンツが入ります
上のように縦小枠（colmn）が作られましたか。このようにして文書の骨格を構成して骨格の中にも骨格の外側にもタグを作成したり文章を打ち込んだりしながら文書を作り上げて行きます。このページの上の方にある図1．図２.図３.は大枠（DIV）を作成した中に絵や写真を挿し込んだ例でもあります。次の文書の編集（２）では骨格の中にも新しいタグを追加したり、更には作成したタグへの飾り付け（Styles設定）について具体的に説明したいと思います。




	
		  新たな画像埋め込み法
		
		  未実施
		
	        
	      
	        
	      
	        
	      
	        
	      
	        
	      
	        
	      
	        
	      
	        
	      
	        
	      
	        
	      
文書（HTML）の編集（６）画像を文書中に埋め込む  

文書（HTML）の編集（４）及び 文書（HTML）の編集（５）で説明したが文書中への写真など画像のWebアドレスのリンク情報の貼り付けの方法と更には貼り付けた画像が外部環境からも見える化するにはGoogle共有アルバムへのリンクが必要なことを説明しました。今回はこれに加えて新しい画像貼り付けの方法をMy Noteの機能として組み込みましたので機能と効能及び使い方について説明致します。

絵写真の挿入位置の上にある文の一部を選択後に画面下のWebDesignボタンを押すことでGreen Lineを決めます。その後追加タグで「絵写真 img」を選択して追加ボタンを押すと図２．が現れます。

図１．Html_Designで「絵写真 img」の選択
絵写真の埋め込み方式を選ぶポップアップ画面が現れますのでメニューから赤丸で囲んだ「imbed」を選びます。
図２．絵写真の挿入位置と「imbed」の選択
赤丸で囲んだ「imbed」が今回組み込んだ新たな絵写真の貼り付けの方法です。使い方は従来の方法と同じでHtml_Design画面でGreen Lineを決め、その場所で追加タグの「絵写真 img」を選択後に追加ボタンを押すことで図２．のプップアップ画面で開始することとなります。上の２つのメニューは従来の方法です。この「imbed」方式で絵写真を貼り付けるとbase64という形式で文書中に直に埋め込まれます。文書そのものの容量は増えることになりますが従来方式ではhtml形式で出力したファイルをメール送信などで送っても文書中の絵写真は見れなかったものが見れるようになります。
　　　　　　　　
　　　
図3．写真のアップロード画面
　　　

図４．アップロード写真を指定
　　　　
図５．アップロード社員の確認

図１．から図５．へのステップを経て絵写真のドキュメントへの埋め込みが完了します。従来の方法と異なる部分は図２．で「imbed」を選ぶことだけで他はすべて同じです。

図６．文書中への埋め込み完了