Fly Away: 2011-06-19

2011年6月22日水曜日

RunRunRun

今日から毎日走ることに決めた嫁と俺。

往復で３キロぐらいを今日は走った。
体力つけるぞー！

CSS 基礎

CSS3を勉強する前にCSSの基礎。

書式とさまざまなセレクタ

◆基本書式

属性（プロパティ）
↓
h1 { color : #ff0000;}
↑　　　　　　　　↑
セレクタ　　　　値

◆セレクタ指定方法

-- 要素セレクタ --
　　h1 {・・・} h1要素

-- 子孫セレクタ --
　 div img {・・・} div要素の下の階層のimg要素

-- 属性セレクタ --
p[id] {・・・} id属性が指定されているp要素

p[id="test"] {・・・} id属性が"test"であるp要素

p.class_test {・・・} class属性が"class_test"であるp要素

-- idセレクタ --
#id_test {・・・} id属性がid_testである要素

-- クラスセレクタ --
.class_test {・・・} class属性がclass_testである要素

そのほか疑似クラスを使用する方法がある。

hover疑似クラス div:hover {・・・} div要素にマウスカーソルが置かれているときのプロパティ

などなど。

2011年6月21日火曜日

Rosetta Stone 来たー!!

今日、なけなしのボーナスをはたいて買ったRosettaStoneが来た！

買ったのはレベル１～５の英語のやつでいまだとボーナスキャンペーンで25%OFF。

RosettaStone　ボーナスキャンペーン

以下パッケージ内容

今日からRosetta人になれるよう、こつこつやっていこ。
７がつからはノー残だし＾＾；

2011年6月20日月曜日

PHPで写真共有サイト構築 -3 ファイルリスト表示

今回はアップロードされたファイル一覧を表示する。

一覧表示するまえの画面からは写真アップされたDir(photoDir)が
渡される。

ディレクトリ構成としては、

photoDir/images

/thumbs

以下ポイント。

サムネイル画像ディレクトリ内のファイルを検索して取得
ソート処理でファイル名をソート
サムネイル画像クリック時にimages画像を表示できるようにリンクをつける
cssのclear='left'で５枚ごとにサムネイルを改行

まず、1.のサムネイル画像ディレクトリのファイル検索方法。
PHPでディレクトリが存在するかどうかと読み込み可能かのチェックを行う。

それでOKならdir関数を使ってディレクトリクラスを取得する。

if (is_dir($thumbDir) and ($thumbDir != "/")) {
    if(is_readable($thumbDir)){// — ファイルが読み込み可能かどうか
      $ch_dir = dir($thumbDir); //ディレクトリクラス

つぎに2.のソート処理を行う。
あらかじめupload時に写真作成日時でファイル名を作成しているので、ソートすることで
時系列に一覧を表示できる。

ソート処理はarray関数で配列を作成し、そこにarray_push関数でファイル名を詰め込んだ後、
sort関数を呼び出せばOK。

// ソート処理
      $array_file = array();
      while (false !== ($file_name = $ch_dir -> read())){
        //ファイル名配列に順に入れていく
        array_push($array_file, $file_name);
      }
      sort($array_file);
      $ch_dir -> close();

後は4.ソートされたファイル名をもとにサムネイルを並べるとともに、
そこにリンクをはる。

またその際に、5.cssのclear='left'でサムネイル画像の回り込みを解除することで
改行するようにする。今回は５つ画像を表示すればが改行する。

//ディレクトリ内の画像を一覧表示
      foreach ($array_file as $key => $val) {
        $file_name = $val;
        $thumb_path = $thumbDir .$file_name;
        $image_path = $imageDir .$file_name;
        if (@getimagesize($thumb_path)){ //画像かどうか？
          echo "";
          echo "";
          echo "";
          echo "";
          echo "";
          $cnt++;
        }
        if ($cnt>=5) {
           echo "
";
           $cnt = 0;
        }
      }