소설 게임 바람의 릴레이로 이야기를 쓰는 응용 프로그램의 이야기[개인 개발]

소설 게임처럼 이야기를 창작할 수 있는 응용 프로그램

상어가 수영을 멈출 수 없듯이 개인 개발자가 개인 개발을 멈추면 죽음을 의미한다.
개인 개발자가 반드시 무엇을 개발해야 하는가 하는 것이다.
파닥파닥 누워서 앱에 대한 생각을 하고 있다.
그래서'소설 놀이 스타일의 이야기를 다 같이 만들었으면 좋겠다'는 생각을 했어요.
소설 게임처럼 이야기를 만들 수 있는 애플리케이션을 개발하기로 했다.
실제로 만든 건 여기서↓

이야기 트리

기술 선정

이번에는 특별히 새로운 시장을 개척하지 않고 억지를 부리는 곳이 없고 필자가 익숙한 기술을 사용했다.
그것은 ↓와 같다.

Django

Vue

DRF

Bootstrap

응, 이것은 대체할 수 없는 기술이야.
이것도 별로 방법이 없다.
나는 새로운 자극이 필요하다고 생각한다.
뭐, 아이디어를 구체화할 수 있다면 가장 익숙한 기술이 좋다.
이번 응용 프로그램은 이걸로 하기로 했어요.

어플리케이션 사양

응용 프로그램의 규격이 곧 결정되었다.
특별히 고민할 거 없어요.
어쨌든 그림에 글과 BGM을 더하면 된다.
배경과 캐릭터, 그리고 문장과 음악이라는 얘기다.
이러한 요소를 선택할 수 있는 편집을 준비하다.
소설 게임은 마우스 클릭 등을 통해 화면을 전환한다.
나는 이 한 장 한 장의 화면을 뭐라고 하는지 모르겠지만, 어쨌든 먼저 팽이라고 부른다.
그리고 팽이가 모인 것을'장면'이라고 명명했다.
편집부에서 장면을 만들어 다른 사람에게 공개한다.
장면의 제작은 여러 개의 화면을 만들어야 한다.
그리고 각 화면에 배경, 캐릭터, 글, BGM을 설정할 수 있다.
제작된 장면은 공개됐지만 다른 사람들이 그 장면을 계속 쓰면 재밌을 것 같아요.
특정 장면을 부모로서 아이의 장면을 만들겠다는 것이다.
이 구조는 고리 구조로 웹의 DB를 통해 재현할 수도 있다.
자기 참조 모델만 정의하면 됩니다.
방법은 이것뿐이야.
나는 개발에 착수하기 시작했다.

개발의 입구

개발할 때 먼저 Django의 응용 프로그램을 제작한다.
이것은 지령으로 진행할 수 있다.
개발 코드는 storymaker입니다.

$ python manage.py startapp storymaker

그런데 storymaker라는 이름이 여러 곳에서 쓰인 것 같아요.
앱을 공개할 때는 상표권이나 기존 다른 앱과 이름이 같은지 확인해야 한다.
이걸 태만하면 앱이 인기를 끌지만 이름이 너무 눈부셔서 이름을 바꿀 수밖에 없는 문제가 생긴다.
응용 프로그램의 이름이 가장 좋은 것은 독특하다는 것이다.
그리고 Webpack을 설정하고 Vue 개발에 들어갑니다.
Django와 Webpack을 django-webpack-loader 등의 조합으로 사용합니다.
웹팩에 구축된 Vue의 소스 코드를 Django로 읽고, 화면에 표시할 수 있다면 나머지는 Vue를 엉망진창으로 쓴 것일 뿐이다.

Vue를 사용하여 장면 편집기 생성하기

Vue를 사용하여 장면 편집기를 만듭니다.
편집자는 일반적으로 복잡하게 변하기 쉽다.
또 데이터를 표준적인 Vue 기능만으로 표현하기에는 역량이 부족한 부분도 있다.
거기에 Vuex를 넣으세요.
Vuex는 분산된 구성 요소에서 일관된 작업을 수행할 수 있도록 데이터를 전 세계에 집중합니다.
편집자의 데이터는 여러 구성 요소에서 인용됩니다.
그래서 Vuex는 필수라고 할 수 있다.
장면 편집 제작 배경 및 역할의 드롭다운 메뉴입니다.
그리고 배경과 캐릭터를 선택한 미리보기 화면에 그 그림을 표시합니다.
그림을 그려야 하기 때문에 그림을 그려야 합니다.
나는 애용하는 물감 도구 SAI를 작동시켜 테스트용 그림을 그렸다.
그리고 장면 편집기로 그걸 보여줬어요.
안전표시를 받다.
이것은 별다른 것이 아니다. 특별히 어려운 일은 하지 않았다.
그런 느낌으로 문장용 텍스트 영역, BGM의 선택 등이 이뤄졌다.
BGM은 FL Studio라는 DTM 소프트웨어로 제작되었습니다.
그리고 밑에 있는 메뉴 등을 편집한 팽이를 장면 프레임 목록에 추가하는 기구를 만든다.
기본적으로 새 칸이 목록에 추가된 상태에서 편집이 시작됩니다.
이렇게 되면 팽이가 없는 상태를 생략할 수 있어 방법이 간단해졌다.
그러나 칸을 삭제할 수 있기 때문에 모두 삭제하면 오류가 발생할 수 있다.
역시'팽이가 없다'이런'0'상태가 필요하다.
장면 데이터는 Vue에서 axios로 Django와의 API 통신을 사용하여 저장됩니다.
그러면 장면이 DB에 저장됩니다.
장면은 1개 이상의 프레임으로 구성되어 있기 때문에 DB는 ↓와 같은 모델로 장면과 프레임을 연결한다.

from django.db import models
from storymaker.models.scene import Scene
from storymaker.models.koma import Koma


class SceneKomaXref(models.Model):
    scene = models.ForeignKey(Scene, on_delete=models.PROTECT, help_text='シーン')
    koma = models.ForeignKey(Koma, on_delete=models.PROTECT, help_text='コマ')

    class Meta:
        verbose_name = 'シーン X コマ'
        verbose_name_plural = 'シーン X コマ一覧'
        ordering = ('-id', )

    def __str__(self):
        return f'({self.id}) シーン X コマ'

특정 객체를 연결하려는 경우 자주 사용하는 모델 구조입니다.
이번에도 당신의 보살핌을 받았습니다.

장면 미리 보기

장면 미리보기는 장면을 표시하는 구성 요소입니다.
이것은 화면 미리보기가 있습니다.
장면 미리보기의 역할은 화면 미리보기에 여러 개의 화면을 표시하는 것이다.
프레임 미리보기는 프레임 표시에 초점을 맞추고 장면 미리보기는 여러 프레임의 작업에 초점을 맞춘다.
이렇게 하면 복잡도를 줄일 수 있고 개발도 수월해질 것이다.
이른바 분할 통치의 방법이라는 것은 일반적인 방법이라고 할 수 있다.
장면 미리 보기를 설정하는 페이지에도 장면의 부모와 아이를 표시할 수 있다.
이렇게 하면 링크를 따라 그 장면의 모자를 볼 수 있다.
그리고 '이 장면 계속' 단추를 설정합니다.
이 버튼을 누르면 장면 편집은 그 장면을 부모님께 시작합니다.
장면에 부모 속성parent을 추가하기 위해 ID만 부여하면 되므로 설치가 수월합니다.
디자인이 간단하면 실현도 순조롭다고 할 수 있다.

완성 및 공개

응용 프로그램의 이름은'이야기 여행'이다.
그는 "우리 이야기를 창작합시다"라고 말했다.
평일 근무가 끝난 후와 휴일 이용은 한 달 정도면 완료된다.
가장 시간이 걸리는 것은 그림 등 자원을 준비하는 것이다.
자원이 AI로 생성될 수 있는 시대가 왔기 때문에 이런 자원을 만드는 기술 시장 가치도 떨어질 것으로 예상된다.
더 나아가 소프트웨어도
AI는 컴퓨터를 사용하는 일을 거의 대체할 가능성이 있다.
꾸준히 기술을 쌓은 자신에게는 슬픈 일이다.
말은 그렇지만 2022년 3월'물어츠크러우'는 순조롭게 개봉한다.
만약 이야기를 창작하는 것을 좋아하는 사람이 사용할 수 있다면, 나는 매우 기쁠 것이다.

끝말

이번 반성점은 기술적으로 새로운 도전을 한 게 없다는 것이다.
이런 자세는 점점 구식으로 변하지만 가벼운 방향으로 흘러간다.
응용 프로그램을 만들 때 새로운 것에 도전하는 것이 좋을 수도 있다.
이렇게 말하면'이야기의 여행'도 떠오르지 않을지도 모른다.

이야기 트리