添加物スキャナー for Web

添加物スキャナーはどんな食品添加物が使われているか簡単に調べられるアプリです。食品の添加物ラベルを読み取り、その内容をAI技術を活用して自動的に認識し、分析結果を表示します。

Web 版のソースコードです。ソースコードは基本的な機能を備えた、Ver.1 まで公開する予定です。

絶賛、毎日開発中です。

マーク	ステータス
✅	リリース済み
🚧	開発中

技術構成

マーク	ステータス
✅	対応済み
🚧	今後対応予定

ステータス	項目
🚧	GitHub Actions による自動デプロイ

Vue2 までは Vue CLI が PWA 化を担うことが多かったと思います。 Vue3 は Vite がスタンダードになったので Vite を通して PWA 化するのが基本になるようです。

なるべく公式サイトのドキュメントに沿って実装しています。私は、Vue2 時代に Vuetify をよく使っていて、プロパティのアイデアなどはよく参考にさせてもらっています。

Vue の公式サイトでは以下のような書き方で emit にバリデーションが追加できると記載されている。

// emit を定義
const emit = defineEmits({
  changeValue: (value: string) => {
    // ここにバリデーションを記載する
    return true
  }
})

GitHub Actions による自動デプロイを実施しています。

# 開発
npm run dev

Name		Name	Last commit message	Last commit date
Latest commit History 148 Commits
.firebase		.firebase
.github/workflows		.github/workflows
.storybook		.storybook
.vscode		.vscode
cypress		cypress
public		public
src		src
.eslintrc.cjs		.eslintrc.cjs
.firebaserc		.firebaserc
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
README.md		README.md
cypress.config.cjs		cypress.config.cjs
env.d.ts		env.d.ts
firebase.json		firebase.json
firestore.indexes.json		firestore.indexes.json
firestore.rules		firestore.rules
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.vitest.json		tsconfig.vitest.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts