CookBook

IM-BloomMaker ボタンに効果音を付ける方法

投稿日:2022-06-13 更新日:

このCookBookでは、2022 Spring でリリースした「音声または動画○を再生する」アクションアイテムの利用方法について説明します。
「音声または動画○を再生する」 アクションアイテムは、指定した音声埋め込み・動画埋め込みエレメントの再生制御を行うことができます。また、「音声または動画〇を一時停止する」「音声または動画〇を再生・一時停止する」アクションアイテムを利用すれば停止制御も可能です。
ここでは、「音声または動画〇を再生する」アクションアイテムと「音声埋め込み」エレメントを利用して、画面上のボタンに効果音を付ける方法を紹介します。

完成イメージ

以下の画像のようなクリックすると音声が再生されるボタンを作成します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
このサンプルは、2022 Spring 版以降でインポートできます。

レシピ

  1. 埋め込みたい音声素材をインストールし、iapフォルダに配置する。
  2. エレメントを配置する。
  3. アクションアイテムを作成する。
  4. ボタンとアクションアイテムを紐づける。

1. 埋め込みたい音声素材をインストールし、iapフォルダに配置する。

以下の音声素材をインストールしてください。

cat.m4a

「%RESIN_HOME%/webapps/imart」配下にインストールしたファイルを配置してください。
配置したファイルは、「音声埋め込み」エレメントや「動画埋め込み」エレメントとして画面上で利用できます。

2. エレメントを配置する。

BloomMakerのデザイン編集画面を開き、パレットから以下のエレメントを配置します。

  • 「フォーム部品(Bulma)」カテゴリの「ボタン」エレメントを配置します。
    • textContentプロパティに、Meow of a catを設定してください。
    • leftIconClassプロパティに、fas fa-playを設定してください。
  • 「パーツ」カテゴリの「音声埋め込み」エレメントを配置します。
    • controlsプロパティを無効にしてください。
    • srcプロパティにcat.m4aを設定してください。

3. アクションアイテムを作成する。

アクションエディタを開き、標準カテゴリの「音声または動画〇を再生する」アクションアイテムを開きます。
elementIdに、im-element-4を設定してください。


ここでは、利用したい「音声埋め込み」エレメントや「動画埋め込み」エレメントの共通プロパティ「ID」をelementIdとして指定しています。

4. ボタンとアクションアイテムを紐づける。

ボタンのクリック時に、対応するアクションアイテムが動作するように設定します。

「ボタン」の「クリック時」プロパティにNew action #1を設定してください。

最後に

こちらをプレビュー画面からご覧いただくと、効果音を設定したボタンを動かせます。

ぜひ、「音声埋め込み」エレメントや「動画埋め込み」エレメントを利用して、動きのある画面を作成してみてください。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

IM-BloomMaker のアクション「URL ○ にリクエストを送信する」の使い方

このCookBookでは、「URL ○ にリクエストを送信する」アクションを使ってサンプル画面を作成する方法を紹介します。 2019 Summer では「URL ○ にアクセスする」でしたが、 201 …

IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する方法について紹介しています。 完了案件でも、確認対象者が確認することはできます …

no image

多要素認証(MFA)のバックアップコードを生成していないユーザに通知を送る方法

この CookBook では、多要素認証のバックアップコードを生成していないユーザに通知を送る方法について紹介しています。 多要素認証では Google Authenticator を用いて認証を行い …

no image

承認ノードの画面アイテムに任意の初期値を設定する方法

このCookBookでは、BISワークフローにおいて、承認ノードの画面アイテムに任意の初期値を設定する方法を紹介します。 画面アイテムに任意の初期値を設定する方法としては、画面アイテムプロパティである …

no image

BloomMaker 入力規則エラーメッセージエレメントの使い方

このCookBookでは、Accel Platform 2021 Springで追加されたエレメント「入力規則エラーメッセージ」について紹介しています。 「入力規則エラーメッセージ」は、指定した変数に …