Flaskで簡易的なドット絵ジェネレータを作る

3856 ワード
Heroku Flask Python Bootstrap ドット絵 Python テキストリンク

完成形

以下のような感じ。

https://flaskandheroku.herokuapp.com/

仕様

  • トップ画面にはランダム生成されたドット絵が表示されている
  • 「ランダム生成」ボタンを押下するとランダムでドット絵が表示される
  • ドット絵は画像ではなく文字の「■(四角)」で構成されている
  • 文字を画像へ変換する技術は実装していない
  • Twitterシェアボタンを配置

作ろうと思った経緯

  • Flaskを勉強中なので、簡単な成果物を作ってみたくなった
  • 以下のようなドット絵を描くのが趣味なので、自動で生成できるようなツールを作ってみたくなった https://akihanari.github.io/gif-amabie/

使用言語やフレームワークなど

  • HTML5
  • CSS3
  • Bootstrap
  • Python
  • Flask
  • Heroku

ファイル構成

  • templates
    • layout.html
    • index.hrml
  • app.py
  • Procfile
  • requirements.txt

仕組み（コード）

シンプルです。

# app.py

@app.route('/')
def dot_gene():
    numbers = [[random.randrange(4) for i in range(8)] for j in range(8)]
    return render_template("index.html", numbers = numbers)

まずは@app.route('/')に、二重ループの関数を作成します。
今回は8×8のドットを作るのですが、各ドットの色が白か黒かを決めるため、
0〜3のランダムな数値を生成します。
例えばこんな感じになっています

11230032
31231000
30023111
12213303
01202010
32111320
01322031
00011203

次に、index.htmlの中で処理を行います。

# index.html
{% extends "layout.html" %}
      {% block content %}
        <h1>Pixel art generator</h1>
        <div class="spaces">
          {% for number in numbers %}
            {% for num in number %}
                {% if num == 0 %}
                  <font color="#000000">■</font>
                {% elif num == 1%}
                  <font color="#ededed">■</font>
                {% elif num == 2%}
                  <font color="#ededed">■</font>
                {% else %}
                  <font color="#ededed">■</font>
                {% endif %}
              {% endfor %}
              <br>
          {% endfor %}
       </div>
        .
        .
        .
{% endblock %}

コードが非常に汚くて大変申し訳ないのですが
作成した二重ループの数字と「■」、白か黒かを関連付けます。
今回は数字が0の時のみ黒に、それ以外の数字の場合は白（っぽい）色に変換します。

そうするとこのようなドット絵が表示される訳です。

改善点

  • スマートフォン表示だとドット絵が若干崩れてしまう
  • 生成されたドット絵を画像に変換して保存できるようにしたい
  • もっとドット絵らしいドット絵を生成されるようにしたい

参考

paiza Flask入門編1:PythonでWebアプリケーションを作ろう