---

オープンキャンパスお疲れ様でした。

いろんな困難があったオーキャン準備でしたが、なんとか本番を無事終えることが出来ました。

素晴らしい。

今回私は、CSSなど見た目に関する部分には触れず、主にサーバ側の処理を担当していました。

例えば、ユーザの登録やゲームのクリア状況の記録などです。

苦労して作成していたので、記念に記録しておきます。

目次

---

1. ユーザの登録
2. ユーザのログイン
3. ストーリー解説ページ
4. ユーザページ
5. クリアページ

ユーザの登録

---

今回私たちが作成したゼミ紹介ゲームでは、ゲームを始める際に来場者の方に登録手続きをしてもらう必要があります。

コードの一部（伏字あり）

次のプログラムは、ユーザを登録する処理を行うものです。

もちろん二重登録はできないようになっています。

#書き込み
try:
    if username and email:
        #重複チェック
        if checkfile:
            with open(FILENAME,"r")as f:
                reader = csv.reader(f)
                users = [row for row in reader]

            for user in users:
                if email[0] in user:
                    checkDouble=True
            #id create
            if users:
                id=users[-1][0]
                id=int(id)+1
                id=str(id).zfill(3)

        if not checkDouble:
            with open(FILENAME,"a")as f:
                writer = csv.writer(f)
                writer.writerow([id,username[0],email[0],AVATAR]+BASE)
            with open(FILENAME_ID+id+".csv","w") as f:
                writer = csv.writer(f)
                writer.writerow([id,username[0],email[0],AVATAR]+BASE)
            msg="あなたのQRコードを作成しましす。"
            redirectGet=f"?id={id}&avatar={AVATAR}"
            RedirectMeta=f"""---"""
        else:
            msg="既に登録済みです。"
except Exception as e:
    msg=f"アクセスが集中しています。しばらくしてから、やり直してください。{e}"
                        

CSS適用後の見た目

ニックネームとメールアドレスを入力し、登録ボタンを押すことで登録が完了します。

ユーザのログイン

---

登録が完了した後にページを閉じてしまったという人は必ずいるでしょう。

そのような場合のために、ログイン機能が必要です。

今回はメールアドレスで認証することにしました。

CSS適用後の見た目

統一感ある素晴らしいデザイン。僕は作ってないけど。

ストーリー解説ページ

---

登録が終わった人には、このゲームのストーリーを理解してもらう必要があります。

この部分は、JavaScriptでスライドショーの形式で画像が見られるページを作成しました。

「サムネイルをクリックすると、メイン画像が切り替わる1 | 動くWebデザインアイディア帳」を参考に、今回に合わせて最適化させました。

CSS適用後の見た目

画像は止まってますが、本当は動きます。ようこそ!!

ユーザページ

---

ストーリーを理解してもらったら、いよいよゲーム開始!

ユーザページでは、自分のIDやクリア状況が表示されます。

コードの一部（伏字あり）

次のプログラムは、パスワードがあっているチェックするものです。

合っていたら各ゲームごとに設定されているクリア状況を示すステータスを変更します。

#get form
id=forms.getlist("id")
if id:
    id=id[0]
password=forms.getlist("password")

#query log
getQuery=f"---"


#chenge status bese
with open(FILENAME,"r")as f:
    reader = csv.reader(f)
    users = [row for row in reader]
#new result
for user in users:
    if id in user:
        baseInfo=user[-3:]
        avatar=[AVATAR_COL][0]

#password check
if password:
    password=password[0]

    #check correct
    with open(PASSWORDFILE,"r")as f:
        reader = csv.reader(f)
        correctPass = [row for row in reader]
    if password in correctPass[0]:
        baseNum=correctPass[0].index(password)
        #new result
        for user in users:
            if id in user:
                user[int(baseNum)+4]=True
                baseInfo=user[-3:]
                hozParsonal=user
            result.append(user)

                        

CSS適用後の見た目

クリアすると「まだだよ」が「クリア」になります。そして黄金に輝きます。

クリアページ

---

クリアしてもらったら専用のクリアページに案内してあげます。

クリアページでは、サービスビジネス研究会が運営しているカフェにて使用できるお得なクーポンが、もらえるようになっています。

このページ少し面白い機能があって、スマホを横にするとクーポンが全画面表示になります。

「JavaScriptでiOS,Android端末を縦向き、横向き、上下逆向きに回転させたときに検出して条件分岐する方法｜今村だけがよくわかるブログ」を参考に、今回に合わせて最適化させました。

CSS適用後の見た目

スマホの向きによって、レスポンシブに変化します。

おわりに

---

非常に素晴らしいオープンキャンパスでした。

来年は後輩たちに、ぜひ頑張ってもらいたいですね。

供養完了。