pythonで生徒を当てるアプリをつくる-GUI版

# はじめに

以前投稿した[pythonで生徒を当てるアプリをつくる](https://qiita.com/mochihisa/items/2bb433636c4c615b0961)をGUIソフトにしたってだけの記事.

# プログラム

```
main.py
data/
  history.txt
  list.txt
  list_raw.txt
web/
  main.html
  css/
    style.css
  js/
    eel.js
```

<details><summary>main.py</summary><div>

```python:main.py
import locale
import eel
import random
import pickle
import os
import sys
import datetime
from tkinter import filedialog, Tk
import platform
import copy


def main():
    eel.init("web")
    eel.start("main.html")


Student_names = []
Student_FILENAME = "./data/list.txt"
Student_FILENAME_raw = "./data/list_raw.txt"

# Student
@eel.expose
def Student_load():
    with open(select_file(), "r") as f:
        global Student_names
        Student_names = f.read().splitlines()
        Student_save(Student_FILENAME)
        Student_save(Student_FILENAME_raw)


@eel.expose
def Student_reset():
    Student_names_load(Student_FILENAME_raw)


@eel.expose
def Student_show():
    Student_names_load(Student_FILENAME)
    name_ls = ""
    a = 1
    for name in Student_names:
        if a % 5 == 0:
            name_ls = name_ls + name + "<br>"
        else:
            name_ls = name_ls + name + "　"
        a += 1
    return name_ls


@eel.expose
def Student_choice():
    Student_names_load(Student_FILENAME)
    global Student_names_raw
    Student_names_raw = copy.deepcopy(Student_names)
    if not Student_names:
        return
    global name
    name = random.choice(Student_names)
    Student_names.remove(name)
    if Student_names == []:
        Student_names_load(Student_FILENAME_raw)
    History_add(name)
    Student_save(Student_FILENAME)
    return name


@eel.expose
def Student_save(FILENAME):
    f = open(FILENAME, 'wb')
    pickle.dump(Student_names, f)


@eel.expose
def Student_names_load(FILENAME):
    f = open(FILENAME, "rb")
    global Student_names
    Student_names = pickle.load(f)


# History
History_FILENAME = "./data/history.txt"
History_data = []


@eel.expose
def History_load():
    with open(History_FILENAME, "r") as f:
        global History_data
        History_data = f.read().splitlines()


@eel.expose
def History_save():
    with open(History_FILENAME, "w") as f:
        for history in History_data:
            print(history, file=f)


@eel.expose
def History_show():
    history_ls = ""
    History_load()
    for history in History_data:
        history_ls = history + "<br>" + history_ls
    return history_ls


locale.setlocale(locale.LC_ALL, '')
@eel.expose
def History_add(name):
    now = datetime.datetime.now()
    History_data.append(f"{now:%m月%d日}:{name}")
    History_save()


@eel.expose
def History_cancel():
    History_data.pop()
    History_save()
    global Student_names
    Student_names = copy.deepcopy(Student_names_raw)
    Student_save(Student_FILENAME)


@eel.expose
def History_clear():
    global History_data
    History_data = []
    History_save()


# 名簿読み込み
# ダイアログ用のルートウィンドウの作成
# （root自体はeelのウィンドウとは関係ないので非表示にしておくのが望ましい）
root = Tk()
# ウィンドウサイズを0にする
root.geometry("0x0")
# ウィンドウのタイトルバーを消す
root.overrideredirect(1)
# ウィンドウを非表示に
root.withdraw()
system = platform.system()


@eel.expose
def select_file():
    # Windowsの場合withdrawの状態だとダイアログも
    # 非表示になるため、rootウィンドウを表示する
    if system == "Windows":
        root.deiconify()
    # macOS用にダイアログ作成前後でupdate()を呼ぶ
    root.update()

    # ダイアログを前面に
    # topmost指定(最前面)
    root.attributes('-topmost', True)
    root.withdraw()
    root.lift()
    root.focus_force()
    path_str = filedialog.askopenfilename()
    root.update()
    if system == "Windows":
        # 再度非表示化（Windowsのみ）
        root.withdraw()
    #path = Path(path_str)
    return path_str


if __name__ == '__main__':
    main()
```

</div></details>

<details><summary>main.html</summary><div>

```html:main.html
<html>

<head>
  <meta charset="UTF-8">
  <title>生徒当てるヤツ</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <script type="text/javascript" src="/eel.js"></script>
  <script type="text/javascript">
    async function Student_choice() {
      var demo2 = document.getElementById("div0");
      demo2.innerHTML = "";
      div0.insertAdjacentHTML('afterbegin', '<div id="name"></div>');
      let val = await eel.Student_choice()();
      var doc0 = document.getElementById("name");
      doc0.innerHTML = val;
    }

    async function Student_load() {
      eel.Student_load();
    }

    async function Student_show() {
      let val = await eel.Student_show()();
      var doc0 = document.getElementById("div0");
      doc0.innerHTML = val;
    }

    async function History_show() {
      let val = await eel.History_show()();
      var doc0 = document.getElementById("div0");
      doc0.innerHTML = val;
    }

    async function History_clear() {
      let val = await eel.History_clear()();
      var doc0 = document.getElementById("div0");
      doc0.innerHTML = val;
    }

    async function History_cancel() {
      let val = await eel.History_cancel()();
      var doc0 = document.getElementById("div0");
      doc0.innerHTML = val;
    }
  </script>
</head>

<body>
  <center>
    <div id="div0">
    </div>
    <div class="bottom">
      <a href="#" onclick="Student_choice()" class="btn-square">生徒を当てる</a>
      <a href="#" onclick="History_cancel()" class="btn-square">欠席者を飛ばす</a>
      <a href="#" onclick="Student_show()" class="btn-square">残りの生徒を表示</a>
      <a href="#" onclick="History_show()" class="btn-square">履歴の表示</a>
      <a href="#" onclick="History_clear()" class="btn-square">履歴の消去</a>
      <a href="#" onclick="Student_load()" class="btn-square">名簿を更新</a>
    </div>
  </center>
  <div class='markdown-preview' data-use-github-style>
    <details>
      <summary>名簿の更新方法</summary>
      <div>

        <h1 id="名簿の更新方法">名簿の更新方法</h1>
        <h3 id="1">1</h3>
        <p>任意のファイル名のテキストファイル(*.txt)を作成します.</p>
        <h3 id="2">2</h3>
        <p>その中に<br>
          1.名前<br>
          2.名前<br>
          ・<br>
          ・<br>
          ・<br>
          と入力します.</p>
        <h3 id="3">3</h3>
        <p>名簿を更新をクリックし,テキストファイルを選択する.</p>
      </div>
    </details>
  </div>

</html>
```

</div></details>

<details><summary>style.css</summary><div>

```css:style.css
.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #668ad8;
  /*ボタン色*/
  color: #FFF;
  border-bottom: solid 4px #627295;
  border-radius: 3px;
}

.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  /*下に動く*/
  border-bottom: none;
  /*線を消す*/
}

#div0 {
  height: 300px;
  overflow: scroll;
}

#name {
  margin-top: 50px;
  font-size: 100px;
}

.bottom {}

.markdown-preview:not([data-use-github-style]) {
  padding: 2em;
  font-size: 1.2em;
  color: rgb(197, 200, 198);
  background-color: rgb(29, 31, 33);
  overflow: auto;
}

.markdown-preview:not([data-use-github-style])> :first-child {
  margin-top: 0px;
}

.markdown-preview:not([data-use-github-style]) h1,
.markdown-preview:not([data-use-github-style]) h2,
.markdown-preview:not([data-use-github-style]) h3,
.markdown-preview:not([data-use-github-style]) h4,
.markdown-preview:not([data-use-github-style]) h5,
.markdown-preview:not([data-use-github-style]) h6 {
  line-height: 1.2;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: rgb(255, 255, 255);
}

.markdown-preview:not([data-use-github-style]) h1 {
  font-size: 2.4em;
  font-weight: 300;
}

.markdown-preview:not([data-use-github-style]) h2 {
  font-size: 1.8em;
  font-weight: 400;
}

.markdown-preview:not([data-use-github-style]) h3 {
  font-size: 1.5em;
  font-weight: 500;
}

.markdown-preview:not([data-use-github-style]) h4 {
  font-size: 1.2em;
  font-weight: 600;
}

.markdown-preview:not([data-use-github-style]) h5 {
  font-size: 1.1em;
  font-weight: 600;
}

.markdown-preview:not([data-use-github-style]) h6 {
  font-size: 1em;
  font-weight: 600;
}

.markdown-preview:not([data-use-github-style]) strong {
  color: rgb(255, 255, 255);
}

.markdown-preview:not([data-use-github-style]) del {
  color: rgb(155, 160, 157);
}

.markdown-preview:not([data-use-github-style]) a,
.markdown-preview:not([data-use-github-style]) a code {
  color: white;
}

.markdown-preview:not([data-use-github-style]) img {
  max-width: 100%;
}

.markdown-preview:not([data-use-github-style])>p {
  margin-top: 0px;
  margin-bottom: 1.5em;
}

.markdown-preview:not([data-use-github-style])>ul,
.markdown-preview:not([data-use-github-style])>ol {
  margin-bottom: 1.5em;
}

.markdown-preview:not([data-use-github-style]) blockquote {
  margin: 1.5em 0px;
  font-size: inherit;
  color: rgb(155, 160, 157);
  border-color: rgb(67, 72, 76);
  border-width: 4px;
}

.markdown-preview:not([data-use-github-style]) hr {
  margin: 3em 0px;
  border-top: 2px dashed rgb(67, 72, 76);
  background: none;
}

.markdown-preview:not([data-use-github-style]) table {
  margin: 1.5em 0px;
}

.markdown-preview:not([data-use-github-style]) th {
  color: rgb(255, 255, 255);
}

.markdown-preview:not([data-use-github-style]) th,
.markdown-preview:not([data-use-github-style]) td {
  padding: 0.66em 1em;
  border: 1px solid rgb(67, 72, 76);
}

.markdown-preview:not([data-use-github-style]) code {
  color: rgb(255, 255, 255);
  background-color: rgb(48, 51, 55);
}

.markdown-preview:not([data-use-github-style]) pre.editor-colors {
  margin: 1.5em 0px;
  padding: 1em;
  font-size: 0.92em;
  border-radius: 3px;
  background-color: rgb(39, 41, 44);
}

.markdown-preview:not([data-use-github-style]) kbd {
  color: rgb(255, 255, 255);
  border-width: 1px 1px 2px;
  border-style: solid;
  border-color: rgb(67, 72, 76) rgb(67, 72, 76) rgb(53, 57, 60);
  border-image: initial;
  background-color: rgb(48, 51, 55);
}

.markdown-preview[data-use-github-style] {
  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  line-height: 1.6;
  overflow-wrap: break-word;
  padding: 30px;
  font-size: 16px;
  color: rgb(51, 51, 51);
  background-color: rgb(255, 255, 255);
}

.markdown-preview[data-use-github-style]> :first-child {
  margin-top: 0px !important;
}

.markdown-preview[data-use-github-style]> :last-child {
  margin-bottom: 0px !important;
}

.markdown-preview[data-use-github-style] a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markdown-preview[data-use-github-style] .absent {
  color: rgb(204, 0, 0);
}

.markdown-preview[data-use-github-style] .anchor {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  padding-right: 6px;
  padding-left: 30px;
  margin-left: -30px;
}

.markdown-preview[data-use-github-style] .anchor:focus {
  outline: none;
}

.markdown-preview[data-use-github-style] h1,
.markdown-preview[data-use-github-style] h2,
.markdown-preview[data-use-github-style] h3,
.markdown-preview[data-use-github-style] h4,
.markdown-preview[data-use-github-style] h5,
.markdown-preview[data-use-github-style] h6 {
  position: relative;
  margin-top: 1em;
  margin-bottom: 16px;
  font-weight: bold;
  line-height: 1.4;
}

.markdown-preview[data-use-github-style] h1 .octicon-link,
.markdown-preview[data-use-github-style] h2 .octicon-link,
.markdown-preview[data-use-github-style] h3 .octicon-link,
.markdown-preview[data-use-github-style] h4 .octicon-link,
.markdown-preview[data-use-github-style] h5 .octicon-link,
.markdown-preview[data-use-github-style] h6 .octicon-link {
  display: none;
  color: rgb(0, 0, 0);
  vertical-align: middle;
}

.markdown-preview[data-use-github-style] h1:hover .anchor,
.markdown-preview[data-use-github-style] h2:hover .anchor,
.markdown-preview[data-use-github-style] h3:hover .anchor,
.markdown-preview[data-use-github-style] h4:hover .anchor,
.markdown-preview[data-use-github-style] h5:hover .anchor,
.markdown-preview[data-use-github-style] h6:hover .anchor {
  padding-left: 8px;
  margin-left: -30px;
  text-decoration: none;
}

.markdown-preview[data-use-github-style] h1:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h2:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h3:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h4:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h5:hover .anchor .octicon-link,
.markdown-preview[data-use-github-style] h6:hover .anchor .octicon-link {
  display: inline-block;
}

.markdown-preview[data-use-github-style] h1 tt,
.markdown-preview[data-use-github-style] h2 tt,
.markdown-preview[data-use-github-style] h3 tt,
.markdown-preview[data-use-github-style] h4 tt,
.markdown-preview[data-use-github-style] h5 tt,
.markdown-preview[data-use-github-style] h6 tt,
.markdown-preview[data-use-github-style] h1 code,
.markdown-preview[data-use-github-style] h2 code,
.markdown-preview[data-use-github-style] h3 code,
.markdown-preview[data-use-github-style] h4 code,
.markdown-preview[data-use-github-style] h5 code,
.markdown-preview[data-use-github-style] h6 code {
  font-size: inherit;
}

.markdown-preview[data-use-github-style] h1 {
  padding-bottom: 0.3em;
  font-size: 2.25em;
  line-height: 1.2;
  border-bottom: 1px solid rgb(238, 238, 238);
}

.markdown-preview[data-use-github-style] h1 .anchor {
  line-height: 1;
}

.markdown-preview[data-use-github-style] h2 {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid rgb(238, 238, 238);
}

.markdown-preview[data-use-github-style] h2 .anchor {
  line-height: 1;
}

.markdown-preview[data-use-github-style] h3 {
  font-size: 1.5em;
  line-height: 1.43;
}

.markdown-preview[data-use-github-style] h3 .anchor {
  line-height: 1.2;
}

.markdown-preview[data-use-github-style] h4 {
  font-size: 1.25em;
}

.markdown-preview[data-use-github-style] h4 .anchor {
  line-height: 1.2;
}

.markdown-preview[data-use-github-style] h5 {
  font-size: 1em;
}

.markdown-preview[data-use-github-style] h5 .anchor {
  line-height: 1.1;
}

.markdown-preview[data-use-github-style] h6 {
  font-size: 1em;
  color: rgb(119, 119, 119);
}

.markdown-preview[data-use-github-style] h6 .anchor {
  line-height: 1.1;
}

.markdown-preview[data-use-github-style] p,
.markdown-preview[data-use-github-style] blockquote,
.markdown-preview[data-use-github-style] ul,
.markdown-preview[data-use-github-style] ol,
.markdown-preview[data-use-github-style] dl,
.markdown-preview[data-use-github-style] table,
.markdown-preview[data-use-github-style] pre {
  margin-top: 0px;
  margin-bottom: 16px;
}

.markdown-preview[data-use-github-style] hr {
  height: 4px;
  padding: 0px;
  margin: 16px 0px;
  background-color: rgb(231, 231, 231);
  border: 0px none;
}

.markdown-preview[data-use-github-style] ul,
.markdown-preview[data-use-github-style] ol {
  padding-left: 2em;
}

.markdown-preview[data-use-github-style] ul.no-list,
.markdown-preview[data-use-github-style] ol.no-list {
  padding: 0px;
  list-style-type: none;
}

.markdown-preview[data-use-github-style] ul ul,
.markdown-preview[data-use-github-style] ul ol,
.markdown-preview[data-use-github-style] ol ol,
.markdown-preview[data-use-github-style] ol ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

.markdown-preview[data-use-github-style] li>p {
  margin-top: 16px;
}

.markdown-preview[data-use-github-style] dl {
  padding: 0px;
}

.markdown-preview[data-use-github-style] dl dt {
  padding: 0px;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

.markdown-preview[data-use-github-style] dl dd {
  padding: 0px 16px;
  margin-bottom: 16px;
}

.markdown-preview[data-use-github-style] blockquote {
  padding: 0px 15px;
  color: rgb(119, 119, 119);
  border-left: 4px solid rgb(221, 221, 221);
}

.markdown-preview[data-use-github-style] blockquote> :first-child {
  margin-top: 0px;
}

.markdown-preview[data-use-github-style] blockquote> :last-child {
  margin-bottom: 0px;
}

.markdown-preview[data-use-github-style] table {
  display: block;
  width: 100%;
  overflow: auto;
  word-break: keep-all;
}

.markdown-preview[data-use-github-style] table th {
  font-weight: bold;
}

.markdown-preview[data-use-github-style] table th,
.markdown-preview[data-use-github-style] table td {
  padding: 6px 13px;
  border: 1px solid rgb(221, 221, 221);
}

.markdown-preview[data-use-github-style] table tr {
  background-color: rgb(255, 255, 255);
  border-top: 1px solid rgb(204, 204, 204);
}

.markdown-preview[data-use-github-style] table tr:nth-child(2n) {
  background-color: rgb(248, 248, 248);
}

.markdown-preview[data-use-github-style] img {
  max-width: 100%;
  box-sizing: border-box;
}

.markdown-preview[data-use-github-style] .emoji {
  max-width: none;
}

.markdown-preview[data-use-github-style] span.frame {
  display: block;
  overflow: hidden;
}

.markdown-preview[data-use-github-style] span.frame>span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0px 0px;
  overflow: hidden;
  border: 1px solid rgb(221, 221, 221);
}

.markdown-preview[data-use-github-style] span.frame span img {
  display: block;
  float: left;
}

.markdown-preview[data-use-github-style] span.frame span span {
  display: block;
  padding: 5px 0px 0px;
  clear: both;
  color: rgb(51, 51, 51);
}

.markdown-preview[data-use-github-style] span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}

.markdown-preview[data-use-github-style] span.align-center>span {
  display: block;
  margin: 13px auto 0px;
  overflow: hidden;
  text-align: center;
}

.markdown-preview[data-use-github-style] span.align-center span img {
  margin: 0px auto;
  text-align: center;
}

.markdown-preview[data-use-github-style] span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}

.markdown-preview[data-use-github-style] span.align-right>span {
  display: block;
  margin: 13px 0px 0px;
  overflow: hidden;
  text-align: right;
}

.markdown-preview[data-use-github-style] span.align-right span img {
  margin: 0px;
  text-align: right;
}

.markdown-preview[data-use-github-style] span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}

.markdown-preview[data-use-github-style] span.float-left span {
  margin: 13px 0px 0px;
}

.markdown-preview[data-use-github-style] span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}

.markdown-preview[data-use-github-style] span.float-right>span {
  display: block;
  margin: 13px auto 0px;
  overflow: hidden;
  text-align: right;
}

.markdown-preview[data-use-github-style] code,
.markdown-preview[data-use-github-style] tt {
  padding: 0.2em 0px;
  margin: 0px;
  font-size: 85%;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
}

.markdown-preview[data-use-github-style] code::before,
.markdown-preview[data-use-github-style] tt::before,
.markdown-preview[data-use-github-style] code::after,
.markdown-preview[data-use-github-style] tt::after {
  letter-spacing: -0.2em;
  content: " ";
}

.markdown-preview[data-use-github-style] code br,
.markdown-preview[data-use-github-style] tt br {
  display: none;
}

.markdown-preview[data-use-github-style] del code {
  text-decoration: inherit;
}

.markdown-preview[data-use-github-style] pre>code {
  padding: 0px;
  margin: 0px;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0px;
}

.markdown-preview[data-use-github-style] .highlight {
  margin-bottom: 16px;
}

.markdown-preview[data-use-github-style] .highlight pre,
.markdown-preview[data-use-github-style] pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: rgb(247, 247, 247);
  border-radius: 3px;
}

.markdown-preview[data-use-github-style] .highlight pre {
  margin-bottom: 0px;
  word-break: normal;
}

.markdown-preview[data-use-github-style] pre {
  overflow-wrap: normal;
}

.markdown-preview[data-use-github-style] pre code,
.markdown-preview[data-use-github-style] pre tt {
  display: inline;
  max-width: initial;
  padding: 0px;
  margin: 0px;
  overflow: initial;
  line-height: inherit;
  overflow-wrap: normal;
  background-color: transparent;
  border: 0px;
}

.markdown-preview[data-use-github-style] pre code::before,
.markdown-preview[data-use-github-style] pre tt::before,
.markdown-preview[data-use-github-style] pre code::after,
.markdown-preview[data-use-github-style] pre tt::after {
  content: normal;
}

.markdown-preview[data-use-github-style] kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: rgb(85, 85, 85);
  vertical-align: middle;
  background-color: rgb(252, 252, 252);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(187, 187, 187);
  border-image: initial;
  border-radius: 3px;
  box-shadow: rgb(187, 187, 187) 0px -1px 0px inset;
}

.markdown-preview[data-use-github-style] a {
  color: rgb(51, 122, 183);
}

.markdown-preview[data-use-github-style] code {
  color: inherit;
}

.markdown-preview[data-use-github-style] pre.editor-colors {
  padding: 0.8em 1em;
  margin-bottom: 1em;
  font-size: 0.85em;
  border-radius: 4px;
  overflow: auto;
}

.markdown-preview pre.editor-colors {
  user-select: auto;
}

.scrollbars-visible-always .markdown-preview pre.editor-colors .vertical-scrollbar,
.scrollbars-visible-always .markdown-preview pre.editor-colors .horizontal-scrollbar {
  visibility: hidden;
}

.scrollbars-visible-always .markdown-preview pre.editor-colors:hover .vertical-scrollbar,
.scrollbars-visible-always .markdown-preview pre.editor-colors:hover .horizontal-scrollbar {
  visibility: visible;
}

.markdown-preview .task-list-item input[type="checkbox"] {
  position: absolute;
  margin: 0.25em 0px 0px -1.4em;
}

.markdown-preview .task-list-item {
  list-style-type: none;
}

.markdown-preview code {
  text-shadow: none;
}

@keyframes RotatingBackground {
  0% {
    background-position-x: 0%;
  }

  100% {
    background-position-x: 100%;
  }
}

.debugger-breakpoint-icon::before,
.debugger-shadow-breakpoint-icon::before {
  font-family: 'Octicons Regular';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  font-size: 130%;
  width: 130%;
  height: 130%;
  content: "\f052";
}

.debugger-breakpoint-icon,
.debugger-breakpoint-icon-disabled,
.debugger-breakpoint-icon-unresolved,
.debugger-breakpoint-icon-conditional,
.debugger-shadow-breakpoint-icon {
  text-align: center;
  display: block;
  width: 0.8em;
  cursor: pointer;
}

.debugger-breakpoint-icon-nonconditional {
  color: #5293d8;
}

.debugger-breakpoint-icon-conditional {
  color: #ff982d;
}

.debugger-breakpoint-icon-disabled {
  position: relative;
  top: -4px;
  left: 2px;
}

.debugger-breakpoint-icon-disabled::before {
  font-family: 'Octicons Regular';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  font-size: 78%;
  width: 78%;
  height: 78%;
  content: "\f084";
}

.debugger-breakpoint-icon-unresolved {
  position: relative;
  top: -2px;
}

.debugger-breakpoint-icon-unresolved::before {
  font-family: 'Octicons Regular';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  font-size: 80%;
  width: 80%;
  height: 80%;
  content: "\f0e8";
}

.debugger-shadow-breakpoint-icon {
  color: rgba(82, 147, 216, 0.4);
}

.debugger-current-line-highlight {
  background: linear-gradient(to bottom, rgba(0, 152, 255, 0.8) 0%, rgba(0, 152, 255, 0.8) 5%, rgba(0, 152, 255, 0.3) 5%, rgba(0, 152, 255, 0.3) 95%, rgba(0, 152, 255, 0.8) 95%, rgba(0, 152, 255, 0.8) 100%);
}

.gutter[gutter-name=diagnostics-gutter] {
  width: 0.7em;
}

.diagnostics-gutter-ui-item {
  display: flex;
}

.diagnostics-gutter-ui-item .icon {
  display: flex;
  width: 0.7em;
  height: 0.7em;
  font-size: 0.7em;
  align-self: center;
}

.diagnostics-gutter-ui-item .icon::before {
  width: 1em;
  height: 1em;
  font-size: 1em;
  margin: 0;
  align-self: center;
}

.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-info,
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-review {
  color: #5293d8;
}

.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-error {
  color: #c00;
}

.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-action,
.diagnostics-gutter-ui-item.diagnostics-gutter-ui-gutter-warning {
  color: #ff982d;
}

.bracket-matcher .region {
  border-bottom: 1px dotted lime;
  position: absolute;
}

.line-number.bracket-matcher.bracket-matcher {
  color: #c5c8c6;
  background-color: rgba(255, 255, 255, 0.14);
}

.spell-check-misspelling .region {
  border-bottom: 2px dotted rgba(255, 51, 51, 0.75);
}

.spell-check-corrections {
  width: 25em !important;
}

pre.editor-colors {
  background-color: #1d1f21;
  color: #c5c8c6;
}

pre.editor-colors .invisible-character {
  color: rgba(197, 200, 198, 0.2);
}

pre.editor-colors .indent-guide {
  color: rgba(197, 200, 198, 0.2);
}

pre.editor-colors .wrap-guide {
  background-color: rgba(197, 200, 198, 0.1);
}

pre.editor-colors .gutter {
  background-color: #292c2f;
}

pre.editor-colors .gutter .cursor-line {
  background-color: rgba(255, 255, 255, 0.14);
}

pre.editor-colors .line-number.cursor-line-no-selection {
  background-color: rgba(255, 255, 255, 0.14);
}

pre.editor-colors .gutter .line-number.folded,
pre.editor-colors .gutter .line-number:after,
pre.editor-colors .fold-marker:after {
  color: #fba0e3;
}

pre.editor-colors .invisible {
  color: #c5c8c6;
}

pre.editor-colors .cursor {
  border-color: white;
}

pre.editor-colors .selection .region {
  background-color: #444;
}

pre.editor-colors .bracket-matcher .region {
  border-bottom: 1px solid #f8de7e;
  margin-top: -1px;
  opacity: .7;
}

.syntax--comment {
  color: #8a8a8a;
}

.syntax--entity {
  color: #FFD2A7;
}

.syntax--entity.syntax--name.syntax--type {
  text-decoration: underline;
  color: #FFFFB6;
}

.syntax--entity.syntax--other.syntax--inherited-class {
  color: #9B5C2E;
}

.syntax--keyword {
  color: #96CBFE;
}

.syntax--keyword.syntax--control {
  color: #96CBFE;
}

.syntax--keyword.syntax--operator {
  color: #EDEDED;
}

.syntax--storage {
  color: #CFCB90;
}

.syntax--storage.syntax--modifier {
  color: #96CBFE;
}

.syntax--constant {
  color: #99CC99;
}

.syntax--constant.syntax--numeric {
  color: #FF73FD;
}

.syntax--variable {
  color: #C6C5FE;
}

.syntax--invalid.syntax--deprecated {
  text-decoration: underline;
  color: #FD5FF1;
}

.syntax--invalid.syntax--illegal {
  color: #FD5FF1;
  background-color: rgba(86, 45, 86, 0.75);
}

.syntax--string .syntax--source,
.syntax--string .syntax--meta.syntax--embedded.syntax--line {
  color: #EDEDED;
}

.syntax--string .syntax--punctuation.syntax--section.syntax--embedded {
  color: #00A0A0;
}

.syntax--string .syntax--punctuation.syntax--section.syntax--embedded .syntax--source {
  color: #00A0A0;
}

.syntax--string {
  color: #A8FF60;
}

.syntax--string .syntax--constant {
  color: #00A0A0;
}

.syntax--string.syntax--regexp {
  color: #E9C062;
}

.syntax--string.syntax--regexp .syntax--constant.syntax--character.syntax--escape,
.syntax--string.syntax--regexp .syntax--source.syntax--ruby.syntax--embedded,
.syntax--string.syntax--regexp .syntax--string.syntax--regexp.syntax--arbitrary-repetition {
  color: #FF8000;
}

.syntax--string.syntax--regexp.syntax--group {
  color: #C6A24F;
  background-color: rgba(255, 255, 255, 0.06);
}

.syntax--string.syntax--regexp.syntax--character-class {
  color: #B18A3D;
}

.syntax--string .syntax--variable {
  color: #8A9A95;
}

.syntax--support {
  color: #FFFFB6;
}

.syntax--support.syntax--function {
  color: #DAD085;
}

.syntax--support.syntax--constant {
  color: #FFD2A7;
}

.syntax--support.syntax--type.syntax--property-name.syntax--css {
  color: #EDEDED;
}

.syntax--source .syntax--entity.syntax--name.syntax--tag,
.syntax--source .syntax--punctuation.syntax--tag {
  color: #96CBFE;
}

.syntax--source .syntax--entity.syntax--other.syntax--attribute-name {
  color: #FF73FD;
}

.syntax--entity.syntax--other.syntax--attribute-name {
  color: #FF73FD;
}

.syntax--entity.syntax--name.syntax--tag.syntax--namespace,
.syntax--entity.syntax--other.syntax--attribute-name.syntax--namespace {
  color: #E18964;
}

.syntax--meta.syntax--preprocessor.syntax--c {
  color: #8996A8;
}

.syntax--meta.syntax--preprocessor.syntax--c .syntax--keyword {
  color: #AFC4DB;
}

.syntax--meta.syntax--cast {
  color: #676767;
}

.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype,
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype .syntax--entity,
.syntax--meta.syntax--sgml.syntax--html .syntax--meta.syntax--doctype .syntax--string,
.syntax--meta.syntax--xml-processing,
.syntax--meta.syntax--xml-processing .syntax--entity,
.syntax--meta.syntax--xml-processing .syntax--string {
  color: #8a8a8a;
}

.syntax--meta.syntax--tag .syntax--entity,
.syntax--meta.syntax--tag>.syntax--punctuation,
.syntax--meta.syntax--tag.syntax--inline .syntax--entity {
  color: #FF73FD;
}

.syntax--meta.syntax--tag .syntax--name,
.syntax--meta.syntax--tag.syntax--inline .syntax--name,
.syntax--meta.syntax--tag>.syntax--punctuation {
  color: #96CBFE;
}

.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--name.syntax--tag {
  text-decoration: underline;
  color: #96CBFE;
}

.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--tag.syntax--pseudo-class {
  color: #8F9D6A;
}

.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--id {
  color: #8B98AB;
}

.syntax--meta.syntax--selector.syntax--css .syntax--entity.syntax--other.syntax--attribute-name.syntax--class {
  color: #62B1FE;
}

.syntax--meta.syntax--property-group .syntax--support.syntax--constant.syntax--property-value.syntax--css,
.syntax--meta.syntax--property-value .syntax--support.syntax--constant.syntax--property-value.syntax--css {
  color: #F9EE98;
}

.syntax--meta.syntax--preprocessor.syntax--at-rule .syntax--keyword.syntax--control.syntax--at-rule {
  color: #8693A5;
}

.syntax--meta.syntax--property-value .syntax--support.syntax--constant.syntax--named-color.syntax--css,
.syntax--meta.syntax--property-value .syntax--constant {
  color: #87C38A;
}

.syntax--meta.syntax--constructor.syntax--argument.syntax--css {
  color: #8F9D6A;
}

.syntax--meta.syntax--diff,
.syntax--meta.syntax--diff.syntax--header {
  color: #F8F8F8;
  background-color: #0E2231;
}

.syntax--meta.syntax--separator {
  color: #60A633;
  background-color: #242424;
}

.syntax--meta.syntax--line.syntax--entry.syntax--logfile,
.syntax--meta.syntax--line.syntax--exit.syntax--logfile {
  background-color: rgba(238, 238, 238, 0.16);
}

.syntax--meta.syntax--line.syntax--error.syntax--logfile {
  background-color: #751012;
}

.syntax--source.syntax--gfm {
  color: #999;
}

.syntax--gfm .syntax--markup.syntax--heading {
  color: #eee;
}

.syntax--gfm .syntax--link {
  color: #555;
}

.syntax--gfm .syntax--variable.syntax--list,
.syntax--gfm .syntax--support.syntax--quote {
  color: #555;
}

.syntax--gfm .syntax--link .syntax--entity {
  color: #ddd;
}

.syntax--gfm .syntax--raw {
  color: #aaa;
}

.syntax--markdown .syntax--paragraph {
  color: #999;
}

.syntax--markdown .syntax--heading {
  color: #eee;
}

.syntax--markdown .syntax--raw {
  color: #aaa;
}

.syntax--markdown .syntax--link {
  color: #555;
}

.syntax--markdown .syntax--link .syntax--string {
  color: #555;
}

.syntax--markdown .syntax--link .syntax--string.syntax--title {
  color: #ddd;
}

```

</div></details>

eel.jsは公式githubとかから取得してください
(このコードをそのまま使うなら必要ない)

### 参考にしたサイト

[CSSで作る！押したくなるボタンデザイン100（Web用）](https://saruwakakun.com/html-css/reference/buttons)
[Python eelでファイル選択ダイアログ](https://blog.sakaki333.com/blog/view/83)

# 動作風景

![Screenshot from 2020-02-25 14-39-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284999/5515caf9-302a-5b9f-b94a-3deb8fad0537.png)
![Screenshot from 2020-02-25 14-39-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284999/e339d175-704c-c735-44fe-f72ecbe9b42b.png)
![Screenshot from 2020-02-25 14-39-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284999/5ab58cf1-9492-6f02-7537-702c097916c5.png)
![Screenshot from 2020-02-25 14-39-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284999/98635b3b-09ce-4953-65e1-13ae66fe33ed.png)

# exeファイル

[生徒当てるヤツ.zip](https://github.com/mochihisa/Choice-student/raw/master/%E7%94%9F%E5%BE%92%E5%BD%93%E3%81%A6%E3%82%8B%E3%83%A4%E3%83%84.zip)