平成２６年０５月度
（A）５月度の月例会：
５月度の月例会の勉強会風景
平成26年0５月２３日（金）の13時より開かれた例会で次のような話し合いが行われました。
- 市民活力創造プラザで借用していたProjecterが故障して使えない状況が続いていますので、新たにProjecterを市民活力創造プラザで購入する予定があるかどうか所長に訊ねた所、今の所具体的な予定が無いということでした。 そこで、以前に何回か会場を借りていたプロミスの会議室を再度利用する話が持ち上がった。
- 月例会の後、全員でプロミスの事務所に立ち寄り、会議室がまだ無料で借りられるかどうか、そしてProjecterも借りられるかどうか訊ねました。会議室がまだ無料で借りられ、然もProjecterも利用出来るということでしたので、市民活力創造プラザでProjecter購入の予定を聞いた上で、Projecterが購入されるまで、プロミスの事務所の会議室を６月の例会の帰りに立ち寄り、９月からの申し込みをすることにした。
- 将来、ホームページ立ち上げ支援の依頼が来ることに備えて、CGIの勉強をする必要があることが話し合われました。そこで６月からの勉強のテーマを暫くCGIにすることが決まりました。
（B）勉強会：
（１）今日の勉強 PCサイトとスマートフォンサイトを切り替えるJavaScriptライブラリーの利用
２－１ 会員のLilyさんがInternet上で『Pc2Sp.js』というJavaScriptライブラリーを見付け、その利用を発表された。
２－２ このライブラリを利用すると
1. スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。
2. PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。
3. スマートフォン用ページでは「PCサイトを見る」なリンクが設定可能で、それがクリックされると、
スマートフォンでPC用のサイトが閲覧できます。クリック後は1の転送機能が無効になります
4. PC用のサイトでは、スマートフォンで見た場合のみ表示される「スマートフォンサイトを見る」リンクが
設定可能で、これがクリックされるとスマートフォン用のURLに転送され1の機能が復活します。
２－３ このライブラリーをダウンロードし、説明を読むサイトのURLは
http://blog.webcreativepark.net/2012/04/19-120731.html
２－５ ライブラリーの読み込み
<head>と</head>の中に以下にライブラリー読み込みの命令を入れる
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.Pc2Sp.js"></script>
但し、この場合はGoogle APIのjQueryのライブラリーを使っているので、既に元々のjQueryのライブラリー
読み込みを入れてあれば、Google APIのjQueryのライブラリーの読み込みは不要です。
２－６ PC用ウェブ・ページの<head></head>の中に設定するライブラリーを呼び出すインターフェイス
<script>
$.switchPc2Sp({ //切り替えライブラリーを実行する
mode : "pc" ,
spLinkBlockInPc : "#spLinkBlockInPc" ,
anchorToPcInSp : "#anchorToPcInSp"
});
</script>
２－７ PC用ウェブ・ページの<head></head>の中に設定するCSS
<style type="text/css">
#spLinkBlockInPc{
display:none; //Linkを表示しないようにする（自動的にスマホにリンクするので）
}
</style>
２－８ PC用ウェブ・ページの<body></body>の中に入れるコード
<div id="spLinkBlockInPc"><a href="sp.html" id="anchorToSpInPc">SPサイト</a>
</div>
スマホからこのページにアクセスされた場合は、この命令で自動的にスマホ用のウェブ・ページにLinkする。
このコードの中の"sp.html"にスマホ用のウェブ・ページのパスを代入する。
但し、この命令は display:none; のCSSのお蔭で表示されない。
２－９ スマホ用ウェブ・ページの<head></head>の中に設定するライブラリーを呼び出すインターフェイス
<style type="text/css">
$.switchPc2Sp({
mode : "sp" , //スマホ用のページであることを示す
anchorToPcInSp : "#anchorToPcInSp" //PC用のページにLinkする<a ・・・＞
});
</style>
２－10 スマホ用ウェブ・ページの<body></body>の中に入れるコード
<a href="pc.html" id="anchorToPcInSp">PCサイト</a> //"pc.html"にPC用ページのパスを代入する
これはスマホでの検索者がPC用のページを見たい時にLinkするもの。
２－11 このライブラリーを使った例題
☆ Lilyさんの例題： PC用のページ スマホ用のページのパスは不明
☆ 長兵衛の例題： 同好会の例題 Sample ５－１６ スマホ用のページ
(D）次回の例会とその討議テーマ
日時： 平成２６年６月２７日（第４金曜日）13:00～16:30
場所： 千葉市市民文化センター9階の千葉市民活力創造プラザの小会議室
テ―マ： CGI入門。
