アットウィキロゴ

Cloud9について

Cloud9
WEBサービス開発の学習にCloud9というサービスを使用します。
このサービスでは元々開発環境の下準備が整った場所でWEBサービスの開発を開始することが出来るので、(特にWindowsで手間のかかる)環境構築で悩む必要がありません。
また、Google Choromeなどのブラウザ上で全ての操作が完結する為、OSなどの差異を気にすることなく様々な便利機能を利用することが出来ます。




Mac ローカル環境構築

ここでは、Cloud9を使用しないMacユーザー向けにRuby学習をするための環境構築について説明していきます。該当しない方はスキップして下さい。


Command Line Tools

Macで環境構築をする為にAppleが提供するCommand Line Toolsというキットを導入しておきます。
ソフトをダウンロードするサイトにアクセスするために、事前にApple IDを作成しておきましょう。

Appleのデベロッパーサイトにログインする

Command Line Toolsをダウンロードするため下のサイトにApple IDを使ってログインします。
Appleデベロッパーサイト



Appleデベロッパーサイト

Command Line Toolsをダウンロードする

ログインしたら、左のメニューから「developer tools」だけに
チェックを入れてリストを表示します。

その中に「Command Line Tools」があると思います。
自分のOSにあったdmgファイルをダウンロードしましょう。
画像ではMavericksなので下の図のものをダウンロードします。
Command Line Toolsダウンロード

Command Line Toolsをインストールする

ダウンロードされたdmgファイルをダブルクリックで起動すると、
pkgファイルが現れます。これをダブルクリックで起動します。

Command Line Toolsインストール1

インストール画面が現れるので「続ける」を押します。

Command Line Toolsインストール2

契約承諾も「続ける」を押します。

Command Line Toolsインストール3

インストール画面が出たら「インストール」を押します。

Command Line Toolsインストール4

パスワードを求められるので入力します。

Command Line Toolsインストール5

インストールが完了したら、「閉じる」を押しましょう。

Command Line Toolsインストール6

インストール完了です。


homebrew / homebrew-cask

Mac上で環境構築をする際、様々なソフトウェアのダウンロードなどを単純化してくれるパッケージ管理システムと呼ばれるものがいくつかあります。
今回はその中のhomebrewというものを使用します。

まずはhomebrewをインストールするためのコマンドをターミナル上で実行してください。


次にインストールしたhomebrewのアップデートをします。

$ brew update

brewに問題がないかチェックする

brew doctorコマンドを実行してhomebrewに問題がないかチェックします。
問題がなければ、Your system is ready to brew.とでます。

ここで環境の差によりErrorやWarningがでる場合があります。
出力されるErrorやWarningによって対処方法が違ってきますので、
ネットを中心に問題を解決します。
「brew doctor warning」などで検索すると以下のようなサイトがヒットし、
様々なErrorやWarningへの対処法を見ることができます。
homebrew brew doctorトラブルシューティング
こちらの記事を参考にErrorやWarningを解決してください。

homebrew cask

続いてhomebrew-caskをインストールします。
homebrew-caskはMacのより多くのアプリケーションをhomebrewで管理できるように出来る拡張機能です。

下記コマンドでインストール及びアプリケーションをインストールする場所を確保しましょう。

$ brew tap phinze/homebrew-cask
$ brew install brew-cask
$ export HOMEBREW_CASK_OPTS="--appdir=/Applications"


開発ツールの導入

開発に必要なツール、及び便利なツールをインストールしていきます。
今回は作業環境が揃えやすいため、自分のパソコンの中にもうひとつ擬似的なコンピュータ(以下仮想サーバ)を設置して、そこにアクセスして開発を勧めることにします。

なお、Alfredというアプリケーション起動用ソフトでは、homebrew-caskを使用すると特別な設定が必要なため予め行っておくこととします。
下記コマンドでAlfredのインストールを行って下さい。

$ brew cask install alfred
$ brew cask alfred status

Errorが出た場合brew cask uninstall alfredを実行後、
AppCleaner等を導入して既存のalfredを削除してから入れなおして下さい。

次に各種ツールをまとめてインストールします。
下記コマンドを入力して下さい。
なお、”Running installer for virtualbox; your password may be necessary.”と出たらパスワードを入力して下さい。

$ brew cask install sublime-text google-chrome virtualbox vagrant

Alfredで各アプリケーションが見えるように下記コマンドで設定します。

$ brew cask alfred link

vagrantのインストール確認

vagrantの動作状態を確認する為にvagrant -vを実行します。
バージョン情報が表示されていれば問題ありません。

$ vagrant -v
Vagrant 1.6.5


開発ツールの概要

簡単に導入したツールの紹介を行います。

Alfred
ランチャーと呼ばれるソフトです。
ショートカットでプログラムの起動が簡単に行えるようになります。

Google Chorome
GoogleのWEBブラウザ。
始めから開発者用のWEBページ解析ツールが付いている為後々使用します。

Sublime Text 2
最近良く使われる高機能なテキストエディタです。プログラムの編集に使用します。

Virtual Box
仮想サーバを作るツールです。
Railsなどのプログラムを動作させる為の環境を作ります。

Vagrant
仮想サーバの設定などを簡単にしてくれるツールです。
この後に行う手順によりプログラムの動く環境を揃えたりすることが出来ます。


仮想サーバの準備

Ruby on Railsの開発に必要なものを一式揃えたbox(仮想サーバのテンプレート)のサーバの設定を記したVagrantfileを用意しています。
これを使用することで開発環境の整った仮想サーバを導入・立ち上げることができます。

まず、作業用のディレクトリを作成します。

$ cd
$ mkdir work
$ cd work

サーバの設定が書かれたVagrantfileというものをダウンロードします。
下記コマンド(1行)を実行して下さい。

 % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                Dload  Upload   Total   Spent    Left  Speed
100 1255 100 1255 0 0 6182 0 --:--:-- --:--:-- --:--:-- 6675


仮想サーバの立ち上げ・ログインを実施

仮想サーバを実際にサーバの立ち上げてログインを行ってみましょう。
Vagrantfileを落としてきた作業ディレクトリでvagrant upコマンドを行います。
なお、初回のみBoxの取り込みを行う為、通常のサーバ立ち上げより時間がかかります。

$ vagrant up

※仮想サーバ起動中に接続を試みる為Warningが出ますが無視して下さい。
※timeoutが続いて接続に失敗した場合、vagrant haltコマンドで停止、再度vagrant upを行ってみてください。

サーバが立ち上がったらvagrant sshコマンドで仮想サーバにログインしてみましょう。
rails -vのコマンドでRuby on Railsのバージョンが4.0.5と表示されたら開発用の仮想サーバ設置は完了です。

$ vagrant ssh

なお、仮想サーバのログインをやめるには”exit”コマンドを実行します。
サーバの停止は”vagrant halt”コマンドで実行できます。
パソコンを落とす場合必ず仮想サーバのシャットダウンを行って下さい。

余裕のある方はドットインストールのVagrant入門を覗いてみると理解が深まるでしょう。
http://dotinstall.com/lessons/basic_vagrant


Finderからの接続

導入したファイルサーバはFinderから参照できるようになっています。
Finderを開いて上部のメニューから[移動]→[サーバへ接続]を選択して下さい。
smb://192.168.33.33と入力すると仮想サーバの中身(vagrantのhomeディレクトリ)が表示されます。

Finderからの操作


Sublime Text 2 コマンド起動設定

テキストエディタのSublimeText2をsublまたはrmateのコマンドで、
リモートサーバ上のファイルをsubl hoge.txtというように起動したい人向けの設定を行います。
(不要な方は読み飛ばして下さい)

Sublime Text 2 のパッケージをインストール出来るように、パッケージコントローラを導入します。
上部メニューの[View]→[Show Console]で出現する入力欄に下記コマンド(1行)を入力して実行します。

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

ST2PackageControllerInstall
実行後Sublime Text 2 を再起動します。

“Ctrl + Shift + P” または上部メニューの[Sublime Text 2] → [Preferences] → [Package Control]後に”install”を入力して、
“Pavkage Control: Install Package”を選択します。

ST2rsubInstall_1

続けて”rsub”と入力してrsubパッケージを選択してインストールします。

ST2rsubInstall_2

ローカルPCで下記コマンドを実行します。

$ vagrant ssh-config >> ~/.ssh/config
$ open ~/.ssh/config

テキストエディタが開いたら下記内容を図のように書き加えます。
RemoteForward 52698 127.0.0.1:52698

ST2Port設定

これでssh devsvとしてログインした場合、subl hoge.txtのようにSublime Text 2で編集出来るようになります。
※ただし、Sublime Text 2自体を起動しておく必要があるようです。


まとめ

以上で開発に必要な環境が揃えられました。
少し長くなりましたが、以上でMac編 環境構築は終了です。
あとはRubyやRailsを使った基礎から実践的なコードの書き方、
WEBアプリケーション開発の仕方を学習していきましょう。

完了ボタンまでスキップ




Windows ローカル環境構築

ここでは、Cloud9を使用しないWindowsユーザー向けにRuby学習をするための環境構築について説明していきます。該当しない方はスキップして下さい。


Chocolatey

Windowsで使用する開発ツールを簡単に導入する為に、パッケージ管理ソフトと呼ばれるもののひとつであるChocolateyを使用します。これにより、Windowsの各種開発ツールのインストールやアップデートが簡単に行えるようになります。

インストールの実施

まず、キーボード上のWindowsキーを押して、”cmd”と入力します。
プログラムの候補としてコマンドプロンプトが出てくるので、右クリックして「管理者として実行」を選択します。

コマンドプロンプトを管理者として実行
※「次のプログラムにこのコンピュータへの変更を許可しますか?」というダイアログが出てきた場合は「はい」を選択します。

コマンドプロンプトが立ち上がったらコマンド部分(”C:>“の後ろ)をコピーした後に、コマンドプロンプトを右クリックして「貼り付け」を選択して実行して下さい。
なお、どこのフォルダで実行してもかまいません。

C:\> @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex *1" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

インストールの確認

choco versionコマンドを実行して、下記のように表示されることを確認します。

C:\> choco version

found : 0.9.8.27
name : chocolatey
latestCompare : 000000000000.000000000009.000000000008.000000000027
verMessage : Latest version installed
latest : 0.9.8.27
foundCompare : 000000000000.000000000009.000000000008.000000000027


開発ツールの導入

各種ツールを導入してRuby on Railsの開発環境を構築していきます。
開発は自分のパソコンの中に作業を行う擬似的な別のパソコン(以下仮想サーバ)を作成して、そこへアクセスするという形で行います。
この方法を用いることで以下のようなメリットがあります。
•Ruby on Railsの拡張機能はWindows上で動作するように作られていないことがある為、環境によるトラブルを避けられる
•後々Linuxのツールや仕組みを活用できるので応用が効く。
•Linuxコマンドなどの操作や仕組みに慣れることが出来る。

なお、このように仮想サーバを使用する方法はPHP(WordPress)など他のWEB開発技術でも用いられることがあります。

では、早速ツールをインストールしてみましょう。
管理者権限をもたせたコマンドプロンプトから以下のコマンドを実行します。 

C:\> cinst GoogleChrome sublimetext2 virtualbox vagrant git

vagrantのインストール確認

インストールに使用したコマンドプロンプトは閉じて、プログラムメニューか、Windowsキーの後に“git bash”と入力してGit Bashを起動します。
vagrantの動作状態を確認する為にvagrant -vを実行します。

$ vagrant -v
Vagrant 1.6.5

開発ツールの概要

簡単に導入したツールの紹介をしておきます。

Google Chorome
GoogleのWEBブラウザ。
始めから開発者用のWEBページ解析ツールが付いている為後々使用します。

Sublime Text 2
最近良く使われる高機能なテキストエディタです。プログラムの編集に使用します。

Virtual Box
仮想サーバを作るツールです。
Railsなどのプログラムを動作させる為の環境を作ります。

Vagrant
仮想サーバの設定などを簡単にしてくれるツールです。
この後に行う手順によりプログラムの動く環境を揃えたりすることが出来ます。

Git
プログラムの歴史を管理する為のツールです。
プログラムを作っていく上で最近では必須のツールです。
また、Windowsの場合、Gitと一緒にGit Bashというものがついてくるので、以降コマンドプロンプトの代わりに使用します。


仮想サーバの準備

Ruby on Railsの開発に必要なものを一式揃えたbox(仮想サーバのテンプレート)のサーバの設定を記したVagrantfileを用意しています。
これを使用することで開発環境の整った仮想サーバを導入・立ち上げることができます。

まず、作業用のディレクトリを作成します。

$ cd
$ mkdir work
$ cd work

サーバの設定が書かれたVagrantfileというものをダウンロードします。
下記コマンド(1行)を実行して下さい。

$ curl -Lo Vagrantfile http://s3-ap-northeast-1.amazonaws.com/samurai-online-up
loads/tools/Vagrantfile
 % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                Dload  Upload   Total   Spent    Left  Speed
100 1255 100 1255 0 0 6182 0 --:--:-- --:--:-- --:--:-- 6675


仮想サーバの立ち上げ・ログインを実施

仮想サーバを実際にサーバの立ち上げてログインを行ってみましょう。
Vagrantfileを落としてきた作業ディレクトリでvagrant upコマンドを行います。
なお、初回のみBoxの取り込みを行う為、通常のサーバ立ち上げより時間がかかります。

$ vagrant up

※仮想サーバ起動中に接続を試みる為Warningが出ますが無視して下さい。
※timeoutが続いて接続に失敗した場合、vagrant haltコマンドで停止、再度vagrant upを行ってみてください。

サーバが立ち上がったらvagrant sshコマンドで仮想サーバにログインしてみましょう。
rails -vのコマンドでRuby on Railsのバージョンが4.0.5と表示されたら開発用の仮想サーバ設置は完了です。

$ vagrant ssh

なお、仮想サーバのログインをやめるには”exit”コマンドを実行します。
サーバの停止は”vagrant halt”コマンドで実行できます。
パソコンを落とす場合必ず仮想サーバのシャットダウンを行って下さい。

余裕のある方はドットインストールのVagrant入門を覗いてみると理解が深まるでしょう。
http://dotinstall.com/lessons/basic_vagrant


エクスプローラからの接続

導入したファイルサーバはエクスプローラーから参照できるようになっています。
適当なフォルダを開いてパスに¥¥192.168.33.33と入力すると仮想サーバの中身(vagrantのhomeディレクトリ)が表示されます。

コマンドプロンプトを管理者として実行


Sublime Text 2 コマンド起動設定

テキストエディタのSublimeText2をsublまたはrmateのコマンドで、
リモートサーバ上のファイルをsubl hoge.txtというように起動したい人向けの設定を行います。
(不要な方は読み飛ばして下さい)

Sublime Text 2 のパッケージをインストール出来るように、パッケージコントローラを導入します。
“Ctrl + `”または、メニューの[View]→[Show Console]で出現する入力欄に下記コマンド(1行)を入力して実行します。

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

ST2PackageControllerInstall
実行後Sublime Text 2 を再起動します。

“Ctrl + Shift + P” またはメニューの[Preferences] → [Package Control]後に”install”を入力して、
“Pavkage Control: Install Package”を入力・選択します。

ST2rsubInstall_1

続けて”rsub”と入力してrsubパッケージを選択してインストールします。

ST2rsubInstall_2

ローカルPCで下記コマンドを実行します。

$ vagrant ssh-config >> ~/.ssh/config
$ notepad ~/.ssh/config

ノートパッドが開いたら下記内容を図のように書き加えます。
RemoteForward 52698 127.0.0.1:52698
ST2Port設定

これでssh devsvとしてログインした場合、subl hoge.txtのようにSublime Text 2で編集出来るようになります。
※ただし、Sublime Text 2自体を起動しておく必要があるようです。


まとめ

以上で開発に必要な環境が揃えられました。
少し長くなりましたが、以上でWindows編 環境構築は終了です。
あとはRubyやRailsを使った基礎から実践的なコードの書き方、
WEBアプリケーション開発の仕方を学習していきましょう。










<

インストラクターへの質問の仕方



初学者におすすめするプログラミングの始め
最終更新:2015年01月13日 05:12

*1 new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'