Symfony2プロジェクトをGitLabで管理してVagrantで立てたJenkinsでCIする（３）

PHP Symfony Vagrant Chef Git GitLab Jenkins CI

第３回です。

前回のおさらい
イテレーション A： Symfony2でプロジェクトをはじめる
Symfony2のプロジェクトをGitLabで管理し、PHPUnitを単体で実行できるようになりました。

今回の内容
Phingビルドツールを導入し、PHPUnitをPhingから実行できるようにします。

いまどこ？

  1. イテレーション 0： 準備
    1. タスク 0-1： 必要なソフトウェアをインストールする
    2. タスク 0-2： GitLabのアカウントを作成する
  2. イテレーション A： Symfony2でプロジェクトをはじめる
    1. タスク A-1： Symfony2プロジェクトを作成する
    2. タスク A-2： GitLabでソースコードを管理する
    3. タスク A-3： PHPUnitを導入する
  3. イテレーション B： Phingでプロジェクトをビルドする　←いまココ！
    1. タスク B-1： Phingを導入する
    2. タスク B-2： PhingとPHPUnitを連携する
  4. イテレーション C： JenkinsをVagrantで構築する
    1. タスク C-1： VMを初期化する
    2. タスク C-2： 構築に必要なCookbooksを取得・作成する
    3. タスク C-3： Jenkinsを起動する
  5. イテレーション D： JenkinsでCIする
    1. タスク D-1： Jenkinsにプロジェクトを設定する
    2. タスク D-2： テストレポートを表示できるように設定する
    3. タスク D-3： コードカバレッジレポートを表示できるように設定する
  6. イテレーション E： 各種ツールの導入
    1. タスク E-1 PHPMDを導入する
    2. タスク E-2 PHPCSを導入する

イテレーション B： Phingでプロジェクトをビルドする

Phingってなぁに？

PHing Is Not GNU make; it's a PHP project build system or build tool based on ​Apache Ant.

http://www.phing.info/
タスク B-1： Phingを導入する

  • composerで依存関係を追加
C:\workspace\Symfony2>php composer.phar require phing/phing 2.5.*
composer.json has been updated
Loading composer repositories with package information
（中略）
Installing assets using the hard copy option
Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework
Installing assets for Acme\DemoBundle into web/bundles/acmedemo
Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution

  • 実行してみる
C:\workspace\Symfony2>bin\phing
Buildfile: build.xml does not exist!

「build.xmlがない！」と怒られます。


タスク B-2： PhingとPHPUnitを連携する

プロジェクトのルート（C:\workspace\Symfony2）に「build.xml」を作成します。

Gistでこんな素晴らしいものを発見したので、利用させてもらいます！
Phing build.xml for Symfony2 projects
ただし、phpmdとかphpcsとかphpdocとか、今は必要のないものが含まれているのでPHPUnitに絞ります。
結果、以下のような内容となりました。

<?xml version="1.0" encoding="UTF-8"?>
<project name="Symfony2" basedir="." default="build:main">
    <!-- Properties -->
    <property name="dir.app" value="${project.basedir}/app" />
    <property name="dir.src" value="${project.basedir}/src" />
    <property name="dir.bin" value="${project.basedir}/bin" />
    <property name="dir.build" value="${project.basedir}/build" />
    <property name="dir.reports" value="${dir.build}/logs" />
    <property name="dir.reports.coverage" value="${dir.reports}/coverage" />

    <!-- Filesets -->
    <fileset id="sourcecode" dir="${dir.src}">
        <include name="**/*.php" />
    </fileset>

    <!-- Default target -->
    <target name="build:main"
            depends="build:clean, build:prepare, build:test"
            description="Run all test and build everything" />

    <!-- Test target -->
    <target name="build:test"
            depends="test:unit"
            description="Executes all tests.." />

    <!-- Project build clean -->
    <target name="build:clean" description="Clean up build directories.">
        <echo msg="Cleaning build directories ..." />
        <delete dir="${dir.build}" verbose="true" />
    </target>

    <!-- Project build prepare -->
    <target name="build:prepare" description="Create build directories.">
        <echo msg="Creating build directories ..." />
        <mkdir dir="${dir.build}" />
        <mkdir dir="${dir.reports}" />
        <mkdir dir="${dir.reports.coverage}" />
    </target>

    <!-- Unit tests -->
    <target name="test:unit" description="Executes unit tests.">
        <echo msg="Running unit tests ..." />
        <exec command="${dir.bin}/phpunit
            --log-junit       ${dir.reports}/phpunit.xml
            --coverage-clover ${dir.reports.coverage}/clover.xml
            --coverage-html   ${dir.reports.coverage}/
            -c ${dir.app}"/>
    </target>
</project>

オリジナルのものからの変更点として、${dir.bin}プロパティを定義してphpunitコマンド呼出し時に利用しています、くらいです。

  • 実行してみる。
C:\workspace\Symfony2>bin\phing -logger phing.listener.DefaultLogger
Buildfile: C:\workspace\Symfony2\build.xml

Symfony2 > build:clean:

     [echo] Cleaning build directories ...
   [delete] Directory C:\workspace\Symfony2\build does not exist or is not a directory.

Symfony2 > build:prepare:

     [echo] Creating build directories ...
    [mkdir] Created dir: C:\workspace\Symfony2\build
    [mkdir] Created dir: C:\workspace\Symfony2\build\logs
    [mkdir] Created dir: C:\workspace\Symfony2\build\logs\coverage

Symfony2 > test:unit:

     [echo] Running unit tests ...

Symfony2 > build:test:


Symfony2 > build:main:


BUILD FINISHED

Total time: 1.9367 second

「-logger phing.listener.DefaultLogger」はANSIカラーシーケンスを出力しないようにするためにつけています。（コマンドプロンプトだとシーケンスがそのまま表示されてしまうので）

buildディレクトリ配下にテストの結果、カバレッジレポート等が出力されます。

確認として、HTML形式のカバレッジレポート「build\logs\coverage\index.html」を閲覧してみます。
以下のようになっていればOKです。

f:id:piccagliani:20130520163815p:plain

最後に

  • composer.json
  • composer.lock

がPhingの追加によって変更されています。
そして、

を新たに作成しました。
コミットして、GitLabへプッシュして（ry

以上です。

第４回はイテレーション C： JenkinsをVagrantで構築する

Symfony2プロジェクトをGitLabで管理してVagrantで立てたJenkinsでCIする（２）

PHP Symfony Vagrant Chef Git GitLab Jenkins CI

第２回です。

前回のおさらい
イテレーション 0： 準備
必要となるソフトウェアのインストール等、進めるための準備をしました。

今回の内容
Symfony2のプロジェクトを作成し、GitLabで管理します。
また、PHPUnitを導入してテストを実行できるようにします。

おことわり
Symfony2でどのようにアプリケーションを構築するか、については本来の目的から離れるため、省略しSymfony2に含まれているデモアプリケーションを利用します。

いまどこ？

  1. イテレーション 0： 準備
    1. タスク 0-1： 必要なソフトウェアをインストールする
    2. タスク 0-2： GitLabのアカウントを作成する
  2. イテレーション A： Symfony2でプロジェクトをはじめる　←いまココ！
    1. タスク A-1： Symfony2プロジェクトを作成する
    2. タスク A-2： GitLabでソースコードを管理する
    3. タスク A-3： PHPUnitを導入する
  3. イテレーション B： Phingでプロジェクトをビルドする
    1. タスク B-1： Phingを導入する
    2. タスク B-2： PhingとPHPUnitを連携する
  4. イテレーション C： JenkinsをVagrantで構築する
    1. タスク C-1： VMを初期化する
    2. タスク C-2： 構築に必要なCookbooksを取得・作成する
    3. タスク C-3： Jenkinsを起動する
  5. イテレーション D： JenkinsでCIする
    1. タスク D-1： Jenkinsにプロジェクトを設定する
    2. タスク D-2： テストレポートを表示できるように設定する
    3. タスク D-3： コードカバレッジレポートを表示できるように設定する
  6. イテレーション E： 各種ツールの導入
    1. タスク E-1 PHPMDを導入する
    2. タスク E-2 PHPCSを導入する

イテレーション A： Symfony2でプロジェクトをはじめる

タスク A-1： Symfony2プロジェクトを作成する

  • プロジェクトを格納するディレクトリを作る
C:\>mkdir workspace

  • composerをインストール
C:\>cd workspace

C:\workspace>curl -sS https://getcomposer.org/installer | php
#!/usr/bin/env php
All settings correct for using Composer
Downloading...

Composer successfully installed to: C:\workspace\composer.phar
Use it: php composer.phar

[参考]
　Composer

  • プロジェクトの作成
C:\workspace>php composer.phar create-project symfony/framework-standard-edition Symfony2 2.2.1
Installing symfony/framework-standard-edition (v2.2.1)
  - Installing symfony/framework-standard-edition (v2.2.1)
（中略）
Installing assets using the hard copy option
Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework
Installing assets for Acme\DemoBundle into web/bundles/acmedemo
Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution
プロジェクト名
「Symfony2」を指定しています。
使用するバージョン
2013/05/20時点での最新安定板2.2.1を指定しています。

[参考]
　Installing and Configuring Symfony (2.2) - Symfony

  • composerをプロジェクトルートに移動
C:\workspace>mv composer.phar Symfony2

後々便利なので。。。

  • ビルトインサーバーを利用して動作確認
C:\workspace>cd Symfony2

C:\workspace\Symfony2>php app/console server:run
Server running on localhost:8000

ブラウザで、http://localhost:8000/ にアクセスし、以下の画面が出てくればOKです。

f:id:piccagliani:20130520145007p:plain

  • デモアプリの動作確認

初期状態でデモアプリが入ってますので、動作確認をします。
http://localhost:8000/demo/ にアクセスし、以下の画面が出てくればOKです。

f:id:piccagliani:20130520151801p:plain


タスク A-2： GitLabでソースコードを管理する

C:\workspace\Symfony2>git init
Initialized empty Git repository in C:/workspace/Symfony2/.git/

C:\workspace\Symfony2>git add .
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory.
（中略）
warning: LF will be replaced by CRLF in web/config.php.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in web/robots.txt.
The file will have its original line endings in your working directory.

C:\workspace\Symfony2>git commit -m "Initial Commit"
[master (root-commit) 0ba6022] Initial Commit
warning: LF will be replaced by CRLF in .gitignore.
（中略）
 create mode 100644 web/apple-touch-icon.png
 create mode 100644 web/config.php
 create mode 100644 web/favicon.ico
 create mode 100644 web/robots.txt

GitLabにログインし、https://gitlab.com/projects/new にアクセスします。
「Project Name is」に「Symfony2」を入力して、「Create project」ボタンをクリックします。
f:id:piccagliani:20130520154341p:plain

C:\workspace\Symfony2>git remote add gitlab https://gitlab.com/{$user_name}/symfony2.git

C:\workspace\Symfony2>git remote -v
gitlab  https://gitlab.com/{$user_name}/symfony2.git (fetch)
gitlab  https://gitlab.com/{$user_name}/symfony2.git (push)
origin
upstream

  • GitLabにpush 
C:\workspace\Symfony2>git push gitlab master
Username for 'https://gitlab.com':
Password for 'https://{$user_name}@gitlab.com':
（中略）
Writing objects: 100% (86/86), 63.52 KiB, done.
Total 86 (delta 2), reused 0 (delta 0)
To https://gitlab.com/{$user_name}/symfony2.git
 * [new branch]      master -> master

タスク A-3： PHPUnitを導入する

  • composerで依存関係を追加
C:\workspace\Symfony2>php composer.phar require --dev phpunit/phpunit 3.7.*
composer.json has been updated
Loading composer repositories with package information
（中略）
Installing assets using the hard copy option
Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework
Installing assets for Acme\DemoBundle into web/bundles/acmedemo
Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution

本番環境では必要ないと思うので、「--dev」オプションをつけています。

  • テストを実行してみる
C:\workspace\Symfony2>bin\phpunit -c app
PHPUnit 3.7.20 by Sebastian Bergmann.

Configuration read from C:\workspace\Symfony2\app\phpunit.xml.dist

.

Time: 1 second, Memory: 21.25Mb

OK (1 test, 1 assertion)

デモアプリのテストケースが１個、実行されます。
テストコード自体は
C:\workspace\Symfony2\src\Acme\DemoBundle\Tests\Controller\DemoControllerTest.php
です。


最後に

  • composer.json
  • composer.lock

がPHPUnitの追加によって変更されていますので、コミットしてGitLabにも反映しておきます。

C:\workspace\Symfony2>git add composer.json composer.lock

C:\workspace\Symfony2>git commit -m "適当なメッセージ"

C:\workspace\Symfony2>git push gitlab master

以上です。

第３回はイテレーション B： Phingでプロジェクトをビルドする

Symfony2プロジェクトをGitLabで管理してVagrantで立てたJenkinsでCIする（１）

PHP Symfony Vagrant Chef Git GitLab Jenkins CI

Vagrantを触ってみた - think it overにも書いたように、

Web開発にまつわる開発環境を「モダンないい感じ」にしたい！！！

という目的でこれまでいろいろと調査・実践してきました。

その総集編を複数回に分けて取り纏めてみようと思います。

題して、

Symfony2プロジェクトをGitLabで管理してVagrantで立てたJenkinsでCIする

  • PHPerじゃない方ごめんなさい。
  • 当方Windowsですごめんなさい。

計画

以下を考えています。（途中で増減・見直し等あるかもしれません）

[2013/05/21] 見直し：「JenkinsでCIする」を分割

  1. イテレーション 0： 準備
    1. タスク 0-1： 必要なソフトウェアをインストールする
    2. タスク 0-2： GitLabのアカウントを作成する
  2. イテレーション A： Symfony2でプロジェクトをはじめる
    1. タスク A-1： Symfony2プロジェクトを作成する
    2. タスク A-2： GitLabでソースコードを管理する
    3. タスク A-3： PHPUnitを導入する
  3. イテレーション B： Phingでプロジェクトをビルドする
    1. タスク B-1： Phingを導入する
    2. タスク B-2： PhingとPHPUnitを連携する
  4. イテレーション C： JenkinsをVagrantで構築する
    1. タスク C-1： VMを初期化する
    2. タスク C-2： 構築に必要なCookbooksを取得・作成する
    3. タスク C-3： Jenkinsを起動する
  5. イテレーション D： JenkinsでCIする
    1. タスク D-1： Jenkinsにプロジェクトを設定する
    2. タスク D-2： テストレポートを表示できるように設定する
    3. タスク D-3： コードカバレッジレポートを表示できるように設定する
  6. イテレーション E： 各種ツールの導入
    1. タスク E-1 PHPMDを導入する
    2. タスク E-2 PHPCSを導入する

Webからはこれらの情報は断片は手に入るのですが、まとまったものがなかなか見当たらないので、頑張ってみます。

本題に入る前にちょっとだけ計画の背景を。

  • なぜSymfony2？
    • 建前：Composerに対応＆PSRに準拠している。
    • 本音：もともと慣れているので。
  • なぜGitLab？
    • 建前：ゆくゆくは社内開発で利用したい。
    • 本音：GitHub Enterpriseいいなー。たけぇなー。


では本題です。

初回は準備をします。

イテレーション 0： 準備

タスク 0-1： 必要なソフトウェアをインストールする

これからのタスクを進めるために必要な以下をインストールします。
多少のバージョンの違いは大丈夫なはず。たぶん。

インストールできたら、

それぞれを環境変数PATHに追加します。

なお、GitHub for WindowsについてきたGitの場合、

C:\Users\{$user}\AppData\Local\GitHub\PortableGit_ca477551eeb4aea0e4ae9fcd3358bd96720bb5c8\bin\

こんな感じのところに実体がいるはずです。

タスク 0-2：GitLabのアカウントを作成する

http://www.gitlab.com/ のヘッダーにある「Sign up」より、アカウントを作成しておきます。

以上です。

第２回：イテレーション A： Symfony2でプロジェクトをはじめる
第３回：イテレーション B： Phingでプロジェクトをビルドする
第４回：イテレーション C： JenkinsをVagrantで構築する
第５回：イテレーション D： JenkinsでCIする
第６回：イテレーション E： 各種ツールの導入

Vagrantとchef-soloでCentOS6.4にPHP5.4を入れる

Vagrant Chef PHP

調べても「どんぴしゃ！」な情報がなかったのでまとめておきます。

１．前提情報

  • OS
  • Vagrant
    • Vagrant version 1.0.7
  • 利用するbox

２．下ごしらえ

boxをadd、initして、upしておきます。
事件が起きた際にロールバックできるよう、sandboxモードをonにしておくと良いでしょう。

【参考】

また、クックブックを格納するためのディレクトリ「cookbooks」を「Vagrantfile」のある階層に作成しておきます。

３．iusリポジトリを追加するためのレシピを追加

yumからPHP5.4系をインストールするためには、ius等の外部リポジトリをyumに登録する必要があります。
yumリポジトリに関するクックブック、opscode-cookbooks/yum · GitHub を利用させてもらいます。

クックブックをcloneする
> cd cookbooks
> git clone https://github.com/opscode-cookbooks/yum
レシピをVagrantfileに追加

実際に利用するレシピは、「cookbooks/yum/recipes/ius.rb」 となります。
Vagrantfileの中ほどにある、chef-soloに関する記述部分を以下のように編集します。

  # Enable provisioning with chef solo, specifying a cookbooks path, roles
  # path, and data_bags path (all relative to this Vagrantfile), and adding 
  # some recipes and/or roles.
  #
  config.vm.provision :chef_solo do |chef|
    chef.cookbooks_path = "./cookbooks"
    chef.add_recipe "yum::ius"

    # You may also specify custom JSON attributes:
    chef.json = {
      'yum' => {
        'ius_release' => '1.0-11'
      }
    }
  end

chef.jsonに、iusのバージョン（1.0-11）を指定しています。
ただ、このバージョンは「cookbooks/yum/attributes/default.rb」内で

default['yum']['ius_release'] = '1.0-11'

というデフォルト指定がされていますので、省略しても大丈夫です。

なお、iusリポジトリを追加する場合、一緒にepelリポジトリも追加しなければなりませんが、
ius.rbの冒頭にある以下の記述によって自動的に行われます。

include_recipe "yum::epel"

package "epel-release"

４．PHP5.4をインストールするためのレシピを追加

せっかくなので、クックブックを作ってやってみました。

クックブックの作成

Vagrantfileのある場所で、knifeを使います。

> knife cookbook create php54 -o cookbooks
 ** Creating cookbook php54
 ** Creating README for cookbook: php54
 ** Creating CHANGELOG for cookbook: php54
 ** Creating metadata for cookbook: php54
レシピを記述

「cookbooks/php54/recipes/default.rb」を以下のように編集します。

%w(php54 php54-mbstring php54-pecl-xdebug).each do |package|
  yum_package package do
    action :install
  end
end
レシピをVagrantfileに追加

yumの下に追加します。

  # Enable provisioning with chef solo, specifying a cookbooks path, roles
  # path, and data_bags path (all relative to this Vagrantfile), and adding 
  # some recipes and/or roles.
  #
  config.vm.provision :chef_solo do |chef|
    chef.cookbooks_path = "./cookbooks"
    chef.add_recipe "yum::ius"
    chef.add_recipe "php54"

    # You may also specify custom JSON attributes:
    chef.json = {
      'yum' => {
        'ius_release' => '1.0-11'
      }
    }
  end

５．レッツ、クック！

> vagrant provision

でお料理できます。

が、

[default] Running provisioner: Vagrant::Provisioners::ChefSolo...
Shared folders that Chef requires are missing on the virtual machine.
This is usually due to configuration changing after already booting the
machine. The fix is to run a `vagrant reload` so that the proper shared
folders will prepared and mounted on the VM.

と言われたので、素直に従い、vagrant reloadしました。

でろでろ、と結構な出力がありますが、抜粋すると、、、

epelリポジトリの追加
INFO: Processing yum_key[RPM-GPG-KEY-EPEL-6] action add (yum::epel line 22)
INFO: Adding RPM-GPG-KEY-EPEL-6 GPG key to /etc/pki/rpm-gpg/

先にキーの追加をしていますね。

INFO: Processing package[epel-release] action install (yum::ius line 22)
INFO: package[epel-release] installing epel-release-6-8 from epel repository

epel-release-6-8が入りました。

iusリポジトリの追加
INFO: Processing remote_file[/tmp/vagrant-chef-1/ius-release-1.0-11.ius.el6.noarch.rpm] action create (yum::ius line 27)
INFO: remote_file[/tmp/vagrant-chef-1/ius-release-1.0-11.ius.el6.noarch.rpm] updated
INFO: remote_file[/tmp/vagrant-chef-1/ius-release-1.0-11.ius.el6.noarch.rpm] sending install action to rpm_package[ius-release] (immediate)
INFO: Processing rpm_package[ius-release] action install (yum::ius line 33)

rpmをローカルに落としてインストールしています。

phpのインストール
INFO: Processing yum_package[php54] action install (php54::default line 10)
INFO: yum_package[php54] installing php54-5.4.14-1.ius.el6 from ius repository
INFO: Processing yum_package[php54-mbstring] action install (php54::default line 10)
INFO: yum_package[php54-mbstring] installing php54-mbstring-5.4.14-1.ius.el6 from ius repository
INFO: Processing yum_package[php54-pecl-xdebug] action install (php54::default line 10)
INFO: yum_package[php54-pecl-xdebug] installing php54-pecl-xdebug-2.2.2-1.ius.el6 from ius repository

レシピ通り、３つインストールしています。

６．いただきます！

vagrant sshして、確認します。

yumのリポジトリの追加
$ ls -l /etc/yum.repos.d/
 total 44
 -rw-r--r--. 1 root root 1926 Feb 25 08:57 CentOS-Base.repo
 -rw-r--r--. 1 root root  638 Feb 25 08:57 CentOS-Debuginfo.repo
 -rw-r--r--. 1 root root  630 Feb 25 08:57 CentOS-Media.repo
 -rw-r--r--. 1 root root 3664 Feb 25 08:57 CentOS-Vault.repo
 -rw-r--r--  1 root root  278 May 13 08:04 epel.repo
 -rw-r--r--  1 root root  957 Nov  5  2012 epel.repo.rpmnew
 -rw-r--r--  1 root root 1056 Nov  5  2012 epel-testing.repo
 -rw-r--r--  1 root root 1090 Mar 25 19:08 ius-archive.repo
 -rw-r--r--  1 root root 1072 Mar 25 19:08 ius-dev.repo
 -rw-r--r--  1 root root 1013 Mar 25 19:08 ius.repo
 -rw-r--r--  1 root root 1090 Mar 25 19:08 ius-testing.repo

epel, iusの２つが追加されています。

php
$ php -v
PHP 5.4.14 (cli) (built: Apr 12 2013 10:52:14)
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies
    with Xdebug v2.2.2, Copyright (c) 2002-2013, by Derick Rethans


すばらしい！ごちそうさまでした！

sandboxをcommitするのを忘れずに！

クロスドメインなiframeの高さを自動調整する（easyXDM版）

Javascript

クロスドメインなiframeの高さを自動調整する（Porthole版） - think it over

にて、IEにおける動作に不安があったので、代替のeasyXDMについても試してみました。

１．easyXDMとは、

easyXDM is a Javascript library that enables you as a developer to easily work around the limitation set in place by the Same Origin Policy, in turn making it easy to communicate and expose javascript API’s across domain boundaries.

http://easyxdm.net/wp/

だ、そうです。
Porthole同様、背後ではpostMessageを利用しています。
なお、IE6, 7向けには NixTransportまたは、FlashTransportというもので実現しているようです。swfを置くアレ等ですね。（今回は調査してません）

続きを読む

クロスドメインなiframeの高さを自動調整する（Porthole版）

Javascript
(2013/04/03 16時20分 追記)

　IE系はこのエントリのコードでは全滅だった・・・・。しくしく。

(2013/04/03 16時50分 追記)

　IE9以上は動くようになった。

１．やりたいこと

クロスドメインなiframeの高さを自動調整したい！

２．前提情報

通常、iframeのsrcが親フレームと同じドメインの場合は、親フレームから子フレームのdomに直接アクセスを行い、高さの自動調整を実現することができます。
しかし、クロスドメインの場合はブラウザのセキュリティ制約上、子フレームのdomへの直接アクセスはできません。
それでも、どーーにかして、自動調整したい場合、モダンブラウザで実装されている、安全にクロスドメイン通信を可能にするためのメソッド「postMessage」を利用して実現することができます。

参考：https://developer.mozilla.org/ja/docs/DOM/window.postMessage

今回、「どーーにかしてーーー」という強いリクエストがあり、調査しました。

!!注意!!「postMessage」はIE6等の古いブラウザではそもそも実装されていませんので、この方法では実現できません。

３．利用するライブラリ

postMessageを利用して、クロスドメインなiframeとデータをやり取りするためのライブラリである、Porthole by ternarylabsを利用します。

クロスドメインでiframe内のコンテンツとメッセージの授受「Porthole」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログでも紹介されています。

続きを読む

Vagrantでsandboxを利用する

Vagrant

Saharaはコマンドラインから仮想マシンの状態をsandboxモード(変更をいつでも巻き戻せる)に変更できるプラグインだ。これを使うことで、例えばchefのレシピ作成やミドルウェアのインストールの評価などがやりやすくなる。

http://www.ryuzee.com/contents/blog/4310

なんとすばらしい。

早速やらねば！

１．前提情報

２．Saharaのインストール

以下のコマンドでインストールできます。

>vagrant gem install sahara

そうすると、利用可能なサブコマンドにsandboxが追加されます。

>vagrant
Available subcommands:
     box
     destroy
     gem
     halt
     init
     package
     provision
     reload
     resume
     sandbox
     ssh
     ssh-config
     status
     suspend
     up

３．sandboxの利用

３．１．sandboxモードに入る

起動中のVagrantディレクトリ（「Vagrantfile」のある場所）に移動し、

>vagrant sandbox on
[default] - Enabling sandbox
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%
３．２．試しにPHPをインストールしてみる
>vagrant ssh
Last login: Tue Apr  2 10:07:23 2013 from 10.0.2.2
Welcome to your Vagrant-built virtual machine.
[vagrant@localhost ~]$ sudo yum install php
[vagrant@localhost ~]$ php -v
PHP 5.3.3 (cli) (built: Feb 22 2013 02:51:11)
Copyright (c) 1997-2010 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2010 Zend Technologies

5.3.3が入りました。

３．３．sandboxのロールバック
>vagrant sandbox rollback
[default] - powering off machine
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%
[default] - roll back machine
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%
[default] - starting the machine again
３．４．先ほど入れたPHPは？
>vagrant ssh
Last login: Tue Apr  2 10:07:23 2013 from 10.0.2.2
Welcome to your Vagrant-built virtual machine.
[vagrant@localhost ~]$ php -v
 -bash: php: command not found

おお！ロールバックされてます！

４．その他の利用可能コマンド

  • sandboxモードを終了する
>vagrant sandbox off
[default] - switching sandbox off
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%

コミットされていない修正はロールバックされます。

  • sandboxに行った修正を確定する
>vagrant sandbox commit
[default] - unwinding sandbox
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%
[default] - fastforwarding sandbox
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%
unwinding
巻き戻し
fastforwarding
早送り

巻き戻して、早送り・・・。うん？

  • 現在sandboxモードかどうかを確認する
>vagrant sandbox status
[default] - snapshot mode is on

「sandbox mode」ではない・・・ぼそっ。。。

５．まとめ

  • sandboxを利用すれば気軽にいろいろ試すことができますね。
  • 使い方もRDBMSと似ているので直感的に理解できました。

ありがとうございます！