Fly Away

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;
        }
      }

これで一覧表示は完了！！

2011年6月19日日曜日

サプライズ

朝起きると嫁から父の日プレゼント。

毎回脅かされますなー。

幼稚園　下の子　授業参観

今日は幼稚園の授業参観。
先週は上の子の学校訪問があっての立て続け。

まわりのお父さんに聞いても同じ時期にあるみたいで、今はそういうシーズンらしい。

授業が始まるまでの粘土遊び。

お祈り。姿勢よし！

授業はお外での体操授業。

みんな先生の話をよく言い聞いて非常にお利口でした。

ちーなーみーに、最後は父の日ということでストラップもらいました。
さっそく装着！

がんばって授業を一生懸命受けている子に感動ー。

2011年6月18日土曜日

jQuery ajaxでXMLとかJSONとかJSONPとか取得　- 2

今回はJSONPの取得。

JSONP…scriptタグを使用してクロスドメインなデータを取得する仕組み。

通常ブラウザなどに実装されている「同一生成元ポリシー（SOP）」という制約により、 Webページは自分で生成したドメイン以外のドメインのサーバと通信することはできない。

じゃどうするか、というとサーバ側ではまず

読み込ませたいJSONデータを任意の関数の引数として定義
そのデータをxxx.jsonpみないにファイルに保存

を行う。
一方の呼び出し側では

javascriptタグのsrcにxxx.jsonpを指定
サーバ側の任意の関数を定義

する。

そうすることで呼び出し側からは、SOPの制約に引っかかることなくデータを取得できるようになる。

ではこれをjQueryをつかったら～、ということで以下ソースなど。

読み込まれるデータ

cb({"familylist":[
  {
  "name":"磯野",
  "father":"波平",
  "children":[
    "child":"サザエ",
    "child":"カツオ",
    "child":"ワカメ"
    ]
  },
  {
  "name":"さくら",
  "father":"ヒロシ",
  "children":[
    "child":"さきこ",
    "child":"ももこ"
    ]
  }
]})

jQueryでの読み込み処理

// ロード時に呼び
$(window).load(function(){
  $.ajax({
    type: "GET",         // HTTP通信 GET/POST
    url: "http://xxxxx/familylist.jsonp?callback=cb",   // リクエストURL
    dataType: "jsonp",    // データ型 xml/json/jsonp/script/text
    jsonp: "cb"  // コールバック関数
  });
});

// コールバック関数
function cb(json){

  // ループ処理 Family要素でループ
  for( i = 0; i < json.familylist.length; i++ ) {

    $("#familyList").append(json.familylist[i].name);
    $("#familyList").append("父:" + json.familylist[i].father);

    // 子供でループ
    for( j = 0; j < json.familylist[i].children.length; j++ ){

      $("#familyList").append("子:" + json.familylist[i].children[j].child + "
");
    }

  }
}


// 以下に書き込まれる

以上でOK！！

これでJSONP用にデータを提供したいときの定義方法もわかった。
それと何よりjQueryを使用するとチョー簡単にリクエストが作れるってことが
改めてわかった。当分はこれ使えそう。

以上

登録: 投稿 (Atom)