すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

Rails

【Rails】 AWS Cloud9を導入して使い方を学ぼう (準備編2)

ぴっかちゃん
ぴっかちゃん

この記事では、AWS Cloud9の導入手順だけでなく、基本操作の学習や開発効率を上げるための設定も行います。

AWS Cloud9とは、Amazonが提供しているクラウドIDE(インターネット経由で開発に必要な機能やツールを利用できるサービス)です。

Cloud9

Cloud9では、インターネットに接続さえしていれば、どんなOSでもブラウザ上(Google Chrome・Microsoft Edge・Safari...)でWebアプリケーションを開発することができます。

ぴっかちゃん

Cloud9を利用するために必要なものってなんだろう?

Cloud9には、AWSというサービスのアカウントが必要だよ
まだ持っていない方は「AWSアカウントの用意」で作成しておこう!

ぴかわかさん

AWS Cloud9を導入しよう

AWS Cloud9を導入していきます。
まずは、Cloud9の知識や前提条件、手順を確認してから作業に取りかかりましょう。

AWS Cloud9とは

Cloud9

AWS Cloud9とは、Amazonが提供しているAWS上のサービスの1つです。

Webアプリケーションを開発するには、手元のパソコン(ローカル)に必要なソフトウェアを入れて、Webアプリケーションを動かせるように設定していく作業が必要になります。

この作業を「ローカル開発環境の構築」と呼びます。初心者にとって「最初で最大の壁」と言われており、設定が難しく時間のかかる作業となります。

開発環境

さらにOS(WindowsやmacOS)の違いでも設定が異なり、複雑さを増すことになります。
エラーが発生して何日も費やし、途中で諦めてしまうという方も少なくありません。

しかし、AWS Cloud9を利用することで、OSの違いを気にすることなくどのパソコンからでも同じ環境下で開発を進めることができます。

ぴっかちゃん

Cloud9では、開発に必要なソフトウェアがほとんど最初から入っているよ

前提条件の確認

次の前提条件を満たしているか確認しましょう。

上記の条件を満たしている方は、次に進みましょう。

Cloud9の導入手順

AWS Cloud9を導入する前に手順を確認しておきましょう。
導入までの手順は、以下の通りです。

IAMユーザーでコンソールにサインイン済みの方は、「2.Cloud9の管理画面にアクセスしよう」からお進みください。

サインインしていない方は、そのまま次に進みましょう。

ここからは実際に手を動かして、Cloud9を導入していくよ!

ぴかわかさん

1.IAMユーザーでコンソールにサインインしよう

まずは、IAMユーザー作成時に発行された「Console login link」のURLをブラウザ上部のアドレスバーに入力して検索しましょう。

Console login linkをアドレスバーに貼り付ける

続いて、以下の画面が表示されるので「ユーザー名」と「パスワード」を入力しましょう。

IAMユーザーサインイン画面

入力完了後、「サインイン」をクリックしましょう。
以下のように表示されたら、IAMユーザーによるサインインが完了です。

IAMユーザーでサインイン

2.Cloud9の管理画面にアクセスしよう

サインイン後、AWSマネジメントコンソール画面の上部にある検索窓に「cloud9」と入力し、サービスに表示された「Cloud9」をクリックします。

検索画面

以下の画面が表示されたら、Cloud9の管理画面にアクセスできています。
リージョンが東京に設定している方は「4.Cloud9の環境を作成しよう」へ進みましょう。

Cloud9の管理画面

別の地域が設定されている方は、そのまま次にお進みください。

3.リージョンを東京に変更しよう

画像のようにリージョンを「東京」に変更しておきましょう。

リージョンを東京に変更

リージョンとは、データセンター(サーバーやネットワーク機器など物理的に収容する場所)が存在する国や地域のことです。

所在地に近いリージョンを選択すると、通信速度が速くなります。

4.Cloud9の環境を作成しよう

Cloud9の管理画面にある「Create environment」をクリックしましょう。

Create environment

クリックすると、以下の環境を作成する画面が表示されます。
Nameには「pikawaka」と入力しておきましょう。

pikawakaの環境を作成する

入力完了後、「Next step」をクリックしましょう。

5.Cloud9の環境を設定しよう

続いて、以下の環境設定の画面が表示されます。
特に変更することなく「Next step」をクリックましょう。

環境設定画面

6.設定内容を確認しよう

最後に、環境の設定内容を確認しましょう。

確認後「Create environment」をクリックすると、起動を開始します。
少し時間がかかるので待ちましょう。

設定反映中

7.Cloud9の導入完了!

以下の画面が表示されたら、Cloud9の導入が完了です。

Cloud9の導入が完了

これでCloud9の導入は完了です。
次は基本的な操作方法を身につけましょう!

ぴかわかさん

AWS Cloud9の基本的な使い方を学ぼう

Cloud9の画面構成や基本操作について把握しておきましょう。

Cloud9の終了方法

Cloud9を開くブラウザのタブを閉じるだけで、終了することができます。

Cloud9の終了方法

初期設定では、Cloud9を閉じてから30分後に自動でサーバー(EC2)が停止します。
コストを節約してくれるので、安心して利用することができます。

ダッシュボードからCloud9の開き方

まずは、メニューを開きます。
画像のように左側にあるアイコンをクリックしましょう。

Cloud9のダッシュボード

表示されたメニューから「Your environment」をクリックします。

サイドバー

作成した環境が表示されるので「Open IDE」をクリックすれば、開くことができます。

環境を開く

Cloud9の画面構成

Cloud9の基本的な画面構成は、以下のように6つの領域で構成されています。

画面構成

各領域の役割は、以下の表の通りです。

名称 説明
1. メニューバー ファイルやコードなどを操作するエリア
2. ファイルシステム(環境) ディレクトリやファイルを表示するエリア
3. エディタ ファイルを編集するエリア
4. ナビゲーション 主要機能を表示するエリア
5. ターミナル ターミナルを操作するエリア
6. その他ツール デバッカーなどの開発ツールを表示するエリア

Webアプリケーションを開発するには「テキストエディタ」や「ターミナル」など各ソフトウェアが必要になります。

Cloud9の場合は、開発に必要なソフトウェアを1つにまとめて提供してくれます。

IDEの特徴

ぴっかちゃん

開発に必要なソフトウェアを1つにまとめると何が良いのかな

各ソフトウェアを導入する手間がなくなるよ
あとは同じ操作画面で利用できるからスムーズに開発を進められるね!

ぴかわかさん

テキストエディタとは

エディタ(editor)とは、データの編集を行うためのソフトウェアのことです。
データのファイルを開く・編集・保存することができます。

エディタ

テキストエディタ(text editor)とは、文字や記号だけで構成されたテキストファイルの編集を行うためのソフトウェアです。

文字や記号だけのテキストファイルを開く・編集・保存することができます。

テキストエディタ

実は開発で使用するプログラミング言語(コンピュータに指示を伝えるための言語)も文字と記号だけで構成されるテキストデータです。

そのためテキストエディタで編集することができます。

プログラミング言語もテキストデータ

Cloud9では、以下のエリアでテキストファイルの編集を行うことができます。

エディタの領域

ファイルの編集については、「ファイルの操作方法」で学びます。

ポイント
  1. テキストエディタは、テキストファイルの編集を行うソフトウェア
  2. テキストファイルは、文字や記号だけで構成されるファイル
  3. プログラミング言語も、文字と記号だけなのでテキストエディタが使える

ターミナルとは

ターミナル(端末エミュレータ)とは、コマンド(命令文)を入力してコンピュータを操作するソフトウェアのことです。

コマンドは、キーボードから「文字」を打ち込みます。

ターミナル操作

上の動画のように、ターミナルの画面に表示されるのも「文字だけ」です。

ターミナルのように、文字だけで操作を行う方式のことをCUI(Character-based User Interface)と呼びます。

ターミナル操作

一方、以下のようにコンピュータの画面上に表示されるウィンドウ、ボタン、アイコンをマウスなどで操作を行う方式のことをGUI(Graphical User Interface)と呼びます。

GUI操作

CUIとGUIは操作の方式が違うだけなので、基本的には同じ操作を行うことができます。
しかし、以下の理由により開発する際にはターミナルが使われます。

  • 素早い操作が可能
  • 目的ごとに画面を切り替える必要がない
  • 文字ベースなので操作記録が残せる
  • 容量が軽い

Cloud9では、以下のエリアでコマンドを入力してコンピュータを操作することができます。

ターミナル

メニューバーの表示・非表示

1番左側にある「▲」をクリックすると、メニューバーを非表示にすることができます。

メニューバーの表示

上部中央にある「▼」をクリックすると、メニューバーを表示にすることができます。

メニューバーの非表示

中央にある矢印は小さくて分かりづらいですが、以下の動画のようにメニューバーを表示・非表示することができます。

メニューバーの表示・非表示

ファイルの操作方法

Cloud9のファイル操作について学んでいきましょう。

最初に「ナビゲーション」の上から2番目にあるアイコンをクリックしておきましょう。

それでは、手を動かしてファイル操作を学んでいきましょう!

ぴかわかさん

フォルダを作成してみよう

フォルダは、「作成場所で右クリック > メニュー > 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の基本的な使い方や開発効率を上げるための設定を行うことができました。

次の章では、Cloud9上で「ターミナルの使い方」を学んでいきます。

この記事のまとめ

  • AWS Cloud9とは、Amazonが提供しているクラウドIDEのこと
  • IDE(統合開発環境)は、開発に必要なソフトウェアを1つにまとめたもの
  • Cloud9は、インターネット経由でブラウザさえあれば利用できる