香川大学SLPからお届け！（Vol.60掲載）
著者：山下賢治
今回は、Webブラウザでアクセスできる予定共有アプリの作成方法を紹介します。Webアプリケーションフレームワークの「Ruby on Rails」と、JavaScriptのライブラリである「FullCalendar」を組み合わせることで、マウス操作で予定の追加や変更が可能な予定共有アプリを手軽に作成できます。
シェルスクリプトマガジン Vol.60は以下のリンク先でご購入できます。
図2 ルーティング設定
|
1 2 3 |
Rails.application.routes.draw do resources :calendar, only: [:index] end |
図3 アプリのViewを作成する手順
|
1 |
<div id="calendar"></div> |
|
1 2 3 4 5 6 |
$(document).on 'turbolinks:load',-> $('#calendar').fullCalendar({}) return $(document).on 'turbolinks:before-cache',-> $('#calendar').empty() return |
|
1 2 3 4 5 |
/* *= require_tree . *= require_self *= require fullcalendar */ |
|
1 2 3 4 5 6 7 8 |
//= require moment //= require jquery //= require fullcalendar //= require fullcalendar/locale-all //= require fullcalendar/lang/ja $(function(){ $('#calendar').fullCalendar({}); }) |
図5 ルーティング設定の変更
|
1 2 3 4 |
Rails.application.routes.draw do resources :calendar, only: [:index] resources :schedules, only: [:index, :create] end |
図6 登録データをJSON形式で取り出すコードを追加
|
1 2 3 4 5 6 7 8 9 10 11 |
class SchedulesController < ApplicationController def index schedules = Schedule.all respond_to do |format| format.json { ender json: schedules.to_json() } end end end |
図7 登録済みのデータを表示するコードを追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//= 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」のコード改造例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$('#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' }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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」ファイルに追加する記述
|
1 |
<%= hidden_field_tag "authenticity_token", form_authenticity_token %> |
図11 「app/controllers/schedules_controller.rb」ファイルに追加する記述
|
1 2 3 4 5 6 7 |
def create Schedule.create( title: params[:title], start: DateTime.parse(params[:start]), end: DateTime.parse(params[:end]) ) end |