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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    【Google Chrome】WEBディレクターが入れておくべき拡張機能

     ふと見るとiPhoneの電源が落ちている なかむ です。 テクログ公開にあたってデザイナーや開発、ディレクターとブログを分けようと思ったのですが、面倒くさいのでやめました、すいません・・・ ディレクター(ディレクターじゃなくてもいいですけど)なら入れておいて損はないChromeの拡張機能をご紹介します!   ◯Awesome Screenshot    ページ全体やページの一部のキャプチャーPNG形式で保存できる。FLASHもキャプってくれる優れもの。注釈もつけれます。キャプチャーの拡張機能は多々ありますが、一番しっくりきました。   https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce   ◯Chrome Sniffer      サイトがどんな技術が使われているか教えてくれる拡張機能。   こんな感じでアドレスバーに表示(テクログはWordpressで構築しているのでWマークがでてます) 色んな発見があって勉強になります。   https://chrome.google.com/webstore/detail/homgcnaoacgigpkkljjjekpignblkeae   ◯Color Picker     知りたい色のカラーコードを抽出できる拡張機能。カーソルの先に色を合わせてクリックするとカラーコードが簡単にコピーできるのが便利です。   https://chrome.google.com/webstore/detail/ohcpnigalekghcmgcdcenkpelffpdolg   ◯Drag & Drop Search   記事を見ている際、あーこれすぐに検索したいって思った時にドラッグして検索したいサービスですぐに検索できますヒャッホイオプションでサービスを変更できます。   https://chrome.google.com/webstore/detail/njdeknfopjeielabfoglnmbggkegcanm   ◯Facebook Social Plugin     サイトや記事がどのぐらい「いいね!」されてるかひと目で分かります。クリックすれば「いいね!」もできます。いいね!   https://chrome.google.com/webstore/detail/hdmclgnbhdiklglmmdcaelggigiiigpm   ◯FireMobileSimulator for Google Chrome     携帯やスマートフォンの動作を確認できる拡張機能。最新機種も追加可能です( ^,_ゝ^)ニコッ※ちょっと確認したい時に使います。基本的には実機で確認します。   https://chrome.google.com/webstore/detail/mkihbloiacgiofaejgagokalpeflnmbe   ◯HTML5 Powered     HTML5でマークアップされているかひと目で分かる拡張機能。色んな発見があります。 こんな感じでアドレスバーに表示(テクログはHTML5でマークアップしてます)   https://chrome.google.com/webstore/detail/klleofbhhghgacodijohlacbfhfcefom   ◯Image Properties Context Menu     画像の大きさとか重さとか調べたいなぁーって時に重宝します。右クリックで簡単に調べることができます。 https://chrome.google.com/webstore/detail/khagclindddokccfbmfmckaflngbmpon   ◯Page Ruler     閲覧中のページでこの高さどのぐらいかなぁー困ったなぁーって時にささっとサイズが調べられます。CSSで確認するのがメンドーな時によく使ってます。 https://chrome.google.com/webstore/detail/jlpkojjdgbllmedoapgfodplfhcbnbpn   ◯QRcode maker     ガラケーやスマートフォンでWEBサイトを確認する際に、直接URLを打ち込むのがメンドーな時に便利なのがこの拡張機能。今開いているページURLのQRコードを表示してくれます。ダウンロードもできます。   https://chrome.google.com/webstore/detail/mljeoehehjjniajneijpcnmapmmhilgj   ◯文字数カウンタ     ここ何文字ぐらいあるのかなぁー困ったなぁーって時にコピペだけで文字数を表示してくれます。文字数制限があった場合、とても便利☆   https://chrome.google.com/webstore/detail/inhhfghhfjpmhleoidodhcgeecicfbep   こういう拡張機能あったよ!という方は教えてください!Chromeが重くならない程度に試してみます♪
  • テクログ

    負荷分散装置

    ムチャぶりおにぃです。負荷分散装置について、ざっくりと話したいと思います。 負荷分散装置と聞くと、数百万もする鉄の箱をイメージされる方がいらっしゃるかと思いますが、時代の流れでしょうか。。価格も下がり35万で購入できるものまで出てきていますね。 しかし、35万でも高いものは高いです。そこで考えるとなると。。。もっと安くできるのではないかと。。。 まず、負荷分散について話しますと(知っている方は、流してください)、WEBサイトやデータベースで少量のデータの処理であれば、さくっと終わるので気にしなくてもいいですが、膨大なトラフィックやデータとなってくるとかなりの時間がかかってしまいますよね。そこで負荷分散を行い、短時間で終わりにしようというものです。そのまんまですね。 さて、本題。負荷分散を安く抑える方法は、リナックスに負荷分散ができるソフトをインストールして利用しちゃいましょってこと。負荷分散ソフトとしてLVSというものを利用します。 下準備、テスト用として3台のPCを用意し、リナックスをすべてにインストールしておきます。1台が負荷分散用(LB01)、2台がウェブとかメールとかのサービス用(SV01/SV02)として利用します。今回の対象のリナックスは、CentOSになります。 各マシンには、以下のようにそれぞれIPアドレス・ホスト名を設定しておきます。SV01/SV02には、apacheがインストールされていて、ブラウザでアクセスするとSV01・SV02とレスポンスを返す設定になっています。SV01/SV02のデフォルトGWは、LB01からのレスポンスを返答するためにLB01のeth1に向いています。 リナックスのインストール・サービス用マシンの構築・初期設定については、割愛いたします。※CentOSをBASE・Development Tools・Development Librariesのパッケージでインストールした環境で進めております。 LVSは、非常に簡単に設定できます。LB01を起動します。 起動しrootでログインしたら yum -y install ipvsadm を入力。たったこれだけです。Complete!が表示されたらインストール完了です。インストールされているか確認してみましょう。 ipvsadm -v を入力。 ipvsadm v1.25ほにゃららと表示されればインストールされています。 次に、分散処理を行うためのコマンドを実行しましょう。 1.サービス応答用IPアドレスの設定リクエストに答える為のIPアドレスをLB01に設定。LVSにも設定をします。 ifconfig eth0:1 192.168.92.248 netmask 255.255.255.255ipvsadm -Cipvsadm -A -t 192.168.92.248:80 -s rr 2.LVSにサービス応答のサーバー設定実際にサービスを行うサーバーを登録します。 ipvsadm -a -t 192.168.92.248:80 -r 192.168.192.35 -mipvsadm -a -t 192.168.92.248:80 -r 192.168.192.37 -m 3.動作確認ブラウザにてhttp://192.168.92.248へアクセス。とその前に!! 動作確認の前に、もうひと工夫が必要です。 負荷分散で、パケットをほかのサーバーに渡して処理するので、パケットを転送してもいいよっていう設定を許可してあげないといけません。 echo "1" > /proc/sys/net/ipv4/ip_forward これで、設定がOK! ブラウザでチェックしてみよう!正しく設定ができていれば、SV01/SV02が表示されると思います。 これで、負荷分散について、できるようなりました。 高価な負荷分散装置を買うことなく、同じようなことができるようになりますね。 しかし、このままの設定だと問題があります。再起動したら、利用できなくなる。ネットワーク障害・ハード故障などが発生したらそこへのアクセスをさせないように行う。しかもLVSには、その機能が付いていません。 じゃあ、どう解決したらよいのか。。。長くなるため、その話は、また今度、では。
  • テクログ

    ドメイン(サーバー)移転

    ドメイン(サーバー)移転とは インターネットでは、ドメインを入力するとDNS[Domain Name System]サーバーの情報に従って、ホームページが存在するサーバーに接続されるしくみになっています。 ドメイン移転とは、お客様のドメインを管理しているレジストラのデータベースにアクセスして、Newサーバーの場所を登録する作業のことです。 ドメイン移転の手続き ドメイン名の種類によって、手続き方法が異なります。  JPドメイン名 お客様ご自身でドメイン名を管理されている場合は、ドメイン管理画面から現在割り当てられているネームサーバー(DNS)を弊社指定の情報に書き換えていただくだけで手続きが完了します。  ドメイン名の管理を弊社に移管することも可能ですが、この場合は指定事業者変更手続きを行います。 この手続きでは、お客様の作業は特にありません。  外国ドメイン名(com.net.org等) お客様ご自身でドメイン名を管理されている場合は、ドメイン管理画面から現在割り当てられているネームサーバー(DNS)を弊社指定の情報に書き換えていただくだけで手続きが完了します。  ドメイン名の管理を弊社に移管することも可能ですが、この場合はドメイン管理画面から【Auth-Code】or【レジストリキー】入手してください。 ドメイン名の管理を外部事業者に委託されている場合は、そちらからご入手ください。  外国ドメインの【Auth-Code】or【レジストリキー】をご存知無い場合 本来、お客様側でご契約のレンタルサーバー、プロバイダなどにお問合せ頂く内容です。お客様の方でご契約のサポート窓口に電話、メールでお問合せ頂くことが望ましいです。 それぞれのサーバー業者により、【Auth-Code】or【レジストリキー】の発行手順は異なりますが 解約申請書の郵送が必要になることがほとんどです。   解約申請書の郵送 (Eストアの場合) Eストアの場合の手順を記載します。下記URLのような詳しい説明ページがある業者は珍しく、詳細はサポート窓口に問合せなければ分からないケースがほとんどです。解約の説明ページを目立つ場所に置かないのは仕方ない部分もあるかと思います。 各サーバー業者で手順異なりますが、Eストアの場合、他社サーバーへドメイン移転するためには解約月の前月末日まで解約申請書を郵送する必要有ります。  解約申請書 -->下記URL印刷し 1) or 2) のどちらか選択 http://manual.estore.co.jp/form/itp-rs/print/itprs_kaiyaku.pdf  下記 1) or 2) どちらか選択することで 【Auth-Code】or【レジストリキー】が発行されます。  1) 他社ドメイン管理サービス移転する (ドメイン管理団体〔レジストラ〕の変更 移転先のドメイン管理サービスがお決まりの場合は、サービス提供業者名・移転後のドメイン所有者名を 以下にご記入ください。(未記入の場合、お客様に確認を要するなど、移転に時間がかかることがございます)  2) 自社サーバーの利用等、お客様にてドメイン管理をする 弊社管理下のドメインを、お客様管理下へ移行する手続き(レジストリキー発行)を承ります。後日発送の 「解約承り書」がお手元に届きましたら、ITparkレンタルサーバカスタマーヘルプデスクまでお問合せください。  他社サーバーへの移転手順 http://manual.estore.co.jp/itpark-rs/mvout/index.html  解約後のドメインについて > 他社へ移転する場合 > 国際ドメインの移転(com) http://help.shopserve.jp/support/contract/kaiyaku-domain.html#point4
  • テクログ

    謎のエラーが消えない

    はーい。どうも。ぶーちゃんです。 技術ブログ・・・・なに書こうかなー。みんなかっこよくて書くのビクビクしています・・・・。   技術って訳じゃないけど、よくハマって「え?!なんで?」ってなることを思いついたので、 書いておきます。    新規で作る場合は、ほぼこの問題がおきないと思うんですが、既存のあるものに追加、変更を 繰り返していると、あとで「あー。なんだ。」って思うことがしばしば・・・。    こんなプログラム(ASP)をHTMLに書くとします。             最近はスマホサイトブームですからね。  新しく「ベース処理」と「アナタのキャリアはなんですの?」処理を追加  「スマホ処理」をガリガリ書いて、よし!完成!スマホでテスト実施!! 「はい。いきなりエラー。」「しってた。しってた。」  トライ&エラーの鬼の私には、いつものこと(普通の人はやらないですよねw) 「まあね。どこかやっちゃったんだろう。」ってスマホ処理.aspを見直します。  「あれ??ないなー。悪い事ないよな。頭は悪いけど・・・・って誰が頭が悪いじゃ!」 ね?寂しいでしょ? プログラマって独り言多くなると思うんですけど、どう思います? まあメンドくさいポイントとして、ASPをテキストエディタで書いてるからね。 eclipseとかでアシストしてくれて、コンパイルエラーなんて見つけてくれませんよ。・・・。 何回もデバッグ出力して、 「あれ?どこだろう?・・・・ってか何書いてもエラーになるんだけど?! サーバー壊れてんじゃね?」 はい。すみません。壊れてるのは私の頭です。。。。 問題は「スマホ処理.asp」じゃなくて、前からあった「PC&moble処理.asp」だったんです。 「PC&moble処理.asp」は、別に何も変えてません。触れてもいません。しかもif文。 けどエラーなんです。えーえー。ですからー。えー。 「PC&moble処理.asp」で「ベース.asp」をインクルードしてたんですねー。 2重定義ってやつですね。 PC&moble側の問題がスマホ側までエラーとして出ちゃうんですね。 いやー。最初に会った時は本当にビビりました。 if文でもコンパイル時はPC&moble側まで見るんですね。 かなり嵌りましたw とりえあず入れておけ。入れておけ。って精神だとダメって勉強しました。 ASPとかってインクルードって読み込んでるファイルを内部的に全展開してるだけだからですかね? なにかいい方法で回避出来ないですかねー。調べたんですがいい方法がなかったんですよね。 さわってない、触れてない、if文で括られてるからと言って、必ずしも大丈夫ではない。 確認することを忘れず、これからも作業していきたいってことですね! ってな感じで今回のブログを終了します。 ・・・・かなりおそまつでした・・・。ではまた。
  • テクログ

    [FuelPHP]ViewModelについて

    こんにちは。 先日Fuelの勉強会に参加したら「 家に帰ってブログを書くまでが勉強会です!」と言われてしまったので、今熱い!(?)FuelPHPのViewとViewModelについて。 フレームワークを利用している方ならMVCモデルに慣れ親しんでいると思うのですが、FuelではMVCにプラスして「ViewModel」というものを利用することができます。 Viewモデルとはなんぞや?ということですが、 ざっくりとこんなイメージです。 VMを利用するメリットですが、見ての通り、Controllerでは一切値を触らないので(VMに投げて、Modelから受け取るだけ)ソースがスッキリとまとまるという利点があります。 // contoroller function  action_index(){ $data = Model_XXXXX::find(XXXXXX); foreach($data) // viewにセットするための処理諸々(プルダウンのセットやチェックボックスの値挿入など) } } としていたものが、 // contoroller function action_index(){ $view = ViewModel::forge($viewName,'view',false); $this->template->content = View::forge('view',$data); } // ViewModel function view(){ $data = $this->data; foreach($data) // viewにセットするための処理諸々(プルダウンのセットやチェックボックスの値挿入など) } } のような感じになります。 これだけだと「分ける必要ないじゃん」って感じですが。。。 複雑な処理になればなるほど、contoroller側の記述がシンプルになっていくイメージです。 まだあまりサンプル例が紹介されていないので、これが正しい使い方なのかはいまいちよくわかっていません…。必ずしもVMを使う必要はないのですが、自分が悩んだ部分だったので健忘録代わりにメモしておきます。 FuelPHP、まだまだ発掘する部分が多くて楽しいフレームワークなので、興味のある方は触ってみるのもいいんじゃないでしょうか。
  • テクログ

    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のメソッドについて記述したいと思います。 では、また来月お会いしましょう。。。