完成形

以下のような感じ。

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のランダムな数値を生成します。
例えばこんな感じになっています

次に、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アプリケーションを作ろう