(A)「千葉イスラエル教会」のホームページ立上げ支援:
平成24年12月に支援要請を受けていた全国組織を持つプロテスタント系キリスト教会の千葉支部である 「千葉イスラエル教会」のホームページのリ・フォーム支援を平成25年正月から継続して行いました。
先ず、トップ・ページの模様替えをしました。
(1)日曜日毎の10:30よりの漆間牧師のライブ・メッセージ配信の画面を少し大きくして中央ペインに移動した。
(2)左ペインに作成する予定のページ「ゴスペルクラブ千葉」と「健康コーナー」のサムネールを用意した。
(3)右ペインに「全国TLCCC」へのサムネールを用意し、本部サイトの「全国TLCCC」一覧へのリンクを張った。
(4)教会のブログとしてGoogleのBloggerを導入した。
次に、第2週と第3週の水曜日午後2時から5時まで教会信者有志に対するホームページ作成講座を開催した。
講座の講義内容は:
(A)インターネットとは : グローバルなコンピュータのネットワークである。
ネット・ワークのノードには: ISP、Webサーバー、クラウド・サーバー等がある
(B) ホームページの構成 : HTML、CSS、JavaScript/jQuery、CGI/PHP
(C) ホームページ作成上大事なこと :
1) ターゲットを絞ること、
2) 公にする出版物であることを自覚する、
3) スクロールを少なくするようなページ設計を心掛ける
(D) ホームページ・ビルダーの概要:
☆ ホームページ・ビルダーの主な機能
☆ 3種類の編集方法の内標準を使う
☆ ホームページ・ビルダーのジレンマと使い方
☆ ホームページ・ビルダーの起動と作業面の最適化
☆ 既存のファイルの開き方
☆ 新規サイトの作成と新規Top頁の作成の仕方
☆ 新規ペイジの枠組みの作り方
(E) ホームページ・ビルダーの設定 :
1) doctypeをXTML 1.0 に設定する、
2) 行番号表示を指定、
3) 強制修正をしないように指定、
4) バック・アップファイル作成しないよう設定する
(F) ファイル管理 - エクスプローラーとライブラリー機能の使い方
(G) GoogleBloggerの投稿と編集の仕方
平成25年2月13日千葉イスラエル教会でのホームページ作成講習会風景
平成25年2月20日千葉イスラエル教会でのホームページ作成講習会風景
(B)2月度の月例会:
千葉市民活力創造プラザの会議室での勉強会風景ー今月の写真を撮り忘れたので過去のものを掲載します
2月22日(金)の13時より開かれた例会で次の件が討議された上、了承された。
- 「千葉イスラエル教会」リ・フォーム支援プロジェクト
ホームページ立上げ支援とアフター・ケアの講習会がアシスタントの協力を得て順調に進行していることが報告された。 - 「同好会のCanpanブログ」の積極的利用に関する幹事役から要請
「同好会のCanpanブログ」の積極的利用は以下の理由で大切である:
(1)月1回の月例会では十分な話し合いや勉強が出来ないので、ブログによる密なる連絡に
よってその不足を補う意味と月例会そのものもより効率的に行うことが出来る。
(2)メールによるコミュニケーションは削除されて残らないし、会の他の仲間や一般読者とその
情報を共有できないので、このブログによって私たちの活動をアーカイブとして残すことが
大切です。
(3)この技術革新のスピードの速い時代には、新しい技術を学ぶには伝統的な出版物からのみ
ではタイムリーに新しい技術情報を得ることは不可能で、どうしてもインターネット上の各種
のフォーラムに頼ることが不可欠になってきます。この観点から、この同好会のブログを技術
フォーラムとして利用しながら一般的なフォーラムの利用の仕方に慣れる事が出来ます。
(4)特に会員の間で交わされる技術情報のQ&Aはアーカイブとして系統的に記録して会員の
間や、更に一般読者に共有し易くするために、投稿は他人の書いた投稿記事のコメントとし
てでなく、既定のカテゴリーのもと、明快なタイトルを付した独自の記事として投稿することが
必要です。
(C)勉強会:
(1) HTMLとCSSの連携に関する復習
- CSSとHTMLタグの連携
ある会員からホームページの中に掲載した写真の説明文言が対写真との間で思うように配置できないというQ&Aが寄せられました。そのページのソースコードを覗いてみましたら、次のような問題が見つかりました。
☆ 写真の説明文言が何のタグにも囲まれていない裸の段落として入力されていました。
ボックス・モデルの勉強でくり返して強調されたように、HTMLファイルの中の内容物の書式を
CSSで規定するにはその内容物を何らかのBoxの中に入れ、そのBoxに識別子を付けなけ
れば、CSSとの連携は不可能です。この場合一般的には説明文は<p>と</p>の中に入れて、
その<p>にClass="photo_txt"のような識別子を付けて、その識別子を介してCSSで書式を既
定するのです。この識別子をCSS側からセレクター(Selecter)と言って、CSSやJavaScript
やjQueryでは重要な役割を果たします。
☆ ソース・コードのHTMLタグの文法の乱れが散見されました。例えば、<p.>と</p>や<div>と
</div>とのペアリングがちゃんと出来ていないことです。これは場合によってはBrowserによる
表示に致命的な影響を及ぼす可能性があります。ウェブ・ページの入力や編集の際には必ず
「ページ・ソース」モードを使って絶えずソース・コードを確認しましょう。
☆ セレクターの指定の仕方の4通りを復習しましょう
a) HTMLタグで指定する
b) HTMLタグに付したid名で指定する
c) HTMLタグに付したclass名で指定する
d) 内用物の階層パス(path)で指定する
これらのことはこのウェブ・サイトの「PC教室」の「初めてのホームページ作り」にも載っていますので、しっかり復習しましょう。
(2)JavaScriptとjQueryの勉強
- Object Oriented Programming (オブジェクト指向プログラミング)
基本形: Object.Method(); または
Object.Property();
Objectの例: Window,Document,
Methodの例: write (表示する)、alert(警告やメッセージを表示してOKを求める)、
prompt(返答を要求する)
- 変数: 変数はデータを入れる箱のようなものでプログラミング上大変重要な役割を果します。
var 変数名 = ”データ” のように定義する。 - 配列又は最近では単にObjectともいう
配列は複数のデータを入れる箱のようなものでプログラミング上大変重要な役割を果します。
var 配列名 = {”データ1”, ”データ2”, ”データ3” , ・・・・,”データn”}のように定義する。 - 演算子
+ 加算、 - 減算、 * 乗算、 / 除算、 % 剰余 割り算の余り
++var インクリメント 代入前に1加算 ++a
var++ インクリメント 代入後に1加算 a++
--var デクリメント 代入前に1減算 --a
var-- デクリメント 代入後に1減算 a--
等々 - 繰り返し処理
for(パラメターの初期値; 繰り返し条件; マラメター加減法)
{
繰り返し処理
}
break <繰り返しからの抜け出し>
- 分岐処理
if ( 条件式
{
〔条件が成立したときの処理〕
}else{
〔条件が不成立だった時の処理〕
})
- イベント・ハンドラー
イベントとはPC上で「マウスをクリックした」、「ページが読み込まれた」など、何かが起きた時に発生するものです。JavaScriptではそのイベントに対して行う処理(イベントハンドラ)をタグの部分で指定します。
良く使われるイベント・ハンドラー: onClick="処理"; onLoad="処理"; - 関数
関数とはよく使う処理をサブルーチンとして定義することをいいます。
function 関数名 (引数1,引数2,・・・,引数n)
{
処理内容
retuen戻り値
} - 割り込み処理
JavaScriptで自動的に動くプログラムを作ろうとすれば「setInterval」または「setTimeout」というメソッドを使います。
「setInterval」は一定時間(割り込み間隔で指定)ごとにある処理(処理命令で定義)を実行させる。
「setTimeout」は一定時間(割り込み間隔で指定)が経過したのちある処理(処理命令で定義)を実行させる。
(D) 次回の例会とその討議テーマ
日時: 平成25年3月26日(第4金曜日)13:00~16:30
場所: ツイン・ビル2号館9階の千葉市民活力創造プラザの会議室
テ―マ: 愈々 第3章 jQueryの入門に入ります。
宿題: Canpanブログ促進キャンペンです。3月の月例会までに少なくとの1回は独自の投稿をして下さい。