ケータイFlashでテキスト入力フォームを作ろう

By ookura - 09/01/09 - このエントリをはてなブックマークに追加このエントリをYahoo!ブックマークに追加このエントリをLivedoor Clipに追加このエントリをdel.icio.usに追加このエントリをFC2ブックマークに追加

前回はActionScriptでswfからPHP経由で値を取得する方法について説明しました。
今回はケータイFlashでのテキスト入力フォームの作り方について説明します。
参照:ActionScriptで文字列をPHPから動的に取得しよう
 
検索フォームや登録フォームなど、HTMLでは普通にフォーム関連のタグが用意されています。
 
FlashでもUIコンポーネントというフォーム用パーツが存在しますが、FlashLiteでは使用できません。
FlashLiteではテキスト入力とボタンを組み合わせてフォームの代わりになるものを作ります。
 
 


swfファイルを用意する

まずはテキスト入力フォームの作り方を説明していきます。
 
あらかじめパブリッシュバージョンFlashLite1.1で240px×240pxの入力フォームを用意します。
 
タイトルと項目名を静止テキストで配置します。
 
次にテキスト入力とボタンを作成します。
 
テキスト入力には変数を指定しておきます。
ここでは「comment」としておきます。
[図69]
 
テキスト入力フォームを使用する2つのケースについて説明します。
 
一つ目のケースはボタンクリック後にページを遷移する方法です。
 
ボタンにアクションを指定します。

on (press) {
	getURL("sample2016.php", _blank, "GET");
}

PHPに対してgetURLでアクセスすると、テキスト入力に入力した値が変数名でPHPに送信されます。
getURLの送信に今回はGETメソッドを指定していますが、POSTメソッドでも送信可能です。
[図70]
 
 
二つ目のケースは画面遷移なしでデータを送受信する方法です。
 
もう一つボタンを作成します。
 
結果を受け取るダイナミックテキストを配置します。変数名は「res」とします。
[図71]
 
ボタンにアクションを指定します。

on (press) {
    loadVariables("sample_response2016.php", _root, "GET");
}

loadVariablesではauがPOSTメソッドに対応していないので送信はGETメソッドで行います。
[図72]
 
loadValiablesでPHPにアクセスした結果を読み込むと、以下のように結果が返ってきます。

res=値

この文字列の値の部分が変数「res」に読み込まれます。
 
できたらパブリッシュしてサーバーにアップロードします。
 
 


Flashから遷移するPHPの処理

次は値をFlashから受け取って表示するPHPを作成します。
 
sample1926.php

echo "コメント欄に「{$comment}」と入力されました。";

ソースの詳細は省略します。
 
 


Flashにデータを返すPHPの処理

最後に値をFlashから受け取ってレスポンスを返すPHPを作成します。
 
実際のソースは以下の通りです。
 
sample_response1926.php

<?php
/*
 * 取得した値をFlashが読み込める形で出力するサンプル
 */

// データ取得
$comment = $_GET['comment'];

// 内部文字コードに変換
$comment = mb_convert_encoding($comment, "UTF-8", "SJIS");

// 文字列整形
$output = "res=コメント欄に「{$comment}」と入力されました。";

// ヘッダ出力
header('Content-type: text/plain');

// SJISに変換
$output = mb_convert_encoding($output, 'SJIS', 'UTF-8');

// 出力
echo $output;
?php>

 
 


まとめ

できたらswfファイルにアクセスして名前を入力してボタンをクリックすると2通りの結果が確認できるかと思います。
結果1→結果を表示するPHPに遷移
結果2→結果をPHPから取得してswf内のダイナミックテキストに表示
 
 


flaファイルサンプル

sample2016.zip※Flash8形式
→こちらよりダウンロードしていただけます。
 
 


実行例

実行例はこちらからご確認下さい。

URLをメールで送る

http://ookura.tanikaze.com/Sample/post2016/

 
 


Flashサイト動的生成関連の記事一覧

1.ケータイFlashの概要
 1-1 ケータイFlashの概要について
 
2.ケータイFlashのページ作成
 2-1 ケータイFlashのページを作ってみよう
 2-2 ケータイFlashで縦スクロールするページを作ってみよう
 
3.swfmillでケータイFlashを動的生成
 3-1 swfmillでケータイFlashを動的生成してみよう(インストール編)
 3-2 swfmillでケータイFlashを動的生成してみよう(文字列置換編)
 3-3 swfmillでケータイFlashを動的生成してみよう(画像置換編)
 3-4 ケータイFlashのレイアウトを文章量に同期させよう
 
4.ActionScriptとPHPの連携
 4-1 ActionScriptで文字列をPHPから動的に取得しよう
 4-2 ケータイFlashでテキスト入力フォームを作ろう
 
 


4 Responses to “ケータイFlashでテキスト入力フォームを作ろう”

Comment from kurokawa
Time 2009 年 1 月 23 日 at 1:43 PM

大変参考になりました。ありがとうございました。
ちなみにフォームですとSSLが必須になるかと思いますが
そのあたりはswfファイルでも問題はないのでしょうか?
実装方法お教えいただけると幸いです。

Comment from ookura
Time 2009 年 2 月 13 日 at 9:10 PM

> kurokawaさん
レスが遅れてしまい、大変失礼致しました。
参考にして頂きましてありがとうございます。

まず前提として筆者はSSLについてはそれほど詳しくないということをお伝えしておきます。

その上で、実際にSSL環境下での通信を確認してみましたところ、HTMLと同様にSWFのフォーム送信でも通信経路が暗号化されることを確認しました。
実装についてはサーバーにSSLを導入後、https://のURL以下でSWFファイルとPHPとの間で通信するようにすれば問題ないかと思います。
ただし、以下の注意点が考えられます。
1.SSLに対応していない携帯端末がありますので、機種やキャリアIPを判別して対応端末のみがアクセスできるように制限を行っておく必要があります。
2.GET送信の場合はSSL環境下でもアクセスログ等に記録できてしまうようなリスクがありますのでPOST送信で行うようにするべきです。

上記の返答内容については私自身の実験結果及び見解にすぎません。
一通り調査の上でお答えしましたが、内容の真偽については保証致しかねます。
ご参考までに留めていただき、実践される際は実際にご自身でご確認ください。

以上、参考になりましたでしょうか?

Comment from ぬら
Time 2009 年 6 月 18 日 at 8:36 PM

書いてある通りにやってみたところ、実現できないんですが…
サンプルのswfを使ってもダメだったのでPHPに何か問題があるんでしょうか

Comment from ookura
Time 2009 年 6 月 19 日 at 7:06 PM

> ぬら さん
参考にして頂いているということでありがとうございます。
実現できないということですが、実現できない場合は以下の可能性が考えられます。

・PHPの文字コードの問題
→まず送信・受信するデータを全て英数字に変更して試してみてください。
それでうまくいけば文字コードの問題の可能性が高いですので文字コード設定を調節すればいけるかと思います。
なお上記サンプルのPHPはUTF-8で作成しています。

・携帯端末の問題
→サンプルページ上のFlashでもうまく動作しなかった場合は端末の問題も考えられます。
全ての実機で確認したわけではないですので、もしかしたら送受信できないケースがあるのかもしれません。
その場合は確認に使用されたキャリアと端末名をコメントして頂けるとありがたいです。

Write a comment