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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    jQueryとJavaScript1

    ひょんなことから毎月1回の計5回にわたって 連載を行うことになりました。 連載内容(予定)ですが、jQueryやJavascriptについてを記載し、 最終回には、これまでの内容を駆使したちょっとしたゲームを作成する予定です。 今回はjQueryのセレクタについての豆知識を記載します。 まず、jQueryの構文です。 // 書式 $(セレクタ).メソッド(引数); // 例 $("div").text("あいうえお"); 次にセレクタの主な指定方法を記載します。 // 指定されたHTML要素 $("要素") // 指定されたid属性を持つ要素 $("#ID名") // 指定されたclass属性を持つHTML要素 $(".クラス名") // 要素1内にある要素2 $("要素1 要素2") // 要素1と要素2 $("要素1,要素2") 属性に関する指定もすることができます。 // 指定された属性が指定された値を持つ要素 $("[属性='値']") // 指定された属性が指定された値を持たない要素 $("[属性!='値']") // 指定された属性が指定された値で始まる要素 $("[属性^='値']") // 指定された属性が指定された値で終わる要素 $("[属性$='値']") // 指定された属性が指定された値を含んでいる要素 $("[属性*='値']") 特定の要素を取得したい場合は、下記のようなフィルタがあります。 // 指定された要素の最初の要素 $("要素:first") // 指定された要素の最後の要素 $("要素:last") // 指定された要素の偶数番目の要素 $("要素:even") // 指定された要素の奇数番目の要素 $("要素:odd") // 指定された要素の指定された番号の要素 $("要素:eq(番号)") // 指定された要素の指定された番号より前の要素 $("要素:lt(番号)") // 指定された要素の指定された番号より後の要素 $("要素:gt(番号)") いろいろな指定ができるセレクタですが、 パフォーマンスを考慮するのであれば、下記のように指定して下さい。 ●単一要素を取得する場合 ・ID指定できる場合は、ID指定にする。 $("#ID名") ・ID指定できない場合は、要素で絞り込んだ上で、クラス名や属性を付ける。 $("要素.クラス名") $("要素[属性='値']") ・クラス名だけでの指定はなるべく避ける。 $(".クラス名") // この指定方法は避ける ●複数要素を取得する場合 ・スペースで要素を絞り込むよりも、findメソッドを使用する。 $("#ID名 要素") // この指定方法は避ける // 下記のように指定する $("#ID名").find('要素') ●同一要素を使用する場合 ・要素を変数にして使用するか、メソッドを「.(ドット)」でつなげる メソッドチェーンを使用する。 $("セレクタ").メソッド1(); $("セレクタ").メソッド2(); $("セレクタ").メソッド3(); // この指定方法は避ける // 下記のように指定する var hoge = $("セレクタ"); hoge.メソッド1(); hoge.メソッド2(); hoge.メソッド3(); // メソッドチェーン $("セレクタ").メソッド1()             .メソッド2()             .メソッド3(); 次回からはゲームで使用するjQueryのメソッドについて記述したいと思います。 では、また来月お会いしましょう。。。
  • テクログ

    apache(XAMPP)のvhostsの設定について

    こんにちわ。パグ(▼・(エ)・▼)です。 まだ先だと思って油断してたら、投稿日になってしまいました・・・。 本日は、apacheから、バーチャルホストの設定方法を書いてみたいと思います。 ちなみに、実際のサーバーではもう少し細かく色々設定が 入ってきたりするので、あくまで、ローカルXAMPP上でのapacheの設定という前提をお忘れなく。 まず始めにパグの環境と、XAMPPバージョンは以下の通りです。 XAMPPインストール先ディレクトリ:Cドライブ直下 XAMPP 1.7.7 [PHP: 5.3.8] さて、バーチャルホストって何かというと、一つのサーバーに複数のホスト名(ドメイン名)を 割り当てて、複数サイトを管理・運営するための技術です。 XAMPPを入れた時に初期の設定では「localhost」と打ち込むか、XAMPPControlパネルから Apacheのadminボタンを押下すると、  こんな画面が表示されます・・・。 このXAMPP apacheに新しくWEBサイトを追加したいと思います。 じかにC:xampphtdocs配下に新しいプロジェクトを作成出来る人はよいのですが、 ecripsなどでSVNからファイルをとってきた場合、最初のディレクトリ構成が C:xampphtdocsプロジェクト名branshes C:xampphtdocsプロジェクト名tags C:xampphtdocsプロジェクト名trank 上記のように分かれていて、初期画面が更にtrankの下の下の下の・・・・ なんて深い階層になっている時があります。 新しくSVNから取得したこのサイトなんですが、トップページを表示させるためのURLが非常に複雑です。 実際の階層をみてみると・・・  C:xampphtdocsプロジェクト名trunksrcpublic このように、トップページがhtdocsのかなり下にあるのが分かります。 このままでも表示はされますが、都度、このURLを入力するのは面倒です。 「http://localhost」のように「http://test(任意の名前)」で表示できた方が便利だと思いませんか? そんな時に役立つのが、このバーチャルホストって技術です。 ではapacheの設定ファイルから変更していきます。XAMPPのC:xamppapacheconfextraというディレクトリ 配下にある「httpd-vhosts.conf」というファイルを開いてみてください。メモ帳やテキストエディタで開く事ができます。 インストール直後はこんな感じになってます。(以下) (上部省略) ##NameVirtualHost *:80 # # VirtualHost example: # Almost any Apache directive may go into a VirtualHost container. # The first VirtualHost section is used for all requests that do not # match a ServerName or ServerAlias in any  block. # ##     ##ServerAdmin postmaster@dummy-host.localhost     ##DocumentRoot "C:/xampp/htdocs/dummy-host.localhost"     ##ServerName dummy-host.localhost     ##ServerAlias www.dummy-host.localhost     ##ErrorLog "logs/dummy-host.localhost-error.log"     ##CustomLog "logs/dummy-host.localhost-access.log" combined ## ##     ##ServerAdmin postmaster@dummy-host2.localhost     ##DocumentRoot "C:/xampp/htdocs/dummy-host2.localhost"     ##ServerName dummy-host2.localhost     ##ServerAlias www.dummy-host2.localhost     ##ErrorLog "logs/dummy-host2.localhost-error.log"     ##CustomLog "logs/dummy-host2.localhost-access.log" combined ## お気付きかもしれませんが、##の部分はコメントアウトされており、有効になっていない状態です。 ここに、下記の通り設定を追加していきます。 NameVirtualHost *:80     DocumentRoot "C:/xampp/htdocs"     ServerName localhost     DocumentRoot "C:/xampp/htdocs/プロジェクト名/trunk/src/public"     ServerName test ではこれをブロック毎にみてゆきましょう。 NameVirtualHost *:80 ここで設定するためにみる、IPとポート番号を指定することができます。 上記の場合ですと、*(全部のIP)、80番ポートという意味になります。 勿論通常のサーバーでしたら、IPアドレス:ポート番号で指定することが可能です。 例えば「0.0.0.0:80」みたいな感じです。 よくわかんなーい!という人は上記の通り*全IPの80番を指定しましょう。 次に     DocumentRoot "C:/xampp/htdocs"     ServerName localhost これは元々表示されていた、xamppの管理画面をそのまま使うために必要な記述になります。 これを指定しないとxamppの管理画面が見れなくなってしまいます。 ここで指定している「」の「*:80」もIPアドレスとポート番号を意味しています。 DocumentRootは実際のファイルが設置してある場所を指定しましょう。 「C:」直下にXAMPPを入れた場合は上記と同様で良いでしょう。 次に     DocumentRoot "C:/xampp/htdocs/new_organic/trunk/src/public"     ServerName test(任意の名前) これが、先ほどの長いルートを短くまとめる箇所になります。 実際のファイルのトップページが配置されているルート。そして、servername に好きな名前を付けましょう。 さて、これでapacheのバーチャルホスト設定が完了致しました。 早速接続してみます。 これだけでは対象の画面を開く事ができません(´・ω・`)やだった・・・。 そうです、まだ設定が足りていないのです。 次はhostsの設定です。 C:WINDOWSsystem32driversetc の配下にある「hosts」というファイルをメモ帳やテキストエディタで開いてみましょう。 # Copyright (c) 1993-1999 Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windows. # # This file contains the mappings of IP addresses to host names. Each # entry should be kept on an individual line. The IP address should # be placed in the first column followed by the corresponding host name. # The IP address and the host name should be separated by at least one # space. # # Additionally, comments (such as these) may be inserted on individual # lines or following the machine name denoted by a '#' symbol. # # For example: # #      102.54.94.97     rhino.acme.com          # source server #       38.25.63.10     x.acme.com              # x client host #127.0.0.1       localhost こんな具合になっているかと思います。ここに、 127.0.0.1 localhost 127.0.0.1 test 上記二行を追加します。hostsや、この127.0.0.1の意味を知らない人いるの!? やだあ・・・(´・ω・`)教えません!! 下記を読んでください。 http://ja.wikipedia.org/wiki/Hosts http://ja.wikipedia.org/wiki/Localhost あとは、ローカルループバックアドレスでググってみてください。良いサイトが見つかるかと思います。 これで設定完了です。XAMPPのapacheを再起動しましょう。 WebサーバはLINUXサーバーに乗っているときはコマンドでrestartさせるかと思いますが、 XAMPPはGUIから再起動がかけられるので非常に簡単ですね。 では接続してみます。  表示できましたので、これでOK!!ファイルを物理的に移動しなくても好きなドメイン名で サイトの表示が可能になりましたね。 一応XAMPP管理画面の表示も試してみましょう。問題なく表示されるかと思います。 バーチャルホストは便利で簡単だね!!これを活用して、色々なサイトをローカル環境で動かして見て下さい♪ ではでは、パグでしたぁ~ヽ(・∀・)ノばいばいぷぅ☆ミ
  • テクログ

    WindowsにLinux(CentOS)環境を構築する。Telnet接続まで。

    VMware Playerを用いて、Windows上にLinux(CentOS)環境を構築する手順を紹介します。この環境は、Linuxのコマンド練習や、実サーバにおける作業手順の事前確認に有効です。VMware Playerの詳細については、以下を参考にして下さい。http://ja.wikipedia.org/wiki/VMware尚、ローカルに限定された環境を想定している為、セキュリティについては考慮しません。(1)▼VMware Playerhttp://www.vmware.com/go/downloadplayer/今回は"VMware-player-5.0.0-812388.exe"(73MB)をDLしました。DL後、インストールを完了させて下さい。必要に応じてインストール先の変更やチェックボックスのON/OFFを行なって下さい。(2)▼CentOS(VMware Image)http://www.thoughtpolice.co.uk/vmware/今回は"32-bit: centos-6.2-i386-server.zip"(697MB)をDLしました。"web download"をクリックするとSourceForgeからDL出来ます。DL後、解凍して下さい。尚、誤操作でOSイメージが破損した場合等の為に、このzipファイルは、残しておいて下さい。(3)(1)でインストールしたVMware Playerを起動して下さい。"仮想マシンを開く" > (2)の"centos-6.2-i386-server.vmx"を選択 > "仮想マシンの再生"と進んで下さい。各ダイアログは、内容を読んで進めて下さい。"Choose a Tool" > "Firewall configuration" > "Run Tool" > スペースキー > "OK" > "Yes""Choose a Tool" > "Keyboard configuration" > "Run Tool" > "Japanese" > "OK""Choose a Tool" > "Quit"と進めて下さい。選択は、カーソルキーとエンターキーで行います。認証情報入力を促す表示がされたら、以下を入力して下さい。 localhost login: root password: thoughtpolice (2)のOSイメージがこのパスワードで初期化されているだけで、標準のパスワードということでは有りません。(4)rootのパスワードを変更します。 passwd 設定したいパスワードを2回入力します。(5)ユーザの作成(今回は、"admin"というユーザを作成します。) useradd admin passwd admin 設定したいパスワードを2回入力します。(6)telnetのインストールをします。 yum -y install telnet-server (7)/etc/xinetd.d/telnetの編集をします。 vi /etc/xinetd.d/telnet キーボードの"I"を押して下さい。disable = yesをdisable = noに変更して下さい。尚、カーソルキーで移動出来ます。変更できたら、"Esc"キーを押して下さい。続けて、":wq"と入力して、Enterキーを押して下さい。念の為、以下のコマンドで内容が正しいか確認して下さい。 more /etc/xinetd.d/telnet 以下のコマンドを実行して下さい。 /etc/init.d/xinetd start (8)好きなターミナルソフトでtelnet接続します。プロトコルはTelnet、ポートは23として下さい。接続先IPアドレスは以下のコマンドで確認できます。 ifconfig 以下の"inet addr:"に続くIPアドレスを接続先のIPアドレスとして下さい。(5)のユーザでログインして下さい。このOSイメージで、FTP設定、SSH設定、Apache + MySQL + PHPのインストール等、色々と確認が可能です。
  • テクログ

    スマホサイト制作で役立ったもの

    スマホサイトを制作する上で便利だなと思ったコード 備忘録として記録しておきます。少しでも参考になればと思います。   ・view port width=device-width...ウィンドウの横幅をデバイスの横幅(iPhoneの場合は320px)と指定 initial-scale=1 ... 表示倍率の初期値 maximum-scale=1 ... 表示倍率の最大値 user-scalable=no ... ユーザー側の操作で、拡大/縮小を出来るようにするかの可否   ・iphoneやAndroidのデフォルト設定を無効にする。 -webkit-appearance: none; ・iphoneのみCSSを適用する /* iphone.css */ @media screen and (max-device-width: 480px) {  #help_me { color: red;  } } スマホサイト制作を行う上で上記を知っておくとなにかと役に立ちそうです。 スマホサイトは今後も伸びていくと思われます。より多くの技術や役に立ちそうなコードがあれば 載せていきたいと思います。
  • テクログ

    SQL ServerとMySQL

    技術ブログが始まって2ヶ月弱・・・・みんなしっかりとした知識を披露してくれて・・・タジタジのなべっちです。最近は開発をガッツリやっているわけではないので、書かずに華麗にスルーしようと思っていたのですが・・・しかたない。次に繋がるように、簡単にわかる事を書いてハードルをさげてやろうと思っています。遠い過去の話ですが・・・VB6とSQL Serverを使ってとある保険のシステムを開発していました。ずっとSQL Serverを使っていたので、私の基本的なSQL文法=SQL Serverの文法という図式が成立してしまっています。最近のコアテックでは、MySQLを使うことが非常に多いのですが、SQL Serverとの違いなんてまったく意識せずSQL文を書く事が・・・すると・・・・何度確認してもあっているはずの文法が動かなくてはまるという事がありまして・・・非常に苦労しました。。。。調べていたらこんな違いが!と言う事が書いてあるHPを見つけてやっと解決。。。。非常に助かったので、そのHPから抜粋して違いを書いておきます。はまったのはこの部分↓・DELETE文等で自分自身をサブクエリで参照できない! DELETE FROM table1 WHERE id IN (SELECT id FROM table1 where key = 1 ) keyの値 が 1 のレコードを削除するという文です。※本来はサブクエリを使う必要がない文ですけど、わかりやすく簡単に書いてあります。その他にこんなのもありました。・SELECT INSERT INSERT INTO table1 (a1,a2) SELECT '値1','値2' FROM table1  WHERE NOT EXISTS (SELECT * FROM table1 WHERE a1 = '値1' AND a2 ='値2') 既に値1、値2のレコードが存在している場合は登録しないという文です。My SQLではNOT EXISTSでもEXISTSでも行が取れない為 レコードは登録されないようです。解決方法は↓ INSERT INTO table1 (a1,a2) SELECT '値1','値2' FROM (SELECT '値1' AS b1,'値2' AS b2) tbl1 WHERE NOT EXISTS (SELECT * FROM table1 WHERE a1 = '値1' AND a2 ='値2') とサブクエリを挟むと行が作成されてレコードが登録されるようです。もう1つAUTO_INCREMENTは物理削除すると削除した番号を再利用する SQL ServerのIDENTITYとは違うので同じ感覚で使用するとはまる原因になりそうです。 主キーとして使用する際にはご注意を・・・・気付かなかった~知らなかった~とはまる事があるようなのでメモ書き程度に書いておきます。次回からは役立つ技術情報が続く・・・・はず。
  • テクログ

    KeepAliveTimeoutについて

    みなさん、こんにちわ。 らめぇです。 では、早速。。   KeepAliveの説明 1回のTCP接続で複数のHTTPリクエストを処理する機能。 HTTP/1.0 の Keep-Alive 拡張と HTTP/1.1 の持続的接続の機能は、 複数のリクエストが同じ TCP の接続で送られる、長時間持続する HTTP セッションを提供します。 apacheドキュメントより引用 簡単に説明するとKeepAliveとは、「three-way handshaking」の節約です。 画像やCSSが多いサイトではKeepAliveをonにすることによりその恩恵を受けることができるでしょう。   KeepAlive関連ディレクティブは、以下のとおりです。 下記のディレクティブを設定することでKeepAlive機能を制御します。 KeepAlive HTTP の持続的な接続を有効にします。(On/Offで設定します) KeepAliveTimeout  KeepAlive=On の時に有効で、持続的な接続で次のリクエストが来るまでサーバが待つ時間(秒)を設定します。 MaxKeepAliveRequests KeepAlive=On の時に有効で、持続的な接続上で許可されるリクエストの数を設定します。 KeepAliveTimeoutってなに? 以下の設定について考えてみましょう。 KeepAliveTimeout 15 KeepAliveとは「three-way handshaking」の節約と説明しました。 Webサーバとの間で確立した接続が転送終了後も維持され、2回目以降のリクエストではこの接続をそのまま使用できる。 一見、良いことだらけに見えるこのKeepAliveにも欠点があります。   その一つがKeepAliveTimeoutの設定時間   上の例では、KeepAliveTimeout 15としています。   ひとつの要求が完了してから、コネクションを切断しないで次の要求を受け入れるまでの時間。言い方を変えると「クライアントからのリクエストがなくてもKeepAliveを維持する秒数」ということになります。   「リクエストがなくてもKeepAliveを維持する秒数」ここがポイントです。処理がすぐに終わった場合でもKeepAliveTimeout 15のままだと、15秒間接続をキープしたままになり、このプロセスは無駄になってしまうということです。   短くするほど無駄な接続を減らせますが、短くしすぎると必要なコネクションまで閉じてしまいます。クライアントがコネクションを確立し直す場合が増えます。   結局は環境に合わせて適切な値を見つけてくださいってことです。   小規模のサイトではあまり気にしない(設定を変えても効果はないと思います)KeepAliveの設定。 アクセスが増え、パフォーマンスが低下してきたら一度見直してみると良いかもしれません。 らめぇでした。