개시하다

이 글은 오팔(Ruby-to-JavaScript compuiler) 어드벤트 캘린더의 2018년 5일차 기사다.
앞서 적은Rails에서 DXOpal을 사용해 봤어요. 때의 경험을 바탕으로 라일스와 베일.js로 DXOpal의 온라인 환경을 만들어 봤어요.

만들어진 물건

데모

시위 행진이 사용되었다여기 소스 코드..
감사합니다.
소스 코드

설치 등

Webpacker, Vue를 사용합니다.js에서는 프런트엔드와 Rails가 각각 백엔드를 수행합니다.
제작/api/sources과 같은 API는 axios를 거쳐 전단에서 DXOpal의 원본 코드를 교환한다.
편집 섹션은 vue2-ace-editor에 설치됩니다.
실제 포장이 가장 힘든 것은 DXOpal의 원본 코드가 API를 통과하는데 어떻게 수신합니까
우선, 컨트롤러는 다음과 같은 내용으로 변경되었다.
api/sources_controller.rb

class Api::SourcesController < ApplicationController
    before_action :set_source, only: [:code, :show, :edit, :hashtags, :update, :destroy]

    #省略

    def code
      render json: @source.code
    end

    #省略

    private
      # Use callbacks to share common setup or constraints between actions.
      def set_source
        @source = Source.find(params[:id])
      end

    # 以下省略

end

routes.rb

Rails.application.routes.draw do

  #省略

  namespace :api, format: 'json' do
    resources :sources
    get "/sources/:id/code", to: "sources#code"
  end
end

작업code을 작성하고 라우트를 추가/api/sources/:id/code합니다.
그리고 DXOpal의 소스 코드를 실행하는 각 Show 페이지는 다음과 같이 변경됩니다.
Show.vue

<template>
    <div class="container">
        <h1><p> Name: {{name}} </p></h1>

        <h2><p> Code </p></h2>
        <p>{{code}}</p>

        <h2><p> Game </p></h2>
        <script type="text/ruby">
            require 'native'
            DXOpal.dump_error{ require_remote "/api/" + String($$.location.pathname) + "/code" }
        </script>

        <canvas id="dxopal-canvas"></canvas>
        <div id="dxopal-errors"></div>
        <input type='button' id='pause' value='Pause/Resume'>
    </div>
</template>

간에는 다음과 같은 부분이 있다.

            require 'native'
            DXOpal.dump_error{ require_remote "/api/" + String($$.location.pathname) + "/code" }

우선, requirenativeで달러입니다.location.pathname`을 사용할 수 있도록 합니다.
그리고 다음 코드로 접근/api/sources/:id/code하여 DXOpal의 원본 코드를 읽고 실행합니다

DXOpal.dump_error{ require_remote "/api/" + String($$.location.pathname) + "/code" }

이렇게 하면 DXOpal의 실행을 확인할 수 있습니다

끝말

아직 기초 부분만 완성했기 때문에 먼저 잘 디자인하고 싶어요.
그리고 실제 인코딩을 할 때 확인할 수 있는 환경을 구축하고 싶습니다.

참조 링크

yhara/dxopal
opal/opal