konekto Inc with PHP , MySQL コネクト株式会社 技術情報コンテンツ


TopWeb技術

Flash + PHP

(この項目は2006年以前の作成です。2011年1月時点では情報が古くなっている可能性があります)

Flashとは

 Flash(Macromedia Flash)とは、グラフィックス、オーディオ、テキスト、ビデオと言った各種多様なデジタルメディアを組み合わせる事によって、コンテンツを作成、再生するテクノロジーです。元はアニメーション用のソフトウェアとして開発されたFlashですが、バージョンアップを重ね、現在ではその表現力の高さとインタラクティブ性の高さから、商品のWebプロモーションから携帯電話のインターフェイスまで幅広い分野で採用されています。 また、Flashの動作環境であるFlashPlayerの普及率も9割を超えており、事実上の標準規格となりつつあります。

 ここ数年、リッチメディア、リッチコンテンツ、或いはリッチクライアントと言った言葉を良く耳にするようになりました。この事からは、ブロードバンドの普及や、様々な要素技術の確立によりインフラが整いつつある昨今において、如何にユーザがインターネットを通じて提供される体験の『次』を望んでいるかが伺い知ることが出来ます。  確かに、インターネットの黎明期である1990年代と比較すれば、現在のインターネットは格段に進歩しています。JavascriptやCSSと言った技術も一般化し、使い勝手や見た目の点を大きく向上させました。サービスと言う観点から見れば、ネットショッピングの普及や、Blog・SNSと言ったインターネットコミュニティの台頭は、多くの人の『インターネットを使う理由』となっていますし、各企業はインターネットを有力な広告媒体であると認識しています。

 このように、インターネットの発展と共に、幅広い層の人がインターネットを利用するようになった現在、サービスやそれを使う人に合わせたデザイン/インターフェースの多様化が求められており、HTMLの表現能力では限界があると言われています。そこで最も注目されているのがFlashなのです。Flashは、優れたデザインとインターフェイスを兼ね備えたリッチクライアントを手軽に作成する事が出来ます。  例えば、最近良く目にするようになったPIP(Person in Presentation)等が良い例です。ビデオや音声を駆使したPIPはFlashの得意分野であり、その訴求力はテキストベースのそれとは比較になりません。リッチコンテンツの『リッチ』とは、ただ単に派手だったり情報量が多いと言う意味ではありません。ユーザーがコンテンツを通して豊かな体験を出来ると言う意味での『リッチ』でもあるのです。

Flashの特徴

 Flashの使用するのであれば、その特徴は十分に知っておかなければ行けません。特徴を長所と短所の点から見て行きましょう。
 先ずは長所です。

○表現力が高い
上でも触れましたが、Flashはグラフィックス、オーディオ、テキスト、ビデオと言った様々なメディアファイルを扱う事が出来ます。
元々アニメーション用途だった事を考えれば、この『表現力が高い』と言うのはあたり前の事です。

○クロスプラットフォーム
Flashは、その再生環境であるFlashプレイヤーが導入されていれば、どのような環境でも再生する事が出来ます。
現在ではWindowやMacはもちろん、Linux、更には携帯電話をはじめとする組み込み機器にもFlashプレイヤーは導入されています。

○企業によるサポート
FlashはMacromedia社によって開発、販売されてるソフトウェアです。つまり、Macromediaに社によるサポートを受ける事ができます。

 次に短所です。

×HTMLとの相性の悪さ
Flashは<Object>タグによりHTMLの中に埋め込まれますが、その制御はFlashプレイヤーに依存しており
ブラウザから制御する事はほとんど出来ません。例えば、戻るボタン等が良い例です。

×プラグインへの依存
長所では、プラグインがクロスプラットフォーム性を作り出していると言いましたが、プラグインに依存してしまうのはマイナスでもあります。

×企業へ依存
これも長所の逆の話で、開発、販売をMacromedia社が行っていると言う事は、Macromedia社主導で全てが進んでしまうと言う事です。

仕組み

 Flashがサーバと通信する場合、FlashプレイヤーはFlashを再生しているブラウザを通してサーバにアクセスします。サーバからレスポンスを受信すると、ブラウザからFlashプレイヤーにデータが渡され、渡されたデータを使ってFlash内部で遷移します。この際、表示されているページ自体の書き換えは行われません。

 Flashがサーバと通信する場合は、非同期通信が基本になります。つまり、通信中も他の処理は動き続けるという事です。もし、同期的に扱う必要がある場合は全ての処理を中断し、通信の終了を待つような仕組みを作らなければなりません。

 Flashが通信を行うサーバ側に目を向けてみましょう。実は、サーバ側では特別な事は殆どありません。気をつけるべき事は次の2つのみです。

・Flashが理解できる形式で出力する
 当たり前の話ですが、通常のようにHTMLを出力しても無意味です。Flashでは通信上で使用できる形式がいくつか決まっています。
・日本語等マルチバイト文字はUTF-8で出力する
 Flashではマルチバイト文字をUTF-8で扱います。例外的にShift-JISも扱う事が出来ますがこれは推奨されていません。

これはいずれも出力(レスポンス)に関する事で、入力(リクエスト)に関しては、Flashからの通信である事は基本的に意識する必要はありません。

LoadVarsを使った通信

 Flashにはサーバと通信を行う方法がいくつか用意されていますが、その中でも基本であり、また通常よく使われているのがLoadVarsクラスです。LoadVarsクラスは、受信完了を通知するコールバック関数を備える等Flashがサーバと通信を行うための様々な機能を提供します。この制御を行うためには、もちろんAcionScriptを記述します。
 LoadVarsクラスはapplication/x-www-urlencoded形式での送受信をサポートしています。つまり次のような形式です。

param1=value1&param2=value2&........

 この形式はCGIでは一般的なもので、通常HTMLのフォームからサブミットされた場合に送信される形式です。LoadVarsクラスでは、送信だけでなく受信時もこの形式である必要があります。これが上で述べた『Flashが理解できる形式で出力する』と言う事なのです。

 では、簡単な例を用いて説明します。ここでは、リクエストを次のようにします。

req_year=2005&req_month=9&req_day=26

 これをサーバ側PHPに送信し、レスポンスを得ます。レスポンスは次にようにします。

res_status=1&res_hour=12&res_min=15&res_sec=30

 次にActionScriptのソースを示します。

1 : // 送信用LoadVarsインスタンス
2 : var send_lv:LoadVars = new LoadVars();
3 : // 受信用LoadVarsインスタンス
4 : var recv_lv:LoadVars = new LoadVars();
5 : // 受信が完了した際に呼び出されるイベントハンドラメソッド
6 : recv_lv.onLoad = function(success){
7 :    //ロードした後の処理
8 :    if (success && this.res_status == 1) {
9 :        trace(this.res_hour);
10:        trace(this.res_min);
11:        trace(this.res_sec);
12:    } else {
13:        trace("error");
14:    }
15: };
16: // 送信パラメータを送信用LoadVarsインスタンスのプロパティの設定
17: send_lv.req_year=2005;
18: send_lv.req_month = 9;
19: send_lv.req_day=26; 
20: // 送信実行
21: send_lv.sendAndLoad("http://www.(弊社ドメイン)/tech/flash/sample.php", recv_lv, "POST");

・1〜4行目
送信用および受信用のLoadVarsインスタンスを作成します。送信用と受信用を一つのインスタンスにする事も出来ますが、混乱を招く原因になりますので分けることが推奨されます。

・5〜15行目
ここが最も重要です。サーバからのレスポンスを受信完了した際に呼び出されるイベントハンドラメソッド onLoad を設定します。上で述べているようにFlashでの通信は全て非同期で行われます。つまり、通信の完了を待たずに次の処理へ進んでしまうと言う事です。そのため通信の完了と言うイベントを通知する(ハンドリングする)仕組みが必要なのです。LoadVars.onLoadは サーバからのレスポンスを受信し、その値の解析が完了した時点、もしくは通信上のエラーが発生した場合に呼び出されます。正常に受信・解析が完了した場合、受信用のLoadVarsインスタンスのプロパティとして各値が割り当てられます。この例ではそれぞれの値をデバッグ出力しています。

・16〜19行目 送信パラメータを送信用LoadVarsインスタンスのプロパティとして設定します。こうする事によって送信時に自動的にリクエストパラメータが形成されます。日本語等の特殊な文字も自動的にURLEncodeがなされます。

・21行目 LoadVars.sendAndLoadはリクエストパラメータを送信し、サーバレスポンスを取得する際に使用します。引数としてリクエスト先URL、受信用オブジェクト、リクエストメソッドを指定します。送信するリクエストパラメータは上で設定した物より自動的に生成されます。

サンプル

今回はサンプルとしてFlashホワイトボードを用意してみました。( http://www.(弊社ドメイン)/tech/samples/php_flash/fbbs.html )

Flash側からはメッセージ内容、x座標、y座標、文字サイズ、文字色を入力し、それをサーバ(PHP)へ送信します。リクエストパラメータは次のようになります。

chk=1127719392502&cl=1&sz=1&y=575&x=145&msg=test&evt=wr
※
chk : キャッシュ対策のタイムスタンプ
cl  : 文字色
sz  : 文字サイズ
x   : x座標
y   : y座標
msg : メッセージ内容
evt : 書き込みイベント名

evt=wrが指定されていた場合にPHPはこのリクエストを書き込みと見なし、入力内容の検査を行った上で、書き込み内容をファイルに保存します。
evt=wrが指定されてない場合、もしくは正常に書き込みが行われた場合は今までの書き込みを取得し出力します。
この辺りの動作は通常の掲示板スクリプトと大差ありません。

レスポンスは次のような形になります。

log1=53,63,1,1,test&log2=213,192,3,2,%E3%81%A6%E3%81%99%E3%81%A8&result=1
※
log${n} : x軸,y軸,文字サイズ,文字色,メッセージ内容(nが大きいほど新しい書き込み)
result  : 実行結果。正常時に1、異常時に0

これをFlash側で解析し、表示させます。

ところで、先にも触れましたがFlashではマルチバイト文字をUTF-8で表します。そのためPHP側でもUTF-8で扱うようにしなければ文字化けを起こしてしまいます。
これはPHPの設定にもよりますが、次のようにする事でUTF-8として扱う事が出来ます。

// 入力文字コードをUTF-8に
mb_internal_encoding("UTF-8");
// 出力文字コードをUTF-8に
mb_http_output('UTF-8');
fbbs_ss.png

添付ファイル: filefbbs_ss.png 1313件 [詳細]
filefbbs.tar.gz 2621件 [詳細]

最終更新のRSS