Flash로 A to B 변환형 웹 애플리케이션을 제작하세요!0부터...

40181 단어 Flask Python neutrino tech

먼저

Flashs를 이해하기 위해 분투한 기사다.
여기는 아니에요. 이렇게 해석했으면 좋겠다는 조언이 있으면 댓글을 받을 수 있으면 좋겠어요.
다 된 건 이쪽이야.

그럼 시작합시다.

개요

A to B 형식으로 문자열을 변환하는 시스템의 웹 응용 프로그램 제작

NEUTRINO를 사용하여 작업할 때 문자에 공간을 남기는 작업은 매우 번거롭기 때문에 이것을 이용하여 번거로움을 제거한다

섹션 1: Flashs 준비

나는 그 언어만 쓸 수 있기 때문에 파이톤이다.
Flash 모듈을 사용하는 것은 사실 처음 경험하는 일입니다.
1부터 차례대로 설명하자.

pip로 Flash 설치

이번 개발은 pipenv를 사용했지만, 본 보도용pip은 설명했다.
다음 명령을 실행하여 Flashs를 가져옵니다.

pip install Flask

카탈로그 준비

project의 디렉터리에 app, models 폴더를 만듭니다.

models 폴더 내__init__.py

app 폴더 내에 templates, static 폴더를 만듭니다.

app 폴더 내에 생성app.py됩니다.

project 디렉토리에 생성run.py됩니다.

눈치채면 이렇게 될 거야.

project
 ├app/
 │ ├templates/
 │ ├static/
 │ └app.py
 ├models/
 │ └__init__.py
 └run.py

준비>

app/templates 폴더에서 준비index.html.
대체로 내용은 이렇다.
이것은 출력할 페이지의 모드입니다.
index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Musescore流し込み用文字変換</title>
    </head>
    <body>
        <h1>ここはindex.htmlだよ！</h1>
    </body>
</html>

파이썬 파일 준비

방금 만든 〜.py 의 내용을 조립하기 시작합니다.

run.py

서버를 시작할 때 실행합니다.
단순히 앱을 사용해서 긴장을 풀고 쓰는 방법.
run.py

from app.app import app

if __name__ == "__main__":
    app.run()

app.py

이것은 웹 응용 프로그램의 기본 부분입니다.
일단 Hello World.부터 보여주세요.
app.py

from flask import Flask, render_template, request

# Flaskオブジェクトの生成
app = Flask(__name__)

@app.route('/')
def index():
    # 単純に文字列を表示するだけ
    return 'hello world.'


# 〜/index にアクセスがあった場合、index.htmlを描写する
@app.route('/index')
def post():
    return render_template('index.html')

내용 해설은 잠시 후에 하겠습니다.
아무튼 준비됐습니다.

2부'어쨌든 일단 실행해 보자'.

최소 구성이 완성되었습니다.
그럼 이 설정으로 서버를 시작합시다.
시작 방법은 flack에서 실행할 수 있는 환경에서 실행됩니다. run.py

python run.py

실행 후 단말기에 다양한 문자가 나타날 수 있으니 주의해야 할 점은 이것이다.

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

표시된 URL을 열면 이런 화면이 나타날 것이다.
スクリーンショット 2020-11-03 2.04.56.png

이 화면과 파이썬 코드를 비교해 봅시다.
app.py

@app.route('/')
def index():
    return 'Hello World'

이 코드의 뜻은 다음과 같다.

/ 즉 http://127.0.0.1:5000/에 접근할 때 함수를 호출합니다.

함수는 문자열Hello World만 간단하게 되돌려줍니다.

페이지에 이 함수의 반환값Hello World을 반영한다.

이런 느낌인데 왠지 이해가 가나요?
확실히 이런 인코딩도 입력했지.
app.py

# 〜/index にアクセスがあった場合、index.htmlを描写する
@app.route('/index')
def post():
    return render_template('index.html')

이 코드의 뜻은 다음과 같다.

/index 즉 http://127.0.0.1:5000/index에 접근할 때 함수를 호출합니다.

함수 중의rendertemplate('index.]')가 반환됩니다.

render...묘사

template...템플릿

즉, render_template('index.html')는 모델로 묘사index.html한다는 뜻이다.

즉, 방문http://127.0.0.1:5000/index할 때index.html가 나타난다.

이런 느낌이야.
아무래도 구조를 이해한 것 같아.
아무래도 괜찮을 것 같아. 나도 자세한 뜻은 몰라..

3부 "페이지 같이 만들어요".

안녕히 계십시오.

이번에 하고 싶은 건 이런 페이지예요.
127.0.0.1_5000_.png

이 페이지에 필요한 요소를 조립하세요.

index.자모를 배열하다

아까까지 만진 건 보통이었다","여기부터 조금 다르게 적었다."
index.html

<!DOCTYPE html>
<html>
<head>
    <title>Musescore流し込み用文字変換</title>
</head>
<body>
    <!-- form -->
    <form action="/" method="POST">
        <textarea name="before" rows="4" cols="40">ここにテキストを入れてね</textarea>
        <input type="submit" value="変換">
        {% if body %}
        <textarea name="after" rows="4">{{body}}</textarea>
        {% else %}
        <textarea name="after" rows="4">ボタンを押すとこっちに出力されるよ</textarea>
        {% endif %}
    </form>
    <!-- form -->
</body>
</html>

익숙하지 않은 글이 나왔으니 순서대로 설명해라.

{% if A %}, {% endif %} 중간에 낀 ""은(는) 조건 A를 충족하지 않으면 표시되지 않습니다.

나는 이 쓰기 방법을 잘 모르겠지만, 웹 애플리케이션에 익숙한 사람이 있다면 저에게 설명을 해 주십시오.

Flash 측면에서 body 요소를 수신하면 요소가 삽입됩니다{{body}}.

이런 느낌으로 프로그래밍 경험이 있으면 익숙해진다고 느낄 수 있다.
그럼 다음 몇 가지를 주의하세요.
Flash 측면에서 심볼body을 수신하면 심볼이 삽입됩니다{{body}}.
어떤 느낌일까요?
실제로 Flash의 경우 전달body과 같은 요소app.py가 바로 여기에 있다.
app.py

@app.route('/', methods=['post'])
def post():
    body = 'hoge'
    return render_template('index.html', body=body)

간단하면 body 을 반환값의 매개 변수로 삼으면 됩니다.
반면html側에서 Flask側로 요소를 전달할 때는 이렇다.
index.html

<form action="/" method="POST">
    <textarea name="before" rows="4" cols="40">ここにテキストを入れてね</textarea>
    <input type="submit" value="変換">
</form>

app.py

body = request.form['before']

조합POSTするform, action에서 이 창을 실행하면 동작이 발생할 페이지를 지정합니다.

textarea에 설정name="before".

input에 설정type="submit".

이 상태에서 단추를 누르면 페이지는'}'에서 Flash 측에서 지정한 요소를 가져오는 형식으로 표시됩니다.

즉
이것이 바로

이렇게 됐어요.

아.. 아, 프로그램이 곧 끝날 것 같아.
우리 완전히 정확한 순서에 따라 갑시다.

네 번째 부분: 문자열 변환을 만드는 메커니즘

네, 문자열을 어떻게 빨리 변환합니까?

모델 폴더에 자체 제작 모듈 넣기

Flash에서 자체 제작된 모듈을 사용할 경우 폴더에 통합models합니다.
폴더 안의 내용이 이렇게 된다.

models/
 ├__init__.py
 └convert.py

배치__init__.py,models에서 import을 진행할 수 있습니다.
참조: Pythhon3 파일의 import 방법 요약 - Qita
그럼, 우리 만지작거립시다convert.py.

정규 표현식으로 문자열 변환

이번에는 정규 표현식으로 공격한다.
각자 함수로 정리하고 싶지만 솔직히 행수를 아낄 수도 없을 것 같아서 하나로 정리했다.
절차를 설명하자면 이런 느낌이에요.

(.)에서 문자열을 검색하고 \1 에서 문자열을 변경하지 않은 경우 공간을 후방에 설정합니다.

\s(ゃ|ゅ|ょ|〜)에서 拗音로 된 문자열을 검색하여 여분의 공간을 삭제합니다.

이것에 관해 더 똑똑한 방법이 있다고 생각해요. 알았으면 말해주세요.

\s{2,}에서 두 개 이상의 연속된 공간을 검색하여 남은 공간을 삭제합니다.

convert.py

import re

def convert(arg: str):
    pattern_before = r'(.)'
    pattern_after = r'\1 '
    s = arg
    s = re.sub(pattern_before, pattern_after, s)

    pattern_before = r'\s(ゃ|ゅ|ょ|ぁ|ぃ|ぅ|ぇ|ぉ|ャ|ュ|ョ|ァ|ィ|ゥ|ェ|ォ)'
    pattern_after = r'\1'
    s = re.sub(pattern_before, pattern_after, s)

    pattern_before = r'\s{2,}'
    pattern_after = r' '
    s = re.sub(pattern_before, pattern_after, s)

    return s

convert.py를 적용합니다.py로 호출

그럼 app.py에서 convert.py로 호출해서 사용하세요.
app.py

from models import convert

@app.route('/', methods=['post'])
def post():
    body = request.form['before']
    body = convert.convert(body)
    return render_template('index.html', body=body)

from models import convert에서 import convert를 선택합니다.

폼 단추를 눌렀을 때before 요소 가져오기

대before 집행 함수convert.

변환된 문자열 묘사body

이런 느낌이야.
결국
이것이 바로
スクリーンショット 2020-11-03 2.35.53.png

이렇게 됐어요.

이렇게 잘 설명했습니다.

5부 "기능이 완성되면 다음은 외관"

이렇게 하면 촌스러워 보이기 때문에 bootstrap으로 외관을 조정할 수 있다.app 폴더 안에 하나의 폴더static가 있다.
여기에는 CSS와 JS 등이 들어가야 한다.
이번에는 CSS만 사용하기 때문에 JS 폴더를 준비하지 않습니다.

app/
 └static/
   └css
     └bootstrap.min.css

등으로 구성됐다.
bootstrap 하니까... index.html죠.
index.html

<!DOCTYPE html>
<html>

<head>
    <title>Musescore流し込み用文字変換</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
    <div class="jumbotron text-center">
        <h1 class="display-4">Lyrics -> Musescore</h1>
        <p class="lead">for NEUTRINO</p>
        <hr class="my-4">
        <p>NEUTRINO用にMusescoreを用意する際に流し込む歌詞にスペースを自動で追加するやつです。</p>
        <p>あいうえおきゃきゅきょ→あ い う え お きゃ きゅ きょ </p>
    </div>

    <!-- form -->
    <form action="/" method="POST">
        <div class="container-fluid">
            <div class="row justify-content-around form-group">
                <textarea class="col-11 col-md-4 form-control" name="before" rows="4" cols="40">ここにテキストを入れてね</textarea>
                <div class="col-md-1 my-md-auto">
                    <input type="submit" class="btn btn-primary btn-lg" value="変換">
                </div>
                {% if body %}
                <textarea class="col-11 col-md-4 form-control" name="after" rows="4">{{body}}</textarea>
                {% else %}
                <textarea class="col-11 col-md-4 form-control" name="after" rows="4">ボタンを押すとこっちに出力されるよ</textarea>
                {% endif %}
            </div>
        </div>
    </form>o

    <!-- form -->
    <footer class="text-muted ">
        <div class="container">
            <p class="text-center">
                連絡はこちらへ:<a href="https://twitter.com/_Sotono">@_Sotono</a>
            </p>
        </div>
    </footer>


</body>

</html>

이렇게 되면 드디어 이렇게 보이네요.
127.0.0.1_5000_.png

긴 여정..
이후 공개하거나 끓이거나 끓일 수 있다.

번외편 "막다른 골목과 해결책"

Q. 테스트에서 분명히 app.py했는데 No module named app등이 움직이지 않는데...

A.run.py를 실행하세요. 전부 해결하세요.

Q. 잘 모르는 장편 오류를 토해낸 것 같은데...jinja2.exceptions.TemplateNotFound 또는 말단에 쓰여있는...

A.index.html와 app.py가 잘 맞지 않을 수 있으니 전선을 확인하세요.존재하지 않는 요소를 호출하지 않았습니까?

끝말

긴 문장으로 변했다.
이번에 이거 취미로 작곡할 때.그렇게 생각해서.
뉴트리노가 대단한 기술이라고 생각해 앞으로의 발전을 기대하고 있다.
끝.

Reference

이 문제에 관하여(Flash로 A to B 변환형 웹 애플리케이션을 제작하세요!0부터...), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/sotono/articles/77933ee53344db3715bf

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Raspberry Pi 시작하기 [ js 및 python용 ]

Desive 로그인 후 처음으로 리소스에 액세스하려는 경우 Receive CanCan::AccessDenied 오류

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다