Cloud9の使い方と便利機能!最強プログラミング開発環境(IDE)

385
ハナキ ノボル
書いた人 ハナキ ノボル

どうも!ハナキノボル(@novl_h)です。

「よしっ!プログラミング、勉強するぞ!」と思い立っても、まずはあなたのPCで「プログラミング言語を扱える環境」を作らなければいけません。その事前準備を、「開発環境の設定」「環境構築」といいます。

この「事前準備」でさえ中級者でも場合によっては1日〜2日ほどはまってしまい、なかにはプログラミングを始めることすらできずに挫折してしまうなど、「環境構築」はプログラミング初心者にとって高いハードルなのです。

そんな「最初の壁」を乗り越えられるように、今回は「Cloud9」の使い方から便利機能まで初心者でも快適に読み進めることができるコメントつき画像でわかりやすくご紹介しています。

この記事を読めば、そういったやっかいごとから全て解放されますよ!

なお、「Cloud9」は侍エンジニア塾 の塾生様にも使っていただいております。

Cloud9(クラウドナイン)って?

cloud9

Cloud9(クラウドナイン)とは、アプリケーションの開発やデータベースなどをクラウド環境で利用できるサービスです。統合開発環境(IDE)と呼ばれるもので、様々な便利機能が集約されています。

簡単に説明すると「WEBアプリケーション開発が出来る状態を、超簡単に用意できてしまうツール」です。

統合開発環境(IDE)とは

統合開発環境とはプログラマの開発を支援してくれるものです。

アプリケーション開発を行う時に必要な、様々なツールが集められています。

例えば編集中のプログラムをテストしたり、実行したりといったことが簡単に行えます。

統合開発環境として有名なものには、「Eclips」や「Visual Studio」といったものがあります。

Cloud9のメリット

  • プログラミングが簡単に始められる
  • 様々なサービスを開発できる
  • 共同開発が簡単にできる

Cloud9のデメリット

  • インターネットがに接続していないと使えない
  • PCによっては動作が重くなる

Cloud9を使う上での注意点

  • 対応ブラウザが「Google Chrome」か「Firefox」だけなので、それ以外のブラウザをお使いの場合は「Chrome」をインストールしましょう
  • 最初にクレジットカードの登録が必須となります(※登録が必要なだけでアップグレードしなければ無料で使えます)

Cloud9の詳しい使い方

まずはCloud9のサイトにアクセスしてみましょう!

1. サインアップ(会員登録)をしよう

トップ画面が表示されたら、まずはサインアップしましょう!「メールアドレス」か「Githubアカウント」でサインアップしましょう!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_9_23_58

僕は、メールアドレスで登録しました。すると、↓こちらの画面に移ります。「Your Name」を入力してください。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_9_24_19

次に、ユーザーネームを入力しましょう!この「ユーザーネーム」はURLにも使用されるので、ネーミングセンスが問われます。(なんでも大丈夫です。笑)

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_9_24_51

お次は、利用者アンケートです。もはや、なんでもいいです!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_9_25_24

入力事項を確認して、問題なさそうであれば、「Next > 」をクリックしましょう!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_9_26_10

ここで、多くの方が、びっくりされるかと思います。

以前は、クレジットカードの登録は「任意」だったのですが、現在(2016年11月)の仕様上、「必須」で入力しなければいけなくなりました。

ただ、登録してもアップグレードをしない限り課金されることはないので、安心して登録しましょう!

お手持ちのクレジットカード情報を登録し、「Postal code」、つまり郵便番号を入力し「Next > 」をクリックしましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_9_26_20

ロボットではないことを証明し、「Create account」をクリックしましょう!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_9_27_59

これで終了です!ワークスペースができました!

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_9_28_47

※Githubアカウントではなくメールアドレスで登録された方は、登録したメールアドレスに下記画像内容のメールが届いているはずです。パスワードの設定を済ませましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-11-16_11_10_50

Cloud9はAmazonに買収され、急スピードでサービス改善を行なっています。

あっという間に、登録の仕方が変わっていたりすることがあるので、上記の通りいかないこともあるかもしれません。(記事の定期的なアップデートを心がけます。)

もし万が一うまくいかないことがあれば、弊社まで連絡していただければ、レクチャーしますので、お気軽にご連絡ください!

2. ワークスペースを作る

登録が完了したら、↓の画面が表示されます。

cloud9_1

次にワークスペースを作成します。ワークスペースとは「(アプリケーション開発を行う)作業場」のことです。

cloud9_2

各種入力していきます。

  1. Workspace name:ワークスペースの名前を決めます。(どんな名前でも構いません)
  2. Description:ワークスペースの簡単な説明です。(入力しなくても大丈夫です)
  3. Private or Public:ここでは「Public」を選択してください※Privateは1アカウント1ワークスペースのみしか作成できません
  4. Choose a templete:作成するアプリケーションに合わせて、テンプレートを選択します。ここでは「Custom」を選択します。
  5. Create workspace:最後にこのボタンをクリックします。

cloud9_3

3. 開発画面を使いこなそう

ワークスペースの作成が成功したら、↓の画面が表示されます。まずは基本的な操作方法を覚えましょう。

cloud9_4

↓の赤枠部分を右クリックします。「New File」が表示されるので、試しにファイルを作成してみましょう。

cloud9_5

ファイル名を「index.html」にします。

cloud9_6

ファイルが作成されたら、以下のコードを入力しましょう。

cloud9_7

入力が完了したら、保存(File → Save)します。次に、画面上部の「Preview」→「Live Preview File」をクリックし、先ほどのファイルがどのように表示されるかを確認します。

cloud9_8

↓の画面が表示されれば、成功です。

cloud9_9

4. Ruby on Rails テンプレートを使おう

では、次に「Ruby on Rails」の開発環境を構築します。先ほどのワークスペースの画面に戻ります。

cloud9_10

今度は、以下の様に入力していきましょう。

  1. Workspace name:ワークスペースの名前を決めます。ここでは「rails-sample」と入力しています。
  2. Description:ワークスペースの簡単な説明です。ここでは「rails-sample-application」と入力しています。
  3. Private or Public:ここでも「Public」を選択します。
  4. Choose a templete:「Ruby」を選択します。
  5. Create workspace:ボタンをクリックします。

cloud9_11

作成が完了すると、↓ の画面が表示されます。なんと、これでRuby on Railsの開発環境構築が完了してしまったのです。

cloud9_12

では、早速、Railsサーバーを起動させてみましょう。通常、Railsサーバーを起動させる場合以下のコマンドを入力します。

すると、以下の様に、うまくサーバーが起動しません。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88_2016-12-05_19_16_05

エラー文をしっかりと読むと、どうやら「PORT & IP」が間違っていて怒られてしまった様です。Cloud9上でRailsサーバーを立ち上げる場合は以下のコマンドを入力しましょう。※塾生が頻繁にツマヅクところです。しっかり、覚えておきましょう。

すると ↓ の画面が表示されます。そして、表示されたURLをクリックします。

cloud9_13

↓ の画面が表示されれば成功です。

cloud9_14

いかがでしたでしょうか?こんなにも簡単に開発環境が構築できてしまうとは驚きですよね。

Cloud9の便利機能

リビジョン機能

このリビジョン機能は、今までに保存してきた履歴を時系列に沿ってみることが出来る機能です。どのようにソースコードが変化してきたのかが見れるので、処理の解析などにも利用できます。

例えばエラーになった際、特別なツールを使わなくても前の状態からどのように変更したのかを簡単に調べることができます。この機能がデフォルトで(初めから)実装されていることが、Cloud9の凄さを物語っています。

test

共有機能

共有機能を使うことで、自分以外の人にコードを見てもらうことができます。どうしても、自分で解決できないエラーが出た際に、エラーメッセージだけでは知識のあるエンジニアでもなかなか回答しづらいことがあります。エラーメッセージと共に現在のプロジェクトの状態を共有して見てもらいましょう。

まず、「Window」を選択し、「Share」ボタンを押します。

スクリーンショット_2015-12-02_14_31_49

共有の仕方は2通りあります。一つはURLをコピーし、それを共有したい相手に送る方法。もう一つは、相手のアドレスもしくはCloud9のIDを入力し招待する方法です。

スクリーンショット_2015-12-02_14_32_07

複数人で共有し編集することも出来る優れものなので、プログラミングに詳しい人を招待し、ヒントを貰いながらコーディングをすることも出来ます。

リアルタイムプレビュー機能

リアルタイムプレビュー機能は、自分が入力しているコードがどのように反映しているかリアルタイムでプレビューできる機能です。特に何かを設定する必要はないです。

cloud9-4

プライベート機能

他人に完全に見せないプライベートなワークスペースは1つのみ使用可能となっています。

無料プランのHD容量は1GBまで使用可能です。通常のアプリを作る分には十分なのでまずはCloud9で開発の基礎を学び、その後自分好みの環境を整えると良いでしょう。

Cloud9でJava開発!

Javaの開発環境もCloud9で構築することができるので、興味のある人はやってみましょう。

メリット

  • 複数人で同時に作業ができるので、簡単かつスムーズに開発ができる
  • 書いたコードを過去にさかのぼることができるので、いつ間違えたのかを確認し、そこで修正できる

デメリット

  • エラーの箇所を自力で探さなければならない

↓の記事ではCloud9上でJavaを使ってHelloworldを出すまでの流れをご紹介しています。

Cloud9でLet’s 「HelloWorld」!

ここからは一歩進んだ、Cloud9の使い方をしてみましょう!

前出の通り、Cloud9ではワークスペースで様々なプログラミング言語・フレームワーク・CMSを選択することができます。

2016年5月現在では、ざっくりこんな感じです。

  • HTML5
  • Node.js
  • Meteor
  • PHP,Apache&
  • Python
  • Django
  • Ruby
  • C++
  • WordPress
  • Ruby on Rails

それぞれの言語やフレームワークを試したいところですが、今回は3つの言語で解説している記事を載せておきます。

Pythonで「HelloWorld」!

Pythonを使ってHelloworldを出すまでの流れを解説しています。

PHPで「HelloWorld」!

PHPを使ってHelloworldを出すまでの流れを解説しています。

JavaScriptで「HelloWorld」!

JavaScriptを使ってHelloworldを出すまでの流れを解説しています。

WordPressでカスタマイズ!

HelloWorldではないですが、WordpressのカスタマイズをCloud9上で解説した記事になります。

まとめ

いかがでしたか?

Cloud9は一昔前では考えられないような最強最高のサービスです。

プログラミングの学習コストや学習にまつわる環境も急速に整えられてきています。あなたもこの波に乗って、クリエイティブな世界に飛び込みましょう!


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

学習者インタビュー

23歳、早稲田中退生が3ヶ月でフリーランスエンジニアになるまで
元ベンチャー役員が起業のためにプログラミングを学んだ本当の理由
WEBデザイナーの僕がフリーランスエンジニアになれた理由
IT音痴のヨガインストラクターに超速でサイト作成したコツをきく
好きな場所で働きたい方、必見!パソコンとWifiさえあれば仕事はできる!
根っからの文系が経験0から3ヶ月でエンジニアに転身した方法

人気記事セレクション

WEBアプリ開発入門者がゼロからモノを作れるようになるまでの5ステップ
必ず見つかる!プログラミング言語は作りたいものから決めよう
プログラミング勉強ならコレ!無料学習サイトおすすめランキングTop5
プログラミング関連の案件が多いクラウドソーシングサイト5選
未経験でもフリーランスエンジニアになれる5つの理由
【入門者必見】WEBアプリ開発言語を選ぶべき3つの理由
Pythonでできることって!?大注目プログラミング言語徹底解説
【完全保存版】プログラミング初心者が最初にやるべき10のコト
ドットインストールで挫折せずに2ヶ月で未経験からエンジニアになった話

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題!最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
 1記事最大10,000円!テック系ライターさん大大大募集!!!
LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

ハナキ ノボル

ハナキ ノボル

侍エンジニア塾ブログ編集長。オウンドメディア運営、コンテンツマーケティング、SEO対策が得意分野です。プログラミングはすべての人が学ぶべきスキルだと思っています。0→1を作り上げるエンジニアはとてもかっこいい職業で世の中のイメージ(3K)を変えたい!と密かに思ってます。現在Swiftを勉強中。音楽鑑賞が趣味で、ライブやフェスによく行きます。
インスタやってます。
ツイッターやってます。
ブログやってます。