LoginSignup
4
4

More than 5 years have passed since last update.

AWS上のRailsでFullCalendarを使うまで

Last updated at Posted at 2014-08-20

以下のサイトを参考に、AWSのEC2上で環境構築してみたので手順を残す。
Ruby on Railsとfullcalendar pluginでGoogleカレンダークローンを作る(1)

1. EC2の設定&起動

  • こちらの記事などを参考に、EC2インスタンスを作成し起動する。
  • 上記セキュリティグループの設定(≒ファイアウォールの設定)で、"inbound"に以下を設定しておくこと。
Protocol Type Port range Source
SSH TCP 22 Anyware[0:0:0:0]
Custom TCP Rule TCP 3000 Anyware[0:0:0:0]

2. yum update及び、必要パッケージの追加

yum updateしておく。

$ sudo yum update

あとで必要となるパッケージ一式をインストールしておく。

$ sudo yum install ruby ruby-devel gcc gcc-c++ sqlite-devel

3. bundlerのインストール

SSHクライアントの画面で以下のコマンドを実行する。

$ gem install bundler

4. railsプロジェクトの作成

新規プロジェクトフォルダ(calendar)を作成し、初期化しておく。

$ mkdir calendar
$ cd calendar
$ bundle init

Gemfileが作成されるので、これを開き下記の変更(2行)を行う。

Gemfile
# A sample Gemfile
source "https://rubygems.org"

gem "rails"              <--コメントを外す
gem "io-console"         <-- 追加する

gemをインストールする。

$ bundle install --path vendor/bundle

以下のコマンドを実行する。

$ bundle exec rails new .

参考:システムのgemにrailsをインストールせずrails newする

5. fullcalendarプラグインの導入

Gemfileに、以下の2つの変更を行う。

  • therubyracerのコメントアウトを外す

gem 'therubyracer', platforms: :ruby

  • io-console,fullcalendar-railsの追加

gem 'io-console'
gem 'fullcalendar-rails'

gemのインストール

$ bundle install

以下のメッセージが出る場合は、bundle updateを実行する。

:(省略)
Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

 ↓
$ bundle update

6. カレンダーを表示させる

bundle exec rails g controller calendar index

生成されたテンプレートにカレンダー表示の行(1行)を追記する。

app/views/calendar/index.html.erb
<h1>Calendar#index</h1>
<p>Find me in app/views/calendar/index.html.erb</p>

<div id=calendar></div>        <-- 追記する

以下のファイルを新規に作成する。

app/assets/javascripts/calendar.js
$(document).ready(function() {
    $('#calendar').fullCalendar({
    })
});

以下のファイルに行を追加する。

app/assets/javascripts/application.js
 :(省略)
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require fullcalendar    <-- この行を追加(挿入)
//= require_tree .

以下のファイルに行を追加する。

app/assets/stylesheets/application.css
 :(省略)
 *
 *= require fullcalendar    <-- この行を追加(挿入)
 *= require_tree .
 *= require_self
 */

アプリケーションの起動

bundle exec rails s

以下のサイトにアクセスする。

http://(EC2のURL):3000/calendar/index

おしまい。

動作確認時のバージョン

  • Amazon Linux

Amazon Linux AMI 2014.03.2

  • ruby

ruby 2.0.0p451 (2014-02-24 revision 45167)

  • gems (bundle listの結果)

Gems included by the bundle:
* actionmailer (4.1.5)
* actionpack (4.1.5)
* actionview (4.1.5)
* activemodel (4.1.5)
* activerecord (4.1.5)
* activesupport (4.1.5)
* arel (5.0.1.20140414130214)
* builder (3.2.2)
* bundler (1.7.0)
* coffee-rails (4.0.1)
* coffee-script (2.3.0)
* coffee-script-source (1.7.1)
* erubis (2.7.0)
* execjs (2.2.1)
* fullcalendar-rails (1.6.4.0)
* hike (1.2.3)
* i18n (0.6.11)
* io-console (0.4.2)
* jbuilder (2.1.3)
* jquery-rails (3.1.1)
* json (1.8.1)
* libv8 (3.16.14.3)
* mail (2.5.4)
* mime-types (1.25.1)
* minitest (5.4.0)
* multi_json (1.10.1)
* polyglot (0.3.5)
* rack (1.5.2)
* rack-test (0.6.2)
* rails (4.1.5)
* railties (4.1.5)
* rake (10.3.2)
* rdoc (4.1.1)
* ref (1.0.5)
* sass (3.2.19)
* sass-rails (4.0.3)
* sdoc (0.4.1)
* spring (1.1.3)
* sprockets (2.11.0)
* sprockets-rails (2.1.3)
* sqlite3 (1.3.9)
* therubyracer (0.12.1)
* thor (0.19.1)
* thread_safe (0.3.4)
* tilt (1.4.1)
* treetop (1.4.15)
* turbolinks (2.2.3)
* tzinfo (1.2.2)
* uglifier (2.5.3)

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4