【Rails基礎講座 1】Cloud9入門 >
Cloud9の導入とインターフェイス

Cloud9の導入とインターフェイス

本チャプターではCloud9の導入とインターフェイスについて学びます。 Cloud9のアカウント作成などについてはいちばんやさしいRuby on Rails開発環境の作成入門で詳しく解説していますので不明点があればそちらも参照してください。

吉田先生

Cloud9には開発の際に手助けとなる機能がたくさん備わっています。スムーズに開発を進める為に最初に自分のWorkspaceをカスタマイズしましょう。

Workspaceの作成とインターフェース

インターフェースという言葉をご存知でしょうか。インターフェースとは異なる2つのものを仲介するという意味です。種類が異なる機器同士、コンピューター機器同士、コンピューターとプログラムを結びつける共用部分を指すために使われます。Railsでアプリ開発を行うには、テキストエディタやRubyなどのソフトウェアが必要です。つまり、開発環境を構築するという準備が必要なのです。この作業は、インストールや設定など難しい部分が多く手間がかかってしまいます。ですが、Cloud9というサービスを使用すれば簡単にプログラミングを始めることが出来ます。アプリの開発に必要なものがあらかじめ用意されてる(アプリ開発に必要な機能があらかじめ結び付けられている)為、ブラウザ上でプログラミングを行う事が出来るようになっています。つまり、Cloud9はRailsで開発を行う上で非常に便利なインターフェースということです。

Workspaceの作成

Cloud9(開発環境)で作業をする場所をWorkspaceと呼びます。まずはアプリ開発を行うWorkspaceを作成します。Workspaceの作成については応用編1にて詳しく解説をしていますので、そちらを参照してください。

1.Rails Tutorialを選択

2.Next stepをクリック

3.Create environmentというボタンをクリック

4.Workspaceが完成しました!

Cloud9の基本機能

次に、今後Workspaceで作業を進めるにあたっての基本的な機能を確認していきましょう。

1.ファイルナビゲータ

フォルダやファイルが格納されている場所です。今後アプリ開発の中でコントローラやモデルファイルなどを開く時や、目的のファイルやフォルダを探すときに使用します。

2.テキストエディタ

ファイルを編集するエディタ画面です。エディタとは何かを編集するときに使用するソフトのことですが、テキストエディタはコードや文字列など「テキスト」を編集するのでテキストエディタと呼ばれます。Cloud9のテキストエディタは本格的なエディタ機能を搭載しています。

3.ターミナル

Cloud9を裏側から操作する場所です。「コマンド」と呼ばれるCloud9へ私たち人間から指令を伝える為の呪文のようなものを打ち込みます。

いよいよアプリ開発を始めるぞ!と意気込んでいることかと思います。じれったいですが、今後快適に開発を進める為にいくつか準備をしておきましょう。

4.README.mdは閉じる

README.mdファイルの赤枠部分の×を押下してファイルを閉じましょう。

Preferences(環境設定)

1.タブサイズを2にする     

まず最初にタブサイズの設定を行います。タブサイズとはTABキーを押したときに移動する空間のサイズです。コーディング(コードを書く)際に、下記のような入れ子になることがよくあります。

 
<div id=”main”>
<p>□□□□□□□</p>
</div>

このような簡単なコードならば良いのですが、より複雑なコードになってくると

<div id=”main”>

の閉じタグ

</div>

が抜けてしまったり、無駄に

<div>

が増えてしまったりと後から自分で見る場合も、 他のメンバーとコードを共有する場合もわかりづらくなってしまいます。 そこで通常は入れ子にしているタグはTABキーでインデントをつけてわかりやすくしています。

<div id=”main”>
インデント<p>□□□□□□□</p>
</div>
    

こうしてインデントとつけることで、開始タグに対応する終了タグ(閉じタグ)が一目でわかるようになります。

タブサイズは「こうでなければいけない」という決まりはありませんが、広すぎても狭すぎてもコードが見辛くなってしまいます。

実際に、タブサイズが違うとコードの見え方がどのように変わるかを確認してみましょう。

確認用のTest.htmlファイルを作成

1. ファイルナビゲータ上で右クリック→New Fileを選択します。

 2.作成されたファイル名を「test.html」に変更してEnterキーを押してください。    


 3.test.htmlファイルができました!     

では現在のタブサイズを確認します。

4.Workspaceの右上の歯車マークを押してください。

Soft Tabsという項目の数字が4になっています。これはタブサイズが4=TABキーを1回押すと半角スペース4個分のインデントをつけるという設定です。    

5.Preferencesの横の×ボタンで設定画面を閉じて、下記【例】のコードを書いてみましょう。     

【例】

<p>1.htmlと打ってTABキーを押す→自動的にhtmlの閉じタグも生成されます 。</p>

<p><html>と</html>の間にheadと打ってTABキーを押す→自動的に</head>の閉じタグも生成されます。</p>

<p>3.同様に<head>と</head>の間にbodyと打ってTABキーを押す→自動的に</body>の閉じタグも生成されます。</p>

<p id="gdcalert14"><img alt="" class="img-responsive" height="631" src="https://popshub.s3.amazonaws.com/uploads/ckeditor/pictures/425/content_%E5%9B%B321.png" width="1200"></p>

Workspaceの右下の歯車の隣に4とあります。先ほどPreferencesで確認したようにタブサイズはここからでも確認・変更が可能です。では一度今のコードの最後を改行してください。タブサイズを2に変更して同様のコードを書いてみましょう。タブサイズはPreferencesからでも、右下の歯車の隣部分からでも変更可能です。     

    【Preferencesで変更する場合】     

    【Workspaceで変更する場合】     

それではタブサイズが4の場合と2の場合を比較してみてください。

 まだタグの種類が3種類のみと少ないですが、タブサイズ4のコードはこのままコーディングしていくと無駄な余白が多く、コード自体がどんどん右にずれていってしまいます。後からコードを見直した時に、わかりやすいコードにする為に作業開始前にタブサイズを2に変更しておきましょう。     

文字サイズ指定

1.USER SETTINGで文字サイズ指定

文字サイズもタブサイズの変更と同様にPreferencesの左側の項目からUSER SETTINGを選択し、CODE Editor(Ace)のFont Sizeで自分の見やすいフォントサイズに変更しましょう。

2.Keyboard modeをSublimeに

次にキーボードの設定を行います。WorkspaceのツールバーのEditからKeyboad Mode→Subrimeを選択してください。これで環境設定は完了です。test.htmlのファイルを削除しておきましょう。

  今回のレッスンでは、Workspaceを作成し、コーディングに向けた環境設定を行いました。次のレッスンではWorkspaceにファイルやフォルダを作成する方法やショートカットキーなどより実践に近い内容を勉強します。環境設定が完了したら次のレッスンへ進みましょう。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る