（A）平成２４年５月度例会：
５月２５日(金)午後1時より４時00分まで例会と勉強会が開かれました。先月からプロミス事務所の会議室を借りての開催です。下の写真のように借りられた会議室は非常に明るくて清潔でした。プロジェクターも利用できて大変便利でした。
討議された事項は以下の通りです。
- 月例会の会場に就いて
京葉銀行文化プラザにあるボランティアズ・カフェが4月よりパルコの隣のツイン・ビルに移転しましたので、今月も三越デパートの先にあるプロミスの事務所の会議室をお借りて月例会を開きました。
差し当たり６月もここをお借りすることにしますが、将来会員を増やしていこうという意図を考慮して、会場設定役の方が候補会場としてツイン・ビル2号館9階の千葉市民活力創造プラザとの新宿公民館を下見をして下さっていたので、この日勉強会が終わった後、皆で一先ず千葉市民活力創造プラザを下見等を下見に訪れました。下見の結果9月分だけ一先ず千葉市民活力創造プラザを予約しました。プロミスの事務所はそこの予約が取れなかった場合の予備とすることにします。 - 夏の合宿に就いて
今年の夏の合宿は行うかどうか、行うにしたら何処で、どのようなテーマで勉強をしたら良いか話し合ったけれど、結論が出ませんでした。そこで合宿を希望するかどうか、希望があれば何時ごろが都合が良いか、どんなテーマを選びたいか、6月の月例会までにブログで各自声を出してもらうことにしました。それらの声を基にして6月の例会で話合いましょう。
（B）勉強会：
プロミスの事務所の会議室での勉強会風景
テーマ：ＨＴＭＬとＣＳＳの連携
（1） 先月の復習
- 大枠（container）「挿入」→「レイアウト・コンテナー」でid名を付けて横幅と暫定的高さだけ指定する。
背景色も暫定的につけておくと開発中に大枠の範囲が判って便利だ。 - 中枠left_side、 main_side等にはボーダーを指定し、幅はボーダーの幅を差し引いた正確なサイズを指定する。
背景イメージは内容物の邪魔にならないような薄い色で模様などもないものを選ぶことがお勧めです。 - 中枠の入れ子が思うように配置されない場合は、横幅のサイズ、回り込みの解除、それに枠内の内容物Objectのサイズを検証すること。
- 枠内に入れる内容物Objectの入力は、先ず、枠に入る内容物Objectの配置を考慮してSマークでスタイルの配置・大きさ等のルールを設定し、名前を付けておく。Sマークは「表示」→「スタイルシート・マネジャー」と同じです。
この時、ルールはスタイル・シートに追加しておかなければいけません。HTMLタグのインラインの属性としての追加は駄目です。 - 次に、文字列等の内容物を枠内にBoxとして入力する。これは入力に際して<p>とか<h1>とか<li>とかBoxの種類をを指定して入力することです。決して裸の文字列としては入力しないこと。
- 最後に、入力した内容物を指定して、画面右上隅に表示される該当属性タブをクリックして、「属性ダイアログ」を表示させ、その右下隅にある「スタイル」ボタンをクリックして、「スタイル設定ダイアログ」を表示する。このダイアログの下端にある「定義済ID」や「定義済クラス」や「選択されたタグを指定する」欄で内容物とスタイルのルールを関連付けます。予めスタイルのルールを定義しておけば、その定義済のIDやクラスやタグは▼をクリックすると選択リストに表示されて、指定することが出来ます。
- 枠内に入れる内容物Objectの配置はレイアウトのマージン（上と左）で調整する。マージンは隣のObjectとの相対距離です。
隣のObjectに規定の位置より近づけるにはマイナス（－）の数値で調整する。 - BoxとしてのObjectの内の文字列等の配置はレイアウトのパディングで調整する。
（２）疑似クラスの設定のコツ
- 最近ハイパーリンクには下線を付けたり、色を変えたりしないものが増えてきた。演習例題のリンクがその例です。
その為に、疑似クラスを使い、クラス名を「link_01 a」のようなクラスを設定し、フォントの前景色を元の色に指定し、飾りを無しに指定すればよい。 - 先ず、通常のやり方でリンクを張る。例えば、<p>サイトのトップへ</p>に「挿入」→「リンク」でトップ頁にリンクを張る。
- 次に、<p>サイトのトップへ</p>に文字サイズと文字の色のスタイル・ルールを追加してClass名を例えば「link_1」と名付ける。
- その上で、新しいclassルールを追加してリンクのサイズと色が同じで然も文字飾りなしの新しい疑似クラス：class名「link_1 A」を作る。
（３）文字列の見栄を良くするスタイル設定のコツ
- 「文字のレイアウト」： 行の高さの指定で文字列の見栄が変わってくる
例えば、行の高さを150%にすると行間がゆったりしてくる。
但し、「文字レイアウト」の水平方向の配置はObject内の文字配置で、Object自体の配置ではない。 - 「レイアウト」： 上方向と左方向のマージンの指定でObjectの枠内の配置が決まる。
マージンは隣のObjectとの距離で、パディングはそのBox内の配置を決める - 「位置」： 幅はそのObjectの横幅を指定する非常に大事な指定です。このサイズを指定しなかったり、入る枠の幅より長い幅を指定したりすると、入れ子枠が乱れる原因になります。高さはむしろ指定しない方が無難です。
（４）Yahooのルート・ラボを使って辿ったルートをＧｏｏｇｌｅＭａｐｓ上に表示する方法
- ルートのＫＭＬファイルを作る
Step1： Ｂｒｏｗｓｅｒで「ルート・ラボ」を検索し、「ルートを描く」ページを表示する。
Step2： 表示された地図の左上隅にある検索窓にルート出発点の地名、例えば松本市を入力し、その地の地図を表示する。
Step3： 地図の右上隅に５つのボタンがある。
左から１番目のボタンは「道タビ・モード」ボタンで、道路に沿ってルートを描くときのもの。
左から２番目のボタンは「直線・モード」ボタンで、２点間を直線でルートを描くときのもの。
左から３番目のボタンは「１つ戻る」ボタンで、既に描いた最後の点を削除する時に使うもの。
左から４番目のボタンは「削除」ボタンで、既に描いたルートを削除する時に使うもの。
Step4： 「道タビ・モード」か「直線・モード」かのモードを選び、地図上でルートをクリックしながらなぞってゆく。
「道タビ・モード」は地図上の道路を自動的になぞってゆく便利なものですが、鉄道道路はなぞらない。
Step5： ルートをなぞり終えたら、Ｇｏａｌ点を右クリックしてルートを閉じて、silverlightの文字を表示させる。
Step6： 画面左下隅にある「エクスポート」ボタンをクリックして、作成したルート情報をＫＭＬファイルとして保存する。
Step7： 保存したKMLファイルをダブル・クリックするとGoogleEarthが立ち上がって描かれたルートをGoogleEarth上に表示する。
KMLのコードに文法的エラーがあると、エラー・メッセージが出て何行目にエラーの可能性があるか示される。
殆どのエラーはXMLタグのOpen-Closeの対に関するものです。 - ルート上の重要ポイントの座標（緯度・経度）を求める
「ルート・ラボ」の「直線・モード」を使って、求める重要２点間の直線ルートを描き、その２点の緯度・経度を求める。
求めた座標は後でマーカーPlacemarkerの座標に使うためのものです。 - ルートのＫＭＬファイルを「terapad」エディターで編集してマーカーPlacemarkerなどの情報を追加する。
ルートのＫＭＬファイルの具体的な仕様は例題のルートのＫＭＬファイルを参考にして学ぶ事にします。 - ＫＭＬの文法はXMLに従い、コードはUTF-８にしなければなりません。<?xml version="1.0" encoding="UTF-8"?>
XMLのタグは 座標<coordinates>140.38759,37.39915,287.227</coordinates>のようにOpeningとClosingが必ず対になっています。 - GoogleMapsに表示されるObjectはKMLコードの中でマーカー<Placemark>タグとして表現されます。
ルートの軌跡は<LineString><coordinates>・・・緯度・経度・・・</coordinates></LineString>で表現されます。
情報ウィンドウは<description><![CDATA[…表示されるデータ・・・・]]></description>で表現されます。 - 文法的に意味のある制御タグ以外のデータは<![CDATA[・・・・・・]]>に括られて表現されます。
- 作成されたKMLの文法的チェックはGoogleEarthで検証されます。
- ウェブ・ページの<head></head>部分に例題のＪａｖａＳｃｒｉｐｔをコピー・貼り付ける。
ルートの中心緯度・経度とＫＭＬファイルのＵＲＬを以下の例のように設定する。
ルートの中心緯度・経度： google.maps.LatLng(36.1165863888889,137.613401666667)とＫＭＬファイルのＵＲＬは：
google.maps.KmlLayer("http://longhat.fan-site.net/folder_travel/trav_norikura12/kml/rt_matsumoto_to_norikura.kml"のように。
（５）「乗鞍高原スキーとスノーシュー旅行」の例題作成演習の先月の続き
- Step4： 中枠「left_side」に<h2>で「旅行の行程」を入力し、スタイルを設定する。
位置-幅：130px、高さ：28pxフォント・サイズ：24px 太さ：太い 前景色：茶色 背景色：黄色
レイアウト・４隅ボダー：２px、２重線、茶色 マージン15px パディング： 7px - Step5： 中枠「left_side」に<h3>で「平成24年3月13日（火）」を入力し、スタイルを設定する。
位置-幅：200px、フォント・サイズ18px 太さ：太い レイアウト・上マージン15px 左マージン： 15px - Step6： 中枠「left_side」に<ul><li>で「０４：３０ 起床」を入力し、スタイルを設定する。
キーポイント：①リストが中枠「left_side」の横幅からはみ出さないようにする。（幅の設定）
②行の間隔が余り狭くないようにする。（行の高さ）
③リストが複数行にまたがった場合の2行目の初め（リストマークの位置）
④隣のリストとの距離（上か下のマージン）
<ul><li>のBoxを挿入するには、「挿入」→「リスト」→「番号なしリスト」で行う。
<li>タグのスタイルは： 位置・幅：320px フォント・サイズ：14px 文字レイアウト・行の高さ：1.5倍 レイアウト・左マージン：10px
リスト・マーク：○ リストマークの位置：2番目のタイプ 幅320pxが中枠「left_side」に収めるために重要。
1行目が終わったら、ENTERキーで自動的に2行目、3行目、・・・が入力できる。 - Step7： 中枠「left_side」の随所に小さい写真ph_mt_kaikoma_sml.jpg等を挿入して行く。
写真の配置の調整は写真左側にスペースを入れるか、左揃えのクラス・スタイルを設定する。 - Step8： 中枠「main_side」に<h2>で「乗鞍高原は」を入力する。 <h2>のスタイルは既に設定されている。
- Step9： 中枠「main_side」に<p>で「乗鞍高原は・・・」を入力し、「main_txt」のクラス・スタイルを設定する。
キーポイント：①段落が中枠「main_side」の横幅からはみ出さないようにする。（幅の設定）
②行の間隔が余り狭くないようにする。（行の高さ）
③段落の1行目のインデント（）
④左境界からの距離（左マージン）
位置・幅：650px フォント・サイズ：14px 文字レイアウト・行の高さ：1.5倍 太さ：通常 レイアウト・左マージン：25px
第1行目を入力しスタイルを設定したら、自動的にその段落は入力できる。段落を変えるにはEnterKeyを押せばよい。 - Step10： <p class="map_txt">松本駅から乗鞍高原までのルート地図</p>の入力
クラス・スタイル： width:600px、margin-left: 15px、font-size: 16px、font-weight: bold; - Step11： 地図を格納するDiv id="map_canvas"を挿入する。
地図の配置のクラス・スタイルDiv_alignを設定する。 margin-top: 10px; margin-left: 15px; margin-bottom: 10px
地図のスペース確保のために style="width:700px;height:660px;"が必要。 - Step12： 地図の説明「松本駅から乗鞍高原までのルート地図」を入れるための<p>を挿入し、スタイルmap_txtを規定する。
map_txt = margin-left: 15px; font-size: 16px; font-weight: bold; - Step13： ルートの断面地形図を入れるための<p>を挿入し、その中にルート・ラボで作成した断面図を入れる。
配置のためのスタイルはmap_txtを適用する。 - Step14： <h3>ルート地形の断面図</h3>を挿入。<h3>のスタイルは規定済み。
- Step15： 写真を入れるための表Table（２列X4行）を挿入。3行目のセルは結合。各セルのは<p class="photo_txt"></p>を挿入 し、その中に７個の画像を挿入する。但し、結合したセルには<p
class="photo_txt_l"></p>を挿入する。
表の配置のために class="tbl_align" width: 700px; margin-left: 10px;を設定。 - Step16： 写真の下には<p class="photo_txt_l"></p>の中に写真の説明を入力する。
photo_txt＝font-size: 12px; color: #903; width: 310px; margin-top: -1px; text-align: center;
photo_txt_l ＝font-size: 12px; width: 650; color: #903;px; margin-top: -1px; text-align: center;
＜注＞margin-top: -1pxは説明を写真により近づけるためのもの。 - Step17： <div id="footer"></div>の中に <div id="page_inx"></div>の中の内容をコピーして貼り付ける。
- Step18： 例題のソースを表示してGoogleMaps & WayPoint Layerを表示するJavaScriptコードをコピーして自分のページに
張り付ける。 - Step19： 張り付けたJavaScriptコードの地図の中心座標とKMLファイルのURLを自分のケースの情報に更新する。
- Step20： 作成したローカル・サイトをリモート・サイトにアップロードしてテストする。
- Step21： テストが成功したら、スタイルシート・マネジャーで<head>の中に生成されたスタイル・シートを外部スタイル・シートに
書き出す。
(Ｃ） 次回の例会とその討議テーマ
日時： 平成２４年６月２２日（第４金曜日）にプロミスの会議室おこないます。
テ―マ： 「乗鞍高原スキーとスノーシュー旅行」の例題作成演習を完成させます。
準備として次の2点をお願いします：
- 今日勉強したことを基にして各自演習を自宅で完成させるよう試みてください。
- 完成させる試みの中で疑問が出たら、ブログのQ&Aで質問して下さい。
回答者が的確に質問を理解できるように各自工夫して下さい。このことは将来色々なフォーラムに投稿して支援を得るときの練習にもなります。
