今回取り上げる関数/クラス

  • flash.net.sendToURL
  • flash.net.navigateToURL
  • flash.net.URLLoader

本記事中のサンプルを表示するには最新のFlashPlayer9が必要です(本稿執筆時点では【9,0,28,0】が最新)。こちらから最新のFlashPlayer9をインストールしてください。また,インストール後はブラウザの再起動が必要です。インストールされているFlash Playerのバージョンを確認するにはこちら

 今回と次回にかけてブラウザ内で動作するFlexアプリケーションとサーバー・アプリケーションとを連携させるためのAPIをいくつか紹介します。これらはWebアプリケーションを開発するうえで非常に重要な機能ですので,ぜひともご自分の環境でもお試しください。

 今回はflash.net パッケージの関数である【sendToURL】関数,【navigateToURL】関数と【URLLoader】クラスを紹介します。次回はFlex固有のmx.rpc パッケージのクラスを紹介したいと思います。

 Flex/Flashとサーバー連携させるWebアプリケーションを開発するうえで良く発生する問題が「サーバーとうまく連携できない」です。「なぜ,うまく連携できないのか?」がわかるようになるまでにはそれなりの経験と知識が必要になります。「何か良くわからないけど,サーバーと連携できている」といった状態で開発を進めていくと問題が発生した時にはてんやわんやです。

 「うまくサーバーと連携できて当たり前なのに!」「納期まぢか!!」と冷静さを欠いた状態では本来できることもできなくなってしまいます。なので,プロジェクトチームに少なくとも一人はFlex/Flashが通信する仕組みを知っているエンジニアがいるほうが良いと思います。ただ,なかなかそうもいかないという場合は少なくとも原因調査のための手順をマニュアル化しておいたほうが良いと思われます。原因調査の手段はいろいろですが,Firefoxの便利なアドオンがあるので本文末のコラムで紹介いたします。

【sendToURL】関数

 sendToURL(*1)は非常にシンプルな関数です。シンプル過ぎて使い道に困るぐらいです。機能としてはサーバーにHTTP/HTTPSリクエストを送信します。GETメソッド,POSTメソッドの両方を使用することができます。ただし,HTTPレスポンスは無視されます。つまり,リクエストを投げるだけで「後は知りません」という関数です。「KeepAlive」的な用途で使用できるかもしれません。

 サンプルを確認するときは本文末のコラムで紹介するFireFoxのアドオンを使用すると動作を確認することができます。

 では,実際にサンプルを見てみましょう(図1)。

図1:【sendToURL】サンプル(クリックすると別ウィンドウで動作します。ソースはこちら

 上から順に 1-1.GETメソッドのリクエストを実行 1-2.URL変数を付加してGETメソッドのリクエストを実行 1-3.POSTメソッドのデータ無しリクエストを実行 1-4.POSTメソッドのデータ有りリクエストを実行 1-5.GETメソッドで存在しないURLに対してリクエストを実行 となります。

 1-1 から 1-5 を通じてsendToURL関数では特に何もしていません。単純に関数を実行することによってHTTPリクエストを実行しているだけです。このHTTPリクエストの内容を決めているのがflash.net.URLRequest クラス(*2)です。

 リクエスト先のURLを指定するにはURLRequest.urlにリクエスト先のURLの相対パス,もしくは,絶対パスを文字列で指定します。

 リクエストのメソッドを指定するにはURLRequest.methodに「GET」,もしくは「POST」を設定します。文字列で直接指定してもかまいませんし,flash.net.URLRequestMethod クラスに用意されている定数を使用してもかまいません。

 サーバーにデータを渡す方法に関してはHTMLでもおなじみの「target.cfm?FirstName=Shigeru&LastName=Nakagaki」のようにURLにデータを付加する方法(ケース1)とHTTPリクエストのPOSTメソッドを使用してデータをサーバーに送信する方法(ケース2)があります。

 サンプルのソースを見るとおわかりになると思いますが,ActionScriptではURLVariables(*3)というObjectを継承したダイナミッククラス(*4)に値を作成し,URLRequest.data にURLVariablesそのものをセットするという共通の方法で前述のケース1とケース2を実現できます。

 サンプルソースのexecSendToURL_02関数のコードとexecSendToURL_04関数のコードを見比べてみてください。コードの違いはURLRequest.method にセットするメソッドです。リクエストメソッドの値によって自動的にケース1とケース2を判断し,HTTPリクエストを実行してくれるのはちょっと便利だと思います。もちろん,ケース1に関してはURLRequest.url にデータをセットすることでも実現できます。ちなみに 1-3 のデータ無しのPOSTリクエストはGETリクエストとして処理されます。

 最後の1-5.では存在しないURLにリクエストを実行していますが,レスポンスを無視しているのでエラーさえ発生しません。なので,使用するときは注意が必要です。コラムで紹介しているLive HTTP Headersを使用してHTTPのヘダーをキャプチャしてみてください。HTTPステータス的には「404 Not found」エラーが返ってきています。

【navigateToURL】関数

 navigateToURL(*5)はsendToURLとは違った挙動を持つ関数です。サーバーにGET,もしくは,POSTでHTTPリクエストを実行する機能や引数にURLRequestを必要とするところはsendToURLと同じです。ただし,レスポンスがブラウザに反映されます。つまり,HTMLページのように現在表示しているURLページを変更したり,新規にブラウザウィンドウを作成するといったことが可能です。さらにはJavaScriptを実行することも可能です。

 では,実際にサンプルを見てみましょう(図2)。ブラウザのポップアップをブロックする機能に引っかかる場合がありますので同機能を一時的にオフにして,サンプルを実行してください。

図2:【navigateToURL】サンプル(クリックすると別ウィンドウで動作します。ソースはこちら

 上から順に 1-1.GETメソッドのリクエストを実行 1-2.URL変数を付加してGETメソッドのリクエストを実行 1-3.POSTメソッドのデータ無しリクエストを実行 1-4.POSTメソッドのデータ有りリクエストを実行 1-5.GETメソッドで存在しないURLに対してリクエストを実行 1-6.GETメソッドで現在のページを変更する 1-7.POSTメソッドで現在のページを変更する 1-8.JavaScriptを実行する となります。

 1-1 から 1-5 はsendToURL関数とソースコード的には全く同じなので説明は省かせていただきます。ただし,挙動が違う点としてリクエスト先のページが別ウィンドウで開きます。これはnavigateToURL関数の2番目の引数を省略したときのデフォルトの挙動です。

 1-6 と 1-7 ではnavigateToURL関数の2番目の引数に「_self」を指定しているのでサンプルを表示しているページがリクエスト先のHTMLページに遷移します。この2番目の引数はJavaScriptの「window.open」関数やHTMLのA(アンカー)タグに非常に良く似ています。その他の値として「_blank」(新規名前無しウィンドウ),「_parent」(親フレーム),「_top」(最上位のフレーム)があります。もちろん,独自の値(文字列)をセットして名前付き新規ウィンドウにレスポンスを表示することも可能です。また,1-7 のようにPOSTメソッドでデータを渡すことも可能です。

 最後の1-8はHTMLのA(アンカー)タグで「a href="JavaScript:window.alert('Hello!!')" target="_self"」と,URLではなくJavaScriptを記述する方法と同じです。もちろん,独自のJavaScript関数を実行することもできますし,「mailto:」といった使い方もできます。オンラインヘルプにサンプル・コードがありますので,参考にしてください(「navigateToURL() メソッドを使用した JavaScript の呼び出し」)。