[ACY] Outside of School Hours

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 "変換後の文章１：";
$temp1 = str_replace($keyphrase, "<b>禁則事項</b>", $word);
echo $temp1;

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

echo "<br />";
echo "変換後の文章３：";
$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日金曜日

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

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

１．ブラウザを用いて以下の取得先URLにアクセスし，自身のユーザー名／パスワードを用いて値が取得できるか確認．
（取得されるデータはXML形式のため，ページのソースを表示で内容確認）
取得先URL

http://www14026u.sakura.ne.jp/ma/2011/9/status.php?user_name="ユーザー名"&user_pass="パスワード"

２．自身のユーザー名／パスワードを用いて固有の値（ユーザー毎のmoneyとitemの値）を取得できることが確認できたら，現在作成しているFlaファイルに１で取得出来る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)を組み合わせて，ユーザーが入力した任意の文字列から座標を検索し，地図を表示する．

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

表示例

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に置き換えて動作させる課題とします．

登録: 投稿 (Atom)

現在提出受付中の課題

サーバアーキテクチャ

課題番号： SA-***

課題名称： WebAPIの利用(1)～(5)

課題内容：授業で作成したWebAPIを利用したサンプルをベースに，オリジナルのWEBサービスを作成する．

提出期限： 2012/6/21(木) 17:00

提出先　： (サーバのpublic_html以下に作成)

モバイルアプリケーション

課題番号： MA-***

課題名称： DBと連携するFlashアプリケーション

提出期限： 2012/6/22(金) 17:00

提出先　：共有サーバ

にアップロード．

10.2.5.2	共有サーバ(１学期使用)
10.2.5.101	折笠
10.2.5.102	金本
10.2.5.103	鈴木
10.2.5.104	西崎
10.2.5.105	西村
10.2.5.106	マナハン
10.2.5.107	荒井
10.2.5.108	小沼
10.2.5.109	小谷田
10.2.5.110	城田
10.2.5.111	中山
10.2.5.112	萩原
10.2.5.113	花山
10.2.5.114	樋口
10.2.5.115	船谷
10.2.5.116	星野
10.2.5.117	間宮
10.2.5.118	佐藤