簡単に開発環境が構築できる！Cloud9 使い方を徹底解説

Cloud9の基礎知識

Cloud9とは？

Cloud9 - Your development environment, in the cloud

Cloud9とは、クラウドからプログラミングが行えるウェブサービスのことです。

いわゆるIDE（統合開発環境）としての機能が備わっていて、プログラミングを効率的に進めていくことができます。GitのホスティングサービスであるGitHubやBitbucketとの連携も可能です。

Cloud9の特徴（メリット）

Cloud9の特徴は、クラウドであることのメリットを丸ごと享受できるところ。例えば、Cloud9を利用するのに必要なツールはブラウザだけです。場所やデバイスに縛られずに、どこでも開発が行えます。

また、開発環境の準備も簡単です。環境構築は結構面倒なので、そこで躓いてしまうビギナーも多いはず。一発で開発環境が整えられるので、Cloud9はこれからプログラミングをはじめるビギナーにこそ使って欲しいサービスなのです。

料金プラン

Cloud9はフリーの料金プランから、チームや企業向けの有料プランなども用意されています。個人で使うのであれば、無料プランで十分でしょう。プライベートワークスペースを使いたい場合など、実際の業務で使う場合は有料プランを検討してください。

Cloud9の使い方

Cloud9の基本的な使い方について見ていきましょう。まずはCloud9のアカウントを作成するところから。

アカウントの作成

先ほどのCloud9のトップページの中央、「Your e-mail address」にメールアドレスを入力。「Sign Up」ボタンをクリックします。すると、アカウントの登録手順がスタートします。

まずは、「Name」のところに自分の名前を入力します。ここで入力した名前は、Cloud9上に公開されるものです。必要であれば、ニックネームなどを使うようにしましょう。

入力できたら、「Next>」ボタンを選択して次に進みます。

次にUsernameを設定します。UsernameはCloud9のワークスペースのURLに表示されます。なお、Usernameは後から変更できないので注意しましょう。

「Next>」ボタンを選択して次に進みます。

Cloud9の用途などを選択して、「Next>」をクリック。

登録内容を確認して、問題なければ「Next>」を選択してください。

これで最後です。キャプチャが表示されるので、チェックを入れて「Create account」ボタンをクリックします。これで完了です！

Cloud9のダッシュボードが表示されたでしょうか？

なお、メール認証も忘れずに行っておきましょう。

ワークスペースの作成

アカウントの作成ができたところで、ワークスペースを作成していきましょう！

ダッシュボードに「Create a new workspace」とありますね。ここをクリックしてください。

ワークスペースの作成画面が表示されました。

ワークスペースの名称やテンプレートを入力・選択したら、画面下の「Create workspace」ボタンをクリック。これでプロジェクトの作成が完了です。なおここではテンプレートとして「HTML5」を選択しています。

ワークスペースができるまで、少し待ちましょう。十数秒くらいで終わるはず。

ワークスペースが表示されました。

基本的な使い方

まずはファイルを編集する方法から。

画面の左側に、ファイルリストが表示されていますね。「hello-world.html」というファイルがあるので、右クリックして「Open」を選択します。

ファイルの内容が表示されました。

一般的なエディタと同じように使えるので、いろいろと試してみてください。

次に、画面上部にある「Preview」をクリックして「Live Preview File」を選択します。すると、「hello-world.html」のプレビュー画面が表示されます。

HTMLを編集すると、リアルタイムでプレビューも変更されます。便利ですね！

Previewの横にあった「Run」ボタンからは、Apacheの起動と停止ができます。画面下のコンソールに、その様子が表示されています。

テンプレートごとに使い方も変わってくるかと思いますが、UIもわかりやすいのですぐに馴染めるでしょう。

WordPressの環境構築

最後に、Cloud9上にWordPressの環境を作成してみましょう。CMSと言えばWordPressというくらい、Web系では引っ張りだこのシステムです。Cloud9でも簡単に環境が作れるようになっています。

Cloud9のダッシュボードから、「Create a new workspace」をクリックしてワークスペースの作成画面をひらきます。テンプレートとしてWordPressを選択して、先に進めます。

WordPressのプロジェクトが作成できました。

ここから、WordPressのセットアップをしていきます。まずはデータベースの作成から。画面下のコンソールから下記のコマンドを実行して、データベース（MySQL）を作成します。

$ mysql-ctl start

index.phpをOpenして、「Run」をクリックしてください。

すると、コンソールにWordPressのURLが表示されました。

このURLをクリックして「Open in Preview」を選択。WordPressのセットアップ画面が表示されるかと思います。

あとは表示されている画面に沿って、セットアップを進めていけばOKです。

あとがき

Cloud9の基礎知識や基本的な使い方、WordPressのセットアップ方法までをご紹介しました。コマンドも少し出てきましたが、基本的にはGUIから簡単に環境構築ができます。Cloud9を使って、快適なプログラミングライフをお過ごしくださいね。