Cloud9でWordPressやHTML/CSSの学習環境を作る

Cloud9はWebアプリケーションをブラウザで開発するためのオンラインIDE（統合開発環境）クラウドサービスです。
開発に必要なソフトウェアやDBがすでに用意されており、ワークスペース（開発環境）を簡単に作成することができます。
ChromeなどのWebブラウザがあれば、すぐに開発を始めることができます。

Cloud9のメリット

• ブラウザさえあれば開発することができる
• 開発環境を構築する手間が省ける
• ソースコードを複数人で同時に編集することができるのでペアプログラミングに最適
• Linuxコマンド実行可能
• Cloud9で開発して、herokuなどにデプロイするといった開発フローも導入可能

Cloud9を使うときの注意点：

• Publicのアプリケーションの場合は、内部のソースコードは公開されてしまうので、個人情報などをソースコードに記述しない。その場合はアプリケーションをPrivate に設定する。
• 無料版であってもクレジットカードの登録が必要です。（有料プランを選択しない限りは課金されることはありません）
  • Student版の場合はクレカ不用で登録できるが、教師役のアカウント（1ドル/月）が必要
• 無料版の場合は 1つだけ Private（ソースコード非公開）のワークスペースを作成することができます。Publicワークスペースは好きなだけ作成することができます。

Cloud9に登録

メールアドレスを入力

氏名を入力します（必要であれば）

ユーザー名です。ユーザー名URLの一部として使用されるユニークな文字列（半角英数）

入力内容を確認して「Next」ボタンを押下。

クレジットカードを登録します（料金は発生しません）

Google recaptchaによる認証。

登録完了するとWorkspaceの作成画面になります。

パスワードを変更用URLが登録したメールアドレスに送信されるので、パスワードを忘れずに登録しましょう。

「Create a new workspace」をクリックします。

– Workspace名を入力する（ドメイン名の一部に使用される）
– Private（非公開）にする
– テンプレートはWordPressを選択する

「Create workspace」をクリックします。

開発環境画面になります。

WordPressを起動するには、「Run Project」を押下します。

WordPressをプレビューするには、画面下部のLinuxコンソールに表示される URLをコピして、新しくWebブラウザのタブを開いてそこにURLをペーストしてアクセスします。

または、上の「Preview」ボタンを押下して、別ペインで開くこともできます。

大きくて見やすいので別のブラウザタブを開く方をおすすめします。

WordPressのプレビュー用のURLは、 https://{ワークスペース名}-{ユーザ名}.c9users.io という形式です。そこにアクセスすると、WordPressのインストール画面になるので、必要な情報を入力してWordPressのインストールを完了させます。

ワークスペースの共有

上部の右のShareをクリックすることで、他のCloud9ユーザーを開発に参加させることができます。
（Cloud9ユーザーでないと、招待はできません。）

招待したいユーザーのメールアドレスを入力し、「Invate」ボタンをクリックします。

これで、招待は完了です。

招待がされた方には、IDEのURLがメールで配信されます。

参考リンク

• Getting Started with Cloud9 · Cloud9