Cloud9のインターフェイス、基本設定方法【Ruby on Rails7開発の準備】
はじめてCloud9を開くと、メニューやウィンドウ分割の多さに困惑したり、文字の小ささに馴染みにくさを感じるかもしれません。メニューも英語ですしね。
Cloud9にはたくさんの機能が詰まっていますが、最初からすべてを覚える必要はありません。必要な設定・よく使う箇所から覚えていきましょう。
今回はCloud9 IDE（ワークスペース）の画面構成についてと、Ruby on Rails学習をスムーズに進めるための基本設定（環境設定）を紹介します。
Cloud9 IDEの画面構成と主な機能
AWS Cloud9のIDE画面（ワークスペース）は、初期状態で以下のようになっています。
前回の記事では、ファイルの編集とプレビュー（Preview）ウインドウの追加をしました。
一緒に操作してくださった方は、下図のように表示されているでしょう。
どちらにせよ、メニューやウィンドウがたくさんあります。
Cloud9には開発の際に手助けとなる機能がたくさん備わっています。
このセクションでは、Cloud9 IDEの主要５つブロック（機能）を紹介します。
スムーズに開発を進められるよう、ワークスペースのカスタマイズ方法も紹介します。
①メニューバー
Cloud9 IDEのグランドメニューです。
ファイルの上書き保存から、環境設定まで、様々な機能が集約されています。
メニューバーの表示・非表示
メニューバーは、右上の▲アイコンで折りたたむことが出来ます。
表示されていない場合は、画面最上部のマウスポインタが切り替わるところでクリックすると表示されます。
カラーテーマの変更
Cloud9では30以上のテーマと配色が用意されています。
シンタックスハイライトなど、見慣れている方が分かりやすいこともありますので、自分の好きなものに変更しましょう。
テーマの変更はメニューバーのView > Themes から行えます。
例) Cloud9 > Cloud9 Day に変更した場合
画面構成・分割の変更
エディタ（ファイル）部分は、上下左右に分割が可能です。
分割の設定はメニューバーのView > Layout もしくは、タブ並びの左にあるアイコンから行えます。
・メニューバーのView > Layoutから選択する場合
・タブ並びの左にあるアイコンから選択する場合
タブはドラッグして、好きな位置に移動できます。
お好みに合わせて、制作を進めやすいレイアウトで使用して下さい。
②ファイルナビゲーター
ディレクトリ（フォルダ）やファイルの一覧が、ツリー状に表示されます。
環境ウィンドウ、ファイルツリーと呼ばれることもあります。
アプリ開発の中でコントローラやモデルファイルなどを開く時や、目的のファイルやフォルダを探すときに使用します。
フォルダをクリックすると展開・折りたたむ。
ファイルをダブルクリックすると、エディタで開くことができます。
③エディタ
ファイルを編集するエディタ部分です。
ファイルナビゲーターから開いたファイルに、コードやテキストを入力し制作を進めます。
タブの操作
Google Chromeなどのブラウザと同じ感覚で、タブの切替え、ファイルを閉じる操作を行うことが出来ます。
README.mdファイルを閉じましょう。
Railsサーバーの起動に使ったdevelopment.rbも、閉じてしまって良いです。
ファイルを閉じると、プレビューウィンドウも一緒に消えます。
必要な時にまた表示させれば良いので、このまま進めましょう。
実際にエディタでコードを書く時に役立つ機能などはCloud9のエディタ機能とショートカットでご紹介します。
④ターミナル(コンソール)
ターミナルはCloud9を裏側から操作する場所です。
現在地から移動するcdや、railsサーバーを立ち上げるrails sなどのコマンドを入力して操作します。
消えてしまったときや、新しいターミナルを開きたいときは、メニューバーのWindow > New Terminalから追加可能です。
タブが並んでいるバー部分をクリックすると、分割表示もできます。
⑤プレビュー
プレビュータブでは、WebページやWebアプリケーションの表示を確認することができます。
Railsなどのアプリケーションのプレビュー確認の場合は、メニューバーのPreviewからタブを開くと良いでしょう。
htmlやpdf、Markdown形式のファイル（README.mdなど）であれば、フォルダツリーからプレビューを表示させることも多いです。
表示したいファイルを右クリックし、Previewを選択します。
プレビュータブも、ドラッグで好きな場所に移動させることができます。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
制作環境を整える
Preferences (設定)を開く
Preferencesを開いてみましょう。
どの方法で開いても構いません。
・メニューバー左の「AWS cloud9」内にあるPreferences
・メニューバー右の歯車アイコン
エディタの文字サイズを変更
※README.mdなどをエディタで開いておくと確認しやすいです。
Preferencesタブ内の左ナビゲーションから、USER SETTINGをクリック。
USER SETTING内にあるCODE Editor(Ace)を開いてください。
設定部分（右側）をスクロールダウンしていくと、Font sizeの項目があります。
好きな大きさに変更してみましょう。
ターミナルの文字サイズを変更
USER SETTING内、Terminalの箇所で変更が出来ます。
Keyboard Modeを設定
キーボード、ショートカットの設定はツールバーの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ブログ
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
11月24日まで