ラベル tips の投稿を表示しています。 すべての投稿を表示
ラベル tips の投稿を表示しています。 すべての投稿を表示

2011年6月9日木曜日

PHPで写真共有サイト構築 -2 実際のアップロード処理

今回は実際のアップロード処理について。

前回までにPHPのアップロード処理を呼ぶまでの前処理について説明。

http://kenzy-goldentime.blogspot.com/2011/06/php-2lastmodifieddate.html

今回のポイント

  1. アップロード先、ファイル数、ファイル名をパラメータで受け取る
  2. $_FILES属性でアップロード元情報とアップロード先情報を取得
  3. 写真が横長か縦長かを判定し、見える方向で画像を登録
  4. image用とthumbnail用の画像を作成
です。
まず1.のPHPとして受信した情報の取得について。
以下コード
  $photoDir = $_POST["photoDir"];
PHPでPOSTのパラメータを取得するには、$_POST["パラメータ名"]で取得可能。


次に2.の$_FILESについて。
変数「$_FILE」には、アップロードされたファイル情報が連想配列で格納されるらしい。
http://www.php-ref.com/web/03_move_uploaded_file.html
で、とりあえず今回使用する$_FILES属性は

  • $_FILE[ パラメータ名 ][ tmp_name ] →アップロード前の一時保存パス
  • $_FILE[ パラメータ名 ][ name] →アップロードファイル名
まずは上記のパラメータからtmp_nameから実際にそのファイルがあるかを判定。以下ソース
if (is_uploaded_file($tmpName)) {
次に3.getimagesizeを使用してサイズを取得し、横長か縦長かを判定。
$Jsize=getimagesize("$tmpName"); //画像サイズ取得

    // 横長写真
    if ($Jsize[0] > $Jsize[1]) {
      $Jthumsize = $Jsize[0];
      $SizeWidth = true;
    // 縦長写真
    } else {
      $Jthumsize = $Jsize[1];
      $SizeWidth = false;
    }
最後に4.image用とthumbnail用に画像を圧縮。
以下ソース。
function imageComplex($pixel, $Jsize, $Jthumsize, $SizeWidth, $motoFile, $complexFile){
  if($Jthumsize >= $pixel + 1){ //121ピクセル以上なら
    if ($SizeWidth) {
      $Jwidth = $pixel; //横120ピクセル
      $Jheight = $Jsize[1] * $pixel / $Jsize[0]; //縦サイズを計算
    } else {
      $Jwidth = $Jsize[0] * $pixel / $Jsize[1]; //横サイズを計算
      $Jheight = $pixel; //縦120ピクセル
    }
    $imagein=imagecreatefromjpeg("$motoFile"); //画像を縮小する
    $imageout=imagecreatetruecolor($Jwidth,$Jheight); //サイズ変更(GD2使用)
    imagecopyresampled($imageout,$imagein,0,0,0,0,$Jwidth,$Jheight,$Jsize[0],$Jsize[1]);
    imagejpeg($imageout,("$complexFile")); //サムネイル書き出し
    imagedestroy($imagein); //メモリを解放する
    imagedestroy($imageout); //メモリを解放する
  }
    else {//画像の横幅がもともと120ピクセル以下の場合は [thumbs] ディレクトリにコピーします。
    copy("$motoFile","$complexFile"); //ファイルコピー
  }
}
以下1~3のコード
if (is_uploaded_file($tmpName)) {
  $image =  $imageDir . $fileName;
  $thumb =  $thumbDir . $fileName;
    $Jsize=getimagesize("$tmpName"); //画像サイズ取得

    // 横長写真
    if ($Jsize[0] > $Jsize[1]) {
      $Jthumsize = $Jsize[0];
      $SizeWidth = true;
    // 縦長写真
    } else {
      $Jthumsize = $Jsize[1];
      $SizeWidth = false;
    }

    // image圧縮
    imageComplex(1600, $Jsize, $Jthumsize, $SizeWidth, $tmpName, $image);

    // thumb圧縮
    imageComplex(120, $Jsize, $Jthumsize, $SizeWidth, $tmpName, $thumb);


    chmod($image, 0644);
    echo $fileName . "をアップロードしました。";

} else {
  echo "ファイルが選択されていません。";
}
とまー、PHPで書くとスクリプト言語でデバッグしやすいかな。
ただ統一感をだすにはCAKEとかのフレームワークつかっていいかも。

2011年6月5日日曜日

PHPで写真共有サイト構築 -1 ファイルアップロード前準備 ファイル選択やらlastModifiedDateやら

では今回は実際に今回作成した写真アップロード処理だー。

<機能>
  • アップするフォルダを選択可能
  • 複数ファイルを選択可能
  • サムネイル一覧を表示可能
  • サムネイル一覧から複数選択でダウンロード可能
  • サムネイル選択後、実サイズの写真表示時に次ボタン、前ボタンでサムネイル一覧の前後の写真を表示
上記機能を実現するにあたり以下の機能も必要
  • アップ時にサムネイル用画像作成
  • 実ファイルも一定サイズを超えるとサーバに負荷がかかるため、一定サイズで圧縮
  • アップするファイル名は写真撮影時の情報でソートできるように撮影時の時間でリネイムする
ではまずは今回はファイルのアップロードを作成するに必要な処理を説明。


ファイルをアップロードするには当然ユーザに

  1. ローカルファイルを選択させ
  2. 送信ボタンを押下
させる必要あり。でユーザが2送信ボタンを押下したところで、htmlのformをつかってphpのファイルアップロード処理を呼び出す。

今回2を送信する前にやるべきことについて。
ポイントは、
  1. ファイル選択させる方法として、HTML5から可能になった複数ファイル選択させる
  2. ファイル選択した際にファイル属性からファイル作成日を取得しておく
1はHTML5の機能なので簡単。以下参照。
2はJavascriptのlastModifiedDateで取得可能
以下ソース。
function setFileCnt(form){
  var files = document.getElementById("selectFile").files;
  var fileCnt = form.fileCnt;
  var h = "";
  var n = "";
  var fName = "";
  var fileLen = files.length;
  for (var i = 0; i < fileLen; i++) {
    var file = files[i];

    // 最終更新日を取得
    var modifileDate = file.lastModifiedDate;
    var date = new Date(Date.parse(modifileDate));
    var yy = date.getYear();
    var MM = date.getMonth() + 1;
    var dd = date.getDate();
    var hh = date.getHours();
    var mm = date.getMinutes();
    var ss = date.getSeconds();
    if (yy < 2000) { yy += 1900; }
    if (MM < 10) { MM = "0" + MM; }
    if (dd < 10) { dd = "0" + dd; }
    if (hh < 10) { hh = "0" + hh; }
    if (mm < 10) { mm = "0" + mm; }
    if (ss < 10) { ss = "0" + ss; }
    fName += yy + MM + dd + "_" + hh + mm + ss + "";
    fName += ":";
    form.filesName.value = fName;
  }    
}
ポイントはファイルfile属性のlastModifiedDateで取得したデータをnew DateでData型にしてから日付を編集すること。以下が実際にできるファイル名。

  元ファイル名:IMG_2186.JPG
  作成日:2011/05/21 09:16 40秒
  作成されるファイル名:20110521_091640_IMG_2186.JPG

どす。これでファイルアップロードした先でもソート楽ちん!!

2011年6月3日金曜日

PHP 入門 -1

ひょんなことからApatchサーバに写真共有サイトを作ることになったわたくし。

JavaやJavaScript、Rubyは何となく使っていたけど、それらを使えないサーバにどうやって作ろうかあれこれ考えた結果、PHPが使えることが分かったため、ついにPHPを使うことになりました!

ということで、写真共有サイトを作るにあたって学んだことをまとめます。


でまずやったことはPHPの基礎を学ぶこと。
以下サイトを参考にさせていただきました。

http://www.scollabo.com/banban/php/index.html


<学んだこと>
  • 拡張子はphp
  • <?php ~ ?>でソースは囲む
  • 変数の宣言使用はすべて「$」を頭につける 例 $name = "kenzy";
  • 文字列連結はドット「.」を使う
  • booleanやstringの変数が使える
  • 条件文もCチックに使える
一番簡単なコード

<?php echo "こんにちは";
?>

とまあ、こんな感じで簡単に使用できる。


<PHPのいいところ>
    • なんといってもスクリプトなのでコンパイル不要!
    • 文法もJavascript等のスクリプトをやっていたらすぐ理解できる
    • それいでいてサーバサイドの処理が書けてしまう

    人気者なわけですは。
    次回はファイルアップロードについて記載しやす。

    2010年12月1日水曜日

    FreeMindをWebで公開する方法

    以下のサイトを参照。

    http://r-o-y.info/mt/job/2008/04/freemindweb.html

    表示された画面では枝を閉じたりできるので、すごくよい!

    ただレンタルサーバ(JavaScript認識可)ではうまく表示できたけど、
    bloggerではうまく表示されなかった。JavaScriptを認識しないのかな!?



    2010年11月30日火曜日

    bloggerにsyntaxhighlighterでソースコード貼り付け

    ソースコードをブログに表示するには、syntaxhighlighterが使いやすい。
    ただしファイルbloggerの場合はjsファイル等をアップするところがないので、
    別途ファイルをアップしてアクセスできる場所が必要!!

    自分の場合は、フリーのWebサイトがあるのでそこにFTPでファイルをあげて使ってます。

    以下、方法

    ①以下サイトの下部にある2.oをクリックし、右のdownloadからファイルをダウンロード。

    ②解凍したstylesとscriptsのフォルダごと任意のサーバにアップ

    ③bloggerにログインし、デザインページで「HTML編集」表示

    ④html形式で表示されるので、以下の内容を追記(自分はheadタグの一番最後に追加しました)

    <link href="http://www.xxx/styles/shCore.css" rel="stylesheet" type="text/css">
    <link href="http://www.xxx/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
    <script src="http://www.xxx/scripts/shCore.js" type="text/javascript">
    <script src="http://www.xxx/scripts/shAutoloader.js" type="text/javascript"/>
    <script src="http://www.xxx/scripts/shBrushJScript.js" type="text/javascript"/>
    <script src="http://www.xxx/scripts/shBrushCss.js" type="'text/javascript"/>
    <script src="http://www.xxx/scripts/shBrushXml.js" type="text/javascript"/>
    <script src="http://www.xxx/scripts/shBrushJava.js" type="text/javascript"/>
    <script language="javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>

    ⑤テンプレートを保存

    ⑥実際の投稿文書で「HTMLの編集」を押下し、ソースコードを貼り付け。
    その際<pre class="brush:java"></pre>でソースをはさむ。
    ※xmlの場合は”brush:xml"とかに変更。

    <pre class="brush:java">
    public static void main(args[]){
    System.out.println("hoge");
    }
    </pre>

    ⑦保存
    以下、実際の表示
    public static void main(args[]){
    System.out.println("hoge");
    }

    【スマート農業】 いまさらだけど、いまだからこその農業IoT 

    久々投稿 転職してはや2年半。バタバタしてる中で、あーっという間に時間は過ぎてきた。 仕事はそれなりに順調だけど、ただやっぱり自分で何かを起こす!ということはではできていなく、、、年齢45をこえ、、、、、とくに昔からずーとやろうやろうと言って実現できてなかっった農業IoT。。 去...