（A）１２月度の月例会：
2013年1１月度の月例会での勉強会風景
１２月２７日（金）の１３時より開かれた例会で次のような話し合いが行われました。
- 平成25年の活動に就いて話し合った。
会の趣旨である『勉強したことを社会に役立てる』という点では少々物足りなさを感じたという意見が出され、来年はこの趣旨を各人が心して、NPOや小商店で私達の支援を求めているような団体を探してみようという事になった。 - 平成25年の勉強会の仕方に就いて話し合った。
特定の人の一方的な講義の形で勉強会を進めるだけでなく、会員の皆が各々関与しながら勉強を進めるには、各人が日常経験した問題やその解決方法を持ち寄って議論する時間を少しずつでも設けたらどうかという意見が出された。 - 一昨年のように来年夏は2泊3日位の夏合宿をやってはどうかという意見が出た。
この会でまだ手を付けていないCGIの集中的な勉強が泊まりがけの合宿では可能です。7月下旬の白樺高原のインターネット接続が出来るペンションはどうかという話しが出された。 - 来年は新年会をやろうという提案があり、1月２４日（金）の例会前にランチョン・パーティーをすることに決まった。以前の会員のSさんなども招くことも考えようという意見も出た。
新年会は１／２４（金）１１：３０ センシティビル２３階「東天紅」と決まりました。
（Ｂ）勉強会：
（1） Webの記述言語の標準化巡る闘争の歴史と最近の状況
- ☆HTML3.2（1997年）
W３CによるWeb記述言語の最初の標準化 - ☆HTML4 Recomendation（1998年）
構造(HTML)と見栄(CSS)の分離をしようという基本方針が打出された。 - ☆XHTML1 Recomendation（2000年）
HTML4にXMLとの互換性を加味して若干の改良を加えた。現在最も広く採用されている。
* 終了タグは省略しない <img src="picture.jpg" ・・・・ />や<br />のように閉める。
* タグは小文字で記述する
* 属性値は『””』で囲む - ☆XHTML2 Recomendation（2003年）
XHTML1の方向を純粋に推し進めた結果、後方互換性が失われた。
ブラウザ・ベンダー等の猛反発を受け、WHAT WGの結成の動きが出てきた。 - ☆XHTML2プロジェクトの解散（2006年）
XHTML1の方向性が頓挫した。従って、将来はXHTML1.0はなくなる見通し。
- ☆HTML5 Working Groupの立ち上げ（2007年）
WHAT WGが結成され標準化の主導権を握った。
その後、WHAT WGもW3Cの一部となる。
- ☆HTML5 Recomendationが出される（2012年）
Browserベンダーの対応状況はGoogleChrome,Safari＞Firefox, Opera>IE
のようにまだ対応が一様でない。 然し、基本的な部分は80％～95%実装されてきた。
私達が積極的にテストしてみる環境が整ったともいえる。
- ☆現在私達に推奨されること
（１）基本的には、現在最も普及しているXHTML1.0にを使い続ける
XHTML 1を使う場合は
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
タグのクロージングを必ず行う。<img ・・・ /> や <br />
- （２）HTML5の状況をWatchして勉強をすすめ、テスト的に使ってみる
HTML5を使う場合は
<!DOCTYPE html>
DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード
（Quirks mode）となります。
<html lang="ja">
<head>の中の<meta charset="uft-8">が必要。
閉じタグは必ずしもいらない。<image ・・・>や <br>で良い。
- （３）見栄に就いてはCSSを積極的に使うようにする（CSSにも互換性の問題が残る）
- （４）JavaScriptは出来るだけjQueryを使うようにする（JavaScriptにも互換性が残る）
jQueryのPluginLibraryがどんどん出てくるので、試して行く。
（2） jQueryのこれまでの復習
- ２－１ アニメーションの一般形のメッソッド
$("セレクタ").animate(変化後のCSSプロパティ,スピード,イージング,function()
{アニメーションが完了した時の操作}）；
変化後のCSSプロパティは｛"margin-left": 40px", "margin-top", "20px"}のように
複数指定可
スピードは省略可能で、指定無ければnormalとなる
イージングは変化の仕方で、linear(定速)かswing（自然の動きで初期値）
コールバック関数functionは指定しないと何も起こらない。
一般形のアニメーション メソドの例として： Sample_５-５
- ２－２ メソッド・チェインを使った連続的動きのアニメーション
$("セレクタ").メソッド１ 一つのセレクタに複数のメソッドを付けると
.メソッド２ 連続したアニメーションの動きをさせることが出来ます。
.メソッド３ 連続的動きの乱れを防ぐために：
.delay(遅らせる時間ミリ秒単位)
.stop()
.メソッドn;
一般形のメソッド・チェインを使った連続的アニメーションの例： Sample_５-６
- ２－３ データの移動メソッド（以前はデータの置き換えとして勉強した）
$("セレクタ").html("ＨＴＭＬデータ");
//セレクタで指定した場所にＨＴＭＬ要素を移動する
$("セレクタ").text("ＨＴＭＬデータ");
//セレクタで指定した場所にテクスト・データを移動する
（３） 今日の勉強
- ３－１ 特殊なCSSプロパティの指定の仕方
＄(”セレクタ”)．animate({left:"+=20px"},500);
// 相対指定（-=20pxもある）
クリック毎に20pxづつ0.5秒かけて左へ移動する
CSSプロパティ名が英数字とアンダースコアの時、又は値が
数字の時、””が省略できる。
$("セレクタ").animate({"opacity,不透明度｝,スピード,コールバック関数）；
不透明度：0が透明、１が完全に見える状態
相対指定と不透明度を使ったアニメーションのサンプル： Sample_5-7
- ３－２ Ajax通信(非同期通信)とは
AjaxはAsynchronous JavaScript + XMLの略で、通常のブラウザーのURLによる
サーバーへのページRequestでなく、製作者の意図したタイミングで
（これが非同期的にという意味）、欲するページの部分だけを要求して、
ブラウザーに表示出来るというJavaScript の機能を言います。
この機能をJavaScriptのHTTP通信機能とも言います。
JavaScriptだけではこの機能を使いこなすのは少々難しいのですが、
jQueryにはより易しく使えるようなメソッドが用意されています。
- ３－３ Ajaxのloadメソッド
$("セレクタ").load("ファイル・パス");
//セレクタにパスで指定されたファイルを読み込む
$("セレクタ").load("ファイル・パス セレクタ");
//セレクタにパスで指定されたファイルのセレクタ部分だけをを読み込む
Ajaxのloadメソッドを使ったサンプル： Sample_5-8ご覧ください。
- ３－４ 色々なデータの外部ファイルを読み込むことが出来る$.ajax命令
Ajax通信のloadメソッドでは読み込めるデータ・タイプはHTMLファイルに限られていましたが、
この$.ajax命令を使うとＨＴＭＬだけでなく、TextやXML等の色々なデータを読み込むことが出
来ます。
$.ajax({
url : "ファイルのパス",
dataType : "html or xml or text", // 読み込むデータ・タイプを指定する
success : function(data){
// 読み込みが成功した時に実行する処理
}
});
残念ながらajaxのloadメソッドのように選んだファイルの一部だけを取り出して表示は出来ない。
それをするためには、元のファイルを選んだものを指定しておかねばならない。
$.ajax命令を使ったサンプル： Sample_5-9ご覧ください。
(４） メンバーの経験に就いての討議
メンバーのEさんからBrowserのGoogleChromeではBodyの中の要素が意図したように配列されないという経験が話されました。 特に、縦並びにしたい要素が横並びになって表示される場合がある。この場合はその要素のStyleをCSSで明示的に指定して解決したという経験が話された。 恐らくこの問題はBrowser独特のDefault（初期設定）のStyleが影響しているのではないかという意見が出された。
ブラウザの種類（IEやFireFox、Safari、Google Chromeなど）によって、初期状態で適応されるCSSが異なります。 そのため、作成したCSSに記述していないタグや属性などは、ブラウザの初期状態で動作することになります。 つまり、ブラウザの種類によって見え方が異なるといったことが起こってしまうのです。現にこのページも現在筆者が使っているFireFoxで表示すると、大部分のFontが太字（Bold）になって現れています。
Browser独特の初期設定をリセットする方法はユニバーサル・セレクターを使って；
* { margin: 0; padding:0; border:0;} とする他に色々なResetの為のCSSが提案されています。
特に、HTML5を使った場合はBrowser毎に色々な初期設定がされていますので、各自Internetでその方法を調べてみてはどうでしょうか。
(C） 次回の例会とその討議テーマ
日時： 平成２６年１月２４日（第４金曜日）13:00～16:30
場所： 千葉市市民文化センター9階の千葉市民活力創造プラザの小会議室
テ―マ： 便利なjQueryのPluginLibraryの学習及び実習をします。
宿題： 演習の仕組みを良く理解して、Sample５ー７の実習と同様な自分自身で作成下
例題を一つぐらいやってjQueryの実習に慣れておいて下さい。
