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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    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について以前調査していた時も、知られているようで実はそうでもなさそうに(勝手に)感じたので ツラツラ書いてみました~。 また次回までのネタがあると良いのですが…^^; そんな感じでまた~☆
  • テクログ

    トラブルこそ○○○○○

    大根畑にゴボウが1本。Y原(Webコンサル課)です。   IT技術集団コアテックにおいて取り分けITスキルの低い私、Y原ですが、なんの因果か「技術ブログ」などという高尚な企画の記事を書かせて頂く事となりました。   さてと…何を?どう書くんだ??悩んだ結果、まずはGoogle先生に聞いてみる事にしました。「技術ブログ パソコン IT 技術 記事…」しかし記事を検索して見たところで私に理解できる訳もなく、稀に分る内容があったとしても利用規約には「許可なく転載禁止…」と余計な布石が。。許可を得るにも問い合わせる電話番号も無い…   そんな中ある記事を眼にし、昔の事を思い出したので記事にさせて頂きます。   昔昔…私がCTI(Computer Telephony Integration)と言われる商材を二次代理店として扱っていた時の事です。性質上24時間365日動くはずのシステムなんですがコイツが厄介な事に良く故障するんです。15年以上も前の話ですし、当時のPCなので故障して当たり前なんですがね笑ただシステムが停まるとお客様からそれはそれは凄い剣幕で携帯に電話が来るんです。   そんな中で覚えた激怒する相手の対応術(自己流)をご紹介します。   1.すぐ対応する。  当たり前です。  電車が5分遅れると大騒ぎをする我々日本人にとって、システム復旧を待つほど腹ただしい時間は有りません。  会議中だろうが来客中だろうが飯だろうが寝ていようが直ぐ対応する。  そこに就業時間内も時間外も関係ありません。  トラブル対応優先ですね。  ただしひとつ気にしたい点は「謝り過ぎない事」です。  謝り過ぎるとお客様は保障を要求したり、値引きの材料にしてきたりします。  なにより謝り過ぎる事で「お客さんを不安にさせる」事あります。  謝り過ぎるとお客様は「この手のトラブルは滅多に無いの?なんで俺だこんな羽目に?」ってなります。  どんなトラブルでも、たまにある事のように対応するのが一番かと思います。   2.メーカーのせいする  故障電話と分るやいなや「えー!またですか?!ったく(メーカー名)は、どうしようも無いですねぇ…」  「すぐ対応させますのでちょっと待ってくださ~い」  とむしろお客様側の立場にすり替わる方法です。  ただしメーカー側とも密接な関係を保たないと成り立ちません。  またこれもすぐ対応する事には変りません。  しかしこの手法は自身がメーカーであるコアテックでは使えません。   3.ひたすら謝り続ける。  これは、お客様との関係が相当コジレた時に使います。  「使います」というか謝らざるを得ない状況です。  コチラとしては1分1秒でも早く対応したいところですが、  電話口で「どうすんだよ?!」「いつ直せるか言えよ?!」って10分、20分…  そんな時もひたすら謝ったものです。マインスイーパーをやりながら。。   上記(1.)(2.)は、健全な対応といえますが、問題は(3.)です。相手の性格にもよりますが、普段から豆に電話をしたり、逢って会話をする、飲みに行く等など…日頃のコミュニケーションによって事によって避けられる(3.)も有るようです。また(3.)でも、対応次第では、後に良い具合に繋がる場合も多々ありました。   どんな仕事をしても、トラブルは付き物です。表題の「トラブルこそ○○○○…」の後に続く言葉はいろいろあるようです。トラブルの対応次第で、その人の真価が問われたり、自身が成長したり…エンジニアも営業も同じかと思いますし、トラブルの情報共有は組織にとっても欠かせないと思います。   なんか無駄に字数を稼いだだけな感もありますが、技術ブログはもうこれで最後にして下さいm(__)mスイマセンゴメンナサイ…モウシワケゴザイマセンゴメンナサイ…
  • テクログ

    3分でできるeclipseプラグインの作成方法

    eclipseプラグインの作成方法を簡単にご紹介しつつ、 eclipseに電卓を起動できるボタンを表示するプラグインを作成します。   Pleiades All in One ダウンロードページ(http://mergedoc.sourceforge.jp/)   今回はテンプレートを使用して作成するだけなので、 PDE (プラグイン開発) 3.8.1をダウンロードします。 PHPに特化したプラグインを作成したい場合等は、Ultimateをダウンロードします。   ダウンロードしたファイルを解凍し、eclipse.exeを起動します。   新規プラグイン・プロジェクトを作成します。 File > New > Other...   Plug-in Projectを選択し、Next>ボタンをクリックします。   Project Nameを入力し、Next>ボタンをクリックします。   Next>ボタンをクリックします。   Hello, World Commandを選択し、Finishボタンをクリックします。   このテンプレートを選択することにより、 選択項目のメッセージを表示するメッセージ・ダイアログを開く「サンプル・アクション」を起動する「サンプル・メニュー」(メニューバー)、ボタン(ツールバー)を追加することができます。   他にも、プロパティー・ページ付きプラグイン(Plugin-with a property page)、 エディター付きプラグイン(Plug-in with an editor)等、 用意されている様々なテンプレートが使用して、プラグインを簡単に実装することができます。   Javaパッケージ名、ハンドラー・クラス名、メッセージボックスに表示するテキストを入力し、 Finishボタンをクリックします。   プラグイン・プロジェクトが作成されました。   SampleHandlerクラスが作成されています。   作成したプラグインをデバッグ実行してみると、 ツールバーにボタン、メニューバーにSample Menuが作成されています。   ボタンをクリック、またはSample Menu > Sample Commandをクリックすると、 メッセージウインドウに設定したテキストが表示されました。   ソースを見てみます。   メッセージを変更してみましょう。   デバッグ実行 メッセージの変更が反映されました。   メッセージを表示するアクションを、電卓を起動するアクションに変更してみましょう。   デバッグ実行 電卓が起動されるようになりました。   ボタンがあればいいので、Sample Menuを消してみましょう。 META-INF > MANIFEST.MF > plugin.xmlを開きます。   extension pointとは、拡張ポイントです。 プラグイン開発は、eclipseの既存機能を拡張する形で、 拡張ポイントを見つけて開発していきます。   メニューバーの拡張を設定している部分を削除します。   または、Extensionsタブから、 menu:org.eclipse.ui.main.menu?after=additionsを削除(Removeボタンをクリック)すると、 自動的にplugin.xmlからメニューバーの拡張を設定している部分が削除されます。   デバッグ実行 Sample Menuが消えました。   ボタンの画像を変更してみます。 ※アイコン画像はこちら(http://dots-design.com/)からお借りしました。   iconsフォルダのsample.gifを上書きします。   デバッグ実行 アイコンが変更されました。   では、作成したプラグインを配布できる形式で出力してみます。 File > Export   Deployable plug-ins and fragmentsを選択し、Next>ボタンをクリックします。   プラグイン・プロジェクトを選択し、出力先を入力し、Finishボタンをクリックします。   出力先に指定した場所に、フォルダが作成されます。   フォルダ内にできたjarファイルを、eclipseのpluginsフォルダに移動します。   eclipseを再起動します。 作成したプラグインが表示されています。   今回は簡単なプラグイン作成方法をご紹介しましたが、 ソースが公開されているプラグインを参考にしたり、 他のテンプレートを使用するなどして様々なプラグインを作成することができますので、 皆様も是非お試し下さい♪
  • テクログ

    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ですてきなデバッグライフを!