香川大学SLPからお届け！（Vol.60掲載）

著者：山下賢治

　今回は、Webブラウザでアクセスできる予定共有アプリの作成方法を紹介します。Webアプリケーションフレームワークの「Ruby on Rails」と、JavaScriptのライブラリである「FullCalendar」を組み合わせることで、マウス操作で予定の追加や変更が可能な予定共有アプリを手軽に作成できます。

シェルスクリプトマガジン Vol.60は以下のリンク先でご購入できます。

図2　ルーティング設定

Rails.application.routes.draw do
  resources :calendar, only: [:index]
end

図3　アプリのViewを作成する手順

<div id="calendar"></div>

$(document).on 'turbolinks:load',->
  $('#calendar').fullCalendar({})
  return
$(document).on 'turbolinks:before-cache',->
  $('#calendar').empty()
  return

/*
  *= require_tree .
  *= require_self
  *= require fullcalendar
*/

//= require moment
//= require jquery
//= require fullcalendar
//= require fullcalendar/locale-all
//= require fullcalendar/lang/ja
$(function(){
  $('#calendar').fullCalendar({});
})

図5　ルーティング設定の変更

Rails.application.routes.draw do
  resources :calendar, only: [:index]
  resources :schedules, only: [:index, :create]
end

図6　登録データをJSON形式で取り出すコードを追加

class SchedulesController < ApplicationController
  def index
    schedules = Schedule.all
    respond_to do |format|
      format.json {
        ender json:
        schedules.to_json()
      }
    end
  end
end

図7　登録済みのデータを表示するコードを追加

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require moment
//= require jquery
//= require fullcalendar
//= require fullcalendar/locale-all
//= require fullcalendar/lang/ja
$(function(){
  $('#calendar').fullCalendar({
    events: '/schedules.json'
  });
})

図9　「app/assets/javascripts/application.js」のコード改造例

$('#calendar').fullCalendar({
  selectable: true,
  selectHelper: true,
  draggable: true,
  select: function(start, end) {
    var title = prompt("予定名");
    var scheduleData;
    if ( title ) {
      scheduleData = {
        title: title,
        start: start,
        end: end
      };
      $('#calendar').fullCalendar('renderEvent', scheduleData, true);
      createSchedule(scheduleData);
    }
    $('#calendar').fullCalendar('unselect')
  },
  events: '/schedules.json'
});

createSchedule = function(scheduleData) {
  $.ajax({
    type: 'POST',
    url: "/schedules",
    data: {
      title: scheduleData.title,
      start: String(scheduleData.start),
      end: String(scheduleData.end),
      authenticity_token: $("#authenticity_token").val()
    }
  }).done(function(data) {
    alert("登録しました");
  }).fail(function(data) {
    alert("登録失敗しました");
  });
};

図10　「app/views/calendar/index.html.erb」ファイルに追加する記述

<%= hidden_field_tag "authenticity_token", form_authenticity_token %>

図11　「app/controllers/schedules_controller.rb」ファイルに追加する記述

def create
   Schedule.create(
     title: params[:title],
     start: DateTime.parse(params[:start]),
     end: DateTime.parse(params[:end])
   )
 end