iPhone(iOS6以上)対応画像アップロードプログラムをPHPで書いた

2012年09月25日プログラミングTIPS

iOS6になったMy iPhone4。iOS6になってからは、内蔵のWebブラウザSafariにもいろいろ手が加えられました。Ajax通信の際、POST内容をキャッシュしたり、ポーリングに問題があったりしてページ読み込みが終わらなかったり、けっこうバグもあったりします。

バグは今後の修正に期待するとして、iOS6のSafariには嬉しいアップデートが一つありました。

それは、「HTML Media Capture」への対応です。これは何かというと、Safari内でカメラを起動してファイルアップロードができる機能です。

ということで、PHPでiPhone(iOS6以上)対応画像アップロードプログラムを書いてみました。iPhoneで撮った写真を簡単に自サーバーへとアップロードするプログラムです。画像の縮小にも対応しています。

動作イメージ

動作イメージはこんな感じです。

■iPhone対応画像アップローダートップページ
iPhoneだけでなく、Windows7のFirefox15やIEでもファイルアップロードできます（ただし、iPhoneと違って、その場では撮影することはできません）。

■画像ファイルの選択、リサイズ、パスワード機能付き
画像ファイルを選択します。サーバーにアップロードする際、自分の好きなサイズに縮小する機能も付いています。いたずらでアップロードされないよう、パスワード機能も付けています。

■その場で写真を撮ることも、iPhone内の画像を選択してアップロードすることも可能
iPhoneなら、その場で写真を撮ることができます。既存の画像を選ぶこともできます。JPEG画像でもPNG画像でもOKです。3G回線ではアップロード速度が遅いので、iPhoneのアプリで画像を縮小してからアップロードした方が、通信量の節約につながります。

■アップロード完了
アップロードが完了すると、サーバーに保存された画像へのリンクが表示されます。今までのアップロード画像一覧も閲覧できます。

■アップロードした画像のリスト表示
今までにアップロードした画像を自動的に表示します。簡易的なものなので、画像枚数が数百枚とかになる場合は、改良が必要です。

以上、動作イメージでした。今まではiPhoneで写真を撮ったり、スクリーンショットを撮ったりした場合、PCにUSBケーブルでiPhoneをつないで画像を取り込んで、画像を縮小してサーバーにアップロードして…という手順を取っていました。これからは、このプログラムを使って、外出先だろうとどこだろうと、じゃんじゃんサーバーへとアップロードできます。便利です。

このプログラムのPHPソースコードを、以下に載せておきます。

ソースコード

index.php（文字コードはUTF-8）

<?php
//PHPでやることはまだ特にない
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="width=480, user-scalable=yes">
<title>iPhone対応画像アップローダー</title>
</head>
<body>
<h1><a href="./">iPhone対応画像アップローダー</a></h1>
<p>iPhone対応画像アップローダーです。<br>
iOS6以上のOSがインストールされているSafariで動作します。<br>
下のフォームから画像を選んでアップロードするか、その場で撮影してファイルをアップロードしてください。<br>
（Windows7のFirefox15でも動作確認済みです）</p>
<hr>
<ul><li><a href="view.php">アップロードした画像リストはこちら</a></li></ul>
<hr>
<form action="post.php" enctype="multipart/form-data" method="post">
<strong>画像ファイル</strong><br><input type="file" name="photo" accept="image/*; capture=camera"><br>
<strong>横幅（0はリサイズしない）</strong><br><input type="text" name="resize" value="0"><br>
<strong>パスワード</strong><br><input type="password" name="pass" size="20" maxlength="32"><br>
<input type="submit" value="アップロード！">
</form>
<hr>
&copy; <a href="https://zapanet.info/">ZAPAnet総合情報局</a>
</body>
</html>

post.php（文字コードはUTF-8）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="width=480, user-scalable=yes">
<title>iPhone対応画像アップローダー</title>
</head>
<body>
<h1><a href="./">iPhone対応画像アップローダー</a></h1>
<?php

//画像アップロード用パスワード
$pass = "pass";
//画像保存場所（属性を書き込み可にしておくこと）
$dir = "images/";

//アップロードファイル確認
if(isset($_FILES["photo"])){
  //パスワード確認
  if(isset($_POST["pass"])){
    if($_POST["pass"] !== $pass ){
      echo "パスワードが違います。";
    }else{
      //アップロードファイル読み込み
      $data = $_FILES["photo"];
      //画像ファイルに名前を付ける
      $image_name = date('Y-m-d-His').'.jpg';
      //画像ファイルの保存場所
      $image_path = $dir.$image_name;
      //ファイルアップロードとエラーチェック
      if( move_uploaded_file( $data["tmp_name"], $image_path ) === TRUE){;
        //画像縮小チェック
        if($_POST['resize']>0){
          //画像読み込み（JPEG,PNG,GIFなどに対応）
          $image = imagecreatefromstring(file_get_contents($image_path));
          //画像サイズ取得
          $width = ImageSX($image);
          $height = ImageSY($image);
          //出力する縮小画像のサイズ
          $new_width = $_POST['resize'];
          $new_height = $new_width / $width * $height;
          //空の画像を作成
          $new_image = ImageCreateTrueColor($new_width, $new_height);
          //リサンプリングして画像を生成
          ImageCopyResampled($new_image,$image,0,0,0,0,$new_width,$new_height,$width,$height);
          //JPEG形式で保存
          ImageJPEG($new_image, $image_path, 95);
          //メモリ解放
          imagedestroy($image);
          imagedestroy($new_image);
        }
        echo "ファイルアップロード完了！<br>";
        echo "<a href='".$image_path."' alt=''>".$image_name."</a>";
      }else{
        echo "アップロードエラー。<br>ファイル保存場所やディレクトリ書き込み属性等を確認してみてください。";
      }
    }
  }else{
    echo "パスワードを入力してください。";
  }
}else{
  echo("画像ファイルを選択してください。");
}
?>
<ul><li><a href="view.php">アップロードした画像リストはこちら</a></li>
<li><a href="./">トップページに戻る</a></li></ul>
<hr>
&copy; <a href="https://zapanet.info/">ZAPAnet総合情報局</a>
</body>
</html>

view.php（文字コードはUTF-8）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="width=480, user-scalable=yes">
<title>iPhone対応画像アップローダー：画像リスト</title>
<style type="text/css">
<!--
#images{
  width:440px;
  clear:both;
}
#images ul{
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#images li{
  margin: 4px;
  padding: 0;
  float: left;
  list-style: none;
}
#images li img{
  width: 200px;
}
 -->
</style>
</head>
<body>
<h1><a href="./">iPhone対応画像アップローダー</a></h1>
<p>アップロードした画像のリストです。クリックすると、元サイズで表示されます。</p>
<div id="images">
<ul>
<?php
//画像ディレクトリ
$dir = 'images/';

//ディレクトリ内のファイルを新しい順に取り出す
$filelist=scandir($dir,1);

//表示する
foreach($filelist as $file){
  if(!is_dir($file)){
    echo '<li><a href="'.$dir.$file.'"><img src="'.$dir.$file.'" alt="'.$file.'" title="'.$file.'"></a></li>';
  }
}
?>
</ul>
</div>
<hr>
&copy; <a href="https://zapanet.info/">ZAPAnet総合情報局</a>
</body>
</html>

プログラム解説

index.phpは、画像アップロード用のトップページです。PHPの処理は今のところありません。横幅に0を入力すると、そのままのサイズで保存され、1以上の値を入力すると、その値のピクセル数に縮小されます。パスワードは、post.phpの方で設定します。いたずら防止のため、パスワードを入力しないとアップロードできないようにしています。

post.phpは、アップロードされた画像を受け取ってサーバーに保存するプログラムです（一応アップロード用パスワードを付けているため、細かいチェックは省いています。自分以外は使わない前提で書いています）。画像アップロード用パスワードと画像保存場所を設定します。画像を保存するディレクトリの属性は、書き込み可にしておきます（例えば777とか）。初期設定では、「images」というディレクトリに保存するようにしています。画像ファイルの名前はアップロード時刻から適当に名前を付けています。画像縮小が必要な場合は、PHPのimagecreatefromstring関数を使って画像を読み込み、縮小処理しています（JPEGやPNG画像に対応しています。PHPのGDライブラリが使えない場合は、縮小処理はできません）。保存は、ImageJPEG関数でJPEGファイルを出力して保存しています。クオリティは第三引数で設定できます。

view.phpは、アップロードした画像ファイルの一覧を表示するプログラムです。簡易的に作ってみました。scandir関数を使って毎回ディレクトリを調べて全て表示するため、枚数が増えた場合、負荷が高くなります。ページ分けしたり、キャッシュしたり、工夫が必要ですが、それよりもpost.phpの方でデータベースに情報を格納するなど、保存の方から見直した方が良いと思います。

以上、iPhone(iOS6以上)対応画像アップロードプログラムでした。適当に改良して使ってください。

←一つ前の記事へ

ZAPAブログ2.0