Rails에서 phina.동적 읽기 js

이루고 싶은 일.
백엔드(Rails)에서 저장된 DB의 데이터를 호출하여 전치(phina.js)에 동적으로 넣으면 게임을 할 수 있습니다✅
phina.js 소개: 게임을 쉽게 만들 수 있는 자바스크립트의 라이브러리
개발 환경
Rails6 계열
루비 3 계열
phina.js 0.2.3(CDN)
앱: Muscle Beat(스마트폰 전용 근육 단련 시스템 음성 게임)
GitHub
책상(예)↓

1. 영상 속 피나.js의 환경 구축
게임 화면을 만드는 뷰에서 CDN phina를 사용합니다.js를 읽습니다.
임의의 뷰(예: beats#show)

<script src="https://cdn.jsdelivr.net/gh/phinajs/[email protected]/build/phina.js"></script>

참조: phina.js 환경 구축
2.view에서 게임용 기술을 진행합니다.
피나js의viewscriptタグ를 읽고 게임을 만드는 기술입니다.
실제 코드
임의의 뷰(예: beats#show)

<script src="https://cdn.jsdelivr.net/gh/phinajs/[email protected]/build/phina.js"></script>

<script>

  //ここにphina.jsを用いたゲーム用の記述をする

</script>

Q. JavaScript를 뷰에 기술하는 이유는 무엇입니까?
A. DB의 데이터를 동적으로 읽기 위해!
확실히 Rails의 JavaScript 기술은 일반적으로 app/javascript/packs 이하이다.
그러나 위 패키지 아래의 자바스크립트 파일은 Rails의 Webpacker를 통해 Rails가 DB를 읽기 전에 출력됩니다.
따라서 DB 데이터를 자바스크립트에 동적으로 읽기 위해viewscriptタグ에 기술해야 합니다!!!
3. eb 탭을 통해 동적 데이터 읽기
임의의 보기 (이번에는 beats#show)

<script src="https://cdn.jsdelivr.net/gh/phinajs/[email protected]/build/phina.js"></script>

<script>

  //ゲームの記述は省略
　　　var ASSETS = {
  sound: {
    music: "<%= @beat.music.url %>",
  },
  json: {
    beatmap: "<%= @beat.notes.url %>"
  },
  image: {
    'sprite': "<%= @beat.gif.url %>",
    'thumbnail': "<%= @beat.thumbnail.url %>",
  },
</script>

게임 기술erbタグ에서 DB의 데이터를 동적으로 읽습니다.
controllerrails g scaffold ~~~가 만들어도 괜찮아요.
임의 컨트롤러

class BeatsController < ApplicationController
  before_action :set_beat, only: %i[show edit update destroy]

  # 該当箇所以外は省略

  def show; end

  private

  def set_beat
    @beat = Beat.find(params[:id])
  end
end

4. 데이터 넣기
가능하다면, 만약 입력이 임의의 형식에서 eb 라벨로 출력되는 데이터로 설정된다면,phina입니다.js는 동적 숫자를 읽을 수 있습니다. 게임이 움직일 수 있습니다!
나의 상황은 음악 게임에 필요한 MP3와 악보 등 총 9개의 데이터를 동적으로 읽었다.rails console와 curlコマンド에 데이터를 입력하는 것보다 formタグ로 전용 입력 형식을 만드는 것이 향후 관리성에 유리하다✅
최후
phina.js와 Rails를 연합하지 못해서 기사를 집필했어요!
고민이 많은 분들께 이 기사가 전달됐으면 좋겠습니다.🌱