Flash UI

Size: px

Start display at page:

Download "1 1 2 2 3 3 3.1............................. 3 4 5 4.1 Flash.............................................. 5 4.2 UI..................................."

しょうじこけい
7 years ago
Views:

1 2011 Web 08H034

2 Flash UI Web GoogleAppEngine Web Web A 26 A.1 main.py

1............................................ 15 8 19 8.1 Web.................................... 19 8.2.......................................... 19 8.3............................................... 19 9 20 9.

3 A.2 main.js

4 1 1 [1] 1 Web Web Web Web 1

5 2 [1] Web [2 4] Web 2

6 3 3.1 [1] 3 ( )

7 2 4

8 4 [5] ( ) ( ) Flash UI 4.1 Flash Adobe Flash Player9 Flash Player Flash 4.2 UI 4.3 5

9 5 Web Web Web GoogleAppEngine [6]( GAE) 5.1 GoogleAppEngine GAE Google 1 Python Java Web Google *1 GAE Python Java *2 ( SDK) SDK (Python appcfg.py) Web ID ID Google Google GAE Create an Application ID appspot.com ID URI *1 *2 6

10 6 1 1 HTML [7] JavaScript [8, 9] GAE Web Python SDK Python HTML JavaScript JavaScript jquery [10] CSS [11]

11 URL 5-9 8

12 5 6 TOP 9

13 7 8 10

14 9 11

15 6.2 ( 3) ( a4w) a4w a4w a4w 6.3 ( 4) a4w : : : : : : : : 1 : 1 : : 1 : 10 a4w , 12 12

16 10 a4w 13

18 Web 1. Web

19 13-17 NC % NC Web % NC

20 % NC % NC

22 8 Web 8.1 Web 1 2 Web 1 *3 Web 2 *4 1 2 Web *5 4 * *3 Web *4 *5 *6 19

23 9 Web Web Web Web Web 20

24 Web 21

25 10 Web

27 24

28 [1]..,, (2010). [2].., pp , (2005). [3].., pp , (1998). [4]. java., pp. 1 8, (2006). [5]. [6] Googleappengine. [7] Html. [8] saki. eweb( ). [9] javascript. [10] jquery. [11] Html :css. 25

29 A A.1 main.py #coding: utf-8 import cgi import wsgiref.handlers from google.appengine.ext import webapp def load_map(mapselect): map = [] file_open = open(mapselect).readlines() for line in file_open: line = line.rstrip() map.append([str(mozi) for mozi in list(line)]) return map def text_field(input): input( <form id="input_form"> <table> <tr> <td> </td> <td><input type="button" value=" " id="input_up" class="button" onclick="input(\ w\, id_el)"></td> <td> </td> </tr> <tr> <td><input type="button" value=" " id="input_left" class="button" onclick="input(\ a\, id_el)"></td> <td> </td> <td><input type="button" value=" " id="input_right" class="button" onclick="input(\ d\, id_el)"></td> </tr> <tr> <td> </td> <td><input type="button" value=" " id="input_down" class="button" onclick="input(\ s\, id_el)"></td> 26

30 <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td><input type="button" value=" " id="input_up_jump" class="button" onclick="input(\ k\, id_el)"></td> <td> </td> </tr> <tr> <td><input type="button" value=" " id="input_left_jump" class="button" onclick="input(\ h\, id_el)"></td> <td> </td> <td><input type="button" value=" " id="input_right_jump" class="button" onclick="input(\ l\, id_el)"></td> </tr> <tr> <td> </td> <td><input type="button" value=" " id="input_down_jump" class="button" onclick="input(\ j\, id_el)"></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td><input type="button" value="1 " class="button" onclick="one_clear(id_el)"></td> </tr> <tr> <td><input type="button" value=" " id="zikkou" class="button" onclick="execute()"></td> <td> </td> <td><input type="button" value=" " class="button" onclick="all_clear(id_el)"></td> </tr> <tr> 27

31 <td> </td> <td> </td> <td> </td> </tr> <tr> <td><input type="button" style="display: none" value=" 1 " id="koshin" onclick="koshin()"></td> <td> </td> <td> </td> </tr> </table> </form> ) def comm_text(comm): comm( <div id="commtext"> </div> ) def text_view(view): view( <div id=\"textview\"></div> ) def map_create(self, open_map): dict = {"0":"hole.png", "1":"carpet.png", "2":"dansa1.png", "3":"dansa2.png", "4":"dansa3.png", "5":"dansa4.png", "9":"cola2.png" self.response.out.write("<html>") self.response.out.write("<head>") self.response.out.write("<meta charset=\"utf-8\">") self.response.out.write("<title> </title>") self.response.out.write("<script type=\"text/javascript\" src=\"js/jquery min.js\"> </script>") self.response.out.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/main.css\">") self.response.out.write("<style type= text/css >\n<!--\n") for y in range(len(open_map)): for x in range(len(open_map[y])): self.response.out.write( tr.imagebox td#m%s{ background-image: url(data/%s); width: 32px; height: 32px; 28

32 % (str(y)+ _ +str(x), dict[open_map[y][x]])) self.response.out.write("-->\n</style>") self.response.out.write("</head>\n") self.response.out.write("<body>\n") self.response.out.write("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">") for y in range(len(open_map)): self.response.out.write("<tr class=\"imagebox\">") for x in range(len(open_map[y])): self.response.out.write("<td id=\"m%s\"><img src=\"data/toumei.png\"></td>\n" % (str(y)+"_"+str(x))) self.response.out.write("</tr>\n") self.response.out.write("</table>") text_field(self.response.out.write) comm_text(self.response.out.write) text_view(self.response.out.write) self.response.out.write("<script type=\"text/javascript\" src=\"js/main.js\"></script>") def map_create_last(self): self.response.out.write("</body>") self.response.out.write("</html>") class Map01(webapp.RequestHandler): def get(self): self.map = load_map( 01.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 8; var x = 8; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 01</p> <a href=\" </a><div> ) map_create_last(self) class Map02(webapp.RequestHandler): 29

33 def get(self): self.map = load_map( 02.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 3; var x = 4; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 02</p> <a href=\" </a><div> ) map_create_last(self) class Map03(webapp.RequestHandler): def get(self): self.map = load_map( 03.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 5; var x = 6; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 03</p> <a href=\" </a><div> ) map_create_last(self) class Map04(webapp.RequestHandler): def get(self): self.map = load_map( 04.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 5; var x = 12; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 04</p> 30

34 <a href=\" </a><div> ) map_create_last(self) class Map05(webapp.RequestHandler): def get(self): self.map = load_map( 05.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 12; var x = 9; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 05</p> <a href=\" </a><div> ) map_create_last(self) class Map06(webapp.RequestHandler): def get(self): self.map = load_map( 06.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 13; var x = 8; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 06</p> <a href=\" </a><div> ) map_create_last(self) class Map07(webapp.RequestHandler): def get(self): self.map = load_map( 07.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 12; 31

35 var x = 11; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 07</p> <a href=\" </a><div> ) map_create_last(self) class Map08(webapp.RequestHandler): def get(self): self.map = load_map( 08.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 11; var x = 3; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 08</p> <a href=\" </a><div> ) map_create_last(self) class Map09(webapp.RequestHandler): def get(self): self.map = load_map( 09.txt ) map_create(self, self.map) self.response.out.write( <script type="text/javascript" language="javascript"> var y = 8; var x = 1; $(\ td#m + y + _ + x + img\ ).attr("src","data/andrew.png"); </script> ) self.response.out.write( <div class=\"link\"><hr><p>stage 09</p> <a href=\" </a><div> ) map_create_last(self) class Index(webapp.RequestHandler): def get(self): 32

36 self.response.out.write( <html> <head> <META http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="css/ex.css"> <title> index</title> </head> <body> <h1> Web </h1> <hr> <h2> </h2> Debian 6.0.3<br> Google Chrome <br> Firefox 8.0<br> <br> CentOS release 5.3 (Final)<br> Mozilla/5.0 (X11; U; Linux i686; ja; rv: ) Gecko/ CentOS/ el5.centos Firefox/3.0.6<br> <br> Microsoft(R)Windows Version 5.1 (Build 2600 xpsp_sp3_gdr :service Pack 3)<br> Firefox 4.0.1<br> <br> <hr> <h2> </h2> <h3> </h3> <li> <img src="data/andrew.png" width="32" height="32" alt=" ">( ) <img src="data/cola2.png" width="32" height="32" alt=" "> GET </li> <li>stage <img src="data/dansa1.png" width="32" height="32" alt=" "> <img src="data/dansa3.png" width="32" height="32" alt=" "> </li> <li> GET </li> <li>stage <img src="data/hole.png" width="32" height="32" alt=" "> GAME OVER </li> <li> </li> <h3> </h3> <li> </li> 33

37 <li> 24 </li> <li><button> </button> </li> <li> <button> 1 </button> </li> <li><button> 1 </button> </li> <li>top TOP </li> <br> <h4> </h4> <li><button> </button> </li> <li><button> </button> </li> <li><button> </button> </li> <li><button> </button> </li> <br> <li><button> </button> </li> <li><button> </button> </li> <li><button> </button> </li> <li><button> </button> </li> <br> <li><button>1 </button> </li> <li><button> </button> </li> <br> <li> </li> <img src="data/command.png" alt=" "> <hr> "></td> <h3>stage </h3> <table> <tr> <td class="image"><img src="data/carpet.png" width="32" height="32" alt=" <td><li> </li> <li> </li> <li> </td> </tr> "></td> <tr> <td class="image"><img src="data/hole.png" width="32" height="32" alt=" <td><li> GAME OVER </li> <li> </li></td> </tr> 34

38 "></td> </li></td> <tr> <td class="image"><img src="data/cola2.png" width="32" height="32" alt=" <td><li> </li> <li> GET <li> </li> <li> GET </tr> <tr> <td class="image"><img src="data/dansa1.png" width="32" height="32" alt=" "><br> <img src="data/dansa2.png" width="32" height="32" alt=" "></td> <td><li> 1 2 </li> <li> </li> <li> </li> </td> </tr> <tr> <td class="image"><img src="data/dansa3.png" width="32" height="32" alt=" "><br> <img src="data/dansa4.png" width="32" height="32" alt=" "></td> <td><li> </li> <li> </li> <li> 3 4 </li></td> </tr> </table> <br> <hr> <h3 id="index">stage </h3> <p> STAGE </p> <a href=" 01</a> <a href=" style="text-decoration: none;"> 35

39 <img src="data/stage01.png" width="32" height="32" alt="stage01"></a> <a href=" 04</a> <a href=" style="text-decoration: none;"> <img src="data/stage04.png" width="32" height="32" alt="stage04"></a> <a href=" 07</a> <a href=" style="text-decoration: none;"> <img src="data/stage07.png" width="32" height="32" alt="stage07"></a><br> <a href=" 02</a> <a href=" style="text-decoration: none;"> <img src="data/stage02.png" width="32" height="32" alt="stage02"></a> <a href=" 05</a> <a href=" style="text-decoration: none;"> <img src="data/stage05.png" width="32" height="32" alt="stage05"></a> <a href=" 08</a> <a href=" style="text-decoration: none;"> <img src="data/stage08.png" width="32" height="32" alt="stage08"></a><br> </html> ) </body> <a href=" 03</a> <a href=" style="text-decoration: none;"> <img src="data/stage03.png" width="32" height="32" alt="stage03"></a> <a href=" 06</a> <a href=" style="text-decoration: none;"> <img src="data/stage06.png" width="32" height="32" alt="stage06"></a> <a href=" 09</a> <a href=" style="text-decoration: none;"> <img src="data/stage09.png" width="32" height="32" alt="stage09"></a><br><br> <hr> def main(): application = webapp.wsgiapplication([( /, Index), ( /map01, Map01), ( /map02, Map02), ( /map03, Map03), ( /map04, Map04), ( /map05, Map05), ( /map06, Map06), ( /map07, Map07), ( /map08, Map08), ( /map09, Map09), 36

40 ], debug=true) wsgiref.handlers.cgihandler().run(application) if name == " main ": main() A.2 main.js <!-- var list = new Array(); var command_max = 24; var decision = 0; var nocount = 0; var id_el = textview ; var str; var move; var jump_move; var jump = 0; var count = 1; var i = 0; //---get the background-imgae path // //var carpet = "url( //var hole = "url( //var cola = "url( //var dansa1 = "url( //var dansa2 = "url( //var dansa3 = "url( //var dansa4 = "url( //Chrome var carpet = "url( var hole = "url( var cola = "url( var dansa1 = "url( var dansa2 = "url( var dansa3 = "url( var dansa4 = "url( 37

41 //Firefox var f_carpet = "url(\" var f_hole = "url(\" var f_cola = "url(\" var f_dansa1 = "url(\" var f_dansa2 = "url(\" var f_dansa3 = "url(\" var f_dansa4 = "url(\" // function Koshin(){ location.reload(); function execution_after_alert(){ alert(" [ ] TOP "); function call_alert(){ alert(" [ ] TOP "); function not_goal_alert(){ alert(" ") alert(" "); function goal_alert(){ alert(" GET "); function hole_alert(){ alert(" "); alert(" "); alert("game OVER"); function text_view(id){ var el_id = document.getelementbyid(id); var text = document.createtextnode(str); 38

42 el_id.appendchild(text); function commandclear(id){ if(document.getelementbyid){ var obj=document.getelementbyid(id); if(obj.lastchild) obj.removechild(obj.lastchild); function one_clear(id){ if(decision == 0){ commandclear(id); list.pop(); i--; else{ call_alert(); function allcommandclear(id){ var obj=document.getelementbyid(id); while (obj.firstchild) obj.removechild(obj.firstchild); function all_clear(id){ if(decision == 0){ if(list.length == 0){ alert(" "); else{ alert(" "); list.length = 0; allcommandclear(id); i = 0; else{ execution_after_alert(); function input(key, id) { 39

43 if(decision == 0){ if (key == "w" "a" "d" "s" "k" "j" "h" "l") { if(i < command_max){ nocount = 1; list[i] = key; i = i + 1; if(key == "w"){ str = " "; text_view(id); else if(key == "a"){ str = " "; text_view(id); else if(key == "s"){ str = " "; text_view(id); else if(key == "d"){ str = " "; text_view(id); else if(key == "k"){ str = " "; text_view(id); else if(key == "j"){ str = " "; text_view(id); else if(key == "h"){ str = " "; text_view(id); else if(key == "l"){ str = " "; text_view(id); else{ alert(" "); else{ alert(" "); else{ alert(" "); else{ execution_after_alert(); 40

44 function js_notmove(){ if(move == "w"){ y = y + 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); else if(move == "s"){ y = y - 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); else if(move == "a"){ x = x + 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); else if(move == "d"){ x = x - 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); function js_jump_notmove_carpet(){ if(jump_move == "k"){ y = y + 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); else if(jump_move == "j"){ y = y - 1; 41

45 alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); else if(jump_move == "h"){ x = x + 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); else if(jump_move == "l"){ x = x - 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); function js_jump_notmove_dansa(){ if(jump_move == "k"){ y = y + 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); else if(jump_move == "j"){ y = y - 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); else if(jump_move == "h"){ x = x + 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); 42

46 else if(jump_move == "l"){ x = x - 1; alert(" "); if(list.length == count){ not_goal_alert(); call_alert(); function dansa1_2(){ if(jump == 0){ js_notmove(); if(jump_move == "k" jump_move == "j" jump_move == "h" jump_move == "l"){ jump = 1; if(list.length == count){ not_goal_alert(); call_alert(); else if(jump == 1){ js_jump_notmove_carpet(); if(list.length == count){ not_goal_alert(); call_alert(); else if(jump == 2){ if(move == "d" move == "a" move == "w" move == "s"){ jump = 1; if(list.length == count){ not_goal_alert(); call_alert(); js_jump_notmove_carpet(); function dansa3_4(){ if(jump == 0){ js_notmove(); js_jump_notmove_dansa(); 43

47 else if(jump == 1){ js_notmove(); if(jump_move == "k" jump_move == "j" jump_move == "h" jump_move == "l"){ jump = 2; if(list.length == count){ not_goal_alert(); call_alert(); else if(jump == 2){ js_jump_notmove_carpet(); if(list.length == count){ not_goal_alert(); call_alert(); function event(){ var backimgname = ($( td#m + y + _ + x + ).css( background-image )); // if(backimgname == cola backimgname == f_cola){ if(move == "d" move == "a" move == "w" move == "s"){ if(list.length == count){ goal_alert(); call_alert(); js_jump_notmove_carpet(); // else if(backimgname == carpet backimgname == f_carpet){ if(jump == 0 jump == 1){ if(move == "d" move == "a" move == "w" move == "s"){ jump = 0; if(list.length == count){ not_goal_alert(); call_alert(); js_jump_notmove_carpet(); else if(jump == 2){ if(move == "d" move == "a" move == "w" move == "s"){ jump = 0; 44

48 alert(" ") if(list.length == count){ not_goal_alert(); call_alert(); js_jump_notmove_carpet(); // else if(backimgname == hole backimgname == f_hole){ list.length = 0; list.length = 1; hole_alert(); call_alert(); // else if(backimgname == dansa1 backimgname == f_dansa1){ dansa1_2(); else if(backimgname == dansa2 backimgname == f_dansa2){ dansa1_2(); else if(backimgname == dansa3 backimgname == f_dansa3){ dansa3_4(); else if(backimgname == dansa4 backimgname == f_dansa4){ dansa3_4(); function andrew_view_and_move(){ for(k in list){ if(list[k] == "d"){ $( td#m + y + _ + x + img ).attr("src","data/toumei.png"); move = "d"; jump_move = ""; x = x + 1; event() count = count + 1; $( td#m + y + _ + x + img ).attr("src","data/andrew_right.png"); else if(list[k] == "a"){ $( td#m + y + _ + x + img ).attr("src","data/toumei.png"); move = "a"; 45

49 jump_move = ""; x = x - 1; event(); count = count + 1; $( td#m + y + _ + x + img ).attr("src","data/andrew_left.png"); else if(list[k] == "w"){ $( td#m + y + _ + x + img ).attr("src","data/toumei.png"); move = "w"; jump_move = ""; y = y - 1; event(); count = count + 1; $( td#m + y + _ + x + img ).attr("src","data/andrew_top.png"); else if(list[k] == "s"){ $( td#m + y + _ + x + img ).attr("src","data/toumei.png"); move = "s"; jump_move = ""; y = y + 1; event(); count = count + 1; $( td#m + y + _ + x + img ).attr("src","data/andrew.png"); else if(list[k] == "k"){ $( td#m + y + _ + x + img ).attr("src","data/toumei.png"); jump_move = "k"; move = ""; y = y - 1; event(); count = count + 1; $( td#m + y + _ + x + img ).attr("src","data/andrew_top.png"); else if(list[k] == "j"){ $( td#m + y + _ + x + img ).attr("src","data/toumei.png"); jump_move = "j"; move = ""; y = y + 1; event(); count = count + 1; $( td#m + y + _ + x + img ).attr("src","data/andrew.png"); else if(list[k] == "h"){ 46

50 $( td#m + y + _ + x + img ).attr("src","data/toumei.png"); jump_move = "h"; move = ""; x = x - 1; event(); count = count + 1; $( td#m + y + _ + x + img ).attr("src","data/andrew_left.png"); else if(list[k] == "l"){ $( td#m + y + _ + x + img ).attr("src","data/toumei.png"); jump_move = "l"; move = ""; x = x + 1; event(); count = count + 1; $( td#m + y + _ + x + img ).attr("src","data/andrew_right.png"); function execute(){ var k; if(decision == 0){ decision = 1; if(list[i] == "w" "a" "d" "s" "k" "j" "h" "l"){ andrew_view_and_move(); if(list.length == 0){ alert(" "); else{ execution_after_alert(); $(document).ready(function(){ $("input#zikkou").click(function () { $("input#koshin").show("slow"); ); ); $(document).ready(function(){ $("input#zikkou").click(function () { 47

51 $("input.button").hide("slow"); ); ); //--> 48

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html