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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    FILE APIって便利なのね。

    はじめまして、6月入社、新人のクライです。 先日、というか、先程までハマっていたJavaScript関連から、お送りいたします。 HTML5から対応の「FILE API」。これかなり便利です。 このFILE API、指定したローカルファイルのファイル情報やファイルの中身(データ)をJavaScriptで取得できます。 たとえば、画像のプレビューのコードはこんな感じです。   //[HTML側] //ファイルタグ //画像表示するところ //[JS側] //画像プレビューだよ!  $(document).ready(function(){ jQuery.event.props.push('dataTransfer'); $("#input_file").change(function(){  var file = this.files[0]; viewFileContent(file); }); function viewFileContent(file){ if(!window.FileReader){ return; } if(file.type.match(/image/)){ var fr = new FileReader() fr.onload = function(event){ var image_add = $(" ").attr("src", event.target.result); $("#pic_wakuwaku").html(image_add); }; fr.readAsDataURL(file); } } });   と、超簡単に、プレビュー表示されます。 ※これを同じ動きをasp/VBScript/JavaScriptで実装するとなると、とても手間でした。なんとかその部分は出来ましたが。 また、容量(KB)やファイル名、ファイルの種類も簡単に取得できます。 しかし、HTML5からの対応の為、IE9やOPERA10.6等のブラウザでは、FILEオブジェクトが生成されません。 画像のプレビューや簡単な情報をブラウザから取得したい場合には、かなり使えると思います。 これからHTML5が普及していく中で見かける場面も増えてくるのではないでしょうか。 詳しくは、以下のリンクへどうぞ。 「FILE API」参考リンク:http://ascii.jp/elem/000/000/559/559105/
  • テクログ

    レアでモダンなNet Beansでデバッグを完全マスター

    NetBeans でPHPのステップ実行ができる!VBだとよく利用していた、ステップ実行や変数の内容を即時確認。phpでもできちゃうので環境作成しましょう。これでソースにEcho を仕込む必要なし!http://ja.netbeans.org/まずはここから最新版をダウンロードします、NetBeans IDE ダウンロードバンドルリストからPHPを選択10月19日の時点では7.2が最新なのでこのバージョンで説明します。多分そのまま実行すると Java SE Development Kit が無いと言われるのでJDKをダウンロードhttp://www.oracle.com/technetwork/java/javase/downloads/index.html JDKを選択(Java SE Development Kit 9 Update )Accept License Agreement にチェックを入れてWindows x86(32ビット)か Windows x64(64ビット)を選択ダウンロードしたら設定をかえずにJSDをインストール続いてNetBeans IDEもインストール NetBeans IDEを起動すると右下に最新にしてくださいと通知が出るので最新にします次に、xdebugのインストールxampに元から含まれていますが古いので最新版にする必要があります。http://localhost/xampp/phpinfo.phpを開きます画面の内容を [CTRL]+[A]->[CTRL]+[C]で全コピ。画面内容はxdebug以外も全てコピーしてくださいhttp://xdebug.org/wizard.phpコチラのページを開いて先ほどのコピーした内容をテキストエリアに貼り付けて「Analyse my phpinfo() output」をクリック!遷移した画面を下にスクロールするとファイルの最新と修正箇所が表示されます(実行結果↓)上の画面のいみは1. まずファイルダウンロード2. C:xamppphpext に1.のファイルを移動3. C:xamppphpphp.ini を開いて zend_extensionを探す※zend_extension は2個あるので[XDebug] 直下を修正してください。[XDebug];zend_extension = "C:xamppphpextphp_xdebug.dll"zend_extension = C:xamppphpextphp_xdebug-2.2.1-5.4-vc9.dllこんな感じで修正4. 保存したらアパッチ再起動実行構成カテゴリの設定 Net Beansにもどってファイル(F)→プロジェクトプロパティを選択ソースカテゴリの設定   ツール→オプションを開きPHP→デバッグ最初の行で停止のチェックを外す、これにより起動する毎に一時停止しなくなります。   設定が終わったら実行です。 ツールバーに三角とリストがいっしょになってるボタン(右側)を押します。(または[ctrl]+[F5]) するとと変化してテスト実行開始 あらかじめ、行番号の所をクリックしてブレークポイントを指定しておきます。 プログラムが指定の行に達すると、自動でストップしますそこで1行ずつ実行したり変数の中身をみたり。 1行ずつ実行(=ステップ実行)も他の関数の中にどんどん入っていく([F7])か、現在表示しているソース内で移動する([F8])かを選ぶことが出来ます。 説明しずらいのですが使ってみるとすぐに理解できると思います。   実行中は現在使われている全ての変数と内容が一目で確認可能となっています。  $sort_idには”000000000025”が入っていて、$sort_idsは6個の配列になっているのがわかります。 変数名の前にある「+」を押すと配列の中を展開して表示されます。   注意点として デバッグ実行中にソースを変更しても反映されません。 修正したソースは保存しなければ正しく動作しません。   以上で説明は終了となります。Net Beans + Xdebugですてきなデバッグライフを!
  • テクログ

    Dreamweaverのショートカットを使いこなす

    どうもどうも! 今回はDreamweaverのショートカットを覚えましょう、というお話です。   デザイン課の皆様なら日々使っていると思いますが、細かい部分では使いこなしているでしょうか?   ショートカットを頭に入れておけば、かなりの手間が省けたりします。   ctrl + 1(~6) = 見出し(h1~h6)の挿入ctrl + shift + p = pタグの挿入ctrl + alt + t = テーブルの挿入ctrl + alt + i = 画像の挿入ctrl + b = strongタグの挿入ctrl + i = emタグの挿入shift + enter = brタグの挿入   この辺を覚えるだけでもかなり手間が省けます。   …知らなくていちいち手で打ち込んでいた人、全部覚えてってくださいNE!(´ε`;)   ctrl + shift + space で   も入れられたりします。 びっくりデスね!   また、手打ちじゃ面倒くさいテーブルの制御もショートカットで出来ます。   ctrl + m = 行の追加ctrl + shift + a = 列の追加ctrl + shift + m = 行の削除ctrl + shift + - = 列の削除   あとはこんな事も… 是非ともマスターして作業効率化をしていきましょう。
  • テクログ

    jQueryとJavaScript2

    今回はjQueryで「ツールチップ」を作成したいと思います。 「ツールチップ」はマウスポインタを当てると 吹き出しのように文字が表示されるものです。 本ページの右側にある「テクログ」へのリンクなどで使用しています。 通常「ツールチップ」はアンカータグのtitle属性を使用すれば、表示されます。 ほげほげ 今回は、hover()・fadeIn()・fadeOut()を使用します。 まず、hover()の書式です。 $("セレクタ").hover(function() { // 処理A }, function() { // 処理B }); hover()は、指定したセレクタにマウスポインタが 当たったときや外れたときに実行したい処理を設定できます。 上記により、指定したセレクタにマウスポインタが当たると 第一引数の「処理A」部分が実行されます。 マウスポインタが外れると、第二引数の「処理B」部分が実行されます。 次に、fadeIn()・fadeOut()の書式です。 // フェードイン $("セレクタ").fadeIn(1000); // フェードアウト $("セレクタ").fadeOut("slow"); fadeIn()・fadeOut()はそれぞれ指定したセレクタを フェードイン・フェードアウトさせてくれます。 fadeIn()・fadeOut()の引数は、アニメーションが完了するまでの時間を設定でき、 「"slow"」「"normal"」「"fase"」もしくは「ミリ秒」を指定できます。 何も指定しなければ「"normal"」となります。 「ミリ秒」を指定する場合は、数字のみの指定ですので注意して下さい。 ちなみに、 「"slow"」 は 600ミリ秒 「"normal"」は 400ミリ秒 「"fase"」 は 200ミリ秒 になります。 これらのメソッドを用いたのが、下記になります。 ほげほげ 表示したい文字 //  cssの指定によって、自分好みの「ツールチップ」を作ることができます。 では、また来月お会いしましょう。。。
  • テクログ

    ブルースクリーンが出ても慌てない様にするために

    はじめまして、とっきーです。 技術ブログ初登場だというのに色々と仕事が入ってきてしまい、殆んど仕込みも何も出来ていない状態です。 なので余り突っ込んだ内容が書けない事をご容赦下さい。   さて、Windowsで作業を行なっている時にいきなり何の前触れもなく画面が青くなり、訳の分からないメッセージが表示されることはありませんか? 自分はWindows XPを使っていた頃はごくたまにありました。いや、むしろ、仕事でWindows XPでドライバーの相性とかそういったものを検証する時によく見ました。 それはさておき、この様な現象を画面の色を表して「ブルースクリーン」と言いますが、普通はこういう事なんて早々起こりうることはないので、起こった時にはちょっとしたパニックを起こすことかと思います。 しかし、このブルースクリーンはある部分を確認すれば大抵の原因がわかってしまいます。 それはどこかといいますと「STOP」と書いてある横にあるコードなんですね。 所謂、 STOP: 0x0000008E (0xC000001D, 0xBF9E797C, 0xF7B379DE, 0x00000000) と表記されているところです。 ここの「0x0000008E」の部分のコードを調べると大抵はブルースクリーンが発生した原因が判ります。 この場合だと、「カーネル モード プログラム にハンドラでキャッチできない例外が発生した」事を表していますが、これでは「何?それ」とおもいますので、ネットでもっとかいつまんで調べてみると「プログラムが不適切なメモリ アドレスを参照したときに発生」→「メモリやページングファイルのエラー」である事がわかるはずです。 この場合の対処法としては「ページングファイルを消す」等が挙げられるので、その対応を行えば出なくなる(筈)です…と言った具合にSTOPの横に出ているコードが判ってしまえば後はそのコードを頼りに調べていけば自ずと対処法がわかる、と言う感じです。 このSTOPの横に出ているコード(STOPエラー)の一覧は、こちらを御覧下さい。   と言う訳で、今回は技術的なもの、と言うよりは困ったときに知ってると便利かも、的な話題で申し訳ありません。 次回はもう少しきちんとした内容のものを準備したいと思いますので、ご勘弁を。  
  • テクログ

    受信メールの解析について1

    こんにちわ。パグ(▼・(エ)・▼)です。 技術ブログ自分回以外での更新ですが、 鬼ぶちょうのOKが出たので、きまぐれに更新します。 最近業務でメールの解析業務があったので、忘れそうなとこを備忘録として残そう!と思いました。 技術で分からない点があるときは、私としても、ネットをウロウロして 近い事象を探したりするものですが、今回はこの例はバグる!!って話をします。 所々間違いがある場合は「間違ってやがる・・・うぷぷ」とか心の中で思うなり、 弊社お問い合わせ(https://core-tech.jp/)にご連絡いただけると嬉しいです。 解析はPEARのMimeDecodeで行いました。 使用したモジュールは ・Mail/mimeDecode.phpです。 今回検証した媒体は ・WEBメールだと  google  msn  yahoo ・PCのメーラー ・ガラケー(au,docomo,softbank) ・スマホ(iphone,アンドロイド)です。 簡単に検証した内容についてですが、 上記の媒体のうちどれかからメールが送られてきて、受信したメールを 解析し、保存するってとこまでです。 まずはメールを解析するところなんですが、メールというのは大きく分けて (大多数の)添付なしメールのシングルパート (大多数の)添付ありメールのマルチパートに分かれています。 サーバーに送られてきたメールデータをメモ帳やvmで開いてみると、興味深いことが分かります。 (上部省略) From: XXXXXX@XXXX.ne.jp         (送り元) To:   XXXXXX@XXXX.ne.jp         (送り先) Subject: =?iso-2022-jp?B?GyRCJCIbKEI=?= =?iso-2022-jp?B?GyRCJCsbKEI=?=   =?iso-2022-jp?B?GyRCJDUbKEI=?= =?iso-2022-jp?B?GyRCJD8bKEI=?=   =?iso-2022-jp?B?GyRCJEolIhsoQg==?=     =?iso-2022-jp?B?GyRCJSsbKEI=?=   =?iso-2022-jp?B?GyRCJTUbKEI=?= Message-ID:  MIME-Version: 1.0 Content-Type: text/plain; charset="iso-2022-jp" Content-Transfer-Encoding: 7bit メール本文 これはシングルパートのメールになります。 見ればすぐに分かると思いますが、構造がすごく単純になってます。 次はマルチパートのメールについてです。 (上部省略) From: XXXXXX@XXXX.ne.jp         (送り元) To:   XXXXXX@XXXX.ne.jp         (送り先) Subject: =?iso-2022-jp?B?GyRCJCsbKEI=?= Message-ID:  Date: Thu, 4 Oct 2012 15:39:15 +0900 Mime-Version: 1.0 Content-Type: multipart/mixed; boundary="-----=_NextPart_39325_15894_57999" -------=_NextPart_39325_15894_57999 Content-Type: text/plain; charset="iso-2022-jp" Content-Transfer-Encoding: 7bit メール本文 -------=_NextPart_39325_15894_57999 Content-Type: video/3gpp; name="121003_2001~01.3gp" Content-Transfer-Encoding: base64 Content-Disposition: attachment; filename="121003_2001~01.3gp" AAAAIGZ0eXBrZGRpAAAAAGtkZGkzZzJhM2dwNTNncDQAAAAkdXVpZG12bWyojBHUgZcAkCcIdwMA AAAA///oBcyRy4QAAAA8dXVpZGVuY2mojBHUgZcAkCcIdwMAAAAAS0RESS1TTgBXNjRTAAAAAFNO (以下省略) マルチパートメールは添付ファイルもこの文字列に凝縮されています。 添付したファイルはバイナリ型で保存されています。 「Content-Type: video/3gpp; name="121003_2001~01.3gp"」 が添付ファイルです。 添付ファイルが複数添付されている場合はその分 -------=_NextPart_39325_15894_57999 Content-Type: video/3gpp; name="121003_2001~01.3gp" AAAAIGZ0eXBrZGRpAAAAAGtkZGkzZzJhM2dwNTNncDQAAAAkdXVpZG12bWyojBHUgZcAkCcIdwMA(以下略) -------=_NextPart_39325_15894_57999 Content-Type: video/3gpp; name="121003_2001~02.3gp" AAAAIGZ0eXBrZGRpAAAAAGtkZGkzZzJhM2dwNTNncDQAAAAkdXVpZG12bWyojBHUgZcAkCcIdwMA(以下略) こんな感じで区切られています。 このうちこの部分が Content-Type: video/3gpp content-type の「ctype_primary/ctype_secondary」って言います。 添付ファイルの解析方法について検証をかさねた結果、あちこちのサイトでありがちな こんな書き方だとプログラムがバグるということがわかりました。 switch(strtolower($this->structure->ctype_primary)) { case "text": // シングルパート(テキストのみ) 処理 break; case "multipart":  // マルチパート(画像付き) 処理 break; これです!!調べた3サイトのうち2サイトがこんな検証方法を使用していました。 ctype_primary に入ってる値が必ずしもtext 、multipartとは限らないのです。 画像つきでもmultipartじゃなくてtextのほうに入ってるときがあるんですよ。ガラケーの特定機種なんですが、 textしかないからって「これはシングルパートメールなんだね☆」って判定しちゃうのは危ないことです。 次にこんな書き方を良く見ます。 //添付ファイルの拡張子を取得する $type = strtolower($part->ctype_secondary); //ファイルネームを作成する。 $file_name = date("YmdHis") . "." . $type; ctype_secondaryで拡張子付けちゃう人が多いですけどね・・・\(^o^)/これは大きな間違いです。 必ずしもctype_secondaryが拡張子になるとは限らないからです。WEBメールから送信した場合なんかは octet-streamやx-msvideo、alternativeになったり、iphone から送信した場合3gppなんかが ctype_secondaryに入ってきたりしますので、そのまま出来たものとして嬉々として公開するとバグります。 改修を行ったプログラムがまさにこの状態で( ՞ਊ ՞)コノヤローってなりました。 なら、どうしたら判断できるのか? まず、シングルパートなのかマルチパートなのかって判定方法はあきらめることです。 シングルパートなのか、マルチパートなのかってことよりも、添付ファイルがあるのかないのか? ってことを考えましょう。もちろん、添付ファイルが更にデコレーション系絵文字なのかどうか、 なんてことも判定可能です。 そんでもって、拡張子なんて元のファイル名の「.」以降からとっちゃえばいいですね。 ワザワザ別枠からとる必要がないってことです。 ちなみにこのサイトのコードは非常に秀逸でしたので、参考にして作りましたあ。 http://d.hatena.ne.jp/ya--mada/20080415/1208318475 マルチパートだとここにalternativeなどの意味が書いてあってよかったです。 http://www.atmarkit.co.jp/fnetwork/rensai/netpro04/netpro01.html 今回ネット情報は結構あてにならない!と思いました。内容はあくまで、とっかかりや参考程度に考えて、ちゃーんと検証して、修正してからリリースしましょう。次回もメールの解析を行います☆ 次回ブログアップはいつになることやら~。 ではでは、パグでしたぁ~ヽ(・∀・)ノばいばいぷぅ☆ミ