2021 年度
卒業論文

LINE アプリと AI を用いた地方創生の試み

辻本 天翔(学籍番号：182C3082)

2022 年 2 月 14 日

九州工業大学

情報工学部

物理情報工学科

指導教員：小田部

荘司

教授

目次
第1章

序論

1

1.1

はじめに . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

研究背景 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.3

本研究の目的 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

概要

3

2.1

切り取って文字起こしばりぐっどくん . . . . . . . . . . . . . . .

3

2.2

スーパー DX . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

準備

6

3.1

研究環境 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.2

LINE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.3

JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93.4

GCP (Google Cloud Platform) . . . . . . . . . . . . . . . . . . .

9

切り取って文字起こしばりぐっどくん

11

4.1

開発の概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

4.2

アーキテクチャ . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

4.3

切り取り処理 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

4.4

あいさつメッセージ . . . . . . . . . . . . . . . . . . . . . . . . .

15

4.5

結果及び考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

スーパー DX

18

開発の概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

第2章

第3章

第4章

第5章

5.1

i

5.2

アーキテクチャ . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

5.3

LIFF 画面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

5.4

結果及び考察 . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

結論

26

第6章
謝辞

28

研究業績

29

参考文献

30

引用

31

ii

図目次
2.1

切り取って文字起こしばりぐっどくんのチャット画面 . . . . . .

4

2.2

スーパー DX アプリの Web ページ画面 1 . . . . . . . . . . . . .

4

2.3

スーパー DX アプリの Web ページ画面 2 . . . . . . . . . . . . .

5

2.4

スーパー DX アプリ稼働の様子 . . . . . . . . . . . . . . . . . .

5

3.1

ばりぐっどくんキャラクター画像 . . . . . . . . . . . . . . . . .

7

4.1

切り取って文字起こしばりぐっどくんのアーキテクチャ . . . . .

12

4.2

切り取って文字起こしばりぐっどくんのあいさつメッセージ

. .

16

5.1

スーパー DX のアーキテクチャ . . . . . . . . . . . . . . . . . .

19

5.2

スーパー DX Web ページ画面遷移図（初期案）. . . . . . . . .

21

5.3

スーパー DX Web ページ画面遷移図（最終案）. . . . . . . . .

22

iii

表目次
5.1

スーパー DX アンケート結果の一部 . . . . . . . . . . . . . . . .

iv

24

第1章

序論

1.1 はじめに人工知能, IoT (Internet of Things) といった技術革新は近年, 急速に進展し, 第 4次産業革命と呼ばれるほどである. 現在の第 4 次産業革命において, 既に多くの高度な IT 技術が登場しているが, 非技術者はその大部分を知らない, ないしは使うことができない. 今後は, このような既に存在する技術について, 非技術者でも安易に利用できるような環境を整えることが重要となってくる.

1.2 研究背景株式会社 SCC（西海クリエイティブカンパニー）は, 長崎県の住民や店舗における様々な生活上の相談を募っており, 既存の IT 技術によって解決が可能な問題については, これを実現するという活動を行っている. 本研究では, この活動に参加し, アプリ開発等によって諸問題の解決を試みる.

1.3 本研究の目的
SCC に様々な相談が寄せられるなかで, 本研究室は• 既存の文字認識アプリの派生開発• 地方スーパーマーケットにおける DX (Digital Transformation) の促進の二つに着目した.
1

本学の卒業生である兵頭悠生氏と SCC によって共同開発されたアプリの一つに「文字起こしばりぐっどくん」がある. このアプリは入力した画像内の全ての文字を出力するというものだが, その性質上, 使用者の意図していない部分の文字まで出力してしまう. この点を解決すべく, 画像内の任意の領域のみを文字起こしできるような派生アプリを開発した.
また, SCC は民間企業を実証場としてプロジェクトを興すということに取り組んでいる. この活動について, 長崎県大村市にあるスーパーマーケット「かとりス
トア」から参加申請があった. かとりストアを実証場として, 近付いた商品棚に応じて料理レシピを画面に表示するアプリを開発した.

2

第2章

概要
開発した二つのアプリそれぞれについて, 概要を以下に示す.

2.1 切り取って文字起こしばりぐっどくん
切り取って文字起こしばりぐっどくんとは, 既存の文字認識アプリ「文字起こ
しばりぐっどくん」に機能を追加した派生アプリである.
文字起こしばりぐっどくんはコミュニケーションアプリ「LINE」上のチャッ
トボットとして稼働しており, 画像を送信すると, その画像に含まれる全ての文字を認識し, 返信する. これに機能を追加した本アプリは, 画像の送信前に任意の領域を線で囲むことで, 領域内の文字のみを認識することができる. チャット画面のスクリーンショットを図 2.1 に示す.

2.2 スーパー DX
スーパー DX とは, スーパーマーケット「かとりストア」における DX 実証実
験の総称である.

LINE アプリ上で稼働する Web ページを開発し, 専用のタブレット端末をショッピングカートに備え付けることで来店客の使用を可能とした. 端末が特定の商品棚に近付くと, その商品に対応した料理レシピを表示する. Web ページのスクリーンショットを図 2.2, 2.3, 実際に稼働している様子の写真を図 2.4 に示す.

3

図 2.1 切り取って文字起こしばりぐっどくんのチャット画面

図 2.2 スーパー DX アプリの Web ページ画面 1

4

図 2.3 スーパー DX アプリの Web ページ画面 2

図 2.4 スーパー DX アプリ稼働の様子

5

第3章

準備

3.1 研究環境
3.1.1 株式会社 SCC（西海クリエイティブカンパニー）
株式会社 SCC とは, 長崎県西海市の地域商社である [1]. SCC は, 日常生活上の相談を募っており, IT 技術によって解決が可能な問題については, これを解決するという活動を行っている. 本稿におけるアプリは全て SCC と共同開発したものである. SCC は広報や諸費用の負担, 本研究室はアプリ開発といった分担で研究を進めた.

3.1.2 ばりぐっどくん
ばりぐっどくんとは, 西海市のローカルメディア「VARYGOOD（ばりぐっど）」のマスコットキャラクターである. キャラクター画像を図 3.1 に示す.
ばりぐっどくんはご当地キャラクターのような役割を果たしているとともに,「○○ばりぐっどくん」と称して様々なサービス名やアプリ名となっている. 本稿における「文字起こしばりぐっどくん」,「切り取って文字起こしばりぐっどくん」もその一例となる.

3.1.3 文字起こしばりぐっどくん
文字起こしばりぐっどくんとは, 本学の卒業生 兵頭悠生氏によって開発された
文字認識アプリである [2]. LINE アプリ上のチャットボットとして稼働しており,
6

図 3.1 ばりぐっどくんキャラクター画像

画像を送信すると画像内の文字がテキスト化されて返信される. 市役所の事務作業等, 紙に書いてある文字をテキストデータに起こすといった単純作業を簡略化するために開発された. 本稿執筆時点で登録ユーザー数は 21 万人を超えており,その高い需要が伺える. このような文字認識アプリ自体は以前から存在していたが, 広く普及している LINE というプラットフォーム上のアプリとして公開されることで登録ユーザー数が増加したと考えられる.
このアプリは性質上, 使用者の意図していない部分までテキスト化することがある. 例えば, 書類をテキスト化する際に, 隣に置いていたキーボードまで検知してしまうということが起こりうる. 本研究では, こうした問題の解決に着手した.

3.1.4 かとりストア
かとりストアとは, 長崎県大村市のスーパーマーケットである. スーパー DX の実証場として, かとりストアの店舗が提供された.

7

3.2 LINE
LINE とは, 無料でユーザー同士がチャット・音声通話・ビデオ通話等を行える
コミュニケーションアプリである. 2011 年 6 月にサービスを開始して以来, 世界

230 以上の国と地域で利用されるほど普及している. 日本国内の利用者はおよそ8900 万人である [3].
3.2.1 LINE 公式アカウント

LINE 公式アカウントとは, 企業や店舗, 公的機関等が主に運営している LINE
アカウントである. 作成されてすぐの LINE 公式アカウントは「未認証」として扱われ, LINE の審査に申請して, これに合格することで「認証済み」となる. 認証
されたアカウントは LINE 上の検索結果に表示されるようになり, ユーザーの目に止まりやすくなる.
本研究では, 切り取って文字起こしばりぐっどくん, スーパー DX の両方でLINE 公式アカウントを作成している. 本稿執筆時点でどちらも未認証である.
3.2.2 LIFF (LINE Front-end Framework)

LIFF とは, LINE が提供する Web アプリのプラットフォームである. このプ
ラットフォームで動作する Web アプリを, LIFF アプリと呼ぶ. LIFF アプリはユーザー ID 等, ユーザーの LINE アカウント情報を取得することが可能なため,各人に合ったサービスを提供することができる [4].
本研究では, スーパー DX における Web ページが LIFF アプリにあたる. 端末
ごとに受信するビーコンが異なるため, LIFF アプリによってユーザーごとに表示を切り替えている.

3.2.3 LINE Beacon

LINE Beacon とは, LINE アプリに備わっている機能の一つである. 周囲のビーコン（Bluetooth 発信機）から発信されるメッセージや電子情報を, LINE 公式ア
カウントを経由して受信することができる.
8

本研究では, スーパー DX において, 商品棚に設置したビーコンの受信に用いている.

3.3 JavaScript
JavaScript とは, プログラミング言語の一つである. オブジェクト指向スクリプ
ト言語として知られている. 主に, クライアントサイドである Web ブラウザ上で使用されるが, Adobe Acrobat や後述する Node.js 等, 多くの非ブラウザ環境でも使用されている [5].
本研究では, スーパー DX における Web ページ制作に使用している. 切り取って文字起こしばりぐっどくんでも使用するが, 用途が異なるため後述する.

3.3.1 Node.js

Node.js とは, JavaScript をクライアントサイドだけでなく, サーバーサイドでも使用可能にできるフレームワークである [6].
本研究では, 切り取って文字起こしばりぐっどくん制作におけるサーバーサイ
ド開発に使用している.

3.3.2 Canvas API

Canvas API とは, Javascript と HTML において画像を描画する機能を提供する
API (Application Programming Interface) である. 他にも, アニメーション, ゲーム
グラフィック, データの可視化, 画像加工, リアルタイム動画処理等に使用することができる [7].
本研究では, 画像をピクセル単位で編集できる ImageData オブジェクトを利用し, 切り取って文字起こしばりぐっどくんの制作を行った.

3.4 GCP (Google Cloud Platform)
GCP とは, Google が提供しているクラウドサービス群を利用するための環境である. 様々な管理ツールに加え, モジュール化されたデータベースや機械学習と9いった API が提供されている [8].
本研究に用いるサービスを以下に示す.

3.4.1 Cloud Vision API

Cloud Vision API とは, 画像認識 AI を利用できる API である. 入力した画像について, ラベル付けやテキストの検知等を行い, 様々な情報を取り出すことができる.
本研究では, 画像内のテキストを検知して文字列データとして返す機能を利用し, 切り取って文字起こしばりぐっどくんの制作を行った.

3.4.2 GAE (Google App Engine)

GAE とは, Web アプリをホスティングするためのサーバーレスプラットフォー
ムである. Google の提供するサーバーに Web アプリをアップロードすることで,継続的な公開が可能となる.
本研究では, 切り取って文字起こしばりぐっどくんをインターネット上に公開するために使用している.

3.4.3 Cloud Firestore

Cloud Firestore とは, GCP におけるアプリ開発に対応した拡張性・リアルタイ
ム性を有したデータベースである.
本研究では, スーパー DX において利用した. 各端末がどのビーコンを受信しているかという情報や, 料理レシピのデータを格納している.

3.4.4 Firebase HostingFirebase Hosting とは, Web アプリ, 静的・動的コンテンツ等, 様々なコンテンツのホストに対応したホスティングサービスである. Google の提供するサーバーに Web アプリをアップロードすることで, 継続的な公開が可能となる.
本研究では, スーパー DX において利用し, 専用の Web ページをインターネッ
ト上に公開している.
10

第4章

切り取って文字起こしばりぐっどくん

4.1 開発の概要
切り取って文字起こしばりぐっどくんとは, 既存の文字認識アプリ「文字起こ
しばりぐっどくん」に機能を追加した派生アプリである.

3.1.3 節で示したように, 文字起こしばりぐっどくんは画像内の全ての文字をテキスト化するため, 使用者の意図していない文字まで認識してしまうということが起こりうる. こうした問題を解決すべく機能を追加した本アプリは, 画像の送信
前に任意の領域を線で囲むことで, 領域内の文字のみを認識することができる.
ユーザーが画像上に線を描画するには, LINE アプリ上の画像加工機能（落書き機能等とも呼ばれる）を用いるように促す. これにより, 線の色（RGB 値）が一意に定まるため, 後述する二値化処理において線を抽出することができる.
使用した環境, サービスは以下の通りである.

LINE 公式アカウント

LINE 上のチャットボットとするためのアカウント

Node.js (JavaScript)

記述するプログラミング言語

Canvas API

画像編集（切り取り処理）を扱うための API

Cloud Vision API

文字認識 AI を扱うための API

GAE

アプリを公開するためのサーバー

11図 4.1 切り取って文字起こしばりぐっどくんのアーキテクチャ

4.2 アーキテクチャ
前節で示した環境, サービスを組み合わせたシステム構成を図 4.1 に示す. 数字
は処理の順番を表す.
① 公式アカウント「切り取って文字起こしばりぐっどくん」宛てにユーザーが画像を送信すると, そのユーザー情報が GAE に送信される. 画像送信の直前に加工画面が現れるため, ここでユーザーは切り取りたい部分を「赤」の線で囲む.
また, 画像データは LINE 社サーバーに送信される.
② GAE から LINE 社サーバーに画像データを要求する. ①で得られたユー
ザー情報から参照している.
③ LINE 社サーバーから GAE に画像データが送信される.
④ ユーザーが線を描画している場合は画像の切り取り処理を行う. 詳しい処理は 4.3 節で後述する.
⑤ 切り取った画像, もしくは元画像を Cloud Vision API（画像認識 AI）に送
12

信する.
⑥ 画像認識によって文字起こしされたテキストデータが GAE に返される.
⑦ 得られたテキストデータを, 公式アカウントのメッセージとして LINE 上に返信する.

4.3 切り取り処理
前節の④で行っている画像の切り取り処理について詳しく示す.
切り取り処理では, Canvas API の機能のひとつである ImageData オブジェクトを用いて, ピクセル単位での画像編集を行った. 処理の過程は以下の通りである.

1. 二値化
2. Seed Fill (バケツ塗りつぶし)3. マスク
それぞれの詳しい処理について以下に示す.

4.3.1 二値化
あらかじめ設定しておいた特定の RGB 値の部分を赤色に, そうでない部分を白色に変換する. これにより, 画像内の色は二種類のみとなる. 赤色の部分が, 使用者の書いた線を抽出したものである.
ユーザーは LINE アプリ上の画像加工機能を用いて線を描画するため, 二値化で抽出すべき色は一意のものとなっている.
また, 従来通りの挙動を行うために, 線の描画が少ない場合は切り取り処理を中断し, 元画像を文字起こしするようにしている. 二値化の処理を進めると同時に,
特定の RGB 値のピクセル数を数えあげており, その数が閾値を下回るなら切り取り処理を中断する.

4.3.2 Seed Fill (バケツ塗りつぶし)
画像の端を起点として, 黒色で Seed Fill (バケツ塗りつぶし) を行う. これにより, 画像内の色は三種類となる. 使用者の書いた線の外側の領域のみが黒く塗りつ13

ぶされる.

4.3.2.1

最も単純な Seed Fill アルゴリズム

まず, Seed Fill 処理を実装するため以下の再帰的なアルゴリズムを用いた.

1. 塗りつぶしの開始点である 1 ピクセルを指定色で塗る.
2. 塗った点の周囲 4 方向（上下左右）の座標をスタックに格納する.
3. スタックから座標を 1 つ取り出し, 指定色でなかった場合のみ, これを開始点として 1. 以降の処理を繰り返す.

4. スタックが空になった時点で塗りつぶしが完了している.
このアルゴリズムを用いたところ, 画像送信からテキスト返信までの時間はおよそ 30 秒と, 従来の文字起こしばりぐっどくんが 5 秒未満であるのに対して, かなり遅い結果となった. ピクセル単位で処理を行っていること, また, 同じ座標を重複してスタックに格納する確率が高いことが原因だと考えられる. 後者の原因について, アルゴリズムを変更し改善を試みる.

4.3.2.2

Scanline Seed Fill アルゴリズム

座標の重複を軽減するため, 以下の再帰的なアルゴリズムを用いた. 単純なピク
セル単位ではなく水平線単位での塗りつぶしを行っている.

1. 塗りつぶしの開始点から左右方向に走査し, 指定色, もしくは画像の端に当たるまで指定色で塗りつぶす.

2. 1. で描画した線分の 1 ピクセル上段の線分について, 最も左側の点から右方向に走査し,「指定色でないピクセルが連続した部分」をそれぞれスタックに格納する. 格納するのは該当部分の最も右側の点の座標である.

3. 1. で描画した線分の 1 ピクセル下段の線分について, 2. と同様の処理を行う.

4. スタックから座標を 1 つ取り出し, 指定色でなかった場合のみ, これを開始
14

点として 1. 以降の処理を繰り返す.

5. スタックが空になった時点で塗りつぶしが完了している.
これは Scanline Seed Fill アルゴリズムと呼ばれ, 単純なものと比較して 2 倍から 8 倍効率が良いとされている.
このアルゴリズムを用いたところ, 画像送信からテキスト返信までの時間は 10秒未満となった. 従来の文字起こしばりぐっどくんと比較すれば 2 倍ほどの時間を要しているが, ユーザーが不自由なくアプリを使用できる程度の応答時間である.

4.3.3 マスク
元の画像に, Seed Fill を行った画像の黒色の部分のみを重ねる. これにより, 線の内側の領域のみが残ることとなる.

4.4 あいさつメッセージ
あいさつメッセージとは, チャットボットとして LINE 公式アカウントを動作させるときの機能のひとつである. そのアカウントをユーザーが「友だち追加」
した際に自動的に送信される定型文をあらかじめ設定しておくことができる.
本アプリでは,「友だち追加」時に• チャットボットの使い方を簡単に説明するテキストメッセージ• チャットボットを実際に使っている様子の写真を並べたカードタイプメッ
セージを送信することとした. カードタイプメッセージは数枚の写真で構成されており,
左右にスクロールすることでユーザーは全て見ることができる. チャット画面を図 4.2 に示す.

15

図 4.2 切り取って文字起こしばりぐっどくんのあいさつメッセージ

4.5 結果及び考察
まず, 文字起こしばりぐっどくんと同様の動作に成功した. 線が描画されていない画像を送信した場合は, 従来の挙動通り画像内の全ての文字がテキスト化される.
次に, 赤い線で任意の領域を囲んで送信した場合は, その領域内の文字のみをテキスト化することに成功した. これは, 閉領域が複数ある場合でも同様に成り立った.
線の描画の有無にかかわらず切り取り処理の一部は行われるため, 返信までの時間は従来のものと比べて 2 倍ほど必要となる. しかし, 従来アプリは 5 秒未満,
本アプリは 10 秒未満ほどであるため, 遜色はないと言えるだろう.
16また, SCC 職員の方々に聞いたところ, あいさつメッセージによる使用方法の説明は好評であった. 実際に使用中の写真を用いているため, 視覚的情報から理解が進みやすいのだと思われる.
懸念点として, 元の画像に「赤」に近い色が含まれている場合, 誤作動を起こす
ことが考えられる. これを解決するには「赤」以外の色にも対応させればよいだ
ろう. ユーザーからのメッセージに応じて切り取る色を変更する機能を追加すれ
ば, 文字認識が上手くいかなかった際, 適宜ユーザー側から切り取る線の色を切り替えることができる.
今後は, こうした機能改善の開発を進めるとともに, LINE 認証済アカウントの審査に通過することを目指す.

17

第5章

スーパー DX
5.1 開発の概要
SCC は民間企業を実証場としてプロジェクトを興すということに取り組んでいる. 今回は, スーパーマーケット「かとりストア」側から参加申請があって DXの実証実験を行う運びとなった.

LINE アプリ上で稼働する Web ページを開発し, 専用のタブレット端末をショッピングカートに備え付けることで来店客の使用を可能とした. 端末が特定の商品棚に近付くと, その商品に対応した料理レシピを画面に表示する. また, 近
くに商品棚がない場合も, 料理レシピをランダムに複数表示する.
本研究室はフロント画面・データベースの開発, 小田部荘志氏はビーコン関連の開発, 池原陽大氏は全体の指揮, SCC は広報や諸費用の負担, かとりストアは実証場の提供といった分担でアプリを開発した.
使用した環境, サービスは以下の通りである.

LINE 公式アカウント

LINE 上のチャットボットとするためのアカウント

LIFF

LINE 上でのみ動作する専用 Web ページ

LINE Beacon

LINE 上で動作するビーコン受信機能

JavaScript

記述するプログラミング言語

Cloud Firestore

各端末の位置情報を格納するためのデータベース

Firebase Hosting

LIFF （Web ページ）を公開するためのサーバー

18図 5.1 スーパー DX のアーキテクチャ

5.2 アーキテクチャ
前節で示した環境, サービスを組み合わせたシステム構成を図 5.1 に示す. 数字
は処理の順番を表す.
⓪ 来店客に端末付きショッピングカートを渡す前に, 専用 Web ページである

LIFF をあらかじめ開いておく. この時点で LIFF は LINE ユーザー ID を取得するため, Cloud Firestore の各ユーザーデータを参照できるようになる.

LIFF は, 常にそのユーザーデータをリアルタイム監視し, 変更があった場
合, すなわち, 新しくビーコン ID を取得した場合には, ビーコン ID に応じて画面表示を変える.
① 端末が商品棚のビーコンに近付くと LINE アプリ上の LINE Beacon 機能がビーコン ID を受信する.
② ビーコン ID は LINE 公式アカウントのメッセージとして送信される.
③ LINE 公式アカウントは, 受け取ったビーコン ID と端末の LINE ユーザー

ID を Cloud Firestore に送信する. Cloud Firestore には, ユーザー ID とビー

19

コン ID の組み合わせが格納される.
④ LIFF はユーザー ID を常に監視しているため, ③で送信されたビーコン ID
を即座に検知する.
⑤ ビーコン ID を検知した LIFF は, ビーコン ID を用いて対応する商品の種類を検索し, 取得する. 商品棚データベースには, 例えば「野菜類商品の棚には
ビーコン１」「肉類商品の棚にはビーコン２」のように商品棚に設置されたビーコンの ID が格納されている.
⑥ 得られた商品の種類を用いて, 対応する料理レシピを検索し, 取得する. 料理
レシピデータベースには,「野菜類」や「肉類」といった種類ごとに料理レ
シピの名前・写真・素材・URL（楽天レシピ）が複数格納されている.
取得した料理レシピを LIFF 画面に表示する.

5.3 LIFF 画面
専用 Web ページである LIFF 画面について詳しく示す.
まず, 初期画面と料理レシピ画面を作成した. 遷移する二つの画面を図 5.2 に示す. 以下に, 図内の丸数字が指す内容を説明する.
① 初期画面. LIFF 画面を開いた時点ではこの画面が表示される.
② 料理レシピ画面. 端末が特定の商品棚（ビーコン）に近付く, もしくは履歴の写真をタップすると対応する料理レシピを表示する.
③ これをタップすると①の画面に戻る.
④ 料理レシピの名前・写真・材料リストを表示している. レシピの内容は, Web
サイト「楽天レシピ」から引用したものをあらかじめデータベースに格納している.
⑤ LIFF 画面を開いてから表示されたことのある料理レシピの写真を, 履歴として表示している. 写真をタップすると, その料理レシピの②の画面を表示
する.
⑥「詳しいレシピはこちら」ボタン. これをタップすると, 引用元である料理レ
シピの「楽天レシピ」ページが開かれる.

20

⑦ スクロールボタン. 画面の上下幅が足りず, 表示がはみ出す場合にのみ表示
され, 表示が下に続くことをユーザーに示す. また, これをタップすると, 画
面の最下までスクロールされる.

図 5.2 スーパー DX Web ページ画面遷移図（初期案）

21

当初はこの画面で実証実験を行う予定だった. しかし, ビーコンを受信するまで
初期画面から切り替わらないこと, また, データベースをさらに有効活用できることから, ①の画面を以下のように変更した.
遷移する二つの画面を図 5.3 に示す. また, 図内の丸数字が指す内容を説明する.

図 5.3 スーパー DX Web ページ画面遷移図（最終案）

22

①〜⑦ 初期案と同じ仕様である.
⑧ 初期画面①に料理レシピのリストを追加した. これらはデータベースからランダムに複数取得しており, 左右にスクロールすることでさらに表示することができる.
これをタップすると, その料理レシピの②の画面を表示する.
最終的には図 5.3 の画面遷移を行う仕様で, かとりストアにて実証実験を行った. 初期案のものと比較すると, 初期画面の機能が増えている. しかし, 画面内の情報が多いことでユーザーに混乱が生じることも考えられる. 実際の来店客の反応等は次節で述べる.

5.4 結果及び考察
まず, 想定していた通りの動作は実現することができた. ショッピングカートに専用の端末を設置し, 画面には近くの商品棚に応じて料理レシピが表示される.
次に, かとりストアの店舗で実証実験を行った. 実際の来店客にもアプリを使用してもらい, アンケートに回答してもらった. アンケート結果の一部を表 5.1 に示す.

23

表 5.1 スーパー DX アンケート結果の一部

おすすめメニ

おすすめメニ

今後もおす

アプリ付きの

この試みに関お客様

ューの内容にューカートのすめメニュー

カートについするご希望やのご年ついての感想改善してほしカートを利用て の 感 想 を 、 自由なご感想

齢を教を、あてはまいところを全

したいと思いあてはまるもを教えてくだ

えてくるものをいくて教えてくだ

ますか？

のをいくつでさい。

だ

つでもお選びさい。

もお選びくだ

ください。

さ

い。

さい。

買い物の参考もっといろい利用したいと楽しく使えた

高齢者向けのに な っ た, た

ろな情報（カ思う

くさんメニ

ロリー、和洋もあればよか

ューがあってなどのジャンった

良かったルなど）を出50 代

メニューとかしてほしい
参考にはなら

画面が見づら

わからない

よくわからな

なかった

い見づらかった

買い物のジャ

もっと改善さ

よくわからな

マにならないれるなら利用いようにしてほしたいと思う

60 代

い

40 代

し い, 画 面 が見づらい物にぶつかり70 代

マにならないそうでハラハ以上ようにしてほラ し た, 買 い

しい

物中はあんまあんまりよく買い物のジャ

見なかった

わからない

り画面を見な
かった24

好意的な意見もあったが, その大半は「よく分からない」というものであった.
専用 Web ページの情報が多く, 加えて, 料理レシピは Web サイト「楽天レシピ」
から引用しているだけであるため, データの整頓が十分でなかったことが考えられる. また, 地方の店舗である以上, 来店客の年齢層が高く, 電子端末の操作に疎いといったことも一因だと思われる.
回答の中には,「現在位置を表示してほしい」「高齢者向けのメニューも欲しい」
といった新鮮な意見もあった. こうした新しい視点の意見も取り入れるとともに,不評であった部分の改善は, 今後の課題とする.
また, 来店客からすれば普段通り来店したところに, 突然, 端末付きショッピン
グカートを勧められるため, あまり手にとってもらえなかったという問題もあった. これは技術的課題ではないが, 顧客側の立場から考えて行うといった企画, 宣伝も必要である.

25

第6章

結論
本研究では, 西海市の地域商社である西海クリエイティブカンパニーと共同で,以下のアプリ制作, 活動を行った.

• 切り取って文字起こしばりぐっどくん• スーパー DX
切り取って文字起こしばりぐっどくん制作では, 既存の文字認識アプリ「文字起こしばりぐっどくん」の派生開発を行った. 任意の領域を選択できる機能を追加し, 意図しない部分のテキスト化を防ぐことができた. その上で従来通りの機能は失っておらず, 切り取り処理に伴って発生する処理時間の遅れも, 想定の範疇内に収まっている.
また,「あいさつメッセージ」による使用方法の解説も, 写真・カードタイプメッ
セージを有効活用したものが実現でき, 実際の使用者にも好評であった.
今後の課題はスーパー DX では, スーパーマーケット「かとりストア」において DX 実証実
験を行った. ショッピングカートに専用の端末を設置し, 近付いた商品棚（ビーコン）に応じて料理レシピを画面に表示することとした.
制作したアプリを実際の来店客にも使用してもらい, アンケートを取ったとこ
ろ,「よく分からない」という意見が大多数であった. 来店客の高い年齢層も一因だとは考えられるが, やはり, 画面表示の整頓や, 顧客の需要を見越した企画と26

いった段階から見直していく必要があると考える.

本研究を通じて, 既存の高度な IT 技術を応用することで日常生活における多様な問題を解決することができ, また, その使い方によっては上手く成果を出しづらいということを再確認した. おそらく, 今後地域で生じる問題のその大半について, それを解決できる IT 技術は既に存在している. 重要なのは, そうした技術を見過ごさず, 常に有効活用できる機会を逃さないよう意識することである.
本研究において成果が上手く現れなかった部分の改善に着手するとともに, 新
たな問題とその解決方法を模索することに意識を向けていきたい.

27

謝辞
本研究を遂行するにあたり協力してくださった, 小田部荘司教授をはじめとした皆様に感謝申し上げます.

小田部教授からは, 常に丁寧にご指導いただきました. 研究に関しての話題では温厚に接してくださり, 精神的な重圧を感じることなく研究を続けることができました.
西海クリエイティブカンパニーの方々には, 研究の場の提供や宣伝, 進捗管理といった形でご尽力いただきました. 特に, 宮里賢史様, 星野美緒様には毎週の成果
報告会や, 長崎県訪問の際にお世話になりました.

SCC を仲介としてお会いしたエンジニアの皆様にも, 研究に関して多くの助言をいただきました. 長崎大学の池原陽大氏は日々, 公私ともに親密に接してくださり, 小田部教授のご子息, 小田部荘志様にはアプリ開発において多様な側面からの助言をいただきました. 本学部の西野颯真氏は開発技術に長け,Web ページ開発において有益な助言をいただきました.
同研究室の関係者, 特に, 同学年の橋口駿亮氏, 有田拳氏, 石井皓也氏には毎週の進捗報告をはじめとしたコミュニケーションにおいて親しく接していただき, 本研究の意欲を維持するための, 大きな手助けとなりました.

皆様に, 心より感謝申し上げます.

28

研究業績
1. 辻本天翔, “LINE で切り取って文字起こし”, SAI ZEN SEN for tech 2021
SUMMER でのプレゼン [9], 2021-7-30.

29

参考文献
• 兵頭悠生, “最新の IT 技術を駆使した地方と大学の諸問題を解決する試み”,
九州工業大学 情報工学部 卒業論文, 2020-2-17.

• “ペイント・ルーチン (1) シード・フィル アルゴリズム”, https://fussy.
web.fc2.com/algo/algo3-1.htm.

30

引用[1] “西海クリエイティブカンパニー”, http://saikaicreative.co.jp/.
[2] “文字起こしばりぐっどくん”,
https://varygoodkun.net/app/line-mojiokoshi/.
[3] “ LINE - App Store ”,
https://apps.apple.com/jp/app/line/id443904275.
[4] “LINE Front-end Framework の概要”, https://developers.line.biz/ja/
docs/liff/overview/.
[5] “ JavaScript について”, https://developer.mozilla.org/ja/docs/Web/
JavaScript/About_JavaScript.
[6] “ Node.js ® とは ”, https://nodejs.org/ja/about/.
[7] “Canvas API”,
https://developer.mozilla.org/ja/docs/Web/API/Canvas_API.
[8] “Google Cloud Platform”, https://console.cloud.google.com/.
[9] “SAI ZEN SEN for tech 2021 SUMMER”,
https://www.saizensenfortech.com/.

31