2014年1月27日月曜日

VagrantのProvisioning機能を利用してVM起動時にGitリポジトリ作るようにしてみた

このエントリーをはてなブックマークに追加 はてなブックマーク - VagrantのProvisioning機能を利用してVM起動時にGitリポジトリ作るようにしてみた

Gitのリモートリポジトリを作る必要がありそうな感じだったので、試しにVagrantのProvisioning機能を利用してVM起動時にGitのリモートリポジトリを作るshellを作って試してみたのでその時のメモ。

前提条件

  • ホストマシーンはMacOSX10.9.1で、Gitはインストール済み
  • 仮想環境はCentOS6.4を利用
  • 仮想環境にGitのリモートリポジトリを作成し、ホストマシーンでcloneしたり出来るまでを実施

目次

  1. Vagrantのインストール
  2. Vagrantを利用したCentOS仮想環境の構築
  3. 仮想環境のCentOSの作成、起動
  4. 仮想環境にプライベートIPアドレスを設定する
  5. 仮想環境にGitのリモートリポジトリ作成
  6. まとめ
  7. 参考サイト

1.Vagrantのインストール

Vagrantを利用する際にはVirtualBoxが必要なので予めインストールしておきます。

Vagrantの公式サイトのDownloadからOSにあったVagrantをダウンロードしてインストールします。(たしかOK連打でOKだったはず)

2014年1月26日現在以下のOSのものが配布されているようです。

  • MacOSX(32bit or 64bit)
  • Windows(32bit or 64bit)
  • Debian/Ubuntu(32bit or 64bit)
  • CentOS/Fedora/Redhat(32bit or 64bit)

インストールが完了するとTerminalでvagrantコマンドが使えるようになっているはずです。

$vagrant --version
Vagrant 1.4.3

2. Vagrantを利用したCentOS仮想環境の構築

注意:Boxの取得は大きなファイルのダウンロードとなる為、通信速度が早い所で実施するのがおすすめです

Vagrantで任意のOSの環境を構築する際に対応するOSのBoxというものが必要となります。

入手可能なBoxの一覧はこちらから確認できます。

取得したいBoxのURLが分かったらvagrant box addコマンドを利用してBoxを取得します。ざっくりの書式は以下の通りです。

vagrant box add {title} {url}

詳細を知りたいときはvagrant box add -hで調べて下さい。

titleにはvagrantで保存するBoxの名称を記載します。例えばcentos6_4という名称でBoxを保存したい場合は以下のようなコマンドを実行します。

$vagrant box add centos6_4 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130731.box

ダウンロード完了後、vagrant box listコマンドを使ってBoxの取得が出来ているか確認します。

$vagrant box list
centos6_4 (virtualbox)

上記のようになっていればダウンロードが完了しております。なお、Boxファイルの実態は~.vagrant.d/boxesにあります。

3. 仮想環境のCentOSの作成、起動

準備が出来たのでいよいよCentOSの仮想マシンを作成します。

適当な場所にVagrant用のフォルダを作成し、移動します。

$mkdir -p ~/vagrant/centos64/
$cd ~/vagrant/centos64/

上記の場所でvagrant initコマンドを実行し、仮想環境で利用するBoxを指定します。 先ほどダウンロードしたcentos6.4という名称のBoxを利用する場合には以下のコマンドとなります。

$vagrant init centos6_4

上記を実行するとカレントディレクトリにVagrantfileというものが作成されます。

中身を見ると分かりますが、このファイルの中で利用するBoxを何にするか記載してあります。

config.vm.box = "centos6_4"

また、その他仮想環境に関する設定情報などが本ファイルに記載してあります。

ちょっと話が逸れましたが、次にVMを起動します。 カレントディレクトリにVagrantfileがある場所で以下のコマンドを実施します。

$vagrant up

少し時間が経つとVMが起動したことが分かります。

起動後、以下のコマンドでSSHログインが可能です。

$vagrant ssh

上記でvagrantユーザーでログインができます。簡単ですねー。

その他VMを操作するコマンドとしてはよく利用するのは、シャットダウンさせるvagrant halt、中断させるvagrant suspend、また再会のvagrant resume、環境を破棄するvagrant destory、Vagrantfileの変更を再読みするvagrant reloadあたりでしょうか。詳細やその他コマンドは公式ドキュメントVagrant Documentを見て下さい。

4. 仮想環境にプライベートIPアドレスを設定する

GitリポジトリをVagrant上に作成してアクセスしたいのでVagrant環境に任意のプライベートIPアドレスを指定したいです。

上記の方法は簡単でVagrantfileを編集すればOKです。

#config.vm.network :private_network, ip: "192.168.33.10"

という記述が27行目当たりにあるのでコメントアウトを外します。

config.vm.network :private_network, ip: "192.168.33.10"

上記実施後、Vagrantfileを再読みさせたいのでvagrant reloadコマンドを利用します。

$vagrant reload

とするとVagrantfileが再読み込みされ、VMが再起動します。

vagrant sshしてifconfigコマンドなどを利用するとIPアドレスが設定されているか確認できるかと思います。

上記を利用して例えばvagrant上にapacheを立てて、ホストからhttp://192.168.33.10などでアクセスも可能です。(iptablesを設定している時は解除が必要な場合があります)

なお、Vagrantfileが存在するディレクトリとVMの/vagrant/配下は共有フォルダになっているのでファイルの受け渡しはこちらを利用すると便利です。

5. 仮想環境にGitのリモートリポジトリ作成

基本的な設定は終わったのでVagrantのCentOS6.4にGitのリモートリポジトリの環境を作ります。

と言っても普通に作ってはVagrantでも意味ないよね、という事でVagrantの起動時に自動的にソフトウェアなどをインストールするProvisioing機能を使ってGitリモート環境を作ってみます。(ChefやPuppetとも連携できるみたいですが使った事ないので残念ながら今回はシェルで。。。)

という事でやりかたですが、起動時にシェルを実行する場合にはVagrantfileに以下のような記述を追記します。

config.vm.provision "shell", path: "provision.sh"

上記のような記述をするとカレントディレクトリに存在するprovision.shをvagrant upした時に実行してくれます。

という事で起動と同時にリポジトリを作るシェルを作成してみました。

# install git
sudo yum -y install git

# create git group
sudo groupadd git

# add git group
sudo usermod -a -G git vagrant

# create git repository
sudo mkdir -p /var/public_git/.test.git
sudo git init --bare --shared /var/public_git/test.git
sudo chown -R root:git /var/public_git

少し、説明を記載します。

  • 2行目でGitをインストール
  • 5行目でGit用のgitグループを作成
  • 8行目でvagrantユーザー(sshでログインするユーザー)にgitグループを追加
  • 11行目でGit用のフォルダの/var/public_git/test.gitを作成
  • 12行目で作成したフォルダに共有リポジトリを作成
  • 13行目で作成したフォルダのグループをgitグループに変更

上記によってgitグループのユーザーはcloneが出来るようになります。

試しにホストのMacからgitグループとなっているvagrantユーザーでcloneしてみます。

下記コマンドを実行するとvagrantユーザーのパスワードが聞かれるのでパスワードのvagrantと入力するとcloneが成功する事が確認できます。

$git clone ssh://vagrant@192.168.33.10/var/public_git/test.git
Cloning into 'test'...
vagrant@192.168.33.10's password: 
warning: You appear to have cloned an empty repository.
Checking connectivity... done

また、試しにpushもしてみます。

$cd test
$touch abc.txt
$git add abc.txt
$git commit -m "First Commit"
$git push origin master

ついでにgit用のユーザーを追加して確認してみます。

$vagrant ssh
# 以降仮想環境での操作
$sudo useradd git_user -g git
$sudo passwd git_user
$exit

では追加したユーザー(git_user)で適当なディレクトリに移動し、cloneしてみます。

$git clone ssh://git_user@192.168.33.10/var/public_git/test.git

先ほどpushしたabc.txtも確認できます。

まとめ

上記のように一度シェルを作ってしまえば、例えば設定を誤ってしまった時も

$vagrant destroy
$vagrant up

とすればまた同じ環境が手に入るので便利です。複製も何個でも出来ますし、便利。

Vagrantは単語は知っていたのですが、そんなに学習コスト高くない割に恩恵が大きい気がします。 今後時間あるときはChefも勉強してみてもっと俺俺レシピを作りたいです!

参考サイト

2014年1月18日土曜日

CDN使う時にhttpとhttpsアクセスがある場合にエラーになった話

このエントリーをはてなブックマークに追加 はてなブックマーク - CDN使う時にhttpとhttpsアクセスがある場合にエラーになった話

Herokuに昔デプロイしたアプリを久々に見にいったらhttpsアクセスも許容するようになったらしく、その場合にCDNからのjQueryなどの読み込みに失敗しており、コンソールを見ると以下のようなエラーが表示されていました。

混在アクティブコンテンツ "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" の読み込みをブロックしました

どうやらSSLアクセスの場合、CDNもSSLにしろって事らしい。

でも単純にhttpsとか書き換えるんではなくてhttpsアクセスの時だけhttpsのCDNを見に行くと一番嬉しいと思って調べてたら以下のようにhttpを消すとアクセスに応じて取得先を変更してくれました。

How to fix a website with blocked mixed content

変更前

<script src="http//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

変更後

<script src="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

これで再デプロイしたらうまくできました。良かった。

2014年1月15日水曜日

ChromeDevToolsのMobile emulationを触ってみた

このエントリーをはてなブックマークに追加 はてなブックマーク - ChromeDevToolsのMobile emulationを触ってみた

GoogleChromeのDevToolsの機能でMobile emulationなるものが出来ていたのでちらっと確認したのでそのメモ。

以下に出来る事の抜粋を記載します。もっと出来る事がありそうですが、詳細はMobile emulationを確認下さい。

  • 各種スマホのエミュレーション
  • ピンチイン、ピンチアウト、スワイプ操作が出来る
  • 画面サイズ及びピクセル比の変更が可能
  • メディアタイプの切り替えが可能
  • User-Agentの変更も可能
  • 現在地の変更が可能

参考サイト

GoogleDevelopersのChromeDevToolsのページ

Mobile emulation

HTML5Rocksでの紹介ページ

Chrome DevTools for Mobile: Screencast and Emulation

目次

  1. 準備
  2. エミュレーターを起動させる
  3. 操作
  4. 画面サイズ及び縦横サイズを変える
  5. ピクセル比を変える
  6. メディアタイプの切り替え
  7. UserAgentの変更
  8. 現在地(緯度経度)の変更
  9. その他

1.準備

2014年1月14日現在では通常のMacのGoogleChrome(v31)では確認できなかったのでGoogle Chrome Canaryをインストールします。

インストール後、Chromeを起動し、右上の3本線のボタンを押下後、Tools→DeveloperToolsを起動させます。

DeveloperToolsを起動後、DeveloperToolsの右上の歯車のアイコンを押下します。

GeneralのShow ‘Emulation’ view in console drawer.の欄のチェックを有効化させます。

その後、画面下部にEmulationタブが出現しているのが確認できます。 もし、画面下部のタブが表示されない場合にはEscキーを押下して表示させてください。

2.エミュレーターを起動させる

Emulatorタブの画面左にある

  • Device
  • Screen
  • User Agent
  • Sensors

をクリックする事でミュレーターの詳細を設定する事が出来ます。

とりあえずGoogle Nexus4のエミュレーションを起動します。

  1. EmulatorタブのDeviceを選択し、セレクトボックスからGoogle Nexus4を選択します。
  2. Emulateボタンを押下します。

上記2ステップでChromeの画面が選択したスマホのエミュレーションを行う画面となります。

3.操作

PCのスクロールでスクロールできますが、タッチイベントのエミュレートも出来るのでクリックしながらスクロールする事でスワイプも可能です。

また、Shiftキーを押下しながらスクロールさせる事でピンチインピンチアウトの操作も可能です。

なお、以下でタッチ操作のエミュレーションを無効化出来ます。

  • EmulatorタブのSensorsを選択し、Emulate touch screenのチェックを外します

3.画面サイズ及び縦横サイズを変える

  1. EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
  2. Resolutionの値を変更する事で画面サイズを変更できます。

縦と横の画面サイズを設定する真ん中にあるボタンを押下する事で縦横のサイズを逆にする事が出来ます。

4.ピクセル比を変える

ピクセル比を変更できます。 これでMediaQueryでratioに関する記述を行った場合の確認も簡単に出来ます。

  1. EmulatorタブのScreenを選択し、Emulate Screenにチェックを入れます
  2. Device pixel ratioの値を変更します。

例えば以下のようなコードを書きます。(dataURIは略)

@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #image {
        background-repeat:no-repeat;background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
    }
}

上記の場合、ratioが2の場合にはid属性がimageの箇所に表示されますが、1に変更すると表示されなくなる事が確認出来ます。

5.メディアタイプの切り替え

  1. EmulatorタブのScreenを選択し、CSS mediaにチェックを入れます
  2. セレクトボックスから任意のmediaタイプを選択します。

こちらについては実際動作は未確認となっております。。。

6.UserAgentの変更

  1. EmulatorタブのUser Agentを選択し、Spoof user agentにチェックを入れます。
  2. セレクトボックスから任意の端末名を設定するかテキストボックスの値を直接書き換えます。

User Agent String.Comにアクセスすると適当に設定した値が表示されているのが確認出来ます。

7.現在地(緯度経度)の変更

現在地(緯度経度)のが変更が出来ます。

  1. EmulatorタブのSensorsを選択し、Emulate geolocation coordinatesにチェックを入れます。
  2. LatLonにそれぞれ値を入れます。

上記の状態でGPSを取得するようなページに遷移します。 Geolocation Demoに遷移するとブラウザから現在地取得して良いかの確認が表示されるので許可すると東京タワーの場所に移動した事が確認できます。

また、測位に失敗した(navigator.geolocation.getCurrentPositionでエラー)とさせたい場合にはEmulate position unavailableにチェックを入れます。

8.その他

加速度の設定だったり、ViewPortの設定?などその他色々出来るようですが、今日はとりあえずここまで。 時間があったら調べよう。。

2014年1月13日月曜日

HTML5プロフェッショナル認定試験を受験してみた

このエントリーをはてなブックマークに追加 はてなブックマーク - HTML5プロフェッショナル認定試験を受験してみた

HTML5プロフェッショナル認定試験のレベル1を受験してきて一応合格できたので自分のやった学習方法とか色々メモします。

以下参考サイトです。

LPI-Japanの公式サイト HTML5 Professional Certificaiton HTML5プロフェッショナル認定試験

HTML5認定試験策定で利用されている(?)wiki HTML5プロフェッショナル認定試験 (HTML5 Professional Certification) 試験開発Wikiサイト

目次

  1. HTML5プロフェッショナル認定試験とは?
  2. やってみた勉強方法
  3. 受験をしてみて

1.HTML5プロフェッショナル認定試験とは?

以下ざっくり記載します。詳細は公式サイトを見てください。

  • LPI-Japanがやっている。
  • 受験料金は15000円(税抜き)。
  • 受験申し込みは基本的にいつでも受験出来る。実際の試験はピアソンのテストセンターに行って受験する。
  • 受験の際にLPI-IDとピアソンのIDが必要となる。(どちらもWebからID作成可能)
  • Level1とLevel2があるが、2013年1月時点では受験できるのはLevel1のみ。Level2は現在策定中。
  • 試験時間は90分で問題数は約60問。
  • 約7割正解で合格。
  • 認定の優位性の期限があって5年間らしい。

また、以下にLevel1の試験範囲を記述します。

  • Webの基本知識
  • CSS3
  • 要素
  • レスポンシブWebデザイン
  • オフラインWebアプリケーション(概要とマニフェスト)

詳細は出題範囲(案)Detailed Objectivesを見てください。なお、それぞれに重要度があるので、勉強する際に確認しておくと良いと思われます。

また、上記の通り、Level1の場合、JavaScriptに関する詳細は範囲外です。(JSの読み込み方法とかは出てきますが)

2.やってみた勉強方法

上記を書く前に自分の状況を。

  • 所謂フロントエンジニアではないのでゴリゴリHTML/CSS書いた経験はない。たまに書く時はググりながら何とか書けるレベル。
  • Webシステムの作成経験はあり。(主にサーバーサイド)
  • HTML5自体は興味あって勉強会や情報を仕入れたりは積極的にしている。つもり。

以下に実際に僕がやった勉強法などを記載します。

また、以下に学習する上で大切だと思うポイントを記載します。

自分の実力と試験範囲を把握する

受験する人のスキルでどれぐらいどこの箇所を学習すれば良いか全然違ってくるのでまずは自分の実力を確認しましょう。

例えばフロントエンジニアの人でHTML/CSSゴリゴリ書いてますって人はwikiで試験範囲などを確認して少し復習するだけで良いかもしれません。

逆にWebシステム作成経験がない、HTML/CSSなどをほとんど書いた事がない人などの場合は、Webの基礎知識からまず学習した方が良いと思いますし、いきなり公式テキストをやるのではなく、ドットインストールの動画を見ながら初歩的な所から学習した方が良い気がします。(ドットインストールは初心者向けに説明してくれているので)

自分の場合、Webの基礎知識はある程度知っていたのであまりやらず、それ以外の箇所(特にHTML5要素/CSS3)を重点的に学習しました。

コードを書く

ただ内容を暗記してもそれはただの受験勉強になってしまって、全く意味がないのでしっかりコードを書いて、挙動を確認しましょう。

実際に書いてプロパティを変更するとどのような挙動になるかなど確認した方が頭にも入りやすいかと思います。(animationやtransitionら辺はコード書くと面白いです)

個人的には書くときのテキストエディタはSublime Textがおすすめです。 GruntのLiveReload機能を使って書くとエディタで保存するタイミングでブラウザが自動更新されたりするので便利ですが、そもそもGrunt何って人ははまりそうですし、別にやらなくて良いかと思います。

英語で覚える

タグ名やプロパティは基本的に英語の名称(または略語)だったりするのですが、その名称もしっかり覚えるべきだと個人的には思います。

例えば<ol><li>要素もそのまま覚えるのではなくてそれぞれOrdered listUnordered listと覚えるとそれぞれの要素の挙動も忘れる事がないと思います。

3. 受験をしてみて

78点(えっ!)というそこまで余裕ではない点数ではありましたが、合格できました。

  • HTML5の試験だけどそれだけに特化してる訳ではなく、Webの基礎知識だったり、HTML/CSSの基礎も学習をする事が出来るのでその辺りの知識を整理出来たのは良かった。
  • 本資格を持っている=書ける、という訳ではない。実際の業務ではレガシーブラウザへの対応だったり、JavaScriptを使うことがほとんどあると思われるがその辺りの話はないため。また、試験内容も基本的には知識を問うものが中心となっているため。(知識は知識で大切)

また、受験を踏まえ、どのような人が受験すると良いと思ったかも記載しておきます。

  • HTML5に興味ある人
  • デザイナーだったりフロントエンジニアの人
  • サーバーサイドエンジニアでたまにHTML/CSS書いたりする人でもっと知識を整理したい人

資格の有用性?という意味ではまだ試行された日が経ってないので、よく分かりませんが、個人的には勉強するきっかけになったので良かったかなーと。