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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    nvmからNode.jsをインストール~Expressでアプリの雛形をつくる

    おそくなりましたほひょんです。 前回Node.jsのこと書くと決めてたので Node.jsをインストールした手順でも書いておこうかと思います。 さくらさんのVPSに入れました。 まずはnvmをインストールしました。 nvmとはNode Version Managerというのnodeのバージョン管理システムでnodeのバージョンを簡単に切り替えできて便利です。 $ git clone git://github.com/creationix/nvm.git ~/.nvm インストールできました。 使えるようにします。 $ source ~/.nvm/nvm.sh ヘルプを表示してみます。 $ nvm help ログインするたびに $ source ~/.nvm/nvm.sh しなくていいように.bashrcに設定しておきます。 $ vim ~/.bashrc if [[ -s ~/.nvm/nvm.sh ]]; then  source ~/.nvm/nvm.sh fi 反映させます。 source ~/.bashrc いよいよ、nodeのインストールです。 $ nvm install v0.10 インストールされているnodeのバージョンを確認します。 $ nvm ls nodeを使えるようにします。 $ nvm use v0.10.1 nodeのバージョンを確認 $ node -v Node.jsにはREPL(Read-Eval-Point-Loop)と呼ばれる対話型評価環境というものが使えます。 $ node とすれば「>」がでますのでブラウザのwebインスペクタのコンソールのように使えます。 REPLで下のように打ち込んで実行してもwebサーバーが立ち上がります。 var http = require('http'); http.createServer(function (req, res) {   res.writeHead(200, {'Content-Type': 'text/plain'});   res.end('Hello Worldn'); }).listen(1337, '127.0.0.1'); //ローカルホストの場合 話をもどしまして、npmというnode パッケージマネージャも入ってると思います。 バージョンを確認 $ npm -v npmからsocket.ioとかexpressとかをいれてみます。 $ npm install socket.io express -g あとからhttp-proxyとかforeverとかもいれました。 $ npm install http-proxy forever -g いよいよexpressフレームワークを使って雛形を作ってみます。 任意の場所で $ express sample とするとsampleの下に必要なものが生成されます。 次にsampleの下に移動して依存するモジュールを入れます。 $ cd ./sample $ npm install -d これで、一応雛形完成なのでアプリを立ち上げてみます。 $ node app.js expressのデフォルトのポートは3000なので ブラウザからhttp://ドメイン:3000でアクセスして下の画面が表示できたら成功です。真っ白ですね。 
  • テクログ

    wordpressのおすすめプラグインについて

    ご機嫌いかがでしょうか??隅田川花火大会残念ながら雨で中止になってバイクで濡れながら見に行ったぬまっちです。 CMSを使い、ウェブサイトを作る方は近年増え続けていると思います。 私もCMSでサイトを制作したりしますが、その中でよく使われるwordpress。 wordpressは使用料無料で初期費用はまったくかからずさらにプラグインも充実しているCMSです。 今日はそのwordpressのおすすめプラグインをご紹介したいと思います。 All in One SEO PackSEO対策用プラグイン WP-PageNaviページネーションが表示されるプラグイン Ktai Styleモバイルガラケーに対応しているプラグイン Lightbox 2Lightboxによる画像エフェクトを行えるプラグイン。 Contact Form 7お問い合わせフォームの知識がなくても簡単に実装できるプラグイン 他にも便利で実装のお手伝いするプラグイン達がたくさんいます。 今後便利なプラグイン開発に挑戦してみようか検討中です。
  • テクログ

    64bit版CentOS 6 にSentryをインストール

    エラートラッキングツール sentry とは何か? 利用方法などは下記をご参照ください。https://core-tech.jp/gijutsublog/2013/05/10/1385今回CentOS 6 上での検証で下記サイトを参考にさせて頂きました。参考サイトの管理人様、ありがとうございました。参考サイトhttp://madroom-project.blogspot.jp/2013/04/ubuntusentry.html公式 https://sentry.readthedocs.org/en/latest/quickstart/index.html#install-sentryCentOS6 でのインストール手順のみ記載させて頂きます。これより下は実際に実行したコマンド中心に記載させて頂きます。CentOS5 では Python 2.5 よりも古いバージョンだったため、64bit版CentOS 6 で環境作成しました。最初は CentOS5 でPythonなどの「tar.gz」ソース・パッケージの新しいバージョンのインストールを試みました。依存エラー、ワーニングを1つ解消しても、また次の新たなエラーが発生し、時間を掛けすぎてしまったため、CentOS 6 で作成することにしました。各コマンドの意味は公式ページご参照お願いします。 (1) 下準備  必要なパッケージをインストール--->環境,バージョンごとに異なるので都度ご確認ください。CentOS では python-dev 該当無しで、python-devel というパッケージ名でした。パッケージ名: python-devel-2.6.6-36.el6.x86_64パッケージ名: MySQL-python-1.2.3-0.3.c1.1.el6.x86_64パッケージ名: python-virtualenv-1.7-1.el6.noarch#virtualenv /var/www/sentry/#source /var/www/sentry/bin/activate(2) Sentryのインストールと設定#easy_install -UZ sentry#sentry init#vi /root/.sentry/sentry.conf.py(3) DBを作成mysql> create database sentry;mysql> quit(4) supervisor インストール#yum --enablerepo=epel install -y supervisor#cd /etc/#cp -p supervisord.conf supervisord.conf_org#vi supervisord.conf(5) Sentryをサービスとして起動 #supervisord -c /etc/supervisord.conf#/usr/bin/supervisorctl status
  • テクログ

    AJAXって非同期通信じゃないの?

    こんにちわ。パグ(▼・(エ)・▼)です。 連投よっしゃ。 最近AJAXって非同期じゃなくても通信できるようになってるらしいので、 そんな内容で書きます。 そもそもAJAXってなんだろうって所なんですけど、 http://ja.wikipedia.org/wiki/Ajax ウィキペディアから持ってきました。 【Ajax(エイジャックス、アジャックス、アヤックス[要出典])は、 ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称。 XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による 非同期通信を利用し、通信結果に応じてダイナミックHTMLで 動的にページの一部を書き換えるというアプローチを取る。】 はい!わかりにくい!! 私が非同期じゃないじゃん!!って疑問に思ってたのは、AJAXの中でも、 Jqueryの$.ajaxってメソッドのことです。 そもそもウィキペディアを読んでもよくわからない人向けに WEBのことを簡単に説明すると、AJAXっていうのは、 フォームを「submit」しなくても、一部だけ通信と再表示ができる技術の総称です。 WEBっていうのは、画面のsubmit をしたときに、POSTやGETで通信をして、 対象画面を呼び出して(まるまる更新して) 処理を連続させるのが一般的ですが、 一部分だけ更新したい場合があった場合、画面全体は更新かけたくないんだけど、 一部分だけ、別処理したい。 そんなときにその箇所だけifreameでいちいち作るのは、 面倒だしデザイン的におかしくなったり・・・問題がいっぱい。 「そんな時に便利なのが、AJAXです。」 たとえば、 上のチェックボックスを選択すると、 下のリストにDBから選択したチェックボックスに応じて表示をしたい。 でもリストだけ変えたいだけなので、 submitして画面全体を再描画するのは、ひどく非効率的です。 「そんな時に便利なのが、AJAXです。」 たとえば、 ファイルアップロードして、 今アップロードしているファイルを確認画面に遷移せずに 今の画面に表示させたい。 「そんな時に便利なのが、AJAXです。」 はい。AJAXのことわかってきましたか? 非同期通信じゃなくて、文字列処理とか、jsで苦手な部分はASPやPHPでやって~ んでJqueryに戻すってのも、$.ajaxならできちゃうんです!!!!! そういった処理を行う際に、JQueryの$.ajaxを使うことがあります。 ほかにも$.postとか$fileとかいろいろありますが、 今回はシンプルに$.ajax。 私の改修したプログラムの場合(簡易に書いてます) $function(){ $("#button").click{ text1がエラーの場合return false; text2がエラーの場合return false; /************ここから追加した部分↓↓ 両方Trueの場合{ $.ajax{ ここで処理 } return ture; } /************ここから追加した部分↑↑ } }); 上記の様な状態になっておりました。 外部APIに接続するために、Jsでエラーチェックをして、エラーだった場合、 return false;をして、Formの送信をキャンセルしているって言う状態。 当然ですが、$.ajaxの処理が終わる前に、 return trueされてしまうと、submitが走ってしまい、 外部APIに接続され、Form自体がなくなってしまいます。 すると、$.ajaxの処理が途中でキャンセルされ、処理が最後まで行われません。 通信状態にもよりますが、$.ajaxが終わるまで処理はまってはくれないのです。 大概Return のが早いです。 こんなときに便利なのが「$.ajax」を「同期」にして、処理を行うという方法。 リスクとしては、「$.ajax」内で行っている処理が無限ループしてしまった場合など、 起動時画面がロックされてしまい、固まった状態で止まってしまうことです。 ですが、$.ajaxを同期通信にすれば、$.ajaxが終わるまで、処理は次にはいきません。 よって、$.ajaxで呼び出している処理が終わるまで、次の処理は走らないのです。 今回はメール送信処理で、そんな状態には陥らないので、「同期」にして処理しました。 書き方としては、以下 $.ajax({ async:false, contentType: "application/x-www-form-urlencoded; charset=utf-8", url: "path/XXX.php", type: "POST", data: { XXX:'XX' } }); async:falseをfalseにするだけ。 tureにすると非同期になりますが、デフォルトtrueなので、書く必要ないかと思います。 $.ajaxで連鎖させたいなら、 complete内で、fanctionを作ってやる必要があるかと思いますが、 画面に戻さないで、先に処理したいときになんかは特におすすめの処理方法です。 たまに、AJAXがぜんぜん呼び出されなくて・・・とはまりまくってる人がおりますが、 そんなときはFireFoxのFireBugでコンソールを見てみてください。 「Firebugコンソールのすべて」で 「POST http://XXXX/XXXXX」200」 AJAX通信は成功しています。つまりJavascriptでの記述ミスはないわけです。 つぎにエラーでJsエラーがでているとき、 これはJavascipt側でエラーが出ています。Jsファイルを見直してください。 「POST http://XXXX/XXXXX」404」のときは、ファイルが見つかってません。 AJAXで処理したいファイルをjs側で指定していると思いますが、 ここの記述が間違っています。 最後に「POST http://XXXX/XXXXX」500」が出ている場合、 これは確実に、内部サーバーエラーつまり呼び出し先のプログラムのミスでしょう。 ちなみにPOSTが送られているかどうかもFireBugでみることが可能です。 POST通信の場合POSTというタブが表示されるので、POSTでパラメータ値が表示されていれば、 大概送れてはいます。もし、ここが、空白の場合、 それは、文字化けして送れてない可能性があります。Jquery側の設定や、Form、ファイルの 文字コードを調べましょう。 ではFireBugのPOSTで表示されているのに、呼び出し先で受け取れない場合、 呼び出し先ファイルの文字コードを疑いましょう。 AJAX通信ときくと、ちょっと難しそう・・・と思われガチですが、 FireFox+Firebugで開発途中の問題の切り分けは簡単にできますし、 Jqueryを使えばなれると簡単にしかもぬるぬる動くWEBサイトが作れます。 ぜひ敬遠せずに使ってみてください★ では、パグでしたぁ~ヽ(・∀・)ノばいばいぷぅ☆ミ
  • テクログ

    スマホのモバイルシミュレーターの使い方

    こんにちわ。パグ(▼・(エ)・▼)です。 暑いです。暑くて溶けそう。溶けそうで、定期的に更新しようと 思っていた技術ブログを溜め込んでいたので放出します。 最近はスマートフォン対応というものがWEBでは多くて、 PC用画面をスマホ用にするやつです。 お客様によっては1px程度の調整を要求される場合もあったり・・・ 画面デザインのテストで、CSSの確認をしたい時に、 FTPでサーバーにあげて・・・テスト端末で開いて・・・ って手順はとても面倒です。そんな時にはシミュレーターを使いましょう。 勿論、シミュレーターなので、実機でみると画面が崩れた! なんて事もあります。 が、しかし、 正しいCSSで組んであれば、 実はシミュレーターでも崩れませんし、実機でも崩れません。 画面崩れを指摘すると、 「シミュレーター側で崩れているのは、実機では大丈夫です!」と 自信ありげに答える子が多いですが、多少の崩れはあるものの、 実は、シミュレーターで崩れないものは、 様々な機種で試しても、崩れない状態の事が多いのです。 また逆もしかりで、シミュレーターで崩れてなかったのに、 実機で見ると崩れるっていうのはCSSが適切に組めていない証拠です。 (ややマージンがずれてるとかは勿論ありますが) ロジック側のコーダーはCSS+HTMLのプロではないので、 CSSが苦手な人が多いので、裏側の複雑なロジックはさくっと組めるのに、 CSS+HTMLに鬼はまりして時間が経過していったりします。 iphoneでは~なのに、Andoridでは~なった・・・ っていうのは、実際シミュレーターで見てみると、 ぐちゃぐちゃ・・・なんて事が多いです。 適切なCSSの組み方をして、あらゆるシミュレーターで確認したものを、 実機で確認すると、シミュレーターと実機、iphoneとAndoroidの見た目に、 大きな差が出ないと思いますよ! 実際デザイナーさんに組んで頂いたCSSは大抵シミュレーターでの 崩れはほとんどありません。 それが、開発課とデザイン課の差か!!!と思うほど。 そんな訳で、私もやや複雑なデザインを組む時は、シミュレーターで しっかり表示される状態にしてから、実機で微調整を行います。 では、シミュレーターの使い方です。 まず、FireFoxの場合、 ツールのアドオンからアドオンの入手で、 Firebugをインストール そうすると、ツール内にFireMobileSimulator というものが入るので、そこから見たい端末にしてクリック。 もうスマートフォンの見た目になります。 次にSafariです。シミュレータでは最も秀逸かもしれません。 大規模なSP開発の際は必ず使用しています。 ブラウザの幅によって、表示がされるので、ブラウザ幅の縮尺で、 縦のデザイン、横のデザインの確認が可能です。 safariのシミュレーターは編集>設定>詳細のタブで、 メニューバーに開発メニューを表示を押します。 そして、開発メニューが表示されますので、ユーザーエージェントから 端末を選択します。 縦横もブラウザ幅で確認できます~。 最後にChromeです。 Chromeはちょっと分かりにくい所にあります。 F12キーを押して開発用のメニューを開いてください。 その後右下にあるねじのマークをクリック overrides>UserAgentを選択します。すると、表示がかわります。 FireFoxのシミュレーターはCSS3に弱いので、ドロップシャドウなんかが うまくでませんが、Safariのシミュレーターだとちゃんと表示されます。 また角丸なんかも、Safariのシミュレーターのが良いようです。 逆にFireFoxではfloatを使った時のイメージがしっかりでるようです。 floatごりごりの画面の微調整は、FireFoxで行っています。 実機で、うまく表示「できてるように見える」要素の組み方をせず、 きちんと要素ごとの位置を決めてあげて、古い機種、新しい機種でも 崩れないものを作りたいときは、是非、 色々なエージェントで試してみて、最終的なテストは実機で行って、 開発効率をあげてくださいね★。 では、パグでしたぁ~ヽ(・∀・)ノばいばいぷぅ☆ミ
  • テクログ

    listにfloatかけたら崩れたとき

    こんにちは。デザイン課のいまべぇです。webのデザインをするようになってまだまだ日が浅い私ですが、デザインもさる事ながらやはり苦戦するのはコーディングです。そこで、最近の案件で私がコーディングの際に困ったことについて書いてみようと思います。 このサイトのジャンル項目部分ですが、<li>タグにcssで{float: left;}をかけています。 ところが、FirefoxやIE8.9.10ではちゃんと表示されるのですが、IE7で崩れてしまいます。  そこで、{white-space:nowrap}をCSSに書き込んであげると、IE7でも崩れません。 ソースはこんな感じです。 【html】 和食 洋食 中華 イタリアン・フレンチ 焼肉・韓国料理 ダイニングバー 各国料理 居酒屋 そば・うどん スイーツ カフェ ラーメン パン 【CSS】 .section ul li { float: left; margin: 0px 10px 7px 0px; white-space:nowrap /*IE7対策 */ } コーディングを始めたばかりの頃はこういう事でよくつまづいていた気がします。まだまだ勉強中ですが、これからも精進していこうと思います。