掲載数No.1プログラミング教室・ロボット教室検索サイト

絵本をつくってみよう②~音の付け方

株式会社しくみデザイン開発のビジュアルプログラミングアプリ「Springin’(スプリンギン)」

難しいプログラミング言語を覚えることなく、直感的な操作で”絵日記のように”取り組めるのが特長です。

この連載では、しくみデザイン代表・中村俊介(なかむら・しゅんすけ)さんが自ら「Springin'」の使い方をレクチャー!

毎回ひとつずつ機能を紹介しながら、作品作りを応援します!

(他の記事もCHECK!連載のまとめページへはこちら↓)

はじめに

Springin’は、「シーン」と呼ばれる画面を増やして行き来することで複雑なストーリー展開やゲームの1面、2面、という展開をつくり出すことができます。これはつまり本の「ページ」みたいなものです。ページがどんどん増やせるということは、自分の考えたお話が作り込めちゃうということ。

Springin'で扱うオブジェクトは絵が基本なので、自然と絵本になります。声も録音できるので、ストーリーを読み上げてくれたり効果音を入れたりすることも。
しかも、順番に進むだけじゃなくて分岐をいれたりできるので一昔前に流行ったゲームブックのようなものも簡単につくれます。

ということで、前回に引き続き絵本の作り方
今回はマイクを使って録音して、音の鳴る絵本にしてみましょう。

つづきから始める


前回のマルがびっくりするページめくり絵本に、音をつけることにしましょう。
続きから始めるふっかつのじゅもん、覚えてますか?

忘れちゃった!という方は前々回の「マルの大冒険②ふっかつのじゅもん」を確認してくださいね。

↓前々回の記事はこちら↓

前回の絵本ワークを起動させて……

左下の三本線をタッチして出てくる紙と鉛筆のマークをタッチすると再編集でしたね。


声を録音してみる

前回の絵本ワークの2ページ目のコイツに、声を吹き込んでみます。


Springin'のプログラミングは、「何かをさせたいアイテムを選んで、アイコンで指示を与えていく」でした。ということは、びっくりマルに喋らせたいときはびっくりマルをタッチするわけですね。

すると、いつものアイコンリストが表示されます。
この中で、音が鳴りそうなのは……はい、その通り。音符のアイコンです。


音アイコンをタッチすると、こんな画面が表示されます。


新しく音を追加したい時は……そう、+ボタンです。
+ボタンをタッチすると今度はマイクのアイコンが真ん中に出てきます。


……声を出す準備はいいですか?
びっくりマルなので、「わっ!!」っていう声を録音してみますよ。
マイクアイコンをタッチして……


マイクからの音声入力が、波形になってモニタリングされています。

「わっ!!」
声を出したら、停止ボタンを押しましょう。

一番上にあるギザギザの線が、録音された音声データです。音は空気の振動なので、一般的にも波形で表示されます。

その下にある「グリッド」は、録音した音の「速度」と「音程」を変更するためのエリア。真ん中にある再生ボタンを上下左右にドラッグすると、音の高さや速さがリアルタイムで変わります。こうやって音を変えるだけでも楽しかったりしますよね。


自分の好きな声が決まったら、右下のチェックマークをタッチして決定です。


緑色の枠で囲まれていれば選択状態なのでOKです。そのまま右下のチェックマークをタッチしましょう。
これで、びっくりマルに「わっ」という声が設定されました。

それでは、実行してみましょう!


……しーーーーん。
音、鳴りませんでしたね。

そりゃそうです。誰も音を鳴らすように指示してないんですから。
Springin'のプログラミングの基本は「イベントを発生させること」。びっくりマルは、きっかけを与えてあげないといつ音を鳴らしたらいいのかわからないのです。

では、一番わかりやすいイベントを発生させるトリガーは「指でタッチする」ことなので、びっくりマルをタッチしてみましょうか。

\わっ!/

音、ちゃんと鳴りましたか?!

勝手にしゃべる

ここで一度、停止ボタンで開発画面に戻ります。

これまでずっと2ページ目で作業をしていたわけですが、本来この作品は1ページ目から始まって「すすむボタン」をタッチするとマルがびっくりするという絵本でした。

シーンリストの一番上をタッチして1ページ目にもどり、最初から再生してみましょう。




顔は既にびっくりしてるのに、声を出すのはタッチされてからなんてまどろっこしい!
そう思ったあなた、鋭い。次に設定するのは、自動的にしゃべり出す方法です。

自動的音声を再生するには、「オート」を使います。
前回自動的にコマルを動き出すようにしたのと同じアイコンです。よく見ると、「移動」と「音」が再生されているアイコンなのです。

もう一度停止をして、2ページ目を選択。
びっくりマルをタッチしてアイコン一覧を出しましょう。


こんな感じでオートをオンにするだけ。簡単ですね。
再び1ページ目に戻って再生し、ページを進んだらびっくりマルの登場とともに「わっ」という声が鳴ったら成功です!

BGMをつける


音の使い方の最後は、繰り返してBGMにする方法です。
BGMといっても、Springin'の中に演奏機能や音源が入っているわけではないので、頑張って歌いましょう。

びっくりマルは実は歌っていた、という設定に急遽変更です。
再度びっくりマルのページの開発画面を用意してください。そしてびっくりマルをタッチして出てきたアイコン一覧からもう一度「音アイコン」をタッチ。
「わっ」の音声が選択されていますが、気にせずに+ボタンで新規録音をします。


Springin'では、録音できる時間は10秒までという制限があります。
マイクアイコンをタッチしたらすかさず「♪か~え~る~の~う~た~が~」と歌って停止ボタンをタッチしてください。カエルの歌に意味はありませんので、10秒以内で自分の好きな歌を録音をしてくださいね。




そして右下のチェックマークをタッチして完成。
先ほどの「わっ」の音と入れ替わって、歌が選択された状態になりました。このまま右下のチェックマークで設定完了です。

プレイボタンで実行してみると、「わっ」のかわりにカエルの歌が聞こえてきます。
……が、一回歌ったらおしまいなので、繰り返すように設定しましょう。

びっくりマル(歌うマル)をタッチして出てきたアイコン一覧の「オート」の左隣に「ループ」アイコンがあります。これをオンにすると、歌を永遠に繰り返すようになります。


以上で完成です!
実行してちゃんと歌を繰り返すことが確認できたらOKです。

というわけで、2回に分けての絵本づくりに便利な機能でした。
この2回で出てきた、ページめくりと音と、移動と、そして自動化と繰り返しを使えるようになれば、長編の絵本やゲームブック、楽器のような絵本だってつくれます。

それでは続いて、Springin'クリエイター達のステキな音付き絵本ワークの紹介です!!

世界のマーケットから


世界中のクリエイターが出品している作品を、僕やしくみデザインのスタッフがピックアップして紹介するコーナーです。

今回はもちろん、音付きの絵本ワークをピックアップ!!

「ハロインコンサ〜ト《おやつくれ》」@usapinさんの作品

2018年のハロウィンキャンペーンで優秀作品に選ばれた作品です。歌ったり踊ったり、見てるだけで楽しくなっちゃいます。


↓作品のダウンロードはこちら↓

「ペンギンを、育てよう(^^)」 @aoaoaoaoさんの作品

まさに、お話しをしてくれる絵本です。絵も、ストーリーも、そして声もかわいい。とっても癒される作品です。


↓作品のダウンロードはこちら↓

「雨。だがさんぽ。」 @Hamiltonさんの作品

雨ワークキャンペーンでタイトル賞を受賞した作品です。自動的にはお話しが進んだり、「次へ」で進めたり、途中でゲームがあったり、いろんな工夫がある楽しい作品になっています。


↓作品のダウンロードはこちら↓

「コッペパン不足」 @Ippyさんの作品

オープニングのストーリーからの……!?
フレーズが頭に残る、癖になってしまう作品です。


↓作品のダウンロードはこちら↓

「ももたろう」 @uajtmpyjyvvtさんの作品

お話の王道と言えば「ももたろう」ですよね。いろんなところにいろんな声がなる仕掛けがあって、それぞれで声も使い分けていて、とってもステキな桃太郎になっています。


↓作品のダウンロードはこちら↓

音が入ると、作品の幅がぐっと広がりますね。お気に入りのクリエイターは見つかりましたか?
皆さんの自慢の作品をぜひ出品して教えてくださいね!

次回の連載をお楽しみに!

中村さんの「Springin'」講座はこれから続々掲載予定!完全無料・絵日記感覚で始められるビジュアルプログラミングアプリ「Springin'」での作品作りに、ぜひチャレンジしてみてくださいね。

(ダウンロードはこちら)


公開日:2019.12.26

コエテコ 読者会員募集!

いいね!すると、プログラミング教育に関する最新情報や
セミナー情報などを定期的にお届けします。

  • # セミナー情報

  • # 数値レポート

  • # FC募集

新たなスキル「プログラミング教育」を先取りしませんか? 今後のプログラミング教育流れ図
今から、先取りしませんか?
コエテコ経由の体験申し込みでアマギフ2000円分プレゼント!
お近くの教室を探す →

あわせて読みたいガイド

ガイドを読めばプログラミング教育がスッキリわかる!
プログラミングまるわかりガイドを読む

RECOMMEND

この記事を読んだ方へおすすめ