AWS Cloud9とは、Amazonが提供しているクラウドIDE（インターネット経由で開発に必要な機能やツールを利用できるサービス）です。
Cloud9では、インターネットに接続さえしていれば、どんなOSでもブラウザ上（Google Chrome・Microsoft Edge・Safari...）でWebアプリケーションを開発することができます。
Cloud9を利用するために必要なものってなんだろう？
Cloud9には、AWSというサービスのアカウントが必要だよ
まだ持っていない方は「AWSアカウントの用意」で作成しておこう！
AWS Cloud9を導入しよう
AWS Cloud9を導入していきます。
まずは、Cloud9の知識や前提条件、手順を確認してから作業に取りかかりましょう。
AWS Cloud9とは
AWS Cloud9とは、Amazonが提供しているAWS上のサービスの１つです。
Webアプリケーションを開発するには、手元のパソコン（ローカル）に必要なソフトウェアを入れて、Webアプリケーションを動かせるように設定していく作業が必要になります。
この作業を「ローカル開発環境の構築」と呼びます。初心者にとって「最初で最大の壁」と言われており、設定が難しく時間のかかる作業となります。
さらにOS（WindowsやmacOS）の違いでも設定が異なり、複雑さを増すことになります。
エラーが発生して何日も費やし、途中で諦めてしまうという方も少なくありません。
しかし、AWS Cloud9を利用することで、OSの違いを気にすることなくどのパソコンからでも同じ環境下で開発を進めることができます。
Cloud9では、開発に必要なソフトウェアがほとんど最初から入っているよ
前提条件の確認
次の前提条件を満たしているか確認しましょう。
- AWSのアカウントを持っていること → 持っていない方はこちらへ
- IAMユーザーを作成していること → 作成していない方はこちらへ
上記の条件を満たしている方は、次に進みましょう。
Cloud9の導入手順
AWS Cloud9を導入する前に手順を確認しておきましょう。
導入までの手順は、以下の通りです。
1. IAMユーザーでコンソールにサインインしよう
2. Cloud9の管理画面にアクセスしよう
3. リージョンを東京に変更しよう
4. Cloud9の環境を作成しよう
5. Cloud9の環境を設定しよう
6. 設定内容を確認しよう
7. Cloud9の導入完了！
IAMユーザーでコンソールにサインイン済みの方は、「2.Cloud9の管理画面にアクセスしよう」からお進みください。
サインインしていない方は、そのまま次に進みましょう。
ここからは実際に手を動かして、Cloud9を導入していくよ！
1.IAMユーザーでコンソールにサインインしよう
まずは、IAMユーザー作成時に発行された「Console login link」のURLをブラウザ上部のアドレスバーに入力して検索しましょう。
続いて、以下の画面が表示されるので「ユーザー名」と「パスワード」を入力しましょう。
入力完了後、「サインイン」をクリックしましょう。
以下のように表示されたら、IAMユーザーによるサインインが完了です。
2.Cloud9の管理画面にアクセスしよう
サインイン後、AWSマネジメントコンソール画面の上部にある検索窓に「cloud9」と入力し、サービスに表示された「Cloud9」をクリックします。
以下の画面が表示されたら、Cloud9の管理画面にアクセスできています。
リージョンが東京に設定している方は「4.Cloud9の環境を作成しよう」へ進みましょう。
別の地域が設定されている方は、そのまま次にお進みください。
3.リージョンを東京に変更しよう
画像のようにリージョンを「東京」に変更しておきましょう。
リージョンとは、データセンター（サーバーやネットワーク機器など物理的に収容する場所）が存在する国や地域のことです。
所在地に近いリージョンを選択すると、通信速度が速くなります。
4.Cloud9の環境を作成しよう
Cloud9の管理画面にある「Create environment」をクリックしましょう。
クリックすると、環境を作成する画面が表示されます。こちらの画面で環境の設定を行なっていきます。
5.Cloud9の環境を設定しよう
Cloud9の環境設定を行います。
まず、以下のようにNameには「pikawaka」と入力しておきましょう。
Network settingsが「SSH」ではなく、「SSM」になっている場合は「SSH」に変更しておきましょう。
他の項目については、特に変更することなく「Next step」をクリックましょう。
Cloud9 IDEの画面には、Nameに設定した名前のフォルダが１番上に表示されます。作業はこのフォルダの中で行います。
AWS Cloud9自体は無料ですが、サーバーに「EC２」を利用した場合には、追加料金が発生します。
今回は「Environment type」でEC２を選択していますが、新規アカウント作成の無料利用枠により12ヶ月の期間、月間750時間まで無料で使うことができます。
6.設定内容を確認しよう
最後に、環境の設定内容を確認しましょう。
確認後「Create environment」をクリックすると、起動を開始します。
少し時間がかかるので待ちましょう。
7.Cloud9の導入完了！
以下の画面が表示されたら、Cloud9の導入が完了です。
これでCloud9の導入は完了です。
次は基本的な操作方法を身につけましょう！
AWS Cloud9の基本的な使い方を学ぼう
Cloud9の画面構成や基本操作について把握しておきましょう。
Cloud9の終了方法
Cloud9を開くブラウザのタブを閉じるだけで、終了することができます。
初期設定では、Cloud9を閉じてから３０分後に自動でサーバー（EC2）が停止します。
コストを節約してくれるので、安心して利用することができます。
停止したサーバーは、Cloud9を再度開いたときに自動で起動します。
ダッシュボードからCloud9の開き方
まずは、メニューを開きます。
画像のように左側にあるアイコンをクリックしましょう。
表示されたメニューから「Your environment」をクリックします。
作成した環境が表示されるので「Open IDE」をクリックすれば、開くことができます。
Cloud9の画面構成
Cloud9の基本的な画面構成は、以下のように６つの領域で構成されています。
各領域の役割は、以下の表の通りです。
| 名称 | 説明 |
|---|---|
| 1. メニューバー | ファイルやコードなどを操作するエリア |
| 2. ファイルシステム（環境） | ディレクトリやファイルを表示するエリア |
| 3. エディタ | ファイルを編集するエリア |
| 4. ナビゲーション | 主要機能を表示するエリア |
| 5. ターミナル | ターミナルを操作するエリア |
| 6. その他ツール | デバッカーなどの開発ツールを表示するエリア |
Webアプリケーションを開発するには「テキストエディタ」や「ターミナル」など各ソフトウェアが必要になります。
Cloud9の場合は、開発に必要なソフトウェアを１つにまとめて提供してくれます。
開発に必要なソフトウェアを１つにまとめると何が良いのかな
各ソフトウェアを導入する手間がなくなるよ
あとは同じ操作画面で利用できるからスムーズに開発を進められるね！
- Cloud9のように、開発に必要なソフトウェアを１つにまとめたものを「IDE（統合開発環境）」と呼びます。
- さらにCloud9は「クラウドIDE」なので、インターネット経由でブラウザさえあれば利用できるという特徴があります。
テキストエディタとは
エディタ（editor）とは、データの編集を行うためのソフトウェアのことです。
データのファイルを開く・編集・保存することができます。
テキストエディタ（text editor）とは、文字や記号だけで構成されたテキストファイルの編集を行うためのソフトウェアです。
文字や記号だけのテキストファイルを開く・編集・保存することができます。
実は開発で使用するプログラミング言語（コンピュータに指示を伝えるための言語）も文字と記号だけで構成されるテキストデータです。
そのためテキストエディタで編集することができます。
Cloud9では、以下のエリアでテキストファイルの編集を行うことができます。
ファイルの編集については、「ファイルの操作方法」で学びます。
- テキストエディタは、テキストファイルの編集を行うソフトウェア
- テキストファイルは、文字や記号だけで構成されるファイル
- プログラミング言語も、文字と記号だけなのでテキストエディタが使える
ターミナルとは
ターミナル（端末エミュレータ）とは、コマンド（命令文）を入力してコンピュータを操作するソフトウェアのことです。
コマンドは、キーボードから「文字」を打ち込みます。
上の動画のように、ターミナルの画面に表示されるのも「文字だけ」です。
ターミナルのように、文字だけで操作を行う方式のことをCUI（Character-based User Interface）と呼びます。
一方、以下のようにコンピュータの画面上に表示されるウィンドウ、ボタン、アイコンをマウスなどで操作を行う方式のことをGUI（Graphical User Interface）と呼びます。
CUIとGUIは操作の方式が違うだけなので、基本的には同じ操作を行うことができます。
しかし、以下の理由により開発する際にはターミナルが使われます。
- 素早い操作が可能
- 目的ごとに画面を切り替える必要がない
- 文字ベースなので操作記録が残せる
- 容量が軽い
Cloud9では、以下のエリアでコマンドを入力してコンピュータを操作することができます。
ターミナルの操作方法については、次のカリキュラムで学んでいきます。
メニューバーの表示・非表示
１番左側にある「▲」をクリックすると、メニューバーを非表示にすることができます。
上部中央にある「▼」をクリックすると、メニューバーを表示にすることができます。
中央にある矢印は小さくて分かりづらいですが、以下の動画のようにメニューバーを表示・非表示することができます。
ファイルの操作方法
Cloud9のファイル操作について学んでいきましょう。
最初に「ナビゲーション」の上から２番目にあるアイコンをクリックしておきましょう。
それでは、手を動かしてファイル操作を学んでいきましょう！
フォルダを作成してみよう
フォルダは、「作成場所で右クリック > メニュー > New Folder」で作成できます。
動画のように「pikawakaフォルダ（環境名のフォルダ）」で右クリックし、表示されたメニューから「New Folder」をクリックしましょう。
作成したフォルダには名前を付けられるので、sample_dirと入力しましょう。
入力完了後、「Enterキー」もしくは「returnキー」を押しましょう。
ファイルを作成してみよう
ファイルは、「作成場所で右クリック > メニュー > New File」で作成できます。
動画のように、「sample_dir」で右クリックし、表示されたメニューから「New File」をクリックしましょう。
作成したファイルに名前が付けられるので、sample_file.txtと入力しましょう。
入力完了後、「Enterキー」もしくは「returnキー」を押しましょう。
ファイルを編集してみよう
ファイルは、エディタで編集します。
ダブルクリックでファイルをエディタに表示し、「メニューバー > ファイル > Save」で編集内容を保存することができます。
動画のように「sample_file.txt」をダブルクリックし、エディタに表示させます。文字を打ち込み、「メニューバー > ファイル > Save」で保存しましょう。
右上にある×をクリックすると、エディタからファイルを閉じることができます。
ファイルをアップロードしてみよう
ファイルは、ドラッグ＆ドロップでアップロードすることができます。
動画のように、自分のパソコンにあるファイルを試しに「sample_dir」へアップロードしてみましょう。
「sample_dir」にファイルが追加されていれば、問題なくアップロードができています。
ドラッグ＆ドロップとは、対象にカーソルを合わせてクリックしながら画面上を移動させて、希望の位置で離す操作のことです。
ファイルを削除してみよう
ファイルやフォルダは、「右クリック > メニュー > Delete > Yes」で削除できます。
以下の動画のように「sample_dir」の中にあるファイルを削除し、最後に「sample_dir」も削除しましょう。
これでファイル操作についての説明は終わりです。
開発効率を上げる設定をしよう
Cloud9の設定画面は、以下の動画のように右上の歯車をクリックして開きます。
自動保存の設定にしよう
ファイルの保存は、「メニューバー > ファイル > Save」で保存することができますが、保存し忘れたり、通信状態が不安定なときは保存できないことがあります。
Cloud9には自動保存という便利な機能があるので、設定しておきましょう。
自動保存は、上の画像のように「Experimental > After Save Files > After Delay」で設定できます。
さいごに
この章ではAWS Cloud9を導入し、IDEの基本的な使い方や開発効率を上げるための設定を行うことができました。
この記事のまとめ
- AWS Cloud9とは、Amazonが提供しているクラウドIDEのこと
- IDE（統合開発環境）は、開発に必要なソフトウェアを１つにまとめたもの
- Cloud9は、インターネット経由でブラウザさえあれば利用できる
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します