2011年10月28日金曜日

XML形式でのデータ表現

今後作成するFLASHの課題(ゲーム)の中で,必要となるデータをXML形式で表現する必要がある.その際に必要となるデータの項目を列挙し,それらの一例をXML形式で表現せよ.

例)
必要となるデータの項目:
名前,年齢,学年,クラス,ステータス(レベル,HP,MP),保有アイテム(武器,鎧,盾,兜)

XML形式:
<user>
 <名前>さとう</名前>
 <年齢>20</年齢>
 <学年>2</学年>
 <クラス>GC</クラス>
 <ステータス>
  <レベル>11</レベル>
  <HP>86</HP>
  <MP>53</MP>
 </ステータス>
 <アイテム>
  <武器>ひのきのぼう</武器>
  <鎧>ぬののふく</鎧>
  <盾>かわのたて</盾>
  <兜>かわのぼうし</兜>
 </アイテム>
</user>

2011年10月27日木曜日

外部APIを利用したWEBサービスのサンプル(7)

外部APIを利用したWEBサービスのサンプル(6)を発展させ,入力した文章中のキーフレーズを画像に置き換えて表示する.
 (ユーザーによる)文章入力 →キーフレーズ抽出API →キーフレーズによる画像検索 →元となる文章中のキーフレーズ部分を画像に置換

表示例

LINK

text_form2.html
<html>
 <head>
  <title>text form2</title>
 </head>
 <body>
  <form action="text_xmlParse2.php" method="post">
   変換したい文字列 : <input type="text" name="word" />
  <input type="submit" />
 </form>
 </body>
</html>

text_xmlParse2.php
<?php
$word = htmlspecialchars($_POST['word']);
$appid = "(アプリケーションID)";

$url1 = "http://jlp.yahooapis.jp/KeyphraseService/V1/extract";
$url1 .= "?sentence=".$word."&appid=".$appid;
$article1 = simplexml_load_file($url1);
$keyphrase = $article1->Result->Keyphrase;
$score = $article1->Result->Score;

$url2 = "http://search.yahooapis.jp/ImageSearchService/V2/imageSearch";
$url2 .= "?results=1&query=".$keyphrase."&appid=".$appid;
$article2 = simplexml_load_file($url2);
$image_url = $article2->Result->Url;
$image_thumbnail = $article2->Result->Thumbnail->Url;

print<<<EOF
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>keyphrase replace2</title>
</head>
<body>
EOF;
echo "キーフレーズ:";
echo $keyphrase;

echo "<br />";
echo "スコア:";
echo $score;

echo "<br />";
echo "画像URL:";
echo $image_url;

echo "<br />";
echo "サムネイルURL:";
echo $image_thumbnail;


echo "<br />";
echo "<br />";
echo "元の文章:";
echo $word;

echo "<br />";
echo "<br />";
echo "変換後の文章:";
$temp = str_replace($keyphrase, "<a href=".$image_url."><img src=".$image_thumbnail."></a>", $word);
echo $temp;


print<<<EOF
</body>
</html>
EOF;
?>

外部APIを利用したWEBサービスのサンプル(6)

Yahoo!のテキスト解析Web APIキーフレーズ抽出を利用して,入力した文章中のキーフレーズを抽出し,そのキーフレーズに対して置換やリンクの付与等を行う.

表示例

LINK

text_form.html
<html>
 <head>
  <title>text form</title>
 </head>
 <body>
  <form action="xmlParse.php" method="post">
   変換したい文字列 : <input type="text" name="word" />
  <input type="submit" />
 </form>
 </body>
</html>

text_xmlParse.php
<?php
$word = htmlspecialchars($_POST['word']);
$appid = "(アプリケーションID)";
$url = "http://jlp.yahooapis.jp/KeyphraseService/V1/extract";
$url .= "?sentence=".$word."&appid=".$appid;
$article = simplexml_load_file($url);

$keyphrase = $article->Result->Keyphrase;
$score = $article->Result->Score;

print<<<EOF
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>keyphrase replace</title>
</head>
<body>
EOF;
echo "キーフレーズ:";
echo $keyphrase;

echo "<br />";
echo "スコア:";
echo $score;

echo "<br />";
echo "元の文章:";
echo $word;

echo "<br />";

echo "<br />";
echo "変換後の文章1:";
$temp1 = str_replace($keyphrase, "<b>禁則事項</b>", $word);
echo $temp1;

echo "<br />";
echo "変換後の文章2:";
$temp2 = str_replace($keyphrase, "<a href=http://www.google.com/search?q=".$keyphrase.">".$keyphrase."</a>", $word);
echo $temp2;

echo "<br />";
echo "変換後の文章3:";
$temp2 = str_replace($keyphrase, "<a href=http://www.google.com/search?tbm=isch&q=".$keyphrase.">".$keyphrase."</a>", $word);
echo $temp2;

print<<<EOF
</body>
</html>
EOF;
?>

2011年10月21日金曜日

ex9 DBから値を取得


20111021.swf

ex7 HTMLからSWFへの引数渡しでは,HTMLファイルに埋め込まれた値をFlashへ渡す方法を説明した.
ただしHTMLファイルに値を埋め込む方法では,他ユーザーとリアルタイムに値を共有することができない.
そこで今後は,データベース(以下DB)に全ユーザーの値を集約し,その値をSWFで利用する事とする. 

今回はFlashからDBに直接接続しSQLを発行する方法ではなく,FlashからDBとの仲介役となるPHPファイルに接続し,DBに問い合わせた結果をFlashがXML形式で受け取る方法について説明する.

1.ブラウザを用いて以下の取得先URLにアクセスし,自身のユーザー名/パスワードを用いて値が取得できるか確認.
(取得されるデータはXML形式のため,ページのソースを表示で内容確認)
取得先URL
http://www14026u.sakura.ne.jp/ma/2011/9/status.php?user_name="ユーザー名"&user_pass="パスワード"

2.自身のユーザー名/パスワードを用いて固有の値(ユーザー毎のmoneyとitemの値)を取得できることが確認できたら,現在作成しているFlaファイルに1で取得出来るmoneyの値が反映されるように修正.
Flashの中でユーザー名・パスワードを用いてサーバー上のXMLを取得し,その中に含まれるmoney,kanaの値をステージ上に表示する.

ActionScript(windowレイヤー)
//status_mc.name = _root.name;
//status_mc.money = _root.money;

var db_username = "ユーザー名";
var db_password = "パスワード";
status_xml = new XML();
status_xml.onLoad = userStatus;
status_xml.load("http://www14026u.sakura.ne.jp/ma/2011/9/status.php?user_name='"+db_username+"'&user_pass='"+db_password+"'");
status_xml.ignoreWhite = true;
function userStatus(success) {
 if (success == true) {
  status_mc.money = status_xml.firstChild.firstChild.firstChild.firstChild.nodeValue;
  status_mc.name = status_xml.firstChild.firstChild.firstChild.nextSibling.nextSibling.firstChild.nodeValue;

  //debug
  trace(status_xml.nodeValue);
  trace(status_xml.firstChild.nodeValue);
  trace(status_xml.firstChild.firstChild.nodeValue);
  trace(status_xml.firstChild.firstChild.firstChild.nodeValue);
  trace(status_xml.firstChild.firstChild.firstChild.firstChild.nodeValue);
  trace(status_xml.firstChild.firstChild.firstChild.nextSibling.firstChild.nodeValue);
  trace(status_xml.firstChild.firstChild.firstChild.nextSibling.nextSibling.firstChild.nodeValue);
 }
}

status_mc._visible = false;
window_status = 1;
var key_obj:Object = new Object();
key_obj.onKeyDown = function():Void  {
 var code = Key.getCode();
 if (code == Key.SPACE) {
  if (window_status == 0) {
   status_mc._visible = false;
   window_status = 1;
  } else if (window_status == 1) {
   status_mc._visible = true;
   window_status = 0;
  }
 }
};
Key.addListener(key_obj);


(参考)DBに接続し,ユーザーのstatusを返すPHP
<?php
 $db_user  = "ユーザー名";
 $db_password = "パスワード";
 $db_name = "DB名";
 $db_host  = "接続先サーバ名";

//create xml
    header('Content-type: text/xml; charset=utf-8');
    echo '<?xml version="1.0"?><ma>';

 $user_name = null;
 $user_pass = null;

 if(isset($_GET['user_name'])) {
  $user_name = $_GET['user_name'];
  $user_pass = $_GET['user_pass'];

  $con = mysql_connect($db_host,$db_user,$db_password) or die("error!");
  mysql_select_db($db_name,$con) or die("DB is not exist");
  $strsql = "SET CHARACTER SET UTF8";
  mysql_query($strsql,$con);
  $strsql = "SELECT money, item FROM 2011_users WHERE name = $user_name AND pass = $user_pass;";
  $res = mysql_query($strsql,$con);

  while ($item = mysql_fetch_array($res)) {
   print "<user_status><money>".$item[0]."</money><item>".$item[1]."</item></user_status>";
  }
  mysql_close($con);
}

    echo '</ma>'; 
?>


ダウンロード1
※今後は,ユーザー名等直接FLASHファイル内に記述 or FLASHの画面上でユーザー名等入力 or DB参照,となるため,FLASHを呼び出すHTMLファイル側にユーザー名等の記述は不要です.

2011年10月20日木曜日

外部APIを利用したWEBサービスのサンプル(5)

PHP(10) フォーム(POST)と外部APIを利用したWEBサービスのサンプル(5)を組み合わせて,ユーザーが入力した任意の文字列から座標を検索し,地図を表示する.

1.ユーザーが文字列を入力する画面(map_form.html)を用意.
2.画面に配置された送信ボタンを押すことで,postメソッドにより文字列を送信.
3.送信された文字列をphpファイル(map_xmlParse2.php)で受け取り.
4.受け取った文字列を用いて,マッチする座標を検索
5.座標を使って地図を表示.

表示例

LINK

map_form.html
<html>
<head>
 <title>form sample</title>
</head>
<body>
 <form action="map_xmlParse2.php" method="post">
  座標を調べたい文字列 : <input type="text" name="word" />
  <input type="hidden" name="sensor" value="true" />
  <input type="submit" />
 </form>
</body>
</html>

map_xmlParse2.php
<?php
 $word = htmlspecialchars($_POST['word']);
 $sensor = htmlspecialchars($_POST['sensor']);
 $url = "http://maps.google.com/maps/api/geocode/xml";
 $url .= "?address=".$word."&sensor=".$sensor;
 $article = simplexml_load_file($url);

 $lat = $article->result->geometry->location->lat;
 $lng = $article->result->geometry->location->lng;

print<<<EOF
 <html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <title>Google Geocoding and Maps JavaScript API Example</title>
 <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
   function initialize() {
     var myLatlng = new google.maps.LatLng(
EOF;
 echo $lat;
 echo ", ";
 echo $lng;
print<<<EOF
     );

     var myOptions = {
       zoom: 15,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     var marker = new google.maps.Marker({
       position: myLatlng,
       map: map,
       title:"
EOF;
 echo $word;
print<<<EOF
       "
     });
   }
 </script>
 </head>
 <body onload="initialize()">
   <div id="map_canvas"></div>
 </body>
 </html>
EOF;
?>

※次回は今回のサンプルをベースに,GeocodingのAPI部分を自分で選定した別APIに置き換えて動作させる課題とします.

PHP(10) フォーム(POST)

PHP(9) フォーム(GET)で作成したサンプルを,POSTメソッドを使ったものに変更する.

1.ユーザーが文字列を入力する画面(post_form.html)を用意.
2.画面に配置された送信ボタンを押すことで,postメソッドにより文字列を送信.
3.送信された文字列をphpファイル(post_xmlParse2.php)で受け取り.
4.受け取った文字列を用いて,マッチする座標を検索~表示.

表示例

LINK

post_form.html
<html>
<head>
 <title>form sample</title>
</head>
<body>
 <form action="post_xmlParse2.php" method="post">
  座標を調べたい文字列 : <input type="text" name="word" />
  <input type="hidden" name="sensor" value="true" />
  <input type="submit" />
 </form>
</body>
</html>

post_xmlParse2.php
<?php
 $word = htmlspecialchars($_POST['word']);
 $sensor = htmlspecialchars($_POST['sensor']);
 $url = "http://maps.google.com/maps/api/geocode/xml";
 $url .= "?address=".$word."&sensor=".$sensor;
 $article = simplexml_load_file($url);

 $lat = $article->result->geometry->location->lat;
 $lng = $article->result->geometry->location->lng;

 echo "<html>\n";
 echo "<head><title>xml test</title></head>\n";
 echo "<body>\n";
 echo $lat;
 echo ", ";
 echo $lng;
 echo "</body>\n";
 echo "</html>\n";
?>

PHP(9) フォーム(GET)

現在PHP(8) 外部APIとの連携(XMLパース)では,APIに渡す地名がPHPのコード内部に記述されているが,ユーザーが任意の文字列を指定できるように,フォームから地名を入力できるように変更する.

1.ユーザーが文字列を入力する画面(get_form.html)を用意.
2.画面に配置された送信ボタンを押すことで,getメソッドにより文字列を送信.
3.送信された文字列をphpファイル(get_xmlParse2.php)で受け取り.
4.受け取った文字列を用いて,マッチする座標を検索~表示.

表示例

LINK

get_form.html
<html>
<head>
 <title>form sample</title>
</head>
<body>
 <form action="get_xmlParse2.php" method="get">
  座標を調べたい文字列 : <input type="text" name="word" />
  <input type="hidden" name="sensor" value="true" />
  <input type="submit" />
 </form>
</body>
</html>

get_xmlParse2.php
<?php
 $word = htmlspecialchars($_GET['word']);
 $sensor = htmlspecialchars($_GET['sensor']);
 $url = "http://maps.google.com/maps/api/geocode/xml";
 $url .= "?address=".$word."&sensor=".$sensor;
 $article = simplexml_load_file($url);

 $lat = $article->result->geometry->location->lat;
 $lng = $article->result->geometry->location->lng;

 echo "<html>\n";
 echo "<head><title>xml test</title></head>\n";
 echo "<body>\n";
 echo $lat;
 echo ", ";
 echo $lng;
 echo "</body>\n";
 echo "</html>\n";
?>

2011年10月18日火曜日

リレーションシップの作成(2)


練習問題(P89)

追加課題:新規にテーブルを作成し,既存テーブルとの間にリレーションシップを作成せよ.

3.T受注リストをベースとし,各テーブルに分散しているデータ全てを一覧表示するクエリを作成せよ.

(例)
デザインビュー

データシートビュー

※新規テーブルを追加後,データシートビューで内容が表示されない場合は,リレーションについて再確認してみてください.それでも正しく表示されない場合は,1からクエリを作り直すと正しく表示される場合もあります.


4.テーブル「T顧客リスト」内の担当部署をもとに,「担当部署(部)」と「担当部署(課)」の2つのテーブルを作成し,リレーションを作成せよ.

4-1.まずはもととなるデータ中の表記のブレを1つに統一する.
(総務部総務課,本部総務課,総務課) → (総務部総務課)

4-2.部と課毎にテーブルを作成する.

(T担当部リスト)
担当部ID
担当部名


(T担当課リスト)
担当課ID
担当課名




(例1)表記のブレをまとめる

■総務部
総務部総務課
総務課総務担当
総務課
総務部秘書室
本部総務課
秘書課顧客G

総務部
├─総務課
└─秘書課

■営業部
営業部第一営業課
営業部サポート課
営業部広報課
営業本部サポート部
第二営業部一課
第三営業部顧客サポート課
営業企画部推進室
営業二課サポート室
営業グループ
営業一課

営業本部
├─営業部第一営業課
├─営業部サポート課
├─営業部広報課
├─第二営業部一課
├─第三営業部顧客サポート課
├─サポート部
└─営業企画部推進室

■顧客サポート部
顧客サポート部
顧客サポート課
CS部特別推進課
CSセンター
カスタムサポートG

顧客サポート部
├─顧客サポート課
└─特別推進課

(例2)部と課毎にテーブルを作成する.

(T担当部リスト)
担当部ID担当部名
1総務部
2営業本部
3顧客サポート部


(T担当課リスト)
担当課ID担当課名
1総務課
2秘書課
3営業部第一営業課
4営業部サポート課
5営業部広報課
6第二営業部一課
7第三営業部顧客サポート課
8サポート部
9営業企画部推進室
10顧客サポート課
11特別推進課


デザインビュー

データシートビュー

2011年10月13日木曜日

PHP(8) 外部APIとの連携(XMLパース)

外部APIを利用したWEBサービスのサンプル(4)をPHPから操作する. 
1.外部APIを利用したWEBサービスのサンプル(4)で使用するパラメータをPHP側で用意し,引数を含めたURLを作成する.
2.サーバから受け取ったXMLデータを解析し,必要な項目(緯度,経度)のみ抽出する. 

表示例

LINK

xmlParse.php
<?php
// $article = simplexml_load_file('test.xml');

 $word = "横浜";
 $sensor = "true";
 $url = "http://maps.google.com/maps/api/geocode/xml";
 $url .= "?address=".$word."&sensor=".$sensor;
 $article = simplexml_load_file($url);

 $lat = $article->result->geometry->location->lat;
 $lng = $article->result->geometry->location->lng;

 echo "<html>\n";
 echo "<head><title>xml test</title></head>\n";
 echo "<body>\n";
 echo $lat;
 echo ", ";
 echo $lng;
// echo "\n".$url."\n";
// echo "<pre>\n";
// var_dump ($article);
// echo "</pre>\n";
 echo "</body>\n";
 echo "</html>\n";
?>

※1.現在APIに渡す地名がPHPのコード内部に記述されているが,ユーザーが任意の文字列を指定できるように,フォームから地名を入力できるように変更する.
※2.現在出力結果が座標を示す数字のみとなっているが,この座標を中心としたgoogle mapを表示せよ.

2011年10月12日水曜日

リレーションシップの作成


練習問題(P89)

追加課題:新規にテーブルを作成し,既存テーブルとの間にリレーションシップを作成せよ.

1.新たに「T都道府県リスト」テーブルを作成し,「T顧客リスト」テーブルとの間にリレーションシップを作成する.

(T顧客リスト)
顧客NO
顧客名
フリガナ
担当部署
担当者名
郵便番号
住所
TEL
DM



(T顧客リスト)
顧客NO
顧客名
フリガナ
担当部署
担当者名
郵便番号
都道府県ID
住所
TEL
DM



(T都道府県リスト)
都道府県ID
都道府県名


2.新たに「T担当者リスト」テーブルを作成し,「T顧客リスト」テーブルとの間にリレーションシップを作成する.

(T顧客リスト)
顧客NO
顧客名
フリガナ
担当部署
担当者名
郵便番号
都道府県ID
住所
TEL
DM



(T顧客リスト)
顧客NO
顧客名
フリガナ
担当部署
担当者ID
郵便番号
都道府県ID
住所
TEL
DM



(T担当者リスト)
担当者ID
担当者名

テーブルの作成

練習問題(P78~81)

追加課題:「主キー」「データ型」に注意しながら,新規テーブルを追加せよ.

1.T顧客リスト内の「住所」フィールド内の都道府県を別テーブルに分割する.

(T顧客リスト)
...住所電話番号...
100-0000東京都港区1-1-103-0000-0000



(T顧客リスト)
...都道府県ID住所電話番号...
100-000037東京都港区1-1-103-0000-0000



(T都道府県リスト)
都道府県ID都道府県名
1北海道
2青森
...
37東京都
...



2.T商品リスト内の「カタログギフト」を別テーブルに分割する.


カタログギフトに含まれる商品は,すべてT商品リストに記載されていると仮定する.
今回作成するTカタログギフトを用いる事で,各カタログギフトに含まれる個別の商品が分かるものとする.


(T商品リスト)
商品NO商品名分類NO価格
1001商品券\1000A0011,000
4001カタログギフトAA00220,000
...




(T商品リスト)
商品NO商品名分類NO価格
1001商品券\1000A0011,000
...





(Tカタログギフト)
カタログギフトNO商品名備考価格商品1商品2商品3商品4商品5
C0001カタログギフトA飲料セット20,000100210041005

C0002カタログギフトB金券セット25,0001001200630063011
C0003カタログギフトC詰め合わせセット20,00010032003200530043010
...








※各カタログギフトに含まれる商品の最大の個数は5個と仮定する.

2011年10月7日金曜日

ex8 トグル操作による表示窓のON/OFF


20111007.swf

Windowレイヤーに配置した表示窓を,キー操作によりON/OFFさせる.
具体的には,Windowレイヤーに配置した表示窓オブジェクトを「status_mc」という名前のムービークリップ(以下MC)とし,そのMCをvisibleを用いてON/OFFする.

ActionScript(windowレイヤー)
status_mc.name = _root.name;
status_mc.money = _root.money;

status_mc._visible = false;

window_status = 0;
var key_obj:Object = new Object();
key_obj.onKeyDown = function():Void  {
	var code = Key.getCode();
	if (code == Key.SPACE) {
		if (window_status == 0) {
			status_mc._visible = false;
			window_status = 1;
		} else if (window_status == 1) {
			status_mc._visible = true;
			window_status = 0;
		}
	}
};
Key.addListener(key_obj);


ダウンロード1
ダウンロード2

2011年10月6日木曜日

PHP(7) 外部APIとの連携(配列使用)

外部APIを利用したWEBサービスのサンプル2とPHPを組み合わせたPHP(5)を参考に,PHP(6)で使用した配列を使ってグラフを作成する.

index5.php
<?php
// 値の設定
	$text = array("うれしい", "かなしい", "さみしい");
	$value = array("70", "20", "10");
?>

<html>
<head>
<title>title</title>
</head>
<body>

<iframe frameborder=0 src="http://graph.heartrails.com/api/?width=400&height=300&text0=
<?php echo $text[0]; ?>
&value0=
<?php echo $value[0]; ?>
&text1=
<?php echo $text[1]; ?>
&value1=
<?php echo $value[1]; ?>
&text2=
<?php echo $text[2]; ?>
&value2=
<?php echo $value[2]; ?>
"></iframe>

</body>
</html>

PHP(6) 配列

PHPにおける配列の扱いについて

※添え字は「0」から始まることに注意.

index6.php
    $testArray = array("test1", "test2", "test3", "test4", "test5");
    print($testArray[0]);


課題 PHP(5)で作成したプログラムを,配列を使って書き直し,index7.phpとして提出せよ.