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

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

関連記事

AdobeSign連携を利用する

このCookBookでは、IM-Signを利用したサンプルを紹介します。 サンプルでは、Workflow/BISの案件に紐づいたAdobe Signの契約書を作成して、署名を依頼します。 署名が行われ …

no image

フォーム内の入力値を案件名に自動入力する方法

このCookbookでは、IM-FormaDesignerで作成した申請画面から入力内容を案件名に設定する方法を紹介します。 この方法を利用するとIM-FormaDesignerの入力内容をIM-Wo …

no image

ViewCreatorとIM-FormaDesignerを利用して、既存テーブルのデータを表示する。

このCookBookでは、ViewCreatorとForma画面を利用して、既存テーブルのデータを表示する方法を説明します。 ViewCreatorでテーブルデータの一覧を表示し、IM-FormaDe …

IM-BloomMaker スプレッドシートの入力内容を DB に保存する

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になったスプレッドシートで、セルに入力した値を DB に保存する方法を紹介します。 …

IM-BloomMaker セルが結合されたテーブルの作成方法

このCookBookでは、セルが結合されたテーブルのような見た目を作成する方法をご紹介いたします。今回は簡単にセルの結合を実現するため、テーブル系のエレメントの代わりにコンテンツ種別「Bulma」の「 …