Presc - 高校研究発表会

by Aokiti

Slide 1

Slide 1 text

研究発表会資料プレゼンテーション用原稿表示アプリ

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Google Keep （メモ帳アプリ）

Slide 4

Slide 4 text

✓ 緊張で頭が真っ白になり「どこまで読んだか」が分からなくなった ✓ 大きく時間を過ぎてしまい、最後まで話すことができなかった

Slide 5

Slide 5 text

プレゼンテーション用原稿表示アプリ

Slide 6

Slide 6 text

音声認識による自動スクロール

Slide 7

Slide 7 text

経過時間や声量の確認

Slide 8

Slide 8 text

経過時間や声量の確認

Slide 9

Slide 9 text

様々な用途に対応

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

メモ帳機能

Slide 12

Slide 12 text

メモ帳機能＋文字数カウント

Slide 13

Slide 13 text

メモ帳機能＋文字数カウント＋発表時間を計算

Slide 14

Slide 14 text

タグを付けて分類・整理

Slide 15

Slide 15 text

原稿の検索＋原稿の追加・削除

Slide 16

Slide 16 text

研究の流れ

Slide 17

Slide 17 text

・アプリ設計・UI/UXデザイン作成前期前半（4月～6月）・開発作業・コンテストへの応募前期後半（7月～9月）・iOS対応・ストア公開後期前半・後半（10月～3月）一年間の流れ（課題研究②）

Slide 18

Slide 18 text

前期前半（アプリ設計・UI/UXデザイン作成）

Slide 19

Slide 19 text

Slide 20

Slide 20 text

コンテストへの応募（アプリ甲子園2021）「アプリ甲子園」は、次世代を担う若手クリエーターの発掘と健全な育成支援を目的として、 2011年より開催しているスマートフォン向けアプリ開発コンテストです。過去の応募総数は1,300作品を超えており、全国の中学生と高校生が開発した、iPhoneや Android向けのスマートフォンアプリ（タブレット向けも含む）から、優秀な作品を選出し表彰されます。

Slide 21

Slide 21 text

コンテストへの応募（アプリ甲子園2021）総合順位 3位＆技術賞を獲得！プレゼンの様子はYouTubeで見れます https://youtu.be/JblLFCS-Eqw

Slide 22

Slide 22 text

Slide 23

Slide 23 text

後期前半 ~ 後半（iOS対応・ストアへの公開）

Slide 24

Slide 24 text

使用技術

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

MVVM Provider 5.0.0 sqflite 6.0.0 speech_to_text 4.2.1 GitHub Actions (CI/CD) DB接続音声認識原稿を取得変更を監視テスト配布配布を自動化音声データ送信

Slide 27

Slide 27 text

GitHub Actions (CI/CD) テスト配布配布を自動化

Slide 28

Slide 28 text

技術的課題① 音声認識における工夫

Slide 29

Slide 29 text

実際の文章吾輩は猫である。名前はまだ無い。認識した文章吾輩はネコである。名はまだ無い。

Slide 30

Slide 30 text

1. 文章を区切る形態素解析吾輩は猫である。 N-gram (n=2) 吾輩は猫である。吾輩 | は | 猫 | で | ある | 。吾輩 | 輩は | は猫 | 猫で | であ | ある | る。吾輩 | は | ネコ | で | ある | 。吾輩 | 輩は | はネ | ネコ | コで | であ | ある | る。メリット: 精度が良いデメリット: 容量が大きい＆速度の低下メリット: 高速＆お手軽デメリット: 形態素解析に比べると精度低

Slide 31

Slide 31 text

2. 漢字をひらがなに変換実際の文章吾輩は猫である。認識した文章吾輩はネコである。わがはいはねこである。ルビ振りWeb API

Slide 32

Slide 32 text

技術的課題② 端末別の対応

Slide 33

Slide 33 text

Flutterについて（React Nativeと比較） iOSのモジュール呼び出し Androidのモジュール呼び出し Skia Graphics Engineで描画

Slide 34

Slide 34 text

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前は吾輩は猫である。名前はまだ無い。どこで生れ吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。経過時間 (秒)

Slide 35

Slide 35 text

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。吾輩は猫である。

Slide 36

Slide 36 text

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前は吾輩は猫である。名前はまだ無い。どこで生れ吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。話すときの間隔が0.5秒以上空いたら更新話すときの間隔が0.5秒以上空いたら更新

Slide 37

Slide 37 text

音声認識アルゴリズム改善前

Slide 38

Slide 38 text

音声認識アルゴリズム改善後

Slide 39

Slide 39 text

技術的課題③ 原稿の縦書き

Slide 40

Slide 40 text

既存の縦書きプラグイン（mongol）

Slide 41

Slide 41 text

既存の縦書きプラグイン（mongol） mongolの概要サードパーティ製の縦書きプラグイン。モンゴル語を想定ただ日本語の場合だと... ・書式の方向が逆・CJK文字（中国語・日本語・韓国語）の記号に非対応日本語の縦書きアルゴリズムを自作

Slide 42

Slide 42 text

縦書きアルゴリズムの自作 1. 縦と横の枠組みの数を求める 2. 文字の位置 × フォントサイズから全体の座標を求める 3. 求めた座標上に1文字ずつ配置する 4. 縦書き時に回転する文字を置き換える例) 「」, ー, 【】, <> Flutterで日本語の縦書きを実現する – Qiita https://qiita.com/sakusaku3939/items/64d453f4cf4be875aa67

Slide 43

Slide 43 text

その他の作業

Slide 44

Slide 44 text

アプリの英語対応 1. アプリ内のボタン 2. 説明文 3. サンプルテキストの変更日本語の場合 ⇒『吾輩は猫である』英語の場合 ⇒『Lorem ipsum』

Slide 45

Slide 45 text

アプリの英語対応言語別のファイルに分割

Slide 46

Slide 46 text

タブレット対応発表画面 ⇒ 文字の大きさ、メニューの調整原稿管理画面 ⇒ 縦3列に変更

Slide 47

Slide 47 text

まとめ一年間の流れプロトタイプ作成（Adobe XD） → 開発作業（Flutter） → ストア公開技術的改善・音声認識精度の改善例）N-gramによる文字の分割、ひらがなへの変換など・端末別の対応（iOS・Android）・縦書きアルゴリズムの自作

Slide 48

Slide 48 text

まとめ今後の課題・プレゼンを行う場所よって上手く認識されないことがある例）大きなホールでマイクをつけて喋る環境、雑音が多い環境・原稿の編集機能の充実例）元に戻す / やり直し機能、マークダウン記法による編集

Slide 49

Slide 49 text

ご清聴ありがとうございました Presc