ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubbleで名言SNS「SHarK!!!」の簡易版を作ってみる(初級者向け)3:音声の録音&投稿、再生機能の作成方法

f:id:toka-xel:20201027173137p:plain

第3回 音声の録音&投稿、再生機能の作成方法

みなさんこんちには!チームリアルカレッジの岩田史門です! Bubbleでの開発楽しんでいますか? 今回は、Bubbleで名言SNS「SHarK!!!」の簡易版を作ってみる(初級者向け)の第3回となります。 書籍名言SNSサービス「SHarK!!!」はこちらになります☟

shark0731.com

先日、「 2:SNSに欠かせない「いいね機能」の導入と「いいねTOP」の表示方法」について書かせて頂きました。

今回は、音声の録音&投稿、再生機能の作成方法について解説します!

なお、スタート時の状況はこちらになります。第2回終了時の状況と大きな差はありませんが、 エディターを公開しておきますので、念の為ご確認ください。

エディター

bubble.io (2020/11/27 追記)

1. 音声録音機能導入

1.1 音声録音プラグインのインストール

まずは、音声を録音するために必要なプラグインをインストールしましょう。

「Audio Recorder & Vizualiser」
「Audio Recorder & Vizualiser」
今回は、「Audio Recorder & Vizualiser」というプラグインを使用します!無料で利用できるので安心してくださいね!!写真を参考に間違えないようにインストールしましょう!

1.2 「Popup tweet」の編集

次に、語るボタンを押したときに表示される「Popup tweet」の編集をしていきます。このポップアップの中に、音声保存を開始するための「録音開始マーク」、録音中であることを示す「録音中マーク」、音声を録音するために先ほどインストールした「Audio Recorder & Vizualiser」、音声を保存するための「保存ボタン」を設置していきます。

1.2.1 録音開始マーク、録音中マークの設置

まず録音開始マークと録音中マークとなる画像を探しておきましょう! 次に、録音を開始するためのボタンを設置しましょう。エレメントバーから「group」を選択し、「Popup tweet」の中に設置します。「style」の部分の「remove style」をクリックし、「background style」の部分を「image」にしましょう。すると、画像をアップロードできるようになるので、先ほど取ってきた「録音開始マーク」の画像をアップロードしてください。同様の手順で、もう1つグループを設置し今度は「録音中マーク」の画像をアップロードしてください。ただここで注意点が一点あります。録音中マークは普段は見えないような設定にしたいので、黒い編集画面の「This element is visible on page load」という項目のチェックを外しておきましょう。ここまでが完了したときの完成図は下の写真のようになります。使用している画像は皆さん異なるので、それ以外の部分を参考にしてみてください。

各マークの画像、設置完了イメージ
各マークの画像、設置完了イメージ

1.2.2 Audio Recorder & Vizualiserの設置

次に「Audio Recorder & Vizualiser」を「Popup tweet」の中に設置します。「Audio Recorder & Vizualiser」を設置することで「音声の録音」と「録音した音声の可視化」を可能にします。それでは、エレメントバーの「input forms」から「audio recorder」を選び、設置しましょう。サイズや、設置後のイメージは下の写真を参考にしてください。

「audio recorder」設置後のイメージ
「audio recorder」設置後のイメージ

1.2.3 保存ボタンの設置

次に、録音を終えた後保存するための「保存ボタン」の設置を行います。それでは、まずはエレメントバーから「group」を選択し、先ほど設置した「audio recorder」の下に設置してください。つぎに、そのグループの中に「保存」というテキストを配置しましょう。最後に、チェックマークのようなアイコンを選択しグループの中に設置しましょう。保存ボタンの設置の完成イメージは下の写真のようになります!

音声保存ボタン設置完了イメージ
音声保存ボタン設置完了イメージ
それでは、チャプター1.2「tweet popup」の編集の完了イメージを確認してみましょう。「Popup tweet」が下の写真のように編集できていれば完成です!
「Popup tweet」完成イメージ
「Popup tweet」完成イメージ

2. 音声再生機能導入

2.1 データベースの編集

まずは、録音された音声ファイルが保存されるデータベースを作成しましょう。「Data」タブに移動し、「Tweet」の項目で「Create a new field」をクリックしてください。そして、「Field name」を「audio」、「Field type」を「file」に設定しましょう。下の写真を参考に設定・作成してみましょう!

音声データのデータベース追加
音声データのデータベース追加
追加後のデータベースが下の写真のように「audio」と追加されていれば、完成です!
データベース完成イメージ
データベース完成イメージ

2.2 音声再生プラグインのインストール

次に、音声を再生するために必要なプラグインをインストールしましょう。

Howler.js music/audio player
Howler.js music/audio player
今回は、「Howler.js music/audio player」というプラグインを使用します!無料で利用できるので安心してくださいね!!写真を参考に間違えないようにインストールしましょう!

2.3 「Group tweet」の編集

次に、Tweet1つ1つに対して音声再生機能をつけ、音声データがある時に再生できるような設定をしていきます。そのために、「Howler.js music/audio playerの設置」と、「再生ボタンの設置」に取り組んでいきます。

2.3.1 「Howler.js music/audio player」の設置

ここでは、先ほどインストールした「Howler.js music/audio player」の設置をしていきます。これを設置することで、音声の再生の機能が導入できます。やることはとても簡単なので安心して取り組んでいきましょう!まずは、「Design」タブに移動し、エレメントバーのから「Howler」を選択し、「Group tweet」の中に設置しましょう。設置後のイメージは下の写真を参考にしてください。

Howlerの設置
Howlerの設置
それでは、今設置した「Howler.js music/audio player」の設定をしていきます。設置した「Howler.js music/audio player」をダブルクリックし、黒い編集画面を開きます。「dynamic link」の部分を編集し、何のファイルを再生するのかという設定をしてあげましょう。「dynamic link」の部分を「Parent group's Tweet's audio's URL」と設定しましょう。こうすることで、「Parent group」のなかにある「Tweet」データの中の「audio」の「URL」を取得し再生するという設定ができました!設定後のイメージは下の写真を参考にしてください。
Howlerの設定後のイメージ
Howlerの設定後のイメージ

2.3.2 再生ボタンの設置

ここでは、再生ボタンの設置をしていきます。エレメントバーから「icon」を選択し、「再生ボタン」のような見た目のアイコンを選択しましょう。そして、「Group Tweet」の中に配置します。そして、再生ボタンの設定を編集していきます。この再生ボタンは、ツイートに対し音声が登録されているときだけ表示させたいですよね。そのため、ツイートに音声が登録されていない投稿の場合は再生ボタンを表示しない設定をしていきます。再生ボタンの黒い編集画面を開いてください。すると「Conditional」というタブが上にあるのでそこをクリックしましょう。すると下の写真のような画面が出てくるので、写真で赤く囲まれている「Define another condition」という所をクリックしましょう。

再生ボタン編集画面 Conditionalタブ
再生ボタン編集画面 Conditionalタブ
すると、状態を設定できるようになるので、下の写真のように「Parent group's Tweet's audio is not empty」と設定しましょう。
「Parent group's Tweet's audio is not empty」と設定
「Parent group's Tweet's audio is not empty」と設定
最後に、「Select a property to change when true」という所をクリックし、「This element is visible」をクリックしましょう。すると、「This element is visible」という項目が追加されるのでチェック欄にチェックを入れましょう。ここまで完了したときの設定完成イメージは下の写真を参考にしてください。
再生ボタン設定完成イメージ
再生ボタン設定完成イメージ

3. ワークフローの設定

3.1 録音開始マークのワークフロー設定

ここでは、録音開始マークが押されたときの処理をワークフロー設定をしていきます。まず設定の内容は、録音開始マークが押されると、録音開始マークが隠れ、録音中マークが表示され、録音が開始されるというものです。それでは実際にワークフローを組んでいきましょう。まず、「Popup tweet」の録音開始マークをダブルクリックし、黒い編集画面の「Start / Edit workflow」をクリックし、ワークフロー画面に移動しましょう。step1に「Hide group mic」(録音開始マークを隠す)、step2に「show group onair」(録音中マーク表示)、step3に「Start/stop Audiorecorder input」を設定しましょう。設定後のイメージは下の写真を参考にしてください。

録音開始マークのワークフロー
録音開始マークのワークフロー

3.2 音声保存ボタンのワークフロー設定

ここでは、保存ボタンのワークフローを設定していきます。今回の設定の内容は、音声保存ボタンを押すと、audiorecorderで録音されていたデータをデータベースにアップロードし、録音中マークを隠し、録音開始マークを表示するというものです。それでは実際に設定していきましょう!!まずは「Popup tweet」の「Group音声保存」をダブルクリックし、黒い編集画面の「Start / Edit workflow」をクリックし、ワークフロー画面に移動しましょう。step1に「Upload content of Audiorecorder input」(録音されたデータをアップロード)、step2に「Hide group onair」(録音中マークを隠す)、step3に「Show group mic」(録音開始マークを表示)を設定しましょう。設定後のイメージは下の写真を参考にしてください。

音声保存ボタンのワークフロー
音声保存ボタンのワークフロー

3.3 再生ボタンのワークフロー設定

ここでは、再生ボタンのワークフローを設定していきます。今回の設定の内容は、再生ボタンを押すと、Howlerが起動し音声が流れるようにするというものです。とてもシンプルな設定なのですぐにできちゃいます!!それでは実際に設定していきましょう!!まずは「Group tweet」の「icon 再生」をダブルクリックし、黒い編集画面の「Start / Edit workflow」をクリックし、ワークフロー画面に移動しましょう。step1に「Play HowlerA」(Howlerを起動し音声を流す)という設定します。これで設定完了です。設定後のイメージは下の写真を参考にしてください。

再生ボタンのワークフロー
再生ボタンのワークフロー

3.4 Tweetボタンのワークフロー設定(2020/11/27 追記)

最後に音声データやTweetデータをDBに保存するTweetボタンのワークフローを設定していきます。「Popup tweet」のTweetボタンをダブルクリックし、黒い編集画面の「Start / Edit workflow」をクリックし、ワークフロー画面に移動しましょう。

Step1に「Data(Things)からCreate a new thing」(データベースへの登録)、Step2に「Reset inputs」(入力内容のリセット)、Step3にの「Audio recorder」の中の「Clear content」(音声データのクリア)、Step4に「Hide」(ポップアップを消す)を設定しましょう。設定後のイメージは下の写真を参考にしてください。

f:id:KiyokoT:20201127143516p:plain

「Data(Things)からCreate a new thing」(データベースへの登録)の詳細設定は下の写真を参考にしてください。

f:id:KiyokoT:20201127143722p:plain

4. プレビューで確認

それでは、最後にしっかりと反映されているかプレビュー画面で確認してみましょう!ツイートを入力、録音開始マークを押し声を入力、保存ボタンを押し投稿してみましょう。投稿に再生ボタンが表示され、押したときに音声が流れればOKです!音声機能をうまく活用すると、様々なアプリを作ることができるようになります。ぜひ、いろいろと試して楽しんでみてください!

完成イメージ
完成イメージ

次回

次回は、「レスポンシブデザイン対応」について解説します。

4:レスポンシブデザイン対応