クラウドIDE「Cloud9」とは?特徴や基本的な使い方

Webサービス

2016年12月07日

クラウドIDE「Cloud9」とは?特徴や基本的な使い方

クラウド型のIDEサービスCloud9の特徴についてまとめました。基本的な使い方についてもご紹介しています。

Cloud9の基礎知識

Cloud9の特徴やメリットについて見ていきます。Cloud9というサービスをご存じない方やビギナーのエンジニアにもご理解いただけるよう、できるだけかみ砕いて解説していきますね。

クラウドIDE「Cloud9」

クラウドIDE「Cloud9」

» Cloud9 – Your development environment, in the cloud

Web制作に限らず、プログラミングを行うにはIDE(統合開発環境)が欠かせません。IDEとは、テキストエディタやコンパイラ、デバッガ、FTP機能など、プログラミングに必要な機能がまとめられたツールのこと。IDEは、プログラミングを行うパソコンにインストールして使うことが一般的です。そのため、別のパソコンではプログラミングができないという不便さがありました。

Cloud9はブラウザから使える、クラウド型のIDEです。従来のIDEとは違い、インストールの必要もありませんし、ブラウザさえあればどのパソコンからも同じ環境でプログラミングを行うことが可能になります。これまでのIDEにあった不便さを解消してくれる、とても便利なサービスなんです。

メリット

Cloud9のメリットについてまとめておきましょう。

インストール不要

上で解説したように、Cloud9はクラウド型のIDEです。インストールの必要がないので、すぐに開発業務をスタートすることが可能です。

また、開発環境のセットアップも全てCloud9がやってくれます。IDEのセットアップは非常に面倒なので、それがビギナーにとっては大きなハードルになっていました。Cloud9では、プログラミング言語を選択するだけで、自動でセットアップまで済ませてくれます。手間だった開発環境の構築をすることなく、プログラミングだけに集中することができるのです。

多彩な言語に対応

Cloud9は下記のように、多彩なプログラミング言語に対応しています。Web開発で必要な言語はだいたいサポートされているので、不自由なく使っていけるでしょう。主な対応言語は下記の通り。

  • HTML5
  • Node.js
  • PHP
  • Python
  • Django
  • Ruby
  • C++
  • WordPress

豊富な機能を備えている

Cloud9はさらに、豊富な便利機能を備えています。IDEとしての機能はもちろんのこと、コラボレーティブな使い方にも向いています。GitHubやBitbucket、Herokuなど、大手ツールとの連携が可能な点もCloud9が人気の理由の一つです。

料金体系

料金体系

Cloud9は無料で使うこともできますし、機能に制限のない有料プランも用意されています。Cloud9の料金体系について確認しておきましょう。

無料プラン(Free)

Cloud9は無料で使えるFreeプランを用意しています。パブリック(公開)のworkspaceは無制限に使うことができ、プライベート(非公開)のwordspaceも1つだけ利用することが可能です。

有料プラン(Individual、Teams、Education)

有料プランは、IndividualとTeams、Educationの3つがラインナップされています。IndividualとTeamsでは、プライベート(非公開)のworkspaceを無制限に利用できます。sshの利用やチーム開発に関連した機能も使えるので、必要であれば利用を検討してみてください。なおEducationは教育での利用を前提としたプランになっています。

Cloud9の基本的な使い方

Cloud9の基本的な使い方に入っていきましょう。ここではCloud9に登録するところから、HTML5のプロジェクトを立ち上げるところまでをステップバイステップでご紹介します。

アカウント作成

まずはCloud9を使うための準備から。

アカウントを作成していきましょう。Cloud9の公式ページをひらいたら、画面中央の入力欄にメールアドレスを入力して「SIGN UP」ボタンをクリックしてください。

Cloud9トップページ

» Cloud9 – Your development environment, in the cloud

nameの入力欄が表示されます。アカウントのnameを入力して、「Next」ボタンをクリックしてください。

Name

usernameを入力して、「Next」ボタンを押します。

username

Cloud9の用途などを選択。

Tell us about yourself

登録内容の確認画面が表示されました。確認をしたのち、間違いがなければ「Next」ボタンをクリックします。

Confirm your details

クレジットカード情報を入力して、「Next」ボタンをクリック。

※以前はそうではなかったのですが、記事執筆時点ではクレジットカード情報の入力が必須となっています。2016年に、アカウント作成のフローが変更されたようです。

Credit card details

これでアカウントの作成が完了です。

上ではメールアドレスを使ってアカウントを作成しましたが、GitHubやBitbucketのアカウントを利用する方法もあります。GitHubやBitbucketと連携させたい方は、それらのアカウントでログインした方がいいでしょう。

workspaceを作成する

それでは、workspaceを作成してみましょう。

Cloud9にログインしたら、ダッシュボードをひらいてください。画面の真ん中辺りにプラス(+)ボタンがあるので、その部分を押してください。

ダッシュボードでプラス(+)を押す

workspaceの作成画面が表示されました。

Create a new workspace

workspaceの名前(Workspace name)や説明(Description)を入力したのち、公開/非公開の選択(Private/Public)、開発環境の選択(template)を行います。ここでは公開(Public)、HTML5を選んであります。

入力・選択できたら、画面下の「Create workspace」ボタンをクリック。workspaceの作成がスタートするので、少し待ちます。筆者の環境では、10秒前後で作成が完了しました。

Creating

下記のように、作成されたworkspaceが表示されたでしょうか。

workspaceの作成完了

workspaceを使う

それでは最後に、workspaceの使い方をザッと確認しておきましょう。

左上の「Workspace」ボタンを押すと、プロジェクトのファイル一覧がツリー表示されます。ここに「hello-world.html」とあるので、ダブルクリックしてください。

「hello-world.html」をダブルクリック

「hello-world.html」の内容が表示されました。この部分はテキストエディタになっているので、自由にファイルの編集ができます。

「hello-world.html」が表示された

次に、プロジェクトのプレビューを見てみましょう。画面中央の上に「Preview」メニューがありますね。ここをクリックして、表示されたサブメニューの中から「Live Preview File(hello-world.html)」を選択してください。

「Live Preview File(hello-world.html)」を選択

画面の右側にプレビューが表示されました。

プレビューが表示された

あとがき

Cloud9の特徴やメリット、基本的な使い方についてご紹介しました。記事で見てきた通り、Cloud9を使えばすぐにプログラミングをスタートすることができます。スピーディな開発も可能になりますし、プログラミングの学習にも役立つでしょう。商用利用でなければ無料でも十分に使えるので、ぜひ活用していただければと想います。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。