（A）「千葉イスラエル教会」のホームページ立上げ支援：

平成24年12月に支援要請を受けていた全国組織を持つプロテスタント系キリスト教会の千葉支部である 「千葉イスラエル教会」のホームページのリ・フォーム支援を平成25年正月から継続して行いました。

今月も第2週と第3週の水曜日午後2時から5時まで教会信者有志に対するホームページ作成講座を開催した。
講座の講義内容はテスト用のサイトを通じて：

　（a）ウェブ・ページの枠組みの作成
　　　　＜挿入ポイントにカーソル・ポインターを置く＞　→　メニュー「挿入」　→　「レイアウト・コンテナー」　→
　　　　「＜div＞内にid="枠名"を入力」　　この手順でcontainer、header、navi_menu　main、footer枠を作成する。

　（b)　スタイルシート・マネジャーで各枠にスタイル(書式)を規定する
　　　　　width、 height、 background-color、 border等々のスタイル・ルールを「セレクター名」を介して規定する。
　　　　　セレクターの種類：
　　　　　　①HTMLタグ：　　<p>や<h1>や<li>等のタグはそのページに複数存在するので要注意
　　　　　　②id：　　　　　　　そのページに一つしかないタグにふる識別子
　　　　　　③class：　　　　　そのページに複数あっても構わない
　　　　　　④タグの階層パス：　#header p　のようにタグの階層上のパス（アドレス）で指定する

　（c)　映像イメージの配置の仕方：
　　　　１）　<img>タグのsrc=""属性で指定する：　これはイメージのある場所を指定して、ブラウザーに読み込ませ
　　　　　　　　るのであって、イメージをそのページにはめ込むのではない。（main枠の画像は位置の例）
　　　　２）　枠組みの背景イメージとして指定する：　このため複数層（レアー）を可能にする。
　　　　　　　　　　　　（header枠の画像は位置の例）
　　　　　　　　　　　　

　（d）　枠の中に文字列を配置する仕方：

　　　　☆　header枠内に <h1></h1>タグを挿入して、その中に見出しの文字列を入力する
　　　　☆　main枠内に<p></p>タグを挿入して、その中に教会の説明文を入力する　
　　　　☆　footer枠内に<p></p>タグを挿入して、その中に著作権表示と連絡先等の文を入力する
　　　　☆　navi_menu枠に<ul><li></li> <li></li>・・</ul>を挿入して、その中に飛先ページのバナー・ボタンを配置
　　　　☆　リスト・タグ<ul><li></li> <li></li>・・</ul>にはそれなりの横揃えのスタイル・ルールを適用する
　　　　　　　＊メニュー全体が枠の中央になるように設定：　ul {margin-left:300px; width: 700pc;}　　　
　　　　　　　＊メニュー項目が横並びになるように設定：　　　li {float: left; display: inline; margin-left: 5px;}
　　　　☆　連絡先のメール・アドレス指定：　メニュー「挿入」→「リンク」→「メールへ」→＜メール・アドレス入力＞
　　　　　　　Windows8はなりすまし防止のため、メール・アドレスとパスワードの再度の入力を求められる。


　（e）　ローカル・サイトの内容のリモート・サイトへの転送の仕方　：　
　　　　　メニュー「ツール」　→　「ファイル転送ツールの起動」を使う
　　　　　接続前に確認すること：
　　　　　　①サーバー指定窓でサーバーのニックネームが該当サーバーであることを確認する
　　　　　　②マイコンピュータの中のローカル・サーバーのフォルダーが該当フォルダーであることを確認する



平成２５年３月２０日千葉イスラエル教会でのホームページ作成講習会風景

（B）３月度の月例会：

千葉市民活力創造プラザの会議室での勉強会風景

３月２２日（金）の１３時より開かれた例会で次の件が討議された上、了承された。

（C）勉強会：

（1） JavaScript関する復習


（２）jQueryの勉強

　　　
(a) jQueryとは：

JavaScriptの基本ライブラリーで、JavaScriptのコードですべてのProgramを書く代わりに、この基本ライブラリーを利用すれば、より簡単に目的のProgramを書くことが出来る。

一般的には、この基本ライブラリーの周りに自分でJavaScriptのコードを追加したり、他のプラグインのjQueryライブラリーを利用したりする。

(b) jQueryの基本構文：

　　　＄（”セレクター”）．jQueryの命令（）；　　　　セレクターで指定した要素に対して命令を実行

(c) jQueryの実行タイミングに関わるおまじない：

ブラウザーはＨＴＭＬのソース・コードを先頭から読み込んで実行して行きます。
一般にはＪａｖａＳｃｒｉｐｔのコードは<head>の中に書きますので、ＪａｖａＳｃｒｉｐｔのコードが読みこまれた時点では<body>の中にある対象の要素はまだ読み込まれていないので、実行可能になっていません。

従って、ＪａｖａＳｃｒｉｐｔの処理にあたって、先ずそのページ全体をＲｅａｄｙにしておく次のようなおまじないが必要です。

$(document).ready(function() {

　　　ここにＪａｖａＳｃｒｉｐｔの処理を記述する

｝）；

この省略形が：

$(function() {

　　　ここにＪａｖａＳｃｒｉｐｔの処理を記述する

｝）；

(d) jQueryのダウンロード：

jQueryのライブラリはjQuery.comからダウンロードしておく必要がある。

2013年3月22日現在は「Ｄｏｗｎｌｏａｄ　ｊＱｕｅｒｙ　ｖ１．９．１」のボタンをクリックし、「Ｄｏｗｎｌｏａｄ the compressed, Production jQuery 1.9.1」をクリックしてダウンロードする。

ライブラリーのソース・コードが表示されたら、それを自分のサイト内にjsフォルダーを作って、その中に名前を変えないでjquery-1.9.1.min.jsとして保存する。

(e) jQueryライブラリの読み込み：

ウェブ・ページ内の<head>内に次のようにjQueryライブラリの読み込みステートメントを入れておく。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

この読み込みステートメントは他のjQueryサブ・ライブラリに先行して記述しなければjqueryは作動しません。

また、この読み込みステートメントは手入力すると入力ミスをし易いので、次のようにＨＰＢの「挿入」機能を利用すると良いでしょう。　

メニュー「挿入」　→　「その他」　→　「スクリプト」　→　「外部のファイルを指定して、《参照》」
　　　但し、最近のＨＴＭＬバージョンの場合は、language属性とcharset属性は不要なので取り除いておく。

(f) 漢字Character Setの指定に就いて：

漢字のＣｈａｒａｃｔｅｒSetの指定は、「ツール」　→　「オプション」　→　「ファイル」の手順で：
”出力漢字コード＝無変換”　と　”入力漢字コード＝自動判別”　にしておかないとＪａｖａＳｃｒｉｐｔが作動しない恐れがあるので、矢鱈に漢字Character Setの指定しないこと。

(g) CSSのプロパティーを変更する演習：

ＣＳＳのプロパティを変更する基本構文は：

＄（”セレクター”）．ｃｓｓ（”プロパティ”、”値”）；

レッスンの第3章のＳａｍｐｌｅ０３－００の例に倣って歴史上の人物名簿の原簿のウェブ・ページを作成し、jQueryライブラリの読み込みステートメントを入れておく。　

Ｓａｍｐｌｅ０３－００に次のようなコードをjQueryライブラリの読み込みステートメントの次に入力してＳａｍｐｌｅ０３－０１を作成する。

<script type="text/javascript">
　　　$(function(){
　　　　　$("li").css("color","#f00");　　//jQueryを使ってリストの各項目の色を赤に変える
　　　});
</script>

歴史上の人物名の色が赤に変化したことを確認すれば、演習は成功です。

(D）　次回の例会とその討議テーマ

日時：　　平成２５年４月２６日（第４金曜日）13:00～16:30　

場所：　　ツイン・ビル2号館9階の千葉市民活力創造プラザの会議室

テ―マ：　jQueryの入門の続きで更に複雑な実習をします。
　　　　　　準備が出来たら、ＵＳＴＲＥＡＭの実況放送の実演をします。

宿題：　　jQueryの入門の更に複雑な実習するには、今日の勉強の復習をしっかりしておいて下さい。