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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    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について書いてみようと思いま~す。お楽しみに~
  • テクログ

    jQueryとJavaScript3

    今回はjQueryとJavaScriptで入力した文字を精査する処理を 作成したいと思います。 今回は、keypress()・keyup()を使用します。 まず、keypress()・keyup()の書式は $("セレクタ").keypress(function(e) { // 処理A }); $("セレクタ").keyup(function(e) { // 処理B }); keypress()は、キーが押された時に実行したい処理を設定できます。 keyup()は、キーが上がった時に実行したい処理を設定できます。 他にもkeydown()があり、キーが押し下げられた時に実行したい処理を 設定できます。 実行される順序は、基本的にはkeydown()→keypress()→keyup()の順番です。 ただし、押下されたキー、ブラウザ、IMEの状態によっては、 発生しないイベントやイベントの発生順序が異なる場合があるようです。 入力した文字を精査するために、どのキーが押されたかを判別します。 keypress()内でfunction(e)としておりますが、 e.whichでキーコードを取得することができます。 例えば「1」キーを押した場合は「49」を取得します。 この、キーコードを文字に変換してくれるものや 文字を比較してくれるものがJavaScriptに用意されています。 // キーコードを文字に変換 String.fromCharCode(キーコード); // 比較 文字列.match(正規表現); 上記を踏まえて、下記の仕様のサンプルを記載します。 ・数字のみを許可 ・同じ数字は使用不可 ・3桁で終了 $(function(){ $('#number').keypress(function(e) { // キーが押された時 CheckFlg = false; var key = String.fromCharCode(e.which); // 数字以外のキーは許可しない if(!key.match(/d/)){ alert('数字を入力して下さい。'); // 下記で入力文字が消去される return false; } // 同じ数字を許可しない if($(this).val().match(key)){ alert('同じ数字を使用することはできません。'); // 下記で入力文字が消去される return false; } CheckFlg = true; }).keyup(function(e) { // キーが上がった時 // 入力値に問題がない場合 if(CheckFlg){ Number = $(this).val(); // 3桁に達していなければ、何もしない。 if(Number.length != 3) return true; alert('3桁です。'); // 全ての入力文字を消去 $(this).val(''); } }); }); ここで、注意したいのが keypress()・keyup()内で$(this).val()とすれば、 入力文字を取得できるのですが、それぞれのメソッドで取得内容は異なります。 keypress()の場合は、直前に入力した文字は含まれない。 keyup()の場合は、直前に入力した文字も含まれる。 例えば、 最初に「1」を入力 →keypress()では取得できない →keyup()では取得できる 次に「2」を入力 →keypress()では「2」は取得できず、前に入力した「1」のみ取得 →keyup()では「12」を取得できます。 では、また来月お会いしましょう。。。
  • テクログ

    【php】if文四天王

    大根畑にゴボウが1本。php初心者のミネックです。自分がphpを使い初めの頃、社内のスーパーエンジニアのまーさんがこんな事を仰っていました。「phpには、『やりたいな~』と思ったメソッドは、だいたい揃っとるんじゃよ」「じゃからggrば、だいたいの情報は出てくるし、もうホントいかにggrるかじゃよね~。」「ggrスキルはコーダーの実力に直結するのじゃ!」へ~↓ふ~ん↓ぶっ!っと、その時は聞き流し放屁したのですが、仕事を進めていくと、まーさんの仰るとおりになっていったのでした。ので、今回は、phpをやり始めて感心したメソッドを1つ2つご紹介します。あくまで初心者向けなんで、自称中級者どもは、一人でカタカタやってろください。 あなたをifへと誘う!地獄の門番!isset!   isset — 変数がセットされていること、そして NULL でないことを検査する   こいつ、よく見ます。 issetがやられたようだな…is_array!   is_array — 変数が配列かどうかを検査する   アンダースコアが入るからね!アンスコ注意よ!アンスコ! ククク…issetは四天王の中でも最弱…file_exists!   file_exists — ファイルまたはディレクトリが存在するかどうか調べる   へぇ~ディレクトリの存在も調べられるのか…し、知ってたYO! nullごときにやられるとは我ら四天王の面汚しよ…function_exists!   function_exists — 指定した関数が定義されている場合に TRUE を返す   wordpressのプラグインいじってる時に見ました。 おわりに これらのメソッドを使えるようになった時の全能感はヤバかったです。phpって便利だなー。改めて、教えてくださっている先輩方、ありがとうございます。 引用はすべてhttp://jp1.php.net/から