前レッスンでCloud9を使ってみて、メニューやウィンドウ分割の多さに困惑したり、文字の小ささに馴染みにくさを感た方もいらっしゃるかもしれません。
今回はCloud9 IDE（ワークスペース）のインターフェイスの紹介と、Ruby on Rails学習をスムーズに進めるための環境設定を紹介します。
吉田先生
Cloud9には開発の際に手助けとなる機能がたくさん備わっています。スムーズに開発を進める為に最初に自分のWorkspaceをカスタマイズしましょう。
Cloud9 IDEの画面構成と主な機能
AWS Cloud9のIDE画面（ワークスペース）は、初期状態で以下のようになっています。
前回、ファイルの編集とプレビュー（Preview）ウインドウの追加をしました。 一緒に操作してくださった方は、下図のように表示されているでしょう。
どちらにせよ、メニューやウィンドウがたくさんありますね。
このセクションでは、Cloud9 IDEの主要５つブロック（機能）を紹介します。
①メニューバー
Cloud9 IDEのグランドメニューです。 ファイルの上書き保存から、環境設定まで、様々な機能が集約されています。
メニューバーの表示・非表示
メニューバーは、右上の▲アイコンで折りたたむことが出来ます。 表示されていない場合は、画面最上部のマウスポインタが切り替わるところでクリックすると表示されます。
カラーテーマの変更
Cloud9では30以上のテーマと配色が用意されています。 シンタックスハイライトなど、見慣れている方が分かりやすいこともありますので、自分の好きなものに変更しましょう。
テーマの変更はメニューバーのView > Themes から行えます。
例) Cloud9 > Cloud9 Day に変更した場合
画面構成・分割の変更
エディタ（ファイル）部分は、上下左右に分割が可能です。 分割の設定はメニューバーのView > Layout もしくは、タブ並びの左にあるアイコンから行えます。
・メニューバーのView > Layoutから選択する場合
・タブ並びの左にあるアイコンから選択する場合
タブはドラッグして、好きな位置に移動できます。 お好みに合わせて、制作を進めやすいレイアウトで使用して下さい。
②ファイルナビゲーター
ディレクトリ（フォルダ）やファイルの一覧が、ツリー状に表示されます。 環境ウィンドウ、ファイルツリーと呼ばれることもあります。
アプリ開発の中でコントローラやモデルファイルなどを開く時や、目的のファイルやフォルダを探すときに使用します。
フォルダをクリックすると展開・折りたたむ。 ファイルをダブルクリックすると、エディタで開くことができます。
③エディタ
ファイルを編集するエディタ部分です。 ファイルナビゲーターから開いたファイルに、コードやテキストを入力し制作を進めます。
タブの操作
Google Chromeなどのブラウザと同じ感覚で、タブの切替え、ファイルを閉じる操作を行うことが出来ます。
README.mdファイルを閉じましょう。 Railsサーバーの起動に使ったdevelopment.rbも、閉じてしまって良いです。
ファイルを閉じると、プレビューウィンドウも一緒に消えます。 必要な時にまた表示させれば良いので、このまま進めましょう。
実際にエディタでコードを書く時に役立つ機能などはCloud9のエディタ機能とショートカットでご紹介します。
④ターミナル(コンソール)
ターミナルは文字で指示を出して、Cloud9や制作するWebアプリを操作する場所。Macのターミナル、Windowsのコマンドプロンプトのようなものです。
現在地から移動する「cd」や、railsサーバーを立ち上げる「rails s」などのコマンドを入力して操作します。
ターミナルが消えてしまったときや、新しいターミナルを開きたいときは、メニューバーのWindow > New Terminalから追加可能です。 タブが並んでいるバー部分をクリックすると、分割表示もできます。
ターミナルの使い方、操作方法については先のレッスンで紹介します。
Skillhubレッスン
⑤プレビュー
プレビュータブでは、WebページやWebアプリケーションの表示を確認することができます。
Railsなどのアプリケーションのプレビュー確認の場合は、メニューバーのPreviewからタブを開くと良いでしょう。
htmlやpdf、Markdown形式のファイル（README.mdなど）であれば、フォルダツリーからプレビューを表示させることも多いです。 表示したいファイルを右クリックし、Previewを選択します。
プレビュータブも、ドラッグで好きな場所に移動させることができます。
制作環境を整える
これからファイルを確認したり、コードを書いていきやすいに、ワークスペースを更にカスタマイズしてみましょう。
Preferences (設定)を開く
Preferencesを開いてみましょう。 どの方法で開いても構いません。
・メニューバー左の「AWS cloud9」内にあるPreferences
・メニューバー右の歯車アイコン
エディタの文字サイズを変更
※README.mdなどをエディタで開いておくと確認しやすいです。
Preferencesタブ内の左ナビゲーションから、USER SETTINGをクリック。 USER SETTING内にあるCODE Editor(Ace)を開いてください。
設定部分（右側）をスクロールダウンしていくと、Font sizeの項目があります。 好きな大きさに変更してみましょう。
ターミナルの文字サイズを変更
USER SETTING内、Terminalの箇所で変更が出来ます。
Keyboard Modeを設定
Cloud9ではキーボード、ショートカットの設定も選べます。 設定箇所はツールバーのEdit > Keyboad Mode。 よくわからない、という方はSublimeを選択しておいてください。
また、Preferences (設定) > Keybindingsからは、独自にショートカットキーの組み合わせを定義することもできます。 キーの割り当て方法に関しては、AWS公式のユーザーガイドをご確認下さい。
タブサイズ(インデント幅)の変更
タブサイズとはTABキーを押したときに移動する空間のサイズです。 インデント幅、字下げ幅などとも呼ばれます。
タブサイズは1＝半角スペース1つ分で設定されます。 例えば、タブサイズ4の場合は、1回押すと半角スペース4個分のインデントをつけるという設定です。
見え方の差を確認してみましょう。
例) タブサイズ4の場合
<html>
<head></head>
<body>
<section>
<div class="row">
<div class="image">
<div class="label">
<span class="lms">
LMS
</span>
</div>
</div>
<div class="description">
<p>オンラインスクールをかんたんに運営することができます。</p>
</div>
</div>
</section>
</body>
</html>
例) タブサイズ2の場合
<html>
<head></head>
<body>
<section>
<div class="row">
<div class="image">
<div class="label">
<span class="lms">
LMS
</span>
</div>
</div>
<div class="description">
<p>オンラインスクールをかんたんに運営することができます。</p>
</div>
</div>
</section>
</body>
</html>
自分一人でコードを書く場合、タブサイズに決まりはありません。 ただ、タブサイズ4の設定では、入れ子が増えていくと、コードが右に寄っていきます。左側に無駄なスペースが多く、見にくくなってしまうかもしれません。
タブサイズは「2」で進めるのがおすすめです。 Preferencesからタブサイズの変更が可能です。
Preferencesでタブサイズを変更する方法
Preferences > Project Settings から「Soft Tabs」の項目を見てください。 ここが、タブサイズを設定する箇所になります。 数字を2に変更してみましょう。
エディターのタブ横にある「+」アイコンをクリック。 表示されるメニューからNew Fileを選択します。 新規作成したファイルで、tabキーを押してみましょう。
半角スペース２つ分、字下げが行われました。
Workspaceからのタブサイズを変更
エディタ下部「Spaces」をクリックしても、Tabサイズの変更ができます。
Preferencesから設定するのは、エディタ全体の設定。 エディター下部設定するTabサイズは、そのファイル固有の設定となります。
どこかのファイルでSpases:4 に変更しても、新規ファイルのタブサイズ設定には影響しません。
ご自身で使いやすい、文字サイズ・テーマ等の設定をしてみてください。
Cloud9では、環境シェア（共同開発）も可能
Cloud9では環境をシェアすることで、共同開発を行うことができます。 使用するのは、ツールバーの右にあるShareボタン。
とは言え、Shareボタンをクリックすれば、誰でもアクセスできるようになるわけではありません。共同作業をするユーザー（IAMユーザー）を作成する作業が必要です。
詳しい手順は、以下のブログ記事で解説しています。
Skillhubブログ