endo yuta blog

CSS - jQueryで垂直中央に配置する

2012-01-31T23:56:00.000+09:00

jQueryを使ってボタンを親要素の高さの真ん中に配置したいと思います。単純なことですが、ちょっとはまったので、切り出して試しました。cssでheightを100%にするの忘れてたり、jQueryでtopを設定するときに'px'の２文字を入れ忘れたりしていただけでしたが、せっかく切り出して試したのでメモります。

下記のコードはブラウザで上記のような画面になります。まさしくボタンが中央に配置されています。

Html


<div id="box">
     <ul>
          <li class="a">aaaaaa
          <li class="b">bbbbbb
          <li class="c"><input id="btn" type="button" value="cccccc" />
     </ul>
</div>

css


#box{
     height:150px;
     background-color:#333;
     width:400px;
}
ul{
     margin:0;
     padding:0 10px;
     list-style-type: none;
     height:100%;
}
li{
     float:left;
}
.a{
     width:100px;
     background-color:#f00;
     height:100%;
}
.b{
     width:150px;
     background-color:#0f0;
}
.c{
     width:100px;
     background-color:#00f;
     height:100%;
     position:relative;
}
#btn{
     position:absolute;
}

javascript


$(function(){
     $(document).ready(function(){
          var btnh = $('#btn').outerHeight(true);
          var ch = $('.c').outerHeight(true);
          $('#btn').css('top',(ch-btnh)/2+'px');
     });
});

jQuery+CSS3サンプル

2012-01-30T03:11:00.000+09:00

jQueryとCSS3を使ったサイトのサンプルを作ってみました。

jQueryをちょっとばかにしてたけどかなり色々できて面白い。スマホだとIE対応等の為に重くなっているらしいので、もっと軽いjQueryみたいなやつが沢山でているそうです。同じような使い方であることを祈ります。

このサンプルは、ここで見られます。

このサンプルは、画面がロードされるとメニューが横から飛んできます。メニューはアコーディオンになっていて、アクティブなメニューと非アクティブなメニューで色分けされます。後は、ローダーもspinnerというプラグインを使って入れてみました。このプラグインは分かり易いし便利です。あとは、ポップアップしてFacebookみたいに登録完了を告げてちょっとしたらポップアップが消えていくようにしました。インターネットが重い場合は、最初のメニューが横から飛んでくる前に画面に表示されちゃうかもしれません。最初は透明にするなりしておけばよかった。

html


<!DOCTYPE html> 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Test</title>
<link href='http://fonts.googleapis.com/css?family=Fascinate|Sirin+Stencil|Walter+Turncoat|Medula+One|Coming+Soon|Sunshiney|Quantico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./css/p13.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.spinner.js"></script>
<script type="text/javascript" src="./js/p13.js"></script>
</head>

<body>
<div id="box1">
<h1 id="t"><a href="./">TEST</a></h1>
<div id="box2">
<div class="m" id="a">aaaaaa</div>
<div class="smb">
    <div class="sm" id="a1">111111</div>
    <div id="a1c"><form action="" method="post">
        HogeWord <input type="text" id="a1t" />
        <input type="submit" value="submit" id="a1s" /></form>
        <div id="a1cc"></div>
    </div>
    <div class="sm" id="a2">222222</div>
</div>
<div class="m" id="b">bbbbbb</div>
<div class="m" id="c">cccccc</div>
</div>
</div>
</body>

</html>

p13.css


body {
    background: #000;
    color: #fff;
    font-family: 'Quantico', cursive;
    font-size:13px;
    margin: 5px;
}

a{
    color:#fa0;
    text-decoration:none;
}
h1, h2, h3, h4 {
    font-weight: normal;
    margin:0;
}
h1#t{
    text-shadow:0 0 1px #fff,0 0 3px #0ac,0 0 5px #0ac,0 0 7px #0cf,0 0 9px #0cf;
    margin:20px 0 10px 0;
}
h1#t a{color:#fff;}

#box1{
    margin:0 auto;
    width:600px;
    height:100%;
    padding:0 0 5px 5px;
    text-align:center;
}
#box2{
    position:relative;
}

.m{
    color:#000;
    background-color:#666;
    padding:3px;
    margin: 0 0 10px 0;
    position:relative;
    height:40px;
    cursor:pointer;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background: -moz-linear-gradient(left top, #f0a,#fa0 50%,#0f0);
    background: -webkit-gradient(linear,left top,right bottom,from(#f0a),color-stop(0.5,#fa0),to(#0f0));
}
.mn{
    background: -moz-linear-gradient(left top, #111,#666 50%,#111);
    background: -webkit-gradient(linear,left top,right bottom,from(#111),color-stop(0.5,#666),to(#111));
    color:#999;
}
.mh{
    background: -moz-linear-gradient(left top, #f3c,#fc3 50%,#3f3);
    background: -webkit-gradient(linear,left top,right bottom,from(#f3c),color-stop(0.5,#fc3),to(#3f3));
}

.smb{
    display:none;
}
.sm{
    color:#000;
    background-color:#666;
    padding:3px;
    margin: 0 0 10px 0;
    position:relative;
    height:20px;
    cursor:pointer;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background: -moz-linear-gradient(left top, #345,#9dd 50%,#345);
    background: -webkit-gradient(linear,left top,right bottom,from(#345),color-stop(0.5,#9dd),to(#345));
}
.smh{
    background: -moz-linear-gradient(left top, #567,#bff 50%,#567);
    background: -webkit-gradient(linear,left top,right bottom,from(#567),color-stop(0.5,#bff),to(#567));
}
#a1c{
    display:none;
}
#a1c form{
    margin:10px;
}
#a1cc{
    text-align:left;
}

.subox{
    position:relative;
    display:none;
    margin:0 20px;
    border-bottom:1px solid #ccc;
    width:560px;
}
.subox ul{
    margin:0;
    padding:0 10px;
    list-style-type: none;
}
.sbn{
    float:left;
    padding:0;margin:0;
    width:450px;
}
.sbb{
    float:left;
    padding:0;margin:0;
    width:90px;
}

.popup{
    font-size:12px;
    color:#000;
    background-color:#fff;
    top:0px;
    left:450px;
    display:none;
    position:absolute;
    padding:2px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    background: -moz-linear-gradient(left top, #ccc,#fff 50%,#ccc);
    background: -webkit-gradient(linear,left top,right bottom,from(#ccc),color-stop(0.5,#fff),to(#ccc));
    z-index:10;
}

.clearfix:after{display:block; clear:both; height:0; line-height:0; visibility:hidden;
    content:"."; font-size:0.1em;}
.clearfix{display:inline-block;}

p13.js


$(function(){
    $(document).ready(function(){set_menu();});
    $('.m').mouseover(function(){hover_menu($(this));})
        .mouseout(function(){hover_menu($(this));});
    $('.m').click(function(){open_menu($(this).attr('id'));});
    $('.sm').live('mouseover',function(){hover_sm($(this));})
        .live('mouseout',function(){hover_sm($(this));});
    $('#a1').live('click',function(){a1();});
    $('#a1s').live('click',function(){a1s();return false;});
    $('.b').live('click',function(){b($(this).attr('name'));});
});

function set_menu(){
    var x = getx($('.m'));
    $('.m').css('left',x).show();
    $('#a').animate({left:'0'},'first','swing',function(){
        $('#b').animate({left:'0'},'first','swing',function(){
            $('#c').animate({left:'0'},'first','swing');
        });
    });
}

function hover_menu(th){
    th.toggleClass('mh');
}

function open_menu(id){
    var num_mn = $('.mn').size();
    var num_m = $('.m').size();
    if(num_mn > 0) $('.m[id="'+id+'"]').toggleClass('mn');
    $('.m[id!="'+id+'"]').addClass('mn');
    num_mn = $('.mn').size();
    if(num_mn==num_m) $('.m').removeClass('mn');
    
    $('.m[id="'+id+'"]+.smb').slideToggle('first');
    $('.m[id!="'+id+'"]+.smb').slideUp('first');
}

function hover_sm(th){
    th.toggleClass('smh');
}

function a1(){
    $('#a1c').slideToggle('first');
}

function a1s(){
    if(!($('#a1t').val())) return;
    var opts = {
        position: 'center',
        hide: true,
        onFinish: function(){a1cc($('#a1t').val());}
    };
    $('#a1s').spinner(opts);
    setTimeout(function() {
        $('#a1s').spinner('remove');
    }, 1000);
}

function a1cc(val){
    $('#a1cc').empty();
    for(var i=0;i<5;i++){
        $('#a1cc').append('<div class="subox clearfix"><ul><li class="sbn">'+val+i+'<li class="sbb"><input type="button" class="b" name="'+i+'" value="put" /></ul></div>');
    }
    var x = getx($('.subox'));
    $('.subox').each(function(idx,ele){
        $(this).css('left',x-100*idx).show().animate({left:'0'},'slow','swing');
    });
    
}

function b(name){
    var opts = {
        position: 'center',
        hide: true,
        onFinish: function(){popup($('.b[name="'+name+'"]'));}
    };
    $('.b[name="'+name+'"]').spinner(opts);
    setTimeout(function() {
        $('.b[name="'+name+'"]').spinner('remove');
    }, 1000);
}

function popup(th){
    th.after('<div class="popup"></div>')
        .next().append('登録しました')
        .fadeIn('slow',function(){
            setTimeout(function(){
                th.next().fadeOut('slow');
            },1000);
        });
}

function getx(ele){
    var c = $('#container').outerWidth(true);
    var w = getw();
    if(w>c){
        return (w-c)*-0.5-ele.outerWidth(true)-50;
    }else{
        return -ele.outerWidth(true)-50;
    }
}

function getw ( ) {
    if ( window.innerWidth ) { return window.innerWidth; }
    else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; }
    else if ( document.body ) { return document.body.clientWidth; }
    return 0;
}

消費税増税

2012-01-29T16:28:00.000+09:00

国には予算があり、予算に基づいて僕らにいいことしてくれます。でも予算が税収を大きく上回っております。

１２年度予算案の一般会計総額は９０兆３３３９億円。新規国債発行額は４４兆２４４０億円と政府の財政健全化目標を守ったが、国債への依存度は４９．０％とほぼ半分に達し、当初予算ベースで過去最悪を更新した。過去に編成した補正予算も含めると、国債発行額が税収見通しを上回るのは４年連続。

税収が40兆円くらいしかないから、国債を予算の穴埋めをするために新規で44兆円発行したのかなと思ってるんだけどあってるかな？でもこれ見ると国は特別会計っていうのがあって、ひっくるめると１年間で２２０兆円使ってるらしい。なんだか分からなくなてきた。国債の利払いとかも特別会計なのかしら。もうちょい調べないと全然わからないや。なにしろ、金ないし、借金も限界やし、税金もっととらないとどうしようもないし、一番インパクトあるのは消費税やし、ということまでは分かったと言えるのだろうか？でも消費税増税しても、220兆円から考えるとまだインパクト少ないし、これから全体的にどうするのかは分からんし、ということだろうか？

cakePHP1.3でデータベース操作の研究（MySQL）（２）

2012-01-22T14:41:00.000+09:00

今回はまだ調べてないデータベース操作を試してみます。試したいのは、テーブルを検索するときにフィールドの条件にリストを使うこと。リストを使う場合に部分一致が可能かどうかというのも試したい。あと、日付関連のデータをテーブルに格納する最適な方法と、格納されたテーブルの最適な検索等の方法を調べたい。

今回は、前回の英単語帳ではなく極めてシンプルなテーブル構成にしたい。テーブルは１つだけあり、名前はusersである。cakePHPのモデル名はよってUserになる。ちなみにモデルのファイル名は、user.phpである。フィールドは、id、name、have、wantの４フィールドを持つ。idはプライマリキーでauto_incrementにする。単なるテストなので、idは適当にmediumint(9)にしてある。nameはvarchar(50)で、haveとwantはtextにした。

今回のお試し用に作成した、test_controller.phpの全文は下記のとおり。


<?php 
class TestController extends AppController{
    public $name = 'test';
    public $uses = array('User');
 
    public function index(){
        $this->del();
        $this->put_user();
        $result = $this->search();
        $this->set('result',$result);
    }
 
    private function put_user(){
        $put_cnt = 2;
        for($i=0;$i<$put_cnt;$i++){
            if($i==0){
                $data = array('User' => array(
                    'name' => $i,
                    'have' => '1,2,3,4',
                    'want' => '5,6,7,8'
                ));
            }else{
                $data = array('User' => array(
                    'name' => $i,
                    'have' => '5',
                    'want' => '1'
                ));
            }
            $this->User->create();
            $this->User->save($data);
        }
    }
 
    private function del(){
        $user = $this->User->find('all',null);
        foreach($user as $u){
            $this->User->delete($u['User']['id']);
        }
    }
 
    private function search(){
        $user = $this->User->findByName('0');
        $list_h = $this->str_to_list($user['User']['have']);
        $list_w = $this->str_to_list($user['User']['want']);
 
        $params = array(
            'conditions' => array(
                'User.have' => $list_w,
                'User.want' => $list_h
        ));
        $user = $this->User->find('all',$params);
        return $user;
    }
 
    private function str_to_list($str){
        if($str == ''){
            return array();
        }else{
            return split(",", $str);
        }
    }
}
?>

indexにアクセスする度に全データが削除されて、put_userに指定されたとおりにユーザが作成される。上記だと２ユーザ作成される。haveとwantにそれぞれ指定の文字列を格納している。文字列は数字をカンマ区切りで繋げたものになっている。ユーザを作成したら、一番最初に作成されたユーザ（name==0)のhaveとwantを取り出し、それぞれ、カンマ区切り文字列をリストに変換している。変換したリストを使ってユーザデータを検索している。その検索結果をViewにセットして終了。

上記はうまくいった。findのconditionsに、リストを使うこと自体は全く問題ないのだ。しかし、これは部分一致ではないようだ。リストの各要素と完全に一致する場合のみヒットしている。部分一致といえばLikeというのがあるが、試したところエラーになった。

SQL Error: 1064: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'IN ('5', '6', '7', '8') AND `User`.`want` LIKE IN ('1', '2', '3', '4')' at line 1 [CORE/cake/libs/model/datasources/dbo_source.php, line 684]

リストを使うとSQL的にはIN(1,2,3)というような文を使うことになるようだ。どうもこのINにはLikeは使えないらしい。INでなければLikeは使えた。あとは正規表現だなと思って調べたところ一応あるらしい。結構簡単そうだ。Likeよりも強力なRLIKEだ。REGEXPが正式名称っぽいがどっちでもいいらしいので、簡単なRLIKEにしたいと思う。とはいえこれも恐らくINには使えないだろう。一応試してみよう。

やっぱり使えなかった。ということは、部分一致をリストで使う場合は、リストを使わずに正規表現だけでやらないといけないのだ。それならきっとできるだろう。正規表現にはこういう表記法がある。'abc|ab'これはabcかabにマッチするのだ。でもこれは連続して使えるのかな？使えなそうだ。どうしたらいいのだ！？まあ一応試してみよう。

おお！エラーがでない！SQLではこうなってるようだ。どうやらこれでいいようだ。

SELECT `User`.`id`, `User`.`name`, `User`.`have`, `User`.`want` FROM `users` AS `User` WHERE `User`.`have` REGEXP '5|6|7|8' AND `User`.`want` REGEXP '1|2|3|4'

ということは、ユーザのhaveとwantの文字列を最初からカンマ区切りではなくて、"|"区切りにしておけば実に効率的だろう。一応試してみよう。修正版のコントローラー全文は下記になります。


<?php 
class TestController extends AppController{
    public $name = 'test';
    public $uses = array('User');
    
    public function index(){
        $this->del();
        $this->put_user();
        $result = $this->search();
        $this->set('result',$result);
    }
    
    private function put_user(){
        $put_cnt = 2;
        for($i=0;$i<$put_cnt;$i++){
            if($i==0){
                $data = array('User' => array(
                    'name'    => $i,
                    'have'    => '1|2|3|4',
                    'want'    => '5|6|7|8'
                ));
            }else{
                $data = array('User' => array(
                    'name'    => $i,
                    'have'    => '5|6',
                    'want'    => '7|8|1'
                ));
            }
            $this->User->create();
            $this->User->save($data);
        }
    }
    
    private function del(){
        $user = $this->User->find('all',null);
        foreach($user as $u){
            $this->User->delete($u['User']['id']);
        }
    }
    
    private function search(){
        $user = $this->User->findByName('0');
        
        $params = array(
            'conditions' => array(
                'User.have REGEXP'    => $user['User']['want'],
                'User.want REGEXP'    => $user['User']['have']
        ));
        $user = $this->User->find('all',$params);
        return $user;
    }
}
?>

日付関連のデータ

次は日付関連のデータになります。テーブルを作成した日時とか更新した日時とかを入れておいて新しい順に表示するとか、古い順に削除するとかそういうことをしたい場合に使います。もちろん、作成日時とか更新日時とかを表示したい場合も使います。さて、いつかどこかのサイトで超簡単にやれる方法をちらっと見た気がするのでそれを探してきます。どこだったかなあ。

ありました！3.7.2.3 created と modifiedにありました。このページに下記のように記載されています。

データベースのテーブル内で datetime フィールドとして created または modified フィールドを定義すると、CakePHP はそれらのフィールドを認識し、レコードがデータベースに作成・更新されるときに自動的に埋め込まれます（保存されるデータが既にこれらのフィールドの値を含んでいる場合を除いて）。
created や modified フィールドは、レコードが一番初めに追加されたときに、現在日時をセットします。modified フィールドは、すでに存在するレコードが保存されたときに、現在日時で更新されます。
注意: フィールド名 updated は modified と同じ振る舞いをします。これらのフィールドは、datetime フィールドである必要があり、デフォルト値として CakePHP で認識される NULL をセットします。

もしModel::save()の直前に$this->dataがupdated、created、modifiedなどの値を（Model::readやModel::setを経由して）保持しているなら、これらは自動的に更新されることはなく、$this->dataから値をとってくることになります。

では、上記を参考にやってみたいと思う。まずは、usersテーブルにフィールドを追加しよう。まあusersしかないし、上のコードだとほぼ同時に２つのuserを作成するのだから、実質的な意味はないが、とりあえず自動的にcreatedにセットされるかを試してみて、うまくいったら終了としよう。usersにはcreatedフィールドを追加します。datetimeフィールドにし、初期値をnullにしておきます。

うまくいった。

cakePHP1.3でデータベース操作の研究（MySQL）

2012-01-17T01:04:00.000+09:00

cakePHPのデータベース操作を研究します。データベースはMySQLです。cakePHPのバージョンは1.3を使ってます。cakePHPはバージョン毎に結構変化が色々あるようなので、cakePHP2.0との違いは早く調べておこうと思います。どんなデータをつくるかというと、分かり易いのがいいので英単語帳をイメージしてテーブルを作ってみます。

テーブル構成

テーブル構成は下記を想定してます。言葉遣いが間違っている可能性はありますが、iuwは、uwとiwを参照します。uwはuserとwordを参照します。cakePHPのJOINの構文を見ると、wordはuwを沢山持っていると言います。word hasmany uwとなります。逆にiuwはuwに属するといいます。iuw belongsTo uwとなります。

各テーブルの項目

各テーブルのフィールドは下記を想定しています。テスト機能つけたり色々一応想定して項目をつけました。まあ全部つくるか分かりませんがモチベーションが続くまで研究してみます。

users	id,name,image,discription
words	id,word
imis	id,imi
uws	id,user_id,word_id,count,seitouritsu,seigo
iws	id,imi_id,word_id,goodcnt,badcnt
iuws	id,uw_id,iw_id

トランザクション

トランザクションを使うための準備をします。app/models内にtransaction.phpを作ります。

Transactionモデル


<?php
class Transaction extends AppModel {
    var $useTable = false;

    function begin () {
        return $this->getDataSource()->begin($this);
    }

    function commit () {
        return $this->getDataSource()->commit($this);
    }

    function rollback () {
        return $this->getDataSource()->rollback($this);
    }
}
?>

トランザクションの動作確認をします。

コントローラー


//$usersにTransactionを入れるのを忘れないようにする
public $uses = array('User','Word','Imi','Uw','Iw','Iuw','Transaction');

//トランザクションの実験（動作確認）
public function tora(){
 $word = 'hogehgoe';
 
 //トランザクション開始
 $this->Transaction->begin();
 
 //wordの登録
 $word_data = array('Word' => array('word' => $word));
 if(!($this->Word->save($word_data))){
  $this->_renderJson(0); return;
 }
 
 //$this->Transaction->commit();
 $this->Transaction->rollback();
 
 $this->_renderJson(1);
}

動きました。上記はコミットをコメントアウトしてロールバックしているので、データは登録されませんでした。コミットすると登録されました。

データの検索

最もシンプルな検索方法


$word_data = $this->Word->findByWord($word);

二番目にシンプルな検索方法


$conditions = array(
 'Iw.imi_id' => $imi_id,
 'Iw.word_id' => $word_id);
$iw_data = $this->Iw->find($conditions);

三番目にシンプルな検索方法


$params = array('conditions' => array(
 'Uw.user_id' => $user_data->id,
 'Uw.word_id' => $word_id));
$uw_data = $this->Uw->find('first',$params);

高機能な検索方法


//IwにIuwを持たせる（バインド設定）
$this->Iw->bindModel(array('hasMany'=>array('Iuw')));
$params = array(
 'conditions'  => array('Iw.word_id' => $word_id),
 'recursive'    => 3,
 'limit'     => 20,
 'order'     => 'goodcnt DESC');
//Iwデータ及びIuwデータの取得
$data = $this->Iw->find('all',$params);

recursiveは、検索するときの結合の深さになります。上記のケースですと、bindModelを使って、IwにIuwを持たせています。また、下記に記載しますが、モデル間のbelongsToの関係のみ、各モデル側で事前設定しています。よって、この検索結果は、下記のようになります。

「該当する全てのIwには、(1)Iwが持っているIuwと、(2)Iuwが属しているIwとUwと、(3)Iwが属しているWordとImi、Uwが属しているUserとWordが付いてきます。」

超分かりにくいですが、(1)->(2)->(3)の具合で階層が深くなっている様です。超分かりにくいです。

ちなみに、belongsToについてのみ各モデル側で事前に下記のように設定しています。


<?php 
class Iuw extends AppModel{
 var $name = 'Iuw';
    
    var $belongsTo = array(
        'Iw' => array(
            'className'     => 'Iw',
            'foreignKey'    => 'iw_id',
            'limit'        => '5',
        ),
        'Uw' => array(
            'className'     => 'Uw',
            'foreignKey'    => 'uw_id',
            'limit'        => '5',
        )
    );
}
?>

上記はIuwモデルクラスです。iuw.phpの中身になります。iuwはuwとiwに属するので２つ$belongsToに設定しています。

データの削除


//wordを削除
if(!($this->Word->delete($word_id))){
 return 'error delete word';
}

データの更新

パターン１


//ユーザーのword_countに登録
$this->User->id = $user_id;
$this->User->saveField('word_count',$word_count);

パターン２


//uwを更新
$uw_data = array('Uw' => array(
 'id'  => $uw_id,
 'count'  => $uw_count,
 'right_count' => $uw_right,
 'seitouritsu' => $uw_seitouritsu,
 'seigo'  => $uw_seigo));
if(!($this->Uw->save($uw_data))){
 return 'error save Uw';
}

プライマリーキーが含まれていればsaveでも更新になる。

データの登録


$iw_data = array('Iw' => array(
 'imi_id'  => $imi_id,
 'word_id' => $word_id));
if(!($this->Iw->save($iw_data))){
 return 'error save Iw';
}

order =>rand()


//テストの問題を出す（データをランダムに一つ返すだけ）
public function test_get_word(){
 $user_data = $this->_first_action();
 //バインド設定（UwにIuwを持たせる）
 $this->Uw->bindModel(array('hasMany'=>array('Iuw')));
 //uwを取得する
 $params = array(
  'conditions' => array('user_id' => $user_data->id),
  'order' => 'rand()',
  'recursive'  => 3);
 $uw_data = $this->Uw->find('first',$params);
 
 $this->_renderJson($uw_data);
}

トランザクションを使っている様


//単語登録（単語と意味を直接登録するパターン）
public function submit_word(){
 $user_data = $this->_first_action();
 //フォーム内容word,imiの有無チェック
 if(empty($this->params['form']['word']) ||
   empty($this->params['form']['imi'])){
  $this->_renderJson('error param is empty'); return;
 }
 
 $word = $this->params['form']['word'];
 //imiのタグを除去（無効化）
 $imi = htmlspecialchars($this->params['form']['imi']);
 //wordの内容チェック(半角小文字の英単語1文字か？）
 if(preg_match("/^[a-z]+$/",$word) == 0){
  $this->_renderJson('error word is wrong'); return;
 }
 
 //トランザクション開始
 $this->Transaction->begin();
 
 //ワード登録処理
 $result = $this->_submit_w($user_data->id,$word,$imi);
 
 //登録処理が成功した場合
 if($result == true){
  //トランザクションをコミット
  $this->Transaction->commit();
  //ユーザのワード数を登録
  $this->_put_word_count($user_data->id);
 //登録処理が失敗した場合
 }else{
  //トランザクション　ロールバック
  $this->Transaction->rollback();
 }
 
 $this->_renderJson($result);
}

AjaxでPagenation

コントローラー


//Uwを取得（Ajaxでページネーションする想定）
public function get_uw_pagenation(){
 $limit = 20; //1pageに何データ表示するか？
 
 $user_data = $this->_first_action();
 
 //フォーム内容の有無チェック
 if(empty($this->params['form']['page'])){
  $this->_renderJson('error page is empty'); return;
 }
 $page = $this->params['form']['page'];
 //pageの内容チェック
 if(preg_match("/^[0-9]+$/",$page) == 0){
  $this->_renderJson('param "page" is wrong'); return;
 }
 
 $offset = $limit * $page;
 //バインド設定（UwにIuwを持たせる）
 $this->Uw->bindModel(array('hasMany'=>array('Iuw')));
 //Uwの取得
 $params = array(
  'conditions'=> array('user_id' => $user_data->id),
  'order'  => 'seitouritsu DESC',
  'limit'  => $limit,
  'offset' => $offset,
  'recursive' => 3);
 $uw_data = $this->Uw->find('all',$params);
 
 $this->_renderJson($uw_data);
}

View


<?php echo $html->script('index',array());?>
<div id="error"></div>
<div id="uw"></div>
<div id="pagenation"></div>
<img id="loading" src="<?php echo $html->url("/img/loading.gif");?>" />

Javascript


$(function(){
 $(document).ready(function(){get_uw();});
 $('#page').live('click',function(){get_uw();});
 $("#loading").bind("ajaxSend", function(){$(this).show();})
  .bind("ajaxComplete", function(){$(this).hide();});
});

function get_uw(){
 $('#error').empty();
 var page = $('#page').attr('name');
 if(!page) page = '1'; 
 if(!(page.match(/^[0-9]+$/))){
  $('#error').append('page is wrong.'); return;
 }
 $.ajax({
  type: "POST",
  dataType: "json",
  data: {'page':page},
  url: "./get_uw_pagenation",
  success: function(data){
   if(data != false){
    write_uw(data);
    write_page(page);
   }
  }
 });
}

function write_uw(data){
 $('#pagenation').empty();
 var str = '';
 for(var i=0;i<data.length;i++){
  str += '<div id="wordset" class="clearfix"><ul><li>';
  str += data[i]['Word']['word'] + '<li>';
  for(var j=0;j<data[i]['Iuw'].length;j++){
   str += data[i]['Iuw'][j]['Iw']['Imi']['imi'];
   if(!(j == data[i]['Iuw'].length - 1)){
    str += ' | ';
   }
  }
  str +=  '<li>';
  str += data[i]['Uw']['seitouritsu'];
  str += '</ul></div>';
 }
 $('#uw').append(str);
}

function write_page(page){
 page++;
 var str = '<input id="page" type="button" value="More?" name="';
 str += page +  '" />';
 $('#pagenation').append(str);
}

トランザクション

2012-01-11T01:33:00.000+09:00

トランザクションとは、

関連する複数の処理を一つの処理単位としてまとめたもの。金融機関のコンピュータシステムにおける入出金処理のように、一連の作業を全体として一つの処理として管理するために用いる。

GAEのデータベースは何でもトランザクションになっていたということだな。

トランザクションを使うと複数のクエリをまとめて１つの処理として扱うことができる。処理の途中でエラーになって処理を取り消したいような場合はROLLBACKをすることで変更内容を元に戻すことができる。

ととみぞーノートに書いてある。とみぞーノートを見ると、トランザクションを開始して、コミットするまでは、他の誰かがデータを参照してもトランザクション中の人が操作しているデータは見えないようだ。コミットするとトランザクションが終了するようだ。データを全部元に戻すには、ロールバックするらしい。単純な仕組みではある。確かinnoDBというのはトランザクションが使えるし、ロックが行単位の為、デッドロックになることは少ないとかなんかの雑誌に書いてあったな。

cakePHPでトランザクション

（※以下の情報は古かったのでcakePHP1.3の場合はここのやり方になります）

cakePHPでのトランザクションの使い方がこのページに書いてある。まずはapp/model/以下にあるapp_model.phpに以下を追加する必要があるらしい。


function begin()
{
    $db =& ConnectionManager::getDataSource($this->useDbConfig);
    $db->begin($this);
}
    
function commit()
{
    $db =& ConnectionManager::getDataSource($this->useDbConfig);
    $db->commit($this);
}
    
function rollback()
{
    $db =& ConnectionManager::getDataSource($this->useDbConfig);
    $db->rollback($this);
}

そして、実際に使う様がこのページに載っている。cakePHP1.3の場合だそうだ。


$this->Event->begin(); // トランザクションの開始
if($this->Event->save($this->data)){
    $this->Event->commit(); // コミット
    // 登録できたらリダイレクト
    $this->redirect('.');
}else{
    $this->Event->rollback(); // ロールバック
    $this->Session->setFlash('データの保存に失敗しました');
}

あとで試してみよう。

cakePHPプロジェクト作成する際のファイル構成

2012-01-09T18:05:00.001+09:00

そんなページありませんといわれないように、cakePHPプロジェクトを作成する際には、下記ファイルとフォルダを全部コピペしましょう。

appフォルダ
cakeフォルダ
pluginsフォルダ
vendorsフォルダ
.gitignore
.htaccess
index.php

Css - あふれた文字を「...」に変換する

2012-01-02T23:42:00.001+09:00

下記のように、divの中に、長い文字列があるが、divの幅を固定したい場合、下記のようなcss設定によってあふれた文字を「...」に変換することができる。これによって、div幅を固定しながら文字列が続くことも表現できる為、スマートである。

divの例


<div id="afuretamoji">ああああああああいいいいいいううううううううえええええええおおおおおおおお</div>

css設定例


div#afuretamoji{
 font-size:10px;
 color: #06c;
 background-color: #def;
 border:1px solid #589;
 width:100px;
 max-width:100px;
 height:70px;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

「max-width:100px;」でdivの最大幅を決めている。
「overflow:hidden;」で、あふれた文字を表示しないようにしている。
「white-space:nowrap;」で、複数行表示を禁止している。
「text-overflow:ellipsis;」で、あふれた場合に、「...」を表示するようにしている。

結果

ああああああああいいいいいいううううううううえええええええおおおおおおおお

jQuery - メニューをマウスオーバーしたら色変える

2012-01-02T22:20:00.000+09:00

非常に簡単な話ですがメモ。大体jQueryも分かってきたのですが、cssの設定方法などもいくつかパターンがあるようで、あとbackground-colorという記載が通常のcssの表記法だと思うのですが、jQueryの場合は、backgroundColorだったりしてなんかややこしい。多分キャメル法で統一されたりしてるのかも。そうじゃなかったら一々確認するのめんどくさいですからね。下記は、ul#menuの子供にliが沢山あって、liにはそれぞれ固有のidが割り振られている状態を想定しています。


$(function(){
 $('ul#menu li').mouseover(function(){menu_mouseover($(this).attr('id'));});
 $('ul#menu li').mouseout(function(){menu_mouseout($(this).attr('id'));});
});

function menu_mouseover(id){
 $('ul#menu li#'+id).css('backgroundColor','#0cf');
}

function menu_mouseout(id){
 $('ul#menu li#'+id).css('backgroundColor','#09c');
}

Javascript - GETリクエストパラメータを取得する

2012-01-02T19:02:00.001+09:00

window.location.search.substringで取得できる。
取得したものは正規表現やsplitで必要なところを取り出す必要がある。
下記はidがキーのパラメータの値（数字）を取り出す様。


var query = window.location.search.substring(1); 
if(query.match(/id=(\d+)/)){
    alert(RegExp.$1);
}

ミクロ経済学

2012-01-01T01:42:00.000+09:00

『この世で一番おもしろいミクロ経済学』を読んだ。超分かり易かった。ただ広く浅くで超概要しかわからない。

サンクコスト（sunk cost）

サンクコストは埋没費用ともよばれ、すでに投資済みのコストのことをいいます。あるいはすでにやってしまったことをいいます。既にやってしまっていることを理由に次の施策を決定することはおかしい。腹痛になったので、ビオフェルミン飲むか、トイレに行くかを検討した際に、腹痛なのでトイレに行くのではなく、ビオフェルミンを飲むことにする、というのはおかしい。

お金の価値

お金は時間に伴い価値がかわります。利子により銀行に預けてるだけでその価値は1年後に上がるわけですから、今すぐにA円もらうのがいいか、１年後にB円貰うのがよいかを検討するには、利子率をもとにB円の現在価値を求めて、それをA円と比較します。

利子率をrとし、将来のお金をXとし、経過年数をnとすれば、現在価値PVは、PV = X / (1 + r)^n となります。


r = 0.05;
X = 200000;
n = 10;
PV = X/Math.pow((1+r),n);
document.write(PV);

毎年X円を、n年間貰える場合、この現在価値PVは、


r = 0.05;
X = 10000;
n = 20;
PV = 0;
for(i=0;i<n;i++){
    PV += X/Math.pow((1+r),i+1);
}
document.write(PV);

毎年一定額を貰えるようなケースを年賦（ねんふ）というらしい。年賦金の現在価値の公式がある。PV = X * (1 - (1 / (1 + n)^n)) / r が公式らしい。証明を今度探すか。


r = 0.05;
X = 10000;
n = 20;
PV = X*(1-(1/Math.pow(1+r,n)))/r;
document.write(PV);

なんと、永遠に毎年一定額貰える場合も、現在価値を簡単に求められる。

現在価値は下記のような式で表すことができる。
[式a] PV = X / (1 + r)^1 + X / (1 + r)^2 + X / (1 + r)^3 ..........
この式の両辺に、(1 + r)をかけると、下記のようになる。
[式b] PV(1 + r) = X + X / (1 + r)^1 + X / (1 + r)^2 + X / (1 + r)^3 ..........
[式b]から[式a]を引くと下記のようになる。
PV * r = X
よって、現在価値PVは、下記になる。
PV = X / r

その他

その他もろもろの超概要を説明してくれている。リスクの考え方、取引のメリット、取引の制約がなければ取引は双方の取引メリットがなくなるまで続くとか、ゲーム理論、パレート最適、パレート改善とか、オークションとか、需要曲線、供給曲線とか、税金とか。

HTML5 - Canvas 円同士の衝突アニメーション

2011-12-27T02:55:00.000+09:00


<canvas id="hoge" width="400" height="400"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("hoge");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var g = 0.1;
var circles = [];
var time = 0;
var colorList = ['0','1','2','3','4','5','6','7',
                 '8','9','a','b','c','d','e','f'];

var tm;
tm = setInterval(main,10);

function main(){
 ctx.clearRect(0,0,cw,ch);
 if(time>100 || time==0){
  time = 0;
  circles.push(new Circle());
  circles[circles.length-1].init(circles.length%2);
 }
 for(i=0;i<circles.length;i++){
  for(j=i+1;j<circles.length;j++){
   collisionCircleCircle(circles[i],circles[j]);
  }
 }
 for(i=0;i<circles.length;i++){
  circles[i].move();
  circles[i].collisionWall();
  circles[i].view();
 }
 time++;
}

function Circle(){
 this.h = 0.9; this.x = 0; this.y = 100;
 this.vx = 0; this.vy = 0; this.r = 0;
 this.color = '#';
 
 this.init = function(vec){
  this.vx = Math.random()*9+1;
  this.r = Math.random()*25+5;
  if(vec){
   this.x = cw+100;
   this.vx *= -1;
  }else{
   this.x = -100;
  }
  this.color += colorList[Math.floor(Math.random()*3)+3];
  this.color += colorList[Math.floor(Math.random()*5)+5];
  this.color += colorList[Math.floor(Math.random()*7)+9];
 }
 
 this.move = function(){
  this.x += this.vx;
  this.y += this.vy;
  this.vy += g;
 }
 
 this.view = function(){
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.r, 0, 360,false);
  ctx.fill();
 }
 
 this.collisionWall = function(){
  if(this.x+this.r > cw && this.vx > 0 || 
    this.x-this.r < 0 && this.vx < 0){
   this.vx *= -this.h;
  }else if(this.y+this.r > ch && this.vy > 0 || 
    this.y-this.r < 0 && this.vy < 0){
   this.vy *= -this.h;
  }
 }
}

function collisionCircleCircle(a,b){
 if((b.x-a.x)*(b.x-a.x)+(b.y-a.y)*(b.y-a.y) < (a.r+b.r)*(a.r+b.r)){
  var vx = a.x-b.x;
  var vy = a.y-b.y;
  var len = Math.sqrt(vx*vx+vy*vy);
  var d = a.r+b.r-len;
  if(len>0) len =1/len;
  
  vx *= len;
  vy *= len;
  
  d /= 2.0;
  a.x += vx*d;
  a.y += vy*d;
  b.x -= vx*d;
  b.y -= vy*d;
  
  var t;
  t = -(vx*a.vx+vy*a.vy)/(vx*vx+vy*vy);
  var arx = a.vx+vx*t;
  var ary = a.vy+vy*t;

  t = -(-vy*a.vx+vx*a.vy)/(vy*vy+vx*vx);
  var amx = a.vx-vy*t;
  var amy = a.vy+vx*t;

  t = -(vx*b.vx+vy*b.vy)/(vx*vx+vy*vy);
  var brx = b.vx+vx*t;
  var bry = b.vy+vy*t;

  t = -(-vy*b.vx+vx*b.vy)/(vy*vy+vx*vx);
  var bmx = b.vx-vy*t;
  var bmy = b.vy+vx*t;
  
  var e = 0.8;
  var adx = (a.r*amx+b.r*bmx+bmx*e*b.r-amx*e*b.r)/(a.r+b.r);
  var bdx = -e*(bmx-amx)+adx;
  var ady = (a.r*amy+b.r*bmy+bmy*e*b.r-amy*e*b.r)/(a.r+b.r);
  var bdy = -e*(bmy-amy)+ady;
  
  a.vx = adx+arx;
  a.vy = ady+ary;
  b.vx = bdx+brx;
  b.vy = bdy+bry;
 }
}
</script>

一人レーベル

2011-12-26T02:05:00.000+09:00

津田さんの音楽業界の本を読んだのでだらだらまとめておきます。読み返してないので間違ってるところもあると思います。

音楽業界は、レコード会社が牛耳っていたが、最近はそうもいかなくなってきています。それも結構前からそうもいかなくなっております。昔はカセットテープでしたしもっと前はレコードでした。エジソンが発明したレコード再生機は非常に高価で宝石商などが扱う高級品でした。カセットテープになり、再生機のコモディティ化に伴い音楽産業が拡大しました。

その後CDが出来まして、カラオケも流行りまして、CMタイアップも流行りまして、小室的な画一的なサビさえよけりゃどうでもいい的音楽が繁栄しました。音楽業界に絡む事業主体が増え、音楽を追求するというより儲かる音楽ありきのビジネスに音楽業界全体が突き進んだ時期です。このときレコード会社を主軸とする音楽業界の最盛期を迎えました。

しかし今は、変わりました。CDからMP3に代わり、より簡単にコピーができるようになりました。インターネットの発展に伴い、グローバルに瞬時に音楽共有ができるようになりました。ナップスターの登場以降その交換は当たり前のものになり、CDの価値は低下し続けました。またエンターテインメントの種類や媒体も多様化され、DVDがあらゆるエンターテインメントを安価で提供することとなり、これらもCD消費を減退させる一因になりました。CD消費は急激に減退する中で、ライブの売り上げはフジロックなどのフェアの成功もあり増加傾向になっています。

さて、レコード会社の機能は、音楽家の発掘、音楽の作成（CD化）、プロモーションの３機能がメインになりますが、MP3にせよCDーRにせよ非常に安価に作成出来る時代に今は来ています。またメジャーデビューして多大なプロモーションをうったとしても意外と儲からない時代になっています。また音楽家の発掘についても、そもそも儲からず、会社の成長が下降傾向にあるレコード会社は発掘するモチベーションも低下しています。そこで提案されているのが、一人レーベルというものです。

発掘は主体的にインターネットのソーシャルメディアを活用することでファンと直接的コミュニケーションをとりながら、レコード会社という巨人一名に発掘してもらうのではなく、多数の一般ピープルから発掘してもらう方向にシフトすればいいのではということです。音楽作成はローコストで出来るし、プロモーションも発掘同様にソーシャルメディアの一員となりましょうということでした。ライブも重要な収入源としなければならないし、ライブ参加者限定のCD発売などメジャーからマイナーに指向をシフトしてファンクラブ的概念を音楽活動の主軸にしていこうぜということでした。

ちなみに、音楽のレンタルは立教大学の３人の学生が始めたのですが、はやりました。瞬間的に全国でレンタルショップが出来上がり、レコード会社など既存の音楽産業既得権益者が裁判を起こしましたが、既存レンタルショップがすでに非常に多くの数になっていたこともあり、レンタルショップを潰さない妥協案が判決となりました。iTunseは全世界で流行ってますが、日本はレンタルショップの存在も大きく、メジャーレコードがiTuneseに存在しないといった状況もあることから、他国に比べるとiTunseの成功は控えめでした。

この一人レーベルは当然ながら音楽だけにしか適用できない話ではなく、全てのUGCに適用できます。個人が表現し、そのアウトプットを商材にするような業界は全て当てはまります。電子書籍は上記の音楽の発展の経緯と類似しているといわれており、今比較しながら議論されるケースが多いです。自炊の裁判は、音楽レンタルと照らし合わせて、むやみに禁止しては行けないのでは？発展を阻害するのでは？といった議論があるのかなと思います。そしてその一人レーベル化を促すプラットフォームづくりがあらゆる分野で取り組まれている状況です。

PHP - 集合に関する関数

2011-12-25T20:05:00.001+09:00

PHPで集合に関する操作をしたいので、関連する関数を調べます。今cakePHPでプログラムしているのでcakePHPを使います。

参考：PHP Arrays as Stacks, Queues and Set（スタック・待ち行列・和集合）

Controller


public function test(){
 $a = '1,2,3,4,5,6,7';
 $a = split(',',$a);
 $b = array(1,3,5,7,9,11,13);
  
 $merge = array_merge($a,$b);
 $set = array_unique($merge);
 $diff = array_diff($a,$b);
 $diff_assoc = array_diff_assoc($a,$b);
 $intersect = array_intersect($a,$b);
  
 $data = array(
  'merge' => $merge,
  'set' => $set,
  'diff' => $diff,
  'diff_assoc' => $diff_assoc,
  'intersect' => $intersect
 );
  
 $this->set('data',$data);
}

View


<?php 
 echo 'merge: ';
 foreach($data['merge'] as $a){
  echo $a. ' , ';
 }
 echo '<br /><br />';
 
 echo 'set: ';
 foreach($data['set'] as $a){
  echo $a. ' , ';
 }
 echo '<br /><br />';
 
 echo 'diff: ';
 foreach($data['diff'] as $a){
  echo $a. ' , ';
 }
 echo '<br /><br />';
 
 echo 'diff_assoc: ';
 foreach($data['diff_assoc'] as $a){
  echo $a. ' , ';
 }
 echo '<br /><br />';
 
 echo 'intersect: ';
 foreach($data['intersect'] as $a){
  echo $a. ' , ';
 }
 echo '<br /><br />';
?>

結果

merge: 1 , 2 , 3 , 4 , 5 , 6 , 7 , 1 , 3 , 5 , 7 , 9 , 11 , 13 , 

set: 1 , 2 , 3 , 4 , 5 , 6 , 7 , 9 , 11 , 13 , 

diff: 2 , 4 , 6 , 

diff_assoc: 2 , 3 , 4 , 5 , 6 , 7 , 

intersect: 1 , 3 , 5 , 7 ,

まとめ

array_merge($a,$b)	単純に配列$aの後ろに配列$bをつなげて出力する
array_unique($merge)	配列の要素から重複を取り除いて出力する
array_diff($a,$b)	配列$aにあって、配列$bにない要素のみ出力する
array_diff_assoc($a,$b)	array_diffと基本的に同じだが、配列$aと配列$bを比較する際に、キーの一致も確認する。今回の場合、キーと値のペアが一致するのは、1のみである為、配列$aの1以外の数字が出力された。
array_intersect($a,$b)	配列$aにも配列$bにもある要素のみ出力する。

cakePHP - RequestHandlerとJSONレスポンス

2011-12-25T13:26:00.001+09:00

RequestHandler

★RequestHandlerコンポーネント★

RequestHandlerコンポーネントを使うと、クライアントの状態をチェックできる。GETによるアクセスなのか、POSTによるアクセスなのか、Ajaxによるアクセスなのか、などが分かる。

RequestHandlerを使うには、コントローラの$componentsにRequestHandlerを追加する必要がある。

public $components = array('RequestHandler');

$this->RequestHandler->isGet　→　GETによるアクセスかどうか
$this->RequestHandler->isPost　→　POSTによるアクセスかどうか
$this->RequestHandler->isSSL　→　SSL（HTTPS）アクセスかどうか
$this->RequestHandler->isAjax　→　Ajaxによるアクセスかどうか
$this->RequestHandler->isXml　→　XMLレスポンスを受け付けるかどうか
$this->RequestHandler->isRss　→　RSSレスポンスを受け付けるかどうか
$this->RequestHandler->isAtom　→　Atomレスポンスを受け付けるかどうか
$this->RequestHandler->isMobile　→　モバイルからのアクセスかどうか

クライアントの状態チェック以外にも使える。例えば、cakePHPのアクションがHTMLではなくJson形式でレスポンスしたいといった場合に、コンテンツの形式を変更できる。

Ajax処理のJSON出力

[CakePHP]Ajax処理のJSON出力を共通化する

というページで、cakePHPでJSON出力する際の便利なコードが書いてある。これを使えば、Ajaxの仕組みを作る度にctpファイルを作るというめんどうな作業がなくなる。ちなみにこのページのコードでは下記でRequestHandlerを使っている。

$this->RequestHandler->setContent('json');
$this->RequestHandler->respondAs('application/json; charset=UTF-8');

このページのコードを使えば、$this->set($data);を使う代わりに、$this->_renderJson($data);を使うだけで、JSON形式で出力できる。あとは、viewでjavascriptのコードを書いて、Ajaxでコントローラーのアクションにアクセスし、ゲットしたJSONを使えばいい。

下記はjavascriptのコード例。jQueryを使っている。#bookSearchをクリックしたらbooksearch()が起動して、#bookSearchTextの内容を./book_searchアクションに渡している。アクションのJSONレスポンスをもとに、#book_infosに本の情報やページ情報を記載している様。


$(function(){
    $('#bookSearch').click(function(){booksearch();});
});

function booksearch_ajax(keyword,page){
　$.ajax({
　　type: "POST",
　　dataType: "json",
　　data: {"keyword":keyword,'page':page},
　　url: "./book_search",
　　success: function(data){
　　　if(data != '') {
       　　$('#book_infos').empty();
        　　writeBookInfo(data);
        　　writePage(data);
　　　}
　　}
　});
}

function booksearch(){
　var keyword = $('#bookSearchText').val();
　var page = 1;
　booksearch_ajax(keyword,page);
}

Amazon API ページ番号を指定する

2011-12-17T22:28:00.001+09:00

http://y-anz-m.blogspot.com/2009/12/amazon-api.html

ItemPage=N (N は ページ番号)

cakePHP - twitterAPIを使う

2011-12-13T00:46:00.000+09:00

cakePHPでtwitterAPIを使う。超分かり易くて簡単なライブラリがあった。

Consuming OAuth-enabled APIs with CakePHP

このページからライブラリをダウンロードして、vendorsに、OAuthフォルダをそのまま格納する。
そして、controllerとviewにそれぞれ下記のようなコードを書く。
※コールバック用URLとコンシューマーキー、コンシューマーシークレットは状況に合わせて入力する必要がある

hoge_controller.php


<?php 
App::import('Vendor', 'oauth', array('file' => 'OAuth'.DS.'oauth_consumer.php'));

class HogeController extends AppController{
    public $name = 'Hoge';
    public $uses = Null;
 
    function index(){
        //セッションからアクセストークンの取得
        $accessToken = $this->Session->read('twitter_access_token');
        if(!empty($accessToken)){
            $consumer = $this->createConsumer();
            //認証情報の確認
            $user_data = $consumer->get($accessToken->key, $accessToken->secret,
                'http://api.twitter.com/1/account/verify_credentials.json');
            $user_data = json_decode($user_data);
            if(!$user_data->id){
                $this->redirect('./login');
            }
            $this->set('user_data',$user_data);
        }else{
            $this->redirect('./login');
        }
    }

    public function login(){
  
    }
 
    public function logout(){
        $this->Session->delete('twitter_access_token');
        $this->redirect('./login');
    }
 
    public function twitter() {
        $consumer = $this->createConsumer();
        $requestToken = $consumer->getRequestToken('https://api.twitter.com/oauth/request_token', 'http://コールバックURL');
        $this->Session->write('twitter_request_token', $requestToken);
        $this->redirect('https://api.twitter.com/oauth/authorize?oauth_token=' . $requestToken->key);
    }

    public function twitter_callback() {
        $requestToken = $this->Session->read('twitter_request_token');
        $consumer = $this->createConsumer();
        $accessToken = $consumer->getAccessToken('https://api.twitter.com/oauth/access_token', $requestToken);
        $this->Session->write('twitter_access_token', $accessToken);
        $this->redirect('./');
    }

    private function createConsumer() {
        return new OAuth_Consumer('コンシューマーキー', 'コンシューマーシークレット');
    }
}
?>

index.ctp（index用のview）


<h1>Hoge!</h1>
<img src="<?php echo $user_data->profile_image_url;?>" width="24" height="24" />
<?php echo $user_data->screen_name; ?>
 ( <a href="./logout">Logout?</a> )


<h1>Hoge!</h1>
<h2><a href="./twitter">Please Login!</a></h2>

これで、下記のようにtwitterAPIを使ってログインできるようになり、ログインすると、twitterアカウントのアイコンとscreen_nameが表示される。

ログインしていないと、下記のログイン画面が表示される。

ログインした後のindex画面

cakePHP セッション

2011-12-12T23:44:00.001+09:00

cakePHPでのセッションの取り扱いも超簡単だ。

『CakePHP』を使ってみる～11～セッションの使い方確認に書いてある。以下引用。


// Write
$this->Session->write('myname', 'Yossy');
echo 'Write: '.$this->Session->read('myname');

// Delete
$this->Session->delete('username');
echo 'Delete: '.$this->Session->read('myname');

cakePHP JSONデコード

2011-12-12T23:38:00.000+09:00

cakePHPでJSONデータをPHPで使えるようにデコードするには、下記で簡単にできる。

json_decode('JSON形式のデータ');

cakePHP - データ更新

2011-12-11T19:17:00.001+09:00

データ更新は、saveメソッドで実施できる。プライマリーキーが引数で与えられたデータに含まれない場合は、データを新規追加し、含まれる場合は与えられたデータ内容で更新する。

特定のフィールドのみ更新する場合は下記のようになる。


$this->Board->id = $this->data['Board']['id'];
$this->Board->saveField('content',$this->data['Board']['content']);

cakePHP - データの削除

2011-12-11T17:39:00.001+09:00

データの削除はidをもとに削除する場合は単純である。


$this->Board->delete($this->data['Board']['id']);

delete('idの数字')だけで削除できる。上記は、Boardモデルのdeleteメソッドを使って、idフィールドが$this->data['Board']['id']であるデータを、boardsテーブルから削除している。

delete(id)以外の方法は下記である。


$this->Board->deleteAll(array('Board.name'=>
 $this->data['Board']['name']));

これは、Board.nameが、$this->data['Board']['name']と等しいデータが全て削除される。


$this->Board->deleteAll(array('Board.name like ?'=>
 "%{$this->data['Board']['name']}%"));

これは、データ検索（２）で記載されているfindメソッドの「?」と同じことが行われている。cakePHPでは、内部でSQL構文を構築するにあたり、「?」に、その後与えられている配列の値が順に当てはめられる。すなわち上記は、Board.nameに、$this->data['Board']['name']の値が含まれるデータが全て削除される。

cakePHP - データ検索（２）

2011-12-11T16:37:00.001+09:00

cakePHP - データ検索（１）
上記でfindの概要がわかったが、もっと色々findの使い方がある。主にオプションであるconditionsの設定の仕方である。これを色々試す。


$data = $this->Board->find('all',array('conditions'=>
 array('Board.id'=>$this->data['Board']['id'])));

これは（１）で試したコードで、Board.idが、$this->data['Board']['id']の値と等しいものを取得する。


$data = $this->Board->find('all',array('conditions'=>
 array('Board.name like'=>"%{$this->data['Board']['name']}%")));

これは、Board.nameに、%演算子で囲まれたテキストが含まれるものを取得する。


$data = $this->Board->find('all',array('conditions'=>
 array('Board.name like ?'=>array(
 "%{$this->data['Board']['name']}%"))));

これは、一つ上のコードと全く同じことが行われる。findメソッドは、キー名に含まれる「?」部分に、値として指定されている配列から順に要素を取り出しはめ込んでいく。SQL構文とこの?の仕組みを理解していれば、SQLのWHERE句で実施される全てが行えるようだ。


$data = $this->Board->find('all',array('conditions'=>
 array('Board.id between ? and ?'=>array(2,5))));

これは、最初の?に2を入れて、次の?に5を入れている。Board.idが2〜5の間のものを取得する。


$data = $this->Board->findAllById(1);

これは、○○=××であるといったシンプルな条件指定の際に利用できる、非常に簡便なメソッドである。findAllByの後にフィールド名をキャメル記法でつなげればよい。findAllById(1)というのは、idフィールドが1であるものを全て取得することになる。


$data = $this->Board->findById(1);

これは、findAllByと仕組みは同じだが、条件に合致する最初の一つを取得する。（１）記載のallとfirstの関係と同じであり出力されるデータ構造もそれとおなじである。

cakePHP - データ検索

2011-12-11T15:46:00.001+09:00

データの検索はこれでできる。


$data = $this->Board->find('all',array('conditions'=>
 array('Board.id'=>$this->data['Board']['id'])));

Boardモデルのfindメソッドを使って、テーブルboardsを検索している。find('検索仕様','オプション');のように引数を二つ要する。第一引数は、検索仕様の設定であり、all、first、list、countのいずれかを入力する。第二引数は、オプションの設定であり、conditions,fields,recursive,order,limit,pageを連想配列として入力する。

第一引数（検索仕様）

all

allは検索条件に合致する全てを返す。データ構造は下記のとおり。


Array
(
    [0] => Array
        (
            [Board] => Array
                (
                    [id] => 1
                    [name] => taro
                    [title] => test
                    [content] => hello every one. how are you today?
                )

        )

)

first

firstは検索条件に合致する最初の一つを返す。データ構造は下記のとおり。


Array
(
    [Board] => Array
        (
            [id] => 1
            [name] => taro
            [title] => test
            [content] => hello every one. how are you today?
        )

)

list

listは条件に合致する全てのデータの、キーとその次のフィールドを返す。データ構造は下記のとおり。


Array
(
    [1] => test
)

count

countは条件に合致するデータの個数を返す。

第二引数（オプション）

conditions

条件の設定。条件をつけるフィールド名をキーに、検索する値を値とする連想配列として用意する

fields

取得するフィールド名を配列として用意する

recursive

再帰的に取得する深度

order

取得順。順序を示す数字または名前を配列として用意する

limit

取得するレコード数

page

取得するページ数

MySQL 照合順序 - 日本語を使えるようにする

2011-12-11T14:29:00.001+09:00

照合順序を「utf8_unicode_ci」にすると、日本語使えるようになった。

cakePHP - テーブルへのデータ追加

2011-12-11T13:41:00.001+09:00

この一行でデータ追加ができる。

$this->Board->save($this->data);

これは、Boardモデルのsaveメソッドによって$this->dataを登録している様だ。Boardモデルは、テーブルboardsの単数形をファイル名、クラス名に適用している。$this->dataも、テーブルboardsの構造に合致した配列構造になっている。

例えば、テーブルboardsが、id,name,title,contentという４つのデータフィールドを持つとする。idはauto_incrementであるとすると、$this->dataに格納する必要があるのは、name,title,contentである。フォームからこれらのデータをユーザがインプットする場合、フォームに適用させるnameはそれぞれ、Board.name,Board.title,Board.contentである。つまり「テーブル名.データフィールド名」という形態にする必要がある。

cakePHP - リダイレクト(redirect)

2011-12-11T13:36:00.001+09:00

cakePHPのリダイレクトは超お手軽だ。


$this->redirect('.');

cakePHP - scaffoldの使い方

2011-12-11T12:55:00.001+09:00

テーブルを用意して、コントローラーに下記のように書くだけ。


<?php 
class BoardsController extends AppController{
 public $name = 'Boards';
 public $scaffold;
}
?>

テーブル名：boards
コントローラファイル名：boards_controller.php
コントローラークラス名：BoardsController

CtpファイルをEclipseでPHPファイルとして表示する(CakePHP)

2011-12-11T11:03:00.001+09:00

CtpファイルをEclipseでPHPファイルとして表示する(CakePHP)にやり方がのっているが、Eclipseの設定変更でctpファイルもPHPファイルとして表示されるようにした。

Eclipseのメニューから Windows -> Preferences をクリックし、 General -> ContentTypesを選択します。

※macだと、メニューのEclipse->環境設定(Preferences)・・・になる。

cakePHP モデルの規約

2011-12-11T02:44:00.001+09:00

データベースのテーブル名を、usersにして、モデルファイルを、user.phpにして、モデルクラスをUserにすれば、コントローラーからUserモデルクラスにアクセスするだけで、テーブルusersにアクセスできる。つまりテーブル名は複数形、モデルファイル及びモデルクラス名は単数形で徹底する必要がある。複数形、単数形を管理している辞書がある。

cakePHP - Appフォルダの構造

2011-12-10T19:07:00.001+09:00

CakePHPのフォルダ構造

config	CakePHP が使用する（数個の）設定ファイルが入る場所です。データベース接続の詳細、ブートストラップ、コアの設定ファイルなどがここに入ります。
controllers	アプリケーションのコントローラとコンポーネントが入ります。
libs	サードパーティ、外部ベンダからのライブラリではなく、ファーストパーティのライブラリが入ります。これはベンダライブラリと内部ライブラリの構成を分割することを可能にします。
locale	国際化のための文字ファイルが入ります。
models	アプリケーションのモデル、ビヘイビア、データソースが入ります。
plugins	プラグインパッケージが入ります。
tmp	CakePHP が一時的なデータを保管する場所です。保管される実際のデータは、CakePHP の設定しだいですが、このフォルダは通常、モデルの内容データや、ログの保管に使用されます。時にはセッション情報も入ります。確実にこのフォルダが存在し、書き込み可能であるようにしてください。そうしないと、アプリケーションのパフォーマンスは激しく影響をうけることになります。デバッグモードでは、CakePHPがそうなっているかどうかを警告してくれます。
vendors	外部（サードパーティ）で作成されたクラスやライブラリは、ここに置いてください。そうすることで、App::import('vendor', 'name') で簡単にアクセスできるようになります。注意して観察している人は、これは重複しているのではないか、と言うかもしれません。ディレクトリ構造のいちばん上にも vendors フォルダがあるからです。この二つのフォルダの違いは、複数のアプリケーションを動作させて、より複雑なシステムセットアップをする場合のことを考える際に扱いましょう。
views	表示用のファイルはここに置きます。エレメント、エラーページ、ヘルパー、レイアウト、ビューのファイルなどです。
webroot	運用時（production）用のセットアップでは、このフォルダがアプリケーションのドキュメントルートになります。CSS スタイルシートや画像、JavaScript を入れるためのフォルダもあります。

cakePHPの「・・・is not writable」エラー

2011-12-08T22:47:00.001+09:00

xamppでcakePHPを使ってみているのですが、Warning (512): /var/www/html/cakephp/app/tmp/cache/ is not writable のようなエラーがでておりました。これまた権限の問題で、Finder上で権限変更しても直らず、念のためxamppのapatchを再起動してもダメでした。CakePHPフレームワークで行こうにも同じエラーに関する記載があり、このブログのようにターミナル上で権限変更したら何故かオッケーでした。

chmod -R 707 /Applications/XAMPP/xamppfiles/htdocs/cake/caketest/app/tmp

xamppでcakePHPを使うときの設定

2011-12-08T01:29:00.001+09:00

xamppでcakePHP1.3を使う場合、プロジェクトを格納しているフォルダに、サーバ設定の上書きを許可する為に、/Applications/XAMPP/xamppfiles/etc/httpd.conf に下記を追記する必要がある。


<Directory "/Applications/XAMPP/xamppfiles/htdocs/cake/">
 Allow from all
</Directory>

上記パスはプロジェクトを格納しているフォルダのパスとなる。上記はxamppのhtdocsフォルダの配下にcakeというフォルダをつくり、そこにcakePHPプロジェクトを入れることを想定したパス。

macでxampp使う

2011-12-08T01:06:00.001+09:00

macでxampp使うときは、最初xamppのhtdocsフォルダが読みのみOKという権限になっていて書き込めなかった。色々試したが、結局、/Applications/XAMPP/xamppfiles/htdocsフォルダのアクセス権限を読み／書き可に設定して、htdocsフォルダにサイトを置くのが一番分かり易かった。eclipseであれば、htdocsフォルダをワークスペースにして、localhost/プロジェクトフォルダという風にアクセスする。

権限の変更は変更したいフォルダに、Finderで移動して、右クリックで情報をみるをクリックする。情報の一番したにアクセス権に関する内容が掲載されている。鍵マークをクリックして鍵を解除したら権限を変更できる。

MySQL 数字データをINSERTしたら別の数字になっている件

2011-12-04T22:59:00.000+09:00

SQL初心者です。PHPでMySQLを本日使い始めました。初めてのINSERTで衝撃を受けています。というのも、数字データをINSERTしたら、全く別の数字データがINSERTされているからです。原因不明なので調べていきます。

現象はこうです。INSERTした数値データは、409312097であるにも関わらず、INSERTされた結果を確認すると、8388607になっている。

すぐに原因が分かりました。。数値型(データ型)のまとめに記載されていますが、数値データのデータ型を何も考えずにMEDIUMINTにしていました。しかし、これの最大値が8388607なのでした。最大値より大きい数値を登録しようとすると最大値になるんですね。勉強になりました。INTにしたら解決されました。

PHP　文字列内での変数展開について

2011-12-04T22:37:00.000+09:00

ダブルクオーテンションで囲った文字列内に変数が入っている場合、それは展開されます。しかし注意点があります。変数の後に半角スペースがない場合、その後の文字列まで変数名として扱われてしまいます。これを回避するには、シングルクオーテンションで囲った場合のように"."で文字列連結をするか、あるいは変数を{}で囲み変数名を明示するかのいずれかの方法があります。コード作成上は{}で囲む方が楽な気がしますが、文字列連結の方が若干高速であるらしいです。

$a = 'aiueo';
echo "これは、{$a}です。";

参考：文字列内での変数展開

xamppのMySQLのrootのパスワード設定が記載されているファイル

2011-12-04T21:39:00.000+09:00

phpMyAdmin上でrootのパスワード設定をしたところ、phpMyAdminにアクセスできなくなり少しビビった。当然解決策は設定されているファイルを探して書き換えればよいとかそういうことなはずなので探した。たまたまphpMyAdmin上でパスワード生成したときのパスワードをコピーしていたのでそれをしかるべき箇所にペーストすれば復活するのではないかと思っている。

どのようにMySQL"root"ユーザのパスワードを設定するのですか？（方法2）

上記のページに、下記のような記載がある。

次の手順で、phpMyAdmin設定を調整します。
"\xampp\phpMyAdmin\config.inc.php"ファイル内にある以下の行を変更します：
変更前：
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '';
変更後：
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = 'secret';

早速上記のconfig.inc.phpファイルを探したところ確かに存在し、$cfg['Servers'][$i]['password']にコピーしておいたパスワードをペーストし保存したところ、phpMyAdminにアクセスできるようになった。しかしphpMyAdminのホームページでは依然としてエラーになる。。支障はないが。

XAMPPでpearコマンドを使う on mac

2011-12-04T19:54:00.000+09:00

参照：XAMPPでpearコマンドを使う

XAMPPディレクトリに移動して、pear install パッケージ名

僕のPCはmacです。XAMPPは最新版をインストールしたばかり。今2011年12月４日です。phpinfo()で、pearで検索すると、pear=/Applications/XAMPP/xamppfiles/lib/php/pearと書いてありました。ターミナルを起動して、cdで/Applications/XAMPP/xamppfiles/lib/php/に移動しました。

今回はDB.phpを使えるようにしたいのです。
PEAR::DBの利用というページがDB.phpに詳しいようです。これを見ながらセットアップしていきます。

pear install DBを実行したところ、下記のエラーになりました。

Warning: touch(): Unable to create file /usr/lib/php/.lock because Permission denied in PEAR/Registry.php on line 835

Warning: touch(): Unable to create file /usr/lib/php/.lock because Permission denied in /usr/lib/php/PEAR/Registry.php on line 835
could not create lock file: fopen(/usr/lib/php/.lock): failed to open stream: No such file or directory

権限がないエラーのようです。同じ状況が『snow leopardでPEARを使う』に書いてあります。sudo pear install DBを実行すると、インストールが完了しました。このDBをどうやってPHPファイル上でrequire出来るのでしょうか？単純にrequire 'DB.php';とやると存在しないとのエラーになります。どうもpearでインストールしたファイルは、/usr/lib/php/にいるようです。xamppのphp.iniのinclude_pathにこのパスを追加したところ、require 'DB.php'で起動するようになりました！ちなみに、xamppのphp.iniは/Applications/XAMPP/xamppfiles/etcにあります。

GAEなのか？

2011-11-29T21:34:00.000+09:00

GAEは制限が多い。1000件までしかデータベースから取得できない。抽出条件を複雑化するのはindexをつくれば出来るが、いずれにしても1000件までしか取得できない。またエンティティの検索条件設定については部分一致はできない。1万件と１万件のデータをそれぞれ取得して、両方のデータに存在するデータを抽出したいとしても、それは1000件ずつしか取得できないので、残りのそれぞれ9000件にはアクセスできない。これは大いなる問題である。GAEを使わないのであればAmazonEC2なのか、はたまた昔ながらのレンタルサーバーが以外といいのか？という話がでてくる。Amazonは遅いが自由度は高いらしい。またもし大きなWEBサービスとなるのであればスケールアウトというやつで圧倒的なメリットをAmazonは提供してくれる。でももし大きくなる見込みが低いWEBサービスなのであれば、それは速い、安い、うまい昔ながらのレンタルサーバに軍配が上がる可能性が高い。

さて、それでも尚GAEを使おうというのであれば、上記のデータベースの設計はよろしくない。クエリの複雑化はインデックスで対応するとして、データベースから取得したデータをいじるのではなく、可能な限りクエリによって最終的に取得したいデータを取得できるように設計する必要がある。が、どう考えてもいまつくろうとしているアプリケーションがGAEで作れるとは思えない。GAEはやめよう。

python　リストの追加　append()

2011-11-29T00:36:00.000+09:00

list = [1,2,3,4,5]
list.append(6)
これは list += [6] よりも効率的らしい

めんどくさいjQueryを研究する

2011-11-27T22:33:00.001+09:00

もうjQueryって色んな括弧がごちゃごちゃしてて見ていて腹立つよ。しかし、色んなブラウザの違いなども吸収してるらしいし、とりあえず使えるところはjQuery使った方がいい気がするし、そもそもDOMとかって大体分かるけどその使い方は全然勉強してないから、何しろjQuery勉強しないといけないと思ってるんです。最近WEBサービスつくるとき一番つまずくのがjQueryなもんで、一度研究して頭を整理しておかないといつまでたっても、遅々として先に進まないんだよね。いつも止まって適当に調べてなんとか出来たら次に行くっていうやり方が結局のところ最も非効率的なやり方だと思うんです。

さて、はっきりいってjQueryでAjaxとかやってるわりには、全然基本すらわかってないので、基本から始めたいと思う。まずはjQeryで#homuに"homuhomu"とインプットしてみよう。ちなみに、このブログは最初からjQueryを読み込んでいたはず。あと、jQueryを学ぶならやはりきっとここは外せないだろう。『jQuery日本語リファレンス』だ。

↓これがdiv#homuです

homuhomuhomuhomuhomuhomuhomuhomu

empty


<div id="homu"><p>homuhomuhomuhomuhomuhomuhomuhomu</p></div>
<script type="text/javascript">
$('#homu').empty();
</script>

ちょっと最初に宣言したことと違うことをしているが、#homuのhomuhomu...という文字列をjQueryを使って削除した様だ。ところでブログに書くに当たりそもそもDOMとは何を意味するのかについて念のため確認したい。

文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。

何言ってるのか分からん。文書を構成する個々のタグというかタグで構成される要素のことをDOMっていうのかなと思ったんだけどDOMはタグで文章を作ること自体をいうようだな。まあDOMの詳細は置いておいて、何しろDOMの構成要素を$('#homu')といった形で表すのだ。そして要素の選択方法についてはSelectors/API/jQueryに書いてあるようだ。

さてそれでは、今度は最初に宣言したとおり、#homuに"homuhomu!!"をインプットしてみよう。そういう操作はここに書いてあるようだ。

append


<script type="text/javascript">
$('#homu').append("<b>homuhomu!!</b>")
</script>

これで太字でhomuhomu!!がインプットされた。なんて簡単なんだ。いったい俺は何が分からないのだ。今度は#homuにスタイルを設定してみよう。#homuの背景を青にして文字の色を白にしてみよう。

css


<script type="text/javascript">
$('#homu').css({backgroundColor:"#00f",color:"#fff",padding:"3px"});
</script>

これで、#homuの背景が青くなり、文字が白くなり、paddingが3pxになった。なんでjQueryがめんどくさいのかが少し分かった。HTMLとかCSSとかの構文とほぼ同じであるにも関わらず、微妙にjQuery特有の表記ルールになっている箇所が多いからだ。どこが間違ってるか分からないんだよ。とはいえ、やっぱり結構簡単だな。

今度は、eachというやつを覚えよう。これはjQuery的forみたいなやつや。該当する要素全てに対してコードを実行したいときに使うものだ。下にdiv#homu2をもう１個つくって、先程作成したdiv#homuと共に、class="hoge"を設定しておこう。

↓これがdiv#homu2です

ホムホムホムホム

each


<script type="text/javascript">
$('div.hoge').each(function(idx,ele){
    $(ele).css({backgroundColor:"red",color:"#fcc"});
});
</script>

これでdiv.hogeが全て背景赤、文字白になったのだ。functionのidx,eleはなしでもOKだ。idxは0から始まるインデックスになっており、eleというのは該当する要素そのものだ。引数名は適当な名前を設定すればよし。ちなみに、eleがエレメントそのものなので、$(ele)ではなく、$(this)でも同じことになる。

さて、eachは配列に対して使うこともできる。


<script type="text/javascript">
bookList = [["4774142298", "http://ecx.images-amazon.com/images/I/51KkpibMKqL._SL75_.jpg", "Python\u30b9\u30bf\u30fc\u30c8\u30d6\u30c3\u30af", "\u8fbb \u771f\u543e", "\u6280\u8853\u8a55\u8ad6\u793e"], ["4048686291", "http://ecx.images-amazon.com/images/I/51wSTTIQtgL._SL75_.jpg", "\u30a8\u30ad\u30b9\u30d1\u30fc\u30c8Python\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0", "Tarek Ziade", "\u30a2\u30b9\u30ad\u30fc\u30fb\u30e1\u30c7\u30a3\u30a2\u30ef\u30fc\u30af\u30b9"], ["4797353953", "http://ecx.images-amazon.com/images/I/41lFEOVCepL._SL75_.jpg", "\u307f\u3093\u306a\u306ePython \u6539\u8a02\u7248", "\u67f4\u7530 \u6df3", "\u30bd\u30d5\u30c8\u30d0\u30f3\u30af\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6"], ["4798026557", "http://ecx.images-amazon.com/images/I/41aeC4ZauwL._SL75_.jpg", "Python\u5165\u9580\u20152&amp;3\u5bfe\u5fdc", "\u7d30\u7530 \u8b19\u4e8c", "\u79c0\u548c\u30b7\u30b9\u30c6\u30e0"], ["479733665X", "http://ecx.images-amazon.com/images/I/416wPnQ9tWL._SL75_.jpg", "\u307f\u3093\u306a\u306ePython", "\u67f4\u7530 \u6df3", "\u30bd\u30d5\u30c8\u30d0\u30f3\u30af\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6"], ["4873113938", "http://ecx.images-amazon.com/images/I/41vF73wVaAL._SL75_.jpg", "\u521d\u3081\u3066\u306ePython \u7b2c3\u7248", "Mark Lutz", "\u30aa\u30e9\u30a4\u30ea\u30fc\u30b8\u30e3\u30d1\u30f3"], ["4873112761", "http://ecx.images-amazon.com/images/I/41XWUXpgeuL._SL75_.jpg", "Python \u30af\u30c3\u30af\u30d6\u30c3\u30af \u7b2c2\u7248", "Alex Martelli", "\u30aa\u30e9\u30a4\u30ea\u30fc\u30fb\u30b8\u30e3\u30d1\u30f3"], ["4774138053", "http://ecx.images-amazon.com/images/I/51WeqtvvDuL._SL75_.jpg", "Python \u30dd\u30b1\u30c3\u30c8\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9 (Pocket Reference)", "\u67cf\u91ce \u96c4\u592a", "\u6280\u8853\u8a55\u8ad6\u793e"], ["487311442X", "http://ecx.images-amazon.com/images/I/51PD65oIzgL._SL75_.jpg", "Python\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u7b2c2\u7248", "Guido van Rossum", "\u30aa\u30e9\u30a4\u30ea\u30fc\u30b8\u30e3\u30d1\u30f3"], ["4048704397", "http://ecx.images-amazon.com/images/I/51e2zr5LubL._SL75_.jpg", "Python\u30b2\u30fc\u30e0\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u5165\u9580", "Will McGugan", "\u30a2\u30b9\u30ad\u30fc\u30fb\u30e1\u30c7\u30a3\u30a2\u30ef\u30fc\u30af\u30b9"]];
$('#homu2').empty();
$('#homu2').css({backgroundColor:"white"});
$.each(bookList,function(idx,book){
    $('#homu2').append('<img src="' + book[1] + '" />');
});
</script>

このように配列に対してeachをかけると便利に使えるのだ。booklistに格納しているのは、amazonから取り出したデータです。booklistの各要素がbookであり、bookも配列だから、book[1]などとやって画像のURLを取り出しているのだ。ということで、jQueryは難しいわけではなく、細かいルールがHTMLとかCSSと同じようでいて同じではないというのが最大のややこしい点であることがわかった。

Androidゲーム『Dodge Mouse』つくりました！

2011-11-27T14:00:00.001+09:00

Androidゲーム『Dodge Mouse』をつくりました！第一弾目です。シューティングゲームの敵の弾を避ける要領で、敵をよけつづけるシンプルなゲームです。Pankiaをつかってスコア共有できるようになっていて、スコアはtwitterでつぶやけるようになってます。Pankiaの使い方はsuumo jumpを参考にしました。よかったらダウンロードしてください！

Dodge Mouse

Discover more Android apps

Android 開発マルチ画面対応の研究

2011-11-13T01:28:00.000+09:00

Androidは多種多様な端末があり、それらはそれぞれ画面サイズやDPIといったものが全然違います。マルチ画面に対応する為のルールや手法について研究します。

研究の為の簡単なプロジェクトを作成しましました。DpiTestActivityとDpiTestViewの２つのクラスから構成されます。res/drawable-mdpiに、tw.pngを格納しています。tw.pngはtwitterのbirdのフリーのイメージで、サイズは幅70(px)x高さ85(px)です。

DpiTestActivityクラス


package com.homuhomu.dpitest;

import android.app.Activity;
import android.os.Bundle;

public class DpiTestActivity extends Activity {
 private DpiTestView dView;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        dView = new DpiTestView(this);
        setContentView(dView);
    }
}

DpiTestViewクラス


package com.homuhomu.dpitest;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class DpiTestView extends View {
 private Bitmap img;
 private Paint paint;
 
 public DpiTestView(Context context) {
  super(context);
  //paintの設定
  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setTextSize(70);
  paint.setARGB(255, 255, 255, 255);
  //imgの登録
  Resources res = context.getResources();
  img = BitmapFactory.decodeResource(res, R.drawable.tw);
 }
 
 @Override
 protected void onDraw(Canvas c){
  c.drawBitmap(img,0,0,null); //imgの描画
  c.drawBitmap(img,70,0,null); //imgの描画
  c.drawText("A", 70, 85, paint);
 }
}

これを、AVDで起動してみます。AVDはDensity160のHVGAというやつで、これはDPIがmiddleだそうです。つまりres/drawable-mdpiのイメージがそのままのサイズで表示されることになると思います。結果は下記です。

70px横にずらして鳥を配置するようにプログラムしてますが、結果はしっかりとかぶらずに密接していますので、幅70pxの画像がスケールされずにそのまま配置されていることが分かります。一方dpiがhightのAVDでは、鳥が重なります。これはつまり70pxよりも鳥が大きくなっているということになります。また、lowのAVDでは、鳥が離れます。これはつまり70pxよりも鳥が小さくなっているということになります。つまりDPIがmiddle以外であれば、そのDPIに応じてイメージが勝手にスケールし、イメージ自体は物理的に同じ大きさに見えるようになるということです。しかし、画面配置をpxで設定すると、勝手にスケールするため全体的な構成が壊れることになります。

さて、試しに今度は鳥の同じ画像をres/drawable-hdpiにのみ格納して、HVGAという同じAVDで起動してみます。予想としては鳥の画像は70pxよりも小さくなるため、鳥は離れるはずです。結果はこれです。

やはり小さくなって離れました。DPIとは1インチに何px入るか？という密度を表す単位のようです。1インチに5px入る画面の5pxは1インチですが、インチに10px入る画面の5pxは0.5インチです。つまり密度の高い画面の方が同じ画像が小さく表示されます。物理的に同じ大きさで表示するには、密度の高い画面でより大きな画像を使う必要があるわけです。このスケールをAndroidは自動的に実施してくれるわけです。せっかく自動的にスケールしてくれるのですから、画面構成も壊れないようにpxによる設定以外の方法で配置設定したいものです。

DPIに依存しない画面構成にする方法

そこで出てくるのが、密度非依存ピクセル (dp)です。

密度非依存ピクセルは、160 dpi の画面の 1 物理ピクセルに相当し、"medium" 密度の画面に対しシステムにより想定される基底となります。実行時において、システムは必要に応じ画面の実際の密度を基に dp 単位によるすべてのスケーリングを透過的にハンドルします。dp の単位を画面のピクセルに変換するのは px = dp * (dpi / 160) とシンプルです。

ということです。まあこれは、c.drawBitmap(img,70,0,null); の中で使えるものではないです。つまり、c.drawBitmap(img,70dp,0dp,null); ってできるわけではないので、この概念を適用するようにプログラムしてみようと思います。プログラムする場合は、起動している端末の画面が何dpiなのかを確認する必要があります。ちなみに、hightが240dpi、middleが160dpi、lowが120dpiというのがそれぞれの標準値のようです。とはいえ、プログラム上でこれを動的に把握する必要がありますので、そのやり方を調べます。

画面の解像度やdensity（ピクセル密度）の取得方法というページに下記のように記載があります。

DisplayMetrics metrics = new DisplayMetrics();  
context.getWindowManager().getDefaultDisplay().getMetrics(metrics);  
Log.d("test", "density=" + metrics.density);  
Log.d("test", "densityDpi=" + metrics.densityDpi);  
Log.d("test", "scaledDensity=" + metrics.scaledDensity);  
Log.d("test", "widthPixels=" + metrics.widthPixels);  
Log.d("test", "heightPixels=" + metrics.heightPixels);  
Log.d("test", "xDpi=" + metrics.xdpi);  
Log.d("test", "yDpi=" + metrics.ydpi);

ここで、metrics.scaledDensityという値があります。これが、現在の1ピクセルに対する1dipの倍率になります。つまり、1ピクセル×scaledDensity＝1dipとなります。

とりあえずこのコードをActivityのonCreateに埋め込んで実行してみます。すると下記のようなログが出力されました。（実行環境は今までのHVGAというAVDになります）


11-13 15:10:50.675: DEBUG/test(669): density=1.0
11-13 15:10:50.675: DEBUG/test(669): densityDpi=160
11-13 15:10:50.685: DEBUG/test(669): scaledDensity=1.0
11-13 15:10:50.685: DEBUG/test(669): widthPixels=480
11-13 15:10:50.696: DEBUG/test(669): heightPixels=320
11-13 15:10:50.696: DEBUG/test(669): xDpi=160.0
11-13 15:10:50.715: DEBUG/test(669): yDpi=160.0

続いて、WVGA800というAVDで実行すると、下記のようなログが出力されました。


11-13 15:20:06.199: DEBUG/test(535): density=1.5
11-13 15:20:06.199: DEBUG/test(535): densityDpi=240
11-13 15:20:06.209: DEBUG/test(535): scaledDensity=1.5
11-13 15:20:06.209: DEBUG/test(535): widthPixels=800
11-13 15:20:06.209: DEBUG/test(535): heightPixels=480
11-13 15:20:06.218: DEBUG/test(535): xDpi=240.0
11-13 15:20:06.218: DEBUG/test(535): yDpi=240.0

しっかり機能しているようです。では、このコードを使ってdpの概念を実装してみます。考え方としては、dpi160のmdpiフォルダに標準サイズのリソースを格納するとともに、そのリソースに合わせた配置構成の為のpx数値を定数として持ちます（これがdpに当たります）。コードで実行している画面のscaledDensityを取得し、dp x scaledDensityによって動的にpx数値を取得し、そのpx数値を使って画像を表示します。鳥の画像をmdpiのみに格納し直して上記考え方でプログラムを修正したものが下記になります。

DpiTestActivityクラス


package com.homuhomu.dpitest;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;

public class DpiTestActivity extends Activity {
 private DpiTestView dView;
 private DisplayMetrics metrics;
 static float scaledDensity;
 static int widthPixels;
 static int heightPixels;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        dView = new DpiTestView(this);
        setContentView(dView);
        
        metrics = new DisplayMetrics();  
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        scaledDensity = metrics.scaledDensity;
        widthPixels = metrics.widthPixels;
        heightPixels = metrics.heightPixels;
    }
}

DpiTestViewクラス


package com.homuhomu.dpitest;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class DpiTestView extends View {
 private Bitmap img;
 private Paint paint;
 private final int twW = 70; //mdpiにおける鳥イメージの幅(px)
 private final int twH = 85; //mdpiにおける鳥イメージの高さ(px)
 
 
 public DpiTestView(Context context) {
  super(context);
  //paintの設定
  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setTextSize(70);
  paint.setARGB(255, 255, 255, 255);
  //imgの登録
  Resources res = context.getResources();
  img = BitmapFactory.decodeResource(res, R.drawable.tw);
 }
 
 @Override
 protected void onDraw(Canvas c){
  c.drawBitmap(img,0,0,null); //imgの描画
  c.drawBitmap(img,twW*DpiTestActivity.scaledDensity,0,null); //imgの描画
  c.drawText("A", twW*DpiTestActivity.scaledDensity,
    twH*DpiTestActivity.scaledDensity, paint);
 }
}

これを各AVDで実行すると下記のように鳥はどのAVDでも重ならずに密接しました。これで画面構成もどの端末においても基本的に担保されるようになったといえると思います。（あまりに画面サイズが小さい場合などはアプリの対象外にするなどといった処置が必要にはなります）

HVGA(dpi160)での実行結果

WVGA800(dpi240)での実行結果

さて、これで画像の自動スケールと配置構成をどの画面でも担保できるようになりましたが、少なくとも後２つ対処が必要な点があると思っています。1つは、例えばゲームをつくっている場合、画面にタッチする関係上あまりに小さい画面ですと仮に同じ配置構成で画面が表示できたとしてもゲームとして成立し得ないケースがあります。あるいは、あまりに画面が大きい場合、想定しているゲームと異なる難易度になってしまうケースなどもあるかもしれません。作成しているアプリの特性を考慮し、対象外の画面を明確化する必要があります。もう1つは、背景画像についてです。背景画像は上記の研究によりほぼ検討がついていますが、同じdpiでも画面サイズが異なるケースがありますので、例えば幅800pxの背景画像をつくった場合、854pxの幅がある画面では右に空白ができてしまいます。これらの対処法を検討する必要があります。

対象外の画面の明確化の方法

このページの画面サイズの宣言という項目に方法が書いてありますが英語です。残念です。ただ要するにmanifestに書けばいいだけのようです。あと、supports-screensというAndroidのリファレンスに詳細が記載されているようです。あと、画面にフィットしないアプリケーションにも解説が記載されています。何もしなければ全てtrueになるようですので、後はケースバイケースで設定する形になりますね。

背景画像のマルチ画面対応の方法

画面いっぱいに画像を表示する場合についてです。まあこれは色んな方法があると思いますので、一旦私の独断と偏見による一方法を試したいと思います。全てを明らかにするのは時間がかかりますし。仮説ですので、全然ベストプラクティスではない可能性が高いです。一旦前提として画面サイズsmallとxLargeは対象外にすることにします。ここに下記のような記載があります。

xlarge 画面は 960dp x 720dp が最小large 画面は 640dp x 480dp が最小normal 画面は 470dp x 320dp が最小small 画面は 426dp x 320dp が最小

よって、xlargeの最小幅である960dpを基準に考えます。何を考えるかというと背景画像を表示しうる最大のサイズで格納し、実行時の画面サイズに応じて縮小して表示するという考えの基に、その最大サイズについて960dpを基準に考えようと思います。960dpってとは、mdpiであれば960pxなんですが、hdpiですと、基本的にmdpiの1.5倍になるようなので、1,440pxになります。よって背景画像のファイルサイズは1440pxにしようと思います。これres/drawable-nodpiに格納します。そして、実行時にmetrics.widthPixelsなどで幅、高さを取得し、そのサイズに合わせて画面をスケールさせます。修正版は下記になります。

DpiTestActivityクラス


package com.homuhomu.dpitest;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;

public class DpiTestActivity extends Activity {
 private DpiTestView dView;
 private DisplayMetrics metrics;
 static float scaledDensity;
 static int width;
 static int height;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //画面サイズ関連データの取得
        metrics = new DisplayMetrics();  
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        scaledDensity = metrics.scaledDensity;
        width = metrics.widthPixels;
        height = metrics.heightPixels;
        //Viewの設定
        dView = new DpiTestView(this);
        setContentView(dView);    
    }
}

DpiTestViewクラス


package com.homuhomu.dpitest;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.View;

public class DpiTestView extends View {
 private Bitmap img,backImg;
 private Paint paint;
 private final int twW = 70; //mdpiにおける鳥イメージの幅(px)
 private final int twH = 85; //mdpiにおける鳥イメージの高さ(px)
 private final int backW = 1440; //nodpiにおける背景画像の幅（px）
 private final int backH = 864; //nodpiにおける背景画像の高さ（px）
 private Rect src,dst; //背景画像スケール用Rect
 
 
 public DpiTestView(Context context) {
  super(context);
  //paintの設定
  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setTextSize(70);
  paint.setARGB(255, 0, 0, 0);
  //imgの登録
  Resources res = context.getResources();
  img = BitmapFactory.decodeResource(res, R.drawable.tw);
  backImg = BitmapFactory.decodeResource(res, R.drawable.back);
  //背景画像のスケール
  src = new Rect(0,0,backW,backH);
  dst = new Rect(0,0,DpiTestActivity.width,DpiTestActivity.height);
 }
 
 @Override
 protected void onDraw(Canvas c){
  c.drawBitmap(backImg, src, dst, null); //背景画像の表示
  c.drawBitmap(img,0,0,null); //imgの描画
  c.drawBitmap(img,twW*DpiTestActivity.scaledDensity,0,null); //imgの描画
  c.drawText(""+DpiTestActivity.width, twW*DpiTestActivity.scaledDensity,
    twH*DpiTestActivity.scaledDensity, paint);
 }
}

結果は下記のようになります。

HVGA(dpi160)での実行結果

WVGA800(dpi240)での実行結果

これで背景画像もマルチ画面対応になりました。

mac eclipse クリーンモードでの起動

2011-09-11T18:12:00.003+09:00

/Applications/eclipse/eclipse -clean

線分と線分の交差判定

2011-09-06T23:00:00.002+09:00

線分と線分の交差判定をしたい。線分abと線分cdの交差判定をすることにしよう。交差判定には直線の方程式を使う。直線は、y=ax+bといった形になる。この直線よりも上に線分の一方の点があり、もう一方の点がこの直線よりも下にあればそれは、この直線と線分が交差するということだ。線分と線分の交差は、「ある線分ともう一方の線分を直線にしたものが交差し、かつ、もう一方の線分とある線分を直線にしたものが交差すれば」、それはすなわち線分と線分が交差することになるのだ。試してみたら分かるのだ。

よって、直線の方程式を使って上記条件に合致するか計算すればよろしい。
直線の方程式を変形しよう。y=ax+bをy-ax-b=0にする。この式に線分の各点のx,yを入れてみればよい。もし0になったらその点は既に直線にのっているということだ。交差というか接している状態だといえるだろう。大体の場合0よりも大きいか、0よりも小さいという結果になるだろう。0よりも大きければ、その点は直線よりも上にあるということだ。小さければその点は直線よりも下にあるということだ。要するに線分の端点である２点を上記式に当てはめたときの結果が、一方がマイナスで一方がプラスであれば交差するといえるわけだ。２つの結果を掛け合わせて、その結果がマイナスであれば一方のみがマイナスであったとことになる。これと同様にもう一方の線分と直線に対してもチェックして、両方とも結果がマイナスであれば、この線分と線分は交差していることになる。

javascriptでやるとこうなる。

var ax = 3, ay = 10, bx = 10, by = 3, cx = 3, cy = 3, dx = 10, dy = 10;

function lineCheck(ax,ay,bx,by,cx,cy){
  return   (by-ay)/(bx-ax)*cx+(ay-(by-ay)/(bx-ax)*ax)-cy;
} 

function lineCrossCheck(ax,ay,bx,by,cx,cy,dx,dy){
    var a = lineCheck(ax,ay,bx,by,cx,cy);
    var b = lineCheck(ax,ay,bx,by,dx,dy);
    var c = lineCheck(cx,cy,dx,dy,ax,ay);
    var d = lineCheck(cx,cy,dx,dy,bx,by);
    if(a*b<0 && c*d<0) return true;
    else return false;
}

document.write(lineCrossCheck(ax,ay,bx,by,cx,cy,dx,dy));

trueなので交差している。そういえば、これだとx=5といったxが一定の直線との交差判定をしようとするとエラーになる。式のbx-axの部分が両方とも同じ値になるため0になるからだ。0で割るとjavascriptは結果がinfinityになるようなので、infinity様に何を足そうが引こうがきっと答えはinfinityになるのだろう。よって修正版をつくる。


ffunction lineCheck(ax,ay,bx,by,cx,cy){
 if(ax==bx){
  return cx - ax;
 }else{
  return (by-ay)/(bx-ax)*cx+(ay-(by-ay)/(bx-ax)*ax)-cy;
 }
}

これでどうだろう。

点が長方形の内側にあるかチェックする

2011-09-06T22:29:00.000+09:00

点が長方形の内側にあるか否かをチェックするには、外積を使えばよい。

ある長方形(10,10),(30,10),(30,30),(10,30)と、ある点(20,20)があるとしよう。このある点がある長方形の内側にあるのか外側にあるのかを判定したい。このような長方形であれば、外積を使うまでもなくチェックが可能だが、長方形が回転している場合や、長方形以外の多角形の場合などになると、簡単ではなくなる。しかし、外積を使えば一発で分かる。外積はこのようにベクトルAとベクトルBの外積を求めた場合、その値がマイナスであればベクトルBはベクトルAの右側にあることになるので、長方形の各辺とある点が全て右側にあることを外積によって確かめればよい。(HTML5のcanvasの場合、座標は左上が原点となるので注意が必要じゃ。一般的な一番左下を原点とする形態であれば、長方形の各辺を時計回りにベクトルにしていけば、点がベクトルの右側にある場合、外積の数値はマイナスになるが、canvasの場合は反時計回りにベクトルにしていくとよい。マイナスになればベクトルの左側にあることにあり、（全ての辺に対して左側にあるのであれば）それはすなわち内側にあるということだ。)

まず、長方形の(30,10)-(10,10)の辺と点の位置関係を確認しよう。長方形の辺をベクトルにすると(-20,0)になる。長方形の辺の始点と点をベクトルにすると、(-10,10)となる。この２つのベクトルの外積を求めると、下記になる。
-20*10-10*0 = -200

マイナスなので点は辺の左側にあるということだ。これを全ての辺でチェックして、全ての結果がマイナスであれば内側にあるということになる。

javascriptによって内側判定をするとこうなる。

var x = 10; //長方形の左上x
var y = 10; //長方形の左上y
var w = 20; //長方形のwidth
var h = 20; //長方形のheight
var px = 20; //点のx
var py = 20; //点のy

function gaiseki(ax,ay,bx,by){
     return ax*by-bx*ay;
}

function pointInCheck(X,Y,W,H,PX,PY){
    var a = gaiseki(-W,0,PX-W-X,PY-Y);
    var b = gaiseki(0,H,PX-X,PY-Y);
    var c = gaiseki(W,0,PX-X,PY-Y-H);
    var d = gaiseki(0,-H,PX-W-X,PY-H-Y);
    if(a<0&&b<0&&c<0&&d<0) return true;
    else return false;
}

document.write(pointInCheck(x,y,w,h,px,py));

tureだから、内側にある。

ベクトルの外積

2011-09-05T23:07:00.001+09:00

ベクトルの外積は便利だ。ベクトルAとベクトルBの外積を求めたときに値がマイナスであれば、ベクトルBはベクトルAの右側にいるということが分かる。

試してみよう。

ベクトルA(6,6)、ベクトルB(6,0)としよう。
外積は下記の式になる。

Ax * By - Bx * Ay

よって、6*0-6*6 = -36 となる。
確かにマイナスである。

それでは、ベクトルA(6,0)、ベクトルB(6,6)としてみよう。
6*6-6*0 = 36 となる。
確かにプラスである。

ベクトルにはもう一つの成立する式がある。

|A| * |B| * sinθ

ベクトルA(6,0)、ベクトルB(6,6)だとすると、
6 * 6ルート2 *sin(45度)になるはずなので、javascriptだと下記になる。

document.write(6*6*Math.sqrt(2)*Math.sin(45*Math.PI/180));

確かに36で一致する。

cosθの値をグラフにしてみる

2011-09-05T01:28:00.000+09:00

０度〜360度のcosθの値をグラフに出してみよう。HTML canvasを使おう。

一番上が１を表している。真ん中が0で、一番下が-1である。一番左が0を表していて縦の目盛線は、45ずつに引いているつまり、0度はcosは１。それから角度が拡大するにつれてcosは徐々に小さくなっていき、90度だとcosは0になる。90度を超えるとマイナス数値になり、180度でcosは−１になる。180度を超えると逆に大きくなり、270度で0に戻る。270度を超えるとプラス数値になり、360度で1に戻る。


<canvas id="cosCanvas" width="365" height="110"></canvas>

<script type="text/javascript">

var cosCanvas = document.getElementById("cosCanvas");

var COSC = cosCanvas.getContext("2d");

var CW = cosCanvas.width, CH = cosCanvas.height;



var cos = 0;



for(var deg=0;deg<361;deg++){

    cos = Math.cos(deg*Math.PI/180);

    COSC.beginPath();

    COSC.fillStyle = '#ff5500';

    COSC.arc(deg,CH/2-cos*50, 1, 0, 360,false);

    COSC.fill();

}



COSC.beginPath();

COSC.strokeStyle = '#666666';

COSC.moveTo(0,CH/2); 

COSC.lineTo(CW,CH/2); 

COSC.closePath();

COSC.stroke();



for(var i=0;i<361;i+=45){

    COSC.beginPath();

    COSC.strokeStyle = '#666666';

    COSC.moveTo(i,0); 

    COSC.lineTo(i,CH); 

    COSC.closePath();

    COSC.stroke();

}

</script>

ベクトルの内積の研究（1）

2011-09-05T00:35:00.001+09:00

ベクトルの内積を研究する。

まずV,Uをそれぞれ、(3,5)、(6,3)としよう。
ベクトルの内積は下記のようになるものをいうらしい。

V●U = Vx * Ux + Vy * Uy

よって、内積は、3*6+5*3=となる。

内積ではもう一つ成立する式があるらしい。

V●U = |V|*|U|*cosθ

ベクトルの大きさは、三平方の定理で求められるので、下記のようになる。
|V| = 3^2+5^2の平方根 =
|U| = 6^2+3^2の平方根 =

よって、cosθの値が求められる。javascriptでやると下記のようになる。

var vx = 3, vy = 5;

var ux = 6, uy = 3;

var VU = vx*ux+vy*uy;

var valV = Math.sqrt(3*3+5*5);

var valU = Math.sqrt(6*6+3*3);

var cos = VU / valV / valU;

document.write(cos);

　となる。

javascriptのMath.acos(cos)という関数は、cosの値を入れると角度を返してくれるようなのでやってみよう。

var rad = Math.acos(cos);

document.write(rad);

これはラジアンだが、360 度表記にすると、度ということだ。

これが合っているかをatan2関数を使って確認してみよう。

var radV = Math.atan2(vy, vx);

var radU = Math.atan2(uy,ux);

document.write(radV - radU);

おお合っている。

しかし、内積が便利に使えるシーンがまだよく分からない。atan2関数があれば不要だったりするのかのう。

Javascript Math.sin(rad) サインを求める

2011-09-04T16:32:00.001+09:00

Math.sin(rad)でサインを求められる。引数のradはラジアン。ラジアンがよく分からない。

コンピュータゲームの物理という私のバイブルによると、ラジアンは角度を表す方法の１つのようだ。我々は360度で一周する方法をいつも使っているが、この360という中途半端な数字は、そもそも１年が360日だと思われていた頃の名残であること以外に理由はないそうだ。プログラム等で計算する場合もっと使い易い角度表記がないものかと、考えられたのがラジアンであるということだ。

ラジアンは、半径1の円を基準にした角度表記であるそうだ。ラジアンは、半径1の場合に角度がθだった場合の円周の長さのことである。つまり、角度θを半径1の場合の円周の長さで表すのがラジアンである。ちなみに、π(約3.14)は円周の長さが直径の何倍になるかを表した数字である。例えば半径1であれば、直径は2なので円周は、2π（約6.28）である。

つまり、360度をラジアンで表すと、2πということである。180度ならばπである。1度であれば、π／180ということだ。

ラジアンのすごいところは、360度表記と比べて円周の長さという実際の値に対応しているところと、長さと角度が完全に完全に一対一になっているところだそうだ。あんまりすごさが分からないが、確かに360度の360という数字自体には何の意味もないことはよく分かった。コンピュータがラジアンを使いたくなる気持ちも分かる。

さてこれでラジアンが分かったので、最初のMath.sin関数をみると、引数がラジアンなので、Math.sin(30度）ではいけない。これをラジアンに変えて引数に投入するので、Math.sin(30*Math.PI/180)となる。

Javascript Math.PI 円周率を求める関数

2011-09-04T16:05:00.002+09:00

document.write(Math.PI);

Javascript Math.atan2() X軸からポイントまでの角度を取得

2011-09-04T16:01:00.001+09:00

Math.atan2(y, x)

http://www.ajaxtower.jp/js/math_class/index15.html
ここの説明が分かり易そうだ。

atan2関数は座標の逆正接(アークタンジェント)を計算して返します。引数に指定した原点と座標(x, y)、そして座標からX座標へ降ろした点の3点からなる三角形を対象として逆正接(アークタンジェント)を計算します。引数がY座標からとなっていることに注意して下さい。

例えば座標(1, 1)とした場合、角度は45度になりタンジェントはtan(45度) = 1 / 1 = 1となります。atan2関数はタンジェントの結果が1となるような角度を取得するために、タンジェントの結果ではなく座標を指定します。つまりこの関数は座標を指定することで、原点からその座標に引いた直線のX軸からの角度を取得することができます。

ちょっと試してみよう。

var x = 10, y = 10;

document.write(Math.atan2(y,x));

結果はラジアンなので、360度表記に直してみよう。
ラジアンπが180度なので、ラジアンをπで割って180で書ければいいだろう。

var x = 10, y = 10, rad, deg;

rad = Math.atan2(y,x);

deg = rad/Math.PI*180;

document.write(deg);

原点を0,0とすると、x,yが10,10なので、直角二等辺三角形になるということだな。

では、x=1,y=ルート3にしてみよう。

var x = 1, y = Math.sqrt(3), rad, deg;

rad = Math.atan2(y,x);

deg = rad/Math.PI*180;

document.write(deg);

やはり60度だな。HTML5 Canvasの場合は、左上を原点とするから、そこだけ気をつけないといけないな。

Java LinkedListのテスト（Android Game 敵と弾の当たり判定〜削除）

2011-08-28T23:29:00.003+09:00

Androidでゲームを作っているのですが、敵も沢山いて、プレイヤーが撃った弾も沢山ある場合、敵毎に全ての弾と当たり判定を実施する必要があります。敵が弾に当たっている場合は、敵と当たっている弾を削除します。簡単に出来ると思っていたのですが、今これにハマっています。。よって頭を整理しながらまとめていきたいと思います。

敵と弾は数が自在に調整できた方がいいので、今回のテスト対象であります、LinkedListに格納していきます。ArrayListかLinkedListかどちらを選択するかについてですが、このページを見て、削除が多いのでLinkedListを使うことにします。敵はEnemyクラスのインスタンスになり、弾はBulletクラスのインスタンスになります。

まず、Enemyクラスは下記とします。

public class Enemy {

	float x, y, w = 30, h = 30;

	

	public Enemy(float X, float Y){

		x = X; y = Y;

	}

}

次に、Bulletクラスは下記とします。（今回はテストなので分かり易くする為に弾の大きさを敵と同じにしました。）

public class Bullet {

	float x, y, w = 30, h = 30;

	

	public Bullet(float X, float Y){

		x = X; y = Y;

	}

}

次に、EnemyクラスとBulletクラスを格納するためのLinkedListを2つ作ります。

private LinkedList<Enemy> enemys = new LinkedList<Enemy>();

private LinkedList<Bullet> bullets = new LinkedList<Bullet>();

次に、敵と弾のインスタンスを3つずつ作成し、LinkedListに格納します。インスタンス作成時の引数はx座標とy座標になりますので、最初の敵と最初の弾はまさに同じ場所にいて、その他の敵と弾は全く別の場所にいることになります。つまり、後程のコードで、うまく最初の敵と最初の弾だけ消えればゴールになります。

//敵の生成

enemys.add(new Enemy(10,10));

enemys.add(new Enemy(30,50));

enemys.add(new Enemy(100,100));

//弾の生成

bullets.add(new Bullet(10,10));

bullets.add(new Bullet(200,200));

bullets.add(new Bullet(300,300));

それでは、実際に当たり判定処理と、当たっている場合の削除をしてみます。想定するコードは下記です。

//敵と弾の衝突判定

Enemy eNow; Bullet bNow;

for(Iterator<Enemy> i = enemys.iterator(); i.hasNext();){

	eNow = i.next();

	for(Iterator<Bullet> j = bullets.iterator(); j.hasNext();){

		bNow = j.next();

		if(eNow.x<bNow.x+bNow.w && bNow.x<eNow.x+eNow.w &&

				eNow.y<bNow.y+bNow.h && bNow.y<=eNow.y+eNow.h){

			j.remove(); //弾を消す

			i.remove(); //敵を消す

		}

	}

}

上記コードを通した結果を下記のコードで表示してみます。

//結果の表示

System.out.println("実行結果");

for(Iterator<Enemy> i = enemys.iterator(); i.hasNext();){

	eNow = i.next();

	System.out.println("敵は("+(int)eNow.x+","+(int)eNow.y+")にいます。");

}

for(Iterator<Bullet> i = bullets.iterator(); i.hasNext();){

	bNow = i.next();

	System.out.println("弾は("+(int)bNow.x+","+(int)bNow.y+")にあります。");

}

さて結果は下記のようになりました。やはり問題ないようだな。しっかり想定どおり最初の敵と最初の弾のみ消えている。別の部分に問題があるってことだな。。

実行結果

敵は(30,50)にいます。

敵は(100,100)にいます。

弾は(200,200)にあります。

弾は(300,300)にあります。

試しに弾の位置を少し変えて実行してみよう。最初の弾の位置をずらしました。

//敵の生成

enemys.add(new Enemy(10,10));

enemys.add(new Enemy(30,50));

enemys.add(new Enemy(100,100));

//弾の生成

bullets.add(new Bullet(30,40));

bullets.add(new Bullet(200,200));

bullets.add(new Bullet(300,300));

実行結果は下記のとおり。これは敵・弾ともに消えているけど、敵はもう一匹消えるべきだな。最初の敵と２番目の敵に両方当たっているはずだからね。まあでも今は敵同士は離れているので、これが問題ではないな。

実行結果

敵は(30,50)にいます。

敵は(100,100)にいます。

弾は(200,200)にあります。

弾は(300,300)にあります。

Android 横スクロールゲームをつくってみる

2011-08-22T21:30:00.130+09:00

地面とボールをつくりました。ボールは既にタッチするとジャンプするようになっています。このページで作成したタッチするとジャンプし、ジャンプ中にタッチすると２段ジャンプする仕様です。ちなみに、タッチをし続けるとジャンプ力が増すようになっています。これからこれをベースに横スクロールゲームを作ってみます。

雲を表示する

とりあえず適当に雲を作りました。現時点のコードを記載します。

//HellowWorld.java



package net.npaka.helloworld;



import android.app.Activity;

import android.os.Bundle;

import android.view.Window;



public class HelloWorld extends Activity {

    @Override

    public void onCreate(Bundle bundle) {

        super.onCreate(bundle);

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(new HellowView(this));

    }

}

//HellowView.java



package net.npaka.helloworld;



import android.content.Context;

import android.content.res.Resources;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Rect;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.MotionEvent;



public class HellowView extends SurfaceView implements

	SurfaceHolder.Callback,Runnable{

	

	private int ww = 762;

	private int wh = 480;

	private Thread thread;

	private SurfaceHolder holder;

	private Paint paint = new Paint();

	private Ball ball = new Ball();

	private Cloud cloud = new Cloud();

	private Bitmap cloud_img;

	

	public HellowView(Context context){

		super(context);

		

		holder = getHolder();

		holder.addCallback(this);

		holder.setFixedSize(ww,wh);

		

		Resources r = getResources();

		cloud_img = BitmapFactory.decodeResource(r, R.drawable.cloud);

		

		paint.setAntiAlias(true);

		paint.setStyle(Paint.Style.FILL);

		paint.setColor(Color.argb(255,154,54,54));

	}

	

	public void surfaceCreated(SurfaceHolder holder){

		thread = new Thread(this);

		thread.start();

	}

	

	public void surfaceChanged(SurfaceHolder holder,

			int format,int w,int h){

	}

	

	public void surfaceDestroyed(SurfaceHolder holder){

		thread = null;

	}

	

	public void run(){

		Canvas canvas;

		while(thread!=null){

			canvas = holder.lockCanvas();

			canvas.drawColor(Color.BLACK);

			cloud.view(canvas);

			canvas.drawRect(new Rect(0,480-50,762,480),paint);

			ball.view(canvas);

			holder.unlockCanvasAndPost(canvas);

			

			try{

				Thread.sleep(10);

			}catch(Exception e){

			}

		}

	}



	@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		if(action == 0){

			if(ball.jumpFlag == true){

				ball.jumpFlag2 = true;

			}else{

				ball.jumpFlag = true;

				ball.touchTime = 1;

			}

		}else if(action == 1){

			ball.touchTime = 0;

		}

		return true;

	}

	

	class Cloud{

		int x1 = 50;

		int y1 = 50;

		int x2 = x1+350;

		int y2 = y1+100;

		int x3 = x2+300;

		int y3 = y2-50;

		

		public void view(Canvas canvas){

			canvas.drawBitmap(cloud_img, x1,y1, null);

			canvas.drawBitmap(cloud_img, x2,y2, null);

			canvas.drawBitmap(cloud_img, x3,y3, null);

		}

	}

	

	class Ball{

		int r = 20;

		int x = r*2+50;

		float y_base = wh-r-50;

		float y = y_base;

		float vy = -8;

		float g = 0.2F;

		boolean jumpFlag = false;

		boolean jumpFlag2 = false;

		boolean jump2finFlag = false;

		int touchTime = 0;

		Paint paint = new Paint();

		

		public Ball(){

			paint.setAntiAlias(true);

			paint.setStyle(Paint.Style.FILL);

			paint.setColor(Color.argb(255,255,255,255));

		}

		

		public void view(Canvas canvas){

			canvas.drawCircle(x, y, r, paint);

			if(jumpFlag){

				paint.setColor(Color.argb(255,0,255,255));

				if(jumpFlag2){

					paint.setColor(Color.argb(255,255,255,0));

					if(!jump2finFlag){

						vy = -6;

						jump2finFlag = true;

					}

				}else if(touchTime > 0){

					paint.setColor(Color.argb(255,0,255,0));

					vy = -8;

					touchTime ++;

					if(touchTime >20){

						touchTime = 0;

					}

				}

				y += vy;

				vy += g;

				if(y>=y_base){

					y = y_base;

					vy = -8;

					jumpFlag = false;

					jumpFlag2 = false;

					jump2finFlag = false;

					paint.setColor(Color.argb(255,255,255,255));

				}

			}

		}

	}

}

今はこの２つのファイルで構成されています。今後は、HellowViewクラスを改良していきます。私は横スクロールについて全く一般論を知りませんので、まったくもって非効率なことをこれからする可能性があります。ご指摘いただければ幸いです。

雲を動かしてボールが動いているように見せる

修正版HellowView.javaは下記です。

package net.npaka.helloworld;



import java.util.ArrayList;



import android.content.Context;

import android.content.res.Resources;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PointF;

import android.graphics.Rect;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.MotionEvent;



public class HellowView extends SurfaceView implements

	SurfaceHolder.Callback,Runnable{

	

	private int ww = 762;

	private int wh = 480;

	private Thread thread;

	private SurfaceHolder holder;

	private Paint paint = new Paint();

	private Ball ball = new Ball();

	private Cloud cloud  =new Cloud();

	private Bitmap cloud_img;

	

	public HellowView(Context context){

		super(context);

		

		holder = getHolder();

		holder.addCallback(this);

		holder.setFixedSize(ww,wh);

		

		Resources r = getResources();

		cloud_img = BitmapFactory.decodeResource(r, R.drawable.cloud);

		

		paint.setAntiAlias(true);

		paint.setStyle(Paint.Style.FILL);

		paint.setColor(Color.argb(255,154,54,54));

	}

	

	public void surfaceCreated(SurfaceHolder holder){

		thread = new Thread(this);

		thread.start();

	}

	

	public void surfaceChanged(SurfaceHolder holder,

			int format,int w,int h){

	}

	

	public void surfaceDestroyed(SurfaceHolder holder){

		thread = null;

	}

	

	public void run(){

		Canvas canvas;

		while(thread!=null){

			canvas = holder.lockCanvas();

			canvas.drawColor(Color.BLACK);

			cloud.view(canvas);

			canvas.drawRect(new Rect(0,480-50,762,480),paint);

			ball.view(canvas);

			holder.unlockCanvasAndPost(canvas);

			

			try{

				Thread.sleep(10);

			}catch(Exception e){

			}

		}

	}



	@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		if(action == 0){

			if(ball.jumpFlag == true){

				ball.jumpFlag2 = true;

			}else{

				ball.jumpFlag = true;

				ball.touchTime = 1;

			}

		}else if(action == 1){

			ball.touchTime = 0;

		}

		return true;

	}

	

	class Cloud{

		ArrayList<PointF> cloudXY = new ArrayList<PointF>();

		

		public Cloud(){

			float X = 50;

			float Y = 50;

			for(int i=0;i<5;i++){

				cloudXY.add(new PointF(X,Y));

				X += 300;

				Y = nextY(Y);

			}

		}



		public void view(Canvas canvas){

			for(int i=0;i<cloudXY.size();i++){

				canvas.drawBitmap(cloud_img, cloudXY.get(i).x,cloudXY.get(i).y, null);

				cloudXY.get(i).x -= ball.vx;

				if(cloudXY.get(i).x<-219){

					cloudXY.add(new PointF(cloudXY.get(cloudXY.size()-1).x+300,

							nextY(cloudXY.get(cloudXY.size()-1).y)));

					cloudXY.remove(i);

					i--;

				}

			}

		}

		

		private float nextY(float Y){

			if(Y==50) return 150;

			if(Y==150) return 100;

			if(Y==100) return 50;

			return 0;

		}

	}

	

	class Ball{

		float r = 20;

		float x = r*2+50;

		float y_base = wh-r-50;

		float y = y_base;

		float vx = 0.05f;

		float ax = 0.01f;

		float vy = -8;

		float g = 0.2F;

		boolean jumpFlag = false;

		boolean jumpFlag2 = false;

		boolean jump2finFlag = false;

		int touchTime = 0;

		Paint paint = new Paint();

		

		public Ball(){

			paint.setAntiAlias(true);

			paint.setStyle(Paint.Style.FILL);

			paint.setColor(Color.argb(255,255,255,255));

		}

		

		public void view(Canvas canvas){

			canvas.drawCircle(x, y, r, paint);

			if(jumpFlag){

				paint.setColor(Color.argb(255,0,255,255));

				if(jumpFlag2){

					paint.setColor(Color.argb(255,255,255,0));

					if(!jump2finFlag){

						vy = -6;

						jump2finFlag = true;

					}

				}else if(touchTime > 0){

					paint.setColor(Color.argb(255,0,255,0));

					vy = -8;

					touchTime ++;

					if(touchTime >20){

						touchTime = 0;

					}

				}

				y += vy;

				vy += g;

				if(y>=y_base){

					y = y_base;

					vy = -8;

					jumpFlag = false;

					jumpFlag2 = false;

					jump2finFlag = false;

					paint.setColor(Color.argb(255,255,255,255));

				}

			}

			if(vx < 50){

				vx += ax;

			}else{

				vx = 50;

			}

		}

	}

}

スクリーンキャプチャは下記です。写真だと見た目は変わりません。

雲は高速で流れていきますが、ボールが動いているようには見えません。雲は現実世界でも勝ってに動くので、木とか動かないものを動かす必要がありそうです。

サボテンも動かして更にボールが動いて見えるようにする

サボテンを植えることにしました。
修正版コードはこれです。

package net.npaka.helloworld;



import java.util.ArrayList;

import java.util.Random;



import android.content.Context;

import android.content.res.Resources;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PointF;

import android.graphics.Rect;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.MotionEvent;



public class HellowView extends SurfaceView implements

	SurfaceHolder.Callback,Runnable{

	

	private int ww = 762;

	private int wh = 480;

	private Thread thread;

	private SurfaceHolder holder;

	private Paint paint = new Paint();

	private Ball ball = new Ball();

	private Cloud cloud  = new Cloud();

	private Saboten saboten = new Saboten();

	private Bitmap cloud_img;

	private Bitmap sabo_img;

	

	public HellowView(Context context){

		super(context);

		

		holder = getHolder();

		holder.addCallback(this);

		holder.setFixedSize(ww,wh);

		

		Resources r = getResources();

		cloud_img = BitmapFactory.decodeResource(r, R.drawable.cloud);

		sabo_img = BitmapFactory.decodeResource(r, R.drawable.saboten);

		

		paint.setAntiAlias(true);

		paint.setStyle(Paint.Style.FILL);

		paint.setColor(Color.argb(255,154,54,54));

	}

	

	public void surfaceCreated(SurfaceHolder holder){

		thread = new Thread(this);

		thread.start();

	}

	

	public void surfaceChanged(SurfaceHolder holder,

			int format,int w,int h){

	}

	

	public void surfaceDestroyed(SurfaceHolder holder){

		thread = null;

	}

	

	public void run(){

		Canvas canvas;

		while(thread!=null){

			canvas = holder.lockCanvas();

			canvas.drawColor(Color.argb(255,0,150,200));

			cloud.view(canvas);

			saboten.view(canvas);

			canvas.drawRect(new Rect(0,480-50,762,480),paint);

			ball.view(canvas);

			holder.unlockCanvasAndPost(canvas);

			

			try{

				Thread.sleep(10);

			}catch(Exception e){

			}

		}

	}



	@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		if(action == 0){

			if(ball.jumpFlag == true){

				ball.jumpFlag2 = true;

			}else{

				ball.jumpFlag = true;

				ball.touchTime = 1;

			}

		}else if(action == 1){

			ball.touchTime = 0;

		}

		return true;

	}

	

	class Cloud{

		ArrayList<PointF> cloudXY = new ArrayList<PointF>();

		

		public Cloud(){

			float X = 50;

			float Y = 50;

			for(int i=0;i<5;i++){

				cloudXY.add(new PointF(X,Y));

				X += 300;

				Y = nextY(Y);

			}

		}



		public void view(Canvas canvas){

			for(int i=0;i<cloudXY.size();i++){

				canvas.drawBitmap(cloud_img, cloudXY.get(i).x,cloudXY.get(i).y, null);

				cloudXY.get(i).x -= ball.vx;

				if(cloudXY.get(i).x<-219){

					cloudXY.add(new PointF(cloudXY.get(cloudXY.size()-1).x+300,

							nextY(cloudXY.get(cloudXY.size()-1).y)));

					cloudXY.remove(i);

					i--;

				}

			}

		}

		

		private float nextY(float Y){

			if(Y==50) return 150;

			if(Y==150) return 100;

			if(Y==100) return 50;

			return 0;

		}

	}

	

	class Saboten{

		ArrayList<PointF> saboXY = new ArrayList<PointF>();

		float Y = wh-50-213;

		Random rnd = new Random();

		

		public Saboten(){

			float X = 400;

			for(int i=0;i<4;i++){

				saboXY.add(new PointF(X,Y));

				X += (200+rnd.nextInt(300));

			}

		}

		

		public void view(Canvas canvas){

			for(int i=0;i<saboXY.size();i++){

				canvas.drawBitmap(sabo_img, saboXY.get(i).x,saboXY.get(i).y, null);

				saboXY.get(i).x -= ball.vx;

				if(saboXY.get(i).x<-194){

					saboXY.add(new PointF(saboXY.get(saboXY.size()-1).x+200+rnd.nextInt(300),Y));

					saboXY.remove(i);

					i--;

				}

			}

		}

	}

	

	class Ball{

		float r = 20;

		float x = r*2+50;

		float y_base = wh-r-50;

		float y = y_base;

		float vx = 0.05f;

		float ax = 0.01f;

		float vy = -8;

		float g = 0.2F;

		boolean jumpFlag = false;

		boolean jumpFlag2 = false;

		boolean jump2finFlag = false;

		int touchTime = 0;

		Paint paint = new Paint();

		

		public Ball(){

			paint.setAntiAlias(true);

			paint.setStyle(Paint.Style.FILL);

			paint.setColor(Color.argb(255,255,255,255));

		}

		

		public void view(Canvas canvas){

			canvas.drawCircle(x, y, r, paint);

			if(jumpFlag){

				paint.setColor(Color.argb(255,0,255,255));

				if(jumpFlag2){

					paint.setColor(Color.argb(255,255,255,0));

					if(!jump2finFlag){

						vy = -6;

						jump2finFlag = true;

					}

				}else if(touchTime > 0){

					paint.setColor(Color.argb(255,0,255,0));

					vy = -8;

					touchTime ++;

					if(touchTime >20){

						touchTime = 0;

					}

				}

				y += vy;

				vy += g;

				if(y>=y_base){

					y = y_base;

					vy = -8;

					jumpFlag = false;

					jumpFlag2 = false;

					jump2finFlag = false;

					paint.setColor(Color.argb(255,255,255,255));

				}

			}

			if(vx < 10){

				vx += ax;

			}else{

				vx = 10;

			}

		}

	}

}

スクリーンキャプチャはこれです。

今度はボールが動いて見えます。ただ高速に動かすと見てるだけで酔って気持ち悪くなったので、最高速度を落としました。サボテンを等間隔に配置すると全く動いているように見えないので、ランダム配置にしました。

ボールを車の絵に変える

今回は車のゲームしてみることにしました。

車が走るようになりました。次に障害物をランダムに出現させます。

障害物をランダムに出現させる

まずは、障害物を１つずつサボテンと同じようにランダムに出現させてみます。下記の修正版コードにより、左のような岩が一つずつ出現しました。

修正版コードです。

package net.npaka.helloworld;



import java.util.ArrayList;

import java.util.Random;



import android.content.Context;

import android.content.res.Resources;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PointF;

import android.graphics.Rect;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.MotionEvent;



public class HellowView extends SurfaceView implements

	SurfaceHolder.Callback,Runnable{

	

	private int ww = 762;

	private int wh = 480;

	private Thread thread;

	private SurfaceHolder holder;

	private Paint paint = new Paint();

	private Car car = new Car();

	private Cloud cloud  = new Cloud();

	private Saboten saboten = new Saboten();

	private Rock rock = new Rock();

	private Bitmap cloud_img;

	private Bitmap sabo_img;

	private Bitmap car_img;

	private Bitmap rock_img;

	

	public HellowView(Context context){

		super(context);

		

		holder = getHolder();

		holder.addCallback(this);

		holder.setFixedSize(ww,wh);

		

		Resources r = getResources();

		cloud_img = BitmapFactory.decodeResource(r, R.drawable.cloud);

		sabo_img = BitmapFactory.decodeResource(r, R.drawable.saboten);

		car_img = BitmapFactory.decodeResource(r, R.drawable.car);

		rock_img = BitmapFactory.decodeResource(r, R.drawable.rock);

		

		paint.setAntiAlias(true);

		paint.setStyle(Paint.Style.FILL);

		paint.setColor(Color.argb(255,154,54,54));

	}

	

	public void surfaceCreated(SurfaceHolder holder){

		thread = new Thread(this);

		thread.start();

	}

	

	public void surfaceChanged(SurfaceHolder holder,

			int format,int w,int h){

	}

	

	public void surfaceDestroyed(SurfaceHolder holder){

		thread = null;

	}

	

	public void run(){

		Canvas canvas;

		while(thread!=null){

			canvas = holder.lockCanvas();

			canvas.drawColor(Color.argb(255,0,150,200));

			cloud.view(canvas);

			saboten.view(canvas);

			canvas.drawRect(new Rect(0,480-50,762,480),paint);

			rock.view(canvas);

			car.view(canvas);

			holder.unlockCanvasAndPost(canvas);

			

			try{

				Thread.sleep(10);

			}catch(Exception e){

			}

		}

	}



	@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		if(action == 0){

			if(car.jumpFlag == true){

				car.jumpFlag2 = true;

			}else{

				car.jumpFlag = true;

				car.touchTime = 1;

			}

		}else if(action == 1){

			car.touchTime = 0;

		}

		return true;

	}

	

	class Cloud{

		ArrayList<PointF> cloudXY = new ArrayList<PointF>();

		

		public Cloud(){

			float X = 50;

			float Y = 50;

			for(int i=0;i<5;i++){

				cloudXY.add(new PointF(X,Y));

				X += 300;

				Y = nextY(Y);

			}

		}



		public void view(Canvas canvas){

			for(int i=0;i<cloudXY.size();i++){

				canvas.drawBitmap(cloud_img, cloudXY.get(i).x,cloudXY.get(i).y, null);

				cloudXY.get(i).x -= car.vx;

				if(cloudXY.get(i).x<-219){

					cloudXY.add(new PointF(cloudXY.get(cloudXY.size()-1).x+300,

							nextY(cloudXY.get(cloudXY.size()-1).y)));

					cloudXY.remove(i);

					i--;

				}

			}

		}

		

		private float nextY(float Y){

			if(Y==50) return 150;

			if(Y==150) return 100;

			if(Y==100) return 50;

			return 0;

		}

	}

	

	class Saboten{

		ArrayList<PointF> saboXY = new ArrayList<PointF>();

		float Y = wh-50-213;

		Random rnd = new Random();

		

		public Saboten(){

			float X = 400;

			for(int i=0;i<4;i++){

				saboXY.add(new PointF(X,Y));

				X += (200+rnd.nextInt(300));

			}

		}

		

		public void view(Canvas canvas){

			for(int i=0;i<saboXY.size();i++){

				canvas.drawBitmap(sabo_img, saboXY.get(i).x,saboXY.get(i).y, null);

				saboXY.get(i).x -= car.vx;

				if(saboXY.get(i).x<-194){

					saboXY.add(new PointF(saboXY.get(saboXY.size()-1).x+200+rnd.nextInt(300),Y));

					saboXY.remove(i);

					i--;

				}

			}

		}

	}

	

	class Rock{

		ArrayList<PointF> rockXY = new ArrayList<PointF>();

		float Y = wh-50-85;

		Random rnd = new Random();

		

		public Rock(){

			float X = 1000;

			for(int i=0;i<2;i++){

				rockXY.add(new PointF(X,Y));

				X += (500+rnd.nextInt(300));

			}

		}

		

		public void view(Canvas canvas){

			for(int i=0;i<rockXY.size();i++){

				canvas.drawBitmap(rock_img, rockXY.get(i).x,rockXY.get(i).y, null);

				rockXY.get(i).x -= car.vx;

				if(rockXY.get(i).x<-85){

					rockXY.add(new PointF(rockXY.get(rockXY.size()-1).x+500+rnd.nextInt(300),Y));

					rockXY.remove(i);

					i--;

				}

			}

		}

		

	}

	

	class Car{

		float x = 150;

		float y_base = wh-80-50;

		float y = y_base;

		float vx = 0.05f;

		float ax = 0.01f;

		float vy = -8;

		float g = 0.2F;

		boolean jumpFlag = false;

		boolean jumpFlag2 = false;

		boolean jump2finFlag = false;

		int touchTime = 0;

		

		public void view(Canvas canvas){

			canvas.drawBitmap(car_img, x,y, null);

			if(jumpFlag){

				if(jumpFlag2){

					if(!jump2finFlag){

						vy = -6;

						jump2finFlag = true;

					}

				}else if(touchTime > 0){

					vy = -8;

					touchTime ++;

					if(touchTime >20){

						touchTime = 0;

					}

				}

				y += vy;

				vy += g;

				if(y>=y_base){

					y = y_base;

					vy = -8;

					jumpFlag = false;

					jumpFlag2 = false;

					jump2finFlag = false;

				}

			}

			if(vx < 10){

				vx += ax;

			}else{

				vx = 10;

			}

		}

	}

}

衝突判定してみる

むお衝突判定しようとして気づきましたが、このコードじゃ全然だめだ。物理の世界を持ち込むんなら、共通的な物理の世界をコードの中で作っとかないと、たこ足コードになってしまうのう。修正するのがめんどくさいのでこれはここまでにしよう。今今のコードは下記です。衝突判定をして、衝突していた場合、車が岩の上の方にいた場合は岩にのっかり、そうじゃなければ車が跳ね返るようになっています。しかしこれは全然ダメダメコードです。

package net.npaka.helloworld;



import java.util.ArrayList;

import java.util.Random;



import android.content.Context;

import android.content.res.Resources;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PointF;

import android.graphics.Rect;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.MotionEvent;



public class HellowView extends SurfaceView implements

	SurfaceHolder.Callback,Runnable{

	

	private int ww = 762;

	private int wh = 480;

	private Thread thread;

	private SurfaceHolder holder;

	private Paint paint = new Paint();

	private Car car = new Car();

	private Cloud cloud  = new Cloud();

	private Saboten saboten = new Saboten();

	private Rock rock = new Rock();

	private Bitmap cloud_img;

	private Bitmap sabo_img;

	private Bitmap car_img;

	private Bitmap rock_img;

	

	public HellowView(Context context){

		super(context);

		

		holder = getHolder();

		holder.addCallback(this);

		holder.setFixedSize(ww,wh);

		

		Resources r = getResources();

		cloud_img = BitmapFactory.decodeResource(r, R.drawable.cloud);

		sabo_img = BitmapFactory.decodeResource(r, R.drawable.saboten);

		car_img = BitmapFactory.decodeResource(r, R.drawable.car);

		rock_img = BitmapFactory.decodeResource(r, R.drawable.rock);

		

		paint.setAntiAlias(true);

		paint.setStyle(Paint.Style.FILL);

		paint.setColor(Color.argb(255,154,54,54));

	}

	

	public void surfaceCreated(SurfaceHolder holder){

		thread = new Thread(this);

		thread.start();

	}

	

	public void surfaceChanged(SurfaceHolder holder,

			int format,int w,int h){

	}

	

	public void surfaceDestroyed(SurfaceHolder holder){

		thread = null;

	}

	

	public void run(){

		Canvas canvas;

		while(thread!=null){

			canvas = holder.lockCanvas();

			canvas.drawColor(Color.argb(255,0,150,200));

			cloud.view(canvas);

			saboten.view(canvas);

			canvas.drawRect(new Rect(0,480-50,762,480),paint);

			rock.view(canvas);

			car.view(canvas);

			holder.unlockCanvasAndPost(canvas);

			

			try{

				Thread.sleep(10);

			}catch(Exception e){

			}

		}

	}



	@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		if(action == 0){

			if(car.jumpFlag == true){

				car.jumpFlag2 = true;

			}else{

				car.jumpFlag = true;

				car.touchTime = 1;

			}

		}else if(action == 1){

			car.touchTime = 0;

		}

		return true;

	}

	

	class Cloud{

		ArrayList<PointF> cloudXY = new ArrayList<PointF>();

		

		public Cloud(){

			float X = 50;

			float Y = 50;

			for(int i=0;i<5;i++){

				cloudXY.add(new PointF(X,Y));

				X += 300;

				Y = nextY(Y);

			}

		}



		public void view(Canvas canvas){

			for(int i=0;i<cloudXY.size();i++){

				canvas.drawBitmap(cloud_img, cloudXY.get(i).x,cloudXY.get(i).y, null);

				cloudXY.get(i).x -= car.vx;

				if(cloudXY.get(i).x<-219){

					cloudXY.add(new PointF(cloudXY.get(cloudXY.size()-1).x+300,

							nextY(cloudXY.get(cloudXY.size()-1).y)));

					cloudXY.remove(i);

					i--;

				}

			}

		}

		

		private float nextY(float Y){

			if(Y==50) return 150;

			if(Y==150) return 100;

			if(Y==100) return 50;

			return 0;

		}

	}

	

	class Saboten{

		ArrayList<PointF> saboXY = new ArrayList<PointF>();

		float Y = wh-50-213;

		Random rnd = new Random();

		

		public Saboten(){

			float X = 400;

			for(int i=0;i<4;i++){

				saboXY.add(new PointF(X,Y));

				X += (200+rnd.nextInt(300));

			}

		}

		

		public void view(Canvas canvas){

			for(int i=0;i<saboXY.size();i++){

				canvas.drawBitmap(sabo_img, saboXY.get(i).x,saboXY.get(i).y, null);

				saboXY.get(i).x -= car.vx;

				if(saboXY.get(i).x<-194){

					saboXY.add(new PointF(saboXY.get(saboXY.size()-1).x+200+rnd.nextInt(300),Y));

					saboXY.remove(i);

					i--;

				}

			}

		}

	}

	

	class Rock{

		ArrayList<PointF> rockXY = new ArrayList<PointF>();

		float Y = wh-50-85;

		Random rnd = new Random();

		

		public Rock(){

			float X = 1000;

			for(int i=0;i<2;i++){

				rockXY.add(new PointF(X,Y));

				X += (500+rnd.nextInt(300));

			}

		}

		

		public void view(Canvas canvas){

			for(int i=0;i<rockXY.size();i++){

				canvas.drawBitmap(rock_img, rockXY.get(i).x,rockXY.get(i).y, null);

				rockXY.get(i).x -= car.vx;

				if(rockXY.get(i).x<-85){

					rockXY.add(new PointF(rockXY.get(rockXY.size()-1).x+500+rnd.nextInt(300),Y));

					rockXY.remove(i);

					i--;

				}

			}

		}

		

	}

	

	class Car{

		float x = 150;

		float y_base = wh-80-50;

		float y = y_base;

		float vx = 0.1f;

		float ax = 0.01f;

		float vy = -8;

		float g = 0.2F;

		boolean jumpFlag = false;

		boolean jumpFlag2 = false;

		boolean jump2finFlag = false;

		int touchTime = 0;

		

		public void view(Canvas canvas){

			canvas.drawBitmap(car_img, x,y, null);

			if(jumpFlag){

				if(jumpFlag2){

					if(!jump2finFlag){

						vy = -6;

						jump2finFlag = true;

					}

				}else if(touchTime > 0){

					vy = -8;

					touchTime ++;

					if(touchTime >20){

						touchTime = 0;

					}

				}

				y += vy;

				vy += g;

				if(y>=y_base){

					y = y_base;

					vy = -8;

					jumpFlag = false;

					jumpFlag2 = false;

					jump2finFlag = false;

				}

			}

			if(vx < 10){

				vx += ax;

			}else{

				vx = 10;

			}

			check_hit_rock();

		}

		

		public void check_hit_rock(){

			float rl;

			float rr;

			float rt;

			float rb;

			float cl;

			float cr;

			float ct;

			float cb;

			for(int i=0;i<2;i++){

				rl = rock.rockXY.get(i).x;

				rr = rl+85;

				rt = rock.rockXY.get(i).y;

				rb = rt+85;

				cl = x;

				cr = x+100;

				ct = y;

				cb = y+80;

				if(cl<rr&&rl<cr&&ct<rb&&rt<cb){

					if(20>cb-rt){

						y = rt-80;

						jumpFlag2 = false;

						jump2finFlag = false;

					}else{

						vx = -1;

					}

				}

				

			}

		}

	}	

}

Android SDK 横画面に固定する方法

2011-08-21T23:13:00.004+09:00

AndroidManifest.xmlのタグのscreenOrientation属性にlandscapeを指定すればOK。
尚、エミュレーターの向きを横に回転させるには、macの場合、fn+control+F11でOK。

AndroidSDK タッチイベント onTouchEventの研究

2011-08-21T04:17:00.071+09:00

Androidアプリはタッチイベントによってことが進むので、タッチイベントの正確な把握は必須であり、基本中の基本だ。時間をかけてじっくり研究することは必要なことだ。まだ全体像がAndroidSDKはよく分かっていないので、間違った記載があると思いますので、ご指摘いただければ幸いです。

http://goo.gl/1AcZh
この記事によると、

タッチイベントを取得するには、ActivityクラスのonTouchEvent()をオーバーライドします。引数には、MotionEventのインスタンスが渡されます。

とある。
また、

MotionEventは、getAction()を呼び出すことで、タッチアクション（DOWN/UP/MOVE/CANCEL）、getEventTime()を呼び出すことで、イベント発生時刻（ms）、getX()、getY()を呼び出すことで、タッチされたx、y座標、を取得することができます。

とある。

指一本しか使わない場合

指一本しか使わない場合はかなり単純に実装できそうだ。例えば、どこでもいいからユーザーがタッチすると、ジャンプするボールをつくることにしよう。長くタッチした場合にジャンプ力を増したりするケースが多いと思うが、今回はそのようなことは考慮しないことにしよう。タッチしたらジャンプするだけだ。

サンプルコードは下記になります。黒い画面に白いボールが一つ表示され、タッチするとボールが跳ねます。

package net.npaka.helloworld;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.MotionEvent;



public class HellowView extends SurfaceView implements

	SurfaceHolder.Callback,Runnable{

	

	private int ww = 480;

	private int wh = 762;

	private Thread thread;

	private SurfaceHolder holder;

	private Paint paint = new Paint();

	private Ball ball = new Ball();

	

	public HellowView(Context context){

		super(context);

		

		holder = getHolder();

		holder.addCallback(this);

		holder.setFixedSize(ww,wh);

		

		paint.setAntiAlias(true);

		paint.setStyle(Paint.Style.FILL);

		paint.setColor(Color.argb(255,255,255,255));

	}

	

	public void surfaceCreated(SurfaceHolder holder){

		thread = new Thread(this);

		thread.start();

	}

	

	public void surfaceChanged(SurfaceHolder holder,

			int format,int w,int h){

	}

	

	public void surfaceDestroyed(SurfaceHolder holder){

		thread = null;

	}

	

	public void run(){

		Canvas canvas;

		while(thread!=null){

			canvas = holder.lockCanvas();

			canvas.drawColor(Color.BLACK);

			ball.view(canvas);

			holder.unlockCanvasAndPost(canvas);

			

			try{

				Thread.sleep(10);

			}catch(Exception e){

			}

		}

	}



	@Override

	public boolean onTouchEvent(MotionEvent event){

		ball.jumpFlag = true;

		return true;

	}

	

	class Ball{

		int r = 20;

		int x = r*2;

		float y = wh-r;

		float vy = -8;

		float g = 0.2F;

		boolean jumpFlag = false;

		

		public void view(Canvas canvas){

			canvas.drawCircle(x, y, r, paint);

			if(jumpFlag){

				y += vy;

				vy += g;

				if(y>=wh-r){

					y = wh-r;

					vy = -8;

					jumpFlag = false;

				}

			}

		}

	}

}

上記サンプルコードでタッチイベントを取得している部分は下記になります。

@Override

	public boolean onTouchEvent(MotionEvent event){

		ball.jumpFlag = true;

		return true;

	}

何らかのタッチイベントが発生したら、ball.jumpFlagをtrueにするようにしています。jumpFlagがtrueの場合にballはジャンプをするように設定されています。このような単純なタッチと動作の関連で問題ないようであれば、このような単純なコードで実装が可能です。但し、この場合、タッチした場合でも、ムーブした場合でも、タッチを離した場合でも、あるいは２本目の指でタッチした場合でも、何でもかんでもタッチイベントが発生した場合は全て反応することになります。すなわち、複数の指のタッチを別々に感知して動作を決定する場合や、タッチを離したときに別の動作をする（あるいは動作を中止する）場合などは、当然ながらもう少し複雑なコードを記載する必要があります。

タッチしたときのみジャンプし、タッチし続けるとジャンプ力が増す

Scooter Heroというゲームがあります。これはまさにタッチしたときのみジャンプし、タッチし続けるとジャンプ力が増します。あとジャンプ中にタッチすると、ジャンプ中の状態からさらに少しジャンプ（浮かぶ）します。このような場合は、上記のような超簡易的実装では難しくなります。タッチしたらジャンプし、タッチ中の時間に応じてジャンプの時間を調整します。タッチ中に別の指でタッチされてもそれは無視します。ジャンプ中に再度タッチした場合はそれを感知します。しかしジャンプ中ジャンプはタッチ中の時間にジャンプの時間が左右されることはないものとします。こういった実装が必要になります。

AndroidリファレンスのMotionEventを見ると、Eventの種類が載っています。onTouchEventの引数に渡されるMotionEventのインスタンスが保持している定数の種類になります。getActionで引っぱってこれる定数は、下記のようです。しかし、getAction()で引っぱってこれるのは、下記定数の数値(int)バージョンのようです。例えば、ACTION_DOWNは0です。

ACTION_CANCEL
ACTION_DOWN
ACTION_HOVER_MOVE
ACTION_MOVE
ACTION_OUTSIDE
ACTION_SCROLL
ACTION_UP
ACTION_POINTER_DOWN
ACTION_POINTER_UP

よって、最初の指でタッチしたときのみジャンプさせる場合は、下記のようなコードになります。

@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		if(action == 0)	ball.jumpFlag = true;

		return true;

	}

さらに、ジャンプ中に再度タッチした場合のジャンプ中ジャンプを実装すると下記になります。

	@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		if(action == 0){

			if(ball.jumpFlag == true) ball.jumpFlag2 = true;

			else ball.jumpFlag = true;

		}

		return true;

	}

	

	class Ball{

		int r = 20;

		int x = r*2;

		float y = wh-r;

		float vy = -8;

		float g = 0.2F;

		boolean jumpFlag = false;

		boolean jumpFlag2 = false;

		boolean jump2finFlag = false;

		

		public void view(Canvas canvas){

			canvas.drawCircle(x, y, r, paint);

			if(jumpFlag){

				if(jumpFlag2){

					if(!jump2finFlag){

						vy = -6;

						jump2finFlag = true;

					}

				}

				y += vy;

				vy += g;

				if(y>=wh-r){

					y = wh-r;

					vy = -8;

					jumpFlag = false;

					jumpFlag2 = false;

					jump2finFlag = false;

				}

			}

		}

	}

onTouchEventを修正して、jumpFlagがtrueの場合は、jumpFlag2をtrueにするようにしています。そして、Ballクラスを修正して、jumpFlag2とjump2finFlagを追加し、jumpFlag2がtrueの場合に一度だけ再度ジャンプするように設定しています。

さて、次はタッチし続けることでジャンプ力を増すようにします。最初の指がタッチし続ける場合に、そのタッチし続ける時間に応じてジャンプ力が増すようにします。最初の指は、primary pointerということで明確にAndroid SDKが把握してくれるので、結構簡単に実装ができます。考え方としては、ACTION_DOWNが発生してから、ACTION_UPが発生するまでの時間を計測するというものです。ACTION_DOWNもACTION_UPもprimary pointerのdown,upのみで発生するActionになるので、最初の指がタッチしたら必ずACTION_DOWNが発生し、最初の指がタッチをやめたら必ずACTION_UPが発生するはずです。但し、懸念としては、ACTION_CANCELとACTION_OUTSIDEというのが気になります。これらは後で確認するとして、とりあえず、上記考え方でサンプルコードを修正してみます。

	@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		if(action == 0){

			if(ball.jumpFlag == true){

				ball.jumpFlag2 = true;

			}else{

				ball.jumpFlag = true;

				ball.touchTime = 1;

			}

		}else if(action == 1){

			ball.touchTime = 0;

		}

		return true;

	}

	

	class Ball{

		int r = 20;

		int x = r*2;

		float y = wh-r;

		float vy = -8;

		float g = 0.2F;

		boolean jumpFlag = false;

		boolean jumpFlag2 = false;

		boolean jump2finFlag = false;

		int touchTime = 0;

		

		public void view(Canvas canvas){

			canvas.drawCircle(x, y, r, paint);

			if(jumpFlag){

				paint.setColor(Color.argb(255,0,255,255));

				if(jumpFlag2){

					paint.setColor(Color.argb(255,255,255,0));

					if(!jump2finFlag){

						vy = -6;

						jump2finFlag = true;

					}

				}else if(touchTime > 0){

					paint.setColor(Color.argb(255,0,255,0));

					vy = -8;

					touchTime ++;

					if(touchTime >30){

						touchTime = 0;

					}

				}

				y += vy;

				vy += g;

				if(y>=wh-r){

					y = wh-r;

					vy = -8;

					jumpFlag = false;

					jumpFlag2 = false;

					jump2finFlag = false;

					paint.setColor(Color.argb(255,255,255,255));

				}

			}

		}

	}

これで操作を試した限りではうまくいっています。タッチをやめた（指を離した）ときに、なぜかACTION_UPが発生しなかった場合などは、永遠とタッチしている認識になってしまいますが、今回のサンプルコードでは、30フレーム以上タッチし続けた場合は、それ以降は意味をなさないので、特段の問題はありません。このサンプルコードの修正箇所のポイントとしては、タッチし続けている間は、タッチタイムが加算されていき、タッチタイムが1以上30未満の場合は、ずっと加速度-8をキープし続けるようにしています。よってタッチし続けるほど、一定期間はジャンプ力が増すことになります。ボールの色は、ジャンプ中が水色、加速度-8をキープ中が緑、二段ジャンプ中が黄色になるようにしています。

複数の指を使う場合

例えば、２本の指でWEBと同じように拡大縮小をしたりとか、あるいは画面にファミコンのコントローラーのボタンを表示して、タッチしたボタンに応じて上下左右に移動したり、ピストルを撃ったりする場合は、複数の指を使うことになります。これら機能を実装する場合は、各指のタッチしている座標などの取得も必要になります。

タッチ座標の取得

まずはタッチした座標の取得方法を研究します。
getX(),getY()でタッチイベントが発生した座標を取得できるということなので、下記コードを試します。

@Override

	public boolean onTouchEvent(MotionEvent event){

		int action = event.getAction();

		touchX = event.getX();

		touchY = event.getY();

		return true;

	}

これで座標を取得できますが、あくまでプライマリポインターの座標になるようです。２本目の指をタッチしても２本目の指がタッチした座標は取得できません。１本目の指を離したときも１本目の指が離された座標が取得されるだけであり、１本目を離して２本目を動かして初めて２本目の指の座標が取得されます。

getX(int pointerIndex)というのがあります。各指の座標はポインターインデックスを引数にとることでゲットできます。では、ポインターインデックスはどうやってゲットするかというと、下記のようになるようです。

//アクションインデックスの取得

int index = (action&MotionEvent.ACTION_POINTER_ID_MASK)>>

	MotionEvent.ACTION_POINTER_ID_SHIFT;

//int index=event.getActionIndex();//API Level 8以降

上記コードは、『Android プログラミングバイブル』に載っていました。

とはいえ、例えばタッチしている各座標を全て取得するだけでよければ、アクションインデックス（ポインターインデックス）を上記のように取得する必要はありません。ポインターインデックスは下記のようになりますので、ポインターの数を把握してforで全部取得すればいいのであります。

pointerIndex => Raw index of pointer to retrieve. Value may be from 0 (the first pointer that is down) to getPointerCount()-1.

@Override

public boolean onTouchEvent(MotionEvent event){

	int cnt = event.getPointerCount();

	point = new PointF[cnt];

	for(int i=0;i<cnt;i++){

		point[i] = new PointF(event.getX(i),event.getY(i));

	}

	return true;

}

上記は、getPointerCountでポインターの数を把握し、PointFの配列であるpointをポインターの数で初期化し、ポインターの数だけ、各ポインターインデックスの座標をpointに格納している様です。これで、各ポインターの座標を取得できました。しかし、問題があります。問題は、タッチイベントが発生したポインターの座標を全て取得することです。これはすなわち、ACTION_UPやACTION_POINTER_UPが発生したポインターの座標も取得します。よって、タッチをやめたポインターの座標まで取得してしまうということです。これはゲームを作る場合において、問題になるケースが多いはずです。よって、上記サンプルコードをタッチをやめた場合は、座標を取得しないように修正します。

ACTION_POINTER_UPの数字は6（間違いでした）です。ACTION_UPの数字は1です。

※よってこのコードも間違いです。

@Override

public boolean onTouchEvent(MotionEvent event){

	int cnt = event.getPointerCount();

	action = event.getAction();

	int idx = 100;

	point = new ArrayList<PointF>();

	if(action == 1 || action == 6){

		idx = (action&MotionEvent.ACTION_POINTER_ID_MASK)>>

		MotionEvent.ACTION_POINTER_ID_SHIFT;	

	}

	for(int i=0;i<cnt;i++){

		if(i != idx) point.add(new PointF(event.getX(i),event.getY(i)));

	}

	return true;

}

これは間違いでした。なぜならgetAction()で取得できる数値は細かいからです。定数のACTION_POINTER_UPというのは、プライマリーではないポインターがアップする様を指すはずですが、actionは何本目のポインターかによって数値が違います。2本目は262、3本目は518といった具合で、全然6ではありませんでした。他の指が残っている状態の中でプライマリーポインターがアップすると、6になりました。よって上記コードですと結局１本目の指のアップしか検知しないことになります。指はせいぜい５本みておけばいいだろうという仮定の基に、検知するaction数を増やすのも手ですが、actionの数値を定数に変換する方法を探した方が良さそうです。

@Override

public boolean onTouchEvent(MotionEvent event){

	int action = event.getAction();

	int cnt = event.getPointerCount();

	int idx = 100;

	point = new ArrayList<PointF>();

	switch(action&MotionEvent.ACTION_MASK){

	case MotionEvent.ACTION_UP:

	case MotionEvent.ACTION_POINTER_UP:

		idx = (action&MotionEvent.ACTION_POINTER_ID_MASK)>>

		MotionEvent.ACTION_POINTER_ID_SHIFT;

	}

	for(int i=0;i<cnt;i++){

		if(i != idx) point.add(new PointF(event.getX(i),event.getY(i)));

	}

	return true;

}

これで、どの指でもアップの場合は座標取得をしなくなりました。しかし、何故かよく強制終了されます。なんでだろう？？angry birdでタッチ操作は激しくやっても全然強制終了にならないのに。。ちょっと激しくタッチ操作をやると割とすぐに強制終了されてしまう。。。なんででしょうか？

一旦今作成しているコードを掲載ておこう。

package net.npaka.touchtest;

import java.util.ArrayList;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PointF;

import android.view.SurfaceHolder;

import android.view.SurfaceView;

import android.view.MotionEvent;



public class TouchTestView extends SurfaceView implements

		SurfaceHolder.Callback,Runnable{

		

		private int ww = 480;

		private int wh = 762;

		private Thread thread;

		private SurfaceHolder holder;

		private Paint paint = new Paint();

		private ArrayList<PointF> point = new ArrayList<PointF>();

		

		public TouchTestView(Context context){

			super(context);

			

			holder = getHolder();

			holder.addCallback(this);

			holder.setFixedSize(ww,wh);

			

			paint.setAntiAlias(true);

			paint.setStyle(Paint.Style.FILL);

			paint.setColor(Color.argb(255,0,255,255));

			paint.setTextSize(32);

		}

		

		public void surfaceCreated(SurfaceHolder holder){

			thread = new Thread(this);

			thread.start();

		}

		

		public void surfaceChanged(SurfaceHolder holder,

				int format,int w,int h){

		}

		

		public void surfaceDestroyed(SurfaceHolder holder){

			thread = null;

		}

		

		public void run(){

			Canvas canvas;

			while(thread!=null){

				canvas = holder.lockCanvas();

				canvas.drawColor(Color.BLACK);

				if(point.size()>0){

					for(int i=0;i<point.size();i++){

						canvas.drawText("x:"+point.get(i).x+"y:"+point.get(i).y, 0, 50+30*(i+2), paint);

						canvas.drawText(""+point.size(), 0, 80, paint);

					}

				}

				canvas.drawText("test", 0, 50, paint);

				holder.unlockCanvasAndPost(canvas);

				

				try{

					Thread.sleep(10);

				}catch(Exception e){

				}

			}

		}



		@Override

		public boolean onTouchEvent(MotionEvent event){

			int action = event.getAction();

			int cnt = event.getPointerCount();

			int idx = 100;

			point = new ArrayList<PointF>();

			switch(action&MotionEvent.ACTION_MASK){

			case MotionEvent.ACTION_UP:

			case MotionEvent.ACTION_POINTER_UP:

				idx = (action&MotionEvent.ACTION_POINTER_ID_MASK)>>

				MotionEvent.ACTION_POINTER_ID_SHIFT;

			}

			for(int i=0;i<cnt;i++){

				if(i != idx) point.add(new PointF(event.getX(i),event.getY(i)));

			}

			return true;

		}

}

HTML5 - Canvas アニメーション　Walk

2011-08-04T00:37:00.000+09:00

<canvas id="game2" width="500" height="270"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("game2");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var img_jero = [];
img_jero[0] = new Image();
img_jero[0].src = '/pic/jeronimo3.png';
img_jero[1] = new Image();
img_jero[1].src = '/pic/jeronimo2.png';
img_jero[2] = new Image();
img_jero[2].src = '/pic/jeronimo1.png';

var tm;
img_jero[2].onload = function() { 
 tm = setInterval(main,200);
}

var size_x = 50;
var size_y = 80;
var x = cw;
var y = 0;
var idx = 2;

function main(){
 ctx.clearRect(0,0,cw,ch);
 ctx.drawImage(img_jero[idx],x+250,y+175,size_x,size_y);
 ctx.drawImage(img_jero[idx],x,y);
 idx--;
 if(idx==-1){idx=2;}
 x=x-30;
 if(x<-300){x=cw;} 
}
</script>

HTML5 - Canvas アニメーション - 陣取りゲーム

2011-07-23T23:04:00.004+09:00

マウスドラッグの向きにプレイヤー（青いボール）が動きます。動いている途中のパスが敵か自分に当たったらプレイヤーが死にます。ボールを動かして陣地を80％以上確保したらステージクリアです。敵を閉じ込めたら敵を倒せてボーナス点数がもらえます。（キーボード入力がきかないです。）

http://endo-yuta.appspot.com/practice7

陣取りゲーム - jsdo.it - share JavaScript, HTML5 and CSS

Code

<canvas id="game2" width="270" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("game2");
var ctx = canvas.getContext("2d");

var w,p,f,pa,tm,e,st,t,l,score,game,area_anime,enemy_del_anime;
var c_w = canvas.width;
var c_h = canvas.height;
var e = [];

//Life用の画像
var img_heart = new Image();
img_heart.src = '/pic/heart_48.png';

//初期化メソッド
function init(){
 enemy_del_anime = [];
 area_anime = [];
 game = new Game();
 w = new Waku();
 t = new Timer();
 st = new Stage();
 l = new Life();
 s = new Status();
 s.init();
 p = new Player();
 pa = new Path();
 f = new Fix_path();
 f.init();
 e = new AllEnemy();
 e.init();
 score = new Score();
}

init();

tm = setInterval(main,10);

function main(){
 ctx.clearRect(0,0,c_w,c_h); //画面のクリア
 w.view_waku(); //外枠の表示
 //start画面
 if(game.game_start){
  game.game_start_animation();
  return;
 }
 w.view_waku_fill();
 f.view_paths(); //枠パスの表示
 s.main();
 //ラウンド（ステージ）開始画面
 if(game.round_start && !game.game_over){
  game.round_start_animation();
  return;
 }
 //プレイヤーがしんだとき
 if(game.player_death){
  //敵は動かずに表示だけされる
  e.all_enemys_view();
  //プレイヤーのですあにめ
  p.death_animation();
  if(p.size == 0){
   game.player_death = false;
   //初期化
   st.dead_init();
  }
 }else if(game.game_over){
  //敵は動かずに表示だけされる
  e.all_enemys_view();
  //GameOverあにめ
  if(game.game_over_anim_sec>0){
   game.game_over_animation();
  }else if(game.game_score_sec>0){
   //スコア・ランキングページ
   game.game_score_animation();
  }else{
   //初期化
   init(); 
  }
 }else if(game.game_clear){
  //Clear!あにめ
  if(game.game_clear_finish_sec>0){
   game.clear_animation();
  }else if(game.game_score_sec>0){
   //スコアページ
   game.game_clear_score_animation();
  }else{
   game.init();
   st.next_stage_init();
  }
  //エリアスコアアニメあれば実施
  for(var i=0;i<area_anime.length;i++){
   area_anime[i].main();
  }
  //敵スコアアニメあれば実施
  for(var i=0;i<enemy_del_anime.length;i++){
   enemy_del_anime[i].main();
  }
 }else{
  p.main();
  e.main_all();
  t.main();
  //エリアスコアアニメあれば実施
  for(var i=0;i<area_anime.length;i++){
   area_anime[i].main();
  }
  //敵スコアアニメあれば実施
  for(var i=0;i<enemy_del_anime.length;i++){
   enemy_del_anime[i].main();
  }
 }
}

//ゲームクラス
function Game(){
 var obj = this;
 obj.font = 'verdana';
 obj.game_start = true;
 obj.round_start =false;
 obj.player_death = false;
 obj.game_over = false;
 obj.game_over_anim_sec = 100;
 obj.game_score_sec = 200;
 obj.game_clear = false;
 obj.game_clear_normal_sec = 100;
 obj.score_stage_bounus = 0;
 obj.game_clear_finish_sec = 150;
 obj.round_sec = 150;
 obj.area_make = false;
 
 //init
 obj.init = function(){
  obj.player_death = false;
  obj.game_over_anim_sec = 150;
  obj.game_score_sec = 200;
  obj.game_clear = false;
  obj.game_clear_normal_sec = 150;
  obj.score_stage_bounus = 0;
  obj.game_clear_finish_sec = 150;
  obj.round_sec = 150;
 }
 
 //ラウンドスタート
 obj.round_start_animation = function(){
  if(obj.round_sec>0){
   //背景表示
   ctx.beginPath();
   ctx.fillStyle = "rgba(0,153,204, 0.3)";
   ctx.moveTo(w.z[0][0],w.z[0][1]); //左上
   ctx.lineTo(w.z[1][0],w.z[1][1]); //右上
   ctx.lineTo(w.z[2][0],w.z[2][1]); //右下
   ctx.lineTo(w.z[3][0],w.z[3][1]); //左下
   ctx.closePath();
   ctx.fill();
   //文字表示
   ctx.beginPath();
   ctx.fillStyle = "#000000";
   ctx.font = "30px "+obj.font;
   ctx.fillText('Round '+st.big_num+'-'+st.small_num,60, 200);
   ctx.font = "16px "+obj.font;
   ctx.fillText('Get 80% Area.',60, 250);
   ctx.fill();
   obj.round_sec--;
  }else{
   obj.round_start =false;
  }
 }
 
 var c_r_a_no = 0;
 var blank_time = 5;
 var vec = 1;
 //スタートあにめ用色あにめ（色返すメソッド）
 obj.color_red_animation = function(){
  var color_arr = ['#ff0000','#ff1111','#ff2222','#ff3333','#ff4444','#ff5555','#ff6666','#ff7777','#ff8888','#ff9999'];
  if(blank_time<0){
   if(vec == 1){
    if(c_r_a_no == color_arr.length-1){
     vec = -1;
     c_r_a_no--;
    }else c_r_a_no++;
   }else{
    if(c_r_a_no == 0){
     vec = 1;
     c_r_a_no++;
    }else c_r_a_no--;
   }
   blank_time=5;
  }
  blank_time--;
  return color_arr[c_r_a_no];
 }
 
 //スタートあにめ
 obj.game_start_animation = function(){
  //クリックされたらアクション（スタート）
  if(m.d_x>=95&&m.d_x<=160&&m.d_y>=230&&m.d_y<=258){
   obj.game_start = false;
   obj.round_start = true;
   obj.init();
  }
  //クリックされたらアクション（ランク）
  
  //クリックされたらアクション（ハウツー）
  
  //マウスがのったら色あにめ
  //$('#hoge').text(m.m[0]+','+m.m[1]);
  if(m.m[0]>=95&&m.m[0]<=160&&m.m[1]>=230&&m.m[1]<=258){
   var color_start = obj.color_red_animation(c_r_a_no);
  }else{
   var color_start = '#ffffff'; 
  }
  if(m.m[0]>=95&&m.m[0]<=160&&m.m[1]>=270&&m.m[1]<=298){
   var color_rank = obj.color_red_animation(c_r_a_no);
  }else{
   var color_rank = '#ffffff'; 
  }
  if(m.m[0]>=73&&m.m[0]<=185&&m.m[1]>=310&&m.m[1]<=338){
   var color_how = obj.color_red_animation(c_r_a_no);
  }else{
   var color_how = '#ffffff'; 
  }
  //背景表示
  ctx.beginPath();
  ctx.fillStyle = "#0099cc";
  ctx.moveTo(w.z[0][0],w.z[0][1]); //左上
  ctx.lineTo(w.z[1][0],w.z[1][1]); //右上
  ctx.lineTo(w.z[2][0],w.z[2][1]); //右下
  ctx.lineTo(w.z[3][0],w.z[3][1]); //左下
  ctx.closePath();
  ctx.fill();
  //文字表示
  ctx.beginPath();
  ctx.fillStyle = "#ffffff";
  ctx.font = "40px "+obj.font;
  ctx.fillText('GinTori',60, 200);
  ctx.font = "20px "+obj.font;
  ctx.fillStyle = color_start;
  ctx.fillText('Start',100, 250);
  ctx.fillStyle = color_rank;
  ctx.fillText('Rank',100, 290);
  ctx.font = "16px "+obj.font;
  ctx.fillStyle = color_how;
  ctx.fillText('How to Play?',75, 330);
  ctx.fill();
 }
 
 //Game Overあにめ
 obj.game_over_animation = function(){
  ctx.beginPath();
  ctx.fillStyle = "#000000";
  ctx.font = "16px "+obj.font;
  ctx.fillText('Game Over...', 90, 240);
  ctx.fill();
  obj.game_over_anim_sec--;
 }
 
 //スコアランキングページ（GameOver時用）
 obj.game_score_animation = function(){
  //黒いページ
  obj.black_page_view();
  //スコア表示
  ctx.beginPath();
  ctx.fillStyle = "#ffffff";
  ctx.font = "16px "+obj.font;
  ctx.fillText('Score: '+s.score, 90, 240);
  ctx.fill();
  obj.game_score_sec--; 
 }
 
 //クリア時のアニメーション
 obj.clear_animation = function(){
  ctx.beginPath();
  ctx.fillStyle = "#000000";
  ctx.font = "16px "+obj.font;
  ctx.fillText('Clear!!!', 90, 240);
  ctx.fill();
  obj.game_clear_finish_sec --;
 }
 
 //スコアページ（クリア時用）
 obj.game_clear_score_animation  =function(){
  //黒いページ表示
  obj.black_page_view();
  if(obj.game_clear_normal_sec>0){
   //ステージボーナス（難しい程稼いだ点に応じてボーナスがもらえる）
   var stage_sc = score.stage_score_bounus();
   obj.clear_base_method(stage_sc);
   obj.game_clear_normal_sec--;
  //タイムボーナスあにめ
  }else if(t.min>0||t.sec>0){
   if(t.sec == 0){
    t.min--;
    t.sec = 59;
   }else{
    t.sec--;
   }
   s.score += 100;
   score.this_stage_score += 100;
   //ステージボーナス（難しい程稼いだ点に応じてボーナスがもらえる）
   var stage_sc = score.stage_score_bounus();
   obj.score_stage_bounus = stage_sc;
   obj.clear_base_method(stage_sc);
  //ステージボーナスあにめ
  }else{
   if(obj.score_stage_bounus>0){
    s.score += 100;
    obj.score_stage_bounus -=100;
   }else{
    obj.game_score_sec --;
   }
   obj.clear_base_method(obj.score_stage_bounus);
  }
 }
  
 //クリア時スコアページ用の標準動作
 obj.clear_base_method = function(stage_sc){
  //secの表示調整
  var sec_t = s.sec_text();
  //現在のスコア表示
  ctx.beginPath();
  ctx.fillStyle = "#ffffff";
  ctx.font = "16px "+obj.font;
  ctx.fillText('Score: '+s.score, 50, 240);
  ctx.fillText('Time Bounus: '+t.min+':'+sec_t, 50, 270);
  ctx.fillText('Stage Bounus: '+stage_sc, 50, 300);
  ctx.fill();
 }
 
 //黒いページ表示するメソッド
 obj.black_page_view = function(){
  ctx.beginPath();
  ctx.fillStyle = "black";
  ctx.moveTo(w.z[0][0],w.z[0][1]); //左上
  ctx.lineTo(w.z[1][0],w.z[1][1]); //右上
  ctx.lineTo(w.z[2][0],w.z[2][1]); //右下
  ctx.lineTo(w.z[3][0],w.z[3][1]); //左下
  ctx.closePath();
  ctx.fill();
 }
}


//ステータスクラス
function Status(){
 var obj = this;
 var x = 0;
 var y = 0;
 var h = 40;
 var w = c_w;
 obj.score = 0;
 obj.sum = 0;
 
 obj.init = function(){
  
 }
 
 obj.main = function(){
  obj.waku_view();
  obj.status_view();
  //面積クリアした場合
  if(obj.check_area()){
   st.clear();
  }
  
 }
 
 //ステータスバーを表示
 obj.waku_view = function(){
  ctx.beginPath();
  ctx.fillStyle = "#ffffff";
  ctx.moveTo(x,y); //左上
  ctx.lineTo(c_w,y); //右上
  ctx.lineTo(c_w,h); //右下
  ctx.lineTo(x,h); //左下
  ctx.closePath();
  ctx.fill();
 }
 
 //scoreを10桁のテキストにするメソッド
 obj.score_text = function(){
  var st = '' + obj.score;
  var zero_count = 10-st.length;
  var zero = '';
  for(var i=0;i<zero_count;i++){zero += '0';}
  return zero + st;
 }
 
 //secを2桁のテキストにするメソッド
 obj.sec_text = function(){
  var sec = ''+t.sec;
  var zero_count = 2 - sec.length;
  var zero = '';
  for(var i=0; i<zero_count;i++){zero += 0;}
  return zero + sec;
 }
 
 //ステータスの中身表示
 obj.status_view = function(){
  var s = obj.score_text();
  var sec = obj.sec_text();
  ctx.beginPath();
  ctx.fillStyle = "#000000";
  ctx.font = "12px "+game.font;
  ctx.fillText('Score: '+s, 140, 10);
  ctx.fillText('Area: '+obj.sum+'%', 140, 30);
  ctx.fillText(st.big_num+'-'+st.small_num, 10, 10);
  ctx.fillText('Time: '+t.min+':'+sec, 10, 30);
  ctx.drawImage(img_heart,50,-3,16,16);
  ctx.fillText('x '+l.count, 68, 10);
  ctx.fill();
 }
 
 //取得した面積の割合を出すメソッド
 obj.get_sum = function(){
  obj.sum = Math.floor((f.start_sum-f.now_sum)/f.start_sum*100);
 }
 
 //Areaチェク
 obj.check_area = function(){
  if(obj.sum >= st.area) return true;
 }
}

//Stageクラス
function Stage(){
 var obj = this;
 obj.big_num =1;
 obj.small_num = 1;
 obj.enemy_cnt = 1;
 obj.enemy_v = 0.5;
 obj.area = 80; //何％でクリアか？
 
 //clear時に実施するメソッド
 obj.clear = function(){
  game.game_clear = true;
 }
 
 //next stage用初期化
 obj.next_stage_init = function(){
  obj.small_num ++;
  if(obj.small_num == 6){
   obj.small_num = 1;
   obj.big_num ++;
   obj.enemy_v += 0.1;
  }
  obj.enemy_cnt = obj.small_num;
  e.init(); //敵の初期化
  t.init(); //timerの初期化
  f.init(); //pathの初期化
  s.sum = 0; //エリアの初期化
  p = new Player(); //プレイヤーの初期化
  pa = new Path(); //パスの初期化
  score.this_stage_score = 0; //ステージスコアの初期化
  game.round_start = true;
  game.init();
  area_anime = [];
  enemy_del_anime = [];
 }
 
 //dead時の実施メソッド
 obj.dead = function(){
  game.player_death = true;
 }
 
 //dead時の初期化メソッド
 obj.dead_init = function(){
  l.count --;
  if(l.count == -1){
   //Game Over
   game.game_over = true;
   l.count = 0;
  }
  e.init(); //敵の初期化
  t.init(); //timerの初期化
  f.init(); //pathの初期化
  s.sum = 0; //エリアの初期化
  p = new Player(); //プレイヤーの初期化
  pa = new Path(); //パスの初期化
  game.round_start = true;
  game.init();
  area_anime = [];
  enemy_del_anime = [];
 }
}

//Scoreクラス
function Score(){
 var obj = this;
 obj.this_stage_score = 0;
 
 //path（エリア）作ったときのスコア算出(sumは割合%)
 obj.area_score = function(sum){
   return sum*100*1.2^(sum/10);
 }
 
 //timer残数に応じたスコア算出
 obj.timer_score = function(sec){
  return 100*sec;
 }
 
 //敵をたおしたときのスコア算出
 obj.enemy_score = function(death_enemy_cnt,alive_enemy_cnt){
  var score = 0;
  score += 4000*Math.pow(death_enemy_cnt,2);
  if(alive_enemy_cnt == 0&&death_enemy_cnt>0) score += 20000;
  return score;
 }
 
 //ステージボーナスの算出
 obj.stage_score_bounus = function(){
  //ステージの算出
  var k = st.big_num + 0.1*st.small_num;
  return 10000*k;
 }
 
}

//Lifeクラス
function Life(){
 var obj = this;
 obj.count = 3;
}

//Timerクラス
function Timer(){
 var obj = this;
 obj.min = 2;
 obj.sec = 0;
 obj.msec = 0;
 
 obj.init = function(){
  obj.min = 2;
  obj.sec = 0;
  obj.msec = 0;
 }
 
 //タイマーのメインメソッド
 obj.main = function(){
  //時間切れの場合
  if(obj.min==0 && obj.sec==0){
   st.dead();
   return;
  }
  obj.msec += 10;
  if(obj.msec==1000){
   obj.msec = 0;
   obj.sec--;
   if(obj.sec==-1){
    obj.min--;
    obj.sec = 59;
   }
  }
 }
}

//外枠クラス
function Waku(){
 var obj = this;
 obj.w = c_w-10; //プレイヤーの大きさにあわせましょう
 obj.h = c_h-50; //-50はステータスの高さ+プレイヤの大きさにあわせましょう
 obj.x = (c_w-obj.w)/2;
 obj.y = (c_h-obj.h)-5; //-5はプレイヤーの大きさ÷２にあわせましょう
 obj.z = [[obj.x,obj.y],[obj.x+obj.w,obj.y],[obj.x+obj.w,obj.y+obj.h],[obj.x,obj.y+obj.h]]; //枠の座標４点の配列
  
 //Waku表示メソッド(fill)
 obj.view_waku_fill = function(){
  ctx.beginPath();
  ctx.fillStyle = "white";
  ctx.moveTo(obj.z[0][0],obj.z[0][1]); //左上
  ctx.lineTo(obj.z[1][0],obj.z[1][1]); //右上
  ctx.lineTo(obj.z[2][0],obj.z[2][1]); //右下
  ctx.lineTo(obj.z[3][0],obj.z[3][1]); //左下
  ctx.closePath();
  ctx.fill();
 }
 //Waku表示メソッド(storke)
 obj.view_waku = function(){
  ctx.beginPath();
  ctx.strokeStyle = "white";
  ctx.moveTo(obj.z[0][0],obj.z[0][1]); //左上
  ctx.lineTo(obj.z[1][0],obj.z[1][1]); //右上
  ctx.lineTo(obj.z[2][0],obj.z[2][1]); //右下
  ctx.lineTo(obj.z[3][0],obj.z[3][1]); //左下
  ctx.closePath();
  ctx.stroke();
 }
}

//確定パス保存クラス
function Fix_path(){
 var obj = this;
 obj.path_count = 0;
 obj.before_sum = 0;
 obj.now_sum = 0;
 obj.start_sum = 0;
 obj.paths =[];
 
 //pathsを表示するメソッド
 obj.view_paths = function(){
  ctx.strokeStyle = '#4682B4';
  ctx.beginPath();
  ctx.moveTo(obj.paths[0][0],obj.paths[0][1]);
  for(var i=1; i<obj.paths.length; i++){
   ctx.lineTo(obj.paths[i][0],obj.paths[i][1]);
  }
  ctx.closePath();
  //ctx.fill();
  ctx.stroke();
 }
 
 //pathを登録するメソッド
 obj.put_path = function(path,sum){
  obj.paths = path;
  obj.path_count ++;
  obj.before_sum = obj.now_sum;
  obj.now_sum = sum;
  s.get_sum();
  //スコア加算（エリア）
  obj.add_score_area();
  //エリア消したときのアニメーション
  area_anime.push(new Area_animation(score.area_score((obj.before_sum -obj.now_sum)/obj.start_sum*100),[p.x,p.y]));
  //敵を倒しているかチェック
  e.check_hit_path_all_enemys();
 }
 
 /*
  * 初期化メソッド
  * 枠をpathsに登録する
  * 枠の面積をstart_sumに登録する
  */
 obj.init = function(){
  obj.paths = [w.z[0],w.z[1],w.z[2],w.z[3]];
  obj.start_sum = pa.area(obj.paths);
  obj.now_sum = obj.start_sum;
  obj.before_sum = 0;
  obj.path_count = 0;
 }
 
 //点と点が作る辺にボールが存在するか否かを返すメソッド（汎用）
 //存在したらtrueを返す
 obj.is_ball_line =function(a,b,ball){
  x1 = a[0];
  y1 = a[1];
  x2 = b[0];
  y2 = b[1];
  if(x1 == x2){
   if(y1<y2){
    if(y1<=ball[1] && y2>=ball[1] && x1 == ball[0]) return true;
   }else{
    if(y1>=ball[1] && y2<=ball[1] && x1 == ball[0]) return true;
   }
  }else if(y1 == y2){
   if(x1<x2){
    if(x1<=ball[0] && x2>=ball[0] && y1 == ball[1]) return true;
   }else{
    if(x1>=ball[0] && x2<=ball[0] && y1 == ball[1]) return true;
   }
  }else{
   alert('ずれてます');
  }
  return false;
 }
 
 //点が多角形の中に存在するかをチェックするメソッド
 obj.check_in_path = function(dot){
  var k,counter = 0;
  //敵用dotの小数点を切り上げる
  dot[0] = Math.ceil(dot[0]);
  dot[1] = Math.ceil(dot[1]);
  while(dot[1] < w.z[2][1]+1){
   for(var i=0; i<obj.paths.length; i++){
    k = i+1;
    if(i == obj.paths.length-1) k = 0;
    if(obj.is_ball_line(obj.paths[i],obj.paths[k],dot)) counter++;
   }
   dot[1]++;
  }
  //counterが奇数であれば中、counterが偶数あるいは0であれば外
  if(counter % 2 != 0) return true;
  else return false;
 }
 
 //エリア分のスコア追加
 obj.add_score_area = function(){
  var sc = score.area_score((obj.before_sum -obj.now_sum)/obj.start_sum*100);
  s.score += sc;
  score.this_stage_score += sc;
 }
}

//エリア消したときのアニメーションクラス
function Area_animation(num,xy){
 var obj = this;
 obj.x = xy[0];
 obj.y = xy[1];
 obj.num = num;
 obj.view_sec = 100;
 
 //場所によって位置調整
 if(obj.x<w.w/2) obj.x += 25;
 if(obj.x>w.w/2) obj.x -= 40;
 if(obj.y<w.h/2) obj.y += 30;
 if(obj.y>w.h/2) obj.y -= 30;
 
 obj.main = function(){
  if(obj.view_sec>0){  
   //文字表示
   ctx.beginPath();
   ctx.fillStyle = "rgba(0,102,190,"+obj.view_sec/100+")";
   ctx.font = "14px "+game.font;
   ctx.fillText(obj.num,obj.x, obj.y);
   ctx.fill();
   obj.view_sec--;
  }
 }
 
}

//敵を消したときのアニメーションクラス
function Enemy_animation(score,hit_count,xy){
 var obj = this;
 obj.x = xy[0];
 obj.y = xy[1];
 obj.num = score;
 obj.hc = hit_count;
 obj.view_sec = 100;
 
 //場所によって位置調整
 if(obj.x<w.w/2){obj.x += 10; obj.x2 = obj.x+10;}
 if(obj.x>w.w/2){obj.x -= 10; obj.x2 = obj.x-10;}
 if(obj.y<w.h/2){obj.y += 10; obj.y2 = obj.y+10;}
 if(obj.y>w.h/2){obj.y -= 10; obj.y2 = obj.y-10;}
 
 obj.main = function(){
  if(obj.view_sec>0){  
   //文字表示
   ctx.beginPath();
   ctx.fillStyle = "rgba(255,0,0,"+obj.view_sec/100+")";
   ctx.font = "14px "+game.font;
   ctx.fillText(obj.num,obj.x, obj.y);
   ctx.fillText('x'+obj.hc,obj.x2, obj.y2);
   ctx.fill();
   obj.view_sec--;
  }
 }
 
}

//敵グループクラス
function AllEnemy(){
 var obj = this;
 obj.v = 0; //enemyの速度
 obj.cnt = 0; // enemyの数
 obj.enemy = [];
 obj.enemy_cnt = 0;
 obj.dead_enemys = [];
 
 //初期化メソッド
 obj.init = function(){
  obj.v = st.enemy_v;
  obj.cnt = st.enemy_cnt;
  obj.enemy = [];
  obj.make_enemys();
  obj.enemy_cnt = obj.enemy.length;
  obj.dead_enemys = [];
 } 
 
 //敵の配列作成メソッド
 obj.make_enemys = function(){
  for(var i=0;i<obj.cnt;i++){
   obj.enemy[i] = new Enemy();
   obj.enemy[i].init(obj.v);
  }
 }
 
 //全ての敵のメインメソッド実施
 obj.main_all = function(){
  for(var i=0;i<obj.enemy.length;i++){
   obj.enemy[i].main();
  }
 }
 
 //全ての敵のcheck_hit_action_pathメソッド実施
 obj.check_hit_action_path = function(){
  for(var i=0;i<obj.enemy.length;i++){
   if(obj.enemy[i].check_hit_action_path()) return true;
  }
 }
 
 //全ての敵がパス内にいるか調べる。いない場合はですあにめ
 obj.check_hit_path_all_enemys = function(){
  var hit_enemys = [];
  for(i=0;i<obj.enemy.length;i++){
   if(!f.check_in_path([obj.enemy[i].x,obj.enemy[i].y])){
    var flag = false;
    for(var j=0;j<obj.dead_enemys.length;j++){
     if(i==obj.dead_enemys[j]){flag = true;} 
    }
    if(!flag){
     hit_enemys.push([i]);
     //ですあにめ
     obj.enemy[i].death_animation();
    }
   }
  }
  obj.enemy_cnt -= hit_enemys.length;
  //スコア加算（敵倒し用）
  var sc = score.enemy_score(hit_enemys.length,obj.enemy_cnt);
  s.score += sc;
  score.this_stage_score += sc; //ステージスコアも加算
  
  //敵スコアアニメ
  if(hit_enemys.length>0){
   var idx = hit_enemys[0];
   enemy_del_anime.push(new Enemy_animation(sc,hit_enemys.length,[obj.enemy[idx].x,obj.enemy[idx].y]));   
  }
  [].push.apply(obj.dead_enemys, hit_enemys);
 }
 
 //全ての敵を表示するだけのメソッド
 obj.all_enemys_view = function(){
  for(var i=0;i<obj.enemy.length;i++){
   obj.enemy[i].view();
  }
 }
}

//敵単体クラス
function Enemy(){
 var obj = this;
 obj.size = 7;
 obj.x = 0;
 obj.y = 0;
 obj.vec = [];
 obj.death_flag = false;
 
 //初期化メソッド
 obj.init = function(total_v){
  obj.x = Math.floor(Math.random()*(w.w-obj.size))+w.x;
  obj.y = Math.floor(Math.random()*(w.h-obj.size))+w.y; 
  obj.vec = obj.make_vec(total_v);
 }
 
 //mainメソッド
 obj.main = function(){
  if(obj.death_flag){
   obj.death_animation();
   return;
  }
  obj.view();
  //1進む
  obj.x += obj.vec[0];
  obj.y += obj.vec[1];
  //衝突チェック
  obj.check_hit_path();
 }
 
 //enemyを表示するメソッド
 obj.view = function(){
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.moveTo(obj.x,obj.y); //左上
  ctx.lineTo(obj.x+obj.size,obj.y); //右上
  ctx.lineTo(obj.x+obj.size,obj.y+obj.size); //右下
  ctx.lineTo(obj.x,obj.y+obj.size); //左下
  ctx.closePath();
  ctx.fill();
 }
 
 //パスとの衝突判定メソッド
 obj.check_hit_path = function(){
  var a1x,a1y,a2x,a2y,j,tmp=0;
  var x = obj.x;
  var y = obj.y;
  var s = obj.size;
  for(var i=0; i<f.paths.length; i++){
   a1x = f.paths[i][0];
   a1y = f.paths[i][1];
   if(i==f.paths.length-1) j=0;
   else j= i+1;
   a2x = f.paths[j][0];
   a2y = f.paths[j][1];
   if(a1x==a2x&&a2y<a1y){tmp=a1y; a1y=a2y; a2y=tmp;}
   if(a1y==a2y&&a2x<a1x){tmp=a1x; a1x=a2x; a2x=tmp;}
   if(x<=a2x && a1x<=x+s && y<=a2y && a1y<=y+s){
    //衝突したのがxに垂直なのか、yに垂直なのか?
    if(a1y==a2y){
     //上からなのか、下からなのか？
     if(obj.vec[1]<0) obj.y = a1y; //位置の調整
     else obj.y = a1y-s; //位置の調整
     obj.vec[1] = -obj.vec[1]; //向きを変える
    }else if(a1x==a2x){
     //右からか、左からか？
     if(obj.vec[0]<0) obj.x = a1x;
     else obj.x = a1x-s;
     obj.vec[0] = -obj.vec[0];
    }
   } 
  }
 }
 
 //向きと速さを決めるメソッド
 obj.make_vec = function(total_v){
  var x = Math.random()*total_v;
  if(Math.random()<0.5) x = -x;
  var y = total_v-x;
  if(Math.random()<0.5) y = -y;
  return [x,y];
 }
 
 //アクション中のパスとの衝突判定メソッド
 obj.check_hit_action_path = function(){
  var a1x,a1y,a2x,a2y,tmp=0;
  var x = obj.x;
  var y = obj.y;
  var s = obj.size;
  for(var i=0; i<pa.path.length; i++){   
   a1x = pa.path[i][0];
   a1y = pa.path[i][1];
   if(i==pa.path.length-1){
    a2x = p.x;
    a2y = p.y;
   }else{
    a2x = pa.path[i+1][0];
    a2y = pa.path[i+1][1];
   }
   if(a1x==a2x&&a2y<a1y){tmp=a1y; a1y=a2y; a2y=tmp;}
   if(a1y==a2y&&a2x<a1x){tmp=a1x; a1x=a2x; a2x=tmp;}
   if(x<=a2x && a1x<=x+s && y<=a2y && a1y<=y+s){
    return true;
   }
  }  
  return false;
 }
 
 //ですあにめ　メソッド
 obj.death_animation =function(){
  var color = 'gray'; 
  if(!obj.death_flag) obj.death_flag = 1;
  if(obj.death_flag < 25)obj.size = obj.size *1.1;
  if(obj.death_flag == 25){
   obj.size = 3;
  }
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.moveTo(obj.x,obj.y); //左上
  ctx.lineTo(obj.x+obj.size,obj.y); //右上
  ctx.lineTo(obj.x+obj.size,obj.y+obj.size); //右下
  ctx.lineTo(obj.x,obj.y+obj.size); //左下
  ctx.closePath();
  ctx.fill();
  if(obj.death_flag == 25){
   obj.size = 0; 
  }
  obj.death_flag ++;
 }
}

function Player(){
 var obj = this;
 obj.size = 10;
 obj.x = w.z[3][0]; //円中心のx座標
 obj.y = w.z[3][1]; //円中心のy座標
 obj.mouseX = false;
 obj.mouseY = false;
 obj.action_mode = false; //action中（クリック座標に向かっている状態）（フラグ）
 var becs = [[0,-1],[1,0],[0,1],[-1,0]] //上右下左
 obj.bec = becs[0];
 obj.key_down = false;
 
 //main(最初に起動するメソッド)
 obj.main = function(){
  obj.view_ball();
  
  //actionモード時
  if(obj.action_mode){
   obj.action();
   return;
  }
  
  //mouseイベント発生時
  if((obj.mouseX && obj.mouseY)|| obj.key_down) {
   if(obj.mouse_bec()){
    pa.path.push([obj.x,obj.y]); //パスの追加
    obj.action_mode = true;
   }
   obj.key_down = false;
   obj.go();
   return;
  }
  
  //ノーマルアクションを実行
  obj.normal_action();
 }
 
 //actionモード
 obj.action = function(){
  //パスの軌跡を表示
  obj.view_path_stroke();
  //アクションパスに衝突している場合
  if(obj.check_hit_pass()){
   st.dead();
   return;
  }
  
  //アクションパスに敵が衝突している場合
  if(e.check_hit_action_path()){
   st.dead();
   return;
  }
  
  //枠パスに到着した場合
  if(obj.check_on_paths()){
   obj.action_mode = false;
   obj.go();
   pa.path.push([obj.x,obj.y]); //パスの追加
   obj.fix_path();
   pa.path = []; //パスのクリア
   return;
  }
  //マウスイベント時
  if((obj.mouseX && obj.mouseY) || obj.key_down){
   if(obj.mouse_bec()) pa.path.push([obj.x,obj.y]); //パスの追加
   obj.key_down = false;
  }
  obj.go();
 }
 
 /*
  * パスのFIX
  * 登録されたパスから枠パスの頂点を追加することでエリアが完成されるが、
  * 作成しうるエリアは２通りある。どちらが大きいかを確認し、大きい方の
  * エリアを作成するパスをFIXとし、枠パスを更新する
  */
 obj.fix_path = function(){
  var temp_path = [];
  var x = obj.x;
  var y = obj.y;
  var v = obj.bec;
  var counter_temp = 0;
  temp_path = make_area(x,y,v,'r'); //右に進んでエリアをつくる
  pa.sum = pa.area(pa.path.concat(temp_path)); //右に行った場合の面積を求める
  //面積が大きいか確認
  if(pa.sum > f.now_sum/2){
   f.put_path(pa.path.concat(temp_path),pa.sum); //パスをFIX
  }else{
   temp_path = make_area(x,y,v,'l'); //小さい場合は、左に進んでエリアをつくる
   pa.sum = pa.area(pa.path.concat(temp_path)); //左に行った場合の面積を求める
   f.put_path(pa.path.concat(temp_path),pa.sum); //パスをFIX
  }
 }
 
 //エリアを作成するメソッド(x,y,向き,右か左か)
 //追加パスを返す
 var make_area = function(x,y,v,rl){
  var temp_path = [];
  if(rl == 'r') obj.bec_next_r();
  else obj.bec_next_l();
  while(!array_compare([obj.x,obj.y],pa.path[0])){
   //1進んだ場合枠からはみ出さないか確認
   if(!obj.check_on_paths()){
    temp_path.push([obj.x,obj.y]); //temp_pathに登録
    obj.right_or_left();
   }
   obj.go();
  }
  obj.x = x; obj.y = y; obj.bec = v; //位置・向きを元に戻す
  return temp_path;
 }
 
 //mouseX,mouseYをbecに変換
 //有効なドラッグであれば向きを変更しtrueを返す。無効ならfalseを返す。
 obj.mouse_bec = function(){  
  if(obj.mouseX>0 && obj.bec[0] == 0 && f.check_in_path([obj.x+1,obj.y])){
   obj.bec = [1,0];
  }else if(obj.mouseX<0 && obj.bec[0] == 0 && f.check_in_path([obj.x-1,obj.y])){
   obj.bec = [-1,0];
  }else if(obj.mouseY>0 && obj.bec[1] == 0 && f.check_in_path([obj.x,obj.y+1])){
   obj.bec = [0,1];
  }else if(obj.mouseY<0 && obj.bec[1] == 0 && f.check_in_path([obj.x,obj.y-1])){
   obj.bec = [0,-1];
  }else{
   obj.del_mouse();
   return false;
  }
  obj.del_mouse();
  return true;
 }
 
 //normal action
 obj.normal_action = function(){
  //1進んだときにパスから出ないか調べる
  if(!obj.check_on_paths()) obj.right_or_left();
  obj.go();
 }
 
 //1進んだ場合にパスからはみ出さないか調べるメソッド
 //登録されているすべてのパス(f.paths)を調べる
 obj.check_on_paths = function(){
  var x1 = obj.x + obj.bec[0];
  var y1 = obj.y + obj.bec[1];
  var k;
  for(var i=0;i<f.paths.length;i++){
   if(i==f.paths.length-1) k=0;
   else k = i+1;
   if(f.is_ball_line(f.paths[i],f.paths[k],[x1,y1])) return true;
  }
  return false;
 }
 
 //右に向きを変えてpathがなければ左に向きを変えるメソッド
 obj.right_or_left = function(){
  //右に向きを変える
  obj.bec_next_r();
  //1進んだ場合に衝突中のパスからはみ出すか確認
  if(!obj.check_on_paths()){
   //右ではみ出すなら、左にする
   obj.bec_next_l();
   obj.bec_next_l();
  }
 }
 //mouseX,mouseYの消去メソッド
 obj.del_mouse = function(){
  obj.mouseX = false;
  obj.mouseY = false;
 }
 
 //ボールを表示するメソッド
 obj.view_ball = function(){
  ctx.beginPath()
  ctx.fillStyle = '#191970';
  ctx.arc(obj.x, obj.y, obj.size/2, 0, 360,false);
  ctx.fill();
 }
 
 //obj.becの次を決めるメソッド（右回り）
 obj.bec_next_r = function(){
  for(var i=0; i<becs.length; i++){
   if(array_compare(becs[i],obj.bec)){
    if(i==becs.length-1) obj.bec = becs[0];
    else obj.bec = becs[i+1];
    break;
   }
  }
 }
 
 //obj.becの次を決めるメソッド（左回り）
 obj.bec_next_l = function(){
  for(var i=0; i<becs.length; i++){
   if(array_compare(becs[i],obj.bec)){
    if(i==0) obj.bec = becs[becs.length-1];
    else obj.bec = becs[i-1];
    break;
   }
  }
 }
 
 //ボールを向きに１進めるメソッド
 obj.go = function(){
  obj.x += obj.bec[0];
  obj.y += obj.bec[1];
 } 
  
 //アクション中にボールがパスの軌跡に衝突していないか確認するメソッド
 obj.check_hit_pass = function(){
  for(var i=0; i<pa.path.length-1; i++){
   if(f.is_ball_line(pa.path[i],pa.path[i+1],[obj.x,obj.y])) return true;
  }
  return false;
 }
 
 //パスを軌跡を表示するメソッド
 obj.view_path_stroke = function(){
  ctx.beginPath();
  ctx.moveTo(pa.path[0][0],pa.path[0][1]);
  for(var i=0; i < pa.path.length; i++){
   ctx.lineTo(pa.path[i][0],pa.path[i][1]); 
  }
  ctx.lineTo(obj.x,obj.y);
  ctx.strokeStyle = 'red';
  ctx.stroke();
 }
 
 //プレイヤーのですあにめ
 obj.death_animation = function(){
  var color = 'gray'; 
  if(!obj.death_flag) obj.death_flag = 1;
  if(obj.death_flag < 25)obj.size = obj.size *1.1;
  if(obj.death_flag == 25){
   obj.size = 3;
  }
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.moveTo(obj.x,obj.y); //左上
  ctx.lineTo(obj.x+obj.size,obj.y); //右上
  ctx.lineTo(obj.x+obj.size,obj.y+obj.size); //右下
  ctx.lineTo(obj.x,obj.y+obj.size); //左下
  ctx.closePath();
  ctx.fill();
  if(obj.death_flag == 25){
   obj.size = 0; 
  }
  obj.death_flag ++;
 }
}

/*
アクション中に曲がった点の集まり
１アクションが終了したら完成させる
*/
function Path(){
 var obj = this;
 obj.path = [];
 obj.sum; //パスが作成する図形の面積
 
 //面積を求めるメソッド
 obj.area = function(paths){
  var num = 0;
  //座標法で求める
  for(var i=0; i < paths.length; i++){
   if(i+1 == paths.length){
    num = num + paths[i][0]*paths[0][1]-paths[0][0]*paths[i][1];
   }else{
    num = num + paths[i][0]*paths[i+1][1]-paths[i+1][0]*paths[i][1];
   }
  }
  return 0.5*Math.abs(num);
 }
}

var m = new Mouse();

//マウスイベント感知関連
function Mouse(){
 var obj = this;
 obj.d_x = false;
 obj.d_y = false;
 obj.u_x = false;
 obj.u_y = false;
 obj.m = [];
 obj.vector = function(){
  //d_x,d_yがfalseじゃないか確認
  if(obj.d_x && obj.d_y){
   p.mouseX = obj.u_x - obj.d_x;
   p.mouseY = obj.u_y - obj.d_y; 
  }
 }
 obj.d_init = function(){
  obj.d_x = false;
  obj.d_y = false;
 }
}

//イベントリスナーの登録
canvas.addEventListener("mousedown", mouseDownHandler, false);
canvas.addEventListener("mouseup", mouseUpHandler, false);
canvas.addEventListener("mouseover", mouseOverHandler, false);
canvas.addEventListener("mousemove", mouseMoveHandler, false);

function mouseDownHandler(e) {
 var rect = e.target.getBoundingClientRect();
 m.d_x =  Math.floor(e.clientX - rect.left);
 m.d_y =  Math.floor(e.clientY - rect.top);
}

function mouseUpHandler(e) {
 var rect = e.target.getBoundingClientRect();
 m.u_x =  Math.floor(e.clientX - rect.left);
 m.u_y =  Math.floor(e.clientY - rect.top);
 m.vector();
 m.d_init();
}

function mouseOverHandler(e) {
 var rect = e.target.getBoundingClientRect();
 //m.o[0] =  Math.floor(e.clientX - rect.left);
 //m.o[1] =  Math.floor(e.clientY - rect.top);
 //alert(2343);
}

function mouseMoveHandler(e) {
 var rect = e.target.getBoundingClientRect();
 m.m[0] =  Math.floor(e.clientX - rect.left);
 m.m[1] =  Math.floor(e.clientY - rect.top);
 //alert(2343);
}

//キーコード
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_UP = 38;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var KEY_ENTER = 13;
var KEY_ESC = 27;
var KEY_A = 65;

//キー入力検出
$(window).keydown(function(e){
 //スペースか上を押したら...
 if(e.keyCode == KEY_UP){
  p.key_down = true;
  p.mouseX = 0;
  p.mouseY = -1; 
  m.d_init();
  return false;
 //左を押したら...
 }else if(e.keyCode == KEY_LEFT){
  p.key_down = true;
  p.mouseX = -1;
  p.mouseY = 0; 
  m.d_init();
  return false;
 //右を押したら...
 }else if(e.keyCode == KEY_RIGHT){
  p.key_down = true;
  p.mouseX = 1;
  p.mouseY = 0; 
  m.d_init();
  return false;
 //下を押したら...
 }else if(e.keyCode == KEY_DOWN){
  p.key_down = true;
  p.mouseX = 0;
  p.mouseY = 1; 
  m.d_init();
  return false;
 //Aを押したら...
 }else if(e.keyCode == KEY_A){
  return false;
 }
});

//配列を比較する関数
function array_compare(a1,a2){
 if(a1.length != a2.length) return false;
 else{
  for(var i=0; i<a1.length; i++){
   if(a1[i] != a2[i]) return false; 
  }
  return true;
 }
}

</script>

JavaScript 配列の比較（要素ごとにやらないといけないらしい）

2011-07-03T16:19:00.004+09:00

Pythonだと余裕で出来た気がするんだけど、javascritpだと配列の比較は、要素ごとにやらないといけないんすかね。
何かいい方法あったら教えてください。

<script type="text/javascript">
var a = [0,1];
var b = [0,1];

//これだと違うよになる。
if(a == b)  alert('同じだよ');
else alert('違うよ');

//これなら同じだよになる。
if(a[0] == b[0] && a[1] == b[1])  alert('同じだよ');
else alert('違うよ');
</script>

配列の比較関数をつくるとしたらこんな感じでしょうか？

<script type="text/javascript">
var a = [0,1];
var b = [0,1];
var c = [0,1,2];

var array_compare = function(a1,a2){
  if(a1.length != a2.length) return false;
  else{
   for(var i=0; i<a1.length; i++){
    if(a1[i] != a2[i]) return false; 
   }
   return true;
  }
 }

//同じだよになる
if(array_compare(a,b)) alert('同じだよ');
else alert('違うよ');

//違うよになる
if(array_compare(a,c)) alert('同じだよ');
else alert('違うよ');
</script>

HTML5 - Canvas マウスイベント時の座標取得について（座標は小数点以下があるらしい）

2011-06-28T21:58:00.001+09:00

こんな感じでマウスクリック時の座標を検知する。

var mouseX;
var mouseY;

//イベントリスナーの登録
canvas.addEventListener("mousedown", mouseDownHandler, false);

function mouseDownHandler(e) {
 var rect = e.target.getBoundingClientRect();
 mouseX =  Math.floor(e.clientX - rect.left);
 mouseY =  Math.floor(e.clientY - rect.top);
}

Math.floor(x)は、xの小数点以下を切り捨てる関数ですが、これをつけないと、FirefoxでY軸が小数点付き座標が取得されて困ったのでつけました。

HTML5 - Canvas アニメーション　ゲーム（２）

2011-06-26T13:08:00.001+09:00

ゲーム（１）の改良版。右左で移動できて、上でジャンプできます。敵の熊達をよけながら、GUNで敵を全部倒せばクリアです。GUNはAボタンで撃てます。Blog上ではうまく動かないので、リンクはります。動作確認はパソコンのChrome,Firefoxで確認済みです。

http://endo-yuta.appspot.com/practice3

code

<canvas id="game" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");

//敵の最大数
var ENEMY_COUNT = 5;

//画像の読み込み
//プレイヤーの画像読み込み
var img_player = new Image();
img_player.src = '/pic/Emoticons.png';

//敵画像の読み込み
var imgs = new Array();
imgs[0] = new Image();
imgs[0].src = '/pic/BlueToy_48x48.png'
imgs[1] = new Image();
imgs[1].src = '/pic/YellowToy_48x48.png'
imgs[2] = new Image();
imgs[2].src = '/pic/FireToy_48x48.png'
imgs[3] = new Image();
imgs[3].src = '/pic/GreenToy_48x48.png'

//プレイヤーのインスタンス作成
var player = new Player(ctx,img_player,0,368);

//最大数まで敵のインスタンスを作成
var enemys = new Array();
for(var i=0; i<ENEMY_COUNT; i++){
 //向きと早さをランダムに決める
 var vx = Math.random()*3; 
 var vy = Math.random()*3;
 //イメージをランダムに決める
 var img_no = Math.floor(Math.random()*4);
 //インスタンス作成
 enemys[i] = new Enemy(ctx,imgs[img_no],0,0,vx,vy);
}

//イメージロード後にメイン関数を繰り返し
var tm;
imgs[3].onload = function() { 
 tm = setInterval(main,10);
}

//メイン関数
function  main(){
 //画面のクリア
 ctx.clearRect(0,0,400,400);
 //当たり判定
 if(player.hit_enemy(enemys)){
  alert('GAME OVER...');
  clearInterval(tm);
  player.apear();
  for(var i=0; i<enemys.length; i++){
   enemys[i].apear();
  }
 }else{
  //プレイヤーのインスタンスの表示
  player.apear(); 
  
  //当たった弾のインデックス用
  var bullet_i;
  for(var i=0; i<enemys.length; i++){
   //敵と弾の当たり判定
   if(enemys.length -1 < i) break;
   bullet_i = enemys[i].hit_bullet(player);
   if(bullet_i == false){
    //敵のインスタンスの表示
    enemys[i].apear();    
   }else{
    //敵のパワーが1減る
    enemys[i].power --;
    if(enemys[i].power == 0) enemys.splice(i,1);
    //弾を削除
    player.bullet.splice(bullet_i-1,1);
   }
  }
 }
}

//敵クラス
function Enemy(ctx,img,x,y,vx,vy){
 var obj = this;
 obj.x = x ? x : 0;
 obj.y = y ? y : 0;
 obj.vx = vx ? vx : 2;
 obj.vy = vy ? vy : 1;
 obj.size = 32;
 
 //敵のパワー
 obj.power = 5;
  
 //敵を表示するメソッド
 obj.apear = function(){
  ctx.drawImage(img,obj.x,obj.y,obj.size,obj.size);
  obj.x = obj.x + obj.vx;
  obj.y = obj.y + obj.vy;
  //枠に到達したら折り返させる(速度の符号を反転)
  if(obj.x<=0||obj.x>=400-28) obj.vx = -obj.vx;
  if(obj.y<=0||obj.y>=400-30) obj.vy = -obj.vy;
 }
 
 //敵と弾の当たり判定メソッド
 obj.hit_bullet = function(player){
  var b_lx;
  var b_ty;
  var b_rx;
  var b_by;
  for(var i=0; i<player.bullet.length; i++){
   b_lx = player.bullet[i].x;
   b_ty = player.bullet[i].y;
   b_rx = b_lx + 4;
   b_by = b_ty + 4;
   if(obj.x < b_rx && b_lx < obj.x+20 && obj.y < b_by && b_ty <obj.y+26) return i+1;
  }
  return false;
 }
}

//プレイヤークラス
function Player(ctx,img,x,y){
 var obj = this;
 obj.x = x ? x : 0;
 obj.y = y ? y : 0;
 obj.vy = 5;
 obj.g = 0.1;
 obj.size = 32;
 
 //ジャンプ中か？フラグ
 obj.jump_status = false;
 //右移動中か？フラグ
 obj.right_status = false;
 //左移動中か？フラグ
 obj.left_status = false;
 //Gun撃っているか？フラグ
 obj.gun_status = false;
 //Gun制御フラグ（一定間隔で撃つためのカウンター）
 obj.gun_counter = 0;
 
 //Bulletインスタンスの配列の作成
 obj.bullet = new Array();
  
 //プレイヤーを表示するメソッド
 obj.apear = function(){
  ctx.drawImage(img,obj.x,obj.y,obj.size,obj.size);
  //ジャンプ
  if(obj.jump_status) obj.jump();
  //右移動
  if(obj.right_status) obj.right();
  //左移動
  if(obj.left_status) obj.left();
  //Gun 撃っている状態
  if(obj.gun_status){
   if(obj.gun_counter == 0){
    obj.bullet.push(new Bullet(obj));
    obj.gun() ;
    obj.gun_counter = 40;
   }else{
    obj.gun() ;
    obj.gun_counter --;
   }
  }
  //Gun 撃ち終わった状態
  if(! obj.gun_status && obj.bullet.length > 0){
   obj.gun();
   obj.gun_counter = 0;
  }
 }
 
 //Gunメソッド
 obj.gun = function(){
  for(var i = 0; i <obj.bullet.length; i++){
   //弾の数だけ弾を表示する。と同時に弾が外に出ていないか確認する
   if(obj.bullet.length -1 < i) break;
   if(!obj.bullet[i].shot()){
    //弾が外に出ている場合は、インタスタンスを削除する
    obj.bullet.splice(i,1);
   }
  }
 }
 
 //ジャンプメソッド
 obj.jump = function(){
  //jumpすると重力によって、-9.8m/s2速度が下がる
  obj.vy = obj.vy - obj.g;
  obj.y = obj.y - obj.vy;
  if(obj.y>=400-obj.size){
   obj.vy = 5;
   obj.y = 400-obj.size;
   obj.jump_status = false;
  } 
 }
 
 //右移動メソッド
 obj.right = function(){
  if(obj.x<400-32) obj.x = obj.x + 2.5;
 }
 
 //左移動メソッド
 obj.left = function(){
  if(obj.x>0) obj.x = obj.x - 2.5;
 }
 
 //敵との当たり判定メソッド
 obj.hit_enemy = function(enemys){
  var e_lx;
  var e_ty;
  var e_rx;
  var e_by;
  for(var i=0; i<enemys.length; i++){
   e_lx = enemys[i].x;
   e_ty = enemys[i].y;
   e_rx = e_lx + 20;
   e_by = e_ty + 26;
   if(obj.x < e_rx && e_lx < obj.x+28 && obj.y < e_by && e_ty <obj.y+28) return true;
  }
  return false;
 }
}

//Bulletクラス
function Bullet(player){
 var obj = this;
 obj.x = false;
 obj.y = false;
 obj.v = 5;
 
 //弾を表示するメソッド
 obj.shot = function(){
  if(obj.x && obj.y){
   obj.x = obj.x + obj.v;
   obj.y = obj.y - obj.v;
   //外に出ていたらfalseを返す
   if(obj.x<0 || obj.x>400 || obj.y <0 || obj.y >400){
    return false;
   }
  }else{
   obj.x = player.x+32;
   obj.y = player.y+14;
  }
  ctx.beginPath()
  ctx.fillStyle = 'orange';
  ctx.arc(obj.x+2, obj.y+2, 2, 0, 360,false);
  ctx.fill();
  return true;
 }
}

//キーコード
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_UP = 38;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var KEY_ENTER = 13;
var KEY_ESC = 27;
var KEY_A = 65;

//キー入力検出
$(window).keydown(function(e){
 //スペースか上を押したら...
 if(e.keyCode == KEY_SPACE || e.keyCode == KEY_UP){
  player.jump_status = true;
  return false;
 //左を押したら...
 }else if(e.keyCode == KEY_LEFT){
  player.left_status = true;
  player.right_status = false;
  return false;
 //右を押したら...
 }else if(e.keyCode == KEY_RIGHT){
  player.right_status = true;
  player.left_status = false;
  return true;
 //Aを押したら...
 }else if(e.keyCode == KEY_A){
  player.gun_status = true;
  return false;
 }
});

$(window).keyup(function(e){
 if(e.keyCode == KEY_LEFT){
  if(!player.jump_status) player.left_status = false;
  return false;
 }
 if(e.keyCode == KEY_RIGHT){
  if(!player.jump_status) player.right_status = false;
  return false;
 }
 if(e.keyCode == KEY_A){
  player.gun_status = false;
  return false;
 }
});
</script>

HTML5 Canvas - 上からボールを落として跳ね返る

2011-06-26T12:59:00.002+09:00

上からボールを落として跳ね返る様。重力があり跳ね返り係数があるのだ。オランダの科学者が重力はないといっており、他の著名科学者、物理学者が一定の賛同をしているようだ。これが本当なら重力がある前提で全ての物理の教科書がつくられている現代において、コロンブス並みの大発見になるかもとのことだ。僕は今覚えたばかりの重力を前提に跳ね返らせているわけだが、それでも自然にみえるものだ。何が正しくて何が本質かなどということはわからないものじゃ。

跳ね返り係数は、衝突後の速度を衝突前の速度で割り算して出すのだ。たしか。基本的に衝突後にスピードが遅くなるのはエネルギーが吸収されるからなんだと思うんだけど、基本的に衝突後にスピードが遅くなるのであれば、衝突前の方が速度の値は大きくなるわけなので、割り算結果としての跳ね返り係数は０〜１の間に収まる。０だと全てのエネルギーが吸収されて全く跳ね返らないということだ。

今知りたいのは、スーパーボールって係数はどの位なんだろう？というのと、斜め下から側面にぶつけたときって、やっぱ斜め上に行くって考え方であってるのか？っていうことだ。斜め上に行くものの重力の関係上放物線を描きながら下に行くイメージかなと思ってんだけどどうなんだろうか？

(やはりブログトップページからは絵が見られませんので、単一ページで見てください。)

code

<canvas id="game" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");

var p;
var c_w = canvas.width;
var c_h = canvas.height;

function init(){
 p = new Player(); 
}

init();

var tm;
tm = setInterval(main,10);

function main(){
 //画面のクリア
 ctx.clearRect(0,0,400,400);
 p.view();
}

function Player(){
 var obj = this;
 obj.size = 10;
 obj.x = 10; //円中心のx座標
 obj.y = 10; //円中心のy座標
 obj.v = 0; //初速度
 obj.g = 0.1; //重力加速度
 obj.h = 0.8; //跳ね返り係数
 
 obj.view = function(){
  if(obj.y >= c_h - obj.size/2){
   obj.y = c_h - obj.size/2;
   obj.v = -obj.v*obj.h + obj.g;
   if(obj.v >= 0) obj.v = 0;
  }else{
   obj.v = obj.v + obj.g; 
  }  
  obj.y = obj.y + obj.v; 
  ctx.beginPath()
  ctx.fillStyle = 'blue';
  ctx.arc(obj.x, obj.y, obj.size/2, 0, 360,false);
  ctx.font = "18px 'Monotype Corsiva'";
  ctx . fillText(obj.v, 30, 30);
  ctx.fill();
 }
}

</script>

HTML5 - Canvas 自然なジャンプをする四角形

2011-06-21T22:32:00.003+09:00

地球には重力がありますので、飛んでもしまいには落ちます。飛ぶときは初速度がありますが、この速度は毎秒9.8m/s2重力によって減速します。当然落下中は毎秒9.8m/s2速度が増します。この9.8m/s2を重力加速度といいます。9.8m/s2というのは大体の数値で、場所や色々な条件によってこの速度は微妙に変わります。この自然界の掟をプログラムのジャンプに反映させると、いかにも自然なジャンプに見えるのであります。

やはりブログトップページからは絵が見られませんので、単一ページで見てください。

<canvas id="jump1" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("jump1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'green';

var x = 0;
var y = 370;
var vy = 5;
var g = 0.08;

tm = setInterval(jump,10);

function jump(){
 //画面のクリア
 ctx.clearRect(0,0,400,400);
 ctx.fillRect(x,y,30,30);
 //jumpすると重力によって、-9.8m/s2速度が下がる
 vy = vy - g;
 y = y - vy;
 if(y>370){
  vy = 5;
  y = 370;
 } 
}
</script>

HTML5 - Canvas アニメーション　ゲーム（１）

2011-06-20T01:01:00.002+09:00

若干ゲームっぽくなってきたHTML5のCanvasアニメーションです。プレイヤーは青いボールに顔が書いてあるやつで、彼はカーソルキーで動かせます。上を押すとジャンプします。しかしジャンプしだしたら天井にぶつかって帰ってくるまで止まりません。右左を押すと右左に移動します。ジャンプ中も移動できます。敵はくま達です。くま達にぶつかった時点でゲームオーバーです。得点などはございません。ゲームオーバーになったらリロードするまでもはや動きません。

(やはりブログのトップページだと表示されない。。。見るときは単一ページからお願いします。)

<canvas id="kuma3" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("kuma3");
var ctx = canvas.getContext("2d");

//敵の最大数
var ENEMY_COUNT = 5;

//画像の読み込み
//プレイヤーの画像読み込み
var img_player = new Image();
img_player.src = 'Emoticons.png';

//敵画像の読み込み
var imgs = new Array();
imgs[0] = new Image();
imgs[0].src = 'BlueToy_48x48.png'
imgs[1] = new Image();
imgs[1].src = 'YellowToy_48x48.png'
imgs[2] = new Image();
imgs[2].src = 'FireToy_48x48.png'
imgs[3] = new Image();
imgs[3].src = 'GreenToy_48x48.png'

//プレイヤーのインスタンス作成
var player = new Player(ctx,img_player,0,368);

//最大数まで敵のインスタンスを作成
var enemys = new Array();
for(var i=0; i<ENEMY_COUNT; i++){
 //向きと早さをランダムに決める
 var vx = Math.random()*3; 
 var vy = Math.random()*3;
 //イメージをランダムに決める
 var img_no = Math.floor(Math.random()*4);
 //インスタンス作成
 enemys[i] = new Enemy(ctx,imgs[img_no],0,0,vx,vy);
}

//当たり判定インスタンスの作成
var hit_p_e = new Hit_player_enemy(player,enemys,ENEMY_COUNT);

//イメージロード後にメイン関数を繰り返し
var tm;
imgs[3].onload = function() { 
 tm = setInterval(main,10);
}

//メイン関数
function  main(){
 //画面のクリア
 ctx.clearRect(0,0,400,400);
 //当たり判定
 if(hit_p_e.hit()){
  alert('GAME OVER...');
  clearInterval(tm);
  player.apear();
  for(var i=0; i<ENEMY_COUNT; i++){
   enemys[i].apear();
  }
 }else{
  //プレイヤーのインスタンスの表示
  player.apear(); 
  //敵のインスタンスの表示
  for(var i=0; i<ENEMY_COUNT; i++){
   enemys[i].apear();
  }
 }
}

//敵クラス
function Enemy(ctx,img,x,y,vx,vy){
 var obj = this;
 obj.x = x ? x : 0;
 obj.y = y ? y : 0;
 obj.vx = vx ? vx : 2;
 obj.vy = vy ? vy : 1;
 obj.size = 32;
  
 //敵を表示するメソッド
 obj.apear = function(){
  ctx.drawImage(img,obj.x,obj.y,obj.size,obj.size);
  obj.x = obj.x + obj.vx;
  obj.y = obj.y + obj.vy;
  //枠に到達したら折り返させる(速度の符号を反転)
  if(obj.x<=0||obj.x>=400-28) obj.vx = -obj.vx;
  if(obj.y<=0||obj.y>=400-30) obj.vy = -obj.vy;
 }
}

//プレイヤークラス
function Player(ctx,img,x,y){
 var obj = this;
 obj.x = x ? x : 0;
 obj.y = y ? y : 0;
 obj.vy = -3;
 obj.size = 32;
 
 //ジャンプ中か？フラグ
 obj.jump_status = false;
 //右移動中か？フラグ
 obj.right_status = false;
 //左移動中か？フラグ
 obj.left_status = false;
 
 //プレイヤーを表示するメソッド
 obj.apear = function(){
  ctx.drawImage(img,obj.x,obj.y,obj.size,obj.size);
  //ジャンプ
  if(obj.jump_status) obj.jump();
  //右移動
  if(obj.right_status) obj.right();
  //左移動
  if(obj.left_status) obj.left();
 }
 
 //ジャンプメソッド
 obj.jump = function(){
  obj.y  = obj.y + obj.vy;
  if(obj.y<=0) obj.vy = -obj.vy;
  if(obj.y>=400-32){
   obj.jump_status = false;
   obj.vy = -obj.vy;
  } 
 }
 
 //右移動メソッド
 obj.right = function(){
  if(obj.x<400-32) obj.x = obj.x + 3;
 }
 
 //左移動メソッド
 obj.left = function(){
  if(obj.x>0) obj.x = obj.x - 3;
 }
}

//当たり判定クラス(プレイヤーと敵との当たり判定)
function Hit_player_enemy(player,enemys,enemy_count){
 var obj = this;
 //プレイヤーの位置の取得
 var p_lx;
 var p_ty;
 var p_rx;
 var p_by;
 //敵の位置の取得と当たり判定を敵の数繰り返す
 var e_lx;
 var e_ty;
 var e_rx;
 var e_by;
 
 //当たり判定メソッド
 obj.hit = function(){
  for(var i=0; i<enemy_count; i++){
   p_lx = player.x;
   p_ty = player.y;
   p_rx = p_lx + 28;
   p_by = p_ty +28;
   e_lx = enemys[i].x;
   //e_lx = enemys.x;
   e_ty = enemys[i].y;
   //e_ty = enemys.y;
   e_rx = e_lx + 20;
   e_by = e_ty + 26;
   if(p_lx < e_rx && e_lx < p_rx && p_ty < e_by && e_ty < p_by) return true;
  }
  return false;
 }
}

//キーコード
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_UP = 38;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var KEY_ENTER = 13;
var KEY_ESC = 27;

//キー入力検出
$(window).keydown(function(e){
 //スペースか上を押したら...
 if(e.keyCode == KEY_SPACE || e.keyCode == KEY_UP){
  player.jump_status = true;
  return false;
 //左を押したら...
 }else if(e.keyCode == KEY_LEFT){
  player.left_status = true;
  player.right_status = false;
  return false;
 //右を押したら...
 }else if(e.keyCode == KEY_RIGHT){
  player.right_status = true;
  player.left_status = false;
  return true;
 }
});

</script>

HTML5 - Canvas アニメーション　くま（２）

2011-06-18T23:02:00.006+09:00

くまのアニメーション2。ランダムでキャラ選ぶ。ランダムで向きと速度決める。ブログのトップページだと表示されない。。。見るときは単一ページからお願いします。

<canvas id="kuma2" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("kuma2");
var ctx = canvas.getContext("2d");

//キャラクターの最大数
var PLAYER_COUNT = 10;
 
//キャラクター画像の読み込み
var imgs = new Array();
imgs[0] = new Image();
imgs[0].src = 'BlueToy.png'
imgs[1] = new Image();
imgs[1].src = 'YellowToy.png'
imgs[2] = new Image();
imgs[2].src = 'FireToy.png'
imgs[3] = new Image();
imgs[3].src = 'heart.png'

//最大数までキャラクターのインスタンスを作成
var players = new Array();
for(var i=0; i<PLAYER_COUNT; i++){
 //向きと早さをランダムに決める
 var vx = Math.random()*5; 
 var vy = Math.random()*5;
 //イメージをランダムに決める
 var img_no = Math.floor(Math.random()*4);
 //インスタンス作成
 players[i] = new Me(ctx,imgs[img_no],0,0,vx,vy);
}

//イメージロード後にメイン関数を繰り返し
imgs[3].onload = function() { 
 setInterval(main,10);
}

//メイン関数
function  main(){
 //画面のクリア
 ctx.clearRect(0,0,400,400);
 //キャラクターのインスタンスの表示
 for(var i=0; i<PLAYER_COUNT; i++){
  players[i].apear();
 }
}

//主人公のオブジェクトをつくってみる
//大きさ、位置、スピード、向きを持つ
function Me(ctx,img,x,y,vx,vy){
 var obj = this;
 obj.x = x ? x : 0;
 obj.y = y ? y : 0;
 obj.vx = vx ? vx : 2;
 obj.vy = vy ? vy : 1;
 obj.size = 32;
 
 //主人公を表示するメソッド
 obj.apear = function(){
  ctx.drawImage(img,obj.x,obj.y,obj.size,obj.size);
  obj.x = obj.x + obj.vx;
  obj.y = obj.y + obj.vy;
  //枠に到達したら折り返させる(速度の符号を反転)
  if(obj.x<=0||obj.x>=400-28) obj.vx = -obj.vx;
  if(obj.y<=0||obj.y>=400-30) obj.vy = -obj.vy;
 }
}
</script>

HTML5 - Canvas アニメーション　くま（１）

2011-06-18T01:13:00.006+09:00

くまのアニメーション。端までいったら跳ね返る。なぜかブログのトップページだと、くまが消えない。。見るときは単一ページに飛んでください。

<canvas id="kuma" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("kuma");
var ctx = canvas.getContext("2d");

//キャラクターの最大数
var PLAYER_COUNT = 5;

//キャラクター画像
var img_i = new Image();
 img_i.src = 'kuma.png';

//最大数までキャラクターのインスタンスを作成
var players = new Array();
for(var i=0; i<PLAYER_COUNT; i++){
 players[i] = new Me(ctx,img_i,0,0,i,i);
}

//イメージロード後にメイン関数を繰り返し
img_i.onload = function() { 
 setInterval(main,10);
}

//メイン関数
function  main(){
 //画面のクリア
 ctx.clearRect(0,0,400,400);
 //キャラクターのインスタンスの表示
 for(var i=0; i<PLAYER_COUNT; i++){
  players[i].apear();
 }
}

//主人公のオブジェクトをつくってみる
//大きさ、位置、スピード、向きを持つ
function Me(ctx,img,x,y,vx,vy){
 var obj = this;
 obj.x = x ? x : 0;
 obj.y = y ? y : 0;
 obj.vx = vx ? vx : 2;
 obj.vy = vy ? vy : 1;
 
 //主人公を表示するメソッド
 obj.apear = function(){
  ctx.drawImage(img,obj.x,obj.y);
  obj.x = obj.x + obj.vx;
  obj.y = obj.y + obj.vy;
  //枠に到達したら折り返させる(速度の符号を反転)
  if(obj.x<=0||obj.x>=400-18) obj.vx = -obj.vx;
  if(obj.y<=0||obj.y>=400-30) obj.vy = -obj.vy;
 }
}
</script>

HTML5 - Canvas パックマンのモンスターを描くJavaScript関数(2)

2011-06-13T22:39:00.001+09:00

x,y座標ともに指定できるモンスター関数です。

サンプル

モンスター関数(2)の使い方

monster2(ctx,90,80,"#0a3");

モンスター関数(2)

function monster2(ctx,x,y,collor){
 y = y+28;
 ctx.fillStyle = collor;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x,y-14);
    ctx.bezierCurveTo(x,y-22,x+6,y-28,x+14,y-28);
    ctx.bezierCurveTo(x+22,y-28,x+28,y-22,x+28,y-14);
    ctx.lineTo(x+28,y);
    ctx.lineTo(x+23.333,y-5+0.333);
    ctx.lineTo(x+18.666,y);
    ctx.lineTo(x+14,y-5+0.333);
    ctx.lineTo(x+9.333,y);
    ctx.lineTo(x+4.666,y-5+0.333);
    ctx.lineTo(x,y);
    ctx.fill();
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(x+8,y-20);
    ctx.bezierCurveTo(x+5,y-20,x+4,y-17,x+4,y-15);
    ctx.bezierCurveTo(x+4,y-13,x+5,y-10,x+8,y-10);
    ctx.bezierCurveTo(x+11,y-10,x+12,y-13,x+12,y-15);
    ctx.bezierCurveTo(x+12,y-17,x+11,y-20,x+8,y-20);
    ctx.moveTo(x+20,y-20);
    ctx.bezierCurveTo(x+17,y-20,x+16,y-17,x+16,y-15);
    ctx.bezierCurveTo(x+16,y-13,x+17,y-10,x+20,y-10);
    ctx.bezierCurveTo(x+23,y-10,x+24,y-13,x+24,y-15);
    ctx.bezierCurveTo(x+24,y-17,x+23,y-20,x+20,y-20);
    ctx.fill();
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(x+18,y-14,2,0,Math.PI*2,true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x+6,y-14,2,0,Math.PI*2,true);
    ctx.fill();
}

HTML5 - Canvas パックマンのモンスターを描くJavaScript関数(1)

2011-06-13T02:52:00.001+09:00

パックマンを描くスクリプトを調べてモンスター関数を作成します。

xだけをインプットして、yは勝ってに決まってしまういけていないモンスター関数です。

サンプル

モンスター関数(1)の使い方

monster(ctx,x,collor)

モンスター関数(1)

function monster(ctx,x,collor){
    ctx.fillStyle = collor;
    ctx.beginPath();
    ctx.moveTo(x,x+33);
    ctx.lineTo(x,x+19);
    ctx.bezierCurveTo(x,x+11,x+6,x+5,x+14,x+5);
    ctx.bezierCurveTo(x+22,x+5,x+28,x+11,x+28,x+19);
    ctx.lineTo(x+28,x+33);
    ctx.lineTo(x+23.333,x+28.333);
    ctx.lineTo(x+18.666,x+33);
    ctx.lineTo(x+14,x+28.333);
    ctx.lineTo(x+9.333,x+33);
    ctx.lineTo(x+4.666,x+28.333);
    ctx.lineTo(x,x+33);
    ctx.fill();
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(x+8,x+13);
    ctx.bezierCurveTo(x+5,x+13,x+4,x+16,x+4,x+18);
    ctx.bezierCurveTo(x+4,x+20,x+5,x+23,x+8,x+23);
    ctx.bezierCurveTo(x+11,x+23,x+12,x+20,x+12,x+18);
    ctx.bezierCurveTo(x+12,x+16,x+11,x+13,x+8,x+13);
    ctx.moveTo(x+20,x+13);
    ctx.bezierCurveTo(x+17,x+13,x+16,x+16,x+16,x+18);
    ctx.bezierCurveTo(x+16,x+20,x+17,x+23,x+20,x+23);
    ctx.bezierCurveTo(x+23,x+23,x+24,x+20,x+24,x+18);
    ctx.bezierCurveTo(x+24,x+16,x+23,x+13,x+20,x+13);
    ctx.fill();
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(x+18,x+19,2,0,Math.PI*2,true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x+6,x+19,2,0,Math.PI*2,true);
    ctx.fill();
}

ちなみにgoogleのPac-Manです。

HTML5 - Canvasで色々な絵をかく（ハートマークからパックマンまで）

2011-06-12T22:25:00.002+09:00

Canvasリファレンスや、MDC Docsというやつのチュートリアルを参考に色々な絵をCanvasを使って書いてみよう。下の絵は全部他のサイトからパクってきたものだよ。ちゃんとパクリ先は明示しておきますよ。パクってきたのは、上2つのサイトですよ。HTML5 Canvasを使えば、ハートマークもマンガの吹き出しも、パックマンまでJavascript1つで描けるのだ。これでJavaScriptのTimer使えば、JavaScriptだけでアニメーションがつくれるのだ。もうFlashなんて不要だ。しかし、Canvasにはアニメーション機能がないので、Timerを使いながらすべてを消して全てを一から描写するというプロセスをアニメーションのコマ数分続けなくてはいけない為、あまり膨大なアニメーションをつくるのはお勧めできないらしい。膨大ってどのくらいなのかは分かりませんが、ゲームを作ろうと思ってもちょっと難しいのではないでしょうか？といっても、こんなことや、こんなこともできるらしい！すごい。

線を描く

<canvas id="canvas2" width="50" height="50"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas2");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 40);
    ctx.lineTo(40, 40);
    ctx.lineTo(40, 0);
    ctx.closePath();
    ctx.stroke();
</script>

四角を描く

<canvas id="canvas3" width="50" height="50"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas3");
    var ctx = canvas.getContext("2d");
    ctx.fillRect(0,0,40,40);
</script>

ハートマークを描く

<canvas id="canvas4" width="140" height="140"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas4");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
</script>

マンガの吹き出しを描く

<canvas id="canvas5" width="140" height="140"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas5");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,65,100);
    ctx.quadraticCurveTo(125,100,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();
</script>

パックマンを描く


<canvas id="canvas6" width="150" height="150"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas6");
    var ctx = canvas.getContext("2d");
    roundedRect(ctx,12,12,150,150,15);
    roundedRect(ctx,19,19,150,150,9);
    roundedRect(ctx,53,53,49,33,10);
    roundedRect(ctx,53,119,49,16,6);
    roundedRect(ctx,135,53,49,33,10);
    roundedRect(ctx,135,119,25,49,10);

    // Character 1
    ctx.beginPath();
    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
    ctx.lineTo(34,37);
    ctx.fill();

    // blocks
    for(i=0;i<8;i++){
      ctx.fillRect(51+i*16,35,4,4);
    }
    for(i=0;i<6;i++){
      ctx.fillRect(115,51+i*16,4,4);
    }
    for(i=0;i<8;i++){
      ctx.fillRect(51+i*16,99,4,4);
    }

    // character 2
    ctx.beginPath();
    ctx.moveTo(83,116);
    ctx.lineTo(83,102);
    ctx.bezierCurveTo(83,94,89,88,97,88);
    ctx.bezierCurveTo(105,88,111,94,111,102);
    ctx.lineTo(111,116);
    ctx.lineTo(106.333,111.333);
    ctx.lineTo(101.666,116);
    ctx.lineTo(97,111.333);
    ctx.lineTo(92.333,116);
    ctx.lineTo(87.666,111.333);
    ctx.lineTo(83,116);
    ctx.fill();
    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(91,96);
    ctx.bezierCurveTo(88,96,87,99,87,101);
    ctx.bezierCurveTo(87,103,88,106,91,106);
    ctx.bezierCurveTo(94,106,95,103,95,101);
    ctx.bezierCurveTo(95,99,94,96,91,96);
    ctx.moveTo(103,96);
    ctx.bezierCurveTo(100,96,99,99,99,101);
    ctx.bezierCurveTo(99,103,100,106,103,106);
    ctx.bezierCurveTo(106,106,107,103,107,101);
    ctx.bezierCurveTo(107,99,106,96,103,96);
    ctx.fill();
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(101,102,2,0,Math.PI*2,true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(89,102,2,0,Math.PI*2,true);
    ctx.fill();

function roundedRect(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
}
</script>

BloggerでHTML5のCanvasのテスト

2011-06-12T14:12:00.003+09:00

bloggerはHTML５使えるようなので、Google Chart Apiだけでなく、HTML5のCanvasで絵を書いていこうと思う。CanvasならJavaScriptのTimerを使えば簡単にアニメーションも作れるようだ。

とりあえずHTML5 Canvasのテスト

<canvas id="canvas1" width="50" height="50"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas1");
    var context = canvas.getContext("2d");
    context.fillRect(0,0,40,40);
</script>

Canvasを勉強するためのサイト

google chart api Visualizationでフェルマー（2次関数の包絡線）

2011-06-06T23:50:00.007+09:00

フェルマーでやりたかったのはこれだ。フェルマーは色々なことを発見したらしいが、これもフェルマーが発見したそうだ。下記グラフに描かれているのは、61本の直線ですが、全てy=x^2のグラフ上のある点の接線であります。結果的に、y=x^2のグラフが浮かび上がってくるのだ。こういうのを包絡線ともいうらしい。

y=x^2のグラフ上のある点を(a,a^2)とすると、その点の接線のy切片は、(0,-a^2)となるのだ。これはどの点をとってもそうなっているのだ！とフェルマーが発見したそうだ。すごいですね。この接線の傾きは、(a^2+a^2)/a = 2a^2/a = 2a ということで、2aになるのだ。


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        
        var i ;
        var x;
        var y;
        var z = 0;
        var max = 61;
        var a;
        var c = 0;

        for(i=0; i<max;i++){
            data.addColumn('number', i);
        }

        data.addRows(max);
  
        for (a = -30; a < 31; a = a +1){
          for(x = -30; x < 31; x = x +1){
            y = 2*a*x-a*a;
            data.setValue(z, c, y);
            z = z+1;
          }
          z=0;
          c= c+1;
        }  
 
      new google.visualization.LineChart(document.getElementById('chart_div4')).
      draw(data, {width: 500, height: 400,vAxis: {maxValue: 10},legend:'none'});
}
</script>
<div id="chart_div4">
</div>

google chart api Visualizationの使い方

2011-06-06T00:15:00.005+09:00

Visualizationを覚えよう。やはりjavascriptを使うようだが、若干複雑になっている。

上記は最初のサンプルになっている。普通のgoogle chart apiの最初のサンプルより、ちょっと奇麗で豪華になっている。ソースは下記だ。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 860);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance'});
      }
</script>
<div id="chart_div"></div>

シンプルにしてみよう。

二次関数のグラフを作ってみよう

できた！すばらしい。ソースはこれ。

<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'y');
        
        var x;
        var y;
        var z = 0;
        var max = 1001;

        data.addRows(max);
  
        for (x = -500; x < 501; x = x +1){
          y = x*x;
          data.setValue(z, 0, y);
          z = z+1;
        }  
 
      new google.visualization.LineChart(document.getElementById('chart_div3')).
      draw(data, {width: 500, height: 400,vAxis: {maxValue: 10}});
}
</script>
<div id="chart_div3">
</div>

これでフェルマーも作れるはずだ。

フェルマー

2011-06-05T23:12:00.014+09:00

せっかくだからなんかグラフにしようと思う。フェルマーが発見したのは、y=xの2乗のグラフ上のある点(a,a2乗)の接線のy切片は、-a2乗になるということだ。これはどの点をとってもそうなるらしい。google chart apiの問題は数値を0〜100しか扱えないことだ。なんとマイナスが扱えないらしい。本当か。。。それじゃあそもそもフェルマーの確認ができないじゃないか。不便な世の中だ。

念のためgoogle chart apiを試してみよう。y=-3x+10という数式のグラフを作ってみよう。xは1〜10まで１ずつアップさせることにしよう。そうするとyは、7,4,1,-2,-5,......という風になる。xが4以降は残念な全部0という結果を想定している。

なんとマイナスの数値は表示されないのだ。残念だ。念のため、マイナスにならない１次関数グラフを作ってみよう。y=3x+10だ。

でも、y=-3x+10をx=10までグラフ化するだけなら、擬似的に見せることは可能だ。x=10なら、y=-20だから、y=-3x+30のグラフをプロットして、目盛をいじればいいのだ。

上記と同じように、全ての値に50を足して、目盛で-50すりゃいいのだ。

・・・これじゃあx=7までしか表示できない。なんて使えないapiなんだ。。こうなったら、x=-3〜3までにしよう。そりゃそうだ。そうじゃないと放物線にならないし。

google chart apiはおらをばかにしているのか？？あくまでy軸は内部的には0-100の範囲で表示するのか？人類が使用する数字は0-100でマイナスはないと思っているのか？それとも俺がその活用法をしらないだけなのか？あるいは、何か少しでもまともに使おうとすると、もう一ランク上のVisualizationを使う必要があるのか？？

google chart apiは0-100ではなく、0-4095まで扱えるそうだ。しかしマイナスは扱えないし、4095を扱おうとすれば独自表記を覚えないといけないし、変換するプログラムを書かないといけない。これはもう速やかにVisualizationというのを覚えよう。

フェルマーは、Visualizationを覚えてからだな。

endo yuta blog

CSS - jQueryで垂直中央に配置する

Html

css

javascript

jQuery+CSS3サンプル

html

p13.css

p13.js

消費税増税

cakePHP1.3でデータベース操作の研究（MySQL）（２）

日付関連のデータ

cakePHP1.3でデータベース操作の研究（MySQL）

テーブル構成

各テーブルの項目

トランザクション

データの検索

データの削除

データの更新

データの登録

order =>rand()

ランキング

トランザクションを使っている様

AjaxでPagenation

トランザクション

cakePHPでトランザクション

cakePHPプロジェクト作成する際のファイル構成

Css - あふれた文字を「...」に変換する

divの例

css設定例

結果

jQuery - メニューをマウスオーバーしたら色変える

Javascript - GETリクエストパラメータを取得する

ミクロ経済学

サンクコスト（sunk cost）

お金の価値

その他

HTML5 - Canvas 円同士の衝突アニメーション

一人レーベル

PHP - 集合に関する関数

Controller

View

結果

まとめ

cakePHP - RequestHandlerとJSONレスポンス

RequestHandler

Ajax処理のJSON出力

Amazon API ページ番号を指定する

cakePHP - twitterAPIを使う

cakePHP セッション

cakePHP JSONデコード

cakePHP - データ更新

cakePHP - データの削除

cakePHP - データ検索（２）

cakePHP - データ検索

第一引数（検索仕様）

all

first

list

count

第二引数（オプション）

conditions

fields

recursive

order

limit

page

MySQL 照合順序 - 日本語を使えるようにする

cakePHP - テーブルへのデータ追加

cakePHP - リダイレクト(redirect)

cakePHP - scaffoldの使い方

CtpファイルをEclipseでPHPファイルとして表示する(CakePHP)

cakePHP モデルの規約

cakePHP - Appフォルダの構造

cakePHPの「・・・is not writable」エラー

xamppでcakePHPを使うときの設定

macでxampp使う

MySQL 数字データをINSERTしたら別の数字になっている件

PHP 文字列内での変数展開について

xamppのMySQLのrootのパスワード設定が記載されているファイル

PHP　文字列内での変数展開について

python　リストの追加　append()

Android 開発マルチ画面対応の研究

HTML5 - Canvas アニメーション　Walk

HTML5 - Canvas アニメーション　ゲーム（２）

HTML5 - Canvas アニメーション　ゲーム（１）

HTML5 - Canvas アニメーション　くま（２）

HTML5 - Canvas アニメーション　くま（１）