キャラ設定を考えるためのアプリ作りました

お久しぶりです。次郎です。

現状報告

仕事が忙しくて、ゲーム制作に着手できないので、
ゲーム制作の少しでも楽にするためのモノばかり作っています。

最近はもっぱらPythonとBashを勉強していて、
ちょっとした作業の自動化とかしつつ、ゲーム制作を放置しています。

たとえば、キャラの表情の差分を組み合わせて、
一気に差分画像を生成するツールとかもPythonで作成しました。

配布とかはしていませんが、Github上にはすでに存在します。
ただし、ドキュメントとかは一切用意していませんが・・・。

せっかくつくったツールなので、誰かに公開したいと思っているのですが、
いくつか問題がありまして、Pythonは実行環境がないと動かせないのと、
exe化するとファイルサイズが巨大化する点です。

なので、配布するなら自分用の簡単なのを作って、
Javaに移植するといった感じで今まで作っていたのですが、
最近Javaを書くのが結構しんどくて…。

代替案として、Go言語というのが良さそう？ と最近知ったので、Pythonと平行しつつ、Go言語も勉強しようかなぁと
思っている次第です。

目次

作成したアプリ

前置きはそこまでに、今回作成したアプリについて、一応紹介します。
下記のリンク先がそれです。

https://jiro4989.github.io/charaseat/

今回の実装ではそれなりにたくさんのデータを扱うということだったので、 Javascriptで動的にデータを追加するには、処理が重いかと考えたので、 アップ前にPythonでHTMLを生成してGithubにアップするようにしています。

htmlのテーブル部分生成スクリプト

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import re
from datetime import datetime
from os.path import splitext, basename

def main():
    datas = [
              "res/data/一人称.html"
            , "res/data/二人称.html"
            , "res/data/性格.html"
            , "res/data/髪型.html"

            , "res/data/トップス.html"
            , "res/data/ズボン.html"
            , "res/data/スカート.html"
            , "res/data/ドレス.html"
            , "res/data/制服.html"
            , "res/data/アンダーウェア.html"
            , "res/data/履物.html"
            , "res/data/かぶりもの.html"
            , "res/data/寝巻き着.html"
            , "res/data/水着.html"
            , "res/data/装身具.html"

            , "res/data/その他.html"
            ]

    checkboxtext = \
            '<label>' \
                '<input' \
                ' type="checkbox"' \
                ' name="{title}"' \
                ' value="{title}:{text}"' \
                ' onclick="updateRecords();"' \
                ' />' \
                '{fulltext}' \
            '</label>'

    tables = []
    for filepath in datas:
        with open("table.html") as table:
            tabletext = table.read()
            with open(filepath) as datafile:
                caption = splitext(basename(filepath))[0]

                line = datafile.readline()
                trs = []
                while line:
                    line = line.rstrip("\n")
                    if line == "":
                        continue

                    if line.startswith("<"):
                        text = re.sub(r"</?[^>]+>", "", line)
                    else:
                        text = line

                    text = checkboxtext.format(title=caption, text=text, fulltext=line)
                    text = "<tr><td>{}</td></tr>".format(text)
                    trs.append(text)
                    line = datafile.readline()
                tbody = "\n".join(trs)
                newtable = tabletext.format(caption=caption, tbody=tbody)
                tables.append(newtable)

    htmllines = []
    with open("template.html") as template:
        text = "\n".join(tables)
        line = template.readline()
        while line:
            if "{target}" in line:
                htmllines.append(text)
            elif "{time}" in line:
                now = datetime.now().strftime("%Y/%m/%d")
                htmllines.append(now)
            else:
                htmllines.append(line)
            line = template.readline()

    with open("index.html", "w") as indexhtml:
        indexhtml.write("".join(htmllines))

if __name__ == '__main__':
    main()

テーブル埋め込みのテンプレートhtml

<div class="charaTableArea">
  <input type="button" value="ランダム設定" onclick="setRandomContent('{caption}');" />
  <table border="1">
    <caption>{caption}</caption>
    <thead>
      <tr style="background-color: yellow;">
        <td>項目</td>
      </tr>
    </thead>
    <tbody>
      {tbody}
    </tbody>
  </table>
</div>

やりかたは単純。

dataフォルダ配下に、１行に１データを記述しただけのテキストファイルを配置し、 それをPythonで読み込んで、ファイル名をcheckboxのnameに、データをvalueとする 文字列を生成して、それをtable.htmlの{tbody}にformatで埋め込んでいるだけです。

これで、スクリプトを実行すると index.htmlが更新されるという仕組みです。

pushする前にスクリプトを実行するスクリプトを用意しておけば、 データを更新して、pushするだけで完成、というわけです。

お手軽です。

所感

極限までデザインは手抜き、いろいろ手抜きです。　　 自分用に作ったアプリですが、正直使うか怪しいです。

今回のアプリ制作を通して得た知見としては、
GithubPagesでWebアプリを作る方法がわかった、ということくらいです。

以上です。