学科ブログ（CG・Webクリエイター科）

ダルマ夕日

2012年02月15日

ＣＧ・Ｗｅｂクリエイター科の水谷です。

「撮ったどぉ～！！」

写真１：「ダルマ夕日」

２０１２年２月１２日（日）　西浦海岸より。

『ダルマ夕日』

週末、今治で撮影しました。
『ダルマ夕日』と言えば、「松山市の風早海岸（旧北条市）」が有名です。
もっと太陽が揺らいで、幻想的な『ダルマ夕日』の写真を見たことがありますが、自分の中では良く撮れたと思っています。
（初めて撮ったので、本人舞い上がり気味ですので、そこの辺りを差し引いて読んで下さい。）

場所は今治市波方町の西浦海岸。

調べてみると、瀬戸内の『ダルマ夕日』ポイントは沢山あるようです。
（ココを参考にさせていただきました。）
さらに、『ダルマ朝日』ポイントまでありました。
地球が丸いのは解ってますが、そんなに地球は丸かったのかと、改めて認識しました。

だって、ちっちゃな日本の、そのまたちっちゃなちっちゃな瀬戸内海で、水平線に沈む太陽が見れるのです！
瀬戸内海の西のはずれ?の愛媛から見て、太陽はさらに西に沈みます。

レンズは、200mmにテレコン×1.4をつけてます。
画面に灯台も入れて、ちょうど良い焦点距離でした。
（本人舞い上がってますので、スミマセン。）

天候にまぐまれたし、何と言っても、この情報を教えてくれた、『ギャラリーやすの』のオジサンに感謝です。
（たぶん、公式ＨＰは、『ふじやま古墳』です。）

石鎚山系の山岳風景写真を中心とした『くもの会』の写真展を見学するために、『ギャラリーやすの』を訪ねました。
（『くもの会』で検索すると、沢山の『くもの会』がヒットしますので、「石鎚山系の・・・」って付けました。）

石鎚のスッゴイ写真を観て、「こんな人たちと、勝負はできん・・・」って、凹みそうでした。
そんなときに、今日の『ダルマ夕日』を教えて頂きました。

場所と時間だけでなく、右に灯台を、左に夕日をという構図まで忠実に・・・

な～んだ！って言わないで下さい。結構難しいんだから。

太陽の動きは、意外と速いのです。
なので、沈むポイントで、前もって構図とピントと・・・もろもろセットして、
海面にまで降りてきたら、後はレリーズを押すだけにしておきます。

太陽は真っすぐ下には沈まないから、沈むポイントを見定めておかなくてはなりません。
まだ太陽が高いうちから、画角を広げて、シャッターを切って、画像チェック。
露出をどのくらいアンダーにするか？を決めて・・・。

ズームを決めて、灯台にピントを合わせます。
これはライブビューで拡大して、何度も微調整。
（ココ一番は、オートフォーカスを信用せず、マニュアルで。）

で、待ちうけて、パシャッ。パシャッ。パシャッ。

でも、灯台の灯も点滅していることに気付いたので、この灯も入るタイミングを狙って、息を止めて、パシャッ。
（カメラはデジタルだけど、やっていることはアナログ。）

確認している場合じゃないので、沈んでしまうまで、パシャッ。パシャッ。パシャッ。
（毎回ミラーアップしてると手間なので、ライブビューのまんまで。）

学科ブログなのに、高校生の皆さんはもしかすると、『ダルマ夕日』には興味ないでしょうかねェ。
だって、この海岸に並んでいたカメラマン達は、とっくに定年退職したと思われる方々ばかりでした。
（小学生を１人見かけたけど、パパかおじいちゃんに連れられて来たのでしょう。）

スッゴイのを担いでくるオジサン達に混ざって、この中では若造だったけど、頑張った１枚でした。

カメラの行列写真２：「カメラマン集合」

携帯で撮ったので、手ぶれ＆ピンボケ。

場所取りも大変でした。
でも、皆さん、心やさしい方ばかりでした。
隣のおじさんからは、撮り方指導をしていただきました。

ところで、次回のオープンキャンパスは、

2月19日(日) 『建国記念の日』　『魅せるWebページの作り方/スタイルシート(ＣＳＳ)』です。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

冬の撮影

2012年02月10日

ＣＧ・Ｗｅｂクリエイター科の水谷です。

しばらくぶりの書き込みです。

週末は、早起きをして長浜へ撮影に出かけました。
2011年12月15日の『肱川あらし第２段』の予定でしたが・・・さっぱり嵐が発生しませんでした。

天気予報では「晴れ」だったのですが、途中の双海辺りは「小雨」が降っていたし、
長浜ではど～んよりとした「曇り」でした。

残念。

仕方が無いので、場所を変えて、気分も変えて・・・レンズも変えて、撮影することに。

『花き研究指導室』

松山まで戻ってくると、うす曇りだけど、青空が見えました。
一応天気予報は当たったということにしておいてあげましょう。
でも、寒いし、風もあるし、菜の花はまだ少ないし、・・・で、ひらめいたのが、『花き研究指導室』でした。
（いままでは『かきせんたー』って言ってました。）

ここは、入場無料だし、温室の中なら風は来ないし、暖かいし。

撮影しやすかったのですが、温室の中は花壇ではないので、構図もなにもなく、ただ撮っただけの写真になってしまいました。

写真１：「ゼラニウム」

散水されたので、水滴が付いていました。
この水滴を大きく写す機材が無くて残念。

ブラジルトケイソウ

写真２：「ブラジルトケイソウ」

直径10ｃｍくらいの大きい花でした。
毒々しくて、造花かと思いました。

写真３：「オキナワスズメウリ」

ツルを伸ばしてゆくため、支え棒がありましたが、見栄えが悪いので、写らない角度で撮りました。
赤い実は、プチトマトくらいの大きさでした。

ところで、次回のオープンキャンパスは、

2月11日(土) 『建国記念の日』　『プログラミング入門講座 JavaScriptで動くホームページを作ろう』です。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

来島海峡大橋ライトアップ

2011年12月21日

ＣＧ・Ｗｅｂクリエイター科の水谷です
今回も、撮影の報告です。

『来島海峡大橋ライトアップ』

冬は撮影が苦手です。撮る被写体が乏しくなるし・・・、夜景を撮ったら寒いし・・・、で、来島海峡大橋ライトアップを撮影してきました。寒かった。

来島海峡大橋ライトアップの写真（河原電子ビジネス専門学校のCG･Webクリエイター科）

　毎晩ライトアップしているわけではありません。ライトアップの日時は、『来島海峡大橋ライトアップカレンダー』で確認できます。12月は23、24、25、30、31日がライトアップの日なので、クリスマスイベントにも、大晦日イベントにも使えます。
　この写真は、来島海峡展望館からです。気持ちとしては、船が通る軌跡を映しこみたいのですが、普通に撮影すると、シャッター速度が30秒が限界です。なので、橋げたの右にチラリと。
　バルブモードもありますが、あまり長いシャッター時間は、ノイズが発生するので不可能です。どうにか工夫して、もう少し面白い写真にしたいと思っています。乞う！ご期待！

ところで、次回のオープンキャンパスは、

新年、1月15日(土)　『魅せるWebページの作り方～Photoshop/Illustrator～』です。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

肱川あらし

2011年12月15日

ＣＧ・Ｗｅｂクリエイター科の水谷です
今回は、撮影の報告です。

『肱川あらし』

久しぶりの晴天が期待できそうでしたので、早朝、長浜へ行って、肱川あらしを撮影してきました。

肱川あらしの写真（河原電子ビジネス専門学校のCG･Webクリエイター科）

早朝なので、右上の明かりは月です。左手が肱川上流（大洲方面）で、右手の夜景が長浜町の町並です。

右に広がる海が伊予灘で、河口に橋が２本架かっているのがわかります（よね）。（もしわからなければ、次の夜明け後の写真で確認して下さい。）

上流側の細い橋が、通称、『赤橋』です。（正式には『長浜大橋』といいます。）文化庁指定の登録有形文化財です。『道路可動橋』と言って、船が川を通る際、橋の真ん中が跳ね上がります。

この日も肱川あらしが出ましたが、高度が高い位置にありました。地元の人から聞いたのですが、もっとスッゴイ肱川あらしの時は、川面まで降りてきているそうです。

今朝は朝の冷え込みが、イマイチ足りなかったのではないでしょうか。その原因は、今朝は晴れてはいたのですが、前夜が曇っていたので、放射冷却不足でしょう。それ以外は、風も無く、潮も干潮と満潮の間だったので、悪くはありませんでした。

肱川あらしの写真（河原電子ビジネス専門学校のCG･Webクリエイター科）

しばらく粘りましたが、夜が明けても肱川あらしが高いままでした。残念！

夜が明けると、前述の『赤橋』が緑に見えます。どうも改修工事しているようです。肱川の洪水対策をしていますが、国内最古の『道路可動橋』を残すために、橋台部分を高くしているそうです。てっきり、赤いペンキを塗り直しているのかと思いました。

今回の撮影は、２枚とも『肱川あらし展望公園』から写しました。次回は、『雲海展望公園』という撮影ポイントもあるので、挑戦してみます。（『雲海展望公園』には一度行きましたが、その日はあいにくの曇り空で、雲海が遠くに見える程度でした。）

近くで撮影していたオジサンは、もう少し粘ってみるようでした。もう少し粘ったら、肱川あらしの状況がかわるかもしれませんでしたが、私は学校に行かなくては・・・　9:00 の出勤に間に合うよう撤収！
UNKAI HUNTER の活躍に、乞う！ご期待！

ところで、次回のオープンキャンパスは、

12月17日(土)　『商品撮影体験してみよう～映像撮影編集～』です。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

連載講座:『PHP入門』第７回　～アルゴリズム＋データ構造＝プログラム（その２）～

2011年12月09日

ＣＧ・Ｗｅｂクリエイター科の水谷です。

本日のテーマは

『PHP入門』第７回　～アルゴリズム＋データ構造＝プログラム（その２）～

Step1．今回の準備

前回は、『データ構造』ということで、『配列』を勉強しました。
≪処理概要≫
画像ファイルが３つありますので、それらをすべて配列に読み込んでしまいます。
その後、『乱数』を使って、画像を１枚だけ選んで表示しました。

今回は、『リスト構造』を勉強しましょう。
≪処理概要≫
画像ファイルが３つありますので、それらをすべて読み込んで、ポインターでつなぎます。
その後、画像３枚全てを順に表示します。

Step2．『リスト構造』（その１）

最初の『リスト構造』の例は、この構造とか仕組みが良く分かる処理内容にしています。なので、Ｃ++言語っぽくなっています。

【Ｌｉｓｔ 01 】
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>PHP sample</title>
</head>
<body>
画像ファイルの表示。<br>

<?php
    /* 『リスト構造』の作成 */
    $img_info = new stdClass;
   $img_root = $img_info; /* 『リスト構造』の先頭を確保 */

   $fp = fopen( 'ImgInfo.txt', 'r' );
   $j = 0;
   if( $fp ){
        while( $fname = fgets( $fp ) )
        {
            $title = fgets( $fp );
            $alt   = fgets( $fp );

            $img_info -> fname = $fname;
            $img_info -> title      = $title;
            $img_info -> alt        = $alt;
            $img_info -> next     = new stdClass;
            $img_info = $img_info -> next; /* ポインターを１つ進める */
            $j++;
        }
        fclose($fp);
   }
   $img_info -> fname = "番兵"; /* ４番目の未使用クラスを『番兵』と命名 */
   $img_info -> next     = NULL;

    /* 『リスト構造』の参照 */
    $img_info = $img_root; /* ポインターを『リスト構造』の先頭に戻す */
   for( $j = 0; $img_info -> next; $j++ )
   {
        $fname = $img_info -> fname;
        $title      = $img_info -> title;
        $alt = $img_info -> alt;
        print( "<p><img src=$fname title=$title alt=$alt width='400' height='267' border='0'>" );
        print( "<br>写真：(".($j+1).") " );
        print( $img_info -> alt );
        print( "<br></p>" );
        $img_info = $img_info -> next; /* ポインターを１つ進める */
   }
   print( "<p>写真：(".($j+1).") ".$img_info -> fname."</p>" );
?>
</body>
</html>
------------------------------ ここまで ------------------------------
【解説】
(1) メモリー確保
$img_info = new stdClass;
$img_info -> next     = new stdClass;
プログラム実行中に、メモリーを確保します。Ｃ言語やＣ++言語ではそのサイズ（バイト数）が必要ですが、PHP では良きに計らってくれます。

(2) ポインターを１つ進める（ポインターをたどる）
$img_info = $img_info -> next;
この表記で、ポインターを１つ進めることができます。図１を参照して下さい。$img_root と $img_info の２つが、ポインターです。
100、200、300、400 というのは、メモリー上のアドレスで、一例として書きました。データを３件読み込んで、ポインターでつないでゆく過程を図で見てみて下さい。$img_root は、常に先頭のオブジェクトを指しています。$img_info は、今参照しているオブジェクトを指しているようにコントロールします。図を見て気付くと思いますが、先頭から順にたどるしかありません。このポインターが途切れてしまうと、広大なメモリー空間で、迷子のオブジェクトになってしまいます。そして、オブジェクトが次のオブジェクトを指しており、これが『リスト構造』です。

図１．『リスト構造』が作られてゆく過程のイメージ

(3) アロー演算子
->
オブジェクトが持つプロパティ（メンバ変数）やメソッド（メンバ関数）を使用する際に使用します。
Step5 (3) で解説しました。

(4) 『番兵』
　プログラミング技法の古典的技法の１つです。
Step5 (4) で解説しました。

(5) メモリー解放
　『リスト構造』を作り、参照しました。その後、プログラムが終了する前に、使用したメモリーを解放する必要がありました（過去形）。つまり、Ｃ言語やＣ++言語ではメモリーを解放する必要がありました。PHP はありません。【Ｌｉｓｔ 01 】のままで良いのです。詳しくは、Step5 (1) と (2) で解説しました。

Step2．はここまで。下記、図２のように表示できたら成功です。
第５回のStep2 と、処理方法が異なりますが、表示結果は同じです。

図２．画像を３枚表示したブラウザ表示画面（縮小表示）

Step3．『リスト構造』（その２）

次の『リスト構造』の例は、PHPらしくしています。今どき風になりましたが、構造とか仕組みが分かりにくいかもしれません。

【Ｌｉｓｔ 02 】
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>PHP sample</title>
</head>
<body>
画像ファイルを表示。<br>

<?php
    /* 『配列』の作成 */
    $img = array();
    if( $fp = fopen( 'ImgInfo.txt', 'r' ) )
   {
        $j = 0;
        while( $f = fgets( $fp ) )
        {
            $t = fgets( $fp );
            $a = fgets( $fp );
            $img[$j] = array( $j+1, $f, $t, $a ); /* 配列の１つの要素が、さらに配列になっている */
            $j++;
        }
        fclose($fp);

      /* 『リスト構造』として参照 */
        foreach( $img as $x )
        {
            list( $j, $f, $t, $a ) = $x;
            print( "<p><img src=$f title=$t alt=$a width='400' height='267' border='0'>" );
            print( "<br>写真：(".$j.") ".$a );
            print( "<br></p>" );
        }
   }
?>
</body>
</html>
------------------------------ ここまで ------------------------------
【解説】
(1) 『配列』の作成
$img[$j] = array( $j+1, $f, $t, $a );
　配列の１つの要素が、さらに配列になっています。

図３．配列の１つの要素が、さらに配列になって、３件分のデータが格納されてゆく過程のイメージ

(2) 『リスト構造』として参照
foreach( $img as $x )
　ポインタを『リスト構造』の先頭に戻すのも、ポインタを１つ進めるのも、データの終わりも、みんなまとめて、foreach() で面倒をみてもらっています。なので、ポインターをたどらなくていいし、ポインターが途切れないし、【Ｌｉｓｔ 01 】にあった『番兵』も必要ありません。for() 文のような繰り返し処理を、『内部ポインタ』を使いながら、プログラマーに手間をかけさせずに処理しています。プログラマーからすると、「こんな感じ～↑、上手くいってま～す。」byチャラ男って・・・、こんなんで良いみたいですよ。便利になりました。

Step3．はここまで。上記、図２のように表示できたら成功です。
Step2．も Step3．も、表示結果は同じです。

Step4．『配列』（その２）

前回の第６回で紹介したプログラムを、上記 Step3 にならって、PHPらしく修正してみましょう。

【Ｌｉｓｔ 03 】
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>PHP sample</title>
</head>
<body>
乱数を使って、画像ファイルを１つだけ表示。<br>

<?php
   srand();
    /* 『配列』の作成 */
    $img = array();
    if( $fp = fopen( 'ImgInfo.txt', 'r' ) )
   {
        $j = 0;
        while( $f = fgets( $fp ) )
        {
            $t = fgets( $fp );
            $a = fgets( $fp );
            $img[$j] = array( $f, $t, $a );
            $j++;
        }
        fclose($fp);

      /* 乱数を使って、画像を１つだけ選ぶ */
        $cnt = $j;
        $j = rand(0, $cnt-1);
        list( $f, $t, $a ) = $img[$j];
        print( "<p><img src=$f title=$t alt=$a width='400' height='267' border='0'>" );
        print( "<br>写真：(".($j+1).") ".$a );
        print("<br></p>");
   }
?>
</body>
</html>
------------------------------ ここまで ------------------------------
【解説】
(1) 修正点
list( $f, $t, $a ) = $img[$j];
配列を１つにしています。見ためにシンプルでしょう。修正前は、配列を３つ使っていました。

図４．配列 $img に保存した画像データを、乱数で選択して表示する過程のイメージ

Step4．はここまで。下記、図２のように表示できたら成功です。
第６回のStep2 と、処理方法が異なりますが、表示結果は同じです。

図５．画像を１枚表示したブラウザ表示画面

Step5．用語の解説

(1) メモリーリーク
　プログラムを実行していると、使われなくなったメモリー領域が、広い範囲に散乱した状態になります。この領域の一つ一つは、小さい領域なので、このままでは再利用できません。水道管から、わずかな水漏れを起こしていると、水が失われるのと似ています。このようにメモリーの一部分がポツリポツリと失われてゆくので、『メモリーリーク』と言います。
　Ｃ言語やＣ++言語では、実行中に確保したメモリー領域は、プログラマーが責任を持って解放する約束になっていました。つまりメモリーリークを無くすのは、プログラマーの責任になりました。しかし、実際には、メモリーリークを無くせませんでした。エクセルを起動して、何もせず終了します。この前後で、メモリーのフリースペースが減ってしまっていたのが現実で、マイクロソフトの優秀なプログラマーをもってしても、メモリーリークを無くすのは不可能でした。

(2) ガベージコレクション
　パソコンの初期(NEC PC-8001 や、PC-8801 などの頃）、パソコンには BASICインタプリタが搭載されていました。この頃の BASIC プログラムは、メモリーを食い散らして、メモリーリークをさんざん起こしていました。しかし、BASIC の言語仕様上、いたしかたなかったのです。そこで、システム側で、使われなくなったメモリー領域を寄せ集め、ひとまとめにして、再利用できるようにする機能が実装されていました。この機能のことを、『ガベージコレクション』と言います。
　このガベージコレクションの機能を、BASIC のシステム（BASIC インタプリタ）に実装していました。この頃にはメモリーリークは問題になりませんでした。
　その後、主流が BASIC からＣ言語に移り、負荷のかかるガベージコレクションは実装されず、メモリー解放の責任はプログラマーに背負わされました。Ｃ言語は『オペレーティングシステム』をプログラミングで来ることと、この当時のハードウェア性能が低かったことを考慮すると、ガベージコレクションが実装されなかったことは、適切な判断だったのかもしれません。
　現在の主流が、Java、PHP、C# などに移っていますが、再び、ガベージコレクションの機能が実装されています。ソフトウェアの開発プロジェクトに多くのプログラマが動員されたとき、自ずと優秀なプログラマーも含まれているでしょうが、そうではないプログラマーも含まれているはずです。プロジェクトの要員全員が、メモリーリークをしでかさないというのは、困難ですよねェ。今となってはCPUを含め、ハードウェア性能が高くなってもおり、ガベージコレクションを実装したことは、適切な判断だったと思います。

(3) アロー演算子
オブジェクトが持つプロパティ（メンバ変数）やメソッド（メンバ関数）を使用する際に使用し、下記のように記述します。
$変数 = $オブジェクト -> プロパティ;
とか、
$オブジェクト -> メソッド( 引数 );
　オブジェクトの中のデータを、メンバ変数(C++) とか、フィールド(Java) とか、プロパティ(PHP) とか言います。なんで言語によって異なるのでしょう。それはさておき、このプロパティを操作する専用の関数を用意して、これもオブジェクトの中に入れてしまうのが本来のやり方です。

(4) 『番兵』
　プログラミングでは、データの終了を検出する際にしくじってしまうことがあります。上記【Ｌｉｓｔ 01 】のプログラムでも、データが 0 件の場合、『番兵』を使わなければ処理がもう少し複雑になります。この『番兵』のおかげで、for() 文の継続条件がシンプルになっています。デメリットとしては、データを１件分、余分にメモリーを消費しています。しかし、数Ｇバイトのメモリ中、数バイト～数十バイトを浪費しても、メリットの方が大きいという判断をします。プログラミングテクニックで言う『番兵』とは、データの終了を検出するために、事前に都合の良いデーターを仕込んでおく、そのデータのことを指します。繰り返し処理を、適切なタイミングで、確実に止めてくれる、頼れる存在です。

編集後記

　Java、PHP、C# などは、C++言語に比べて進化しています。その分、難解な部分が隠され、プログラマーに優しくなっています。これは自動車の、マニュアル車とAT車のように思っています。AT車に慣れてしまうと、AT車が良いですね。

　今日は用語が沢山出て来ました。説明を省略してしまった用語もあります。Step5 (3) は、これ以上書くと、底なしのOOP沼にはまってしまいます。用語は、回を重ねるごとに、解説してゆきます。　（OOP："ウープ" と発音して下さい。）

　このテーマを進めると、書く方も地獄、読むほうも地獄になってしまいます。そこで、次回からのテーマは『データベース』にします。『データベース』って聞いた瞬間、難しいって思うかもしれませんが、今日のテーマよりは簡単です。

< 連載講座:『PHP入門』・・・ 前へ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 次へ >

次回のオープンキャンパスは、

12月10日(土)　『魅せるWebページの作り方～Photoshop/Illustrator～』です。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

連載講座:『PHP入門』第６回　～アルゴリズム＋データ構造＝プログラム～

2011年12月01日

ＣＧ・Ｗｅｂクリエイター科の水谷です。

本日のテーマは

『PHP入門』第６回　～アルゴリズム＋データ構造＝プログラム～

Step1．今回の準備

今回のサブタイトルは、実は書籍の名前です。
『アルゴリズム＋データ構造＝プログラム』（1975年）ニクラウス・ヴィルト（Niklaus Wirth）著
スイス人なので、ドイツ語読みになるのだと思うのですが、"ウィース" さんではなく "ヴィルト" さんです。
今から36年も前に出版された本なので、コンピュータ界では『源氏物語』級かもしれません。
古いので、あえて「読みましょう。」とは言いませんが・・・、いつかは読んでみますか？

今回は、下記の２つの『データ構造』を使ってみます。
(1) 配列
(2) リスト構造

『データ構造』 というのは、
プログラムで処理するデータを、どのようにコンピューターのメモリーに格納するのか？
この方法論（やり方）だと理解して下さい。
一方、『アルゴリズム』 というのは、問題を解く方法論（やり方）だと理解して下さい。
この用語の説明は、一旦終了。でないと、本が一冊書けてしまいます。

『配列』 を説明しておきます。
前回、『連載講座:『PHP入門』第５回　～画像を表示～　Step5．ファイル入力とテキスト表示の(1) 』で、変数を説明しました。
書き方と使い方しか説明できていませんでしたが、１つの変数が、値を１つだけ格納できます。
プログラムによっては、これでは手間がかかることもあります。
例えば、同じ処理パターンで、次々とデータを加工いて行く場合などです。
『配列』というのは、変数の名前は１つです。それプラス、通し番号を用意しておいて、沢山のデータを通し番号で区別します。
この通し番号のことを、『添え字』 と言います。
高校で、１クラスの生徒を機械的に効率良く管理するために、出席番号があるのと同じです。
コンピューター内部のデータには、人格も感情も無いので、機械的に通し番号で、効率良く処理してしまいましょう。
そして、配列の変数名と、添え字によって、特定の１つだけを指定できますが、その1つ1つを 『要素』 と言います。
配列の変数名をマンション名として、添え字を部屋番号とすると、要素とは、１軒１軒の部屋に相当します。
つまり、マンション名と、部屋番号を特定すると、１軒の部屋が特定されます。（こんな感じ。）

Step2．ランダムに画像１枚を選んで表示

HTML と、PHPプログラムの部分を掲載しておきます。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。

【Ｌｉｓｔ 01 】
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>PHP sample</title>
</head>
<body>
乱数を使って、画像ファイルを１つだけ表示。<br>

<?php
    srand();
   $fname = array();
   $title = array();
   $alt   = array();

    if( $fp = fopen( 'ImgInfo.txt', 'r' ) )
   {
        $j = 0;
        while( $fname[$j] = fgets( $fp ) )
        {
            $title[$j] = fgets( $fp );
            $alt[$j]   = fgets( $fp );
            $j++;
        }
        fclose( $fp );
        $cnt = $j;
        $j = rand( 0, $cnt-1 );
        print("<p><img src=$fname[$j] title=$title[$j] alt=$alt[$j] width='400' height='267'>");
        print("<br>写真：(".($j+1).") ");
        print($alt[$j]);
        print("<br></p>");
   }
?>
</body>
</html>
------------------------------ ここまで ------------------------------
【解説（配列）】
(1) 『配列』 の確保。
$fname = array(); 以下３行で、$fname、$title、$alt の３つの配列を確保しました。
他の多くのプログラミング言語（例えば、C言語など）では、『要素』の個数を確定するような記述が必要ですが、
PHP では、そこのあたりは曖昧です。（C言語を知っていると、「ええんか！」って思う。）
変数名 = array(); の記述で、この変数が『配列』であると

(2) 『配列』 の利用（その１）。
while( $fname[$j] = fgets( $fp ) )
前回、『連載講座:『PHP入門』第５回　～画像を表示～　Step5．ファイル入力とテキスト表示の(3) 』では、
while( $fname = fgets($fp) )
の解説をしています。fgets() で、ファイルから１行読み込んで、変数 $fname に代入します。
今回も同様に、fgets() で、ファイルから１行読み込んで、配列 $fname の $j 番目の要素に代入します。
$j が『添え字』です。

(3) 『添え字』 のカウントアップ
$j = 0; と、$j
前回、『連載講座:『PHP入門』第５回　～画像を表示～　Step6．ファイル入力と画像表示の(1) (2) 』で解説しました。
$j が、0 から始まり、１件目の画像データを読み込んで 1 になり、
2件目の画像データを読み込んで 2 になり、
3件目の画像データを読み込んで 3 になり、
4件目の画像データを読み込もうとして、読めずに繰り返し処理を終了。
$j の値は、3 になっています。
今回もほぼ同様です。
$j が、0 から始まり、１件目の画像データを読み込んで、0 番目の要素に代入して、$j が 1 になり、
2件目の画像データを読み込んで、1 番目の要素に代入して、$j が 2 になり、
3件目の画像データを読み込んで、2 番目の要素に代入して、$j が 3 になり、
4件目の画像データを読み込もうとして、読めずに繰り返し処理を終了。
$j の値は、3 になっています。

(4) 画像を１枚表示
print("<p><img src=$fname[$j] title=$title[$j] alt=$alt[$j] width='400' height='267'>");
$j の値はともかく、この print() 文は、while の繰り返し処理の外なので、実行は１回だけです。

【解説（ランダム）】
(1) 『乱数』
$j = rand(0, $cnt-1);
上記 (4) で、
> $j の値はともかく、・・・
と書きましたが、ここで、$j に何らかの値が代入されます。
rand() は、『乱数』を返す関数です。
『乱数』とは、規則性の無い数の並びです。
例えば、2 4 6 8 10 12 ・・・　と、並んでいると、次の数は 14 だとわかります。
1 1 2 3 5 8 13 21 ・・・　だったら、次の数は 34 です。
（これは『フィボナッチ数列』と言い、最初の 1 と 1 を別として、それ以降の数は、前の２つの数の合計です。
なので、13 + 21 = 34 となり、21 の次が、34 だとわかります。）
１つ目の数の並びよりも、２つ目の数の並びの方が、わかりにくい数の並びになっています。
これを、もっともっともっともっと・・・分かりにくい数の並びを造ると、人間には、瞬時に次の数がわからなくなります。
これが『乱数』です。
本当は、「もっともっともっともっと・・・分かりにくい数の並び」、にも規則がありますので、乱数モドキという表現が正しいですね。
なので、正確に言うと、『疑似乱数』と言います。
つまり、本当は『疑似乱数』ですが、人間には瞬時に次の数がわからないので、『乱数』と見なします。
コンピューターでは、『疑似乱数』しかありませんので、コンピューターゲームでも同じ事情です。

(2) $j の値
$j = rand(0, $cnt-1);
rand() 関数のパラメーターが、１つ目が 0 で、２つ目が $cnt-1 です。
$cnt には、3 が代入されています。（∵１つ前の行に、$cnt = $j; があって、この $j の値が 3 です。これを $cnt に代入しました。）
なので、$cnt-1 は（ 3 - 1 で） 2 になります。

配列と乱数うを使って、画像表示の説明図（河原電子ビジネス専門学校のCG･Webクリエイター科）
図１．配列と乱数を使って、１枚の画像を表示している仕組み

(3) 『乱数』の初期化
srand();
srand() 関数を使って、乱数ジェネレータを初期化します。
一般に、rand() 関数を使用する前に１回だけ、srand() 関数を呼び出します。
C言語など、多くのプログラミング言語でも同様に、rand() 関数を使用する前に１回だけ呼び出します。
そして、本来はパラメータとして、シード値という、上記『疑似乱数』を生成するための値が必要です。
通常は、タイマー関数等で、常に変化する値をシード値として srand() 関数に渡さなくてはなりませんでした。
しかし、PHP では、Ver4.2.0 以降、このパラメータが不要になりました。
（他の、C言語など、多くのプログラミング言語では、これが必要です。）

Step2．はここまで。下記、図２のように表示できたら成功です。

図２．画像をランダムに１枚表示したブラウザ表示画面

以上が配列を使った場合です。

リスト構造を書けませんでした。残念！来週書きます。

< 連載講座:『PHP入門』・・・ 前へ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 次へ >

入門JavaScript Vol.4

2011年11月25日

　皆様お元気ですか？じゅんです。

　前回の続きですが、かなり間隔空いてしまいました。申し訳ありません。
　んで、早速前回の続きから始めましょう。
　ちなみに前回はゲームの表示部分だけでしたが今回は動作させるプログラム部分の作成を行います。
　
　入門JavaScript Vol.3

　前回の内容思い出しましたか？では参ります。
　

プログラム部分

　まず、JavaScriptでコントロールするために、表示位置ごとにどのような画像が表示されているのかプログラム側で覚えておかなくてはなりません。そこで、連続したものを覚えるのに便利な「配列」というものを使います。
　配列は同じ箱を並べたようなものです。その順番を使って色んなものの順番や位置を管理する事ができます。
　ここでは6つの入れ物を準備してそれぞれの画像の場所に当てはめておきます。
　その入れ物を作るための指示はこのようになります。
　

 
　//画像を格納する配列の作成
　var IMG = new Array();

　
　そうして、その中にプログラムを動かした際に表示する画像の情報を入れてやります。この場所を書き換える事で色々変える事ができますよ。
　


//配列の各要素を画像に特化して、そのパスを記入
IMG[0]=new Image();IMG[0].src="img/1.gif";
IMG[1]=new Image();IMG[1].src="img/2.gif";
IMG[2]=new Image();IMG[2].src="img/3.gif";
IMG[3]=new Image();IMG[3].src="img/4.gif";
IMG[4]=new Image();IMG[4].src="img/5.gif";
IMG[5]=new Image();IMG[5].src="";

　ここで気づきましたか？表示は5つしか必要いらないのに0から5までの6つ分作っています。これはなぜでしょう？
　
　
　
　
　
　
　実はこれ、とても大切な事でこれから作成する動作部分を作る時に使うのです。イメージは水が入ったバケツ2つを思い浮かべ、そのバケツの中身を入れ替える･･･という作業を思い浮かべてもらえれば良いと思います。
　
　そうですね、バケツの中身を入れ替える際、一度入れ替える方のバケツを空にしないと入れ替える事ができませんね、そのためからのバケツが一つ必要です。その空のバケツが最後の6つめなのです。
　ではこの空のバケツを使って、それぞれの場所のボタンが押された時、縦横、そして真ん中のパネルが押されたら右回りに動くようにパネルの位置を変えてみます。
　それが下記のようになります
　


function swap(num){  
  switch(num){
  case 1: 
         IMG[5].src=document.getElementById("area5").src;

         document.getElementById("area5").src
           =document.getElementById("area3").src;

         document.getElementById("area3").src
           =document.getElementById("area1").src;

         document.getElementById("area1").src=IMG[5].src;
         break;
         


   case 2:
         IMG[5].src=document.getElementById("area4").src;
         
         document.getElementById("area4").src
           =document.getElementById("area3").src;

         document.getElementById("area3").src
           =document.getElementById("area2").src;

         document.getElementById("area2").src=IMG[5].src;
         break;


         
   case 3:
         IMG[5].src=document.getElementById("area1").src;
         
         document.getElementById("area1").src
           =document.getElementById("area2").src;

         document.getElementById("area2").src
           =document.getElementById("area5").src;

         document.getElementById("area5").src
           =document.getElementById("area4").src;

         document.getElementById("area4").src=IMG[5].src;         
         break;


         
   case 4:
         IMG[5].src=document.getElementById("area2").src;
         
         document.getElementById("area2").src
           =document.getElementById("area3").src;

         document.getElementById("area3").src
           =document.getElementById("area4").src;

         document.getElementById("area4").src=IMG[5].src;         
         break;


         
   case 5:
         IMG[5].src=document.getElementById("area1").src;
         
         document.getElementById("area1").src
           =document.getElementById("area3").src;

         document.getElementById("area3").src
           =document.getElementById("area5").src;

         document.getElementById("area5").src=IMG[5].src;         
         break;
  }
  
}

　
　少し長かったですね、でも同じパターンなのでよく見てみてください。簡単に補足すると押された場所によってそれぞれ動きを変えています。その動作の単位が case から続く部分に分かれています。
　例えばそれぞれの画像でクリックされた際押された場所が上であれば"1"を押したよと教えてあげれば、 case 1: から続く部分に分かれます。
　そして分かれたそれぞれの場所で画像の入れ替えを行っているだけです。
　これを全部入れると動き出しますよ。
　
　全体は、前回の手順で"これをダブルクリック.html"の中身をエディタで開いてみてくださいね。
　
　エディタの使い方、覚えていますか？

　不安な方は、オープンキャンパスに遊びに来てください、色んな質問に答えますよ
　お気軽に来てくださいね
　
　

『面河渓トレッキング』～復活！奥の古道・森を知る原生林ツアー～

2011年11月16日

ＣＧ・Ｗｅｂクリエイター科の水谷です。

今週は、ツアー報告です。
先週末は、

『面河渓トレッキング』～復活！奥の古道・森を知る原生林ツアー～

という、すっごいツアーに参加してきました。

何がすごいかって、面河の奥へ行けること！です。

皆さんも、面河渓には行ったことがあると思います。
通常、「渓泉亭」という洋館スタイルのホテルの辺りまで車で行って、そこから散策を始めます。
（これより奥は、一般車両通行止めです。）
そこの対岸（右岸）に、巨大な垂直の岩がありますが、「亀腹（かめばら）」と言うそうです。
何度も行っているのですが、岩に名前があることを知りました。
（川の上流から下流を見て、左側の岸を左岸、右側の岸を右岸といいます。）

その亀腹辺りから歩き始めて、最初の橋が「鶴ヶ背橋」と言うそうです。
このツルは、前述の亀腹のカメにかかっているそうです。
この橋を渡って、右岸に沿って遊歩道が整備されています。

で、ここから遊歩道を、ずっと、ずっと、奥へ進みます。
石鎚登山口（面河道）も過ぎて、さらに奥へ進みます。
すると、今度は左岸に渡る「熊淵橋」という橋があり、渡るとすぐに東屋があります。
この辺りに、「水呑み獅子」という岩があったり、「虎ケ滝」という滝があって、いままではここが面河の終点でした。

ここへ来るたびに、この先が通行止めでがっかりしていました。

しかし、11月12日のこのツアーでは、この奥に入れたのです。

しかも、面河山岳博物館の学芸員の方や、山岳会の方々や、役場の方々など、
何名ものガイドがサポートとして、ついて下さいました。

朽ち果てた桟道の写真（河原電子ビジネス専門学校のCG･Webクリエイター科）
写真１．朽ち果てた桟道

人が通らなくなった道は、自然に帰るようです。スタジオジブリの映画にでてきそうな感じ。

石積みの写真（河原電子ビジネス専門学校のCG･Webクリエイター科）
写真２．こんな山奥に、石積みの立派な道が。

何時の時代、誰が造ったのか？資料が無いそうです。
（もしも、あるとするなら、高知営林署になら資料があるかも・・・らしい。）

そして無事、「苔の桟道」や、「霧ヶ迫の滝」を見ることができました。

霧ヶ迫の滝の写真（河原電子ビジネス専門学校のCG･Webクリエイター科）
写真３．霧ヶ迫の滝

滝の写真としてはイマイチになってしまいました。
言いわけですが、自由気ままにアングルを探せなかったし、三脚ももってこなかったし・・・、
どう撮ったらいいのかもわかりません。

復元された苔の桟道の写真（河原電子ビジネス専門学校のCG･Webクリエイター科）
写真４．復元された苔の桟道

『面河渓を愛する会』の方々のボランティア活動によって、修復されつつあります。
現時点では、「ゆりあげ」まで行けるそうで、将来的にはさらに「御来光の滝」まで行けるよう、修復して下さるそうです。

復元された苔の桟道を通って帰るところの写真（河原電子ビジネス専門学校のCG･Webクリエイター科）
写真５．復元された苔の桟道を通って帰るところ。

そもそも、今まで行けなかったのは、道が壊れていたからです。
1970年、「石鎚スカイラインライン」が開通しますが、それ以前には、多くの人が通っていたらしいのです。
1970年と言えば、「大阪万博」の開かれた年です。今高校生の人たちは、生まれる以前なので、ピンと来ない話ですね。
ピンと来る人がいるとすれば、「20世紀少年」の中で、時折「大阪万博」のシーンが描かれていたからかもしれません。

「石鎚スカイラインライン」を造る際、土石が落ちてしまったのか？落としたのか？・・・
いずれにしても、元々無かったと思われる石や岩が、沢山落ちてました。
それと、石鎚登山者の多くが、面河からではなく、土小屋から登るようになったからだそうです。
人が通らなくなった道は、写真１のように朽ち果ててしまいます。

北海道の「知床半島」のような手つかずの自然も良いし、岐阜県の「白川郷」のような古い街並み（合掌造り）も良いのですが、山の奥深く、最低限の自然破壊をしたとしても、人と自然が共存できている、そんなのもアリだと思います。多くの人が、自然を壊さないよう注意を払いながら、面河の自然を堪能することができたら良いですね。自然のよさを理解している人が増えたら、1970年代の破壊が起こらない、かもしれません。

来年、新緑の頃か、紅葉の頃に、子供たちを連れて来たいと思います。
ただし、「虎ケ滝」までは遊歩道ですが、そこから先は、登山道が適切です。
装備を整えて、気を引き締めて、入りましょう。

こんどの週末は雨なので、オープンキャンパスです。

11月19日(土)のテーマは、　『プログラミング入門講座 JavaScriptで動くホームページを作ろう』　です。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。

もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

連載講座:『PHP入門』第５回　～画像を表示～

2011年11月11日

ＣＧ・Ｗｅｂクリエイター科の水谷です。
瓶ヶ森や西黒森の紅葉写真を狙っていましたが、週末の雨にたたられ、今年はだめでした。

仕方ないので、今回はカマキリの写真をアップします。庭に花壇を作って、その一角にランタナを植えています。そこにカマキリを連れってて、ポーズをとってもらいました。

ランタナにカマキリを乗せた写真（河原電子ビジネス専門学校のCG･Webクリエイター科）
図１．ランタナとカマキリ

カマキリは、近所の公園で、子供たちが捕ってきてました。我が家では３～４匹飼っていますが、バッタなどの餌が捕れなくなってきているので、この子も冬は越せそうにありません。しかし、どのカマキリかは分かりませんが、泡状の卵の塊が２つくらいできているので、春になると、赤ちゃんカマキリがウジャウジャと湧いてくる予定です。
１センチに満たないカマキリも、写真のモデルとして期待できます。

本日のテーマは

『PHP入門』第５回　～画像を表示～

Step1．今回の準備

(1) ここまでのファイルのバックアップ
『連載講座:『PHP入門』第３回　～インストール(2/2)～の Step5．サンプルプログラム』
にて、下記のようにフォルダを作成しました。
> (1) "C:\xampp\htdocs" のフォルダ内に "00_PHPTest" という名前でフォルダを作成する。（再掲）
このフォルダごと、バックアップを取りましょう。
手順：
　エクスプローラで、"C:\xampp\htdocs" の内容を表示する。
　"00_PHPTest" をマウスの [右クリック] ⇒ [コピー] し、余白部分で、マウスの [右クリック] ⇒ [貼り付け] をする。
　"00_PHPTest - コピー" が出来上がる。
　このフォルダーを選択し、"01_PHPTest" というように名前を変える。
理由：
　第３回、第４回程度のプログラムは、残すほどのものではないかもしれません。しかし、今後、もっと複雑になってくると、昨日まで上手く行っていて、今日の作業をしたために不具合が生じ、元に戻せなくなって、「昨日の状態に戻したい・・・。」っていう状況に、必ずなります。あるいは仕事では、上司の指示や顧客の要望で修正したところ、「やっぱり先週の方が良かった。元に戻しといて。」などと、とんでもないことを軽々しくノタマウこともあります。「そんなもん、あるか～！」って言いたいところですが、プロなら、「５分で戻せます。」と言いたいですね。（本当は、HDD クラッシュに備えて、DVD-RW などのメディアにもコピーを取りたいところです。）
　５分で戻せたら、自分も楽だし、周囲から「君と一緒に仕事ができて、良かった。」と言ってもらえたら最高だと思います。
普段からバックアップを残す習慣を身につけましょう。

(2) 画像ファイルの準備
画像ファイルを３枚使います。以下に３枚用意しましたので、マウスの [右クリック] ⇒ [名前を付けて画像を保存(S)...] などの方法で、作業フォルダーに保存しておいて下さい。このとき、ファイル名称を変更せずに保存して下さい。

晴天の西黒森の写真（河原電子ビジネス専門学校のCG･Webクリエイター科）　写真１：晴天の西黒森の写真

霧のかかった西黒森の写真（河原電子ビジネス専門学校のCG･Webクリエイター科）写真２：霧のかかった西黒森の写真

リンドウの花の写真（河原電子ビジネス専門学校のCG･Webクリエイター科）写真３：リンドウの花の写真

(3) ”Apache” の起動
この連載にそって XAMPP をインストールされた場合は、"XAMPP Control Panel" を起動して ”Apache” を起動ます。『連載講座:『PHP入門』第３回　～インストール(2/2)～の Step4．インストール結果の確認』を参して下さい。
PHP を動かすためには ”Apache” の起動が必須です。

Step2．まずはHTMLで画像１枚を表示

画像を表示するだけなら、通常はHTML を使って表示します。この場合、<img> タグを使います。

【Ｌｉｓｔ 01 】の青字の部分に <img> タグの記述があります。その中に各種の属性を記述しています。
以下にその属性を説明します。
(1) src="yama.png" ：画像ファイル名称の指定。
上記、『Step1．今回の準備 (2) 画像ファイルの準備』で保存した画像ファイルのファイル名称です。
(2) title="瓶ケ森からの眺望" ：画像の補足的な説明になるテキストを指定できます。
ツールチップで表示されます。ツールチップとは、マウスカーソルを画像の上に乗せたとき、小さな枠が出現して、枠内には補足情報が表示されます。「バルーンヘルプ」とか「ポップヒント」というのと同じですが、Webでは「ツールチップ」と言います。
(3) alt="晴天の西黒森の写真" ：画像の代わりになるテキストを指定できます。
画像を表示できない環境の対策とか、音声ブラウザで、画像の代わりに読まれるテキストの設定など、・・・だけではありません。
Google や Yahoo! の検索で使用されています。より多くの人に見てもらえる可能性が高くなります。
(4) width="400" height="267" ：画像の横幅と高さのピクセル数を指定できます。
サーバートラブル等で画像を読み込めなかった場合、レイアウトが崩れてしまいます。そこで、"width" と "height" を指定します。試しにファイル名称を一文字打ちかえてみて下さい。画像は[×]マークになり、表示できませんが、レイアウトは維持されます。

上記 (1) は、省略不可能です。これを省略すると、コンピュータはどの画像ファイルを表示するかがわかりません。
一方、(2) ～ (4) は省略しても、通常は、支障なく表示できます。
私は、「一手間かけることでより良くなるなら、その一手間を惜しまない。」 ようにしたいと考えています。
人それぞれですが、「手を抜けるところは、手を抜きたい。」と考える人もいるでしょう。そういう人は、そもそもWebページを作らなければいいのです。見る側からすると、そんなWebページを見たくありません。

ところで、【Ｌｉｓｔ 01 】の赤字の部分が PHP です。この Step2．ではPHP でプログラミングをしていません。
Step2．はここまで。下記、図２のように表示できたら成功です。

画像を１枚表示したブラウザ表示画面（河原電子ビジネス専門学校のCG･Webクリエイター科）
図２．画像を１枚表示したブラウザ表示画面

Step3．PHPで画像１枚を表示

今度は、HTML ではなく、PHP で画像を表示します。
【Ｌｉｓｔ 02 】には、<body> の中の部分だけ掲載しておきます。それ以外は変更なしです。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。

【Ｌｉｓｔ 02 】
------------------------------ ここから ------------------------------
<body>
画像ファイルの表示。<br>

<?php
print("<p><img src='yama.png' title='瓶ケ森からの眺望' alt='晴天の西黒森の写真' width='400' height='267'>");
print("<br>写真：(1)");
print("晴天の西黒森の写真");
print("<br></p>");
?>
</body>
------------------------------ ここまで ------------------------------

print() 関数だけ使いました。その括弧の中に、"" （ダブルコーテーション）の中の記述を「文字列」と言います。
この「文字列」が、【Ｌｉｓｔ 01 】の青字の部分とほとんど同じです。そうです。HTML を記述しています。
覚えていると思いますが、HTML 記述の際の改行は、意味がありません。
ブラウザ表示画面で改行してほしい箇所には、<br> タグを使います。
なので、【Ｌｉｓｔ 01 】の青字の行数と、【Ｌｉｓｔ 02 】の赤字の行数は、関連がありません。

ということは、違いは１ヶ所だけです。気づいてますか？
【Ｌｉｓｔ 01 】の <img> タグの属性の値を "" （ダブルコーテーション）で指定しています。
　　src="yama.png" など。
一方【Ｌｉｓｔ 02 】 <img> タグの属性の値は '' （シングルコーテーション）で指定しています。
　　src='yama.png' など。

これは、print() 関数で指定する文字列を、"" （ダブルコーテーション）で指定するので、
その中の "" （ダブルコーテーション）を '' （シングルコーテーション）で置き換えたのだと理解して下さい。

Step3．はここまで。上記、図２のように表示できたら成功です。

Step4．PHPで画像３枚を表示

写真の２枚目、３枚目を表示できるように、【Ｌｉｓｔ 02 】に PHP のコードを追加してみましょう。
器用な人ならできそうですが、【Ｌｉｓｔ 03 】には、<body> の中の部分だけ掲載しておきます。それ以外は変更なしです。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。

【Ｌｉｓｔ 03 】
------------------------------ ここから ------------------------------
<body>
画像ファイルの表示。<br>

<?php
print("<p><img src='yama.png' title='瓶ケ森からの眺望' alt='晴天の西黒森の写真' width='400' height='267'>");
print("<br>写真：(1)");
print("晴天の西黒森の写真<br></p>");
print("<p><img src='kiri.png' title='瓶ケ森からの眺望' alt='霧のかかった西黒森の写真' width='400' height='267'>");
print("<br>写真：(2)");
print("霧のかかった西黒森の写真<br></p>");
print("<p><img src='rindou.png' title='瓶ケ森の登山道にて' alt='リンドウの花の写真' width='400' height='267'>");
print("<br>写真：(3)");
print("リンドウの花の写真<br></p>");
?>
</body>
------------------------------ ここまで ------------------------------

Step4．はここまで。下記、図３のように表示できたら成功です。

画像を３枚表示したブラウザ表示画面（河原電子ビジネス専門学校のCG･Webクリエイター科）
図３．画像を３枚表示したブラウザ表示画面（縮小表示）

Step5．ファイル入力とテキスト表示

まだプログラミングっぽくありませんネ。
そこで次の Step6．では、必要な情報をファイルから読み込んで、図３のように表示するようにしてみましょう。
そのためにこの Step5．では、ファイルから情報を読み込んで、ブラウザに出力するプログラムを作ります。

この Step5．では全く異なるコードを入力し、Step6．では、また元のコードを入力します。
そこで、Step4．が完成した時点で、バックアップを取りましょう。
バックアップの説明は、Step1．の (1) で記述しました。

【Ｌｉｓｔ 04 】には、ImgInfo.txt の入力内容を記載しました。【Ｌｉｓｔ 03 】の <img> タグの属性３つです。
　　　コピー＆ペーストして、ご利用下さい。

【Ｌｉｓｔ 04 】
------------------------------ ここから ------------------------------
yama.png
瓶ケ森からの眺望
晴天の西黒森の写真
kiri.png
瓶ケ森からの眺望
霧のかかった西黒森の写真
rindou.png
瓶ケ森の登山道にて
リンドウの花の写真
------------------------------ ここまで ------------------------------

上記【Ｌｉｓｔ 04 】をファイルから読み込んで、ブラウザに出力するように index.html を修正します。
【Ｌｉｓｔ 05 】には、<body> の中の部分だけ掲載しておきます。それ以外は変更なしです。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。

【Ｌｉｓｔ 05 】
------------------------------ ここから ------------------------------
<body>
画像ファイルの表示。<br>

<?php
$fp = fopen('ImgInfo.txt', 'r');
if( $fp ){
      while( $fname = fgets($fp) ){
          $stitle = fgets($fp);
          $salt   = fgets($fp);
        print("<p>src=$fname title=$stitle alt=$salt");
        print("<br></p>");
      }
}
fclose($fp);
?>
</body>
------------------------------ ここまで ------------------------------

初めて見た人は、「意味わからん。」ですか？
Ｃ言語を知っている人からすると、「結構、似てる。」でしょうか？
膨大な量ではないので、頑張って１行ずつ解説します。

(1) $fp = fopen('ImgInfo.txt', 'r');
赤字がファイル名です。ファイルを、「リード」モードでオープンします。
最後の行の fclose($fp); とセットになっております。
ファイルを読んだり、ファイルに書いたり・・・、
こういうファイル処理の前に必ず「オープン」して、終わったら「クローズ」します。
これはコンピュータの基本であり、PHP 固有の処理ではありません。
その、「オープン」した情報が、変数 $fp に代入されます。
"=" のように等号１個は、PHP では左辺の値を右辺に代入することを表現しています。
今後はこの $fp を使ってファイルを読みます。
ところで、プログラミング経験のある人なら、「$fp は未定義の変数では？」と疑問を持つかもしれません。
PHP は、「事前に変数を定義してから使う。」必要がありません。というより、定義できません。
いきなり記述して、使用可能です。（Ｃ言語ではありえないことです。）
変数の１文字目の文字は、"$"（ドルマーク）です。
２文字目は、英文字か、"_"（アンダースコア）です。
３文字目以降は、英文字か、数字か、"_"（アンダースコア）です。
全て、半角の文字であり、全角文字は使用不可能です。また、大文字小文字の区別があります。
文字数制限はありませんが、ほどほどにしておきましょう。

(2) if( $fp )
ｉｆ文と言います。中学校の英語の授業で、ｉｆ文を習ったことを思い出して下さい。
「もし、明日晴れていたらサイクリングに行きます。」のような表現のときに使いました。
PHP では、if( 条件 ) で記述し、条件が成立すると、次の { ・・・ } の中を実行します。
（このように条件を判断する処理を、「分岐構造」と言います。）
$fp は省略形式なので、厳密には条件ではありません。
if( $fp != NULL )
と記述するのが正式ですが、このように記述プログラマはいません。（この理由はまた次の機会に。）
左辺と右辺が等しい場合・・・・・・数学では： "=" ですが、PHP では： "=="
左辺と右辺が等しくない場合・・・数学では： "≠" ですが、PHP では： "!="
という記号をそれぞれ使います。
なので、$fp が、NULL と等しくない場合、次の { ・・・ } の中を実行します。
まだ「意味わからん。」ですね。
ファイル「オープン」が成功した場合、次の { ・・・ } の中を実行します。
まだ「意味わからん。」ですか？
もし、ファイル名を間違っていたり、ファイルを保存し忘れていたら、(1) で指定したファイルが存在しません。
そんなときに、ファイル「オープン」が失敗します。
失敗したら、何にも処理をせず、クローズして終了します。
わかったことにして、次行きましょう。

(3) while( $fname = fgets($fp) )
まず、fgets ・・・ f：ファイル + get：ゲットする + s：ストリング（文字列）を。
fgets($fp) で、オープンしたファイルから、文字列を１つ読み込みます。
次に、while( 条件 ) で記述し、条件が成立している間ずっと、次の { ・・・ } の中を何度も実行し続けます。
（何度も実行する処理を、「反復構造」と言います。）
前述 (1) と (2) で、"=" のように等号１個は「代入」、"==" のように等号２個は「等しい」と説明しました。
$fname = fgets($fp) も省略形式なので、厳密には条件ではありません。
( $fname = fgets($fp) ) != NULL
と記述するのが正式ですが、このように記述プログラマはいません。（この理由はまた次の機会に。）
なので、「オープンしたファイルから、文字列を１つ読み込みが成功したら、」という条件です。
ここで読み込むのはファイル名なので、"yama.png"や "kiri.png" や "rindou.png" を読み込みます。
【Ｌｉｓｔ 04 】で指定している画像ファイルは３個なので、４個目のファイルを読みに行って、「失敗」します。
「失敗」と言っても、異常処理ではなく、４個目のファイルが無いから読めなかっただけです。
で、このとき、繰り返し処理を恙無く終了します。

(4) $stitle = fgets($fp);
<img> タグの属性 "title" を入力します。仕組みは、前述の $fname = fgets($fp) と同じです。

(5) $salt = fgets($fp);
同じく、<img> タグの属性 "alt" を入力します。
（このように、なんらかの処理一つずつ実行する処理を、「順次構造」と言います。
以上、「順次・反復・分岐」の3つの論理構造だけで、全てのプログラムを作成できます。by エドガー・ダイクストラ）

(6) print("<p>src=$fname title=$stitle alt=$salt");
PHP の print() で出力します。Step3．と同じです。

(7) print("<br></p>");
説明省略。

(8) fclose($fp);
全ての処理が終わったので、「クローズ」します。

Step5．はここまで。下記、図４のように表示できたら成功です。

画像３枚分の情報を表示したブラウザ表示画面（河原電子ビジネス専門学校のCG･Webクリエイター科）
図４．画像３枚分の情報を表示した、ブラウザ表示画面

Step6．ファイル入力と画像表示

上記、Step5．で、ファイルから読み込むことができたので、【Ｌｉｓｔ 04 】の内容を読み込んで、<img> タグを完成させると、図３と同じ様に画像を表示することができます。つまり、【Ｌｉｓｔ 03 】と【Ｌｉｓｔ 05 】を組み合わせます。
【Ｌｉｓｔ 06 】には、<body> の中の部分だけ掲載しておきます。それ以外は変更なしです。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　ここまで、理解できていますよねぇ。
　　　確認のために、このリストは、皆さんで入力してみて下さい。
　　　　　　　　　　　　　　　　　（画像にしましたので、コピー＆ペーストできません。）
　　　変数の先頭の、"$"（ドルマーク）を、"S"（ラージエス）と入力してはだめですよ。
　　　";"（セミコロン）と、":"（コロン）も気を付けて下さい。行の最後の記号は";"（セミコロン）です。
　　　<?PHP の中が１段下がり、if() 分の中が１段下がり、while() 中が１段下がっています。
　　　これを「字下げ」と言います。この「字下げ」も几帳面にして下さい。
　　　プログラムが大きくなると、見た目に判断できるので、とても便利です。今から「字下げ」の習慣を付けて下さい。
　　　なお、ここでいう、「１段」とは、空白２文字～４文字程度で、各自で統一して下さい。

Step6．ファイル入力と画像表示のリスト（河原電子ビジネス専門学校のCG･Webクリエイター科）
図５．【Ｌｉｓｔ 06 】の画像

上記【Ｌｉｓｔ 06 】の青字の部分は、変数を使って、<img> タグを完成しています。
変数に関しては、Step6．で説明しましたので、再確認しておいて下さい。
また、$alt を使うことにより、写真の説明文も表示できます。

赤字の部分は、今回追加した部分です。
目的は、"写真：(1)" "写真：(2)" "写真：(3)"と、順に数字が表示できる仕掛けを組み込みました。

(1) $j=0;
変数 $j に、0 （ゼロ）を代入します。while ループの直前に行うのがポイントです。

(2) $j++;
これは、$j = $j + 1; と同じ意味ですが、$j++; と記述します。
$j に 1 を加算した結果を、$j に代入します。while ループの中で行うのがポイントです。
(1) とセットで使い、数を数え上げる際の鉄板手法です。「ループカウンタ」と言います。

(3) print( <br>写真：($j)" );
「ループカウンタ」を使えば、１枚目の写真に、「写真：(1)」と表示し、２枚目の写真に、「写真：(2)」と表示してゆけます。今回は３枚ですが、仮に１００枚でも、１万枚でも。

Step6．はここまで。前述、図３のように、画像が３枚表示でき、説明文も正しく表示できたら大成功です。

本日はここまでで終わります。肉食系男子・肉食系女子の皆さん、お疲れさまでした。
（草食系男子はここまでたどり着いていないのでしょう。）

次回、第６回は、Webページを見るたびに、画像が変わるようにします。
Yahoo! のトップページの右上に、ＣＭのエリアがあって、見るたびごとにスポンサー企業が変わっています。
そんな感じで、今回の３枚の画像のうち、１枚を選んで表示するよう、PHP でプログラミングします。
（で、サブタイトルは、『アルゴリズム＋データ構造＝プログラム』です。）

< 連載講座:『PHP入門』・・・ 前へ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 次へ >

次回のオープンキャンパスは、

11月19日(土)　『プログラミング入門講座 JavaScriptで動くホームページを作ろう』　です。

PHP ではなく、JavaScript ですが、良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

カメラ＆Photoshop入門 Vol.3 色の温度の話１

2011年10月31日

　佐伯です、寒さだんだんと厳しくなってきた今日この頃ですがいかがでしょうか。

　先日の雨で、自分の部屋で雨漏りし、ベットがべっとりと濡れへこんでいます。トホホ
　
　写真ですが実は最近忙しく、このブログもかなり久しぶりのアップになります。
　写真撮りに行きたいな～、最近趣味で写真撮りに行くことが全然できなくて悩んでいます。でも今度星空撮影に取り組もうと画策していますので、また撮影できたら報告します。
　
　前回はカメラの基本的な用語に関して説明させてもらいました、どうでしたか？カメラの用語は意外と謎が多くて面倒くさそうですが今回のお話は前回に引き続いてまた不思議な言葉が出てきます。それも恐怖カメラ謎の言葉第二弾「色の温度」です。
　

色温度とは･･･

色温度は、表現しようとする光の色をある温度（高熱）の黒体から放射される光の色と対応させ、その時の黒体の温度をもって色温度とするものである。 By.Wikipedia先生

　
　だそうです。分かりましたか？それじゃあもう少し補足説明しましょう。皆さん溶鉱炉の映像見た事ありますか？あのドロドロに溶けた鉄ってオレンジ色に光っていますね。あれってだいたい1500°Cぐらいなのだそうです。だからあのオレンジ色の色温度は1500となるのです。
　
　しかし、温度を摂氏ではなく熱力学的温度（ケルビン）という単位で表しますので温度が変わります。ケルビンは絶対零度を0度とします。絶対零度とはこれ以上温度を下げることができない温度ですが、摂氏で言うと-273.15°Cになりますので、大体300度程度ずれることになります。
　結論としてオレンジの色温度は1800となります。
　
　基本的に色温度が高いと青みがかった色、色温度が低いと赤みがかった色になります。実際に同じ写真で色温度を変えたもの出してみます。
　

色温度が低い状態

適正な色温度

色温度が高い場合

　
　色温度が低いと夕方のような風景になってしまいます。夕焼けの写真を撮るために意図的に下げる場合もありますが、普通に撮りたいのに真っ青のゾンビみたいな写真になっては困ります。
　
　そこでデジカメには白色を白いとして自動的に補正する機能があります。それがオートホワイトバランス(AWB)という機能で失敗が少ないように調整してくれます。
　
　しかし、良いことばかりではなく夕方のように全体が赤くなっているシーンや、蛍光灯など照明の影響で結構ずれてしまいます。
　
　デジカメにとって、今どんなシチュエーションなのか、何を撮影したいのか分からないのでオートホワイトバランスでは限界があります。そこで活躍するのがプリセットホワイトバランスというものです。
　
　これは、蛍光灯や晴天、曇天などある程度想定された環境の情報がセットされていて、撮影のシチュエーションに合わせ切り替えるだけでホワイトバランスを調整する仕組みになっています。
　この機能、意外と使い方が分からなくて全くさわっていないという人が結構いるのですが、基本的にどのデジカメにもついているはずですので一度探してみてください。
　これだけで、色かぶりのない綺麗な写真を撮影できると思います。
　
　また、PhotoShopなど画像処理ソフトを使って撮影後調整する方法もあります。
　次回連載では、もう少しこの色温度について語る予定ですので楽しみにしていてくださいね

　
　オープンキャンパスではデジイチで商品撮影などした後に実際その補正など体験できます。ぜひ来てくださいね。
　
オープンキャンパスの予約

入門JavaScript Vol.3

2011年10月29日

　みなさまお久しぶりです。じゅんです。

　JavaScript講座3回目にして少し止まってしまいましたがご容赦ください。

　今までの講座では、簡単なJavaScriptのプログラミングとJavaScriptを使った画像のコントロールを2回にかけて実施しましたが、今回はそれらを組み合わせて簡単なゲーム作成を行います。

　今回作成するゲームですが、「ナンバークロス」というものになります。
ルールは簡単、5つのマス目が十字に並んでいてそれぞれに1から5までの数字が書いてあります。その数字をクリックすると一定のルールで数字パネルが入れ替わるので、順次動かしながら目的の配列にするというパズルです。

　言葉だけでは分かりづらいので動作をまとめてみました。
　
　

　
　図で｢1｣の場所を押すと一つずつ下にずれ、はみ出した｢5｣が｢1｣の場所に移ります。同様に｢2｣を押すと右側に、｢4｣の場所を押すと左に、｢5｣の場所を押すと上にずれます。
　そして真ん中の｢3｣のパネルを押すとその周りにあるパネルが右回転します。
　
　これだけでは分かりづらいので、実際の動作環境を置いておきますので、ダウンロードしてください。
　
　JavaScript講座サンプル：ナンバークロス
　
　
　今回はそのステージを作成して次回実際のプログラムすることにします。
　
　ソフトとしての動作は、画面上に並べられた5つの画像ごとに動きを設定すれば大丈夫なのですが、問題は自分だけではなく、自分以外の画像も動かす必要があることです、2回目でやった内容を、1回目のやり方で仕込んでゆきます。できる人はチャレンジしてみよう！
　
　それではまず、画面構成から片付けてゆきましょう。先ほどダウンロードしたものを解凍すると「ここに記入.html」というファイルがありますので、そのファイルをテキストエディタ（1回目で説明したメモ帳で開きます。その中身はこのようになっているはずです。
　
　

　
　まず、必要なものを表示します。先ほどの図では下側になります。
　まずはタイトルと各パネルを表示します。

<本文用ソースコード>

<center>
//タイトル＋操作用の画像表示
<img src="img/sousa.gif" 
  width="450" height="450" align="center"><br>
<table style="        //画像を配置する枠を作ります。
  width:450px;
  border-collapse:
  collapse;">
<tr>               //1段目
<td></td>
<td><img src="img/2.gif" id="area1" alt="1"  width="150" height="150" onClick="swap(1)"></td>
<td></td>
</tr>

<tr>                //2段目
<td><img src="img/1.gif" id="area2" alt="2"  width="150" height="150" onClick="swap(2)"></td>
<td><img src="img/4.gif" id="area3" alt="3"  width="150" height="150" onClick="swap(3)"></td>
<td><img src="img/3.gif" id="area4" alt="4"  width="150" height="150" onClick="swap(4)"></td>
</tr>

<tr>                //3段目
<td></td>
<td><img src="img/5.gif" id="area5" alt="5"  width="150" height="150" onClick="swap(5)"></td>
<td></td>
</tr>
</table>

　
　このソースを図の表示用という部分に記入します。この部分では表示用の枠を決める部分と、画像を表示する部分に分かれます。
　枠の部分ですが、ここではテーブル・タグを使って5つの数字を表示するエリアを決めています。これはもともと表の表現に使われるものですが、簡単なレイアウトを決める場合にも使われるものです。
　画面には表示できませんが下の図のように枠を設定しています。
　
　

　
　もう一つは前回にも出てきた画像表示用のタグ「img」です。その中身を説明すると

src　　　表示する画像の場所
width　　表示する画像の横幅
height　表示する画像の高さ
alt　　　画像の説明
id 　　　画像表示場所に割り振った番号

　となります。そのほかにあるのが「onClick」ですがこれは前回やった「onMouseOver」と同じ種類のもので、クリックしたときに行う動作を決める場所です。
　かっこの中に少し変わったもの書いてありますが、これが今回主役になるJavaScriptの関数です。関数というとなんだか難しそうですが、作業の手順がひとまとまりになったものと思ってもらえばわかりやすいと思います。
　その関数を呼び出す際にかっこの中に自分のいる場所を指定すれば、その場所ごとに画像を入れ替えることになります。
　
　次回は、この心臓部である動作部分作ってゆきます。それまでこのゲーム楽しんで、次回のプログラム楽しみにしてみてくださいね。

連載講座:『PHP入門』第４回　～プログラミング開始～

2011年10月18日

ＣＧ・Ｗｅｂクリエイター科の水谷です。

土曜日に、また石鎚へ行きました。
テレビの予報では雨でしたが、『てんきとくらす』の予報を信じて、登ってみました。

この１週間で、瓶ヶ森や西黒森の紅葉が進んでいました。

瓶ヶ森から紅葉の西黒森を眺望（河原電子ビジネス専門学校のCG･Webクリエイター科）
図１．瓶ヶ森から紅葉の西黒森を眺望
　　（紅葉がきれいでしたが、雲なんだか、霧なんだか、・・・青空が欲しかった。）

この日の予報では、「西日本大荒れ・・・」とか言われていてので、雨が降らなかっただけ、良かったと思うことに。
実際、石鎚スカイラインでは、唯一林道パトロールの車とすれ違っただけだし、
瓶ヶ森は登山して、山頂で写真とって、下山するまで、誰ともすれ違いませんでした。

本日のテーマは

『PHP入門』第４回　～プログラミング開始～

しばらくぶりですが、またお付き合い下さい。

なお、PHPプログラミングでは、「メモ帳」では支障があります。
「PHPエディタ」か、「サクラエディタ」が欲しいところです。
今回の記事の最後で、ダウンロードとインストールを解説します。
（『PHP入門』第２回と『PHP入門』第３回で、ダウンロードとインストールをさんざん書きましたので・・・。）

Step1．前回サンプルの復習

"XAMPP Control Panel" で、"Apache" が Start させていることを確認。
”Running” にして下さい。　　（参照：連載講座:『PHP入門』第３回　～インストール(2/2)～　Step4 図５）
こうしないと、PHPが実行されません。

前回のサンプルでは、今の日付と時間を表示しました。
　　（参照：連載講座:『PHP入門』第３回　～インストール(2/2)～　Step5．サンプルプログラム）

サンプルを実行する手順の説明は省略しますので、前回の記事を読み返して下さい。
HTML と、PHPプログラムの部分を再度掲載しておきます。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。

赤文字部分が、PHPのプログラムです。

(1) $today：変数・・・一時的に「値」を格納しておく場所に、"today" という名前を付けたものです。
人が計算問題を解くとき、途中の「値」を紙にメモるのと同様に、
コンピュータがプログラムを実行して行く場合にも、一時的に「値」を格納しておく場所が必要です。

(2) date("Y/m/d l H:i:s")：現在日時を「フォーマット」して返します。
決まった処理をする単位で、「関数」と言います。下記 (5) の print() も関数です。
「フォーマット」って言うのは、無理やり訳すと「書式」。ですが、
ここでは、日時が分かりやすく整えてくれてるっていう程度で、先に進みましょう。

(3) = ：右辺を左辺に代入します。上記(2) で得られた結果を、後で使えるように (1) に代入します。

(4) ;：行の最後にセミコロンがついています。これはお約束です。
日本語の文章にも句読点があるように、PHPプログラムにはセミコロンが必要です。

(5) print：「プリント」と読みます。
上記 (1) に格納してある途中結果を、HTML の形式で出力することにより、Webページに反映されます。
上記 (2) で「関数」だと説明しました。異なるプログラミング言語では、「サブルーチン」とか「メソッド」
とも言いますが、本質的には同じです。

黒字部分は、ウェブサイトを記述する HTML です。ここでは、<body> ～ </body> の中に記述したものが
ブラウザ（Internet Explorer や Firefox など）で表示されます。
<・・・> を「タグ」といいます。この「タグ」はWebページには表示されません。
PHP を学ぼうとすると、同時に HTML や CSS の知識も必要になります。
この連載では、なるべく PHP 限定で解説しますので、HTML や CSS に関しては、
連載講座:『HTML＆CSS入門』第１回　～スタイルシートって？～
などを参考にして下さい。

Step2．前回サンプルの修正

ところで、このサンプルを実行すると、一見それらしい日付と時間が表示されますが、
実は数時間狂っている、って言う場合もあるようです。
（私のＰＣ環境では、７時間ずれていました。）
原因は、上記(2) の date() 関数が、サーバーの時間を取ってきているからです。

サーバのローカル時間と、日本時間がずれている場合は、gmdate() 関数を利用しましょう。
PHP の部分だけ記載しました。【Ｌｉｓｔ 01 】の赤字部分を下記の赤字部分に修正してみてください。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。

【Ｌｉｓｔ 02 】
------------------------------ ここから ------------------------------

<?php
　　$time = time() + 9*3600; //GMTとの時差9時間を足す
　　$today = gmdate("Y/m/d l H:i:s ", $time);
　　print($today);
?>
------------------------------ ここまで ------------------------------

(1) $time：変数・・・【Ｌｉｓｔ 01 】の $today と同様に、一時的に「値」を格納しておく場所で、
今度は "time" という名前を付けました。プログラミングでは、このように都合よく、変数を作ってゆきます。

(2) time()：関数・・・【Ｌｉｓｔ 01 】の date() と同様に、PHP にはたくさんの関数が用意されています。
Unixタイムスタンプとして、1970年1月1日 00:00:00 からの経過秒数を取得します。
【Ｌｉｓｔ 01 】のdate("Y/m/d l H:i:s") は、date("Y/m/d l H:i:s",time()) と同じで、省略形を書きました。

(3) //GMTとの時差9時間を足す：PHPのコメントなので、入力は不要です。
他人に分かりやすいし、後日、自分自身が見直したときにも分かりやすいので、なるべく書きましょう。
// から行の終わりまでがコメントになります。

ここで、GMT というのは、「グリニッジ標準時」のことです。海外で事件が起こって、それがニュースになるとき、
「日本時間の・・・」とか「現地時間の・・・」とか、アナウンサーの方が話されています。
日常会話では「グリニッジ標準時」は使いませんネ。
GMT は "Greenwich Mean Time" 略で、イギリスのロンドンにあるグリニッジ天文台での時刻です。

+ 9*3600 という計算をしているのは、「グリニッジ標準時」に９時間足すと、「日本時間」になります。
プログラミングでは、「グリニッジ標準時」が時々出てきます。PHP 特有のことではありません。慣れて下さい。

(4) gmdate()：関数・・・【Ｌｉｓｔ 01 】の date() と同様に、日時を「フォーマット」して返します。
gmdate() 関数はグリニッジ標準時で結果を返しますので、あらかじめ９時間を足していますから、
結果として、「日本時間」で返してくれることになります。

Step3．PHPファーストインプレッション

PHPプログラミングって、こんな感じです。
あらかじめ用意されている関数がたくさんあって、全て覚えておくのは（普通の人では）不可能です。
慣れてきたら、「きっとこんな関数があるはず！」ってことで、探して使います。（無ければ自分で作ります。）
探すのは、手元にあるPHPの参考書か、インターネットのGoogle先生（Webで検索すること）です。

もう少し連載を読み続けてもらえたら、そのときに簡単そうな参考書を購入して、一冊読み切るのが良いと思います。
そうすれば、足りない知識はGoogle先生と、プログラミングをして行く努力とで補ってゆけると思います。
（もし補えなかったら、読書が足りなかったか、検索が下手か、努力が足りないか・・・
　　　　　　　　　　　　　　　　　　　　　　　　　　　もしかすると、この連載が悪かったか・・・でしょう。）

知識の他には、パスルを解くときのような、考える力が必要です。まだ連載が始まったばかりなのですが、
プログラミングって、NHKのピタゴラスイッチみたいなものだと・・・思いませんか？

Step4．エディタのインストール

なお、PHPプログラミングでは、「メモ帳」では支障があります。
「サクラエディタ」か、「PHPエディタ」が欲しいところです。

下記の二つは、フリーウェアといって、無料のソフトウェアです。
（この調査は、2011/10/20時点の調査です。この連載講座を読まれるタイミングによっては異なってきます。）

(1) サクラエディタ
HTML, CSSなどにも対応している、軽快なエディタです。
マウスの右クリックのプルダウンメニューに、エディタの起動を割り付けることも簡単に出来るので、
私自身はこちらを使っています。

最新版： Ver 1.6.6.0
対応OS ： Windows 95/98/Me/NT/2000/XP/Vista/7
提供元：サクラエディタ開発プロジェクト

(2) PHPエディタ
PHPに特化しており、開発者にも使われている高機能エディタです。
私の周囲には、こちらを使っている人が多いように感じます。
下記の二週類がありますが、(B) スタンドアロン版で十分だと思います。
(A) プロジェクト管理機能のついたPHP統合開発環境版
(B) プロジェクト管理機能のないスタンドアロン版

最新版： Ver 1.33
対応OS ： Windows 98/Me/2000/XP （Windows 7 でも、概ね支障なく動作すると思います。）
提供元：ＫＪ氏

本日はここまでで終わります。次回第５回は、画像を表示する予定です。

< 連載講座:『PHP入門』・・・ 前へ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 次へ >

次回のオープンキャンパスは、

10月22日(土)　『PHPでプログラミング　PHPで動的Webアプリを作ります。』　です。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

連載講座:『HTML＆CSS入門』第３回　～リンク～

2011年10月13日

ＣＧ・Ｗｅｂクリエイター科の水谷です。

松山のお祭が終わり、また石鎚へ行きました。

石鎚山頂あたりは、紅葉のピークを迎えているとのことでしたが、
瓶が森界隈は、先週よりは紅葉が進んだ気がするっていう程度でした。

瓶が森頂上から西黒森を眺望（河原電子ビジネス専門学校のCG･Webクリエイター科）
図１．瓶が森頂上から西黒森を眺望
　　（紅葉がイマイチだったけど空がきれいだったので、空多目に。山の斜面の白い線が「瓶が森林道」です。）

本日のテーマは

連載講座:『HTML＆CSS入門』第３回　～リンク～

さて、本日のゴールは前回と同じです。
今回は、前回作成したところまでですが、トップページを作成し、
このトップページから各ページにリンクを張って、ページが遷移することと、
HTML と CSS の主要な部分を解説します。

今回は、Step1 ～ Step4 です。

Step1．トップページ作成

何はともあれ、コードを打ち込んで、表示させてみましょう。
入力の仕方が分からなければ、連載講座:『HTML＆CSS入門』第１回　～スタイルシートって？～　を参照して下さい。
（第１回のStep2 で入力の仕方を書いています。）
今回も「メモ帳」があれば十分です。

(0) 準備として、この演習用のフォルダーを作成する。
　　　ルート直下に「HTML_CSS」を作ります。
　　　フォルダーの構成は、連載講座:『HTML＆CSS入門』第２回　～作ってみよう～　を参照して下さい。
　　　（第２回のStep2 の図２。）
　　　これから作成するファイルを整理して保存するためです。

(1) 「メモ帳」を起動する。

(2) HTML" のサンプルコードを入力する。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>四季折々のＷｅｂ写真館</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<div id="header">
四季折々のＷｅｂ写真館
<ul id="g_navi">
<li>ホーム</li>
<li><a href="./01_flower/index.html">花の写真</a></li>
<li><a href="./02_insect/index.html">昆虫写真</a></li>
<li><a href="./03_landscape/index.html">風景写真</a></li>
<li><a href="./04_people/index.html">人々の写真</a></li>
<li><a href="./10_about/index.html">Ｗｅｂ写真館について</a></li>
</ul>
</div>

<div id="contents">
<div id="sidebar">
<h3>ローカルナビ</h3>
</div>
<div id="main">
<p>
休日は撮影に出かけます。<br/>
写真を始めて、花の名前にも少しですが詳しくなりました。
</p>
</div>
</div>

<div id="footer">
Copyright ©2011 Kawaharagakuen All Rights Reserved</div>
</div>

</body>
</html>
------------------------------ ここまで ------------------------------

(3) "index.html" で保存する。
　　　メニューから、[ファイル]⇒[名前をつけて保存...]
　　　ファイル名(N)：[index.html]
　　　ファイルの種類(T)：[テキスト文書(*.txt)]⇒[全てのファイル(*.*)]
　　　保存先は、ルート直下の「HTML_CSS」です。

(4) "CSS" のサンプルコードを入力する。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
@charset "Shift_JIS";
/* 一括指定 */
* {
padding: 0;
margin: 0;
}
body {
line-height:1.4;
font-size: 0.85em;
font-family: "ＭＳＰゴシック", "MS PGothic", Arial, sans-serif;
}
/* レイアウト */
#container {
text-align: left;
margin: 1em auto 0;
width: 90%;
border: 2px solid #0000ff;
}
#header {
text-align: center;
padding: 20px 0px 10px;
height : 70px;
/*font-size: 2.5em;*/
border-bottom: 2px solid #00ffff;
}
#sidebar {
float: left;
width: 25%;
height : 400px;
padding: 20px 0px 0px 20px;
border-right: 2px solid #00aa00;
}
#main {
float: left;
height : 400px;
padding: 20px 0px 0px 20px;
border-left: 2px solid #ff0000;
}
#contents {
text-align: left;
}
#footer {
text-align: right;
clear: both;
padding: 5px 10px 5px;
border-top: 2px solid #00ffff;
color: #ff00ff;
}
#g_navi {
padding:40px 0px 0px 20px;
text-align:left;
}
#g_navi li{
display:inline;
list-style-type:none;
padding-right:10px;
}
#g_navi li a{
text-decoration:none;
}
------------------------------ ここまで ------------------------------

(5) "style.css" で保存する。
　　　メニューから、[ファイル]⇒[名前をつけて保存...]
　　　ファイル名(N)：[style.css]
　　　ファイルの種類(T)：[テキスト文書(*.txt)]⇒[全てのファイル(*.*)]
　　　保存先は、ルート直下の「HTML_CSS」です。（上記(3)でHTMLを保存したときと、同じフォルダーです。）

(6) 上記(0)で作成したフォルダをエクスプローラで開き、保存したファイル "index.html" をダブルクリックする。

下記、図２のようにブラウザで表示できましたか？

トップページ（河原電子ビジネス専門学校のCG･Webクリエイター科）
図２．トップページのブラウザ表示画面（index.html）
　　（　連載講座:『HTML＆CSS入門』第２回　～作ってみよう～　と同じ。）

Step2．トップページの解説

まず、HTML の赤文字の部分から。
(1) <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
　　　スタイルシートのファイル名を指定しています。HTML と同じフォルダーに保存していることを前提にしています。
　　　各ページの HTML では、この部分が違ってきますので、確認の意味を込めて書きました。

(2) <ul id="g_navi">
　　　ul は Unordered List の略で箇条書きをする部分です。
　　　その部分の名前が、g_navi で、グローバルナビを作ります。
　　　箇条書きなので、６行になるはずですが、横一列に並んでいます。
　　　この辺りの書式に関しては、スタイルシートで変更しましたので、下記で解説します。
　　　<ul> ～ </ul> の間に <li> が６行あります。li はList Itemの略です。

(3) <li><a href="./01_flower/index.html">花の写真</a></li>
　　　この部分が今回のテーマであるリンクを張っている部分です。
　　　a は Anchor 、href は Hyper REFerence の略です。
　　　（href はエイチレフ or ハイパーレファランスと読みます。）

　　　"./01_flower/index.html"の部分が「花の写真」のページの HTML ファイルを指定しています。
　　　この表記を前から順に解説します。
　　　.：ピリオド１個が、「今現在のフォルダー」を表現しています。（カレントディレクトリとも言います。）
　　　./01_flower：この様に記述すると、「今現在のフォルダーの下の、01_flower というフォルダー」
　　　を指定しています。
　　　./01_flower/index.html：よって、これ全部で、
　　　「今現在のフォルダーの下の、01_flower というフォルダーの中の、index.htmlというファイル」
　　　を指定しています。

　　　HTML のファイルが全て index.html という同一ファイル名ですが、夫々のページで、フォルダーが異なります。

　　　次に、CSSの赤文字の部分を解説します。
(4) #g_navi {・・・}
　　　グローバルナビである
　　　　『ホーム』　『花の写真』　『昆虫写真』　『風景写真』　『人々の写真』　『Ｗｅｂ写真館について』
　　　の部分に関する書式指定です。
　　　タイトル『四季折々のＷｅｂ写真館』の下に40ピクセル、左端から20ピクセル空けた位置に表示しています。
　　　このスペースは、次回以降、微調整してゆきます。

(5) display:inline
　　　上記 (2) で、箇条書きなのに横一列に並んでいることを書きました。その書式指定の部分です。

(6) text-decoration:none
　　　箇条書きなので、行の先頭に「黒丸」などが出ます。それを「なし」に設定しています。
　　　disc：黒丸
　　　circle：白丸
　　　square：四角
　　　non：なし
　　　一応書いていますが、上記 (5) display:inline の指定をすると、これ自体を書かなくても上手くゆきます。
　　　（ IE と Firefox 調べ）

Step3．『花の写真』ページの作成と解説

まずは、コードを打ち込んで、表示させてみましょう。

(0) 準備として、この演習用のフォルダーを作成する。
　　　「HTML_CSS」の下に「01_flower」を作ります。
　　　01 という番号を付けたのは管理の都合で、フォルダーが増えた場合の対策です。
　　　01、02、03、04、・・・よりは、10、20、30、40、・・・の方が良かったかも。
　　　（昔のべーシックの行番号みたい。）

(1) HTML" のサンプルコードを入力する。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>四季折々のＷｅｂ写真館</title>
<link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<div id="header">
四季折々のＷｅｂ写真館
<ul id="g_navi">
<li><a href="../index.html">ホーム</a></li>
<li>花の写真</li>
<li><a href="../02_insect/index.html">昆虫写真</a></li>
<li><a href="../03_landscape/index.html">風景写真</a></li>
<li><a href="../04_people/index.html">人々の写真</a></li>
<li><a href="../10_about/index.html">Ｗｅｂ写真館について</a></li>
</ul>
</div>

<div id="contents">
<div id="sidebar">
<h3>ローカルナビ</h3>
<ul>
<li>花の写真</li>
<li>コスモス</li>
<li>チューリップ</li>
</ul>
</div>
<div id="main">
<p>
花の写真
</p>
</div>
</div>

<div id="footer">
Copyright ©2011 Kawaharagakuen All Rights Reserved</div>
</div>

</body>
</html>
------------------------------ ここまで ------------------------------

(2) "index.html" で保存する。
　　　メニューから、[ファイル]⇒[名前をつけて保存...]
　　　ファイル名(N)：[index.html]
　　　ファイルの種類(T)：[テキスト文書(*.txt)]⇒[全てのファイル(*.*)]
　　　保存先はもちろん、「HTML_CSS」の下の「01_flower」です。

(3) "style.css" 不要。
　　　本当はスタイルシートを使いますが、Step1．で作成したスタイルシートを使います。
　　　各ページに HTML ファイルが必要です。しかし、同様にスタイルシートを作ってしまうと、後で修正した場合、
　　　全てのスタイルシートをミスの無いよう修正するのが困難になってきます。

(4) トップページの『花の写真』をクリックすると、ページが変わるはずです。

下記、図３のようにブラウザで表示できましたか？

『花の写真』ページ（河原電子ビジネス専門学校のCG･Webクリエイター科）
図３．『花の写真』ページのブラウザ表示画面（index.html）

次に、HTML の赤文字の部分を説明します。
修正箇所は４箇所です。

(1) <link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
　　　Step1．との違いは、"style.css" と "../style.css" の部分です。
　　　..：ピリオド２個が、「現在のフォルダーの、一つ上の階層のフォルダー」を表現しています。
　　　../style.css：具体的には、『トップページ』のあるフォルダー「HTML_CSS」の中の、スタイルシートです。

(2) <li><a href="../index.html">ホーム</a></li>
　　 <li>花の写真</li>
　　　上記 (1) で説明した通り、
　　　..：ピリオド２個が、「現在のフォルダーの、一つ上の階層のフォルダー」を表現しています。
　　　../index.html：具体的には、『トップページ』のあるフォルダー「HTML_CSS」の中の、HTML です。
　　　『花の写真』を表示しているので、これのリンクを削除しておきます。

(3) <h3>ローカルナビ</h3> ・・・ </ul>
　　　サイドバーにローカルナビを準備しました。後日作成予定。

(4) <div id="main"> ・・・ </p>
　　　文章を記述。ここも後日作成予定（写真を貼ります）。

Step4．『昆虫写真』ページ～『Ｗｅｂ写真館について』ページの作成

同様に index.html を作ってゆきます。

(1) 『昆虫写真』ページ
　　　フォルダー「02_insect」を作り、下記の index.html を保存します。
　　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>四季折々のＷｅｂ写真館</title>
<link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<div id="header">
四季折々のＷｅｂ写真館
<ul id="g_navi">
<li><a href="../index.html">ホーム</a></li>
<li><a href="../01_flower/index.html">花の写真</a></li>
<li>昆虫写真</li>
<li><a href="../03_landscape/index.html">風景写真</a></li>
<li><a href="../04_people/index.html">人々の写真</a></li>
<li><a href="../10_about/index.html">Ｗｅｂ写真館について</a></li>
</ul>
</div>

<div id="contents">
<div id="sidebar">
<h3>ローカルナビ</h3>
<ul>
<li>カマキリ</li>
<li>トンボ</li>
<li>ホシホウジャク</li>
</ul>
</div>
<div id="main">
<p>
昆虫写真
</p>
</div>
</div>

<div id="footer">
Copyright ©2011 Kawaharagakuen All Rights Reserved</div>
</div>

</body>
</html>
------------------------------ ここまで ------------------------------

(2) 『風景写真』ページ
　　　フォルダー「03_landscape」を作り、下記の index.html を保存します。
　　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>四季折々のＷｅｂ写真館</title>
<link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<div id="header">
四季折々のＷｅｂ写真館
<ul id="g_navi">
<li><a href="../index.html">ホーム</a></li>
<li><a href="../01_flower/index.html">花の写真</a></li>
<li><a href="../02_insect/index.html">昆虫写真</a></li>
<li>風景写真</li>
<li><a href="../04_people/index.html">人々の写真</a></li>
<li><a href="../10_about/index.html">Ｗｅｂ写真館について</a></li>
</ul>
</div>

<div id="contents">
<div id="sidebar">
<h3>ローカルナビ</h3>
<ul>
<li>紅葉</li>
<li>石鎚</li>
<li>桜</li>
</ul>
</div>
<div id="main">
<p>
風景写真
</p>
</div>
</div>

<div id="footer">
Copyright ©2011 Kawaharagakuen All Rights Reserved</div>
</div>

</body>
</html>
------------------------------ ここまで ------------------------------

(3) 『人々の写真』ページ
　　　フォルダー「04_people」を作り、下記の index.html を保存します。
　　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>四季折々のＷｅｂ写真館</title>
<link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<div id="header">
四季折々のＷｅｂ写真館
<ul id="g_navi">
<li><a href="../index.html">ホーム</a></li>
<li><a href="../01_flower/index.html">花の写真</a></li>
<li><a href="../02_insect/index.html">昆虫写真</a></li>
<li><a href="../03_landscape/index.html">風景写真</a></li>
<li>人々の写真</li>
<li><a href="../10_about/index.html">Ｗｅｂ写真館について</a></li>
</ul>
</div>

<div id="contents">
<div id="sidebar">
<h3>ローカルナビ</h3>
<ul>
<li>祭り</li>
<li>水泳</li>
</ul>
</div>
<div id="main">
<p>
人々の写真
</p>
</div>
</div>

<div id="footer">
Copyright ©2011 Kawaharagakuen All Rights Reserved</div>
</div>

</body>
</html>
------------------------------ ここまで ------------------------------

(4) 『Ｗｅｂ写真館』ページ
　　　フォルダー「10_about」を作り、下記の index.html を保存します。
　　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>四季折々のＷｅｂ写真館</title>
<link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<div id="header">
四季折々のＷｅｂ写真館
<ul id="g_navi">
<li><a href="../index.html">ホーム</a></li>
<li><a href="../01_flower/index.html">花の写真</a></li>
<li><a href="../02_insect/index.html">昆虫写真</a></li>
<li><a href="../03_landscape/index.html">風景写真</a></li>
<li><a href="../04_people/index.html">人々の写真</a></li>
<li>Ｗｅｂ写真館について</li>
</ul>
</div>

<div id="contents">
<div id="sidebar">
<h3>ローカルナビ</h3>
</div>
<div id="main">
<p>
Ｗｅｂ写真館について
</p>
</div>
</div>

<div id="footer">
Copyright ©2011 Kawaharagakuen All Rights Reserved</div>
</div>

</body>
</html>
------------------------------ ここまで ------------------------------

(5) どのページからでも、ページが変わるはずです。

下記、図４のようにブラウザで表示できましたか？

図４．各ページのブラウザ表示画面（夫々のindex.html）

本日はここまで。

次回のオープンキャンパスは、

10月22日(土)　『PHPでプログラミング　PHPで動的Webアプリを作ります。』　です。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

カメラ＆Photoshop入門 Vol.2

2011年10月08日

　CG･Webクリエイター科の佐伯です。
　前回はいかがだったでしょうか？
　今回の内容は写真撮影のための用語をもう少し勉強してみましょう。
　今回の内容はカメラで撮影する場合常に意識すべき内容です。しかし、一般的には思い通りにコントロールすることが難しく、数値を間違えれば、ボケボケの写真や真っ黒な写真など使い物にならない写真になってしまいます。
　そのため普通はカメラまかせで撮影した方が失敗が減ります。
　
　コンデジから、無理してデジイチを購入しても思ったように撮影できない原因がここにあります。
　なので多少難しいですが、今日の内容気合い入れて覚えてみてください。きっと役に立ちますよ
　

1章：ほかしコントロール･･･「絞り（F値)」の話

　「絞り」って聞き慣れない言葉ですね。しかし写真撮影する場合には覚えておくととっても役に立つ言葉です。これは言葉通りレンズに入ってくる光の量を調整する数値です。
　
　感覚的に分かりづらいですが、数値が小さいほど絞らないので光がたくさん入ります。数値が大きくなると絞るので光が少ししか入らなくなります。
　
　と、言葉で説明するとこれまでなのですが、ピントがあう範囲をコントロールできます。皆さんも周りが明るい時とか、よく見ようと目をこらすとき目を細めますよね。細かな理屈は置いておいて同じもの撮っても下のようになるんですよ。おもしろいでしょう。
　

F1.7(開放)の場合一部を残して全体がぼけている。

F20絞った場合、背景の様子がよく分かる

　　OC後の余ったお菓子で実験してみました。よく、ぼけをコントロールする･･･といわれるのは、この絞りの使いこなしの事です。これがコンデジではやりづらいのです。
　商品撮影ではかなり意識して使います。安いレンズだとあまり開放できないのです。興味のある方はカタログ見てください。

　
　ピントのあう範囲を被写界深度といって絞ると（F値を大きくすると）被写界深度は深くピントの合う範囲は広がりますが、絞りを開放する（F値を下げる)と被写界深度は浅くなり、ピントの合う範囲が狭くなります。
　
　携帯電話や、コンデジはそもそもレンズの大きさが小さいので、基本的に絞った状態になります。そのためボケが発生しにくい構造になっていますので、記念撮影や、風景写真に適します。
　
　絞ればピントが合いやすくなるので良いように思いますが、この場合平面的に写ってしまいますので、ボリューム感や距離感を演出したい場合には絞りを調整してボケを調整すれば立体感出ますし、商品を際だたせることもできます。
　
　

2章：大きさなのに距離：焦点距離の謎

　カメラで写すことのできる範囲を表す数値として用いられます。でも写る範囲を表す数値なのに長さなんて変ですね。実はこんな理屈になってます。これが分かれば撮りたいものにあわせてレンズが選べます。
　
　焦点距離はレンズに真っ直ぐ入ってくる光がレンズを出て焦点する長さのことで、図のように焦点距離が長いと写る範囲が狭くなり結果的に望遠レンズになり、焦点距離が短いと写る範囲が広く広角レンズになります。
　だから望遠レンズは長く、広角レンズは短いレンズになります。人間の目に近い「標準」レンズと言われるものはフィルムカメラを基準にすると一般的に50mm位となります。
　

　
　しかしデジタルカメラは大人の事情があってこの数値が変わります。
　
　実は上の図の撮像素子と言われる部分で光を電気信号に変えるのですが、このサイズ、当然大きいほど細かな情報受け取ることができるのですが大きいと高いのです。また携帯電話のように小さいものだとそもそも大きな部品が載らなかったりします。
　
　そこで、コンデジなどはこの部分が非常に小さいものを使っています。
　コンデジだと8mm×7mm位ですがフルサイズと言われる昔のフィルムサイズだと36mm×２４ｍｍと全く大きさが違います。
　ただデジイチでもさすがにこれでも大きすぎるので、大体１５万円以下のデジイチは一回り小さいサイズ（ＡＰＳ-Ｃ：23mm×15mm程度）を使っています。
　そのため、撮像素子のサイズが小さいと、レンズから入ってくる光の真ん中あたりしか利用できないので結果的に画角が狭まり焦点距離が伸びることになります。
　

　
　カメラのレンズは普通、昔の35mmフィルムザイズ、すなわちフルサイズを基準にしていますので、APS-Cだと、ほぼ1.5倍で計算すると大丈夫です。たとえばフルサイズで300mmのレンズ　→　APS-Cだと450mmのレンズとして使えますよ。
　
　ただ良いことばかりではなく、光を電気信号に変える部分のサイズが小さいと、余裕が無くノイズが多くなったり色情報が少なくなったりします。そこを各社の技術で効率を上げることでカバーしています。
　しかし、一番下にあるコンデジ、携帯電話サイズってこんなに小さいのですね。　

3章：感度（ISO感度）

　一般的なコンディションでは一度決めるとあまり変更しない数値です。
　当然感度を上げると少ない光でも信号として使えるので良いのですが、光を増幅すればするほど無理がたたりノイズという形で写真に影響が出ます。
　最近は、感度を上げても絵として破綻しないようになっていているのですが、基本的にやはり無理しない方が綺麗な写真になります。
　
　通常の撮影では100(高性能機種では50などある)～400程度で押さえておく方がよいのですが、最近は1600程度まで比較的無理なく使えるようになっている場合が増えてきました。
　ライティングなど周囲の明るさを調整できる商品撮影では、100を推奨します。
　

4章：シャッタースピード

　言葉通り、シャッターを開け閉めする速度です。ちなみコンデジはビデオと同じ構造なのでシャッターがないのですが、1枚の写真を撮る際、情報を取り出す時間として考えてもらえればいいでしょう。
　この数値が多分一番わかりやすいと思いますが、この数値も自分でいろいろ調整できればおもしろい写真を撮ることが可能です。特に動きのあるものを撮影する場合、迫力を出したり、作品として動きを出したりとコントロールできます。
　
　
　いかがでしょうか、難しい用語も多かったと思いますがいい写真を撮るために覚えておくべき内容ですので頑張ってください。
　

連載講座:『HTML＆CSS入門』第２回　～作ってみよう～

2011年10月06日

ＣＧ・Ｗｅｂクリエイター科の水谷です。

前期試験が終わり、休日に石鎚へ行きました。
石鎚山の山頂を目指したのではなく、
お気に入りは瓶が森に上り、頂上から西黒森を眺めることです。

「・・・森」といっても、山です。
残念ながら、肝心の紅葉はまだでした。今年は10月中旬頃だと思います。

今年はとても寒く、しかも下半身ずぶ濡れで上りました。
瓶が森の熊笹は昨年よりも背丈が伸び、そこに朝露がびっしりついていたのです。
山をなめてました(反省)。明日、雨具を買いに行きます。

連載講座ですが、佐伯先生が頑張っていたのをこれ幸いと、しばらくサボってしまいましたが、再開します。
今回のゴールは、以下の図１です。

Step1．Ｗｅｂサイトの目的

ここから決めて行きます。
「私的に撮影した写真の紹介サイト」にします。
前回始めたときは、「ＣＧ・Ｗｅｂクリエイター科の連載講座の紹介」を考えていましたが、
個人的にワクワク感が足りませんでしたので、変更しました。
そこでタイトルを『四季折々のＷｅｂ写真館』にしました。

図１．今回作成するWebページ

Step2．Ｗｅｂサイトの構成

写真を分類して掲載して行こうと考えています。

手始めに、『花』、『昆虫』、『風景』、『人々』のテーマごとにフォルダーを分けて作ります。
さらに『花』であれば、『コスモス』、『チューリップ』のサブフォルダーを作ります。

下記図２は、ルート直下に「HTML_CSS」を作り、その下に夫々のフォルダーを作りました。
この例と異なる名前をつけた場合は、以降で説明する HTML の内容も異なってきます。
特段の支障が無ければ、全く同じにしておいて下さい。

図２．フォルダーの構成

図３に、概要を示しました。各フォルダーに index.html を配し、リンクを張ってつなげます。
夫々のフォルダーに、そのテーマの HTML や画像などの素材をまとめます。

図３．概要図

本日はここまで。

学校の校舎が閉まるので帰ります。

次回、PHPのオープンキャンパスは、
10月8日(土)　『商品撮影体験してみよう～映像撮影編集～』
です。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

カメラ＆Photoshop入門 Vol.1

2011年10月01日

CG･Webクリエイター科の佐伯です。

今日から私が始めるのはカメラ＆PhotoShop入門と題して、撮影のポイントを紹介して、誰でも綺麗な写真が撮れるように解説してゆきます。

今日の話題はカメラの種類やレンズと本体の関係を教えちゃいます。

1章：カメラの種類

コンデジ：コンパクトデジタルカメラ

コンパクトで軽量

　デジカメを大きく分けると、コンデジとデジイチに分かれます。コンデジはコンパクト・デジタルカメラの略で、多分普通皆さんが持っているデジカメがこれになります。安くてお手軽で、誰が撮っても基本的にピントが合いやすい構造になっています。

　このお手軽という部分が特徴でどこにでも気軽に持ってゆけると言う点では非常に使い勝手がよいカメラです。

　一般的にコンパクトでレンズなどに小さなものしか使えないため画質が悪かったのですが、ここ最近急激に性能が良くなっています。

デジイチ：デジタル一眼レフカメラ

レンズを交換する事ができるため
様々な撮影条件に対応できる

　デジイチはデジタル一眼レフカメラといいます。基本的にフィルムカメラと同じような構造をしていて、レンズを交換できる所がコンデジとの大きな差です。
　今回の講座では、このデジイチを使って説明してゆきます。
　
　また通常コンデジに比べて高価なため、その分性能が良いのですが、知識無しに使うと、ぶれ、ぼけなどコンデジより失敗がはっきりと記録されるため使い物にならない写真しか撮れ無い場合も多々あります。

　出始めは、プロが使う新聞社用のデジイチは1台300万円ほどしたのですが、最近は安くなっています。
　
　中でもセットで10万円弱のものが初心者用、20万円前後が中級、アマチュア用の最高峰、それ以上がプロ用と思ってもらえればいいのではないでしょうか。中には本体だけで100万円近くするものもあります。
　
　

ミラーレス機

コンデジのようにコンパクトでありながら
レンズ交換し様々な撮影が可能。

　最近では先ほど説明した「コンデジ」「デジイチ」以外にも「ミラーレス」というものがあります。これはコンパクトな「コンデジ」の利点と、レンズ交換、撮像素子サイズで有利な「デジイチ」のいいところを組み合わせてできたカテゴリーです。
　
　電気屋さんなどでは、一応「デジイチ」の仲間として紹介されている場合が多いのですが、構造的には「レンズ交換ができるコンデジ」の方が正解だと思います。
　
　おしゃれなものとか、小さくてかわいかったりとカメラとしては面白いのですが、中身がメーカーによって画質優先の作り、サイズ優先の作りとかなり差がありますので、購入の際にはよく店員さんの話を聞き、自分の用途とお財布の中身を見比べて選んでくださいね。

　
　
　いざ選ぶとなると、難し～のです。もしカメラ購入を考えていて悩んでいるような時オープンキャンパスに来て聞いて頂ければアドバイスできますよ。
　
　　オープンキャンパスの予約　　
　

2章：カメラメーカーとレンズメーカとマウント

　デジイチを使う場合、どのメーカーを使うかを決めなくてはいけません。慣れていない場合レンズとセットになっているものを用意すればいいのですが、レンズはメーカーが違うと使えないので後になって後悔する場合もありなかなか難しい選択になります。
　
　下にその関係を図にしてみました。

　くどいですがデジイチを使うためには、ボディ（本体）とレンズが必要です。基本的にメーカーが違うと規格が違うため使う事ができないのです。これは形だけではなく手ぶれ補正の有無や電気信号のやりとりなどが違うためで、使いたいレンズが使っている本体にあったものが無く利用できない事があります。
　
　実はこれ以外にも、当然メーカもたくさんあり、さらには古い規格やコンデジとデジイチの中間に当たる「ミラーレス機」用の規格があったり、デジタルカメラだけでなくビデオカメラでも使える規格があったりとかなり複雑です。
　
　最終的にどのメーカがいいのかは使用条件により変わりますので一言で言う事は難しいのですが、自分で使う場合一番いいのはデジイチを使っている知り合いと同じメーカーにしておくと、レンズの交換などできますのでいいですよ。
　

　
　
　いかがでしたか？こんな感じで進めてゆきますが、なかなか本格的なカメラを持っている方も少ないと思います。
　オープンキャンパスでは、本格的なカメラを使って撮影体験できますので、興味あればぜひ来てくださいね！　
　
　
　　オープンキャンパスの予約　　
　

入門JavaScript Vol.2

2011年09月22日

みなさんいかがお過ごしでしょうか。 CG・Webクリエイター科の佐伯です。
前回Webページ上でいろいろ動かす事のできるJapvaScriptなるものを紹介しましたがいかがでしょうか。
もし不安な方はこちらを見て復習してください。

　入門 JavaScript Vol.1

1章：突然ですが「インタラクティブ...」って何？

　思い出しましたか？今回はJavaScriptを使って画像を入れ替えてみます。
　したにあるような効果を見たことある方も多いと思いますが、JavaScriptを使えば比較的簡単に作れます。
　　　ここをクリック

　こんな風に人間の操作に合わせて反応することを「インタラクティブ」といいます。
　操作する方がどうしていいのか、今どういう状態なのかをわかりやすく知らせるための仕組みとして「インタラクティブ性」があるページ作りは欠かせません。
　
　このように、マウスのカーソルが画像に重なる状態の変化を見て表示を変えると、今マウスがどこを指しているのか分かりやすいですね。
　ためしにさっきの画像を敷き詰めてみましょう。
　
　　　ここをクリック
　

　ほらほら、マウスがどこにあるのか画像の変化でわかりますね。
　まあこんなに画像やボタンを敷き詰めることはあまりないのですが、いろいろと応用できる考えです。
　今から、こんな風にするにはどうしたらいいのか解説します。
　
　
　　オープンキャンパスの予約はここ！をクリック　

2章：ページの準備・・・まずは画像の表示。

　まずはじめに下にある素材ファイルをダウンロードします。
　

使用素材
素材をまとめたzipファイル→これです

　
　これは圧縮ファイルになっていますので、デスクトップにでも解凍してください。
　その中にある"j-test.html"を「メモ帳」で開きます。そうすると下のような文字が書かれたウィンドウが開きます。
　

・・・・メモ帳起動画面、HTMLタグが書かれたウィンドウが開きます。
　　　こういう風に手順が書かれているものを「ソースファイル」と呼びます。
　　　覚えておいてくださいね。
　

　
　
　ではメモ帳を使ってこんな風にソースを追加してみましょう。
　赤い部分を追加してください

  
  <html>
  <head>
    <title>JavaScriptで画像をコントロール</title>
    <script type="text/javascript">
    <!--
    
    //-->
    </script>
  </head>
  <body>  
  
  <img src="./img/img01.gif">
  
  </body>
  </html>

　できましたか？出来上がったらウィンドウ上のメニューから「ファイル」→「名前をつけて保存｣→保存先にデスクトップを選んで、"j-test.html"という名前で保存してください。
　保存ができればデスクトップ上に現れた"j-test.html"をダブルクリックするとブラウザが勝手に立ち上がってきます。
　
　そうすると下のように画像が表示されるはずです。
　表示されましたか？
　

　
　先ほどメモ帳にて記入いただいたものは、HTMLタグの一種で画像を表示するためのタグです。
　これはHTMLのタグなのですが、JavaScriptはこの中に潜り込んで、設定されている情報を書き換えることで様々な動作をさせることができるのです。
　
　今は表示しているだけですのでマウスを画像の上に持って行っても何も変化ありません。
　次の章では先ほどのソースを書き換えて画像に動きをつけてみましょう。
　
　

3章：画像の入れ替え！

　では先ほどメモ帳で書いたものをこういう風に変更してみましょう。

  
  <html>
  <head>
    <title>JavaScriptで画像をコントロール</title>
    <script type="text/javascript">
    <!--
    
    //-->
    </script>
  </head>
  <body>  
  
  <img src="./img/img01.gif"
    onMouseOver="this.src='./img/img01-r.gif'"
    onMouseOut="this.src='./img/img01.gif'">
  
  </body>
  </html>

　
　どうです、書けました？
　入力終わったら、メモ帳のメニューから｢ファイル｣→｢上書き保存｣してから、ブラウザでページを読み込みなおしてください。そうすると、動作するはずです。
　
　ではでは動きを解説します。「src」というのは場所を表す記号です。ここでは表示する画像の場所を指示しています。
　「 ./img/img01-r.gif 」というのが画像の場所と名前で日本語で書くと
　

　「./」・・・・今自分がいる場所から
　　↓
　「img/」・・・imgっている場所にある
　　↓
　「img01-r.gif」・・"img01-.gif"というファイル

　
　という意味になります。
　当然、「this.src」ってのも、「this」が「これ」っていう意味ですから。日本語で書くと
　
　「このファイルの・ある場所」
　
　という意味になります。
　この場所の情報を、いろいろ変えてあげると表示される画像が変わるということです。
　
　なんとなく分かってきましたか？
　そう赤で書いてある場所は、その場所の情報を書き換えているということです。
　ただやみくもに書き換えるとおかしくなりますが、もう少し赤い部分を見てみると。
　
　「onMouseOver」、「onMouseOut」って書いてますよね。
　
　「onMouseOver」は、「マウスが画像の上に来たとき」という意味で、「onMouseOut」は「画像の上にあったマウスカーソルが画像の上から離れた時」を表しています。そのタイミングで画像ファイルのある場所を変えているということです。
　
　か・ん・た・ん・ですね！

　オープンキャンパスでは、ここで書いてあるような授業を実際体験できます。何回来ても無料で体験できますので、是非遊びに来てくださいね。　
　オープンキャンパスの予約はここ！をクリック

入門JavaScript Vol.1

2011年09月15日

みなさんいかがお過ごしでしょうか。 CG・Webクリエイター科の佐伯です。
私は、Webページ上でいろいろ動かす事のできるJapvaScriptなるものを紹介いたします。

JavaScriptって聞き慣れない言葉ですが、実jは皆さん身近な部分でお世話になっています。

一番身近なのはGoogleMAPでしょうか。いきなりこんなに凄いものを創ることは難しいのですが、意外と簡単に試すことができますので少し勉強してみましょう。

1章：準備

　最初に、パソコンを用意します。パソコンは何でも良いのですが「ブラウザ」と呼ばれるソフトが入っていることを確認してください。
　「ブラウザ」が分からない･･･そうですね、多分皆さんあまり意識せずに使っているものの代表格ですが、Webページを見たりするときに使うソフトウェアの総称です。分かりますか？
　具体的には、「Internet Exproler(インターネットエクスプローラ)」や「Firefox(ファイヤーフォックス)」、「crome(クローム)」というものです。ありましたか？
　今回はその中の一つ「Internet Explorer」を使って説明してゆきます。
　
　もう一つ、見つけて欲しいものに「メモ帳」があります。あまり機能が無くて使いづらいのですが、今は背に腹は代えられません。Windowsパソコンなら普通入っています。スタートメニューから下の通りたどると大丈夫です。
　
　XPだと･･････　「スタートメニュー」→「アクセサリ」→「メモ帳」
　Win7だと･･･　「スタートメニュー」→「すべてのプログラム」→「アクセサリ」→「メモ帳」
　
　ありましたか、この二つのソフトだけでできてしまうのもJavaScriptの強みです。
　もちろんプロの使うものはこんなもの使いません、オープンキャンパスでは、DeraｍWeaverというツールを使います。
　興味のある人はきてくださいね。！
　
　オープンキャンパスの予約はここ！をクリック

2章：ページの準備

　まずはじめに「メモ帳」を起動してください。何ともまあシンプルなウィンドウが立ち上がります。この真っ白なな所に「タグ」と言われる言葉を埋め込み、先ほどの「ブラウザ」で読み込むとといろいろできます。
　実はこれWebページを作る基本なのです、簡単なので少し一緒に作業してみてください。
　
　

メモ帳起動画面、真っ白です。

ではメモ帳にこんな風に書いてみましょう。

  
  <html>
  <head>
    <title>JavaScriptを使っちゃう</title>
  </head>
  <body>
  
  
  </body>
  </html>

　できましたか？出来上がったらウィンドウ上のメニューから「ファイル」→「名前をつけて保存｣→保存先にデスクトップを選んで、"j-test.html"という名前で保存してください。
　保存ができればデスクトップ上に現れた"j-test.html"をダブルクリックするとブラウザが勝手に立ち上がってきます。
　
　どうです、すばらしく真っ白ですね。本当に何もない、この白いキャンバスにいろいろ仕込んでいきますよ。
　　先ほどメモ帳にて記入いただいたものは、HTMLタグといってページの基本構造となる部分です。JavaScriptはこの中に埋め込んで、ページが読まれてから動作開始します。今回は骨格だけでその中身が全く書かれていなかったためこんな風に真っ白になったのです。
　
　でもこれで準備はOK！パソコンさえあればどこでも開始できますよ。
　
　

3章：JavaScriptを書いてみる

　では先ほどメモ帳で書いたものをこういう風に変更してみましょう。
　

  
  <html>
  <head>
    <title>JavaScriptを使っちゃう</title>
  </head>
  <body>
  
  <script type="text/javascript">
  <!--
      dd = new Date();
      document.write("今の時刻ですよ<br>");
      document.write(dd.toLocaleString());

  // -->
  </script>
  
  
  </body>
  </html>

　
　どうです、書けました？なんだか呪文のような言葉が続きますが、我慢して入力してください。ちなみに黒い部分は毎回一緒ですので、当分赤の部分だけ書き換えることになります。
　入力終わったら、メモ帳のメニューから｢ファイル｣→｢上書き保存｣してから、ブラウザでページを読み込みなおしてください。そうすると、読み込んだ時点での時間が表示されるはずです。
　
　できましたか？
　
　ブラウザで再表示させるたびに、再表示した時間が表示されるはずです。
　
　これが、JavaScriptにしかできないことで、今までの技術では動きのないページしか作れません。これを静的なページというのですが、JavaScriptを使えば、ブラウザ上でいろんなものを動かしたりできます。
　
　今回は基本的な説明でしたが、次回は実際に画像を動かしてみます。楽しみにしていてくださいね。
　

連載講座:『HTML＆CSS入門』第１回　～スタイルシートって？～

2011年09月14日

こんにちは。
ＣＧ・Ｗｅｂクリエイター科の水谷です。

今日も良い天気です。
天気が良すぎて、暑い！昼は32度になるようです。

今回から、連載講座:『HTML＆CSS入門』第１回　～スタイルシートって？～　が始まります。
佐伯先生が『入門JavaScript』を始めようとしているし、負けじと第３弾『HTML＆CSS入門』です。
今月中には公開予定の第４弾も計画進行中です。

"HTML" と "CSS" の全てを解説することは困難です。
そこでこの講座では、チュートリアル形式で進めてゆきます。

今回のゴールは、以下の図１です。
デザイン的にはイケておりませんが、ヘッダー、サイドバー、本文、フッターの４部構成になったWebページを作ります。

今後の数回で、ナビゲーションバーを作り、リンクを張り、画像を貼り付ける程度まで進めてゆきますので、
皆さんがWebページを作成する際に、テンプレートとして再利用していただけるWebページができたらと思います。

図１．今回作成するWebページ

一昔前は、"HTML" のテーブルタグを使っていましたが、最近は、スタイルシートを使います。
（テーブルタグとは、Webページで表を作るときに使う手法です。テーブルタグの、これ以上の説明はここでは省略します。）

線の色も変ですが、これはヘッダー、サイドバー、本文、フッターそれぞれの領域を表示するための線です。
４つの領域に分けるためのスタイルシートの解説ですので、デザインには目をつぶって下さい。

Step1．まえがき

さて『HTML＆CSS入門』ですが、"HTML" と "CSS" という言葉は始めてですか？
"HTML" でWebページを作成できます。情報伝達だけなら、これで十分です。

ところが、Webページに広告PRとしての役割が求められていることも多く、見た目も重要です。
そこで、"CSS(スタイルシート)" も利用して、ビジュアル的にイケてるWebページを作ります。

過去の記事『オープンキャンパスのご案内』(2011年07月28日) で "HTML" と "CSS" の言葉に触れています。
良かったら見ておいて下さい。

Step2．"HTML" だけのシンプルなサンプル

何はともあれ、コードを打ち込んで、表示させてみましょう。
今回は「メモ帳」があれば十分です。

(0) 準備として、この演習用のフォルダーを１つ作成する。
　　　これから作成するファイルを整理して保存するためです。
(1) 「メモ帳」を起動する。
(2) "HTML" のサンプルコードを入力する。
　　　（説明のために色をつけています。入力には無関係ですので、色は無視して下さい。）
　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>HTML＆CSS sample</title>
</head>

<body>
【ヘッダー】
CG・Webクリエイター科<br>

【サイドバー】
ローカルナビ
PHP入門<br>
JavaScript入門<br>
HTML＆CSS入門<br>
カメラ＆Photoshop入門(仮)<br>

【本文】
連載講座:<br>
『PHP入門』第１回　～プログラムって？～<br>
Step1．インターネットの接続<br>
Step2．HTMLの構造<br>
Step3．プログラムの仕業<br>
『PHP入門』第２回　～インストール(1/2)～<br>
Step1．動作環境の説明<br>
Step2．XAMPP のダウンロード<br>
『PHP入門』第３回　～インストール(2/2)～<br>
Step3．インストール<br>
Step4．インストール結果の確認<br>
Step5．サンプルプログラム <br>

【フッター】
Copyright ©
2011 Kawaharagakuen All Rights Reserved
</body>
</html>
------------------------------ ここまで ------------------------------
(3) "index01.html" で保存する。
　　　メニューから、[ファイル]⇒[名前をつけて保存...]
　　　ファイル名(N)：[index01.html]
　　　ファイルの種類(T)：[テキスト文書(*.txt)]⇒[全てのファイル(*.*)]
(4) 上記(0)で作成したフォルダをエクスプローラで開き、保存したファイル "index01.html" をダブルクリックする。

下記、図２のようにブラウザで表示できましたか？

図２．ブラウザ表示画面（index01.html）

<head></head>
<meta …>
<title></title>
など、かぎ括弧 <> の記号をタグといいます。
『タグ辞典』なるものも販売されているほどたくさんあるので、２つだけ説明します。

"index01.html" のソースコードと図２のWebページを見比べてみて下さい。
(1) <body> ～ </body>の中だけがブラウザで表示されています。
　　　<head>～</head>の中は、ブラウザに通知する内容です。Webページには表示されません。
　　　（当面はこのまま使って下さい。解説は後日にします。）
　　　またこれ以外のタグも、Webページには一切表示されません。
(2) ソースコード中の <br> のところだけが、Webページで改行されています。
　　　つまり、ワープロとは違いますので、ソースコード中の改行は無効です。

Step3．"HTML" のタグを使った整形

スタイルシートを使う前に、少しだけ文章を整えておきます。

(1) Step2．と同様にして、"HTML" のサンプルコードを、「メモ帳」で入力する。
　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>HTML＆CSS sample</title>
</head>

<body>
【ヘッダー】CG・Webクリエイター科

【サイドバー】
<h3>ローカルナビ</h3>
<ul>
<li>PHP入門</li>
<li>JavaScript入門</li>
<li>HTML＆CSS入門</li>
<li>カメラ＆Photoshop入門(仮)</li>
</ul>

【本文】
<h2>連載講座:</h2>
<p>
<h3>『PHP入門』第１回　～プログラムって？～</h3>
Step1．インターネットの接続<br>
Step2．HTMLの構造<br>
Step3．プログラムの仕業<br>
</p>
<p>
<h3>『PHP入門』第２回　～インストール(1/2)～</h3>
Step1．動作環境の説明<br>
Step2．XAMPP のダウンロード<br>
</p>
<p>
<h3>『PHP入門』第３回　～インストール(2/2)～</h3>
Step3．インストール<br>
Step4．インストール結果の確認<br>
Step5．サンプルプログラム<br>
</p>

【フッター】Copyright ©
2011 Kawaharagakuen All Rights Reserved</div>
</body>
</html>
------------------------------ ここまで ------------------------------
(2) "index02.html" で保存し、ブラウザで表示する。

下記、図３のようにブラウザで表示できましたか？

図３．ブラウザ表示画面（index02.html）

図２．と見比べて文章に装飾がつき、少し見やすくなりました。
ここでは、３種類のタグを説明しておきます。

(1) <h3> ～ </h3> と <h2> ～ </h2> があり、これにはさまれている文字が、Webページでは大きく表示されています。
　　　hとはHeadingの略で、見出しを意味します。 HTMLには、<h1> から <h6> までの６段階の見出しが用意されています。
(2) <ul> ～ </ul> は、<li> ～ </li> と組み合わせて、順序のないリストを表示します。ulはUnordered Listの略です。
　　　ここでは、こんなのもあるという紹介程度です。
(3) <p> ～ </p> は、囲まれた部分がひとつの段落として表示します。pはParagraphの略です。

テーマがスタイルシートなのに、HTMLを使っていますが、この程度はHTMLで記述するべきです。
特に上記(1) の見出しは、スタイルシートでも文字を大きく出来ますが、あえてHTMLで記述するべきです。

Step4．スタイルシート導入

スタイルシートを使うために、<div>タグを追加しておきます。

(1) Step3．と同様にして、"HTML" のサンプルコードを、「メモ帳」で入力する。
　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>HTML＆CSS sample</title>
<link rel="stylesheet" href="style03.css" type="text/css" media="screen" />
</head>

<body>
<div id="container">
<div id="header">【ヘッダー】CG・Webクリエイター科</div>
<div id="contents">

<div id="sidebar">
【サイドバー】
<h3>ローカルナビ</h3>
<ul>
<li>PHP入門</li>
<li>JavaScript入門</li>
<li>HTML＆CSS入門</li>
<li>カメラ＆Photoshop入門(仮)</li>
</ul>
</div>

<div id="main">
【本文】
<h2>連載講座:</h2>
<p>
<h3>『PHP入門』第１回　～プログラムって？～</h3>
Step1．インターネットの接続<br>
Step2．HTMLの構造<br>
Step3．プログラムの仕業<br>
</p>
<p>
<h3>『PHP入門』第２回　～インストール(1/2)～</h3>
Step1．動作環境の説明<br>
Step2．XAMPP のダウンロード<br>
</p>
<p>
<h3>『PHP入門』第３回　～インストール(2/2)～</h3>
Step3．インストール<br>
Step4．インストール結果の確認<br>
Step5．サンプルプログラム<br>
</p>
</div>

</div>
<div id="footer">【フッター】Copyright ©
2011 Kawaharagakuen All Rights Reserved</div>

</div>

</body>
</html>
------------------------------ ここまで ------------------------------
(2) "index03.html" で保存する。

まだWebページは正しく表示できません。じらしてるわけではありませんが、スタイルシートはまだ！です！
まずHTMLの変更点を２点、説明します。

(1) <div>タグを追加しました。

図４．<div>タグの構造図

"index03.html" のリストが長くなったので、要点だけを抜き出しました。都合によりこのような構造にしています。
この中で、 はコメントです。Webページの表示に影響しません。
（作業する人のメモです。でも、ミスを防ぐ目的や、なぜそうしたのかを忘れてしまうこともあるので、必要なのです。）
(2) 対応するスタイルシートを、<link ～ href="style03.css" ～ /> で、ファイルを指定します。

そこで、"style03.css" というファイル名称で、スタイルシートを作成します。

(1) "HTML" と同様にして、スタイルシートのサンプルコードを、「メモ帳」で入力する。
　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
@charset "Shift_JIS";
/* 一括で全ての要素の余白をゼロに指定 */
* {
padding: 0;
margin: 0;
}
body {
line-height:1.4;
font-size: 0.85em;
font-family: "ＭＳＰゴシック", "MS PGothic", Arial, sans-serif;
}
/* ---------------------------------------- レイアウトに関する指定 */
#container {
text-align: left;
margin: 1em auto 0;
width: 90%;
border: 2px solid #0000ff;
}
#header {
padding: 20px 0px 10px;
height : 70px;
font-size: 2.5em;
}
#sidebar {
float: left;
width: 25%;
height : 400px;
padding: 20px 0px 0px 20px;
}
#main {
float: left;
height : 400px;
padding: 20px 0px 0px 20px;
}
#contents {
text-align: left;
}
#footer {
clear: both;
padding: 5px 10px 5px;
color: #ff00ff;
}
------------------------------ ここまで ------------------------------
(2) "style03.css" で保存し、index03.html" を、ブラウザで表示する。

下記、図５のようにブラウザで表示できましたか？

図５．ブラウザ表示画面（index03.html）

ヘッダー、サイドバー、本文、フッターの４つのエリアに分けれています。

HTML("index03.html") 内の <div id="container"> と、CSS("style03.css") 内の #container が対応しています。
（ CSS がスタイルシートのことです。）
<div>タグ が合計６つあります。それぞれ、スタイルシートで詳細を指定しています。

スタイルシートの説明を（やっと?）始めます。
{} の中のキーワードをプロパティと言います。ここでは３種類取り上げてみます。
(1) padding は、上下左右のパディング（内側の余白）を指定するプロパティです。
　　　#header、#sidebar、#main、#footer の４ヵ所で使っています。
(2) width と height は、領域の横と縦の大きさを指定するプロパティです。
　　　#container、#header、#sidebar、#main の４ヵ所で使っています。
　　　px 指定（ピクセル単位）と、% 指定（比率）を使いました。これ以外もありますが、今回は省略します。
(3) font-size は、フォントのサイズを指定するプロパティです。
　　　#header の１ヵ所だけで使っています。
　　　2.5em と記述していますが、em（エム）は1文字分の大きさなので、2.5倍の大きさを指定しています。

Step5．スタイルシートで線を描く

ヘッダー、サイドバー、本文、フッターの４つのエリアをもっと分かりやすくしてみます。

(1) "index04.html" を作成しますが、変更点は下記の１行だけです。
　　　"index03.html" を「メモ帳」で開いて、"03" ⇒ "04" に打ち直す。
------------------------------ ここから ------------------------------
　　　（省略）
<link rel="stylesheet" href="style04.css" type="text/css" media="screen" />
　　　（省略）
------------------------------ ここまで ------------------------------
(2) "index04.html" で保存する。（メニューの [ ファイル ] から [ 名前を付けて保存(A)．．． ] を選んで保存する。）

(3) Step4．と同様にして、スタイルシートのサンプルコードを、「メモ帳」で入力する。
　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
@charset "Shift_JIS";
/* 一括で全ての要素の余白をゼロに指定 */
* {
padding: 0;
margin: 0;
}
body {
line-height:1.4;
font-size: 0.85em;
font-family: "ＭＳＰゴシック", "MS PGothic", Arial, sans-serif;
}
/* ---------------------------------------- レイアウトに関する指定 */
#container {
text-align: left;
margin: 1em auto 0;
width: 90%;
border: 2px solid #0000ff;
}
#header {
text-align: center;
padding: 20px 0px 10px;
height : 70px;
font-size: 2.5em;
border-bottom: 2px solid #00ffff;
}
#sidebar {
float: left;
width: 25%;
height : 400px;
padding: 20px 0px 0px 20px;
border-right: 2px solid #00aa00;
}
#main {
float: left;
height : 400px;
padding: 20px 0px 0px 20px;
border-left: 2px solid #ff0000;
}
#contents {
text-align: left;
}
#footer {
text-align: right;
clear: both;
padding: 5px 10px 5px;
border-top: 2px solid #00ffff;
color: #ff00ff;
}
------------------------------ ここまで ------------------------------
(4) "style04.css" で保存し、index04.html" を、ブラウザで表示する。

下記、図６のようにブラウザで表示できましたか？

図６．ブラウザ表示画面（index04.html）

実はStep4．の#container に、border プロパティがあり、外枠を描いていました。
このStep5．では、リストの赤字部分で、エリアの上下左右に線を描いています。

ここで、色コードについてのみ解説します。
#ff0000、#00aa00 などの記述がありますが、ここで、罫線の色を指定しています。
"#" の後ろに６文字ありますが、２文字ずつ、順に、Ｒ・Ｇ・Ｂの指定です。

ＲＧＢは、テレビのＣＭなどで聞いたことがありますよねぇ？それぞれレッド、グリーン、ブルーです。
これが光の３原色で、この３色の量で、パソコンのモニターの色をコントロールしています。

インクジェットプリンターを持っている人は、ＣＭＹとか、ＣＭＹＫとかを知ってますよねぇ？
順に、シアン（水色）、マゼンタ（赤紫）、イエローです。
こちらは絵の具の３原色で、大雑把にいうと、赤青黄色です。

この話の続きは、『色彩理論』で・・・連載予定がありませんが、詳しく書くと長くなるのでやめます。

いろいろと打ち変えて試してみて下さい。

なお、２文字は１６進数です。普段われわれが使っている数は１０進数です。
１０進数： 0、1、2、3、4、5、6、7、8、9、10、11、12、・・・
１６進数：0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f、10、11、12、・・・ 18、19、1a、1b、・・・ fa、fb、fc、fd、fe、ff まで。

難しかったかな？分からなくっても、１ケタが 0 ～ f で、２ケタなので、00 ～ ff までを使って下さい。

Step6．今回の完成！

もう少し整形して、【ヘッダー】【サイドバー】【本文】【フッター】の文字の装飾を統一します。

(1) "HTML" のサンプルコードを、「メモ帳」で入力する。
　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>HTML＆CSS sample</title>
<link rel="stylesheet" href="style05.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header"><span class="kuwake">【ヘッダー】</span>CG・Webクリエイター科</div>
<div id="contents">
<div id="sidebar">
<span class="kuwake">【サイドバー】</span>
<h3>ローカルナビ</h3>
<ul>
<li>PHP入門</li>
<li>JavaScript入門</li>
<li>HTML＆CSS入門</li>
<li>カメラ＆Photoshop入門(仮)</li>
</ul>
</div>
<div id="main">
<span class="kuwake">【本文】</span>
<h2>連載講座:</h2>
<p>
<h3>『PHP入門』第１回　～プログラムって？～</h3>
Step1．インターネットの接続<br>
Step2．HTMLの構造<br>
Step3．プログラムの仕業<br>
</p>
<p>
<h3>『PHP入門』第２回　～インストール(1/2)～</h3>
Step1．動作環境の説明<br>
Step2．XAMPP のダウンロード<br>
</p>
<p>
<h3>『PHP入門』第３回　～インストール(2/2)～</h3>
Step3．インストール<br>
Step4．インストール結果の確認<br>
Step5．サンプルプログラム<br>
</p>
</div>
</div>
<div id="footer"><span class="kuwake">【フッター】</span>Copyright ©
2011 Kawaharagakuen All Rights Reserved</div>
</div>
</body>
</html>
------------------------------ ここまで ------------------------------
(2) "index05.html" で保存する。
(3) スタイルシートは、下記の５行を追加するだけです。
　　　"style04.css" を「メモ帳」で開いて、追加入力する。
　　コピー＆ペーストして、ご利用下さい。
------------------------------ ここから ------------------------------
.kuwake {
font-size: 12pt;
color: #0000ff;
font-weight:bolder;
}
------------------------------ ここまで ------------------------------
(4) "style05.css" で保存し、index05.html" を、ブラウザで表示する。

下記、図７のようにブラウザで表示できましたか？

図7．ブラウザ表示画面（index05.html）　（・・・図１．と同じです。）

今回は、<span>タグを使いました。
<div>は「ブロック要素」として、<span>は「インライン要素」として定義されます。

また、"class" を使っていて、
HTML("index05.html") 内の <span class="kuwake"> と、CSS("style05.css") 内の .kuwake が対応しています。
"class" と "id" の違いは、"id" はページ中に1度しか登場しないのに対して、"class" はページ中に何度でも登場します。

今回の目的は、【ヘッダー】【サイドバー】【本文】【フッター】の文字の装飾を統一することでした。
装飾は、CSS("style05.css") 内の .kuwake 一か所だけで指定しています。
よって、"class" が良いのです。

以上で、　『HTML＆CSS入門』第１回　～スタイルシートって？～　を終了します。
（書いていて、終われないのではないかと心配になりました。いつかは終わります。）
お疲れ様でした。

次回、PHPのオープンキャンパスは、
9月17日(土)　『魅せるホームページの作り方/スタイルシート』
です。

スタイルシートや、Ｗｅｂに興味がある方なら、初心者の方も大歓迎です。
良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

連載講座:『PHP入門』第３回　～インストール(2/2)～

2011年09月12日

こんにちは。
ＣＧ・Ｗｅｂクリエイター科の水谷です。

今日も良い天気です。天気が良すぎて、暑い！

今回は、連載講座:『PHP入門』第３回　～インストール(2/2)～です。

今日こそインストールを完了するぞ～！！
前回の続きなので、Step3から始まります。（Step5まで。）

Step3．インストール

私のネット環境では、ダウンロードが20分ほどで終わりました。
xampp-win32-1.7.4-VC6-installer.exe
というファイルをダブルクリックして下さい。インストールが始まります。

図１．インストール開始
「Japanese」が表示されず、選べませんが大丈夫です。最後には日本語環境にできますので、進めてゆきましょう。

図２．フォルダ選択画面とオプション選択画面
インストールフォルダを選択できますが、標準で「C:\xampp」となっており、このまま進みました。
（もちろん変更可能です。変更された場合は、次からの説明とフォルダが異なりますので、その都度読み替えて下さい。）
オプションの選択画面では、サービスとしてのインストールを全てOFFにしました。

図３．進行状況
しばらくお待ち下さい。

図４．インストール完了
以上でインストール完了です。

Step4．インストール結果の確認

図５．"XAMPP Control Panel" を起動
”XAMPP Control Panel” をダブルクリックし、"XAMPP Control Panel" を起動します。

”Apache” と ”MySql” は、このプログラムを使って、手動で『起動(Start)』と『停止(Stop)』させます。
”Apache” を起動後、[ Admin．．． ] をクリックすると、図６のページが表示されます。

この連載講座でPHP を利用するためには、"Apache" を Start させなければなりません。

図６．言語選択のページ
もちろん『日本語』を選択。

図７．『XAMPP Windows版へようこそ!』のページ

「おめでとうございます:
システム上にXAMPPが正しくインストールされました！」　とメッセージがでます。

図８．”phpinfo()” をクリックすると、「PHP Version 5.3.5」がインストールされていることが確認できます。

Step5．サンプルプログラム

PHPの date() 関数を利用して、日時を表示してみます。

手順：
(1) "C:\xampp\htdocs" のフォルダ内に "00_PHPTest" という名前でフォルダを作成する。

(2) メモ帳で新規ファイルを作成し、下記のプログラムを入力する。
コピー＆ペーストされるなら、下記のリストをご利用下さい。
------------------------------ ここから ------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>PHP sample</title>
</head>
<body>
PHPのdate()関数の表示。<br><br>

<?php
$today = date("Y/m/d l H:i:s");
print($today);
?>
</body>
</html>
------------------------------ ここまで ------------------------------

(3) 保存して、閉じる。その後、"index.php" と名称変更する。

以上でPHPサンプルプログラムが出来上がりました。

図９．PHPサンプルプログラム
赤字の部分がPHPのプログラムで、それ以外はHTMLです。

ファイルの拡張子が、".php" になっていることに注意して下さい。
次にこれを実行します。

手順：
(1) "XAMPP Control Panel" で、"Apache" が Start させていることを確認。（参照：Step4 図５）
　　　”Running” になっていること。

(2) ブラウザ（ＩＥなど）を起動し、ＵＲＩ入力エリアに、"http://localhost/00_PHPTest/index.php" とキーボード入力する。
　　　"localhost" は、Step3 図２で指定したフォルダと関係します。
　　　> インストールフォルダを選択できますが、標準で「C:\xampp」となっており、このまま進みました。（再掲）
　　　この場合、"C:\xampp\htdocs" と "\localhost" が同じです。

(3) 指定したページへジャンプすると、下記図１０のように、日時が表示される。

図１０．サンプルプログラムの実行

この様に、
(1) HTMLの中に、"<?php" と "?>" の間に、PHPのプログラムを書く。
　　　（PHPのプログラムを別ファイルにする方法もありますが、次回以降で解説します。）

(2) ファイルの拡張子を、".php" にする。

(3) "Apache" を起動させる。
　　　"XAMPP Control Panel" が便利。

(4) URI には、"localhost" を利用する。
　　　（"localhost" とは、一般的に 127.0.0.1 を指すホスト名。）
　　　これによって、XAMMP のインストール場所が異なっても、図１０の URI は同じになります。

以上で、今回のインストールを完了します。
お疲れ様でした。

< 連載講座:『PHP入門』・・・ 前へ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 次へ >

次回、PHPのオープンキャンパスは、
10月22日(土)　『PHPでプログラミング　PHPで動的Webアプリを作ります。』
です。

PHPプログラミングや、Ｗｅｂに興味がある方なら、初心者の方も大歓迎です。
良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

連載講座:『PHP入門』第２回　～インストール(1/2)～

2011年09月06日

こんにちは。
ＣＧ・Ｗｅｂクリエイター科の水谷です。

台風一過、今日は良い天気です。
ＫＢＣの校舎と、私の自宅には被害がありませんでした。

今回は、連載講座:『PHP入門』第２回　～インストール(1/2)～　です。
「インストール」というのは、パソコンにプログラムを入れて、動作できるように設定も行うことです。

前回から少し難しいと感じている方もいるかもしれませんが、
プログラミングが始まったら面白くなりますので、もう少し頑張って下さい。

また、本日利用するプログラムは無料です。お財布の用意は不要です。
後で説明するプログラムを、ダウンロードして、インストールします。
「ダウンロード」というのは、携帯で音楽サイトから曲を落としてきますが、ほぼ同じです。
携帯ではなくパソコンで、曲ではなくプログラムになっただけです。

まずは一通り読んでみて下さい。
（今回は分量が多くなってしまったので、Step1 と Step2 で終わります。）

Step1．動作環境の説明

PHPを動作させるための環境(マシン環境とプログラム環境)を構築しないと、通常は動作しません。
動作させるためのマシン環境は、下記の３パターンです。

図１．マシン環境の説明

ホームページを一般公開する場合は、上記(1)または(2)ですが、これからPHPを習う目的なら、上記(3)です。
この環境を、ローカル環境(とか、テスト環境とか、開発環境)といいます。

ローカル環境でPHPを動かすには、Apache、PHP本体、MySQLのインストールと各種設定が必要です。
３つも！必要なの・・・？　大丈夫です。
必要なソフトウェアをまとめてインストールできるアプリケーションパッケージがあります。
今回は「XAMPP(ザンプ)」を使用してローカル環境を構築します。

XAMPPとは、
「…Apache(Webサーバ)、MySQL(SQLデータベースサーバ)とWebプログラミング言語であるPHPや同目的で使われる
Perlの4つの主要ソフトウェアとphpMyAdminなどの管理ツール、さらにSQLiteなど、いくつかの補助的なソフトウェアと
ライブラリモジュールが含まれている。…」（『ウィキペディア』より引用）

図２．パッケージの説明
必要なプログラムが全部入っているパッケージなので、これを入れてしまえばローカル環境ができあがります。

Step2．XAMPP のダウンロード

それでは、プログラム環境を整えてゆきます。まずはダウンロードです。

日本語での公式ホームページは、『Apache Friends』です。
図３のようなページが表示されます。

図３．『Apache Friends』の日本語公式ホームページ
もし後日このブログを読まれた場合は、デザインが違うかもしれません。

今使われているパソコンのＯＳが、Windows7 の場合を想定して、説明をしてゆきます。
Windows Vista、Windows XP なら、概ね同じ方法だと思います。
Windows 2000 等も、概ね同じ方法だと思いますが、最近使っていませんので詳細がわかりません。試して下さい。

図４．「ダウンロード」のところにある「XAMPP」をクリックします。

図５．「インストーラ」をクリックします。

この後、ダウンロードが始ましますので、フォルダを指定して下さい。
時間はあまりかからないと思います。

指定したフォルダに、
xampp-win32-1.7.4-VC6-installer.exe
というファイルが出来上がっていれば成功です。

今回はこれで終わります。

肝心のインストールは、次回
『連載講座:『PHP入門』第３回　～インストール(2/2)～』
で書きます。

< 連載講座:『PHP入門』・・・ 前へ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 次へ >

ＰＳ．
次回9月10日(土)のオープンキャンパスは、『PHPでプログラミング　～人工無能コタエモン～』です。

PHPプログラミングや、Ｗｅｂに興味がある方なら、初心者の方も大歓迎です。
良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

連載講座:『PHP入門』第１回　～プログラムって？～

2011年09月02日

こんにちは。
ＣＧ・Ｗｅｂクリエイター科の水谷です。

授業が始まりましたネ。しかも台風12号が来てます。
ＫＢＣ界隈にも暴風警報と波浪警報発令中！なので、ＫＢＣの学生たちには、帰宅指示が出ました。
どうであろうとも、「がんばっていきまっしょい！」

前回のブログで、
「…CG・Webクリエイター科は、デザインとプログラミングの両方を学びます。…」と書きました。
そこで、デザインの話や、プログラミングの話を、連載講座形式で書いてゆきます。

連載講座:『PHP入門』第１回　～プログラムって？～

今日から全１０回（予定）で始めます。
専門用語がたくさん出てきますが、その都度解説しますので、読んでみて下さい。
（今回は、Step1～Step4 でまとめてみました。）

Step1．インターネットの接続

図１．インターネットの接続図

「クライアント」というのは、インターネットを閲覧する私たちの方のことです。
インターネットには数億人?の閲覧者がいます。
私たちはパソコンで、インターネットエクスプローラ(IE)などのブラウザを利用して、
次々とページを観てゆきます。

「サーバ」というのは、私たちが閲覧するWebページ（コンテンツ）を配信している方のことです。
このWebサーバも、かなりあります。
図１ではそれぞれ１つしか描いていませんが、たくさんあると想像して下さい。

Step2．HTMLの構造

HTMLはHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略のことで、
Webページを作るための言語です。

図２．WebページをHTMLで記述

“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列を使って、Webページを記述します。

図３．Webページはハイパーテキスト

皆さんご存知の通り、Webページは読みたいページをクリックして表示します。
こういった構成をハイパーテキストといいます。
一方、書籍にはページが振ってあって、基本的には前から順に読んでゆきます。

このように、次のページを指定したり、文字の色や大きさを指定したり、画像を貼り付けたり・・・
こういうことを「タグ」で記述します。
なお、このタグはブラウザには表示されませんので、一般ユーザはHTMLの存在に気づきません。

このHTMLでwebページを作ってゆくなら、これで十分でしょうか？

Step3．プログラムの仕業

答えは、
(1) 特定の場所にマウスを乗せると、画像が切り換わる。
(2) 写真のスライドショー。
(3) プルダウン風のメニュー。
(4) アクセスカウンタのカウントアップ。
(5) データベースの利用。
などは、プログラミングをしなければ不可能です。

(5)のデータベースとは？
アマゾンや楽天などのページには、たくさんの商品が登録されています。
また、購入しようとすると、ユーザ登録が必要ですので、多くのユーザの個人情報を管理しています。
こういった情報や、画像などのデータをコンピュータで上手く管理する仕組みのことです。

上記(1)～(4)は、無いと地味だけど、我慢するなら無くても良いのかもしれません。
しかし、(5)のデータベースがなければ、アマゾンや楽天などのページを作ることができません。

今回はPHPのプログラムを動かしていませんが、次回の
連載講座:『PHP入門』第２回　～インストール(1/2)～
では、自宅のパソコンにテスト環境を構築して、簡単なプログラムを動かしてみましょう。

Step4．結論

プログラミングは必要です。現在、たくさんのプログラミング言語があります。
Java、JavaScript、Perl、PHP、・・・。
CG・Webクリエイター科では、JavaScriptとPHP を勉強します。

< 連載講座:『PHP入門』・・・ 前へ | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 次へ >

今度の9月10日(土)のオープンキャンパスは、『PHPでプログラミング　～人工無能コタエモン～』です。

Ｗｅｂに興味がある方なら、初心者の方も大歓迎です。
良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

ＰＳ．
難しい内容で疲れた～って？
肉食系で、「がんばっていきまっしょい！」

浄瑠璃寺の弁天池（2011年07月26日の記事参照）で、トンボが肉食系だった証拠写真を撮りました。

写真１．トンボがミツバチを・・・

夏休み最後の日

2011年08月31日

こんにちは。
ＣＧ・Ｗｅｂクリエイター科の水谷です。

夏休み最後の日を迎えました。皆さん、宿題は終わりましたか？
夏休みのお話は、今日の最後に回すことにして、

今日はオープンキャンパスのスケジュールをお知らせいたします。

＜＜＜平成２３年度下半期のCG・Webクリエイター科のオープンキャンパス＞＞＞

日程	模擬授業メニュー
9月3日(土)	『商品撮影体験してみよう～映像撮影編集～』
9月10日(土)	『PHPでプログラミング　～人工無能コタエモン～』
9月17日(土)	『魅せるホームページの作り方/スタイルシート』
9月24日(土)	『Webプログラミング講座　動く画面効果の仕組みを探る(JavaScript)』
10月8日(土)	『商品撮影体験してみよう～映像撮影編集～』
10月22日(土)	『PHPでプログラミング　PHPで動的Webアプリを作ります。』
10月29日(土)	『魅せるWebページの作り方/スタイルシート(ＣＳＳ)』
11月5日(土)	『商品撮影体験してみよう～映像撮影編集～』
11月19日(土)	『プログラミング入門講座 JavaScriptで動くホームページを作ろう』
12月10日(土)	『魅せるWebページの作り方～Photoshop/Illustrator～』
12月17日(土)	『商品撮影体験してみよう～映像撮影編集～』
1月15日(日)	『魅せるWebページの作り方～Photoshop/Illustrator～』
1月28日(土)	『商品撮影体験してみよう～映像撮影編集～』
2月11日(土)	『プログラミング入門講座 JavaScriptで動くホームページを作ろう』
2月19日(日)	『魅せるWebページの作り方/スタイルシート(ＣＳＳ)』
3月4日(日)	『商品撮影体験してみよう～映像撮影編集～』
3月17日(土)	『PHPでプログラミング　PHPで動的Webアプリを作ります。』

スケジュールなので、変更になることもあるかも知れませんが、上期はスケジュール通り実施できました。

CG・Webクリエイター科は、デザインとプログラミングの両方を学びます。
なので、メニューの中でも
　『商品撮影体験してみよう～映像撮影編集～』
　『魅せるWebページの作り方～Photoshop/Illustrator～』
　『魅せるWebページの作り方/スタイルシート(ＣＳＳ)』
のようなデザイン系の授業も行いますし、
　『PHPでプログラミング　～人工無能コタエモン～』
　『PHPでプログラミング　PHPで動的Webアプリを作ります。』
　『プログラミング入門講座 JavaScriptで動くホームページを作ろう』
のようなプログラミング系の授業も行います。

次回、9月3日(土)は、『商品撮影体験してみよう～映像撮影編集～』というメニューで、撮影をしてみましょう。
担当は佐伯先生です。デジタル一眼カメラを使って、商品を撮影して、パソコンで画像処理を行います。

デジイチデビューの方でも大丈夫です。
カメラは落っことしたら壊れますが、シャッターを押して壊れたりしませんから。

良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

ＰＳ．
今日は夏休み最後の日です。
昨日私の子供達も、やっと宿題を終えました。

絵日記の最後のページに、「夏休みで一番楽しかったことは？」という問に、

小学１年の息子は、「プラネタリウム」と書いてました。
（コミュニティセンターのコスモシアターです。）
星の解説ではなく、『ドラえもん「宇宙ふしぎ大探検」』が良かったのでしょう。

小学３年の娘は、「トライアスロンに出た」と書いてました。
（大洲の肱川で実施される「ジュニアトライアスロン」です。）
初のトライアスロン体験は印象深かったようです。

写真１．スイムスタート
小学３～６年生男女合わせて約50名ほどが一斉にスタートするので、手荒い洗礼を受けたようです。
結果は、小学３年生女子３名中３位。完走しただけ良かったと・・・。

私はというと、花火４回！見たことです。

写真２．『大洲川まつり花火大会』の肱北河原
お城のふもとに陣取ったので花火しか撮れてません。来年は背景に大洲城を入れて取れるよう場所を調べます。
この翌日の肱南河原も観ました。（写真はイマイチだったので、アップしません。）

写真３．『ながはま赤橋夏まつり』
なんといっても赤橋のライトアップが良かった。

写真４.『三津浜花火大会』
良い写真が無かったので、これは２年前に撮った写真です。人が多すぎて。

来年は、『宮島水中花火大会』に行くぞ～！って、もっと混雑しているだろうけど、
海面の上で炸裂している花火の手前に、嚴島神社の大鳥居のシルエットが入っている
（お決まりのパターンの）写真を撮りたいのです。

夏休み

2011年08月26日

こんにちは。
ＣＧ・Ｗｅｂクリエイター科の水谷です。

夏休みが残り少なくなりましたが、皆さんいかがお過ごしでしょうか？
私も夏休みをとりました。

夏休みと言えば、「海」と「山」と「宿題」・・・。
というわけで、写真をアップします。

写真１．双海で海水浴
４人写っていますが、私は二児のパパです。あとの２人は、いとこの子供達です。
１人は金沢から来たので、瀬戸内の波の穏やかさを気に入ってくれました。
もう１人は始めてゴーグルをつけたようで、水の中が良く見えて「すげ～！」の連発でした。

写真２．セミの羽化
実は今年は山に行けていません。近所の神社の境内で子供達が取ったセミの幼虫が羽化しました。
説明が無ければ、夜な夜な山に入り込んで、セミの羽化を撮ったように見えるかな？
最初は、「子供達がきたない虫を取ってきた。」って思ったのですが、羽化が始まり、みんな大騒ぎで観察しました。
生でみるのも、自分のカメラで撮るのもはじめてでした。
子供達には、「よくやった！明日も取っておいで。」と。

写真３．研修中
昨日、とある研修に参加しました。たくさん勉強をしました。
興味のあるテーマだし、仕事に役立つので有意義な研修でしたが、１日中座っているのが厳しく、
授業しているほうが楽でした。

夏休みも残り少なくなりました。明日は、『魅せるWebページの作り方』のテーマでオープンキャンパスを行います。
Photoshop と Illustrator を使って、Webページに使う写真を加工します。

Ｗｅｂに興味がある方なら、初心者の方も大歓迎です。
良かったら参加してみて下さい。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kawahara.ac.jp

ＰＳ．
以前のメールアドレスは変更になりました。
（新） e-mail:hello@kawahara.ac.jp
（旧） e-mail:hello@kbc-ehime.ac.jp

オープンキャンパスのご案内

2011年07月28日

こんにちは。
ＣＧ・Ｗｅｂクリエイター科の水谷です。

夏休みが始まりましたが、皆さんいかがお過ごしでしょうか？
まだオープンキャンパスに来ていない人は、早めにおこし下さい。

今回は、８月１日（月）に開催するオープンキャンパスのご案内です。
このイベントの中で、午後は、体験授業を行います。

今回の体験授業のタイトルは、

『かっこいいWebページを作ろう！　～見た目のいいWebページはスタイルシートで決まる～』

です。

少しだけ説明すると、ＷｅｂページはＨＴＭＬというコンピュータが理解できる言語で記述します。
（ＨＴＭＬとは、HyperText Markup Languageの頭文字をとったものです。）

このＨＴＭＬだけでも良かったのですが、見た目にこだわると、スタイルシートがあったほうが、完成度が高くなります。
そこでスタイルシートの標準技術であるＣＳＳも合わせて使います。
（ＣＳＳとは、Cascading Style Sheetsの頭文字をとったものです。）

初めての人には難しかったですか？これ以上難しいことは書きませんので、安心して続けて読んで下さい。

次の図を見て下さい。

図１　　　　　　　　　　　　　　　　　　　　　　　　　　図２

図１は、ＨＴＭＬだけでWebページを作りました。用件を伝えるだけならこんな感じでも十分です。
図２は、ＣＳＳ（スタイルシート）も合わせて作成しました。カテゴリーを表示している段を左にまとめました。

図３　　　　　　　　　　　　　　　　　　　　　　　　　　図４

図２以降は、ＨＴＭＬを変更せず、ＣＳＳだけの変更です。
図３は、カテゴリーを表示している段が右に変わりました。
図４は、2段組から３段組に変わりました。

図５　　　　　　　　　　　　　　　　　　　　　　　　　　図６

図５は、背景と文字の色を変えてみました。
図６は、背景に画像を貼り付けてみました。

上でも述べましたが、図１～図６のＨＴＭＬは、ＣＳＳを指定する１箇所以外、まったく同じです。
ＣＳＳを書き換えるだけで、Webページの印象がこんなに違ってきます。

どうですか？ＣＳＳってすごいでしょ？　ちょっとやってみませんか？
Ｗｅｂに興味がある方なら、初心者の方も大歓迎です。

参加してみようと思われた場合、次回のKBCオープンキャンパスから、予約を申し込んで下さい。
もちろんメールやお電話でも結構です。

学校法人河原学園　河原電子ビジネス専門学校　
〒790-0014 松山市柳井町3丁目3-31
TEL: 089-931-8555　FAX:089-931-8659
e-mail:hello@kbc-ehime.ac.jp

はじめまして。

2011年07月26日

こんにちは。
来年、ＣＧ・Ｗｅｂクリエイター科を担当する水谷です。

夏休みが始まりましたが、皆さんいかがお過ごしでしょうか？
まだオープンキャンパスに来ていない人は、早めにおこし下さい。

私は、この新設学科の準備をしつつ、カメラを担いで撮影にも出かけています。

２週間ほど前になりますが、四国八十八か所４６番札所「浄瑠璃寺（じょうるりじ）」にある弁天池の蓮(ハス)を撮影に出かけました。
今回は「蓮」ではなく、「ショウジョウトンボ」の写真をアップしました。

時間によっては、一匹もいませんが、時間によっては、たくさん集まってきます。
調べてみたところ、写真の赤いトンボはオスで、縄張り争いのために、激しく飛び回るとのことでした。