情報処理学会 インタラクション 2017
IPSJ Interaction 2017

2-407-82
2017/3/2

音階を利用したペイントアプリケーション開発
鶴岡将大†1 吉田周生†1轟翔貴†1角田真和†1佐野昌己†1川合康央†1

概要： 近年，音楽的能力の向上が幼少時の脳や社会性の発達に影響を及ぼすことが先行研究で分かった．本研究は,先行事例をもとに幼少時の身近な遊びであるお絵かきに音楽の要素である音階を組み合わせたアプリケーションを開発し，遊びながら音楽的能力の向上を促すことを目的とした．本コンテンツは，PC 版とタブレット版の２種類を開発し，マイクを用いて取得した周波数とデシベル値によって描画する線の色や太さの変更を行うことでお絵かきに音楽的要素を加えている．

Development of Paint Application using a Musical Scale
MASAHIRO TSURUOKA†1 SYUSEI YOSHIDA†1SHOKI TODOROKI†1
MAO TSUNODA†1MASAMI SANO†1YASUO KAWAI†1
Abstract: Previous studies has shown that improving musical ability has an influence on the development of the brain and sociality
in early childhood. The purpose of this study is to develop a paint application combining musical scales, which is a familiar playof childhood, and to promote improvement of musical ability while playing. This application developed both PC version and tabletversion, and adds musical elements of the painting by changing the color and thickness of the line to drawn by frequency anddecibel value acquired using the microphone.

1. 研究の背景と目的

2. 先行事例本コンテンツを開発するに至った背景として，我々がま本コンテンツの特徴であるタブレットのペイントアプリず着目したのは，音楽が幼児期に与える影響についてであケ－ションと音楽による描画表現に関係する先行事例がいる．先行研究では，平野[1]の研究や，白石[2]の研究などがくつか挙げられる．タブレットを用いたペイントソフトとあり，幼児期の音楽教育が子供の脳や社会性の発達に良いいう点で関連するのは岡田[3]の研究である．この研究はタ影響を与えることがわかっている．幼児期において，音楽ブレット型端末を利用したお絵かきソフトウェアを利用し，的能力を身に着ける方法は数多くあり，単純に音楽を聴く，従来のクレヨンとの学習効果の違いについての取り組みを演奏するなど，その形態はさまざまである．我々は幼児期報告したものである．このソフトウェアは，クレヨンの色の身近な遊びの中に音楽的要素を取り入れることで，音楽を変える際に，ソフトウェア内で色を変えるのではなく，に触れる足掛けとなり，遊んで楽しいと思ってもらえるコ複数本の電子デバイスを持ち替えて色の変更を行うことがンテンツの開発を目的として開発に取り組んだ．

できる電子クレヨンの設計・作成といった，幼児教育のた我々が幼児期の代表的な遊びとして着目したのはお絵めのお絵かき専用ソフトウェアである．また，音を描画表かきである．そこからお絵かきの要素である色や線の表示現するという点で関連していたのは奥[4]の研究である．こに，音楽的要素である音階や音量を加え，お絵かきをしなの研究では，児童が音を描いた絵を別の子供がどのようにがら音楽に触れることができ，かつ楽しく遊ぶことができ読み取るかという実験を通して，表現者の感覚と鑑賞者のるアプリケーションの開発を行った．

感覚の間の何らかの交感を見出そうとする研究である．

本コンテンツは，当初 PC 版アプリケーションのみの開我々はこれらの先行研究を参考にし，先行事例になかった発であったが，後にタブレット版へも移植を行った（図 1）．

タブレット端末を用いて，音によって描画に変化を与えるタブレット端末に移植したことによって，児童でも分かりお絵かきアプリケーションの作成に取り組んだ．

やすく直観的に操作することが可能になり，当初の目的に沿ったコンテンツとなった．

†1 文教大学
Bunkyo University© 2017 Information Processing Society of Japan654

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

図1
Figure 12-407-82
2017/3/2

タブレット版ペイントアプリケーション動作画面
Operation Screen of the Paint Application on Tablet Version

図2
Figure 2

システム遷移図

System Transition Diagram

3. ペイントアプリケーションのデザイン
3.1

開発手法

散フーリエ変換のフリーソフトを利用した．また色への変換の際，十二平均律一度を 261Hz としそのうえで，誤差を加味した値を基準値とし，その色相を赤とした．ここで設本アプリケーションは Android の統合開発環境(IDE)であ定した基準より半音上がるごとに色相環をもとに色相を変る Android Studio を使用した．絵を描くうえで上図（図 2）化させ，長七度の音が来た時点で一周とし，八度を再び赤のように音声を解析し，その周波数をもとに色または線のに設定した．さらに周波数とともに dB 値を計測しその値幅を変えていくものである．当初開発したプロトタイプでに伴って線の幅を変化させることとした．このとき PC 版

ある PC 版(図 3)では，マイクの性能により若干の誤差が生では dB 値が一定値を超えなければ線を描くことができなじた．そのため，開発の基盤として Android 端末での周波い仕様になっていたが，UI を考慮したうえで，dB 値が一数分析の精度を確認するとともに，色変換をする周波数の定値を超えない限りは 3px の線を描くように設定した．

最適値を設定した．その際に，大浦[5]が公開している実離© 2017 Information Processing Society of Japan655

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

2-407-82
2017/3/2

図3
Figure 3

PC 版ペイントソフト動作画面

Operation Screen of the Paint Application on PC Version

図4

Figure 4

Case Study of the Photo as Background Image (1)

図5

Figure 5© 2017 Information Processing Society of Japan

写真を背景にした事例（1）

写真を背景にした事例（2）Case Study of the Photo as Background Image (2)656情報処理学会 インタラクション 2017
IPSJ Interaction 2017

2-407-82
2017/3/2

図6
Figure 6

Twitter 投稿画面
Twitter Posting Screen

加えて，PC 版では線の描きなおしの際に，消しゴムツー合は，初めに Twitter アカウントとの連携画面が表示される

ルを選択することによって，背景と同じ色にペイントツーよう設定した．実際の連携は外部ブラウザアプリを起動しルの色を設定し描くことにしていた．しかし，重なった線て行い，コールバックしてアクセストークンなどを取得すも消えてしまい，うまく絵が描けないといった課題があっる仕組みとなっている．連携後は Tweet ボタンを押すことた．そこで，Android 版のアプリケーションでは消しゴムツによって，自由に連携したアカウントでのようにつぶやくールによる消去は行わず，直前の線に対して消去可能なよ仕組み(図 6)とした．

うに，アンドゥ機能を実装した．これは Android 版の背景

3.2

インタフェースデザイン

として，写真などの外部ファイルから好みの画像を読み込

PC 版のアプリケーションでは，自由な描画を可能とするみ背景とできる仕様へと変更に対応するためのものでもあために，入力デバイスとしてペンタブレットのペンを用いる．これは，線を描くごと(タブレット画面から指を離すごる仕様とした．このとき,と)に，それまでに描いた画像を Bitmap 形式でメモリに保装する予定であったが，dB 値によるリアルタイム変化に対存しておき，画面上でアイコン表示されているアンドゥボ応するために，この筆圧検知機能は取り入れないこととしタンを押下して実行するごとに一つ前の画像に戻る，といた．Android 版のアプリケーションでは上記と同じようなった機能とした．一方でメモリにデータが蓄積して動作にインタフェースとして，指による画面タッチ機能を取り入支障が生じないように，メモリリーク対策として，アンドれた形とした．

ゥ可能な回数を 8 回までという制限を設けた．

筆圧検知による太さの変化を実

また，ボタンの配置では，描画する際に影響の少ないで上記で述べた背景画像の設定は，タブレット端末内のギあろうと思われる左上にまとめて配置することとした．さャラリーに保存されている画像ファイルを読み込んで，編らにボタンの画像では，絵に影響を与えないように単色で集できる機能である(図 4，5）．

表現されたピクトグラムを用いたアイコンを用意し，ユーまた，ギャラリーからの読み込みに加えて，タブレット端末に付属する外部のカメラアプリを即座起動できる機能も付与した．
さらにここで編集し直した画像を直接 Twitter に投稿すザーが直感的に操作できることを目指して作成を行った(図 7，8)．

4. 考察と今後の課題ることができる機能も実装した．本アプリケーションでは本コンテンツは，授業の一環として，学内での展示発表

この機能の実相のために twitter4j[6]というフリーソフトをを行った．操作面は，もともと幼児を対象としたシステム利用した．Twitter に投稿する際に，その利用が一回目の場であるため，PC 版，タブレット版ともに，非常に分かりや© 2017 Information Processing Society of Japan657

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

2-407-82
2017/3/2

図7
Figure7

図8
Figure8

PC 版ペイントアプリケーションの描画画面

Drawing Screen Image of the Paint Application on PC Version

タブレット版ペイントアプリケーションの描画画面
Drawing Screen Image of the Paint Application on Tablet Version

すく簡単なものになっている．そのため，プレゼン時にはんでもらえるようにした．実際に本アプリケーションを用作成に当たった目的や，おおまかな操作説明だけを行い，いて描き込んだ作品を twitter 上にアップロードするユーザ実際に操作してもらう方法をとった．どのユーザーもすぐーも見られ，タブレット端末でも十分にお絵かきを行えるに声を出して，音程を変えながらお絵かきを始めることがことがわかった．

できていたため，本アプリケーションの操作面でのハードルは低いように見受けられた．

今後の課題として挙げられるのは，UI デザインの面である．お絵かきの操作に関しては簡単な説明だけで操作できまた，発表の際に，タブレット版ペイントアプリケーシていたが，画像の保存やギャラリーからの画像読み込みなョンを学内のみ限定で配布し，ユーザーの手元に端末で遊どの操作で躓いている場面が見受けられた．そのため，ど© 2017 Information Processing Society of Japan658

情報処理学会 インタラクション 2017
IPSJ Interaction 2017

2-407-82
2017/3/2の年齢の人にでも一目でわかるような，ユニバーサルな UIデザインを考案する必要がある．

5. 参考文献
[1]

[2]

[3]

[4]
[5]

[6]

平野強子. 幼児期における音楽教育 : 歌唱を通して豊かな感受性と表現力を育てる試み. 幼児教育研究, 2015, vol.1,
p.61-66.
白石昌子. 乳幼児の発達と音楽の関係 : 音楽の機能が及ぼす影響についての検討を通して. 福島大学人間発達文化学類
論集, 2006, vol. 3, p.13-25
岡田実, 佐々木喜一郎, 安田考美. 電子クレヨンデバイスを用いたお絵かきソフトウェアの検討. 全国大会講演論文集,2013, vol.1, p.213-215.
奥美佐子, 子どもの音の描画表現と読み取りの研究. 神戸松
蔭女子学院大学研究紀要人間科学部篇, 2016, No.5, p.53-66.
“汎用 FFT (高速 フーリエ/コサイン/サイン 変換) パッケージ”. http://www.kurims.kyoto-u.ac.jp/~ooura/fft-j.html, (参照2016-12-24).
“Twitter4j”. http://twitter4j.org/ja/index.html, (参照 2016-12-24).

© 2017 Information Processing Society of Japan659