Archive for 12月, 2012

【勉強会】HTML5カンファレンス2012

2012年9月8日(土)に慶應義塾大学 日吉キャンパスで行われた「HTML5カンファレンス2012」に参加してきたときのメモです。

http://events.html5j.org/conference/2012/09/
HTML5カンファレンス2012のロゴ

既にまとめサイトが存在しておりますので、詳しくはそちらを御覧ください

 http://stocker.jp/diary/html5-conference-2012/

個人的に興味があった内容を下記に挙げていきます。

@yomotsu さんの発表でWebGL and Three.js

 http://www.slideshare.net/yomotsu/webgl-and-threejs
 ※HTML,JavaScript、CSSでここまで出来るのかと感動させられました。

mixiのあんどうやすしさんによるWebRTCとか勉強会

 https://docs.google.com/presentation/d/1MkvmX6Gvb1cRATdwF4RFBtol8NgdnblwlwikDnFhT10/present#slide=id.p

※ちなみに上記資料をもとに丸3日をかけて、WebRTCのまとめとデモを作りました!
 参考:http://megadreams14.com/?p=319
 ※残念ながら仕様変更によりデモは動いておりませんが、仕組みについてはほぼ同じなので参考になるかとは思います。

Hajime OgushiさんによるLT「ピンチとチャンス」

 http://www.slideshare.net/hajimeogushi/html5conference2012-lt
 デザイナーでノンプログラマーなHajime Ogushiさんのプレゼンのデザインセンスがうけました!分かる人にはわかるプレゼン資料です。

HTML5クイズ

 http://www.youtube.com/watch?v=4LBOZTtiEh8&feature=youtu.be
 某テレビ番組の大感謝祭のようなシステムでWebSocketやAjaxなどを使ってリアルタイムにクイズの集計を行い、HTML5カンファレンスの締めとしてふさわしい企画でした。

 こちら作成者様のブログで裏話なども見れるので良かったら是非
  http://georz.hatenablog.com/

 ※ちなみにこのシステムに憧れて自作でも現在作成中!
  Node.jsなどを使って裏側を作成しており残りは見た目と集計部分....
  出来上がったら公開します!!

とても刺激あるカンファレンスでした!
来年も是非!!

WebRTC GetUserMediaとPeerConnectionについて

WebRTCについて昨年9月にまとめた資料があったので公開しておきます。

現地点では仕様が変わっているようですが裏側で行なっていることは同じだと思うので参考になればどうぞ!

ちなみにNode.jsについても記載しておりますので、Nodeの環境構築など興味のある方は是非!

資料:WebRTCについてのまとめ http://peerconnection-video-chat.herokuapp.com/webrtc_report/webrtc_summary.html

FuelPHPのスキャフォールドとマイグレーションで作業効率化

フレームワークを使って開発を始めて約1ヶ月半。
フレームワークの便利さに感動する毎日が続いています。

そんな今日は,今流行のFuelPHPについて。

FuelPHPのロゴ

FuelPHPは、PHP5.3によるWebアプリケーション用のMVCフレームワークです。2010年位Dan Horrigan氏によって開発が開始されました。

PHPのフレームワークには、「CakePHP」や「Symfony」「Codelgniter」など様々なフレームワークがありますが、FuelPHPは軽いため高速な処理を行うソーシャルゲームなどの開発には向いているそうです!

そんなFuelPHPのスキャフォールド(scaffold)マイグレーション(migration)がとても便利なので紹介したいと思います。

scaffoldとmigration

スキャフォールドについて

スキャフォールドとはRuby on Railsで導入された機能で、MVCフレームワークでCRUD操作を行うための枠組みを自動生成する仕組みのことです。

ちなみにCRUDとは、Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)の頭文字をとった言葉で、データベースの基本的な操作のことを指します。

CRUDの説明

スキャフォールドによって、モデル(DBに接続、SQLの実行など)、ビュー(表示、編集登録、削除画面)、コントローラ、マイグレーションが一括して生成されます。※マイグレーションについては後ほど...

ようするに、スキャフォールドをすることによって、一覧表示画面、データ新規登録画面、データ編集画面、データ削除機能などが一瞬で出来てしまうということです!

FuelPHPでのスキャフォールドのコマンドは、


 php oil g scaffold demo_scaffold title:varchar[50] content:text id:int

上記のコマンドで、文字列で50文字までのtitleカラムとcontentカラム,整数型のidカラムのモデルが出来上がり、同時に表示編集登録削除のコントローラーも出来上がります。

超便利!!

マイグレーションについて

マイグレーションとは、データベースのテーブル構造を管理するものです。
マイグレーションを実行することで、作成したモデルをDBに反映させることが可能です。
FuelPHPでは、fuel/app/migrations以下のファイルを読み込むことで実行されます。

コマンドは、


 php oil refine migrate

上記コマンドを実行することで、作成したモデルがDBに反映されました!

ただし、この状態でファイルにアクセスしても以下のようなエラー画面が出ます。

Orm Model not Found!

これは、configファイルにModelを読み込む設定をしていないためなので、
fuel/app/config/config.phpのreturn array()の中に下記の情報を付け加えてあげましょう!

    'always_load'  => array(
            'packages'  => array(
                'orm',
                'auth',
            ),            
    ), 

そうするとページが表示出来るようになります。

scaffoldで作成した画面

編集画面

scaffold編集画面

削除機能もあり

scaffold 削除画面

これからフレームワークを使って開発を行う際には、スキャフォールドとマイグレーションは使用して行きましょう!!

GitHubやJenkinsと連携した開発環境作成でのrsyncとの出会い

社会人1年目のエンジニアにおいて開発環境の構築にはかなり時間がかかるもの。
わけの分からないエラーと戦ったり、他の人の環境では動いても自分の環境では動かないなどそういう経験がある人も多いのではないでしょうか?

今回は、GitHubやJenkinsと連携した開発環境を構築する上で出会ったrsyncコマンドとの出会いについてお話したいと思います。

まず、rsyncコマンドとは、ファイルなどのバックアップや同期を行うために使用されるコマンドで、変更分を検出して差分のみを転送することができ、cpコマンドと違って効率的なバックアップを行うことができます。また、ネットワーク経由でもバックアップや同期が行えたり、sshなどのリモートシェル経由でも利用が可能であるためとても便利なコマンドだそうです!

rsyncコマンドロゴ

このrsyncコマンドを知った瞬間、自分たちが構築したい環境を簡単に出来るではないか!と凄く感動しました!

まずは、使いたいと思った背景をご説明したいと思います。

目指すべく開発環境は、ソースコードをGitHubで管理し、継続的インテグレーションを導入するためにJenkinsを利用してサーバへ自動デプロイされる仕組みを構築することです。

理想の開発環境

上の図のようにローカル環境で実装し、ある機能が実装されるとcommitしてGitHubへpushします。
その後GitHubからJenkinsへデプロイされテストが実行されます。
テストが正しく通ればサーバへ反映されるという仕組みです。

しかし、ローカル環境だけではテストが出来ない場合もあるため、テストサーバへはFTPを使ってファイルをあげてサーバ上でもチェックが出来る環境を構築したいと考えていました。

テスト環境に直接ファイルをあげる

しかし、テスト環境にFTPでファイルをあげた際にずっとそのファイルが残り続けるのは良くないため、ローカルからGitHubへpushされJenkinsが動いた時には、サーバにあるコードは全てGitHubにcommitされている最新版へ戻すような設定を行いたいと思っていました。

デプロイ後gitHubの状態にする

それを実現するためにjenkinsでGitHubからとってきたファイルをコピーする方法やそもそもテストサーバのファイルもgitで管理しちゃおうなど色々考えました。

1:ファイルをコピーして同期
 jenkinsはテストを行う前にgitHubから最新版のデータをpullしてきます。その時には/var/lib/jenkins/以下にworkspaceというディレクトリが出来、そこにソースコードがpullされる仕組みになっています。そのファイルをサーバで設定されているドキュメントルート以下にコピーしようという考えです。

 しかし、コピーをするだけだと
 ・不必要なファイルは消えずに永遠に残ってしまう
 ・毎回変更がないファイルもコピーされるので処理が重くなる
 などの問題があったため断念....

2:テストサーバ側もgit管理してしまう
 git stashコマンドを使おうという考えです。git stashは,変更を一時的に退避させるコマンドであり実行するとcommitされたところまで状態を戻すことが出来ます。

git stash

しかし,この方法も本来のgit stashの使い方に則していなったり(感覚的に)、なんか気持ち悪いため断念....

他にも色々考えましたが,なかなかいい方法が思いつかない時に、先輩から「rsyncコマンドを使えば」 とアドバイスを頂いたのがrsyncとの初めての出会いです。

rsyncコマンドでは、コピー元ディレクトリとコピー先ディレクトリでの差分だけをコピーし、またコピー元ディレクトリになくてコピー先ディレクトリにあるファイルを削除するといったことも出来るため,まさに自分たちがやりたいと思っていたことを実現できる!魔法のコマンドです(笑)

いやぁrsyncコマンド最強ですね!!

使い方はこんな感じ

 rsync -avr --delete --stats pre/ next/ 

オプションの説明についてはこちらを参考にどうぞ:
はじめてrsyncを使う方が知っておきたい6つのルール

上記の例だとpreディレクトリ以下にあるファイルをnextディレクトリに同期させるコマンドになります。
–deleteオプションをつけることでnextディレクトリにはあってpreディレクトリにないファイルを削除することができます。

rsyncコマンドの説明

これをJenkinsに設定することによって目指すべく開発環境を構築することが出来ました!!
「rsync最強っす!!」

rsyncコマンドロゴ

次回は、これらの開発環境を整えるための手順を書いていきたいと思います。