My Noteで作るホームページ
My Noteで作るホームページ
上記の部分がホームページの入り口となるようなページ（または、自分の作品として誰かに送るメール）を作る場合の例題として採用するものです。ホームページなどのインターネットで使われている文書はWeb文書と言われ、専用のHTML言語と言われるプログラム言語で作られていています。ですので、ホームページを作成するには最初にHTML言語について勉強しないとホームページが作れないわけで、英単語の意味を借りた形で作られているプログラミング言語は日本語を使う私たちにとってはハードルが高い分野となっていて、プラグラミング言語を勉強した専門家にしか簡単には手を出せない世界となっています。「My Note」は日記や学習ノートとして日々の記録を残すものとして開発したものですが、結果として書き残す文書がWeb文書そのものとなっていますので、使いながらWeb文書作成方法を身に着けることが出来ます。この「My Noteで作るホームページ」のコーナーでは魅力的なホームページを簡単につくる方法について解説したいと思います。
１．My Noteの使い方について
「My Note」はHTMLなどのプログラム言語は使わないでWeb文書を作れるものですが、そうは言ってもアプリ内部ではHTML言語を組み立てていて概念的にはHTMLを理解していないと使いこなすことはできません。HTMLの隅々まで知らなくても、またはHTMLの知識は曖昧でも「My Note」がHTML言語の正確な組み立ての手伝いをしてくれるものと考えてください。ここでは概要を理解する上での大枠となりますので、詳細については使用説明の項を参照して下さい。
（１）図形の編集（Svg図形要素）
独創的で魅力あるページを作っていく上で欠かせないのがSvg図形要素です。Html要素が行単位にしか配置できないのに対して、Svg図形要素は画面上のどの位置にでもピクセル単位で配置できるもので、図形やWebフォントと言われるものを取り扱います。今日の例題ではWebフォントを使っています。
図１．「Svg図の編集」のメニュー
図１．は「Svg図の編集」を選択した場合のメニューです。
図２．点列による描画メニュー 図３．Basic図（基本図）の作図
図４．Svg文字（Webフォント）の指定メニュー
Svg図の編集の殆どすべての機能が図２．３．４のポップアップ画面で出来るように単純化されています。点列をクリックしながら図形を描画する機能と予め定められた基本図形を描画する機能と３つ目はSvg文字列を作成するためのWebフォント、文字サイズ、文字色などを指定する画面です。今回の例題では殆どがSvg文字を使用しているだけです。
（２）文章の編集（Html言語）
普通に文章を作っていく上で使われるものでWeb文書作成では必須の言語なのです。単純な文章作成では簡単で行単位でしか書けないので画一的になりがちで文字の大きさやフォントの使い方や色彩など細かい指定をするとなると詳細な知識が必要となります。
図５．「文書の編集」のメニュー
図６．Html＿Designのメニュー
「Html文書の編集」はHtml言語で定義されている機能を言語記述をすることなくメニュー形式で出来るように工夫したものです。Html言語の機能の殆どすべてをHtml＿Design画面に集約していますので、この画面での操作方法を理解するとHtml言語を書くことなくHtml文書が書けることになります。各Htmlタグは生成時にはディフォルトの属性で作られますがStyle表示のボタンから最終表示を見ながら編集することが出来ます。
２．Web例題ページの構成
Web画面のデザインの方法については各人で異なると思います。最初の大まかなデッサンから詳細に至るまで色々でしょうが今回の例題についてはどの部分をHtmlで表現するか、どの部分をSvg文字で表現するかなどを決めたことにします。
３．Svg文字（図形要素）の準備と配置
４．Html要素（Title、メニュー、写真）の準備と配置
新規の段落です。
My Noteで作るホームページ
新規の段落です。
コンテンツが入ります
写真の説明
コンテンツが入ります
写真の説明
（１）左は説明用に小さく作ったものです。
（２）１．（２）の文章の編集で説明した
追加タグを使って上から順番に①見出し
Hxの追加、②その下には段落ｐ又は
Enterキーでスペースを作成、③2個から
なるメニューNavi、最後に④２個から
なる横小枠flexで構成しています。
また、各横小枠には絵写真imgを入れて
います。
（３）①②③④では追加ﾀｸﾞでのディフォルト
表示に対してStyleを変更することで見栄
えを変更することが必要です。ここでは
見出しHxの追加ﾀｸﾞ直後のディフォルト
での表示から配置や境界線や背景色の
変更に関する部分の説明となりますが、
下記の画面はHtml_Design画面にて
Style表示をクリックするとStyle属性値
に関連する４種類の画面が現れます。
そこで対応する属性値を変更します。
図７．見出しHxのStyle変更の一部
（４）Htmlでは最終表示での各タグの配置や見栄えとしてのStyleの調整が大変な作業で重要なのですが、配置やStyleに関連する属性値は非常に多く、しかも英語表現なので日本の初心者や小学生には理解して覚えるのが大変です。My Noteではメニューで採用する用語を初心者用、小学生用などに切り替える方法を模索しています。
例えば図７．に対応する画面が図８．となっています。使い慣れるまでは初心者用、又は小学生用メニューで使ったら良いかと思います。
図８．図７．に対応する初心者画面
（５）３．Svg文字の準備と配置の項で説明したWebフォントの文字列のWebページでの配置は特別な処理をする場合以外はその文字列をクリックして選択状態にあればドラッグすることでページのどこにでもピクセル単位で配置することが出来てとても便利に使えます。但し、画面中央に配置する「楽しく学べるWebへの入り口」の図形パスに沿って配置する文字列は扱いが少し異なります。とは言ってもそんなに難しくはありません。図９．は今回の例題での実際ですが、文字列を選択状態で右クリックして下記SVG文字の画面をポップアップさせて次に作成したパスを選択状態にしてgetpathをクリックしてパスのidを取得します。その状態でOKボタンを押すとSvg文字列がパスに沿って表示されます。それで終了です。disponはパス線を表示／非表示のボタンで、offPathはパスに沿わせた状態を解除します。
図９．パスに沿ったSvg文字列の作成
（６）横小枠への絵写真imgの貼り付けについては横小枠中にある文字列（段落ｐ）を選択状態にして現在地（Green Line）をその文字列に設定します。その状態でHtml_Design画面で追加ﾀｸﾞで絵写真imgを選択します。図10.に示すように絵写真を貼り付ける位置に現在地（Green Line）を持って来て追加ﾀｸﾞで絵写真imgを選択します。その後Html_Design画面の下部にある追加ボタンをクリックするとGreen Line付近にどこの絵写真かとfrom local,from My_Note,imbed,・・・と聞いてきます。そこで絵写真をページに埋め込むimbedを指定するとファイルを開く画面が現れますので指定の写真を開くことで
図10.絵写真の埋め込み操作
図11.の写真をアップロードの画面とともに指定の写真が表示されます。次に確認ボタンをクリックすることでGreen Lineの下に写真が貼り付けられます。
図11.絵写真の埋め込み操作