読者です 読者をやめる 読者になる 読者になる

手取り足取りプログラミング

cloud9、railsについて自分がつまずいた所を詳しく説明します。なぜなら一番読み返すのは自分だから。

【Cloud9】Railsワークスペースのテンプレートを作成する

Cloud9

Cloud9登録していない人は先に前回の記事を参考に登録してください。
yonayonaru.hatenablog.com

はじめに

Cloud9では簡単にワークスペースの作成ができます。
ですがワークスペースを作成するたびに初期設定するのは面倒です。そこでテンプレートのワークスペース作成し必要な設定(設定やGemfile)をしておきます。ワークスペースを新規作成するときは、テンプレートワークスペースをクローンして作成することで初期設定済みのワークスペースが作成されます。

無料版ではprivateワークスペース(他の人が閲覧できない)は1つのみですが、publicワークスペース(他の人が閲覧できる)は無制限で作成できます。そのためテンプレート用はpublicで作成します。

完成したワークスペースを公開しています。
https://ide.c9.io/yonayonaru/template

バージョンは下記の通り
ruby 2.3.0
Rails 4.2.5

Railsワークスペースを作成する

ワークスペースを作成を開始する

ダッシュボード(ログインしたら最初に表示されるページ)内の create a new workspace をクリック
f:id:yonayonaru:20161002165757p:plain

ワークスペースの設定をする

Workspace name
ワークスペース名。templateと入力します。わかりやすければ何でもいいよ。
Description
説明なので何でもいいよ。日本語OKです。
Hosted workspace
public(他の人から閲覧できる)を選択してください。
Choose a template
Raisを選択する。

全て入力したらCreate workspaceボタンを押します。
f:id:yonayonaru:20161002234705p:plain

作成中の画面

1、2分で出来るので少し待ってね。
f:id:yonayonaru:20161002165818p:plain

ワークスペースが作成完了

f:id:yonayonaru:20161003000800p:plain
テンプレート用のワークスペースが作成されたので、いくつか設定を行っていきます。

タブサイズの設定

rubyでは一般的にタブサイズは2です。
Cloud9のデフォルトの設定は4担っているので、2に変更しましょう。

設定画面を開く

画面右上の設定ボタンを押します。
f:id:yonayonaru:20161003001045p:plain

Soft tabsの設定変更

変更後閉じてください。設定保存のボタンとかは特にありません。
f:id:yonayonaru:20161003001224p:plain

bootstrapの適用

bootstrapという簡単にいい感じにデザインしてくれるCSSフレームワークを適用します。

bootstrapインストール

Gemファイルに下記を追記してください。

Gemfile

gem 'bootstrap-sass' 

下記コマンドを実行してbootstrapをインストールします。

bundle install

bootstrap使用準備

ファイル名の変更をします。
変更前)app/assets/stylesheets/application.css
変更後)app/assets/stylesheets/application.css.scss

application.css.scssに赤字部分を追記します。

app/assets/stylesheets/application.css.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";

application.jsに赤字部分を追記します。

app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

bootstrapの設定は以上です。

slimの設定

slimはhtmlを簡単に書くためのツールです。
railsではデフォルトのhtmlテンプレートはerbですが、slimの方が楽です。
erbの方が良ければこの設定はしなくてOKです。

slimのインストール

下記の内容をGemfileに追加してください。

Gemfile
gem 'slim-rails'

下記コマンドを入力してSlimをインストールします。

bundle install

app/views/layouts/application.html.erb を application.html.slim にリネームします。
その後、下記のように修正してください。

app/views/layouts/application.html.slim

DOCTYPE
html
  head
    title Workspace
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  body
    == yield

slimの設定は以上です。

ワークスペースをクローンして作成する

以上で、テンプレート用のワークスペースができました。
このワークスペースをクローンして新規ワークスペースを作成します。

ダッシュボード表示

画面右上のアイコンをクリックし、Dashboardをクリックするとダッシュボードに戻ります。
f:id:yonayonaru:20161003001752p:plain

テンプレートワークスペースのコピー

テンプレートワークスペースのCloneボタンを押します。
f:id:yonayonaru:20161003003458p:plain

ワークスペース設定

Workspace name、Descriptionを入力し、Create workspaceボタンを押します。
f:id:yonayonaru:20161003003630p:plain

ワークスペース完成

f:id:yonayonaru:20161003003936p:plain

ワークスペースをprivateにする

publicのワークスペースをクローンして作成するとpublicになっているのでprivateに変更します。
publicのままでいいならやらないでいいです。

ワークスペース設定画面を開く

ダッシュボードを開き、privateにするワークスペースをクリックします。CloneとOpneボタン以外の場所をクリックする。
f:id:yonayonaru:20161003010232p:plain

設定画面に遷移する

下記の設定ボタンを押します。
f:id:yonayonaru:20161003010326p:plain

privateに変更する

privateを選択して、saveボタンを押します。
f:id:yonayonaru:20161003010639p:plain

確認する

ダッシュボードに戻るとprivateワークスペースには鍵アイコンが表示されています。
f:id:yonayonaru:20161003010749p:plain

完成

以上でワークスペースの作成と初期設定は終わりです。
以降の記事はこのテンプレート用ワークスペースをクローンしている前提で進めていきます。

サンプルソース

今回作成したテンプレートワークスペースを公開します。
サンプル
サンプル slim