http://www.sejuku.net/blog/wp-content/themes/voice_child/images/samurai_logo.png 侍エンジニア塾が運営するプログラミング入門者向け学習情報サイト

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

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


侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

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

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

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

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

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

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

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

cloud9

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

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

統合開発環境(IDE)とは

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

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

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

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

Cloud9のメリット

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

Cloud9のデメリット

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

Cloud9を使う上での注意点

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

AWS Cloud9の詳しい使い方

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

AWS_Cloud9(コードの記述、実行、デバッグのためのクラウド_IDE)___AWS

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

トップ画面が表示されたら、まずはサインアップしましょう!

アカウントのない人は、ご自身のメールアドレスでアカウント登録をして、すでにアカウントをお持ちの方はサインインしましょう。

リライト:cloud9_-_Google_ドキュメント

すると、↓こちらの画面に移ります。再度メールアドレスとパスワードを設定しましょう。

アカウント名はなんでも大丈夫です。

AWS_Console_-_Signup

続いて個人情報を入力しましょう。

個人で使う場合は、パーソナルの方にチェックを入れて、名前や電話番号、住所などの情報を記入しましょう。

AWS_Console_-_Signup

次に、クレジット/デビットカードの登録が必要です。

基本12ヶ月の間は無料で使えますが、プランによっては料金が発生します。

個人情報が漏れることはないので安心してください。

リライト:cloud9_-_Google_ドキュメント 2

支払い情報の入力が終わったら次に、電話による確認があります。

電話番号を再確認できたら、セキュリティチェックをして、「すぐに連絡を受ける」を押してください。

ボタンを押すと4桁の番号が表示されます。

同時に登録している携帯番号に電話がかかってきます。

電話に出ると、表示せれている4桁の番号を打ち込んでくださいと言われるので、指示に従って番号を打ち込みましょう。

これで最終的な本人確認は終了です。

次にサポートプランを決めましょう。

開発は無料でもできるので無料を選択。

AWS_Console_-_Signup 2

最後にコンソールにサインインしましょう。

AWS_Console_-_Signup 3

これでAWSの登録は完了です。

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

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

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

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

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

検索窓にCloud9と打ち込んでみましょう。

AWS_マネジメントコンソール

するとCloud9が出てきます。

なので、開発環境(開発をするために必要な道具が揃っている場所)を作っていきましょう。

Your_environments

まずは、各種入力していきます。

  1. ワークスペース(アプリケーション開発を行う作業場)に名前を付けましょう。
    例えば、Webの予約アプリを作りたければ「Web予約アプリ」などの分かりやすい名前を付けましょう。
  2. 下のオプションは備考など説明文を入れましょう。(書かなくても大丈夫です)
  3. 終わったら「Next step」で次へ進みましょう。

Create_a_new_environment

続いて各種設定を行いましょう。

今回はEC2に新規作成しましょう。

EC2環境とは、Amazonが用意している開発環境です。

下のSSHとはリモートサーバーのことです。

リモートサーバーとは、サイトファイルをオンラインで表示できるように、それらのサイトファイルをパブリッシュする場所です。

自分で持っているサーバーがある人は、こちらを使うことができます。

持っていない人は、EC2環境で開発しましょう。

Create_a_new_environment 5

その下のInstance typeはインスタンスの種類です。

簡単に言うと、自分の作りたいものに合わせた最適な環境を選ぶという事です。

上から順に

  • t2.micro(フリーティア資格。教育ユーザーや探検に最適です。)
  • t2.small(小規模なWebプロジェクトにおすすめです。)
  • m4.large(生産および汎用開発に推奨されます。)
  • Other instance type(インスタンスタイプを選択します。)

となっています。

一番上の「t2.micro」は無料枠内で開発することができるのでおすすめします。

開発内容によっては、適しているものを選びましょう。

Create_a_new_environment 6

Cost-saving settingは環境が自動停止しEC2のコスト節約するための設定です。

説明には

環境を自動休止させ、不要な料金を避けるために、所定の時間を選択します。

節約を最大限にするために、休止状態で30分の休暇を設定することをおすすめします。

と書かれています。

他にも

  • 30分
  • 1時間後
  • 4時間後
  • 1日後
  • 1週間後
  • Never(設定しない)

を選べます。

今回はおすすめの30分に設定します。

Create_a_new_environment

Reviewで設定を確認して、下にあるCreate environment をクリックしたらいよいよワークスペースの出来上がりです。

1〜2分待って、、、

環境開発名_-_AWS_Cloud9 2

ついに、ワークスペースが完成しました!!!

これでいよいよ開発を行うことができます。

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

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

新規開発_-_AWS_Cloud9

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

新規開発_-_AWS_Cloud9 2

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

新規開発_-_AWS_Cloud9 3

ファイルが作成されたら、「index.html」を選択して以下のコードを入力しましょう。

新規開発_-_AWS_Cloud9 4

入力が完了したら、保存(File → Save)します。

次に、画面上部の「Preview」→「Preview File index.html」をクリックし、先ほどのファイルがどのように表示されるかを確認します。

新規開発_-_AWS_Cloud9 5

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

新規開発_-_AWS_Cloud9

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

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

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

最新情報をお届けします

書いた人

ハナキ ノボル

ハナキ ノボル

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