信頼はずっと、挑戦はもっと。

お問い合わせ
TEL:03-3496-3888

BLOG コアテックの社員ブログ (毎週月曜~金曜更新中)

LIST OF ARTICLES

記事一覧

  • テクログ

    ソフトウェアテストについて

    こんにちわ、本日はシステムのテスト手法につきましてわかる範囲で書いていきたいと思います。 システムのテストを全くやったことないよっていう人はSE/プログラマの方の中にほとんどいらっしゃらないかと思います。 例えば業務システムの場合、テスト専門部門(品質保証部門)を用意している企業も珍しくはありませんが、どんな作り手の方でも最低限の単体テスト(UT)くらいは実施しますよね。 今回はその際のテストについてです。 システムのテストは大きく2つの分類に分けられます。 ・ブラックボックステスト ・ホワイトボックステスト の2種類です。 違いは以下の通り。 ブラックボックステスト…システムの外部に着目して仕様通りかどうかのテストを行う ホワイトボックステスト…システムの内部構造に着目してテストを行う 例えば、ここに 『身長を入力したら 165cm未満で低め/165以上180以下で標準/それ以上は高め を結果として表示してくれる PHPプログラムがあったとします。処理としては、非常に簡素ですが以下とします。 index.html 身長: calc.php コードに関しては特に説明する必要もないくらいですね。 入力された結果をcalc.phpに渡してその判断結果をprintするだけです。 さて、まずは上記のプログラムに対してテストを行う場合に、ブラックボックステストで行う場合のテストケースを考えてみましょう。 仕様は上に書いたとおりです。 ブラックボックステストを漏れが少なく行う為の有効な手法の1つとして、同値分割と限界値分析(境界値分析)という手法があります。 ◆同値分割とは 入力を同じように扱えるグループに値を分けたものを同値クラスと呼び、それぞれの代表的な値を用いてテストを行う。 有効な同値クラスを、有効同値クラス、無効(エラー)となる同値クラスを無効同値クラスと呼ぶ。(ソフトウェアテストwikiより) →要約すると『同じように扱えるグループの代表的な値を入れる』って事です。 上記の例では、 164cm以下なら『低め』が返るグループ 165~179cmなら『標準』が返るグループ 180cm以上なら『高め』が返るグループ 同値分割を使用してのテストは、各グループの代表値を使用してテストケースを作成します。 上記はすべて有効同値クラスと言われるものですね。 例えば、上記テストケースを作成するとしたら以下のような感じでしょうか? 身長の入力:期待される結果 100       :低めが表示されること 170       :標準が表示されること 190       :高めが表示されること 同値クラスは、あくまでその地域の代表となる値なので特にどの数値がいいとかいうのはないので、上記は各クラスから適当に抜き出した値です。 有効同値クラスのテストは上の例のようなもので問題ありません。 逆に無効同値クラスを考えたときに、例えば負の値が入力された場合を考えます。 すると身長でマイナスというのは本来存在しないが(厳密にいうと極端に低い値も存在しないとは思いますが)、入力では入れることができるマイナスの数値のケースが上記プログラムでは抜けている事に気づく事ができます。 現状のプログラムではマイナスが入力された時にも『低め』が表示されるので、身長の事なんだからマイナスの場合はエラーを表示させる必要があるかもという発想に至ることができます。 実際のプログラムでは、このような異常ケースを考えていない事が致命的な不具合につながることがあります。 エラーケースを考えて仕様に『身長がマイナスの場合は正しい値を入力してくださいと表示する』という仕様が追加されたら、 無効同値クラスのテストケースは下記のものを追加でしょうか。 身長の入力:期待される結果 -5        :正しい値を入力してくださいと表示されること。 さらに無効同値クラスを考えるときに、例えば数値以外の入力があった場合を考えたとします。 先ほどのエラー処理をいれたソースはこのようなコードであったとすると… 入力値に数字以外の日本語を入れると、なぜか結果は『低め』になります。 理由はintval()の関数の仕様が数値変換失敗時は 0を返すという理由です。 ですので、全角や数値以外の場合は変換失敗として0が返されるので}elseif($shincho < 165)に該当してしまって低めと間違った結果を表示してしまいます。 この場合は数値以外をJSで入力できなくしてあげたり、php側で数値かどうかのチェックを入れて数値以外ならエラーを出力するなどの対策を考える必要があります。 上記のように、無効同値クラスを考えただけでも2つの想定外になる要素を排除する事ができます。 同値分割は、グループわけをして代表的な値を入力して正しく期待結果が返る事を確認するテストになります。 テスト作成時には、異なる結果が得られる分岐がある場合はこの同値分割を意識する必要があります。 ちと長くなりましたが…本日はもう1つだけ。 限界値分析に関してです。 ◆限界値分析とは 入力を同じように扱えるグループに値を分け、その境界となる値を用いてテストを行う。プログラムのエラーは分岐の境界で発生する場合が多いため、限界値分析に基づいたテストを行うことで、同値分割に基づいたテストよりも多くの欠陥を発見することができる。(ソフトウェアテストwikiより) →要約すると『同じように扱えるグループの境目の値をテストする』って事です。 文書見ただけでもわかりますが、異なる結果を出力する境目になりますので、上記例を使って限界値テストを実施する場合は 身長の入力:期待される結果 -1:正しい値を入力してくださいが表示される事 0:低めが表示されること 164:低めが表示されること 165:標準が表示されること 179:標準が表示されること 180:高めが表示されること このような項目になりますね。 -1~0の間(エラーから低め)、164~165の間(低めから標準)、179~180(標準から高め) の間で1つの数値上昇に対して結果が変わるので、そこをテストします。 境界値テストを実施することで、165未満の判定が }elseif($shincho < 165){が正しいところを }elseif($shincho <= 165){となっていた場合には、165で『低め』が誤って表示されるのでバグを発見することができます。 境界近くの値は上のif分の記述ミス等のようなバグが発生しやすいです。 実際、ni-yoが所属しているチームでつい最近も境界線の値の判断ミスでバグが発生しました。 ブラックボックステストを作成時に同値分割/限界値分析を意識するだけで、何も意識していない状態よりはかなり品質は変わってきます。 長くなりましたので、ホワイトボックスはまた後日にでも! では( ´ ▽ ` )ノ
  • テクログ

    新しい技術

    こんにちは。ぬまっちです。今日実は28歳の誕生日を迎えました!!!今回は非常に有名なUnityについて。新しい技術を学ぶ必要があると思い、技術ブログに掲載致します。UnityはWii、Xbox360、PlayStation 3、Mac、Windowsなどゲームを楽しむ機器向けから、Webブラウザで遊ぶゲーム、あるいはiPhone/iPod Touch/iPad、Android向けのバージョンも存在します。目標Unityでアングリーバード的な簡易ゲーム実装 まずUnityをローカル環境にインストールしてください。■プロジェクト名TestBlockFile→New Projectフォルダー構成■共通部品の配置に関してはInspectorのTransformにてPositonのX,Y,Zの数値を変更してください。CubeGameObject→Create Other→CubePlayerGameObject→Create Other→SphereCube PlayerともにComponent→Physics→Ragidbodyにて物体の重さを設定してください。Projectフォルダー構成Scriptフォルダ以下にjsを埋め込みます。Scriptで右クリック→Create→JavascriptPlayerController,Triggerという名前のjsファイルを作成します。 PlayerController.jsvar player : GameObject;var shootPowerX : float = 400.0;var shootPowerY : float = 400.0;function Update () {    if ( Input.GetButtonDown("Fire1") ) {        player.rigidbody.AddForce(shootPowerX, shootPowerY, 0);    }}Trigger.jsfunction OnGUI () {    if ( GUI.Button(Rect(10, 10, 50, 50), "Reset") ) {        Application.LoadLevel("TestBlock");    }} jsが完成したらProjectのjsファイルをHierarchyの同名ファイルにドラッグしつなぎます。Point light物体に照明をともします。GameObject→Create Other→PointLight以上ができましたら再生ボタンを押します。 TestBlock ダウンロードファイルを置いておきます。  
  • テクログ

    PHPの小技

    プログラマー:「ディレクター♪ 言われていたサイト出来上がりましたよ♪」ディレクター:「あれ?予定より早くない?」プログラマー:「こういうサイトは慣れてきましたからね。ささっと作れちゃいました。」ディレクター:「ありがとう。ちょっと確認してみるよ。」・・・・ディレクター:「ねぇ・・・超遅いんだけど・・・。作り直してくれないと納品出来ないから・・・」プログラマー:「アタヽ(´Д`ヽ ミ ノ´Д`)ノフタ」 いくつものサイトをPHPで作成していると、こんな事が起こる事があります。ついつい慣れだったりパッと思いついた方法でコードを書いていってしまうと陥る罠ですね。という事で、納期間際に、アタヽ(´Д`ヽ ミ ノ´Д`)ノフタ しない為の小技を発見したのでメモ書き程度にご紹介いたします。1、 require_onceは激重2、preg_replaceよりもstr_replace()の方が速い。 しかし!!!!    str_replaceよりもstrtr()の方が4倍も速い!3、$row[id]よりも$row["id"]の方が7倍速い!4、for文の中で($i=0; $i < count($array); $i)のように、count()関数を使うと、毎回count()が呼ばれるので遅くなる。5、staticメソッドが使えるなら使った方が良い。速度は4倍に!!!こんな事に注意をして作っておくと・・・・・・・・ディレクター:「確認したよ!軽いし良いね。さくっと納品しちゃうよ。ありがとう。」プログラマー:「(^^ゞ」こんな感じで幸せになれますよ♪小さい事かもしれませんが、塵も積もれば何とかです。小技を有効活用しちゃいましょう。※追記2012/10/31の記事をもう少し詳しく書いてみたのですが、若干違う部分があるな~・・・ どっちが正解なんだろうか・・・・
  • テクログ

    知っていたら便利。Photoshopの色々

    こんにちは。 今日は以外に知らないPhotoshopの機能について話したいと思います。   毎日のように使ってるPhotoshopですが、便利ですよね! の中で、これ知ってたらより便利に!というのをを紹介します。   ①レイヤー複製「~のコピー」をつけない方法   レイヤー複製すると「~のコピー」ってなるんですが、いつの間にかどんどん増えていきますね。 それが以外と気になる時があったり、作業を他人に引き継ぐ時とか、、、、知っていたら便利かと思います。   普通レイヤー複製するとこうなります。   それを、、、「レイヤー」パネルのオプションを開き、パネルオプションをクリック 『コピーしたレイヤーとグループに「コピー」を追加』のチェックを外します。   そうしたら、、、レイヤーを複製してもレイヤー名に「~コピー」が付かなくなります。   この設定はcs5からできるらしいです。   ②長方形ツールを使う時、端がぼけないようにする方法    長方形ツールで四角(丸角長方形なども)を書く時に端がぼけてしまい、でか~く拡大して調整した~って経験ありませんか? 昔の私はよくありましたが。。。。;   ぼけた場合↓ きれいに書けた場合↓ これは、角丸長方形オプションで「ピクセルにスナップ」にチェックをつけることできれいに書くことができます。 簡単でしょ? 以上便利なPhotoshopの色々でした。 それではまた。    
  • テクログ

    GDライブラリの初歩の初歩

    PHPのライブラリの1つ、GDについて簡単に。   プログラムの初歩と言えば「Hello World.」。 GDを使って「Hello World.」を表示させるところまでやってみようと思います。 準備   ここはPHP経験者には説明不要かと思います。 表示させたい文字列を$Message変数に入れておきます。 //表示させる文章を設定 $Message = "Hello World."; 新しい画像の作成   新しい画像の作成をします。 下のコードではImageCreateを使って横120ピクセル縦30ピクセルの画像を作成しています。 //新規イメージの作成 $Img = ImageCreate (120,30) or die ("Cannot Initialize new GD image stream"); 色の設定   先ほど作成した画像と文字の色を設定します。 数字が3つ並んでいるところはそれぞれRGBを0~255までの範囲で設定できます。 //背景色を設定(オレンジ色) $background_color = ImageColorAllocate ($Img, 255, 200, 0); //文字の色を設定(緑色) $text_color = ImageColorAllocate ($Img, 0, 150, 100); 背景と文字の合体   一番最初、変数に入れた文字列と先ほど設定しておいた色の設定を適応させて重ねます。 「30」は文字の大きさ、「5」と「7」は左5ピクセル上から7ピクセルのところに文字の左上が来るようにする設定です。 //背景に文字を重ねる ImageString ($Img, 30, 5, 7, $Message, $text_color); 画像としてブラウザに送信   作成した画像を表示させなければ意味が無いので、ブラウザに送信してあげます。 「//画像出力」で、Jpeg形式で画像をあんまり圧縮しないで出力しています //バイナリをテキストと誤認させない為の処理 mb_http_output("pass"); //ファイル名を画像から取得(通常の表示モード) header("Content-Disposition: inline; filename=message.jpg"); //キャッシュを使用しない header("Cache-Control: "no-cache""); //ヘッダ出力 header ("Content-type: image/jpeg"); //画像出力 imagejpeg ($Img,"",100); //メモリ開放 ImageDestroy ($Img); 完成画像   上のプログラムを実行させると、こんな感じの画像が出力されます。
  • テクログ

    WebGLで遊ぼう

    ※画像をクリックして実際の動作が見れます。chrome 推奨です。 こんにちは、ほひょんです。 いきなり「遊ぼう」でちょっと怒られそうな気がしますが 技術は技術でもユースフルというよりはちょっとインタレスティングのほうがインタレスティングなのでインタレスティングな記事書いてみようかと思います。 なので今回はWebGLについて WebGLとは、 WebGL[1](ウェブジーエル)は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。OpenGL 2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。 WebGLはHTMLのcanvas要素を使う。 と、wikipediaに書いてありました。 ブラウザで3Dを扱う技術です。  で、WebGLをそのまま扱おうとするとなかなかめんどくさいのですが、Mr.doob氏のThree.jsという素敵なライブラリを使うと便利でいいです。(サンプル) なのでThree.jsを使って簡単な立方体を作ってみましょう。 まず、コンピューター上で3Dを表示する概念的なものとして ざっと以下の様な工程が必要になります。(順番は多少前後します。) ・カメラを用意 ・シーンを用意 ・メッシュを作成 ・ジオメトリーを作成 ・マテリアルを作成 ・メッシュをシーンに追加 ・光源を作成 ・光源をシーンに追加 ・レンダラーを用意 ・レンダラーをDOMに追加 ・レンダリング ・必要であればアニメーション まずはHTMLを。 ・Three.jsはこちらよりダウンロードしてください。 ・canvasは内部的に生成されるようです。 three.js 次にjavascriptです。 var width = window.innerWidth; var height = window.innerHeight; var geometry = new THREE.CubeGeometry(150, 150, 150); //立方体作成 var material = new THREE.MeshLambertMaterial({color: 0x00aaaa}); //材質、色 var mesh     = new THREE.Mesh(geometry, material); //上の二行を合わせて「メッシュ」とする mesh.rotation = {x: 0.1, y: 0.5, z: 0.0}; var camera   = new THREE.PerspectiveCamera(40, width/height, 1, 1000); //カメラ作成 画角が40度、距離1~1000までを表示 camera.position.z = -400; //カメラのポジションのZ軸が-400 camera.lookAt(mesh.position); //メッシュの位置にカメラを向ける var scene    = new THREE.Scene(); //シーン作成 scene.add(mesh); //シーンにメッシュを追加 var light    = new THREE.DirectionalLight(0xffffff, 1.5); //光源の色と強さ light.position = {x: 0, y: 0.2, z: -1} //光源の位置 scene.add(light); //光をシーンに追加 var renderer = new THREE.WebGLRenderer(); //レンダラ作成 renderer.setSize(width, height); //サイズ設定 renderer.domElement.addEventListener('mousemove', function(event){ mesh.rotation.x = event.clientX / 100; //メッシュの傾きをマウスに追従させる mesh.rotation.y = event.clientY / 100; render(); }, false); function render(){ renderer.render(scene, camera); //レンダリング } window.onload = function(){ document.getElementById('canvas').appendChild(renderer.domElement); render(); } 下記リンクにサンプルなど網羅されていて参考になりまっせ。 THREE.js Doc こんな感じで簡単に3Dを表示させることができます。 面白いですね! 次はWeb Audio APIについて書いてみようと思いま~す。お楽しみに~