千葉県立柏の葉高等学校 情報理数科
遊戯王裁定まとめサイト 中間発表その2
見出し画像

遊戯王裁定まとめサイト 中間発表その2

千葉県立柏の葉高等学校 情報理数科

[2学期でやったこと]

基本はweb上で動かすためのコードを書きました。ほとんどは検索機能を実装する為のものです。
機能を実装する為のコードやきれいに表示させる試行錯誤など、やったことはたくさんあります。
が、仕様変更や使用するデータベースを変更したりして、トラブル回避の為の方向修正を多々行ったので、ちょっと書ききれない(というか覚えてない)ので、
最終的に出来たことを書いていきます。

[HTML+CSS+jinja2]

エディター:Atom
・後述のPythonと併せて使うためにjinja2というテンプレートエンジンを導入。
・Pythonからデータを受け取って表示させたりする。
以下はコードの一部分

<HTML>

 <h3 class="text-muted">Search</h3>
       {% if message %}
         <p>{{message}}</p>
       {% endif %}
       {% if Dictionary %}
         <p>name: {{Dictionary.name}}</p>
         <p>deck: {{Dictionary.deck}}</p>
       {% endif %}
       {% if status %}
         <p>ATK:{{status.ATK}}</p>
         <p>DEF:{{status.DEF}}</p>
       {% endif %}     

<Python>

def index():
   
   my_dic = {}
   my_dic['name']='hermes'
   my_dic['deck']='power of unity'
   return render_template('index.html',Dictionary=my_dic)

<web>

画像1

PythonのコードでDictionaryに入れた文字列をjinja2で読み取って表示している

[Python+flask]

・web上で表示する為のHTML+CSSに加えて、動的なサイトにするためにPythonを使用。
・Pythonにした理由は特にないです。しいて言うなら学びたかったから

エディター:IDLE
使用モジュール: firebase_admin
flask
pyrebase
firebase_admin:firebaseを利用するために必要
flask:Python用のwebアプリケーションフレームワーク
pyrebase:Pythonでfirebaseを利用する時にあるといろいろと便利
firebaseにデータを渡す

<Python>

ref = db.reference()
warrior = db.reference('/Warrior')
dragon = db.reference('/Dragon')
warrior.set({
       'W00001':{},
       'W00002':{},
       'W00003':{},
       })
dragon.set({
   '青眼の白竜':{
       'ATK':'3000',
       'DEF':'2500'
       }
   })


[firebase realtime database]

カードデータの保存先として使用。
Pythonだけではなくjsやc++など結構いろんな言語に対応している。
画像は上のコードで渡したデータ。

画像4

上データの”W00001”をpythonで取得して表示させると

画像2

こうなる。


[3学期に取り組みたいこと]

まだ検索機能が完成していないのでとりあえずはその完成です。
完成させるためには、
・firebaseのデータの値だけをPythonに読ませる
・「カード名」と「ATK・DEF」の値を正しく表示させる
・余計な文字(”,{},;等)を消す
が必須なので、何とか方法を見つけたいですね。

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!
千葉県立柏の葉高等学校 情報理数科
千葉県立柏の葉高等学校 情報理数科の公式note / 全国専門学科「情報科」高等学校長会 事務局 / 日本で唯一の「情報理数科」の高校 / 【投稿内容】◇専門教科「情報」の授業 ◇情報理数科独自の取り組み ◇Google Workspace&Microsoft Teamsの活用