プログラミングの開発環境に便利!Cloud9の使い方【Rails・WordPressテンプレートの解説あり】

プログラミングの開発環境に便利な【Cloud9】の使い方を解説した記事です。登録方法、ワークスペースの作成、画像ファイルのアップ方法などを紹介。最後にはRuby on RailsとWordPressのテンプレートの使い方も解説。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

これからプログラミングを勉強するという初心者にとって、最初のハードルは開発環境の構築ではないでしょうか。

TechAcademyマガジンではこれまで、Ruby on Railsの開発環境XAMPPを使ったPHPの開発環境AndroidStudioを使ったアプリの開発環境などを紹介してきました。

 

それでも、「いち早くプログラミングをしてみたい」「もっと簡単にできないのか」と思う人もいるはずです。

今回はそんな人でも、Google Chromeなどのブラウザだけあれば開発環境が簡単に作れるCloud9というツールの使い方を紹介します。

 

なお、Cloud9はTechAcademyで開催するオンラインブートキャンプでも使用しています。

 

目次

本記事は下記の手順で紹介します。

記事の最後には、Ruby on Rails、WordPressのテンプレートを実際に使う方法も紹介するので、ぜひ試してみてください。

 

Cloud9とは

Cloud9(クラウド9)とはアプリケーションの開発やデータベースなどをクラウド環境で利用できるサービスです。IDE()としての機能が充実しており、GitHubやHerokuといった他のツールとの連携もスムーズに行えます。

ブラウザ上で動くため、PCに依存することなく開発環境を準備することができるのが利点です。また、無料で使うことができるのも良さのひとつです。

ただし、海外のサービスで日本語には対応していないので、その点だけご注意ください。

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

Cloud9の登録方法

それでは早速登録していみましょう。

 

まずは、Cloud9のサイトにアクセスしてください。

この画面の「SIGN UP」のボタンを押して登録するだけです。

cloud9

 

なお、GitHubのアカウントをお持ちの場合は、GitHubのアカウントでログインすることも可能です。

ここでGitHubでログインしておくと、あとでCloud9のコンソール上からGitHubの操作が行えるようになるのでおすすめです。

githubログイン

登録はこれだけで完了です。

 

ワークスペースの作成方法

登録ができたら、実際に操作をするワークスペースを作成してみましょう。

 

登録が完了するとダッシュボード画面が表示されるので、「Create a new workspace」ボタンを押してください。

ワークスペース作成

 

続いてこのような画面が表示されますので、入力していきます。

ワークスペース作成2

ワークスペース名は何でも構いませんので、ご自身が管理しやすい名前にしましょう。

続いて「Private」と「Public」を選ぶことができます。Cloud9には、画面を共有したりチームで開発することもできるという特徴があるので、他の人に共有したい場合などは「Public」にしておくことおをおすめします。(共有方法はあとで解説します)

また、テンプレートから選ぶことができますが、今回は「Custom」を選択しました。

 

これで「Create workspace」のボタンを押せばワークスペースの作成は完了です。

ダッシュボードに作成したワークスペースが表示されますので、「Open」を押して開いてください。このような画面が表示されたら成功です。

cloud9_01

 

基本的な使い方

使い始める前に知っておきたい3つの操作についてご紹介します。

 

ファイルとフォルダを作成する

ファイルを作成するには、左のフォルダが表示されている箇所で右クリックをして「New File」を選択すると作成できます。

cloud9_02

 

フォルダを作成する際も同じ要領で右クリックしてから「New Folder」を選択すると作成できます。

cloud9_03

 

ファイルをアップする

Cloud9では自分のPCにあるファイルを簡単にアップすることができます。 例えば、画像ファイルなどをアップして使うことが可能です。

アップするには、PCからアップするファイルをCloud9のフォルダに向かってドラッグ&ドロップします。

cloud9_04

 

すると、このようにファイルがアップできました。

cloud9_05

今回は画像ファイルをアップしましたが、他のファイルでもアップできます。

 

Apacheを起動してプレビューする

Cloud9では、Apacheを起動して開発している内容をプレビューすることができます。

ファイルを作成して「Run」のボタンをクリックすると、画面の下部にこのようなリンクが表示されるのでクリックしてください。

(今回は例として簡単なHTMLファイルを作成しました)

cloud9_09

 

すると、プレビューがCloud9上に表示されました。

cloud9_10

このプレビューはURLをコピーして自分が使っているブラウザで表示するもできます。

 

ワークスペースを共有する

Cloud9では、自分で開発しているワークスペースを他の人に共有することが可能です。 ただし、共有するにはちょっとした設定が必要になります。

ワークスペースの右上に「Share」のボタンをクリックするとこのような画面が表示されます。ここでPublicのチェックを外さないようにしましょう。

cloud9_06

 

エディタを共有するには、Editorに表示されているURL共有します。URLをクリックして、表示された「Copy」をクリックするとコピー可能です。このコピーしたURLを共有したい人に開いてもらいましょう。

cloud9_07

 

URLに他の人がアクセスすると「Notifications」に表示されますので、緑のボタンをクリックして許可するとそのユーザーが編集まで可能になります。ペアプログラミングなどもできるので便利です。

cloud9_08

 

また、毎回許可するのではなく、特定のユーザーに閲覧・編集の権限を付与することも可能です。

先ほどのShareボタンを押した時に表示される画面の下部に「Invite People」というフォームがあるので、共有したい人のユーザー名を入れて「Invite」ボタンを押してください。

cloud9_invite

 

このように表示されれば成功です。

cloud9_invite_completed

 

テンプレートを使ってみる

ここまでは「Custom」を使って紹介してきましたが、Cloud9には便利なテンプレートが用意されています。今回は、Ruby on RailsとWordPressのテンプレートを実際に使ってみます。

 

Ruby on Railsのテンプレート

テンプレートの1つ目として、Ruby on Railsのテンプレートを使用します。

まずはテンプレートで「Ruby」を選びましょう。

ruby

 

選択して開くだけでRuby on Railsの開発環境が構築できた状態になります。

Rails

 

Railsアプリケーションを起動する場合は、通常「rails s」コマンドを使用しますが、Cloud9では下記のコマンドを入力します。コンソール部分でこのように入力してください。

$ rails s -p $PORT -b $IP

コンソール

 

コマンド入力後、このように表示されればサーバは正常に起動しています。

=> Booting WEBrick
=> Rails 4.1.6 application starting in development on http://0.0.0.0:8080
=> Run `rails server -h` for more startup options
=> Notice: server is listening on all interfaces (0.0.0.0). Consider using 127.0.0.1 (–binding option)
=> Ctrl-C to shutdown server
[2015-06-08 05:10:45] INFO WEBrick 1.3.1
[2015-06-08 05:10:45] INFO ruby 2.1.5 (2014-11-13) [x86_64-linux]
[2015-06-08 05:10:45] INFO WEBrick::HTTPServer#start: pid=2367 port=8080

 

起動するとこのようにURLが表示されるので、クリックしてアクセスしてください。

rails-s

 

アクセスするとアプリケーションの初期画面が表示されます。この初期画面ではRubyのバージョン、実行しているアプリケーションの情報などが閲覧できます。

rails-top

なお、コンソール上でCtrl + cを押すと、railsのwebサーバが停止します。

以上が、Ruby on Railsのテンプレートの使い方です。

 

WordPressのテンプレート

2つ目としてWordPressのテンプレートを使ってみましょう。

WordPressは通常、レンタルサーバー等の準備が必要ですが、Cloud9だけで開発環境の準備、インストールが可能です。

 

先ほど同じようにテンプレートで「WordPress」を選びましょう。

WordPress

 

画面が開いたら、WordPressを起動する前にデータベースを作成する必要があります。

コンソール部分で下記のように入力してください。

mysql-ctl start

database

これでデータベースの作成は完了です。

 

続いて、wp-includesのフォルダ内にある「index.php」のファイルをクリックして開きます。そこで画面上にある「Run Project」のボタンをクリックしてください。

cloud9_wp

 

するとコンソール部分にURLが表示されるのでクリックしましょう。

wp2

 

続いて言語の選択画面が表示されるので、「日本語」を選択して次に進んでください。

wp3

 

次の画面では、サイトのタイトルやユーザー名、パスワードを設定します。入力ができたら「WordPressをインストール」のボタンをクリックしてください。

なお、ここで設定したパスワードはWordPressのログインで使用するので忘れないようにしましょう。

wp4

 

インストールが完了するとログイン画面が表示されるので、先ほど設定したユーザー名とパスワードでログインしてください。

wp5

 

これでWordPressにログインすることができました。

wp6

WordPressのテンプレートの使い方はこれだけです。

 

今回の記事は以上です。

基本的な使い方から、実践的なテンプレートまで紹介してきました。

ぜひ、WordPressの使い方を覚えましょう!

[お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。Cloud9を使ってメンターのサポートを受けたい場合はご参加ください。