En premier

Un article qui a eu du mal à comprendre Flask. Je serais très heureux si vous pouviez commenter si vous aviez des conseils tels que le fait que ce n'est pas bien ici et que vous devriez l'interpréter comme ceci. Voici le produit fini. https://neutrino-converter.herokuapp.com/ OK, commençons.

Aperçu

--Créez une application Web basée sur ** qui convertit ** des chaînes de caractères sous la forme de A en B ――Lorsque vous travaillez avec NEUTRINO, il est difficile de mettre des espaces dans les caractères, utilisez-le donc pour éliminer les problèmes.

127.0.0.1_5000_.png

Partie 1 "Préparer le flacon"

Le langage que j'utilise est Python car je ne peux que l'utiliser. J'utilise un module appelé Flask, mais c'est en fait ma première expérience. Expliquons étape par étape à partir de 1.

Installer le flacon avec pip

J'ai utilisé pipenv pour ce développement, mais cet article sera expliqué avec pip. Exécutez la commande suivante pour installer Flask.

pip install Flask

Préparez le répertoire

--Créez des dossiers ʻapp, models dans le répertoire project. --__init __. pydans le dossiermodels --Créez des dossierstemplates, static dans le dossier ʻapp. --Créez ʻapp.py dans le dossier ʻapp. --Créez run.py dans le répertoire project.

Je pense que c'est ce que vous remarquez.

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

Préparer du HTML

Préparez ʻindex.html dans le dossier ʻapp / templates. Le contenu est comme ça. C'est la devise de la page de sortie **. ** **

`index.html`


<!DOCTYPE html>
<html>
    <head>
        <title>Conversion de caractères Musescore pour verser</title>
    </head>
    <body>
        <h1>Voici l'index.C'est du HTML!</h1>
    </body>
</html>

Préparez un fichier Python

Je vais assembler le contenu du ~ .py que j'ai créé plus tôt.

run.py

Exécuté au démarrage du serveur. Appelez simplement l'application et exécutez-la.

`run.py`


from app.app import app

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

app.py

Il s'agit de la partie de base de l'application Web. Affichons "Hello World" pour le moment.

`app.py`


from flask import Flask, render_template, request

#Créer un objet Flask
app = Flask(__name__)

@app.route('/')
def index():
    #Affichez simplement la chaîne
    return 'hello world.'


# 〜/En cas d'accès à l'index, index.Dessiner html
@app.route('/index')
def post():
    return render_template('index.html')

J'expliquerai le contenu plus tard. Vous êtes maintenant prêt à partir.

Partie 2 "Faisons-le pour le moment"

La configuration minimale est terminée. Commençons une fois le serveur avec cette configuration. La façon de le démarrer est d'exécuter ** run.py dans un environnement où ** flask peut être exécuté.

python run.py

Lorsque vous l'exécutez, différents caractères apparaîtront dans le terminal, mais c'est le point à surveiller.

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

Lorsque vous ouvrez l'URL affichée, vous devriez voir un écran comme celui-ci.

スクリーンショット 2020-11-03 2.04.56.png

Comparons cet écran avec le code Python.

`app.py`


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

La signification de ce code est la suivante. --Lorsque vous accédez à /, c'est-à-dire http: //127.0.0.1: 5000 /, la fonction est appelée.

La fonction renvoie simplement la chaîne «Hello World».
La valeur de retour de cette fonction, «Hello World», est reflétée sur la page.

L'avez-vous compris d'une manière ou d'une autre?

Vous avez certainement également entré un tel code.

`app.py`


# 〜/En cas d'accès à l'index, index.Dessiner html
@app.route('/index')
def post():
    return render_template('index.html')

La signification de ce code est la suivante. --Lorsque vous accédez à / index, c'est-à-dire http: //127.0.0.1: 5000 / index, la fonction est appelée.

La fonction renvoie render_template ('index.html'). -- rendre… Dessiner --template… Modèle
En d'autres termes, render_template ('index.html') signifie ** pour décrire ʻindex.htmlcomme un modèle **. -C'est-à-dire que lorsque vous accédez àhttp: //127.0.0.1: 5000 / index, ʻindex.html s'affiche.

C'est comme ça. Je pense que j'ai compris comment cela fonctionne. D'une certaine manière, ça va, parce que je ne connais pas la signification détaillée ...

Partie 3 "Créons une page"

la revue

Cette page est ce que je veux faire cette fois.

127.0.0.1_5000_.png

Construisons les éléments nécessaires pour cette page.

Construire index.html

Le html que je touchais plus tôt était un html normal, mais à partir de là, j'écrirai un html légèrement différent.

`index.html`


<!DOCTYPE html>
<html>
<head>
    <title>Conversion de caractères Musescore pour verser</title>
</head>
<body>
    <!-- form -->
    <form action="/" method="POST">
        <textarea name="before" rows="4" cols="40">Mettez le texte ici</textarea>
        <input type="submit" value="conversion">
        {% if body %}
        <textarea name="after" rows="4">{{body}}</textarea>
        {% else %}
        <textarea name="after" rows="4">Si vous appuyez sur le bouton, il sera affiché ici</textarea>
        {% endif %}
    </form>
    <!-- form -->
</body>
</html>

Certains personnages ne sont pas familiers, alors expliquons-les étape par étape.

--html entre {% if A%} et {% endif%} ne sera pas affiché à moins que la condition A ne soit remplie.

Je ne sais pas comment écrire ceci, mais si vous connaissez les applications Web, veuillez expliquer ... --Lorsque l'élément body est reçu du côté Flask, il est inséré dans {{body}}.

On a l'impression que vous y êtes habitué si vous avez été mordu par la programmation. Maintenant, prêtons attention aux points suivants.

Lorsque l'élément body est reçu du côté Flask, il est inséré dans {{body}}.

À quoi cela ressemble-t-il? Voici ʻapp.py qui transmet en fait le corps de l'élément du côté Flask.

`app.py`


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

C'est une histoire simple, préparez simplement body comme argument de la valeur de retour. Au contraire, lorsque vous passez un élément du «côté html» au «côté Flask», cela devient comme ça.

`index.html`


<form action="/" method="POST">
    <textarea name="before" rows="4" cols="40">Mettez le texte ici</textarea>
    <input type="submit" value="conversion">
</form>

`app.py`


body = request.form['before']

--Créez un formulaire POST et spécifiez la page où l'action se produira lorsque vous exécuterez ce formulaire avec ʻaction. --Définissez textarea sur nom =" avant ". --Définissez type =" submit " sur ʻinput. --Si vous appuyez sur le bouton dans cet état, la page sera affichée sous la forme ** Obtention de l'élément spécifié sur le côté Flask à partir de html **.

En d'autres termes

C'est スクリーンショット 2020-11-03 2.35.53.png

Ce sera comme ça スクリーンショット 2020-11-03 2.36.48.png

... Oh, la procédure est ignorée. Suivons les étapes rapides.

Partie 4 "Création d'un mécanisme de conversion de chaînes de caractères"

C'est vrai, la façon dont j'ai converti la chaîne est ignorée.

Mettez vos propres modules dans le dossier des modèles

Si vous souhaitez utiliser vos propres modules avec Flask, rassemblez-les dans le dossier models. Le contenu du dossier doit ressembler à ceci.

models/
 ├__init__.py
 └convert.py

En mettant «__init __. Py», vous pouvez importer des modèles.

Référence: Résumé de l'importation de fichiers en Python 3 \ -Qiita

Jouons maintenant avec convert.py.

Convertir une chaîne avec une expression régulière

Cette fois, je vais attaquer avec des expressions régulières. Je voulais les rassembler dans une fonction, mais honnêtement, cela ne semblait pas économiser le nombre de lignes, alors je les ai assemblées.

Quand j'explique la procédure, cela ressemble à ceci.

Recherchez une chaîne avec (.), Et placez un espace derrière elle avec \ 1 sans apporter de modifications à la chaîne.
\s(Ya|Shu|Yo|〜)doncChagrinRecherchez la chaîne qui est et supprimez l'espace supplémentaire.

Je pense qu'il existe une manière plus intelligente de le faire, mais faites-le moi savoir.

Recherchez deux ou plusieurs espaces consécutifs avec \ s {2,} et supprimez les espaces supplémentaires.

`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(Ya|Shu|Yo|Ah|je|U|Eh|Mm|Turbocompresseur|Yu|Yo|UNE|je|U|E|Oh)'
    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

Appelez convert.py avec app.py

Appelons maintenant convert.py depuis ʻapp.py` et utilisons-le.

`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)

Importer la conversion avec à partir de la conversion d'import de modèles
Obtenez l'élément avant en appuyant sur le bouton du formulaire --Exécute la fonction convert pour avant.
Décrire la chaîne de caractères convertie body

C'est comme ça.

En d'autres termes, c'est finalement

C'est スクリーンショット 2020-11-03 2.35.53.png

Sera comme ça スクリーンショット 2020-11-03 2.36.48.png

J'ai pu l'expliquer correctement.

Partie 5 "Une fois la fonction terminée, la prochaine apparition"

Il a l'air un peu moche, alors utilisez bootstrap pour ajuster l'apparence.

Il y a un dossier appelé «static» dans le dossier «app». CSS, JS, etc. sont placés ici. Cette fois, nous n'utiliserons que du CSS, donc nous ne préparerons pas de dossier JS.

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

Allons-y avec la configuration. Parce que vous jouez avec bootstrap ... ʻindex.html`, n'est-ce pas?

`index.html`


<!DOCTYPE html>
<html>

<head>
    <title>Conversion de caractères Musescore pour verser</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>C'est un gars qui ajoute automatiquement un espace aux paroles à verser lors de la préparation de Musescore pour NEUTRINO.</p>
        <p>Aiue Okyakyukyo → Aiue Okyakyukyo</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">Mettez le texte ici</textarea>
                <div class="col-md-1 my-md-auto">
                    <input type="submit" class="btn btn-primary btn-lg" value="conversion">
                </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">Si vous appuyez sur le bouton, il sera affiché ici</textarea>
                {% endif %}
            </div>
        </div>
    </form>o

    <!-- form -->
    <footer class="text-muted ">
        <div class="container">
            <p class="text-center">
Contactez nous ici:<a href="https://twitter.com/_Sotono">@_Sotono</a>
            </p>
        </div>
    </footer>


</body>

</html>

Maintenant, ça ressemble à ça.

127.0.0.1_5000_.png

C'était un long voyage ... Après cela, vous pouvez le gérer librement en le publiant, en le faisant bouillir ou en le cuisant.

Édition supplémentaire "Endroit bouché et solution"

--Q. J'exécute ʻapp.py dans le test, mais il dit Aucun module nommé app` "et cela ne fonctionne pas ...

A. Lançons run.py, cela résoudra tout.

――Q. Je crache une longue erreur que je ne comprends pas ... jinja2.exceptions.TemplateNotFound est écrit à la fin ... --A. ʻIndex.html et ʻapp.py peuvent ne pas bien se mailler, vérifions le code correctement. Appelez-vous un élément qui n'existe pas?

en conclusion

C'est devenu une longue phrase. J'ai fait ça cette fois parce que quand je composais comme passe-temps, je me suis dit "Amendokuse !!!". Je pense que NEUTRINO est une technologie incroyable, donc j'attends avec impatience les développements futurs. fin.

Créons une application Web de conversion A vers B avec Flask! De zéro ...

En premier

Aperçu

Partie 1 "Préparer le flacon"

Installer le flacon avec pip

Préparez le répertoire

Préparer du HTML

index.html

Préparez un fichier Python

run.py

app.py

Partie 2 "Faisons-le pour le moment"

app.py

app.py

Partie 3 "Créons une page"

la revue

Construire index.html

index.html

app.py

index.html

app.py

Partie 4 "Création d'un mécanisme de conversion de chaînes de caractères"

Mettez vos propres modules dans le dossier des modèles

Convertir une chaîne avec une expression régulière

convert.py

Appelez convert.py avec app.py

app.py

Partie 5 "Une fois la fonction terminée, la prochaine apparition"

index.html

Édition supplémentaire "Endroit bouché et solution"

en conclusion

`index.html`

`run.py`

`app.py`

`app.py`

`app.py`

`index.html`

`app.py`

`index.html`

`app.py`

`convert.py`

`app.py`

`index.html`