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

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

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

LIST OF ARTICLES

記事一覧

  • テクログ

    Win上でApache + PHPをVagrant + VirtualBox + Chefで動かすまで

    概要 PHPのローカル開発環境はWinならXAMPP、MacならMAMPとかがあり、簡単なPHPアプリケーションの作成なら手軽に出来ます。が、CoofeeScript、Less、Sass、WebSocket ... etc を使いたければ、Node.jsだったりRubyだったりが必要になり、ローカル環境を直に構築するのが徐々に億劫になります。 最終的にはLinux環境で動かすケースが大多数で、その場合、WinにしろMacにしろ、ローカル環境の構築手順があまり役には立たないこと。PC移行時に、再度構築し直すのが面倒なこと。等が理由としてあげられるでしょうか。試行錯誤する中で、ゴミも残ります。 以前からVirtualBoxやVMwareでローカル上に仮想OSを立てて、その中で開発する方法は有りました。しかし、OSイメージのバックアップは適宜行うべきで、OSイメージの状態を管理する面倒さは付きまといます。スナップショットだと、特定モジュールのバージョンを上げる。とかも面倒ですね。 最近、Vagrant + VirtualBox + Chefでローカル開発環境を構築してみて、その辺りの煩わしさが大分解消されたので、以下、その手順です。尚、この記事の内容は、Win 7 64bitで確認しています。 VirtualBoxのインストール VirtualBoxはOracleが提供する仮想化ソフトウェアです。インストーラでインストールできます。 https://www.virtualbox.org/wiki/DownloadsVagrantのインストール VagrantでVirtualBoxをコマンドラインから操作できます。インストーラでインストールできます。 http://downloads.vagrantup.com/ $ vagrant -v Vagrant version 1.2.7 Rubyのインストール Vagrantや、後述のChefはRubyを必要とします。 http://rubyinstaller.org/downloads/ 隣の方のPC(win 7 32bit)だと、Rubyをインストールしていないはずなのに動いたので、Vagrantのインストール時にうまく解決してくれるのかもしれません。手前のPCにはもともとインストールされていたので、未確認ですが。(もしかすると、ゲストOS側にさえあれば良い?)saharaのインストール スナップショット用のプラグインであるsaharaをインストールします。システム上は任意ですが、作業上、あった方が良いです。用途は後述します。 $ vagrant plugin install sahara Vagrantの初期化 適当な場所でディレクトリを作って、その中で初期化してみます。 $ mkdir my_first_vagrant $ cd my_first_vagrant $ vagrant init gitの初期化 後の作業の差分をわかりやすくするため、gitで初期化しておきます。 $ git init . $ git add Vagrantfile $ git commit -m "initial commit" .gitignoreも作っておきます。".vagrant"は、vagrantが自動で作成するディレクトリです。"share"については後述します。 .vagrant/ share/ Vagrantfileの編集 http://www.vagrantbox.es/ から、使用したいOSイメージを選びます。どうも会社のPCだとUbuntu13.04(64bit)が上手く起動できず、当記事ではUbuntu12.04(32bit)を使用しています。 直にダウンロードはせず、Vagrantfileに以下の修正を行って下さい。 $ git diff diff --git a/Vagrantfile b/Vagrantfile index 3c98940..a2e41c4 100644 --- a/Vagrantfile +++ b/Vagrantfile @@ -7,16 +7,16 @@ Vagrant.configure("2") do |config|    # please see the online documentation at vagrantup.com.      # Every Vagrant virtual environment requires a box to build off of. -  config.vm.box = "base" +  config.vm.box = "ubuntu1204"      # The url from where the 'config.vm.box' box will be fetched if it    # doesn't already exist on the user's system. -  # config.vm.box_url = "http://domain.com/path/to/above.box" +  config.vm.box_url = "http://cloud-images.ubuntu.com/precise/current/precise-server-cloudimg-vagrant-i386-disk1.box"      # Create a forwarded port mapping which allows access to a specific port    # within the machine from a port on the host machine. In the example below,    # accessing "localhost:8080" will access port 80 on the guest machine. -  # config.vm.network :forwarded_port, guest: 80, host: 8080 +  config.vm.network :forwarded_port, guest: 80, host: 8080      # Create a private network, which allows host-only access to the machine    # using a specific IP. @@ -35,7 +35,7 @@ Vagrant.configure("2") do |config|    # the path on the host to the actual folder. The second argument is    # the path on the guest to mount the folder. And the optional third    # argument is a set of non-required options. -  # config.vm.synced_folder "../data", "/vagrant_data" +  config.vm.synced_folder "share", "/share", :create => true      # Provider-specific configuration so you can fine-tune various    # backing providers for Vagrant. These expose provider-specific options. コミットも行っておきます。 $ git add . $ git commit -m "added .gitignore. updated Vagrantfile" vagrantの起動 初回はconfig.vm.box_url値のイメージファイルをDLして、config.vm.box値の名前で保存するので、少し時間がかかります。 $ vagrant up スナップショットの作成 仮想OSの状態を簡単に戻せるようにするため、スナップショットを作成しておきます。sandboxはsaharaをインストールして使えるようになったサブコマンドです。 $ vagrant sandbox on 以後、以下のコマンドでスナップショットの状態に戻したり、あるいは現在の状態でスナップショットを更新出来ます。 $ vagrant sandbox rollback # 状態を戻す $ vagrant sandbox commit # 状態を更新する 仮想OSにログインします。 $ vagrant ssh PHPをインストールします。Apacheは併せてインストールされました。 $ sudo apt-get install php5 -y $ php -v PHP 5.3.10-1ubuntu3.7 with Suhosin-Patch (cli) (built: Jul 15 2013 18:10:56) Copyright (c) 1997-2012 The PHP Group Zend Engine v2.3.0, Copyright (c) 1998-2012 Zend Technologies ログアウトします。 $ exit ブラウザから確認 http://localhost:8080/ にアクセスして、"It works!"と表示されればOKです。 尚、Vagrantfileでconfig.vm.synced_folderを設定をすると、ホスト側とゲスト側でファイルの共有が出来るようになります。前述の設定で、ホスト側の"./share"ディレクトリとゲスト側の"/share"ディレクトリが共有されている状態です。IDEの作業ディレクトリを指定すれば、作業と同時にゲスト側にも反映されます。/var/www等の公開ディレクトリに、プロジェクトの公開ディレクトリへのシンボリックリンクを貼るなどして下さい。 次に、PHPのインストールをChefで自動化してみます。 Chefのスクリプト(レシピ)を作成 レシピを置くディレクトリを作成します。 $ mkdir -p cookbooks/php5/recipes 次に cookbooks/php5/recipes/default.rb を、以下の内容で作成します。 package 'php5' do    action :install end Vagrantfileの編集 Chefのレシピが自動で実行されるように、以下の修正を行います。 $ git diff diff --git a/Vagrantfile b/Vagrantfile index a2e41c4..c993ac1 100644 --- a/Vagrantfile +++ b/Vagrantfile @@ -79,16 +79,18 @@ Vagrant.configure("2") do |config|    # path, and data_bags path (all relative to this Vagrantfile), and adding    # some recipes and/or roles.    # -  # config.vm.provision :chef_solo do |chef| +  config.vm.provision :shell, :inline => "apt-get install ruby-dev --no-upgrade -y" +  config.vm.provision :shell, :inline => "gem install chef --no-rdoc --no-ri --conservative" +  config.vm.provision :chef_solo do |chef|    #   chef.cookbooks_path = "../my-recipes/cookbooks"    #   chef.roles_path = "../my-recipes/roles"    #   chef.data_bags_path = "../my-recipes/data_bags" -  #   chef.add_recipe "mysql" +    chef.add_recipe "php5"    #   chef.add_role "web"    #    #   # You may also specify custom JSON attributes:    #   chef.json = { :mysql_password => "foo" } -  # end +  end      # Enable provisioning with chef server, specifying the chef server URL,    # and the path to the validation key (relative to this Vagrantfile). ゲストOSを再度作成 現在起動しているゲストOSを停止します。正しく終了できない場合は -f オプションを付けてみて下さい。 $ vagrant halt ゲストOSを破棄します。尚、実際には、破棄する必要はありません。今回は、まっさらな状態から起動して、PHPのインストールが自動で行われるか確認するために、敢えて破棄します。 $ vagrant destroy VAGRANTの起動 先ほどと同様のコマンドで起動します。OSイメージの元になるファイルは既にダウンロードされているので、先程よりは速いはずです。 $ vagrant up ブラウザから確認 http://localhost:8080/ にアクセスして、"It works!"と表示されればOKです。 おわりに XAMPPやMAMPは開発初心者にとっては便利ですが、サーバ周りのスキルがなかなか身につきません。心当たりがある方は、まずは手動で良いので、試してみてはいかがでしょうか。 サーバ周りのスキルがある方は、前述のChefや、同じ類のPuppetで、手元にあるかもしれない手書きの構築手順書をスクリプト化すると良いかと思います。そのスクリプトは、そのままドキュメントになります。 様々なツールを1セットにした自分(あるいは会社)専用の開発環境を作ることも出来ますし、大きなシステムであれば、実環境と同様な環境を作ることも出来ますね。コマンド一発です。 尚、ChefにしろPuppetにしろ、単なる自動化ツールではなく、冪等性(何度実行しても同じ状態に収束する)という概念が重要になります。 以上です。
  • テクログ

    SimpleXMLElementをserializeすると。PHPの仕様

    こんにちは、けーすけです。   気象庁のサイトから天気予報のXMLを取得してサイトに表示するということをやりました。 表示するだけなら簡単にできますが、問題は重いということです。 動きが非常にもっさりします。   そこで、天気予報のXMLをDBに保存することにしました。 SimpleXMLElementをserializeしてDBに書き込むのはできました。   が、問題はここから。 serializeしたSimpleXMLElementをunserializeして天気予報を表示しようとすると、します。 Wordpressだと思って見て下さい。 //1.天気予報XMLのURL $url='http://hoge.hoge/xxx.xml'; //2.天気予報を取得 $tenki_xml = simplexml_load_file($url); //3.シリアライズしてDBに保存 update_option('tenki_xml',serialize($tenki_xml)); //4.DBから天気予報XMLを取得 $tenki_xml = get_option('tenki_xml'); //5.天気予報XMLをアンシリアライズ $tenki_xml = unserialize($tenki_xml);   5でエラーになります。 余裕でできるだろうと高をくくっていたのでちょっとあせりました。 いろいろ調べてみたのですが、SimpleXMLElementに戻すのはめんどくさいことがわかりました。   今回は完結した処理だったので、生成したHTMLをDBに保存して済ませました。 XMLのデータを利用したい場合、stdClassか配列にするのが良いようです。   今後、アンシリアライズできるようになってほしいですね(^^; けーすけでした(・ω・)
  • テクログ

    エクセルマクロ

    技術ブログで書くことが思いつかず以前に使ったエクセルマクロのことを書きます。 作業ファイルのリストをエクセルでまとめたかったのですが、思いのほかファイル数が多かったのでファイル名を出力するマクロを調べました。調べたところ下記のようなマクロ発見! Sub Disp_File_Name() Const cnsTitle = "ファイル名取得" Const cnsDIR = "*.*"  Dim xlAPP As Application Dim strPath As String, vntPathName As Variant Dim strFile As String Dim i As Integer Set xlAPP = Application  'フォルダ指定 vntPathName = xlAPP.InputBox("参照するフォルダ名を入力して下さい。", cnsTitle, "C:") If VarType(vntPathName) = vbBoolean Then Exit Sub strPath = vntPathName  ' フォルダ確認 If Dir(strPath, vbDirectory) = "" Then MsgBox "指定のフォルダは存在しません。", vbExclamation, cnsTitle Exit Sub End If  'ファイル名の取得 strFile = Dir(strPath & cnsDIR, vbNormal)  Do While strFile <> "" i = i + 1 Cells(i, 1).Value = strFile ' 次のファイル名を取得 strFile = Dir() Loop End Sub 対象フォルダのパスを入力して実行するとA列にフォルダ内のファイル名が出力されるだけのシンプルなマクロです。自分にとっては便利なマクロなので、これをベースに自分の作業用マクロを作りたいなぁ~と思う今日この頃です。
  • テクログ

    超簡単! google chart を php で利用する方法

    googl chartをphpで動的に作るhttps://core-tech.jp/gijutsublog/2013/03/04/1243の続きです。原理としてはhttp://imagecharteditor.appspot.com/google chart editorを開いて、Import chart from URLの下にある四角い枠、なにやらパラメータが大量に書かれています。こいつをURLにくっつけて渡すことでグラフを画像として表示することが出来ます。 まずは、 GoogChart.php API を感謝を込めていただきます(-人-)http://code.google.com/p/googchart/解凍してexample.php を実行すると各種グラフが表示されます。内容はというと、配列に値をセットしてecho で表示するだけです。 include( 'GoogChart.class.php' );// Set graph data$data = array(            'IE7' => 22,            'IE6' => 30.7,            'IE5' => 1.7,            'Firefox' => 36.5,            'Mozilla' => 1.1,            'Safari' => 2,            'Opera' => 1.4,        );// Set graph colors$color = array(            '#99C754',            '#54C7C5',            '#999999',        ); // 実際に表示している部分$chart->setChartAttrs( array(    'type' => 'pie',    'title' => 'Browser market 2008',    'data' => $data,    'size' => array( 400, 300 ),    'color' => $color    ));echo $chart;たったこれだけ!GoogChart.class.php の中を見るとわかりますが、75行目からパラメータを作成していますこのAPIは指定出来る項目数がだいぶ省略されていますので、もし追加したい効果が有ればここに足し込んでいきます。項目が何を意味しているかは、前回の画面を利用して値を変えていけば変更箇所の色が変わるのでそれをセットすればマニュアルいらず。// Create query$this->query = array(    'cht'     => $this->types[strtolower($this->type)],    // Type    'chtt'     => $this->title,                            // Title    'chg'     => $this->chg,                                // グリッド線「追加したらプロパティの追加も忘れずに」例)/** グリッド線の間隔*/protected function setChg( $glidline ){        if($glidline){        $this->chgr = $glidline;    }}これでいろんな図形が思いのまま仕事で作ったグラフを一つAPIをカスタマイズすれば、こんなグラフも書けちゃいます。
  • テクログ

    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お問い合わせフォームの知識がなくても簡単に実装できるプラグイン 他にも便利で実装のお手伝いするプラグイン達がたくさんいます。 今後便利なプラグイン開発に挑戦してみようか検討中です。