プログラミングの開発環境に便利！Cloud9の使い方【Rails・WordPressテンプレートの解説あり】
プログラミングの開発環境に便利な【Cloud9】の使い方を解説した記事です。登録方法、ワークスペースの作成、画像ファイルのアップ方法などを紹介。最後にはRuby on RailsとWordPressのテンプレートの使い方も解説。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女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に依存することなく開発環境を準備することができるのが利点です。また、無料で使うことができるのも良さのひとつです。
ただし、海外のサービスで日本語には対応していないので、その点だけご注意ください。
Cloud9の登録方法
それでは早速登録していみましょう。
まずは、Cloud9のサイトにアクセスしてください。
この画面の「SIGN UP」のボタンを押して登録するだけです。
なお、GitHubのアカウントをお持ちの場合は、GitHubのアカウントでログインすることも可能です。
ここでGitHubでログインしておくと、あとでCloud9のコンソール上からGitHubの操作が行えるようになるのでおすすめです。
登録はこれだけで完了です。
ワークスペースの作成方法
登録ができたら、実際に操作をするワークスペースを作成してみましょう。
登録が完了するとダッシュボード画面が表示されるので、「Create a new workspace」ボタンを押してください。
続いてこのような画面が表示されますので、入力していきます。
ワークスペース名は何でも構いませんので、ご自身が管理しやすい名前にしましょう。
続いて「Private」と「Public」を選ぶことができます。Cloud9には、画面を共有したりチームで開発することもできるという特徴があるので、他の人に共有したい場合などは「Public」にしておくことおをおすめします。（共有方法はあとで解説します）
また、テンプレートから選ぶことができますが、今回は「Custom」を選択しました。
これで「Create workspace」のボタンを押せばワークスペースの作成は完了です。
ダッシュボードに作成したワークスペースが表示されますので、「Open」を押して開いてください。このような画面が表示されたら成功です。
基本的な使い方
使い始める前に知っておきたい3つの操作についてご紹介します。
ファイルとフォルダを作成する
ファイルを作成するには、左のフォルダが表示されている箇所で右クリックをして「New File」を選択すると作成できます。
フォルダを作成する際も同じ要領で右クリックしてから「New Folder」を選択すると作成できます。
ファイルをアップする
Cloud9では自分のPCにあるファイルを簡単にアップすることができます。 例えば、画像ファイルなどをアップして使うことが可能です。
アップするには、PCからアップするファイルをCloud9のフォルダに向かってドラッグ&ドロップします。
すると、このようにファイルがアップできました。
今回は画像ファイルをアップしましたが、他のファイルでもアップできます。
Apacheを起動してプレビューする
Cloud9では、Apacheを起動して開発している内容をプレビューすることができます。
ファイルを作成して「Run」のボタンをクリックすると、画面の下部にこのようなリンクが表示されるのでクリックしてください。
（今回は例として簡単なHTMLファイルを作成しました）
すると、プレビューがCloud9上に表示されました。
このプレビューはURLをコピーして自分が使っているブラウザで表示するもできます。
ワークスペースを共有する
Cloud9では、自分で開発しているワークスペースを他の人に共有することが可能です。 ただし、共有するにはちょっとした設定が必要になります。
ワークスペースの右上に「Share」のボタンをクリックするとこのような画面が表示されます。ここでPublicのチェックを外さないようにしましょう。
エディタを共有するには、Editorに表示されているURL共有します。URLをクリックして、表示された「Copy」をクリックするとコピー可能です。このコピーしたURLを共有したい人に開いてもらいましょう。
URLに他の人がアクセスすると「Notifications」に表示されますので、緑のボタンをクリックして許可するとそのユーザーが編集まで可能になります。ペアプログラミングなどもできるので便利です。
また、毎回許可するのではなく、特定のユーザーに閲覧・編集の権限を付与することも可能です。
先ほどのShareボタンを押した時に表示される画面の下部に「Invite People」というフォームがあるので、共有したい人のユーザー名を入れて「Invite」ボタンを押してください。
このように表示されれば成功です。
テンプレートを使ってみる
ここまでは「Custom」を使って紹介してきましたが、Cloud9には便利なテンプレートが用意されています。今回は、Ruby on RailsとWordPressのテンプレートを実際に使ってみます。
Ruby on Railsのテンプレート
テンプレートの1つ目として、Ruby on Railsのテンプレートを使用します。
まずはテンプレートで「Ruby」を選びましょう。
選択して開くだけでRuby on 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が表示されるので、クリックしてアクセスしてください。
アクセスするとアプリケーションの初期画面が表示されます。この初期画面ではRubyのバージョン、実行しているアプリケーションの情報などが閲覧できます。
なお、コンソール上でCtrl + cを押すと、railsのwebサーバが停止します。
以上が、Ruby on Railsのテンプレートの使い方です。
WordPressのテンプレート
2つ目としてWordPressのテンプレートを使ってみましょう。
WordPressは通常、レンタルサーバー等の準備が必要ですが、Cloud9だけで開発環境の準備、インストールが可能です。
先ほど同じようにテンプレートで「WordPress」を選びましょう。
画面が開いたら、WordPressを起動する前にデータベースを作成する必要があります。
コンソール部分で下記のように入力してください。
mysql-ctl start
これでデータベースの作成は完了です。
続いて、wp-includesのフォルダ内にある「index.php」のファイルをクリックして開きます。そこで画面上にある「Run Project」のボタンをクリックしてください。
するとコンソール部分にURLが表示されるのでクリックしましょう。
続いて言語の選択画面が表示されるので、「日本語」を選択して次に進んでください。
次の画面では、サイトのタイトルやユーザー名、パスワードを設定します。入力ができたら「WordPressをインストール」のボタンをクリックしてください。
なお、ここで設定したパスワードはWordPressのログインで使用するので忘れないようにしましょう。
インストールが完了するとログイン画面が表示されるので、先ほど設定したユーザー名とパスワードでログインしてください。
これでWordPressにログインすることができました。
WordPressのテンプレートの使い方はこれだけです。
今回の記事は以上です。
基本的な使い方から、実践的なテンプレートまで紹介してきました。
ぜひ、WordPressの使い方を覚えましょう！
[お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。Cloud9を使ってメンターのサポートを受けたい場合はご参加ください。
また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
