2012年11月7日水曜日

ハイローゲーム3桁対応(改)

前回のハイローゲームで、数値入力時に[0]を最初に入力すると3桁入力できないバグが見つかりました。

ハイローゲーム3桁(改)

要するに、入力を変数でカウントアップしていたのですが、[0][1]や[0][0][1]は数値としては1なので、カウントだけ上がって桁数が増えない状態になっていました。


    function doNumButton(n) {
      if (cntNum < 3) {
        inpNum = inpNum*10 + n;
        cntNum++;
      }
      showNumber();
    }

正しくは、[0][1][2]の次に[3]を入力したら123としたいので、次のように変更しました。

    function doNumButton(n) {
      if (inpNum < 100) {       // 3桁目まで入力可能
        inpNum = inpNum*10 + n;
      }
      showNumber();
    }

つまり表示している数値の桁数で判定するように変更したわけです。

さて、バグ修正だけではなんなので、ついでにキー入力にも対応してみました。
アンドロイドとしてはキー入力なんて関係ないのですが、PCで操作するときは、いちいちマウスで操作するよりもキーのほうが楽です。



    document.onkeypress = function(e)
    {
        var code = e.charCode;
        var key = String.fromCharCode(e.keyCode);
        if (code == 0x0D) {
          doExeButton();
        } else if (key == "-") {
        doClrButton();
        } else if ((key >= "0") && (key <= "9")) {
          doNumButton(Number(key));
        }
    }

キー入力のイベントで、押されたキーに応じて対応するボタンの処理を呼び出しています。
0x0DはEnterキーのキーコードです。Enterキーを押すと決定ボタンの処理を行うようにしました。
-キーはクリアボタン、0~9のキーはそれぞれ対応する数字のボタンです。

2012年11月3日土曜日

準備

ネットブックはウブントゥを載せて販売するのが正しいと思う・・・という偏った意見は置いといて、企業買収で今まで使えていたものが、ある日突然使えなくなるという事が度々発生しています。困ったものです。
ちなみにハッピー2は、エイサー製のネットブックの名前です。
ネタがUbuntu11.10の時点のものなので、今は違うかも・・・機会があれば確認してみます。

2012年10月26日金曜日

ドロイド


唐沢寿明は映画CASSHERNの敵の親玉ですね。
しかし、八王子君の想像しているものは少し違うようですが・・・。

2012年10月25日木曜日

やるぜっ!アンドロ軍

主人公は八王子くん、メガネをかけているのは菊名先輩です。
八王子くんは20代、何で知ったんでしょうね?
菊名先輩は40代なので知ってて当然ですが・・・。

2012年10月14日日曜日

開発環境

今まで雑誌やWEBを見ながらやってきたのですが、いい加減まとまった情報が欲しくなってきたので、本を買ってきました。

読んでいると、なんとなく8ビット機時代のBASIC入門を思い出します。

今の統合開発環境は、いろんな手段でエラーを教えてくれます。入力する前に候補を出してくれたり、エラー箇所を教えてくれたり、デバッグの支援をしてくれます。

ところが、エディタ+ブラウザでHTML5を書き始めると、エラーは「動かない」ということでしか分かりません。この状態は8ビット機時代のBASICと同じです。いや、BASICならエラーが表示されるのでそれ以下かもしれません。

とりあえず入力支援機能が欲しかったので、HTMLエディタを探したのですが、なかなかいいものが見つかりません。

結局、手になじんでいるEclipseを使うことにしました。これならこの後Android SDKを使うときにもそのまま使い続けることが出来ます。

実行環境にChromeを使っていて思い出したのが、デベロッパーツールの存在です。設定-ツール-デベロッパーツール(D)で表示されます。

これがあると、HTMLファイル内にエラーがあるとその行を教えてくれます。これだけで全然作りやすさが違います。

ということで、もう少しWEBアプリを続けようと思います。

2012年10月11日木曜日

ハイローゲーム3桁対応

ちょっと考えたらできてしまいました。

ハイローゲーム3桁

入力途中の状態を作るため、表示用のエリアを作り、履歴表示の部分を小さめにします。


  <p id="temp" style="font-size:25px;text-align:center;"></p>
  <p id="info" style="font-size:20px;text-align:center;"></p>


数字を3桁入力するために、決定ボタンを追加します。また、入力をキャンセルするためにクリアボタンも作ります。


    <button id="exekey" onClick="doExeButton()">決定</button>
    <button id="exekey" onClick="doClrButton()">クリア</button>


数字ボタンが押された時は、押された数字を3桁まで覚えておき、tempに表示します。


    function doNumButton(n) {
      if (cntNum < 3) {
        inpNum = inpNum*10 + n;
        cntNum++;
      }
      showNumber();
    }


tempへの表示は他でも使うので関数showNumber()としています。


    function showNumber() {
      $("temp").innerHTML = inpNum;
    }

クリアボタンが押された時は、それまでに入力された内容をクリアして表示を更新します。

    function doClrButton() {
        cntNum = 0;
        inpNum = 0;
        showNumber();
    }

決定ボタンが押された時の動作は、1桁の時の数字が押された処理と同様の処理になります。

    function doExeButton() {
      count++;
      for (i=max-1; i>0; i--) {
        tryNumber[i] = tryNumber[i-1];
      }
      tryNumber[0] = inpNum;
      showHistory();
      if (inpNum == ans) {
        alert("あたりです!");
        location.reload();
      }
      doClrButton();
    }

履歴表示は1桁の時と同じです。

    function showHistory() {
      var str = "";
      for (i=0; i<max; i++) {
        if (tryNumber[i] < 0) {
          str = str + "<br>";
        } else {
          str = str + tryNumber[i];
          if (tryNumber[i] > ans) {
              str = str + " 大<br>";
          } else if (tryNumber[i] < ans) {
              str = str + " 小<br>";
          } else {
              str = str + " 正解<br>";
          }
        }
      }
      $("info").innerHTML = str + count + "回";
    }

問題作成は、0~999の値になるので、*1000に変わっています。

    function getRandom1000() {
        var r = Math.floor(Math.random() * 1000);
        return (r);
    }

これで3桁のハイローゲームになりました。
まぁ、ハイローと言いつつ、大小と表示しているのですが(笑

ハイローゲームでも

西暦和暦変換が一段落したので、とりあえずゲームを作ってみました。
といっても、遊べるレベルのものではありませんが・・・。

ハイ・アンド・ロー・ゲームというものです。


相手が隠している数字を予想し、その予想した数字が答えよりも大きい場合はハイ(High)、小さい場合はロー(Low)と答えるので、何回で答えを当てられるかという遊びです。

最初は処理を簡単にするために、1桁の数字とします。

遊びとしては物足りないのですが、作りやすさとしては2桁以上の時と大違いになります。

入力にはボタンを10個用意しました。それぞれ0から9までの数字に対応します。

    <button id="tenkey" onClick="doNumButton(0)">0</button>
    <button id="tenkey" onClick="doNumButton(1)">1</button>
    <button id="tenkey" onClick="doNumButton(2)">2</button>
    <button id="tenkey" onClick="doNumButton(3)">3</button>
    <button id="tenkey" onClick="doNumButton(4)">4</button>
    <br>
    <button id="tenkey" onClick="doNumButton(5)">5</button>
    <button id="tenkey" onClick="doNumButton(6)">6</button>
    <button id="tenkey" onClick="doNumButton(7)">7</button>
    <button id="tenkey" onClick="doNumButton(8)">8</button>
    <button id="tenkey" onClick="doNumButton(9)">9</button>
    <br>

電話配列か電卓配列の3×3+1の形式にしたかったのですが、画面サイズの関係で2列にしています。解像度の高い機種を使っている人は好きな配列にすると使いやすいかもしれません。

例えば、電話配列なら

    <button id="tenkey" onClick="doNumButton(1)">1</button>
    <button id="tenkey" onClick="doNumButton(2)">2</button>
    <button id="tenkey" onClick="doNumButton(3)">3</button>
    <br>
    <button id="tenkey" onClick="doNumButton(4)">4</button>
    <button id="tenkey" onClick="doNumButton(5)">5</button>
    <button id="tenkey" onClick="doNumButton(6)">6</button>
    <br>
    <button id="tenkey" onClick="doNumButton(7)">7</button>
    <button id="tenkey" onClick="doNumButton(8)">8</button>
    <button id="tenkey" onClick="doNumButton(9)">9</button>
    <br>
    <button id="tenkey" onClick="doNumButton(0)">0</button>

となります。

ボタンサイズを個別に指定する方法がわからなかったので、CSSで指定しています。

  <style type="text/css">
    #tenkey{font-size: 25px;width: 50px; height:50px;}
  </style>

ボタンが押されると、doNumButton(n)を実行して表示と判定を行います。

表示は、過去5回分までの履歴と、その数字の大小、そして今の回数を表示します。
判定は、入力された数字が正解かどうかを調べて正解ならば通知してリロードしています。
リロードすると初期化されて次の問題が表示されることになります。

    function doNumButton(n) {
      count++;
      for (i=max-1; i>0; i--) {
        tryNumber[i] = tryNumber[i-1];
      }
      tryNumber[0] = n;
      showHistory();
      if (n == ans) {
        alert("あたりです!");
        location.reload();
      }
    }

過去5回分の履歴は配列にとってあり、入力のたびに後ろへずらし、先頭を最新の値にしています。それを表示用の領域へ出力すると、スクロールしているように見えます。

未入力部分は-1としておき、それを判定して表示しないようにしています。

    function showHistory() {
      var str = "";
      for (i=0; i<max; i++) {
        if (tryNumber[i] < 0) {
          str = str + "<br>";
        } else {
          str = str + tryNumber[i];
          if (tryNumber[i] > ans) {
              str = str + " 大<br>";
          } else if (tryNumber[i] < ans) {
              str = str + " 小<br>";
          } else {
              str = str + " 正解<br>";
          }
        }
      }
      $("info").innerHTML = str + count + "回";
    }

1桁以上にすると入力部分が厄介になるのですが、気が向いたらやってみます。
それよりも、そろそろSDKが使いたくなって来ました。

2012年10月10日水曜日

和暦→西暦変換から発展


西暦から和暦に変換するアプリを作ったわけですが、普通の生活では役に立ちそうにありません。
もっと昔の年号にも対応すれば、歴史の話題で「その頃日本は・・・」のように使えるかもしれませんが・・・。

逆の和暦から西暦への変換は、誕生日を西暦で聞かれた時にちょくちょく必要になります。
ということで、和暦→西暦変換を作ったのですが、少しの変更で西暦→和暦変換にもなることに気がついたので、結局両方向の変換としました。年齢表示もついでにつけています。

西暦和暦変換

和暦→西暦は

平成1年~ → 1989~
昭和1年~64年:1926~1989
大正1年~15年:1912~1926
明治1年~45年:1868~1912

となっているので、それぞれの年号で

平成:年+1988
昭和:年+1925
大正:年+1911
明治:年+1867

とすることになります。つまり

switch (nengo) {
case 0:
  ac = wa;
  break;
case 1:
  ac = wa + 1867;
  break;
case 2:
  ac = wa + 1911;
  break;
case 3:
  ac = wa + 1925;
  break;
case 4:
  ac = wa + 1988;
  break;
default:
  ac = 0;
  break;
}

として西暦に変換します。
nengoは

4=平成
3=昭和
2=大正
1=明治

です。

0は西暦から和暦への変換で使用します。

入力された値を、一度西暦に変換してから、前回の西暦和暦変換を利用して表示します。

今回は簡単でした。

存在しない年、例えば昭和65年を入力された際には、実際の年である平成2年を表示するようにしています。
明治以前は和暦表示はなしです。

年齢は満年齢なので、誕生日の前は1を引いた年齢になります。

2012年10月9日火曜日

西暦→和暦変換

今年だけでなく、特定の西暦から平成何年か調べたい場合、というのは多くないような気がしますが、とりあえず作ってみました。

和暦変換

入力した西暦から対応する和暦を計算して表示します。
その際、明治・大正・昭和・平成を判別します。いろいろあって面倒ですね。

平成:1989~
昭和:1926~1989
大正:1912~1926
明治:1868~1912

ということで、入力された西暦を判定して年号を決めます。
年号がかぶる年がありますが、そこは両方表示するということで対処しました。
本来は月日でどちらの年号になるか判定すると良いのですが、入力が面倒になるのでそこはやめておきました。

判定処理は以下のようにしています。

function wareki() {  var ac = $("memo").value;
  var str = "<br>";
  if (ac > 1989) {
      str = "平成 " + (ac - 1988) + " 年" + "<br>";
  } else if (ac == 1989) {
      str = "平成 " + (ac - 1988) + " 年" + "<br>"
          + "昭和 " + (ac - 1925) + " 年";
  } else if (ac > 1926) {
      str = "昭和 " + (ac - 1925) + " 年" + "<br>";
  } else if (ac == 1926) {
      str = "昭和 " + (ac - 1925) + " 年" + "<br>"
          + "大正 " + (ac - 1911) + " 年";
  } else if (ac > 1912) {
      str = "大正 " + (ac - 1911) + " 年" + "<br>";
  } else if (ac == 1912) {
      str = "大正 " + (ac - 1911) + " 年" + "<br>"
          + "明治 " + (ac - 1867) + " 年";
  } else if (ac > 1867) {
      str = "明治 " + (ac - 1867) + " 年" + "<br>";
  }
  $("info").innerHTML = ac + " 年" + "<br>" + str;
}

明治よりも前は表示しません。

西暦の初期値は、今日の日にちから年を持ってきて入れています。

window.onload = function() {    var t = new Date();
    var yyyy = t.getYear();
    if (yyyy < 2000) { yyyy += 1900; }
    $("memo").value = yyyy;
    wareki();
}

入力用のテキストボックスはidを"memo"として、以下のように作っています。

<input type="text" id="memo">

ボタンは、押された時に関数wareki()を実行するよう記述しています。
<button onClick="wareki()">変換実行</button>

とまあ、こんなところでしょうか。

と、簡単そうに書いていますが、結構苦労してしまいました。
エラーを教えてくれないので何が何やらわからなかったのですが、Chromeにデバッグ機能があることがわかってからはデバッグが楽になりました。

次回は和暦→西暦変換を作りたいと思います。


2012年10月8日月曜日

年月日表示

平成表示だけでは、なんとなく固定文字列を表示しているようで、いまいち実用性がないというか、面白みがありません。

ということで、どうせなら年月日表示してみよう、ということで作ったのがこちらです。

年月日

平成表示に月日を追加しただけです(汗

追加しただけなのですが、なんとも面倒です。

月は

var t = new Date();

とした後、

var mm = t.getMonth() + 1;

で取得しています。なぜか「0~」の値を返すんですね。だから+1します。

日は

var dd = t.getDate();

です。最初間違えて「var dd = t.getDay();」としていたのですが、こちらは曜日の取得なのだそうです。なんだかなぁ。

月と日は、1桁の時と2桁の時があるので、10以下の時は頭に0をつけて表示がずれないようにします。

if (mm < 10) { mm = "0" + mm; }
if (dd < 10) { dd = "0" + dd; }

後は、平成表示の時と同じです。

$("year").innerHTML = yyyy + " 年" + "<br>"
+ "平成 " + yy + " 年" + "<br>" + mm + "月" + dd + "日";


平成表示


iPhone5のカレンダーで、年号表示を西暦から和暦に変更する方法があります。

ビジネス文書に役立つ iPhoneのカレンダーを和暦表示に!【知っ得!虎の巻】- IT ライフハック(2012年9月26日13時00分)


自分のIS05でもできるかな?と思ってやってみたのですが・・・どうもできそうにありません。

できないならば作ってみよう、ということで挑戦したのがこちらです。
平成表示

ソースを覗くと、「//setInterval(showTime, 500); // タイマーを設定」なんて行があったりしますが、時計表示のサンプルをひっぱてきただけなので気にしないでください(苦笑

「<div id="year" style="font-size:50px;text-align:center;"></div>」

の部分に

「showTime();」



「$("year").innerHTML = (t.getYear() + 1900) + "<br>" + "平成 " + (t.getYear() - 88) + " 年";」

として現在の西暦と和暦(平成表記)を出力しています。

訓練所開設

アンドロイド用のアプリ開発を志したものの、いままでなかなか手を付けることができませんでした。

とりあえず本を読んでみたものの、試してみるのに今使っているネットブックではEclipseが重くて思うように操れません。

とりあえず、HTML5から始めようと思います。

ということで、練習中のアプリ・・・当面はWEBアプリになりますが・・・を公開出来る場所がないと面白くありません。

その為に、「アンドロ軍訓練所」を開設しました。

ここでは、開発関連の細かい話を書き、成果物は訓練所に置いておくようにしたいと思います。

2012年2月6日月曜日