以前、ProtoPie の高度な機能のひとつ — フォーミュラ を紹介しました。フォーミュラを使うと、いつでも変化しうる情報や、最初は不明な情報を扱えます。覚えていますか？ 以前は、検索クエリを作るためにフォーミュラを使い、それを使って Google 画像検索を実行しました。URL の大半は事前に分かっていましたが、個別の検索語はユーザーに入力してもらう必要がありました。この未知の情報に対応するため、ユーザーが検索語を入力したあとに、リアルタイムで URL を組み立てるフォーミュラが必要だったのです。
今日のレッスンでは、基本的な例から始めます。
必要なもの
このチュートリアルを進めるには、このサンプル Pie をダウンロードして Studio で開いてください。
学べること
このチュートリアルを終えるころには、次のことを学べます。
フォーミュラを使いたくなる理由
ProtoPie の組み込み変数を使ってフォーミュラを作成する方法
テキストを結合するフォーミュラを作成する方法
所要時間: ≤10分
なぜフォーミュラを使うのですか？
多くのインタラクションでは、静的な値を使えば問題ありません。たとえば、このボタンをタップすると Scene 2 に移動します。オブジェクトを上方向に Fling すると、画面上部の外側にあるどこかへ移動します。ただし、多くの場合、Pie には、実際に起こるまで分からないさまざまな入力に反応させる必要があり、その入力の詳細は毎回異なることがあります。たとえば、画面のランダムな場所をタップすると、タップした座標は次にもう一度タップしたときには変わっている可能性が高いです。
最初の例では、このまさにそのシナリオを扱います。
オブジェクトをユーザーのタッチ位置へ移動する
上でダウンロードしたサンプル Pie を開いてください。Pie には 3 つのシーンがあります。まだ Scene 1, にいない場合は、Studio の左上にある Scenes リストで Scene 1 - Touch Move のアイコンをクリックしてください。
このシーンには 2 つのレイヤーがあります。黒い背景シェイプと黄色い星です。ユーザーが画面をタップしたら、その座標を取得し、ユーザーが触れた正確な位置へ星を移動させたいと思います。背景レイヤーは画面全体の幅と高さを覆っているので、タッチイベントの受け取り先として使います。
Background レイヤーに Tap トリガーを追加します。
Star レイヤーに Move レスポンスを追加します。
これまでの Move レスポンスの例では、オブジェクトを移動させる明示的なピクセル座標を入力していました。この場合、ユーザーが画面のどこを触れたのかまだ分かりません。タッチの X 座標と Y 座標が発生したときに取得する必要があります。
ProtoPie には、タッチポイントのようなイベントの詳細を取得するための組み込み機構がいくつかあります。ProtoPie ではこれらを 定義済み変数 と呼びます。変数という言葉に慣れていなくても心配いりません。変数については次のレッスンで詳しく説明します。今のところは、変数は少しの情報を保存するために使うものだと理解しておけば十分です。ここでは 2 つの定義済み変数、$touchX と $touchY を使います。これらは最新のタッチイベントの X 座標と Y 座標を保存しています。
Move レスポンスをクリックします。Properties パネルで、X の上にあるボックスをクリックしてください。ボックスの右側に小さな ∫x アイコンが表示されるはずです。
∫x アイコンをクリックします。これでフォーミュラを入力できるようになります。情報が変化する場面では、フォーミュラを使いたいのです。
フォーミュラ欄に $touchX と入力します。ProtoPie は、このテキストを変数として認識していることを示すために、緑色で表示します。
OK をクリックしてフォーミュラを確定します。
**💡 ****プロのヒント: **フォーミュラの入力が終わったら、OK ボタンをクリックしてください。入力後にフォーミュラが消えてしまった場合は、この手順を忘れていた可能性があります。
Y 位置でも同じようにしますが、今度はフォーミュラとして $touchY を使います。
これをプレビューしてみましょう。シーン内のどこかをクリックすると、星がクリックした位置にすぐ移動するはずです。
ProtoPie の 定義済み変数**、** をすべて見たい場合は、フォーミュラ入力ボックスの右端にある小さな疑問符アイコンをクリックすると簡単に見つけられます。
これにより、フォーミュラ のドキュメントがブラウザウィンドウで開きます。左側のサイドバーで Variables → 定義済み変数。 に移動してください。
テキストを結合する
前の例では、フォーミュラを作るために単一の情報だけを使いました。つまり、定義済み変数の $touchX と $touchY です。しかし、フォーミュラを使えば、複数の情報を組み合わせることができます。
Pie で Scene 2 - Greeting を開いてください。この Pie には、少しの説明文、入力フィールド、そして空のテキストフィールドがあります。ユーザーに名前を入力してもらい、Return を押したら、入力された名前で ProtoPie にあいさつしてほしいのです。
シーンの開始時点で入力フィールドにフォーカスを当てたいので、Start トリガーを追加します。
Name Input レイヤーに Focus レスポンスを追加します。Focus In が選択されていることを確認してください。
Name Input レイヤーに Return トリガーを追加します。
Greeting レイヤーに Text レスポンスを追加します。
ユーザーの名前は入力されるまで分からないので、あいさつ文を動的に組み立てるためにフォーミュラを使う必要があります。Text レスポンスでは、明示的なテキストの代わりにフォーミュラを使えます。Content の下にあるドロップダウンリストで Formula を選択してください。
下のボックスの表示が変わり、そこをクリックするとおなじみの ∫x アイコンが見えます。
ここでは "Hello, NAME" というあいさつを作りますが、NAME の部分はユーザーが Name フィールドに入力した内容に置き換えます。あいさつ文は 2 つの部分に分かれています。
分かっている部分: Hello,
分からない部分: NAME
あいさつ文は 2 つの部分に分けて組み立てます。
次の内容を、引用符も含めてそのまま入力してください:
"Hello,"
このようにテキストを引用符で囲むと、ProtoPie に対して、引用符の中に含まれる内容を そのまま 出力するよう指示することになります。プログラミングでは、これは リテラル文字列 と呼ばれます。ここでは英語を使っているので、静的テキストと呼びましょう。ProtoPie は静的テキストを、このオレンジがかった赤色で表示します。
+文字を入力します。これで、静的テキストにさらに別のテキストを結合したいことを ProtoPie に伝えます。
Name Input レイヤーに入力された内容を含めたいと思います。ProtoPie は、入力されたテキストをレイヤーのプロパティとして自動的に保存します。フォーミュラ内でこのプロパティにアクセスしたいのです。フォーミュラ入力ボックスの右端付近に表示される ⊕ アイコンをクリックしてください。すると、シーン内のすべてのレイヤーが表示されます。Name レイヤーを選択してください。
ProtoPie はレイヤー名を緑色でハイライトします。
このレイヤーのプロパティにアクセスするには、ドット
.文字を入力します。利用可能なすべてのプロパティの一覧が表示されます。下にスクロールしてtextプロパティを選択してください。
OK をクリックしてフォーミュラを確定します。
これをプレビューしてみましょう。入力ボックスに名前を入力し、Enter を押してください。
うまくいきましたが、まだ少し不完全です... "Hello," と "Jeff" の間にスペースがありません。これは、ProtoPie にスペースを追加するよう指示していなかったからです。フォーミュラを修正しましょう。
Text レスポンスでフォーミュラボックスをクリックし、∫x アイコンを表示します。
静的テキスト部分を修正して、カンマの後ろ、閉じ引用符の前にスペースを入れます。静的テキストを書くときは、ProtoPie は引用符の間に含まれる内容を、スペースも含めて そのまま 出力することを忘れないでください。
∫x アイコンをクリックしてフォーミュラを表示します。
ここで、あいさつ文の最後に感嘆符を追加して、ProtoPie にもう少し会うのが楽しみだと伝えましょう。追加の
+文字を使えば、さらにテキストを結合できます。次のように、静的テキスト"!"をフォーミュラの末尾に追加してください。
OK をクリックして変更を確定します。
もう一度プレビューしてみましょう。今度は、あいさつ文にスペースが入り、最後に感嘆符が付いているはずです。
よくできました！ ProtoPie のフォーミュラは、テキストの結合だけで終わりません。次のレッスンでは、ProtoPie に計算をさせるために使います。それではまた！
