Railsにこれから初めて触れる方を対象にしたチュートリアルです
DXOpalを使用したDXOpalの実行環境構築チュートリアルになります
まず、rails newを実行し、Railsアプリのひな型を作成します
rails new dxopal
次に、作成したRailsアプリのディレクトリへと移動します
cd dxopal
先ほどのrails newでsqlite3のインストールがエラーになっている場合は、以下のようにバージョンを指定してください
gem 'sqlite3', '1.3.13'
その後、bundle installを実行します
bundle install
rails g scaffoldを使い、DXOpalのソースコードを管理するModelなどを作成します
rails g scaffold code title:string content:string
その後、rails db:migrateを実行します
rails db:migrate
ace-rails-apというgemを使い、Aceエディターを使用します
まずGemfileに必要なgemを追加します
gem 'ace-rails-ap'
gem 'jquery-rails'
その後、bundle installを実行します
bundle install
次に、app/assets/javascripts/application.jsに以下の4行を追加します
//= require jquery
//= require ace-rails-ap
//= require ace/theme-monokai
//= require ace/mode-ruby
次に、app/views/codes/_form.html.erbでエディターを使用したいところを以下のようにします
<div class="field">
<%= form.label :content %>
<%= form.text_area :content, id: 'ruby_code' %>
<div id="editor" class="inner"></div>
</div>
その後、app/assets/javascripts/codes.coffeeでエディターを表示し、その内容をtext_areaに格納できるようにします
$(document).on 'turbolinks:load', ->
if !($('#editor').length) then return false
editor = ace.edit('editor')
textarea = $('#ruby_code').hide()
editor.setTheme('ace/theme/monokai')
editor.getSession().setMode('ace/mode/ruby')
editor.getSession().setValue(textarea.val())
editor.getSession().on('change', ->
textarea.val(editor.getSession().getValue()))
これでOKと行きたいところですが、このままだとエディターの高さがなく、エディターがブラウザ上で表示されません
そこで、CSSの.innerをapp/assets/stylesheets/codes.scssを以下のように変更します
.inner {
height:300px;
padding-right:0;
padding-left: 0;
background-color: #ccc;
}
これでエディターを使用することができます！
さて、最後にDXOpalを導入します
こちらからdxopal.min.jsをダウンロードします
ダウンロードしたdxopal.min.jsをapp/assets/javascriptsフォルダ内に移動します
その後、app/assets/javascripts/application.jsに以下の一行を追加します
//= require dxopal.min
その後、Gemfileに以下の二行を追加し、bundle updateとbundle installを実行します
gem 'dxopal'
gem 'thor', '>= 0.19.1'
bundle update
bundle install
次に、app/views/codes/show.html.erbに以下の内容を追加します
<script type="text/ruby">
require 'native'
DXOpal.dump_error{ require_remote String($$.location.pathname) + "/code" }
</script>
<canvas id="dxopal-canvas"></canvas>
<div id="dxopal-errors"></div>
<input type='button' id='pause' value='Pause/Resume'>
最後に、config/routes.rbに/codes/:id/codeへのルーティングを追加し、app/controllers/codes_controller.rbにcodeアクションを作成します
get '/codes/:id/code', to: 'codes#code'
def code
render json: @code.content
end
これでDXOpalでのオンライン実行環境がRailsで構築できました！