（A）２月度の月例会：

２０１４年０２月度の月例会での勉強会風景

　　　

平成26年０２月２８日（金）の１３時より開かれた例会で次のような話し合いが行われました。

（Ｂ）勉強会：

（１）再び最新のWebサイト開発の動向

☆　HTML5の正式なRecomendationが今年2014年に出される予定。

各Browserベンダーは全力でその実装の対応に突き進んでいる。

☆　Mobile端末（SamartPhoneやiPhone等）によるWeb利用がPCによるアクセスを上回った

Internetを利用してPR活動している全世界の各企業がMobile端末向けのWebサイトにより力点を置き始めた。

☆　Mobile端末向けの開発には殆どがHTML5－CSS3ーJavaScriptが使われるようになった。

☆　HTML5－CSS3ーJavaScriptによる開発の道具建が一本化された。

従来Platform毎に用意されていた道具建（PluginやRendering Engine)がHTML5-CSS3-JavaScriptの中に
　一本化されるようになった。

従来の道具建：Rendering Engine: Trident (Internet Explorer)
　　　　　　　　　　　　　　　　　　　　　　　Gecko (Firefox, Camino, SeaMonkey他)
　　　　　　　　　　　　　　　　　　　　　　　KHTML (Konqueror) ---> WebKit (Apple, Safari，OmniWeb他)
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 --->◎Blink (Google Chrome, Opera)
　　　　gradient、border-radius、shadow等もcss3だけで可能になる。
　　　　そのお蔭で、Adobe社のFlashなどは使われなくなるだろう。

☆　Mobile端末向けの新しいWeb開発技術が活発になった。

例：　jQuery Mobilライブラリー：　HTML5のみによるサポートで簡単にデザイン出来る。 　　　

例：　レスポンシブWebデザイン：　 ユーザが閲覧しているOSやブラウザ（UA：ユーザーエージェント） を判別して、
　　　　　　　　　　　　　　　　　　　　　　サーバーサイド・プログラムで表示するHTMLを振り分けるという手法。

（２） jQueryのこれまでの復習

２－１　ｊQuery UI Tab via AjaxのPluginライブラリー

☆　Pluginライブラリーはダウンロードしなくてよく、

CDN（Contents Delivery Network ）にアクセスすればよい。
　　　　<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
　　　　<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
　　　　<link rel="stylesheet" href="/resources/demos/style.css">

☆　Pluginライブラリーの使い方

　　<script>
　　　　　$(function() {
　　　　　　　　　$( "#tab_menu" ).tabs();　　//#tab_menuはメニュー域のセレクター
　　　　　　　　　　　　});
　　　</script>

☆　メニュー域の作り方

　　<nav id="tab_menu">
　　　　　<ul>
　　　　　　　　<li><a href="#page_1">頁１の名前</a></li>
　　　　　　　　<li><a href="page_2.html">頁２の名前</a></li>
　　　　　　　　<li><a href="page_3.html">頁３の名前</a></li>
　　　　　</ul>

　　　<section id="page_1">
　　　　　　　<p>頁１のTab Menuをクリックして呼び込まれるpage_1の内容
　　　　　　　　をここに入れておきます。</p>
　　　</section>

Important !!＜注＞頁１，２，３が簡単なものは、頁２と頁３を別ファイルにしないで、 頁１に<section id="page_2">と
　　　　　　 　　　　　　　<section id="page_3">を作っておいた方が易しくて、問題がない。

☆　Ajaxによって読み込まれる部分の作り方　Important！！

＊　簡単なものは別ファイルにしないで、同じページの中に入れておいた方が易しい。
　＊　別ファイルにすると色々解決すべき問題がある。
　　　　特に、別ファイルの中でリスト・タグ（ul-li）を使っていたり、preloadの部分のstyleと異なったCSSを使うと
　　　　PluginのCSSと contention(競合)を起こす可能性がある。
　＊　別ファイルのにしてAjax通信で読み込む場合は、<head>～</head>の中のCSSやScriptはcontention(競合)を
　　　　起こすので、含めないで＃pageに読み込む部分だけのHTMLファイルにする。
　＊　別ファイルに独特のCSSを使いたい場合は、タグの中style属性（style="属性：数値；"）で指定すればよいが、
　　　　これをすると、保守の難易性に問題が生ずるので、出来るだけAjaxで読み込む部分は、preloadの部分のstyle
　　　　を共有するような設計にすべきです。
　＊　この辺りの実例は：『たそがれ長兵衛』サイトの『下田温泉への歴史の旅』が参考になります。

　　　　

（２） 今日の勉強

３－１　LightBoxjQueryライブラリーの使用

３－２　HTML5のルビ・タグの現状

月日は百代はくたいの過客くわかく にして行かふ年も又旅人也。

　このコードは次のように大変簡単になりました。
　　<p>月日は<ruby><rb>百代</rb><rt>はくたい</rt></ruby>の<ruby><rb>過客</rb><rt>くわかく</rt></ruby>
　　　　にして行かふ年も又旅人也。</p>

タグはHTML5で統一されて簡単になったが、FireFoxとOperaではまだ対応していない。 FireFoxのAdd-onをダウンロードして、次のように読み込む；
　　　<link rel="stylesheet" href="css/ruby_enabler.css">
　　　<script src="js/ruby_enabler.js"></script>

採用例は：『たそがれ長兵衛』サイトの「奥の細道の評論本の紹介」のページを 参照下さい。

３－３　会員が最近遭遇した深刻な問題

Windows8.0からWindows8.1へのアップグレードしたために起こった深刻な問題！！
Windows8.0をWindows8.1 にＵｐｇｒａｄｅしたために深刻な問題が起こりました。

昨年購入した富士通のＮｏｔｅＰＣにはWindows8.0がプリインストールされていましたが、最近富士通から盛んに８．１にバージョン・アップを進めるメールが届くので、ついその気になって、バージョン・アップをを敢行してしまいました。
バージョン・アップは至ってスムースに実行され、その後一見問題は起きていないように感じました。操作方法では些か戸惑いはありましたが、ＩＥやＧｏｏｇｌｅＣｈｒｏｍｅなどＢｒｏｗｓｅｒやＷｏｒｄなどＯｆｆｉｃｅなどのＰｒｏｇｒａｍも通常通り作動していました。

所が昨日、日頃良く使っているＦｉｌｅアクセスの為のライブラリー機能を使おうとした折に、ライブラリーに登録したＦｉｌｅが登録したライブラリーにないことに気付きました。調べているうちにＦｉｌｅを管理するＥｘｐｌｏｒｅｒの中のファイル構成が可なり乱れている事が判りました。富士通ＮｏｔｅＰＣの中で失われているＦｉｌｅをホームグルプの中にあるＤｅｓｋＴｏｐＰＣからホームネットワークを通じてＣｏｐｙしてみようと試みました。ところが、ホームグループ内のＦｉｌｅ共有機能が設定されているにも拘わらず、相手のＰＣが見えません。即ち、ホームグループ内のＰＣがお互いに認識されません。

止む無く、富士通の有料のサポート・サービスに電話してＲｅｍｏｔｅでこちらのＰＣの設定状況をチェックしてもらいました。結果は、自分でチェックしたと同様にホームグループ内の共有とネットワークの設定は正しく規定されているということで、専門家でも何故ホームグループ内のＦｉｌｅやＰｒｉｎｔｅｒの共有が働かないか判らないという事でした。

ここで、唯一出来ることはWindows8.1 を8.0に戻す以外に手わないという事でした。然し、問題はその場合、ＯＳの全ての設定と、導入してあったＡｐｐｌｉｃａｔｉｏｎＳｏｆｔはすべて失われるという事でした。時間をかけて、現在ＯＳはWindows８．０に返り、Ｉｎｔｅｒｎｅｔｔ接続等の再設定でＩＩｎｔｅｒｎｅｔにも接続しました。然し、Ｐｒｅ‐ｉｎｓｔａｌｌされてあったＯｆｆｉｃｅＳｏｆｔすべては失われました。ＨＰＢやＤｒｅａｗｅａｖｅｒはＣＤがありますので後で再Ｉｎｓｔａｌｌ出来ますが、このトラブルによる時間的、金銭的損失は小さくありません。

富士通のＨＰにはWindows８．１にＵｐｇｒａｄｅするには：
(1)リカバリディスクを作成し、大切なデータのバックアップを取ってください。
(2)Windows 8.1 にアップデートすると「バックアップナビ」は使用できなくなります。
(3)よく使うアプリがWindows 8.1 に対応しているかご確認ください。
(4)よく閲覧するサイトがInternet Explorer 11に対応しているかご確認ください。
(5)プリンタなどの周辺機器がWindows 8.1に対応しているかご確認ください。

こんなことまでして、何も便利になる訳でないWindows8.1にするＲｉｓｋを取る価値はないと思いました。