イジツ文字変換ツールをpythonで作ったのでせっかくだからHerokuで公開したよ

みなさん、おはやブサ〜(気さくな挨拶)

2019年1月に「荒野のコトブキ飛行隊」が放送されてから早一年。
なんだかんだアプリがリリースされたりウェブラジオがあったりで息の長いアニメです。
(2月1日にはリアルイベントが開催されました。めっちゃよかった)

そんな荒野のコトブキ飛行隊ですが、その世界に登場する「イジツ文字」なるものに興味を持ったので、
pythonで文字列を操作してイジツ文字を作っていきたいと思います！

たくさんの人に使ってもらってコトブキの良さを知ってもらいたいので
せっかくなのでHerokuを使ってウェブツールとして公開するところまでやっていきたいと思います！

概要

Pythonで文字列操作をするよ
str.replace()よりもstr.translate()を使うよ
標準文字列→イジツ文字を目指すよ
Herokuを初めて使うよ
紫電はいいぞ

イジツ文字とは？？？

荒野のコトブキ飛行隊はイジツと呼ばれる世界のお話です。
そのイジツでは現実の英単語の特定のアルファベットが別の文字に置き換わって表現されています。

例えば、
KΓUYA ホΓ KΓTΓBUKL HLKΓUTAL
(KOUYA NO KOTOBUKI HIKOUTAI)
や
paホエake
(pancake)
など。

こちらに劇中で登場したイジツ文字をまとめてくださった方がいらっしゃったので、全力で参考にさせて頂きます。

イジツ文字と標準文字を比べてみると以下のような対応表になります

標準文字	→	イジツ文字
O(オー)	→	Γ
o(オー)	→	Γ
I(アイ)	→	L
i	→	l(エル)
L	→	I(アイ)
l(エル)	→	i
C	→	エ
c	→	エ
N	→	ホ
n	→	ホ

(小文字のLと大文字のiがややこしいです)

このほかに、対応する文字が存在せずイジツ文字にのみ「λ」「Λ」(ラムダ)が存在したり、
発音に干渉しないCが含まれたりしています。

どういった条件下でλやCが挿入されるか現時点で不明です。

なので、今回はλやCは置いておいて、上記対応表に沿って文字列を操作したいと思います。

文字を置換する

まず、イジツ文字に置換しようと、str.replaceメソッドを使ってみました。
結果としてはこの方法ではマズいことがわかったのですが、以下に実行内容を記載します。

replaceメソッドで置換してみる

replaceメソッドは、文字列内の指定した文字を一括で置換してくれます。

replace.py

standard_str = 'KOUYA NO KOTOBUKI HIKOUTAI'
izitu_str = standard_str.replace('O', 'Γ') 
print(izitu_str) #KΓUYA NΓ KΓTΓBUKI HIKΓUTAI

replace.py

standard_str = 'KOUYA NO KOTOBUKI HIKOUTAI'

def convert_izitu(target_str): #全てのイジツ文字分用意する(汗)
    izitu_str = target_str
    izitu_str = izitu_str.replace('O', 'Γ')
    izitu_str = izitu_str.replace('o', 'Γ')
    izitu_str = izitu_str.replace('I', 'L')
    izitu_str = izitu_str.replace('i', 'l')
    izitu_str = izitu_str.replace('L', 'I')
    izitu_str = izitu_str.replace('l', 'i')
    izitu_str = izitu_str.replace('C', 'エ')
    izitu_str = izitu_str.replace('c', 'エ')
    izitu_str = izitu_str.replace('N', 'ホ')
    izitu_str = izitu_str.replace('n', 'ホ')
    return izitu_str

print(convert_izitu(standard_str)) #KΓUYA ホΓ KΓTΓBUKI HIKΓUTAI

みごと、イジツ文字が完成しました！
・・・と言いたいところなのですが、このコードにはだいぶ抜けがあって、
例えば変換したい文字列が「NISSHIN OILLIO」だったらどうでしょうか？(この記事と日清オイリオさんはなんの関係もありません)

replace.py

standard_str = 'NISSHIN OILLIO'

def convert_izitu(target_str): 
    izitu_str = target_str
    izitu_str = izitu_str.replace('O', 'Γ')
    izitu_str = izitu_str.replace('o', 'Γ')
    izitu_str = izitu_str.replace('I', 'L')
    izitu_str = izitu_str.replace('i', 'l')
    izitu_str = izitu_str.replace('L', 'I')
    izitu_str = izitu_str.replace('l', 'i')
    izitu_str = izitu_str.replace('C', 'エ')
    izitu_str = izitu_str.replace('c', 'エ')
    izitu_str = izitu_str.replace('N', 'ホ')
    izitu_str = izitu_str.replace('n', 'ホ')
    return izitu_str

print(convert_izitu(standard_str)) #ホISSHIホ ΓIIIIΓ

はい。「ホLSSHLホ ΓLIILΓ」となってほしいところが「ホISSHIホ ΓIIIIΓ」になってしまいました。
一文字ずつ変換する処理を行うと、LとIが混在した場合、どちらか一方に統一されてしまいます。

今回のように
特定の文字を一度だけ別の文字に変換したい場合 かつ L⇔Iのような相互変換を行いたい場合は、
str.replaceメソッドではなくstr.translateメソッドを使うといい感じになります。

str.translateメソッドで置換してみる

str.translateメソッドは、複数の文字を一気に変換してくれます。
どうやらPython2とPython3では何やら違いがあるようです。ここではPython3で実行していきます。

変換したい文字と置換後の文字は

標準文字	→	イジツ文字
O(オー)	→	Γ
o(オー)	→	Γ
I(アイ)	→	L
i	→	l(エル)
L	→	I(アイ)
l(エル)	→	i
C	→	エ
c	→	エ
N	→	ホ
n	→	ホ

に則って変換していきます。

replace.py

table = str.maketrans({
    'i': 'l',
    'I': 'L',
    'l': 'i',
    'L': 'I',
    'c': 'エ',
    'C': 'エ',
    'n': 'ホ',
    'N': 'ホ',
    'o': 'Γ',
    'O': 'Γ',
})

input_str = 'NISSHIN OILLIO'

translate_str = input_str.translate(table)

print(translate_str) # ホLSSHLホ ΓLIILΓ 

簡単！replaceメソッドよりもシンプルに書けた気がします😀
LとIもそれぞれ一回ずつ変換されていますね！

次はこれを使ってHerokuにデプロイしていきたいと思います。

Herokuにプロジェクトをデプロイしてみる

次にPythonで作成したものをどうやってWeb上で動かすのか・動かせるのかを調べました。
すると、Herokuというサービスなら趣味レベルのミニマムなツールであれば無料枠で使えることがわかり、なおかつ先人がPythonでHerokuにサービスを立ち上げていることから、安心して取り組めそうと考えてHerokuに決めました。
Webアプリ初心者のFlaskチュートリアルというQiitaの記事がありましたので、これを参考にHerokuにデプロイするためのプロジェクトを作成していきます。

各種インストール

Python
Flask
gunicorn
をインストールします。

pip3 install Flask

pip install gunicorn

FlaskはPythonのWebフレームワークでDjangoなどと比べると機能は劣るが軽量で、今回のようなシンプルなものを作成する際にはもってこいらしいです。

gunicornはWebサーバーとFlaskアプリの間を取り持ってくれるWSGIというものらしいです（詳しいことはわからぬ）

お手本になぞってプロジェクトのディレクトリを構成します。

(any directory)
 ├app/
 │　├templates/
 │　├static/
 │　└app.py
 └run.py

これが基本的な構成になるようです。これにファイルを追加して以下のようになりました。

(any directory)
 ├app/
 │　├templates/
 │　│　└index.html
 │　├static/
 │　│　├Nasu-Bold.ttf
 │　│　└favicon.ico
 │　└app.py
 ├Procfile
 ├readme.md
 ├requirements.txt
 └run.py

最終的なファイルの中身は以下のようになりました。

run.py

from app.app import app

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

app.py

# flaskとrender_template(HRMLを表示させるための関数)をインポート
from flask import Flask, render_template, request

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

# ルーティング。/indexへアクセスされたらindexメソッドを実行する
@app.route("/index")
def index():
    # render_templateの引数に入れることでhtml側に送ることができる
    return render_template("index.html")

@app.route("/result", methods=["post"])
def post():
    input_str = request.form['target_str']

    table = str.maketrans({
        'i': 'l',
        'I': 'L',
        'l': 'i',
        'L': 'I',
        'c': 'エ',
        'C': 'エ',
        'n': 'ホ',
        'N': 'ホ',
        'o': 'Γ',
        'O': 'Γ',
    })

    translate_str = input_str.translate(table)

    return render_template("index.html", ijitsu=translate_str)

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

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>LJLTSU エΓホverslΓホ</title>
    <link rel="icon" href="/static/favicon.ico">
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/css/uikit.min.css" />

    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>
</head>

<body>
    <div class="uk-section">
        <div class="uk-child-width-expand uk-text-center uk-grid uk-grid-stack">
            <div class="uk-flex uk-flex-center uk-first-column">
                <div><a href="/index">イジツ文字変換ツール</a></div>
            </div>
        </div>
        <div class="uk-child-width-expand uk-text-center uk-grid uk-grid-stack">
            <form action="/result" method="POST">
                <div class="uk-margin" uk-margin>
                    <input class="uk-input uk-form-width-large" type="text" name="target_str">
                    <button class="uk-button uk-button-primary" type="submit">エΓホvert!!</button>
                </div>
            </form>
        </div>
        <div class="uk-child-width-expand uk-text-center uk-grid uk-grid-stack">
            <div class="uk-flex uk-flex-center" id="result">
                {{ijitsu}}
            </div>
        </div>
    </div>
    <style>
        @font-face {
            font-family: 'Nasu-Bold';
            src: url('Nasu-Bold.ttf') format('truetype');
        }

        div {
            font-family: 'Nasu-Bold', sans-serif;
        }

        #result {
            font-family: 'Nasu-Bold', sans-serif;
            font-size: 50px;
        }
    </style>
</body>

</html>

Procfile.

web: gunicorn run:app --log-file=-

requirements.txt

gunicorn==20.0.4
Flask==1.1.1
requests==2.22.0

• Procfile
• requirements.txt

はHeroku側が実行する際に必要なファイルだそうです(よくわかってない)

デプロイする

HerokuにデプロイするにはまずプロジェクトをGitの管理下におく必要があります。

git init
git add .
git commit -m 'initial commit'

ターミナル上でHerokuにログインします。

heroku login

そして、herokuにアプリケーションを作成します。

heroku create convert-kotobuki

公開してみる

heroku open

でwebページを開くことができれば完了です。

成果物

こちらになります

だいぶ殺風景ですがご容赦ください(汗)
一応cssフレームワークとしてUIkitを使っていますがフレームワークの良さを台無しにしていますね😓

最後に

いかがでしたでしょうか

今までweb上に自身の制作物を用意するのはなんとなく敷居が高くて避けていたのですが、いざ取り組んでみると割と簡単にできることがわかりました(Herokuだから？)😊

今後はAWS(魔界)にもチャレンジしてデータベースと連携なんかもしてみたいですね！！

それではみなさん、ばいばいブサ〜