※動画内のメールクライアントは個人情報の兼ね合いで一部編集しています。

仕様の説明

会員登録ができ、メモを作成できる。
かつ、メモはタグ機能があり、検索機能がある。

・BackEndはPythonを利用
・FrontEndはNuxt3系を利用
・DBはMySQL

となります。
EndPoint作成にはFlask、検索はSQLAlchemyでの全文検索をなんとなく入れてみました。
会員登録はパスワード認証と、メールによる認証を行なっています。

感想

Flaskは記述量が少なく、便利さを実感しました。
仕事ではWordpressやCMSがメインとなるためPHP利用が多く、利用機会がないので残念です。

今回は、比較的簡単なキノコを題材にしました。
もともとShade3D(ニッチソフト)での制作を行っていたので、モデリングとテクスチャ作成は容易でした。
エクスポートは椎茸だけ行いましたが、余力で皿なども作成しました↓

テクスチャやUV、エクスポート形式など様々な検証を行い、目的は達成できましたが、
ちょっと勿体無いので、簡単にサイト全体の構築を行っています。

Webは、NuxtとThreeを使用して構築をしました。
椎茸に関する知見も無く、素材もフリー素材ばかりのため全体の品質は低いですが、良い経験だったと思います。

https://shiitake.hashimoto-p.work/
テクスチャのデータ量が重いので、wifiでの閲覧を推奨します。

いわゆるステップ毎に回答するタイプのフォームコンポーネントです。

まず、コンポーネントはVueを用いて読み込ませます。
あとは、HTML側にコンポーネントを貼り付けて設置します。

該当ファイル

<stepform
  title="StepForm"
  description="This is a demo of StepForm."
  url="/demo.json"
  post="/test.php"
  :inputs="[
    {
      name: '住所',
      type: 'text',
      required: false,
      placeholder: '番地まで'
    },
    {
      name: '性別',
      type: 'radio',
      required: true,
      child: ['男', '女', '該当なし']
    }
  ]"
  :words="{
    name: 'お名前',
    email: 'メールアドレス',
    input: 'お客様情報の入力',
    next: '次のステップへ',
    prev: '前のステップへ',
    return: '入力画面に戻る',
    send: '内容を送信する',
    alert: '項目を選択してください',
    required: '必須',
    formAlert: 'は必須項目です',
    formEmail: 'の入力情報は無効です'
  }">
  <div class="btn">Click!</div>
</stepform>

各ステップは別途json形式のファイルを読み込ませます。
ステップは回答によって分岐も行えますが、jsonの管理が面倒くさくなるので1分岐のみです。

最終的にはjsonで指定したURLにPOSTしますが、jsonの構造はユーザー入力部分の回答と、フォーム回答部分のオブジェクトです。
ユーザーが入力するメールアドレスなどはデフォルトですが、propsでオブジェクトを追加することで増やせます。