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

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

Cloud9のメリット

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

Cloud9を使うときの注意点:

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

Cloud9に登録

email
メールアドレスを入力

your name
氏名を入力します(必要であれば)

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

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

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

recaptcha
Google recaptchaによる認証。

サインアップ完了
登録完了するとWorkspaceの作成画面になります。

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

ワークスペース作成
「Create a new workspace」をクリックします。

新規ワークスペース
– Workspace名を入力する(ドメイン名の一部に使用される)
– Private(非公開)にする
– テンプレートはWordPressを選択する

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

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

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

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

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

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

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

インストール完了

ワークスペースの共有

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

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

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

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

参考リンク

Filed under: 環境構築Tagged with: ,

よく読まれている投稿

No comment yet, add your voice below!


Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.