完成形
以下のような感じ。
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の時のみ黒に、それ以外の数字の場合は白（っぽい）色に変換します。
そうするとこのようなドット絵が表示される訳です。
改善点
- スマートフォン表示だとドット絵が若干崩れてしまう
- 生成されたドット絵を画像に変換して保存できるようにしたい
- もっとドット絵らしいドット絵を生成されるようにしたい
