MyFirstRails

DXOpalの実行環境！

概要

Railsにこれから初めて触れる方を対象にしたチュートリアルです

Opalを使用したRubyのオンライン実行環境構築チュートリアルになります

チュートリアル

Railsのひな型を作る

まず、rails newを実行し、Railsアプリのひな型を作成します

rails new opal

次に、作成したRailsアプリのディレクトリへと移動します

cd opal

SQLite3のバージョン修正

先ほどのrails newでsqlite3のインストールがエラーになっている場合は、以下のようにバージョンを指定してください

gem 'sqlite3', '1.3.13'

その後、bundle installを実行します

bundle install

ScaffoldでCRUDのひな型作成

rails g scaffoldを使い、Rubyのソースコードを管理するModelなどを作成します

rails g scaffold code title:string content:string

その後、rails db:migrateを実行します

rails db:migrate

ace-editorの導入

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;
  }

これでエディターを使用することができます！

Opalの導入

さて、最後にOpalを導入します

Opal自体はCDNでインストールします

app/views/codes/show.html.erbに以下のCDN読込コードを追加します

    <script src="https://cdn.opalrb.com/opal/current/opal.js" onload="Opal.load('opal')"></script>
    <script src="https://cdn.opalrb.com/opal/current/opal-parser.js" onload="Opal.load('opal-parser')"></script>

app/views/codes/show.html.erbで、以下のように<script type="text/ruby">内にRubyのコードを展開できるようにします

<script type="text/ruby">
  <%= sanitize @code.content %>
</script>

RubyのputsはJavaScriptのconsole.logに変換されるため、このままですとDevToolなどのコンソールに実行結果が表示されます

実行結果をHTML上に表示できるようにするには以下のようにconsole.logを再定義する必要があります

そこでapp/assets/javascripts/application.jsに以下のコードを追加します

var console = {};
console.log = function(hogehoge){ $(".exec").append(`${hogehoge}<br>`)};

JQueryを使い、.execを持つ<div>にconsole.logで表示されている実行結果が表示されるようになります

最終的なコードとしては以下のようになります

<script src="https://cdn.opalrb.com/opal/current/opal.js" onload="Opal.load('opal')"></script>
<script src="https://cdn.opalrb.com/opal/current/opal-parser.js" onload="Opal.load('opal-parser')"></script>

<p id="notice"><%= notice %></p>

<p>
  <strong>Title:</strong>
  <%= @code.title %>
</p>

<p>
  <strong>Content:</strong>
  <%= @code.content %>
</p>

<p>実行結果</p>
<div class="exec"></div>

<script type="text/ruby">
  <%= sanitize @code.content %>
</script>

<%= link_to 'Edit', edit_code_path(@code) %> |
<%= link_to 'Back', codes_path %>

これでOpalを使用してのRubyのオンライン実行環境が構築できました！

This site is open source. Improve this page.