ツマジロカップ

いちぴろ

https://github.com/Huyu2239/tsumaziro-ichipiro

―

Flask

TypeScript

React

Python

TailwindCSS

忍者の知恵広場：賢者の泉、楽しく知識共有

PoPodada

Huyu

niyu

大本裕真

推しアイデア

記事本文を横書きに表示するのではなく、「巻物」のように縦書きで横にスクロールできるように表示したことなど、楽しさをモットーとしたアイデア

作った背景

お題が「忍者」だったことと、見ていて面白い仕組みがあるとクライアント側も楽しいのではと考え作りました!

推し技術

似た言葉の検出や語尾、語感などの自然言語処理を、ChatGPAを用いずward2vec等を用いて実装したこと

プロジェクト詳細

忍者 × FAQアプリ

フロントファイル構造

 
front
├── index.html
├── node_modules
├── package.json
├── postcss.config.js
├── src
│   ├── answer.css
│   ├── assets
│   │   ├── helpfeel_logo.svg
│   │   ├── progate_logo.svg
│   │   ├── progress_wanko.png
│   │   ├── prompt.svg
│   │   └── wanko.svg
│   ├── components
│   │   └── layout.tsx
│   ├── game.css
│   ├── images
│   │   ├── ninja.png
│   │   └── place.jpg
│   ├── index.css
│   ├── main.tsx
│   ├── pages
│   │   ├── answer.tsx
│   │   ├── convertToNinja.ts
│   │   ├── game.tsx
│   │   ├── hiragana.ts
│   │   └── top.tsx
│   ├── top.css
│   └── vite-env.d.ts
├── tailwind.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.mts

アピールポイント
  • テーマの忍者に合わせたUIとして巻物風の実装をしている
  • 検索結果ページの本文の語感を忍者風にしている

技術構成図

image

主な実装
  • 検索結果ページの本文の語感を忍者風にしてくれる 　http://monjiro.net/ 　上記のサイトのスクレイピングをして単語に対応する古語を抽出し変換 　
  • 検索結果ページの本文を縦書きにして巻物風のUI 　プログラムを回すだけでは左から右並びになってしまったりするため苦戦した 　
  • 漢字やひらがな入力に対応させる 　両方ひらがなに変換してひらがなでも検索可能にしている
  • 複数単語を用いたand検索に対応
  • 検索結果に該当がなかったときは特殊機能
    • モグラたたき風クリックゲームができるページに遷移
    • 近似単語を5つ出力する「もしかして」機能 　ウィキペディアデータ()からword2Vecの生成、利用
  • 該当件数が少なくなっていくほど100%に近づいていく進捗バーを実装 　求めている情報が絞られていく様子→進捗バー

PoPodada

@PoPodada