アプリケーションへのファイルアップロード機能の追加

次の手順は、サーバーにイメージファイルをアップロードできるアプリケーションの構築方法を説明したものです。このアプリケーションを使用すると、ハードディスク上でイメージを選択し、それをアップロードして、サーバーに送ることができます。アップロードしたイメージは、アップロードに使用した SWF ファイルに表示されます。

Flash アプリケーションを構築する例に続いては、サーバーサイドコードの詳細を説明する例を取り上げます。イメージファイルには、最大で 200K というサイズ制限があることに注意してください。

FileReference API を使用して FLA アプリケーションを構築するには :

新しい Flash ドキュメントを作成し、fileref.fla という名前を付けて保存します。

[コンポーネント] パネルを開いて、ScrollPane コンポーネントをステージ上にドラッグし、imagePane というインスタンス名を付けます。ScrollPane インスタンスは、この後のステップで ActionScript を使用してサイズ設定および位置変更を行います。

Button コンポーネントをステージまでドラッグし、uploadBtn というインスタンス名を付けます。

Label コンポーネント 2 個をステージまでドラッグし、imageLbl および statusLbl というインスタンス名を付けます。

ComboBox コンポーネントをステージまでドラッグし、imagesCb というインスタンス名を付けます。

TextArea コンポーネントをステージまでドラッグし、statusArea というインスタンス名を付けます。

ステージ上に新しいムービークリップシンボルを作成し、そのシンボルを開いて編集を行います (インスタンスをダブルクリックするとシンボル編集モードになります)。

ムービークリップ内に新しい静止テキストフィールドを作成し、次のテキストを追加します。

ダウンロードしようとしたファイルはサーバーにありません。

完成したアプリケーションでは、この警告は特に次の理由によって表示されることがあります。

他のイメージがアップロードされたため、そのイメージはサーバーのキューから削除されました。
ファイルサイズが 200K を超えているため、そのイメージはコピーできません。

ファイルの種類が有効な JPEG、GIF、または PNG ではありません。

メモ

テキストフィールドの幅は ScrollPane インスタンスの幅 (400 ピクセル) よりも小さくなければならず、これを超えた場合、エラーメッセージを確認するには画面を縦にスクロールする必要があります。

[ライブラリ] パネルでシンボルを右クリックし、コンテキストメニューから [リンケージ] を選択します。

[ActionScript に書き出し] チェックボックスと [最初のフレームに書き出し] チェックボックスを選択し、[識別子] テキストボックスに「Message」と入力します。[OK] をクリックします。

タイムラインのフレーム 1 に次の ActionScript を追加します。

メモ

コードコンテンツには、この機能に関する詳細が含まれています。コードの概要はこの例に準拠しています。

import flash.net.FileReference;

imagePane.setSize(400, 350);
imagePane.move(75, 25);
uploadBtn.move(75, 390);
uploadBtn.label = "Upload Image";
imageLbl.move(75, 430);
imageLbl.text = "Select Image";
statusLbl.move(210, 390);
statusLbl.text = "Status";
imagesCb.move(75, 450);
statusArea.setSize(250, 100);
statusArea.move(210, 410);

/* リスナーオブジェクトは FileReference イベントを受け取る。 */
var listener:Object = new Object();

/* ユーザーがファイルを選択すると、onSelect() メソッドが呼び出され、FileReference オブジェクトに渡される。 */
listener.onSelect = function(selectedFile:FileReference):Void {
    /* TextArea をアップロードして、Flash がイメージをアップロードしようとしていることをユーザーに通知する。 */
    statusArea.text += "Attempting to upload " + selectedFile.name + "\n";
    /* ファイルをサーバーの PHP スクリプトにアップロードする。 */
    selectedFile.upload("http://www.helpexamples.com/flash/file_io/uploadFile.php");
};

/* ファイルのアップロードが開始されると、onOpen() メソッドが呼び出され、ファイルのアップロードが開始されたことがユーザーに通知される。 */
listener.onOpen = function(selectedFile:FileReference):Void {
    statusArea.text += "Opening " + selectedFile.name + "\n";
};

/* ファイルアップロードが終了すると、onComplete() メソッドが呼び出される。 */
listener.onComplete = function(selectedFile:FileReference):Void {
    /* Flash がイメージのアップロードを開始したことをユーザーに通知する。 */
    statusArea.text += "Downloading " + selectedFile.name + " to player\n";
    /* ComboBox コンポーネントにイメージを追加する。 */
    imagesCb.addItem(selectedFile.name);
    /* ComboBox の選択したインデックスを最後に追加したイメージのインデックスに設定する。 */
    imagesCb.selectedIndex = imagesCb.length - 1;
    /* カスタム関数 downloadImage() を呼び出す。 */
    downloadImage();
};

var imageFile:FileReference = new FileReference();
imageFile.addListener(listener);

imagePane.addEventListener("complete", imageDownloaded);
imagesCb.addEventListener("change", downloadImage);
uploadBtn.addEventListener("click", uploadImage);

/* イメージのダウンロードが行われない場合、イベントオブジェクトのトータルプロパティは -1 に等しくなる。この場合、ユーザーにメッセージを表示する。 */
function imageDownloaded(event:Object):Void {
    if (event.total == -1) {
        imagePane.contentPath = "Message";
    }
}

/* ユーザーが ComboBox からイメージを選択するか、downloadImage() 関数が listener.onComplete() メソッドにより直接呼び出された場合、イメージのダウンロードを開始するために、ScrollPane の contentPath が設定される。 */
function downloadImage(event:Object):Void {
    imagePane.contentPath = "http://www.helpexamples.com/flash/file_io/images/" + imagesCb.value;
}

/* ユーザーがボタンをクリックすると、uploadImage() 関数が呼び出され、[ファイルブラウザ] ダイアログボックスが開く。 */
function uploadImage(event:Object):Void {
    imageFile.browse([{description: "Image Files", extension: "*.jpg;*.gif;*.png"}]);
}

この ActionScript コードにより、最初に FileReference クラスが読み込まれ、ステージ上で各コンポーネントの初期化、配置、およびサイズ変更が実行されます。次に、リスナーオブジェクトが 1 つと、onSelect、onOpen、および onComplete という 3 つのイベントハンドラが定義されます。さらに、リスナーオブジェクトは、imageFile という新しい FileReference オブジェクトに追加されます。次に、イベントリスナーが、imagePane ScrollPane インスタンス、imagesCb ComboBox インスタンス、および uploadBtn Button インスタンスに追加されます。各イベントリスナー関数は、このコードセクションを順守するコードに定義されます。

最初の関数 imageDownloaded() は、ダウンロードしたイメージの合計バイト数が -1 かどうかをチェックし、-1 である場合、ScrollPane インスタンスの contentPath を、前のステップで作成したメッセージのリンケージ識別子を持つムービークリップに設定します。2 番目の関数 downloadImage() は、アップロードされた最新のイメージを ScrollPane インスタンスにダウンロードするためのものです。イメージのダウンロードが終了すると、あらかじめ定義してあった imageDownloaded() 関数がトリガされ、イメージが正常にダウンロードされたかどうかのチェックが実行されます。最後の関数 uploadImage() は、すべての JPEG、GIF、および PNG イメージをフィルタリングするファイルブラウザダイアログボックスを開きます。

ドキュメントの変更を保存します。

[ファイル]-[パブリッシュ] を選択し、次に [形式] タブを選択し、Flash と HTML が共に選択されていることを確認します。

(オプション) [パブリッシュ設定] ダイアログボックスで [Flash] タブを選択し、次に [ローカルでの再生に関するセキュリティ] ポップアップメニューから [ネットワークにのみアクセスする] を選択します。

このステップが完了すると、ローカルブラウザでドキュメントをテストしても、セキュリティ制限に違反することはなくなります。

[パブリッシュ設定] ダイアログボックスで、[パブリッシュ] をクリックして HTML ファイルと SWF ファイルを作成します。

作成が完了したら次の手順に進み、SWF ファイル用のコンテナを作成します。

この例のサンプルソースファイルである "FileUpload.fla" については、Flash サンプルページ (www.adobe.com/go/learn_fl_samples_jp) を参照してください。"Samples" zip ファイルをダウンロードして、"ActionScript2.0/FileUpload" フォルダに移動してサンプルにアクセスします。

次の手順では、Web サーバーに PHP をインストールし、"images" と "temporary" という名前のサブフォルダへの書き込み許可を得ていることが必要です。最初に、前の手順を完了するか、前述のフォルダにある完成した SWF ファイルを使用します。

イメージアップロードアプリケーションのサーバーサイドスクリプトを作成するには :

Dreamweaver や Notepad などのテキストエディタを使用して、新しい PHP ドキュメントを作成します。

ドキュメントに次の PHP コードを追加します。コードの概要はこのスクリプトに準拠しています。

<?php

$MAXIMUM_FILESIZE = 1024 * 200; // 200KB
$MAXIMUM_FILE_COUNT = 10; // サーバー上のファイル数を最大 10 にする
echo exif_imagetype($_FILES['Filedata']);
if ($_FILES['Filedata']['size'] <= $MAXIMUM_FILESIZE) {
  move_uploaded_file($_FILES['Filedata']['tmp_name'], "./temporary/".$_FILES['Filedata']['name']);
  $type = exif_imagetype("./temporary/".$_FILES['Filedata']['name']);
  if ($type == 1 || $type == 2 || $type == 3) {
    rename("./temporary/".$_FILES['Filedata']['name'], "./images/".$_FILES['Filedata']['name']);
  } else {
    unlink("./temporary/".$_FILES['Filedata']['name']);
  }
}
$directory = opendir('./images/');
$files = array();
while ($file = readdir($directory)) {
  array_push($files, array('./images/'.$file, filectime('./images/'.$file)));
}
usort($files, sorter);
if (count($files) > $MAXIMUM_FILE_COUNT) {
  $files_to_delete = array_splice($files, 0, count($files) - $MAXIMUM_FILE_COUNT);
  for ($i = 0; $i < count($files_to_delete); $i++) {
    unlink($files_to_delete[$i][0]);
  }
}
print_r($files);
closedir($directory);

function sorter($a, $b) {
  if ($a[1] == $b[1]) {
    return 0;
  } else {
    return ($a[1] < $b[1]) ? -1 : 1;
  }
}
?>

この PHP コードにより、最初に $MAXIMUM_FILESIZE と $MAXIMUM_FILE_COUNT という 2 つの定数変数が定義されます。これらの変数は、サーバーにアップロードされるイメージの最大サイズ (200KB) のほか、"images" フォルダに保存する最新のアップロードファイルの件数 (10) を決定します。最新のアップロードファイルのサイズが $MAXIMUM_FILESIZE の値以下である場合、そのイメージは "temporary" フォルダに移されます。

次に、アップロードファイルのタイプがチェックされ、イメージが JPEG、GIF、または PNG であることの確認が行われます。互換性のあるイメージタイプである場合、そのイメージは "temporary" フォルダから "images" フォルダにコピーされます。イメージタイプが認められていないものである場合、そのイメージはファイルシステムから削除されます。

次に、"images" フォルダのディレクトリ一覧が作成され、while ループによってループ処理が行われます。"images" フォルダの各ファイルは配列に追加され、ソートされます。現在、"images" フォルダにあるファイルの数が $MAXIMUM_FILE_COUNT 値を超えている場合、この値と同じになるまでファイルが削除されます。こうすることで、最大ファイル数が 10 で、各イメージのサイズが 200KB 以下 (したがって、イメージの総バイト数は約 2MB) と定められている "images" フォルダが管理不能になるまで大きくなるのを防止することができます。

PHP ドキュメントの変更を保存します。

Web サーバーに、SWF、HTML、および PHP ファイルをアップロードします。

リモート HTML ドキュメントを Web ブラウザに表示し、SWF ファイルの [イメージをアップロード] ボタンをクリックします。

ハードディスクにイメージファイルを配置し、ダイアログボックスで [開く] を選択します。

イメージファイルがリモート PHP ドキュメントにアップロードされ、ScrollPane に表示されます (必要に応じて、スクロールバーが追加されます)。既にアップロードしてあるイメージを表示する場合は、ステージの ComboBox インスタンスから [ファイル名] を選択します。認められていないタイプ (認められているのは JPEG、GIF、PNG の 3 種類のみ) のイメージをアップロードしようとした場合や、ファイルサイズが大きすぎる (200KB を超える) 場合、[ライブラリ] の [メッセージ] ムービークリップからエラーメッセージが発信されます。

PHP の記述の詳細については、www.php.net/ を参照してください。

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00001054.html