第12回 ポジティブに生きるには？
「アニマルMINTの開発 －心理学を応用した気持ちをリラックスさせるWebアプリ－」の探究活動
皆さん、こんにちは。テラオカ電子です。今回は、「アニマルMINT」というWebアプリを作った探究活動を紹介します。
皆さんは、気分が落ち込んだときどのように立ち直りますか？「ポジティブ心理学」という学問が米国で盛んに研究されています。私は、その専門家ではないので正確なことは言えませんが、興味があって色々勉強しています。書籍を読んだり、放送大学の講義を受けたりしています。そこで、人生を豊かにする、いわゆるウェルビーイング（健康・幸福・福祉）になる探究活動が良いのではないかと考えました。生徒にとっても良いし、何より自分自身にとっても良いと考えました。
ウェルビーイングを高める理論としては、M・セリグマン先生が提唱したPERMA理論や、前野隆司先生の幸せの四つの因子などがあります。そして、高める方法もたくさんあります。そこで、幸福度を高めるWebアプリを作ってみたいと思いました。最初に見つけたのは、「3 good things」というアプリです。これは、一日の終わりに、良い出来事を３つ、その理由とともに記録していくものです。似たものを作ろうと思ったのですが、ユーザーIDとログ（記録）の管理が必要なため技術的にできそうになかったので諦めました。次に、注目したのは、「MOOD MINT」というアプリです。これは、4枚の画像が表示されるのですが、その中からポジティブな写真を選ぶというものです。これならば、似たアプリができそうと考えました。今回、探究活動で開発したものは、この「MOOD MINT」を真似したものです。なんだ「パクリか」と言ってしまえば身も蓋もありませんが、実際に作るのは結構手間がかかりました。
【【自己肯定感】３good thingsを使って高める方法】
解説はこちらのサイトを参考にしてください。
アプリもあります。
【人付き合いが楽になる！スマホアプリ『Mood Mint』】
解説はこちらのサイトから
今回の探究活動は、本校2年生の3名の生徒と取組みました。彼ら彼女らは、工業クラスの生徒です。来年度、3年次に『生産技術』という科目が設定されているのですが、その1学期にプログラミングを行う予定です。そのプログラミングの教材としてWebアプリを使うのですが、この探究活動は、その準備でもあります。この3名は、教材準備を快く手伝ってくれたMission（使命感）とPassion（情熱）を持った生徒たちです。
なお、2学期は電子工作、3学期はAIの工程（作り方）を予定しています。2学期の電子工作については、第13回のブログ記事「マイコン時計の開発」で紹介予定です。また、3学期のAIの工程ついては、第14回のブログ記事「ダイスｍusicの開発」で紹介予定です。楽しみにしてください。
では、「アニマルMINTの開発 －心理学を応用した気持ちをリラックスさせるWebアプリ－」の探究活動を生徒の研究論文を引用しながら紹介します。
なお、生徒たちが、サイエンスコンテストで研究発表した内容を私が代読した形ですが、YouTubeで一般公開しています。以下のリンクから動画を視聴できます。見て頂けると後の話が良く分かると思います。
【テラオカ電子：「アニマルMINTの開発（2023）を公開します。」はこちらから】
研究の背景と目的
厚生労働省の統計では、昨年度（2022年度）の小中高校生の自殺者は、514人で過去最多であった。コロナ禍の影響もあったと考えられるが、私たちは、今、生きづらさを抱えていると言える。
一般に、高校生の生きづらさをいくつか挙げると、学業のストレス、学校内暴力やいじめ、家庭環境や個人的事情による学校生活への適応困難、容姿などのネガティブな自己イメージ、インターネットやSNSの影響などがある。
これらの課題は、大きすぎて直ちに解決することは困難なので、私たちは、普段の生活でのちょっとした気分の落ち込みを低減させることに焦点を当てた。なぜならば、課題解決においては、まずは小さな改善から始めることが大切だと考えるからだ。
気分をリラックスさせる方法には、普段持ち歩いている、いつでも使えるスマートフォンのアプリが有効ではないかと考えた。また、私は動物が好きで、いつも動物に癒されているので、動物に意識を注目させるアプリが良いのではないかと考えた。
このような時、顧問の先生から、心理学の「注意バイアス修正治療訓練」という心理療法を応用した『Mood Mint』というアプリを紹介された（図１参照）[1]。このアプリは、スマホに4枚の画像が表示され、その中からポジティブな画像を選ぶものである。私たちは、このアプリを参考に、4枚の画像から動物の画像を選ぶアプリを開発することにした。
本稿では、まず私たちが開発したアプリ、『アニマルMINT』の機能を紹介する。次に、その機能のアルゴリズムを述べる。最後に、制作したアプリについて考察し今後の課題を述べる。
本研究は、気持ちをリラックスさせるアプリ、『アニマルMINT』を一つの事例として提案することを目的とする。
アニマルMINTとは
アニマルMINTは、スマホの画面に表示される4枚の画像の内から動物の画像を選ぶWebアプリである。
１ 基本機能
機能遷移を以下に示す。
アプリのURLにアクセスすると初期画面が表示される（図２）。
次に、「次の画像へ」のボタンを押すと、4枚の画像が表示される。4枚の画像の内、3枚は飛行機、自動車、トラックおよび船の画像で、1枚が動物（猫、犬、馬および鳥）の画像である。併せて心をリラックスさせる言葉も表示される。（図３）。
次に、ユーザーは動物の画像をタップすると、画像の下部に「OK！ANIMAL」と表示され（図４）、動物以外の画像をタップすると「NG」と表示される。
次に、「次の画像へ」のボタンを押すと新しい画像が4枚表示され、同様に、動物の画像を選んでいく。これを8回繰り返す。もう一度行いたい場合は、「もう一度やる」のボタンを押す。
表示される画像において、1枚だけ「もも」のイラスト画像を挿入しておりアプリの単調さを無くす工夫も行っている。ただし、「もも」は、動物ではないので「NG」と表示される（図５）
２ 開発環境（IDE）
アプリの開発には、アシアル株式会社が提供する「Monaca Education」[2]を使った。これは、スマートフォンのアプリをWeb上で開発できる統合開発環境（IDE）である。また、このIDEは、「Web公開機能」があるため、作成したアプリをWeb上で公開して誰でもアクセスすることができる。なお、本研究で開発した『アニマルMINT』は、以下のURLまたは2次元バーコード（図６）からアクセスできる。
３ アルゴリズム
プログラムは、HTML, JS（JavaScript）, CSSで記述した３つのプログラムファイルと、画像を保存しているフォルダから構成される。画面表示の枠組みをHTMLで、動作のアルゴリズムをJSで、表示のスタイルをCSSで記述している。ここでは、JSでの動作のアルゴリズムについて記述する。
アルゴリズムの流れは以下のようになる。
１．アプリへのレスポンスがあると、動物の画像（8枚：8枚以上であっても良い）、動物以外の画像（32枚：32枚以上であっても良い）をそれぞれシャッフルする。これは、毎回違った順に画像を表示させるためである。
２．次に、シャッフルされた動物の画像の1番目、動物以外の画像から3番目までの画像を選ぶ。これら4つの画像をまとめてシャッフルする。これは、毎回違った配置で画像を表示させるためである。
３．次に、「次の画像へ」のボタンが押されると、２でシャッフルされた4枚の画像を順番に表示する。
４．次に、ユーザーが動物の画像をタップしたら、「OK！ANIMAL」と表示し、動物以外の画像がタップされたら「NG」と表示する。これは、画像の名称の違いを使って動物か動物以外かを判定させている。具体的には、動物の画像の名称には「a」の文字を含め（例えば、「a01.png、a02.pngなど」）、動物以外の画像の名称には「n」が含まれるようにし（例えば、「n01.png、n02.pngなど」）、「a」の文字が含まれれば動物、「n」の文字が含まれれば動物以外として判定表示している。併せて、画像の下部にテキストを表示する。テキストは８つ準備し、配列に格納しておく。画像の表示回数に対応してテキストを順に表示する。
５．次に、「次の画像へ」がタップされると、１でシャフルした動物の2番目の画像、動物以外の4番目から６番目の画像を取り出し、それらを２の手順を使って、4枚の画像にまとめシャフルして３の手順を使って表示する。これが繰り返され、8回目の画像が表示されたら終了する。「もう一度やる」のボタンが押されたら1回目から始まる。
４ プログラムの開発
使用した画像は機械学習でよく使われるデータセットである「CIFAR-10」をダウンロードした[3]。
CIFAR-10は、画像の枚数が合計 60000枚、画像のサイズが 32×32 のカラー画像である。画像の種類（クラス数）が 10 （飛行機，自動車，鳥，猫，鹿，犬，カエル，馬，船，トラック）である。画像サイズが32×32と小さいので解像度が低いが、アプリのIDEの許容容量の関係から低解像度のものを選ぶ必要があった。ちなみに、アプリの許容容量は最大50MB（3プロジェクト合計）、CIFAR-10の画像1枚は約3ｋBである。私たちは、ぼやけた画像の方が創造力をかき立てる効果があると考えている。
プログラムの基本設計は、顧問の先生が作ってくれた[4]。私たちは、画像の枚数を増やして繰り返し回数を増やすこと（4回から8回）と、表示された画像の下部にテキストを表示させる改良を行った。
私たちは、繰り返し回数を増やすために、keras.datasetsから動物と動物以外の画像をダウンロードした。ダウンロードは、Webサイトの記事[3]を参考にGoogle colaboratory上でpythonコードにより行った。なお、本論文の最後の付記にこのプログラムコードを記載している。
画像の下部にテキストを表示する関数は、ChatGPT（無料版のChatGPT 3.5）[5]を使って作成した。ChatGPTに以下のプロンプト（指示文）を投げかけた。
「スマホのアプリを開発しています。画面にテキストを表示するJSの関数を作成してください。関数の引数に表示するテキストを入れてください。また、関数の最初に前のテキストを削除するようにしてください。」
ChatGPTから以下の関数コードを得た。
function displayText(newText) {
// 既存のテキストを削除
const displayDiv = document.getElementById("displayText");
while(displayDiv.firstChild){displayDiv.removeChild(displayDiv.firstChild);
}
// 新しいテキストを表示
const textNode = document.createTextNode(newText);
displayDiv.appendChild(textNode);生成された関数をアプリのJSコードに埋め込んだ。動作させるとエラーは起こらず、正しく動作した。なお、表示させるテキストの文章は、参考図書[6]をアレンジしたり、私たちの好きな座右の銘を採用したりして作成した。また、最後に表示フォントの大きさや位置の調整を行った。ここでも、ChatGPTにCSSのコードを生成させて行った。
考察
１ プログラム作成におけるChatGPTの活用
今回、JSの関数やCSSのコードをChatGPTを使って作成した。ゼロから自分で作るとなると書籍やWebサイトを見ながら考えることになり試行錯誤が必要である。得意なプログラム言語であれば、多くのコードのレパートリーを頭の中に持っているので、短時間でコードを書くことができるが、未経験に近い状態では、ハードルが高い。
今回は、顧問の先生のアドバイスに従ってプロンプトを作成しコードを生成させ短時間でプログラムを完成させることができた。ChatGPTを使えば、レゴのように部品を使って組み立てるようにプログラムを作成できることが分かった。もちろん、正しく動作するか十分なチェック（プログラム全体として正常に動作しているかどうか）が必要である。また、どのようなプロンプトを作成すれば、ChatGPTから求めるものを引き出すことができるかは、プログラムの全体的な知識がないと難しいと言える。ちなみに、顧問の先生もWebアプリのプログラムの経験が浅いので、配列のシャッフルの関数などChatGPTを使ってアプリの基本設計を行ったとされる。
２ アプリの「注意バイアス修正治療訓練」の適応性
本アプリは、注意バイアス修正治療訓練を応用したと言われる、『Mood Mint』を参考に制作した。私たちが開発した、『アニマルMINT』も注意バイアス修正治療訓練を応用したアプリになるのかを検証するために、ChatGPTに以下の問いかけを行った。
「スマホに4つの画像を出します。その1つは動物で、他の3つは乗り物です。ユーザーは、4つの画像のなかから動物を選びます。この動作を繰り返し行います。このようなアプリには、心理学の「注意バイアス修正訓練」があると考えますか？」
これに対し、ChatGPTから以下の回答を得た。
「上記のアプリについて、それが心理学の「注意バイアス修正訓練」の一形式であるとは言い切れません。なぜなら、このアプリは単純な画像選択タスクを提供しているだけで、認知バイアスの修正に直接的に関係しているわけではないからです。
一方で、心理学の「注意バイアス修正訓練」には、さまざまなタイプがあり、例えば、刺激の認識や反応時間などをトレーニングするものもあります。このようなトレーニングは、特定の種類の認知バイアスを修正するのに役立つ可能性があります。ただし、注意バイアス修正訓練の有効性については、さまざまな研究結果があり、明確な結論が得られているわけではありません。
したがって、アプリが心理学の「注意バイアス修正訓練」として機能するためには、より複雑なタスクが必要であり、それが注意バイアス修正にどのように関連しているかを説明する必要があります。」
さらに、ChatGPTに
「上記のアプリで、動物に注目することにより、動物への関心が高まり、心が落ち着いたり、豊かになったりする感情を誘発することに繋がりますか？」と問いかけたら、ChatGPTからは、
「上記のアプリで、動物に注目することにより、動物に関心が高まることや、心が落ち着いたり豊かになる感情を誘発することがあるかもしれませんが、それが必ずしも心理学的な「注意バイアス修正訓練」として機能するわけではありません。」
「注意バイアス修正訓練」は、特定の認知バイアスを修正するために設計されたトレーニング方法であり、それが心理的な効果をもたらすためには、より専門的なアプローチが必要です。例えば、特定の種類の刺激を提示し、それらに対する反応を調整することで、認知バイアスを修正することができます。
ただし、動物に関心を持つことや、動物の画像に注目することが、心理的な効果をもたらす可能性はあります。動物には、自然や生命力など、ポジティブなイメージがある場合があります。また、動物には、癒しやリラックス効果があると言われています。そのため、動物をテーマにしたアプリや画像を見ることが、ストレス緩和やリフレッシュ効果をもたらす場合があります。
ただし、心理学的な効果を追求する場合は、より専門的な方法を用いることが望ましいです。」
とあり、本アプリの「注意バイアス修正治療訓練」の根拠に関して否定的な回答であった。ChatGPTの見解では、より複雑な課題が必要で各課題が注意バイアス補正にどのように関連しているかを解明する必要がある。また、「動物」に着目する点に関して、「注意バイアス修正訓練」は、特定の認知バイアスを修正するために設計されたトレーニング方法なので、「動物」という漠然としたもので言い切ることは出来ないという指摘であった。
本件に関して、心理学の専門知識がないと判断できないが、私たちは、本アプリが「注意バイアス修正訓練」を応用したものだと言うにはさらなる研究が必要と考えた。ただし、気持ちをリラックスさせる効果が全くないとは考えていないので（ChatGPTも全否定していない）、今後、実際に色々な方に使ってもらいその感想を分析していく。
３ 「デザイン思考」による更なる改良
デザイン思考では、プロダクトやサービスの開発は、開発者側が考えたものを作るのではなく、ユーザーが欲しいもの、使いやすいものを開発することが重要だとする。ものがあふれる現代では、従来の仮説を設定して商品を発売し、効果を検証するという「仮説検証型」のアプローチでは、企業は成長ができないとされる。そのため、このデザイン思考は、ユーザーにより良いプロダクトやサービスを提供するための開発手法として広く使われている[7]。
デザイン思考のプロセスは、「観察・共感」、「定義」、「概念化」、「試作」および「テスト」という5段階に分けられる。私たちは、今後、さらにアニマルMINTの改良を行っていくため、デザイン思考の「共感」と「定義」を再検討することにした。そこで、顧問の先生に紹介された、文部科学省制作の「【情報Ⅰ】コミュニケーションと情報デザイン（３）「これで君もクリエイター！コンテンツ制作の流れとコツ」」[8]という動画（写真１）を参考に「共感マップ」を作成した。その例を写真２に示す。
ここから、私たちは、ユーザー像を「表面的に浅く、学校にかかわっている高校生」として設定し、彼ら彼女らの抱えている問題を「将来に対する漠然とした不安」と定義した。そして、それを解決するための方針を「今、ここを活かす」とした。これは、臨床心理学の中心課題であり、本校の校訓でもある。今後、この方針でアプリの改良を実施していく予定である。
【文部科学省：『【情報Ⅰ】コミュニケーションと情報デザイン（３）「これで君もクリエイター！コンテンツ制作の流れとコツ」』はこちらから】
デザイン思考をわかりやすく解説しています。用語も高校生の馴染みのある言葉に置き換えています。生徒には、デザイン思考や人間中心設計（HCD）は、現在のものづくりのスタンダードだと伝えています。
まとめと今後の課題
本研究では、生き辛さを抱える人の気持ちをリラックスさせるアプリを開発するため、研究仮説として、動物に注目させるアプリが良いのではないかと考えた。
そこで、心理学の「注意バイアス修正訓練」を応用した『Mood Mint』というアプリを参考に『アニマルMINT』を開発した。このアプリは、スマホに4枚の画像が表示され、その中から動物の画像を選ぶものである。
本報告では、アプリの基本機能、アルゴリズム、制作したプログラムの詳細を述べた。また、考察では、プログラム作成におけるChatGPTの有効性を述べた。また、本アプリの「注意バイアス修正訓練」の妥当性をChatGPTを使って検討した。ChatGPTの回答から、本アプリは「注意バイアス修正訓練」を応用したものだと言い切ることはできず更なる研究が必要であることが分かった。しかしながら、アプリの気持ちをリラックスさせるという有用性はあると考えているので、今後、文化祭を利用して色々な人に使ってもらい、実際に感想をインタビューしてアプリの効果を検証していく。加えて、ユーザーに共感することにより、アプリのUX（ユーザー体験）を向上させる改良を行っていく。
参考・引用文献
[１]しあわせ心理学 パンダの温度：『人付き合いが楽になる！スマホアプリ『Mood Mint』
[２]アシアル株式会社：『Monaca Education』
[３] 一色 政彦：『CIFAR-10：物体カラー写真（乗り物や動物など）の画像データセット』
[４]テラオカ電子：『「アニマルMINT（BASIC）」を作りました。』
[５] ChatGPT
[６] たかたまさひろ：『リラックスブック』
[７] d’s JOURNAL編集部：『デザイン思考とは？なぜ必要なの？プロセスや便利なフレームワーク、企業の活用事例を紹介』
[８]文部科学省：『【情報Ⅰ】コミュニケーションと情報デザイン（３）「これで君もクリエイター！コンテンツ制作の流れとコツ」』
付記
以下にcifar10の画像のダウンロードプログラム記す。このプログラムは、NUMで設定した番号から50枚の画像をtrainデータからダウンロードして保存するように動作する。
!pip install tensorflow
!pip install keras
from keras.datasets import cifar10
(train_images,train_labels),(test_images, test_labels) = cifar10.load_data()
NUM = 200
for i in range(50):
plt.figure()
img= train_images[i+NUM,:,:,:]
name = cifar10_labels[train_labels[i+NUM][0]]
cv2.imwrite(outfile + str(i+NUM) + name +'.png', img)本探究活動のまとめ
この論文では、ChatGPTを使ってプログラムを作成したことが書かれています。実を言うと、私はWebアプリ作成の経験があまりないので、自分でコードを書いてアプリを作ることができませんでした。当初は、『Monaca Education』で公開されているサンプルアプリを雛形にして作ろうとしましたが、次にどうすればよいか分かりませんでした。そこで、話題のChatGPTを使うことにしました。ChatGPTと対話をしながら、少しずつプログラムを作っていきました。もちろん、うまくいかない場合もかなりあったのですが、試行錯誤の上、なんとか形にすることができたのでした。なので、プログラムは、スマートなコードになっていません。でも、論文でも書いてあるように、ほとんど経験のないプログラム言語でも、ChatGPTなどを使えば、それなりのものは作れることを体感しました。実践的なプログラム学習に有効だと考えるので、探究学習で活用できそうです。なお、プログラム作成に関して、生徒には、画像の下にテキストを表示させる部分を取り組ませました。生徒は、プログラムの経験が全くなかったので、そのイメージを掴んでもらいました。
生徒の論文の【まとめと今後の課題】のところで、「今後、文化祭を利用して色々な人に使ってもらい、実際に感想をインタビューしてアプリの効果を検証していく。」と書かれています。しかし、うまくいきませんでした。
生徒会が文化祭の冊子を作るのですが、その中に部活動の紹介のページあります。そこで、「アニマルMINT」のアクセスURLと、アプリを使った感想を記入できるアンケートフォームのURLをそれぞれ2次元バーコードにした原稿をつくり生徒会に提出しました。ところが、理由は分からないのですが、配布された文化祭の冊子には、全ての部活動の紹介が削除されていたのです。そのような訳で、生徒への告知ができず、アンケート調査ができませんでした。
せっかくなので、このブログ記事を読んだ方に、ぜひアンケートに答えて欲しいです。よろしくお願いします。
アンケートのURLはこちらから
今回は、気持ちをリラックスさせるWebアプリ「アニマルMINT」の探究活動を紹介しました。
ここまで読んでくれて、ありがとうございます。
ご質問・ご意見・ご感想等がありましたらコメントください。
テラオカ電子
イチオシのYouTube動画
このコーナでは、記事に関連する（関連しないかもしれません）気になるYouTube動画を紹介しています。今回は、森田童子 の『ぼくたちの失敗』です。高校生のとき（1976）、この曲をたまたま聞いて根拠のない「孤独感」に浸っていました。もちろん当時は、YouTubeなどありませんので、聞きたいと時に音楽を聴くことはできません。なので、偶然に耳にしたものですが、印象に残った曲でした。1993年にドラマ『高校教師』の主題歌に起用されヒットするのですが、歌詞の「だめになったぼくを見て きみもびっくりしただろう」のところで、また共感するのでした。
「ぼくたちの失敗/森田童子」
【2024/01/02投稿】
コメント