Flash Airが新しくなって、Luaというスクリプト言語で色々できるようになりました。
じゃぁということで、例えばカメラで写真を撮ってFlash Airに格納し、格納したファイルをLuaで、Microsoft AzureのWebアプリでHTTP RESTで受けてBlobにアップする方法を紹介します。
手順は、
- Microsoft Azureで画像蓄積用にBlobを作成
- Visual Studioで画像アップロード用のWEB APIプロジェクトを作成
- Microsoft AzureにWebサイトを作って、WEB APIプロジェクトを発行
- Luaスクリプトで画像アップロードプログラムを作成
- Microsoft Azure上のBlobの公開
です。
で、その前に、Azureを使うので、Azure Subscription契約が必要です。
から契約をお願いします。手順の詳細は、https://msdn.microsoft.com/ja-jp/windowsazure/ee943806 に書いてあるので、参考にしてください。
※一か月間205000円相当の無料枠があります。一か月の期限が近づくとメールが届きます。無料のサービスだけ使っている場合はお金は一切かからないので、メール、もしくは、ポータルから、ロックを外してください。手続きをしないと、アカウントはロックされて使えなくなりますので、ご注意。
それから、Visual Studio 2013が必要です。持っていない人は、http://www.visualstudio.comから、Community Ediitonをダウンロード＆インストールしてください。
Visua Studio 2013のインストールが済んだら、Azure SDKをインストールします。http://azure.microsoft.com/ja-jp/downloads/ を開いて、.NETのVS 2013のインストール（http://go.microsoft.com/fwlink/p/?linkid=323510&clcid=0x411）をクリックしてインストールしてください。
さて、では、早速作業を始めましょう。
1. Microsoft Azureで画像蓄積用のBlobを作成
先ず、http://manage.windowsazure.com をブラウザで開いて、サブスクリプション登録したマイクロソフトアカウントでサインし、ポータルを開きます。
左の水色のペインの”ストレージ”を選択して、左下黒帯の”+新規”をクリックします。表示された黒いペインで、”簡易作成”を選択、”URL”には適当な名前（サービスのEndpointのURLとして使われるので使用済みの文字列は使えません：ここでは仮に”photostorage"としておきますね）を入力、”場所”は、”日本（西）”を選択して、右下の”✓”ボタンをクリックします。しばらくたつと、ポータルの左側のペインの”ストレージ”を選択した時に、右側のリストに作成したストレージが表示されます。表示された"photostorage"をダブルクリックして、後で使う、アクセスキーを確認しておきます。
下の黒帯の”アクセスキーの管理”をクリックし、表示されたダイアログの”プライマリーアクセスキー”の値の右のアイコン（赤で括ったやつ）をクリックすると、クリップボードにアクセスキーがコピーされるので、後で”ストレージのアクセスキー”と言われたらこの操作をして使ってください。
ストレージアカウント： ストレージを作成した時につけた名前 - ここでは、”photostorage"
アクセスキー：直前で説明した方法で確認できる文字列
です。あとから出てくるので、念のため。
以上で、写真をクラウド上で格納するためのストレージが出来上がりました。Blobは、次のステップで作成するWeb APIアプリを実行すると自動的に出来上がります。
2. Visual Studioで画像アップロード用のWEB APIプロジェクトを作成
次に、写真をアップするためのサービスを作ります。
Visual Studio 2013 を起動して、メニューの”ファイル”→”新規作成”→”プロジェクト”を選択します。
表示されたダイアログで、”Visual C#"→”Cloud”を選択して、”ASP.NET WEBアプリケーション”を選択します。
名前は、”PhotoUpload”と入力して”OK"をクリックします。
テンプレートは”MVC”を選択します。その下の”Web API”にチェックを入れます。
”クラウド内のホスト”はチェックを外します。”OK"をクリックします。プロジェクトが作成されます。
次にAzure Storageにアクセスするためのライブラリをインストールします。
ソリューションエクスプローラーで、”参照設定”フォルダーを右クリックして”NuGetパッケージの管理”を選択します。
開いたダイアログで、左側で”オンライン”を選択、右上の検索窓に”Azure Storage SDK”と入力します。しばらくたつと中央に”Windows Azure Storage”と表示されるので、その右側の”インストール”をクリックして、ライセンスに同意してインストールを完了します。”Windows Azure Storage”の右側に緑色の”✓”が付いたら、右下の”閉じる”ボタンをクリックしてダイアログを閉じます。
次にプログラムから、Storageにアクセスするための設定をWeb.configに加えます。ソリューションエクスプローラーで”Web.config”をダブルクリックして、<appSetting>...</appSetting>に以下の太字で示した行を追加します。
<appSettings>
<add key="webpages:Version" value="3.0.0.0" />
<add key="webpages:Enabled" value="false" />
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=[photostorage];AccountKey=[access-key]"/>
</appSettings>
[photostorage]と[access-key]は、”[”、”]”もろともAzureのポータルで作成したStorageのストレージアカウント名と、アクセスキーで置き換えます。これらの設定は、次に追加するWeb APIのコントローラの中で参照します。
次に、ソリューションフォルダーで、”Controllers”フォルダーを右クリックして、”追加”→”コントローラー”を選択します。
表示された”スキャフォールディングの追加”ダイアログで、”Web API 2 コントローラー - 空”を選択し、”追加”をクリック、表示された”コントローラーの追加”ダイアログで”PhotoController”と入力し、”追加”をクリックします。
”Controllers”フォルダーに、”PhotoContoroller.cs"というファイルが出来上がります。
このフォルダーに出来上がっている、PhotoControllerクラスの定義を丸ごと以下のコードで置き換えます。
namespace PhotoUpload.Controllers
{
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
public class PhotoController : ApiController
{
public HttpResponseMessage Post([FromUri] string fileName)
{
var task = this.Request.Content.ReadAsStreamAsync();
task.Wait();
var reqStream = task.Result;
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("StorageConnectionString"));
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
CloudBlobContainer container = blobClient.GetContainerReference("photos");
container.CreateIfNotExists();
CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);
blockBlob.UploadFromStream(reqStream);
var response = new HttpResponseMessage();
response.StatusCode = HttpStatusCode.Created;
return response;
}
}
}
ここで追加したクラスのPostメソッドが、これから作成するAzure上のWeb サイトのエンドポイントURLに、/api/Photo?fileName=xxxx.jpg という形式の文字列を加えたHTTP REST APIのPOSTメソッドにマップされます。
3. Microsoft AzureにWebサイトを作って、WEB APIプロジェクトを発行
さて、写真をアップロードする仕掛けが出来たので、Azure上にWebサイトを作って、2で作成したプロジェクトを発行します。
Azureのポータル（http://manage.windowsazure.com を開いているブラウザ）で、早速Webサイトを作成します。
左側の水色のペインで”WEBアプリ”を選択し、左下の”＋新規”をクリックします。
”簡易作成”を選択し、”URL”に適切な文字列を入力します。ストレージアカウントと同様、こちらもネットワーク上で一意でなければならないので、適当に決めてください。ここでは、便宜上、”PhotoUpload”としておきます。
Webアプリが出来上がったら、WEBアプリのリストで、クリックして作成したWEBアプリのページを表示します。
”ダッシュボード”タブをクリックして、右下の”発行プロファイルのダウンロード”をクリックし、拡張子が、PublishSettingsファイルをダウンロードして保存します。これでAzure上の設定は終わり。
Visual Studioに戻ります。ソリューションエクスプローラーで、”PhotoUpload”プロジェクトを右クリックして、”発行”を選択します。
”発行の設定のインポート”ダイアログで、”参照”をクリックし、AzureのポータルからダウンロードしてきたpublishSettingsファイルを選択して”OK"をクリックします。最後に”発行”をクリックします。
Visual Studioでビルド、Azureへの発行が行われ、完了するとブラウザが開きます。
以上で、Azure側の準備は整いました。
HTTP REST APIは、
http://photoupload.azurewebsites.net/api/Photo?fileName=xxxx.jpg
という形式で、image/jpeg でバイナリデータをPOSTするとBlobに上がります。
4. Luaスクリプトで画像アップロードプログラムを作成
Flash Airは、Station Modeに設定してインターネット接続可能な状態に設定してください。
やり方は、https://www.flashair-developers.com/ja/ を参考に家てください。
先ずはPC上で、以下のテキスト（posturlのphotouploadの部分は各自のAzure WebサイトのURLに合わせて変更してください）を、http-azure-post-all.lua という名前で保存します。
boundary = "--Flashairboundary2015" -- アップロードするファイルが入っているフォルダ for filename in lfs.dir(folder) do b,c,h = fa.request{url = posturl .. "?filename="..filename, method = "POST", headers = {["Content-Length"] = tostring(blen),["Content-Type"] = contenttype}, |
FlashAirをPCのSDカードリーダーに挿して、このファイルをFlashAirのルートディレクトリにコピーします。
コピーが終わったら、デジカメに挿して写真を撮ります。
PCからFlashAirにWi-Fiで接続して、ブラウザで表示して、Luaをクリックすると実行してSDカードに入っている画像ファイルがAzureのBlobにアップされます。
FlashAirに関する設定詳細は、東芝から公開されているページを参照してください。
Microsoft Azure 上のBlobを公開する
カメラで写真を撮ったりして画像ファイルをアップロードすると、Blobに溜まっていきます。アップロードされた画像ファイルをネットワーク上でアクセスするには、Azureの管理ポータルで作成したストレージアカウントの”コンテナ”タブをクリックし、photosを選択して、下の黒帯の”編集”をクリックします。
”アクセス”を”パブリックBLOB”に選択して、右下の”✓”をクリックします。
これで、http://photostorage.blob.core.windows.net/photos/xxxxx.jpgというような形式でアクセスできるようになります。