コラム

CTC教育サービス・ホーム　＞　コラム　＞　Ruby ＆ Rails　＞　第19回　WebブラウザでRailsを開発しよう！　～Nitrous.io の紹介（前編）～

Ruby ＆ Rails

CTC 教育サービス

[IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes

第19回　WebブラウザでRailsを開発しよう！　～Nitrous.io の紹介（前編）～ (藺藤卓実) 2015年7月

はじめに

　皆様、はじめまして。　ゼネットの藺藤と申します。
これまで本コラムを執筆していた弊社・松永ですが、2015年1月より青年海外協力隊・シニアボランティアとしてモザンビークへと出向となりました。　このため、松永に代わり、私が本コラムを担当させていただくことになりました。　よろしくお願いいたします。
　なお、海外での生活に慣れる頃を見計らい、再び松永にも一筆お願いしたいと思っています。　普段、日本で暮らしている私達とは一味違った視点からの内容になるのではと楽しみにしております。

　RubyとRails関連の話題としては、昨年末にRubyそしてRailsの最新版であるRuby 2.2.0 (*1)とRails 4.2.0 (*2)がそれぞれリリースされました。　新たに利用できるようになった便利な機能は次回以降のコラムで紹介していきたいと思います。　現在はこれらのパッチリリースとしてRuby2.2.1とRails4.2.1が利用できます。　また安定版として、Rails 4.1.10もリリースされています。　古いバージョンを利用されている方はアップデートを検討してください。

Rails開発を始めたい！　面倒な"環境構築作業"は不要です

　さて、今回は私が最近気になっているWebサービス「Nitrous.io」(*3)を紹介します。　 "Ruby & Rails"のテーマからは少々脱線した話題かな、とも思いますが、これを使って Rails アプリケーションを開発することも可能です。

　さっそく見てみましょう。

　Nitrous.ioはいわゆるPaaS型のサービスです。　アプリケーション開発のための完全な環境を利用できるばかりでなく、Webブラウザ上で操作できるIDE（画像参照）も提供されているため、ブラウザとインターネット接続さえあれば他に特別なツールを導入しなくても開発を始められます。　エディタは、変数やタグが色づけされていて見やすい画面ですね。　"黒い画面"が苦手、という方はお好みのカラースキームに変更することもできます。　画面下部にはターミナルが配置されており、「rails g」や「bundle install」等のコマンドはここで実行します。
　このIDEだけでも十分に開発が可能ですが、「いつものエディタを使って開発したい」というこだわり派の方には、そのための方法も提供されています。　こちらはコラムの後半で説明します。
　開発したアプリケーションの画面を確認したいときは、アプリケーション固有のURLが発行されるので、このURLにブラウザでアクセスして確認します。　URLはサーバ起動中に限り有効です。　このURLを教えることで、自分以外の人にもアプリケーションを公開できます。　試作したアプリケーションをブラウザ経由でさっと起動してデモンストレーションを始める...。　そのような使い方もできるでしょう。

　メールアカウントの登録さえ済ませれば、アプリケーション開発を始めるにあたって面倒な環境構築に時間をかけず、すぐにコードを書き始められるのが魅力です。　それでは早速、アカウントを作成してみましょう。

　Nitrous.ioのウェブページへ移動し、トップ画面からユーザ登録を行います。

　「ユーザ名」、「E-mail」、「パスワード」を入力し、ユーザアカウントを作成します。　新規アカウントを作成する際、確認のためのメールが送られてきますので、メールのインストラクションに従ってログインします。

　ログイン後にまず行うことは最初の"Box"の作成です。　"Box"とは（一つのアカウント内に通常、複数個存在する）仮想環境のことです。　「１アプリケーションのこと」と捉えてもよいでしょう。

　ここでは「開発言語・フレームワークの選択」、「Boxの名前」、「サーバを設置するリージョン」の３項目を入力します。
　サービス開始当初に比べ、サポートされている言語は徐々に増えているようです。　2015年3月現在ではRuby/Rails環境の他にも、Node.js、Python/Django、Go、PHP、Meteor の開発環境が用意されています。
　今回は（Rubyのコラムなので）フレームワークとしてRuby/Railsを選択します。　「Boxの名前」はアプリケーションにアクセスする際のURLの一部になりますが、ランダム生成される初期値のままでもよいでしょう。　「リージョン」は"East Asia"を選択することにします。　（「Download a Github repo」は空のままで構いません）

　「Create Box」を押して次の画面に進みましょう。

　このページではN2O（＝サーバ・リソースを利用するためのポイント）を獲得するための方法が示されますが、ここでは詳細は省略します。(*4)
　画面下部には先ほど作成した"Box"の稼働状況が表示されます。　"Box"の状態がprovisioning (準備中)からrunning(稼働中)に変わるまで少しだけ待ちます。　インジケータの色がイエローからグリーンに変わったのを確認したのち、次に進みます。

　さて、これでRailsアプリケーションを開発する準備が整いました。　現在の画面は、ブラウザ上で開発を行う際のメインとなるIDEの画面です。　画面の左上および中央のペインはそれぞれ、ディレクトリツリー、そしてエディタとなっています。　右上は共同作業時等に使えるチャットペインとなっています。　画面下部にはターミナルが配置されています。

　IDEでは以下のようなメニュー（機能）を利用できます。

「File」「Edit」「View」　ファイル保存、検索・置換、タブ切替え等の基本的な機能
「Collaborate」　共同でコーディングするための機能
「Autoparts」　Ruby等のパッケージを管理する機能
「Preview」　アプリケーションへのアクセスや、パスワード設定等の機能

　サーバ起動後であれば、「Preview」から実際のアプリケーションの画面表示を確認できます。　また、アプリケーションに対してパスワードを設定することでユーザ認証を有効化することもできます。　簡易的なものでも十分ならば、公開範囲を限定したい場合に活用できるでしょう。

　それでは実際に１つアプリケーションを作ってみます。　アプリケーションの名前は"first-app"とします。

cd workspace
rails new first-app

　サーバを起動してみましょう。

cd first-app
rails s

　Railsの起動メッセージがコンソールに表示されることを確認できたでしょうか。
　このようにして起動したサーバには、ユニークな（そして少々奇妙な）URLが割り当てられます。　もっとも、このURLを確認して、ブラウザのURL欄に打ち込む必要はありません。ブラウザでアクセスするには、画面上部のメニュー「Preview」から「Port 3000」を選択します。

　無事、Railsのウェルカムメッセージを見ることができました！
ここまでくれば、後はScaffoldで機能を作ることも容易にできることでしょう。

Boxの管理

　IDEの他に、もう一つ重要な画面があります。　Boxの管理画面です。　Boxの管理画面には、画面上部のメニュー「Boxes」から移動します。

　この画面では、現在利用しているBoxの情報が確認できます。
Nitrous.ioは無料で利用を開始でき、初めに一定量のN2Oがユーザに割り当てられます。　無料の範囲内で利用できるリソースは、メモリが500MB、ストレージ容量が1.5GB程度です。　より多くのリソースを利用したい場合、追加のN2Oを獲得または購入する必要があります。　まずは試しに使ってみようという目的であればリソースは十分と言えます。
　「IDE」ボタンはその名の通りIDE画面に移動するためのものです。　IDEを起動せずとも、端末だけで十分な作業の場合は「Terminal」を選択します。　いずれの場合も、アプリケーションの開発は通常のRails開発と同様に行えます。
　Boxの追加・削除や起動・停止等はこの画面から行います。　また、一度ログアウトした後、開発を再開したいときにもこの画面から開始することになります。

まとめ

　今回は「Nitrous.io」を使ってRails開発を始めるまでの手順を説明しました。　まだ紹介できていない、開発に便利な機能もありますが、こちらは次回紹介しますのでお楽しみに！
　Nitrous.ioは気軽に始められ、開発環境を構築する面倒な初期作業を省けます。　アイディアを素早く形にする方法の一つとして"アリ"だと思います。　ぜひ皆さんも試してみてください。

　それでは、Enjoy Ruby!