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

   

Code部

Cloud9の特徴や基本的な使い方、WordPressのインストール方法についてまとめました。何かと手間な環境構築が簡単にできますし、GitHubやBitbucketとの連携も可能です。無料プランでも十分に利用価値はあるので、プログラミングを学習するならぜひ活用しましょう。

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

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

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

Username

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

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

アンケート

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

登録内容の確認

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

キャプチャ

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

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

登録完了(ダッシュボード)

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

ワークスペースの作成

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

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

「Create a new workspace」ボタンをクリックする

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

ワークスペースの作成画面

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

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

ワークスペースの作成中

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

ワークスペースの作成完了

基本的な使い方

まずはファイルを編集するほうほうから。

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

Openを選択

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

「hello-world.html」の内容

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

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

プレビュー画面

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

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

Apacheの起動

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

WordPressの環境構築

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

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

テンプレートでWordPressを選択する

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

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

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

$ mysql-ctl start

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

index.phpをOpenして「Run」をクリック

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

コンソールにWordPressのURL

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

WordPressのセットアップ画面

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

あとがき

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

 - プログラミング