むずでょ

2019-07-15に更新

Python3 で HTML5/CSS3 を出力したいぜ☆（＾～＾）

のんびり

読了目安：13分

Git hub: html-generator

「　別に　HTML4.01 でもいいが……☆」

「　連休が終わる☆　現実を見ろだぜ☆」

「　Python3 で HTML5 を作るライブラリとかあるんじゃないの？」

「　HTMLタグ打ちぐらいできる☆
Python3 はテキスト出力だけ　やってくれればいいんで☆」

WEB ARCH LABO
ファイル読み書き

「　ググったら出てきたぜ☆」

practice.py

#
# Note.
#
# Root directory: Visual studio code workspace root.
#
file_name = "./text-io/view.html"

try:
    file = open(file_name, 'w', encoding='utf-8')
    file.write(
        """
<html>
<head>
    <title>サンプル</title>
</head>
<body>
</body>
</html>
"""
    )
except Exception as e:
    print(e)
finally:
    file.close()

view.html

<html>
<head>
    <title>サンプル</title>
</head>
<body>
</body>
</html>

「　python3 は今どきのスクリプトだよな☆　ヒアドキュメントが使えて　使いやすい……☆」

「　お父んの歴史の半分は圧縮しろ☆　不要だぜ☆」

W3.CSS Tutorial

「　日本人の　ページ飛び飛び　くそアフィリエイト・ブログ　読むより　こういう　まとまったWebサイトはありがたいぜ☆
CSS　を　ちょっと調べるなら　W3.CSS　で十分☆」

「　外国も　けっこう　細切れブログなのよ」

「　Python3 の文字列連結　分からんな……☆　適当にやってしまうぜ☆？」

#
# Note.
#
# Root directory: Visual studio code workspace root.
#
file_name = "./html-generator/auto-generated/view.html"


def write():
    try:
        file = open(file_name, 'w', encoding='utf-8')
        file.write(
            """
<html>
<head>
    <title>サンプル</title>
</head>
<body>
{}
</body>
</html>
            """.format(get_boxes())
        )
    except Exception as e:
        print(e)
    finally:
        file.close()


def get_boxes():
    html = []
    for i in range(0, 100):
        html.append(
            """
    <div id="box{}">
    </div>
            """.format(i+1)
        )
    return "".join(html)


write()

<html>
<head>
    <title>サンプル</title>
</head>
<body>

    <div id="box1">
    </div>

    <div id="box2">
    </div>

    <div id="box3">
    </div>

    <div id="box4">
    </div>

    <div id="box5">
    </div>

    <div id="box6">
    </div>

    <div id="box7">
    </div>

    <div id="box8">
    </div>

    <div id="box9">
    </div>

    <div id="box10">
    </div>

    <div id="box11">
    </div>

    <div id="box12">
    </div>

    <div id="box13">
    </div>

    <div id="box14">
    </div>

    <div id="box15">
    </div>

    <div id="box16">
    </div>

    <div id="box17">
    </div>

    <div id="box18">
    </div>

    <div id="box19">
    </div>

    <div id="box20">
    </div>

    <div id="box21">
    </div>

    <div id="box22">
    </div>

    <div id="box23">
    </div>

    <div id="box24">
    </div>

    <div id="box25">
    </div>

    <div id="box26">
    </div>

    <div id="box27">
    </div>

    <div id="box28">
    </div>

    <div id="box29">
    </div>

    <div id="box30">
    </div>

    <div id="box31">
    </div>

    <div id="box32">
    </div>

    <div id="box33">
    </div>

    <div id="box34">
    </div>

    <div id="box35">
    </div>

    <div id="box36">
    </div>

    <div id="box37">
    </div>

    <div id="box38">
    </div>

    <div id="box39">
    </div>

    <div id="box40">
    </div>

    <div id="box41">
    </div>

    <div id="box42">
    </div>

    <div id="box43">
    </div>

    <div id="box44">
    </div>

    <div id="box45">
    </div>

    <div id="box46">
    </div>

    <div id="box47">
    </div>

    <div id="box48">
    </div>

    <div id="box49">
    </div>

    <div id="box50">
    </div>

    <div id="box51">
    </div>

    <div id="box52">
    </div>

    <div id="box53">
    </div>

    <div id="box54">
    </div>

    <div id="box55">
    </div>

    <div id="box56">
    </div>

    <div id="box57">
    </div>

    <div id="box58">
    </div>

    <div id="box59">
    </div>

    <div id="box60">
    </div>

    <div id="box61">
    </div>

    <div id="box62">
    </div>

    <div id="box63">
    </div>

    <div id="box64">
    </div>

    <div id="box65">
    </div>

    <div id="box66">
    </div>

    <div id="box67">
    </div>

    <div id="box68">
    </div>

    <div id="box69">
    </div>

    <div id="box70">
    </div>

    <div id="box71">
    </div>

    <div id="box72">
    </div>

    <div id="box73">
    </div>

    <div id="box74">
    </div>

    <div id="box75">
    </div>

    <div id="box76">
    </div>

    <div id="box77">
    </div>

    <div id="box78">
    </div>

    <div id="box79">
    </div>

    <div id="box80">
    </div>

    <div id="box81">
    </div>

    <div id="box82">
    </div>

    <div id="box83">
    </div>

    <div id="box84">
    </div>

    <div id="box85">
    </div>

    <div id="box86">
    </div>

    <div id="box87">
    </div>

    <div id="box88">
    </div>

    <div id="box89">
    </div>

    <div id="box90">
    </div>

    <div id="box91">
    </div>

    <div id="box92">
    </div>

    <div id="box93">
    </div>

    <div id="box94">
    </div>

    <div id="box95">
    </div>

    <div id="box96">
    </div>

    <div id="box97">
    </div>

    <div id="box98">
    </div>

    <div id="box99">
    </div>

    <div id="box100">
    </div>

</body>
</html>

「　駅前のラーメンを食べてきたのはいいが、食べ物を何も買って帰ってこなかったのは　いかがなものか……☆？」

「　だから　菓子のまちおか　に寄って帰れと言ったんだぜ☆！
ケチるから太る☆」

        file.write(
            """
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="participants.css">
    <title>サンプル</title>
</head>
<body>
{}
</body>
</html>
            """.format(get_boxes())
        )

「　HTML5 の Doctype 忘れてたので付けた☆　CSSへのリンクも貼った☆」

「　インスタント・コーヒーを飲みましょう☆　ネッスルのブライトを買ってきたのよ」

「　夢美は知らないかもしれないが、ビンは捨てた☆　容れものがない☆」

「　輪ゴムで止めてりゃ　十分よ」

#
# Note.
#
# Root directory: Visual studio code workspace root.
#
file_name = "./html-generator/auto-generated/participants.css"


def write():
    try:
        file = open(file_name, 'w', encoding='utf-8')
        file.write(
            """
{}
            """.format(get_boxes())
        )
    except Exception as e:
        print(e)
    finally:
        file.close()


def get_boxes():
    html = []
    for i in range(0, 100):
        html.append(
            """
#box{} {{
    position: relative;
    width   : 16px;
    height  : 16px;
    background-color: red;
}}
            """.format(i+1)
        )
    return "".join(html)


write()



#box1 {
    position: relative;
    width   : 16px;
    height  : 16px;
    background-color: red;
}

#box2 {
    position: relative;
    width   : 16px;
    height  : 16px;
    background-color: red;
}

#box3 {
    position: relative;
    width   : 16px;
    height  : 16px;
    background-color: red;
}

/* 以下略 */

「　CSSのジェネレーターはこんなもんかだぜ☆
牛乳屋さんのココアを　少し混ぜると　美味いぜ☆」

（さららら……）

「　お父ん、それ、牛乳屋さんのミルクティー☆」

「　赤いタテボウだけ見えても　さっぱり分からん☆」

「　HTML/CSSを生成するプログラムと、
最善の配置を算出するプログラムとの間で　やりとり　ができるような、
中間ファイル　の仕様を定義した方がいいんじゃないの？」

「　言語を跨るなら JSON にしておくのが鉄板だが……☆
Python がメインなら CSV にしておくのも手だな☆」

import pandas as pd
from attribute.query_id_sorted_table import query_id_sorted_table

#
# Note.
#
# Root directory: Visual studio code workspace root.
#
file_name = "./html-generator/auto-generated/view.html"
df = pd.read_csv("./html-generator/data/participant.csv",
                 sep=',', engine='python')
# Data frame. (Not record set)
df = query_id_sorted_table("./html-generator/data/participant.csv")
"""
print(df.values.tolist())
[[30, 'Blue'], [6, 'Blue'], [56, 'Blue'], [50, 'Blue'], [40, 'Blue'], [33, 'Blue'], [27, 'Blue'], [22, 'Blue'], [17, 'Blue'], [15, 'Blue'], [8, 'Blue'], [4, 'Blue'], [3, 'Blue'], [60, 'Blue'], [5, 'Green'], [10, 'Green'], [14, 'Green'], [9, 'Green'], [29, 'Green'], [36, 'Green'], [42, 'Green'], [44, 'Green'], [53, 'Green'], [57, 'Green'], [16, 'Yellow'], [20, 'Yellow'], [26, 'Yellow'], [31, 'Yellow'], [43, 'Yellow'], [51, 'Yellow'], [58, 'Yellow'], [18, 'Yellow'], [1, 'Red'], [7, 'Red'], [2, 'Red'], [52, 'Red'], [41, 'Red'], [37, 'Red'], [21, 'Red'], [12, 'Red'], [59, 'White'], [48, 'White'], [39, 'White'], [25, 'White'], [54, 'Orange'], [46, 'Black'], [24, 'Black'], [23, 'Black'], [32, 'Orange'], [38, 'Orange'], [35, 'Gray'], [49, 'Gray'], [13, 'Violet'], [34, 'Pink'], [28, 'Pink'], [55, 'Violet'], [19, 'SkyBlue'], [11, 'Purple'], [45, 'YellowGreen'], [47, 'Brown']]
"""

「　自作の pandas ライブラリを公開していってるからな☆」

def get_boxes(df):
    html = []
    for _index, row in df.iterrows():
        html.append(
            """
    <div id="box{}">
    </div>
            """.format(row["ID"])
        )
    return "".join(html)

「　CSVデータをもとに　CSSを生成しようぜ☆」

「　多いデータの順に並んでいるようだが、さっぱり分からん☆」

「　参加者IDと、机ID　は別だよな☆」

「　机の位置を　ぱっと作れないの？」

「　古来の方法はあるが……☆」

Campaign map 1.

+--+--+--+--+--+     +--+--+--+--+     +--+--+--+--+--+--+--+
|  |  |  |  |  |C    |  |  |  |  |B    |  |  |  |  |  |  |  |
+--+--+--+--+--+     +--+--+--+--+     +--+--+--+--+--+--+--+
|  |                                                     |  |
+--+  +--+--+--+     +--+--+--+--+     +--+--+--+--+--+  +--+
|  |  |  |  |  |F    |  |  |  |  |E    |  |  |  |  |  |D |  |
+--+  +--+--+--+     +--+--+--+--+     +--+--+--+--+--+  +--+
|  |  |  |  |  |     |  |  |  |  |     |  |  |  |  |  |  |  |
+--+  +--+--+--+     +--+--+--+--+     +--+--+--+--+--+  +--+
|  |                                                     |  |
+--+--+--+--+--+                       +--+--+--+--+--+--+--+
|  |  |  |  |  |                      A|  |  |  |  |  |  |  |
+--+--+--+--+--+                       +--+--+--+--+--+--+--+

「　ワープロ（Word processor）の時代は罫線が☆」

CCCCC..BBBB..AAAAAAA
C..................A
C.FFF..EEEE..DDDDD.A
C.FFF..EEEE..DDDDD.A
C..................A
CCCCC........AAAAAAA

「　さらに古くローグ（Rogue）の時代は点が☆」

「　わらう☆」

「　点で十分よ！」

「　じゃあ練習しようぜ☆？」

Ascii-based floor map をCSVに変換したいぜ☆（＾～＾）

「　練習してきたぜ☆　でけた☆」

X,Y,CHAR
0,0,C
1,0,C
2,0,C
3,0,C
4,0,C
5,0,.
6,0,.
7,0,B
8,0,B
9,0,B
10,0,B
11,0,.

「　このデータを CSS に反映しましょう！」

＜書きかけ＞

ツイッターでシェア

みんなに共有、忘れないようにメモ

むずでょ

光速のアカウント凍結されちゃったんで……。ゲームプログラムを独習中なんだぜ☆電王戦IIに出た棋士もコンピューターもみんな好きだぜ☆▲(パソコン将棋)WCSC29一次予選36位、SDT5予選42位▲(パソコン囲碁)AI竜星戦予選16位

https://t.co/nftyB85qAZ

Crieitは誰でも投稿できるサービスです。是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない！」という方は是非記事投稿リクエストボードへ！

有料記事を販売できるようになりました！

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは？

Python3 で HTML5/CSS3 を出力したいぜ☆（＾～＾）

関連記事

コメント