[Fx0でアプリを作る]Framinでトリガーとアクションを作る

Fx0でのアプリ制作第２弾です。

前回：ビューに画像を追加する

今回は「トリガー」と「アクション」を設定して、「画像をタッチした時に通知を出す」アプリにしていきます。

1:レシピを作成を選択する

早速レシピを作ります。

まずはアプリの編集画面から「レシピを作成」ボタンをタップします。

1-1:レシピ名をつける

レシピ作成画面では「レシピ名」と「トリガー」「アクション」の３つを設定することができます。

ここで「追加」ボタンをタップすることで、トリガーとアクションを設定する画面に移動します。

余談ですが、画面によって「トリガー」だったり「トリガ」だったりでちょっと表記ゆれがあるみたいです。

2:トリガーを選ぶ

ここからは先にきっかけとなる「トリガー」を設定して、その後「アクション」を設定するという流れになります。

トリガーは以下の９種類から選択します。

1. タッチ操作をする
2. 端末を振る（速さ）
3. 端末を振る（回数
4. 明るさ
5. バッテリー
6. タイマー
7. アラーム
8. 天気予報
9. 画面復帰

今回は「画像をタッチた時に通知を出す」操作を追加したいので、「タッチ操作をする」をタップします。

すると右側の画像のように「タッチする画像」を選択する画面に移動します。

ここで選択できるものは、「ビュー」で作成したものに限られる様子です。

2-1:タッチ種別を選ぶ

タッチ対象の画像を選択した後、「タッチの種類」を設定します。

説明文をみる限り、「タッチ」「ロングタッチ」「スワイプ」の3種類から選べる様子です。

丸部分にタッチ操作を行うと、右側の画像のように設定された「タッチの種類」が表示されます。

意図した種類になっていれば、このまま「完了」をタップしましょう。

設定した「トリガー」はこのようにレシピ画面から見ることができます。

「アクション」の設定は、ここから「追加」ボタンをタップすることで行えます。

3:アクションを追加する

「アクション」の設定画面では、以下の「アクション」を設定できます。

1. ビューの画像切り替え
2. アプリ起動
3. 通知
4. 音声出力
5. バイブレーション

今回は「通知」をタップして、通知メッセージを設定します。

通知メッセージの編集画面では、「通知タイトル」と「通知内容」を設定できます。

「プレビュー」をタップすることで通知の表示具合を確認できます。

3-1:レシピを保存する

先ほど作成した通知を保存すると、以下のように「トリガー→アクション」という構図でレシピが作られます。

ボタンを見るに「差し込み」や「順序入れ替え」、「ループ」なども行えそうですが、それはまたの機会にしましょう。

「レシピ作成」画面で「完了」をタップすると、レシピ作成が完了します。

保存した「レシピ」は、右側の画像のように表示されます。

「レシピ」を組み合わせることで、様々な操作に対応できそうですね。

4:動かしてみる

最後に「レイアウト確認」で実際に動かしてみます。

画像を長押しすると、上部に通知テキストが表示されました。

今回は簡単な設定のみでしたが、トリガーを組み合わせて設定することなどもできそうなインターフェイスですのでなかなか奥が深そうな気配です。

次回は「ビューの組み合わせ」か「トリガーの組み合わせ」について紹介できればと思います。