fc2ブログ

CakePHPプログラミング入門を眺めてみたが・・・

プログラミングをする時間がなかなか確保できない。
Webで見る必要の無いページをダラダラ見てるから、その時間を削れば確保できるんだけど。

CakePHPのマニュアルをざっと眺めようと思ったが、結構分量がある。
ざっと眺めても全く頭に入らないし理解出来ない。
そこで、入門サイトなら理解できるかもしれないと、初心者のためのCakePHPプログラミング入門をざっと眺めてみた。
流し読みなのでさっぱり理解出来ない。
手を動かしてプログラミングしながら読まなきゃダメだな。

そんなわけで、CakePHPで何か作ってみることにする。入門サイトかマニュアルのサンプルをなぞるところから始めるか。
PHPもよくわかってないのにPHPフレームワークかよって気もするが、やってみてダメだったらその時に考えよう。
スポンサーサイト



PHPフレームワークをちょっと調べた

一週間近くプログラミングしていないので、久しぶりにPHPで何か作ろうと思った。
だけど作るネタが思い浮かばない。
せっかくだからPHP用のフレームワークでも触ってみるかとちょっと調べた。

「PHP フレームワーク」で検索して一番上に出てきたページ、 PHPフレームワーク特集 を読んで、
「CakePHPは小規模サイト向け」というだけの理由でCakePHPを調べてみることにした。

CakePHPのマニュアルを 3.4 環境設定 まで読んだ感想 → URLが長くなりそう
@PAGESだとmod_rewriteを使えないから、更に長くなるな。

自分が作るPHPプログラムなんてせいぜい数百行なんだから、今のところフレームワーク使わなくてもいいよなぁ。と、かなり逃げ腰になってる。
マニュアルをざっと見て、提供する機能だけでも把握しておいた方がいいかな。

小学校低学年向け計算練習ページを作った

夏休み中に姪の勉強を見てて、どの計算が苦手かを調べるためのプログラムを作った。
解説ページなども作って、一応公開できる状態になったので公開する。

こちらからどうぞ → 作ったもの一覧ページ

とりあえず足し算と引き算を作ったが、「かけ算も作って」と言われているので、そのうち一桁のかけ算用も作る。

解説ページをどこまで詳しく書けばいいのか良くわからない。
一度やれば使い方はわかるので、紹介目的で概要だけ書けばいいかなとざっくり書いた。
あまり詳しいと読む方が飽きるし。

それにしてもこの頃はJavaScriptばかり書いている。
そろそろPHPでコーディングしたいが、作るネタが思いつかない。

Internet Explorer8 のバグ?を発見

昨日の記事に書いた、「IEでボタン連打したときのクリックイベントをちゃんと拾う」対策をしたとき、
偶然IE8のバグっぽい現象を見つけた。

再現できるHTMLを載せる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>IE8のバグ?</title>
<script type="text/javascript">
<!--
var mainfunc = function(){
  var elm = document.getElementById("btn");
  elm.focus();
  elm.attachEvent("onkeyup", function(){
    var keycode = event.keyCode;
    if(keycode == 32){
      elm.style.display = "none";
    }
  });
}
// -->
</script>
</head>
<body onload="mainfunc();">
<button id="btn">スペースを押してください</button>
</body></html>
ページが表示されたときボタンにフォーカスが当たってるので、そのままスペースキーを押すと、
ブラウザが固まると言うかフリーズすると言うか、マウスクリックを一切受け付けなくなる。
ツールバーも右上のウィンドウを閉じるボタンも効かないし、ウィンドウの移動もできない。
ブラウザ以外の箇所をクリックするか、TABやALT+Fなどを押すとクリックが効くようになる。

他のケースでも起こらないか調べてみた。
・開発者ツールでブラウザモードIE7にすると起こらない。
→IE8だけで起こるのか?ちなみにブラウザのバージョンは 8.0.6001.18702。OS は XP SP3。
・スペースキーでは無く、リターンキー(キーコード13)にすると起こらない。
・onKeyUpイベントではなくonClickイベントにバインドして、スペースキーでイベント発生させると起こらない。

そして極めつけは
<!DOCTYPE>の行を削除すると起こらない。
じゃあこのHTMLが悪いのか?と思って The W3C Markup Validation Service でチェックしてみたが、エラーは何も無い。
IE8のバリデーションチェックまわりのバグなんじゃないかなぁ。

[JavaScript]IEでボタンを連打した際、onClickイベントをきちんと取得する方法

JavaScriptが有効なページでボタンをクリックすると、onClick イベントが発生する。
ボタンを連打すると、Firefox や Google Chrome では onClick イベントを漏れ無く取得できる。
しかし、Internet Explorer では、1秒間に1回ぐらいしか onClick イベントを取得できない。

onClick イベント取得漏れの対策方法は簡単で、onClick イベントの代わりに onMouseUp イベントを取得すればいい。
onMouseUp イベントなら、Internet Explorer でボタン連打してもきちんと漏れ無く取得できる。

ただし、onClick イベントはボタンにフォーカスして Space や Enter キーを押しても発生するが、
onMouseUp イベントはキーを押しても発生しない。
onMouseUp イベントを取得する場合は、Space や Enter キーの onKeyUp イベントも取得する必要がある。

そんなわけで、IE以外では onClick イベントを、IEでは onMouseUp イベントと Space や Enter キーの onKeyUp イベントを取得する処理をコーディングしてみた。

jQueryを使用する場合
// ボタンのidは"btn"
// ボタンクリック時に実行される関数はbtnevt
$(document).ready(function() {
  if($.browser.msie){
    $("#btn").mouseup(btnevt);
    $("#btn").keyup(function(){
      // Enter または Space キーの場合のみ処理
      var keycode = event.keyCode;
      if(keycode == 13 || keycode == 32){
        btnevt();
      }
    });
  }else{
    $("#btn").click(btnevt);
  }
})

jQueryを使用しない場合
// mainfuncを body onload で実行する
// ボタンのidは"btn"
// ボタンクリック時に実行される関数はbtnevt
var mainfunc = function(){
  var elm = document.getElementById("btn");
  var matchstr = navigator.userAgent.match(/msie/i);
  if(matchstr){
   elm.attachEvent("onmouseup", btnevt);
   elm.attachEvent("onkeyup", function(){
      // Enter または Space キーの場合のみ処理
      var keycode = event.keyCode;
      if(keycode == 13 || keycode == 32){
        btnevt();
      }
   });
  }else{
    elm.addEventListener("click", btnevt, false);
  }
}

押されたキーのキーコードは、IEでは event.keyCode 、Firefoxなどでは event.which で取得できる。
取得したキーコードがどのキーに該当するかは、各ブラウザのキーコード表[JavaScript]を参照。

JavaScriptで、一つの配列をソートした結果に従って他の配列もソートする

JavaScriptでプログラミングしていて、次のような処理をコーディングする必要が出てきた。
「二つの配列 Question[ ] と Time[ ] がある。
Question[i]の回答に要した時間がTime[i]に格納されている。
Time[ ]を昇順にソートし、その結果を元にQuestion[ ]も並び替える」
配列が二つなら、「適当なセパレーターで各要素を結合したワーク配列をソートして、string.splitで分割」といったやり方もある。
ただし、セパレーターを選ぶ際に両方の配列の値を考慮する必要がある。

そんなわけで、三つ以上の配列にも対応でき、セパレーターを選ぶのがあまり難しくないやり方を考えた。
/* 最初の引数を並び替える。その結果に従って2番目以降の引数も並び替える */
var sortTwoArr = function(){
  var sepstr = "::##&&::";  // 配列の値と添え字をつなげる文字列。最初の引数の配列の値としてあり得ない文字列にする
  var arglen = arguments.length;  // 引数の数
  
  // 引数チェック
  var arrSize;  // 配列のサイズ
  if(arguments[0] instanceof Array){
    arrSize = arguments[0].length;
  }
  for(var i=0;i<arglen;i++){
    if(!(arguments[i] instanceof Array)){
      alert((i+1) + "番目の引数が配列ではありません");
      return false;
    }
    if(arguments[i].length != arrSize){
      alert((i+1) + "番目の引数のサイズが、最初の引数のサイズと異なります");
      return false;
    }
  }
  
  // 最初の引数に配列の添え字を付加してソート
  var workArr = new Array(arrSize);  // ワーク配列
  var sortSeqArr = new Array(arrSize);  // ソート後の添え字を格納する配列
  var firstArr = arguments[0];  // 最初の引数
  for(var i=0;i<arrSize;i++){
    workArr[i] = String(firstArr[i]) + sepstr + String(i);
  }
  workArr.sort();
  
  // ソート後の添え字を格納
  var tempspArr = new Array(2);  // string.split用の配列
  for(var i=0;i<workArr.length;i++){
    tempspArr = workArr[i].split(sepstr,2);
    sortSeqArr[i] = tempspArr[1];
  }

  // returnするオブジェクト作成
  var rtnobj = new Array(arglen);  // returnするオブジェクト
  for(var i=0;i<arglen;i++){
    rtnobj[i]=new Array(arrSize);
  }
  
  for(var i=0;i<arrSize;i++){
    for(var j=0;j<arglen;j++){
      rtnobj[j][i] = arguments[j][ sortSeqArr[i] ];
    }
  }
  return rtnobj;
}
Argumentsオブジェクトを使用して、可変数の引数に対応している。
配列は参照渡しだからreturnしなくていいと思っていたが、関数内で値を変えても呼び出し元では反映されなかった。そのためソート済み配列を格納した配列をreturnするようにした。

sortTwoArr関数の使用例は以下の通り。
// ソート対象配列
var firstArr = ["023","100","001","010","880","050"];
var followArr = ["aaa","bbb","ccc","ddd","eee","fff"];
var followArr2 = ["あ","い","う","え","お","か"];

// firstArrをソートした結果に従って、followArr, followArr2をソート
var rtn = sortTwoArr(firstArr,followArr,followArr2);

// ソートした結果を格納
var firstArrAfter = rtn[0];
var followArrAfter = rtn[1];
var followArrAfter2 = rtn[2];
この結果は
firstArrAfter: [001,010,023,050,100,880]
followArrAfter: [ccc,ddd,aaa,fff,bbb,eee]
followArrAfter2: [う,え,あ,か,い,お]
となる。

array.sort()メソッドは、値を文字列としてソートしているようなので、配列の値を数値としてソートする場合は以下のようにする。
// 関数の外で宣言
var sepstr = "::##&&::";  // 配列の値と添え字をつなげる文字列。配列の値としてあり得ない文字列にする

/* 最初の引数を並び替える。その結果に従って2番目以降の引数も並び替える */
var sortTwoArr = function(){
  var arglen = arguments.length;  // 引数の数
(略)
  workArr.sort(sortfunc);
(略)
  return rtnobj;
}

/* 数値比較する場合の比較関数 */
var sortfunc = function(first,second){
  var tempspArr = new Array(2);  // string.split用の配列
  var firstval,secondval;
  // 比較対象の値を抽出
  tempspArr = first.split(sepstr,2);
  firstval = Number(tempspArr[0]);
  tempspArr = second.split(sepstr,2);
  secondval = Number(tempspArr[0]);
  
  if(firstval > secondval){
    return 1;
  }else if(firstval < secondval){
    return -1;
  }
  return 0;
}
上記は、配列内に数値と文字列が混在しているケースを考慮していない。
配列のサイズが大きい場合は比較関数の負荷が気になる。
配列の値が数値でも、ゼロ埋めなどで桁数を揃えて文字列として格納すれば、比較関数の使用を回避できる。

JavaScriptで、小数点以下の指定した桁数までゼロ埋めする

小数点以下の桁を揃えようと思ったが、
JavaScriptにはsprintfのようなフォーマット関数が無いので、
小数点以下の指定した桁数までゼロ埋めする関数を自分で作ってみた。
せっかくなのでブログに書いておく。
/* 小数点以下の指定した桁数までゼロ埋め
 * inNum ゼロ埋め対象の数
 * digit 小数点以下何桁までゼロ埋めするか
 * return ゼロ埋めした結果の文字列
 */
var formNumber = function(inNum,digit){
  if (isNaN(inNum) || isNaN(digit) || digit<0){
    return false;
  }
  digit = Math.floor(digit);
  var workstr = String(inNum);  // ワーク文字列
  var dpPlc = workstr.indexOf(".");  // 小数点の位置
  var zeroCnt = 0;  // 付加するゼロの個数
  if(dpPlc < 0){
    workstr += ".";
    zeroCnt = digit;
  }else{
    var digCnt = (workstr.length - 1) - dpPlc;  // 小数点以下の桁数
    if(digCnt < digit){
      zeroCnt = digit - digCnt;
    }
  }
  var zeroStr = new Array(zeroCnt+1).join("0");  // 埋める分の数だけゼロを連結した文字列
  workstr += zeroStr;
  return workstr;
}
小数点を探すところを正規表現にすると、もっとスッキリしそうな気がする。

今作っているもの

前回の記事から、だいぶ間が開いてしまったので現状について書く。

・JavaScriptで音を制御する方法を調べようとしたが・・・
IEはbgsoundタグを使えば簡単にできるのだが、FireFoxだとプラグインに依存する。
難しそうなので保留。HTML5使って実装できないかなぁ。

・今作ってるもの
プログラミングする時間がほとんど取れない状態だが、今日ちょっとプログラミングした。
1桁の足し算特訓プログラムをJavaScriptで作った。
問題が出る→ボタンを押す→答えとボタンを押すまでにかかった時間を表示
といった簡単なもの。まだ公開できるレベルではない。
あと、100行未満の短いプログラムをJavaで作った。2ヶ月ぶりのJavaだったので、かなり忘れていた。

来週いっぱいはプログラミングの時間取れないかなぁ。

jQueryでDOM要素を作成し、DOMツリーを構築する方法

「jQuery DOM ツリー 構築 or 生成」などで検索しても、jQueryでDOM要素を作成/生成し、DOMツリーを1から作る方法が出てこなかったので、せっかくだから基礎の基礎をまとめてみる。

1)jQueryオブジェクトを作る
jQueryオブジェクトとは、jQueryの関数(メソッド)が使用できるDOM要素(またはその配列)のこと。DOMツリーに含まれてない要素も含む。
jQueryオブジェクトは、セレクタで抽出して取得することが多いが、1から作ることもできる。
jQueryオブジェクトの作成には、$()関数を使用する。
<例>
// <div></div>という要素のjQueryオブジェクトを作成し、$jqObjに格納する
var $jqObj = $("<div/>");  
変数名の先頭に $ をつける必要は無いが、「jQueryオブジェクトが格納されている変数であること」を明示するために $ を付けた方が、ソースコードを読み易い。

2)jQueryオブジェクトに属性などを追加する
1)で作成したjQueryオブジェクトに、
 attr()で属性を追加
 addClass()でCSSクラスを追加、css()でCSSプロパティを設定
 text()でテキストを追加
などを行い、子要素を作成する。
詳細はAttributes APIなどを参照。

3)親要素を取得し、jQueryオブジェクトを子要素として登録する
親要素をセレクタなどで抽出する。
抽出した親要素に対して、2)で作成した子要素をappend()などで登録し、DOMツリーを構築する。
<例>
var bcolorArr = new Array(略);  // 子要素の色
var $div = $("#main");  // 親要素取得
var $jqObj;  // 子要素
for(var i=0;i<bcolorArr.length;i++){
  //  jQueryオブジェクトを作成し、CSSクラス、CSSプロパティ、id属性を付与する
  $jqObj = $("<div/>").addClass("box").css("backgroundColor",bcolorArr[i])
    .attr("id","id" + (i+1));
  // jQueryオブジェクトを子要素として追加する
  $div.append($jqObj);
}
DOM要素を追加する関数(メソッド)の詳細は、Manipulation APIなどを参照。

<body>を親要素とする場合は、
$("body").append($jqObj);
とすればよい。

以上です。
自分が見たいくつかのjQuery入門サイトでは、ここら辺についての記述は無かった。

効果音を作ってみた

昨日完成したゲームに音を追加しようと思い、音源をどうするか考えた。
フリー音源サイトを調べたらたくさんあったが、ありすぎて欲しい音を探すのが大変だ。
欲しい音は正解の音と不正解の音。いくつかサンプルを聞いてみたけど、カッコ良すぎて何か違う。
もっとシンプルな音が欲しい。

そんなわけで自分で作ることにする。音作りの基礎知識など全く無い。
簡単に効果音を作れるフリーソフトを探す。
見つけた。
KanaWave(readmeにあった作者のページが閉鎖されていたので、vectorへのリンク)
カナで入力すると、その音っぽい効果音が作成できる。

<KanaWaveで正解時の効果音を作る>
1) 「ぴんぽーん」と入力する
2) 抑揚と音の高さのパラメータを微調整する
これだけ。パラメータが少ないのが良い。
作成した効果音 → pinpon.mp3

同様に、「ぶー」と入力して不正解時の効果音も作ろうと思ったが、イメージとかなり違う音なので断念。

カナ入力で音楽を作れるフリーソフト サクラ を使うことにする。
サクラが認識するカナはドレミファソラシドなのだが、音色を変えることによって様々な音を作ることができる。
本来は曲作りのソフトだけど、音色が豊富に用意されているので音作りもできる。

<サクラで不正解時の効果音を作る>
1) 音色を選ぶ
2) 音階、音名、音符を選ぶ
これだけ。音階とか全然分からないのでひたすら変えて音を鳴らしてみた。
作成した効果音 → boo.mp3
効果音ってよりも楽器の音だな。まぁいいや。

明日はJavaScriptで音を制御する方法を調べよう。
プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター