Cloud9のインターフェイス、基本設定方法【Ruby on Rails7開発の準備】

｜ 10113 PV ｜ 2022.05.16

favorite_border

はじめてCloud9を開くと、メニューやウィンドウ分割の多さに困惑したり、文字の小ささに馴染みにくさを感じるかもしれません。メニューも英語ですしね。

Cloud9にはたくさんの機能が詰まっていますが、最初からすべてを覚える必要はありません。必要な設定・よく使う箇所から覚えていきましょう。
今回はCloud9 IDE（ワークスペース）の画面構成についてと、Ruby on Rails学習をスムーズに進めるための基本設定（環境設定）を紹介します。

Cloud9 IDEの画面構成と主な機能

①メニューバー
②ファイルナビゲーター
③エディタ
④ターミナル(コンソール)
⑤プレビュー

制作環境を整える

Preferences (設定)を開く
エディタの文字サイズを変更
ターミナルの文字サイズを変更
Keyboard Modeを設定
タブサイズ(インデント幅)の変更

Cloud9のシェア（共同開発）方法

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を選択します。

プレビュータブも、ドラッグで好きな場所に移動させることができます。

まずは無料の14講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

制作環境を整える

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公式のユーザーガイドをご確認下さい。

外部リンク

AWS Cloud9 統合開発環境 (IDE)でキー割り当てを使用する - AWS Cloud9 ユーザーガイド

タブサイズ(インデント幅)の変更

タブサイズとは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>