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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    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/から
  • テクログ

    cookie.jsで開閉記憶アコーディオン

    こんにちは。先日jQueryのプラグインで、手軽かつ面白いかなと思うものを見つけました。ご存知の方はご容赦ください。   その名も「jquery.cookie.js」JavaScriptで、簡単に!クッキーを扱えるプラグインです。   今回はこれを用いて、「アコーディオンの開閉状態をクッキーで記憶しておく」サンプルを作成してみました。アコーディオンを開いた状態でページを遷移(更新する等)しても開きっぱなしにしておけるアコーディオンです。   画像やCSSはないのでさびしいですが、サンプルはこちら(GoogleChromeでしか試してないので、動かなかったらすみません...)   ↓参考にさせて頂いたサイトはこちら↓『jQueryを使ったスライド開閉メニューをCookieでコントロールする』 では、解説していきます。   ―――――――――――――――――――――――――――――――――――まずはjquery.cookie.jsの使い方です。 *********************************1.クッキーに値を保存する $.cookie('クッキーの名前', '値'); 2.クッキーの値を呼び出す $.cookie('クッキーの名前'); 3.クッキーを削除する $.cookie('クッキーの名前', null);********************************* 以上です。簡単ですよねヽ(´▽`)ノ   保存する際、第3引数にオプションを持たせることで、保存日数等を指定したりもできるようです。 $.cookie('クッキーの名前', '値', {expires: 7});   ※注意 - クッキー削除時の不具合※上記の削除方法だと、クッキーが削除されない場合があるようです。その場合下記に変更すれば良いみたいです。 $.cookie('XXXXX', '',{,expires:-1}); クッキーの値を空にして、有効期限を過去に指定しています。   ↓参考サイト↓『jquery.cookie|null指定でクッキー削除されないケースあり』   ―――――――――――――――――――――――――――――――――――以上を踏まえまして、アコーディオンを実装してみます。   <html> アコーディオンタイトル0 コンテンツ コンテンツ アコーディオンタイトル1 コンテンツ コンテンツ コンテンツ コンテンツ アコーディオンタイトル2 コンテンツ コンテンツ コンテンツ アコーディオンタイトル3 コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ コンテンツ アコーディオンタイトル4 コンテンツ コンテンツ コンテンツ ※クリックするアコーディオンタイトルの箇所にだけ、クラスを振っています。   <css> .accordion_title { cursor:pointer; } ※カーソルをポインタにするCSSのみ記述しています。   <JS(必要なファイルを読み込む)> 使うのは、2つだけです。・通常のjQueryライブラリ(上)、・jquery.cookie.js(下)   ※2012/11現在、jquery.cookie.jsは配布元に置いていない(?)ようです。下記サイトを参考に入手できます。http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1079503625   ここまでがアコーディオンの準備。次がいよいよ、アコーディオンの動きと、クッキーによる開閉記憶の処理になります。   <JS(アコーディオン処理を書く)> $(function() { /**************************/ /*** クッキーの値を設定 ***/ /**************************/ var cookie = ''; //クッキーが存在する場合、変数に値を設定 if($.cookie('accordion') && $.cookie('accordion') != null) { var cookie = $.cookie('accordion'); } /**************************************/ /*** アコーディオンをひとつずつ設定 ***/ /**************************************/ $('.accordion_title').each(function(index) { /*** クッキー情報から、はじめの開閉状態を判断 ***/ //クッキーが存在しない or クッキーにアコーディオンナンバーがない場合、閉じる if($.cookie('accordion') == null || cookie.indexOf(index) == -1) { $(this).next().hide(); //クッキーにアコーディオンナンバーがある場合、開ける } else { $(this).addClass('opend'); $(this).next().show(); } /*** アコーディオンのクリックイベントを登録 ***/ $(this).click(function() { //「opened」クラスがあれば削除、なければ付与 $(this).toggleClass('opend') //アコーディオンを開閉する $(this).next().slideToggle(); //アコーディオンを開いた(「opened」クラスを付与した)場合、 //クッキーにアコーディオンナンバーを登録 if($(this).hasClass('opend')) { cookie += index; $.cookie('accordion', cookie); //アコーディオンを閉じた(「opened」クラスを削除した)場合、 //クッキーからアコーディオンナンバーを削除 } else { cookie = cookie.replace(index, ''); //クッキーにアコーディオンナンバーがない場合、クッキーを削除 if(cookie.length == 0) { $.cookie('accordion', '', {expires:-1}); } else { $.cookie('accordion', cookie); } } }); }); }); $('.accordion_title').each(function(index) {...});によって、一つ一つのアコーディオンタイトルに「0,1,2...」とナンバーを振っています。「そのナンバーがクッキーに保存されているかどうか」で、アコーディオンの開閉状態を判断しています。   処理の流れは以下になります。   1.ページをロード・クッキーの有無を判断・クッキーがあれば、クッキーに保存されているナンバーを読み込む・読み込んだナンバーを元に、アコーディオンの開閉状態を設定する   2.アコーディオンを開ける・クッキーにナンバーを保存(数字の『文字列』としてクッキーに保存)例)「2」「0」「4」の順に開いた場合、cookie += '2';$.cookie('accordion', cookie); cookie += '0';$.cookie('accordion', cookie);cookie += '4';$.cookie('accordion', cookie);  // $.cookie('accordion')は '204' になります。   3.アコーディオンを閉じる → クッキーからナンバーを削除例)「0」「2」の順に閉じた場合、cookie = cookie.replace('0', '');$.cookie('accordion', cookie); cookie = cookie.replace('2', '');$.cookie('accordion', cookie); // $.cookie('accordion')は '4' になります。   ――――――――――――――――――――――――――――――――――― 以上で、開閉状態を記憶するアコーディオンの完成です!   クッキーの保持状態の確認用として、ページロード時と開閉時にアラートを出すサンプルも用意してみましたので、よければご覧になってください。   アラート付きサンプル   ※最後にご注意※このサンプルでは、アコーディオンタイトルが10個以内(「0」~「9」)のものを想定しています。「10」以上になると、クッキーからナンバーを削除する際、「0」と「1」~「9」の区別がつかなくなるためです。   10個以上を実装する場合、クッキーに保存する文字列が以下になるよう処理を変更します。変更前 : '0121011'変更後 : '[0][1][2][10][11]'   これでクッキーから削除する際も、以下のようにすれば問題なく動作するようになります。cookie = cookie.replace('[0]', ''); (参考サイトでは後者になっています)   ―――――――――――――――――――――――――――――――――――cookieがjsで簡単に扱えることが伝われば幸いです。アコーディオン以外にも広く応用できるだろうと思います。 機会があれば、是非使ってみてください!うっちーでした。
  • テクログ

    【PHP】サーバー変数の取得

    どうも、こちらでは初めまして? 技術ブログお初のエリー@ほしこです。 社内にスンバラシイ情報をお持ちの方々が居る中 持ってる情報もしょっぱいものしかない自分が記事を書くのは少し憚れる所がありますが。。。 中身スッカラカンな脳みそをフル回転して書いていこうと思うんで流してやってください。 さて、今回のテーマはPHPで取得するサーバー情報について。です。 PHPでサーバー情報(例えばホスト名etc…)を取得する際に フレームワークの使用なしの場合、ホスト名を取得する方法としては、 以下のように取得するのが一般的だと思います。 $_SERVER['SERVER_NAME']— 変数がセットされていること、そして NULL でないことを検査する Webサーバー経由の場合、上記の方法で取得する事が多々あると思いますが 作成する機能等によってはそうもいかない時もあります。 (例えばサーバー上で実行するバッチ等。) そうした場合の時に、非常に便利なのはphp_uname()というもの。 php_uname — PHP が稼動しているオペレーティングシステムに関する情報を返す ()内の引数はいくつかありますが、先述のホスト名を取得したい場合は以下のように取得できます。 php_uname('u') php_unameについて以前調査していた時も、知られているようで実はそうでもなさそうに(勝手に)感じたので ツラツラ書いてみました~。 また次回までのネタがあると良いのですが…^^; そんな感じでまた~☆