パート 1 では、Formulas を使ってテキストをつなげる方法を学びました。ここではさらに掘り下げ、より複雑な計算を行います。
必要なもの
このチュートリアルに沿って進めるには、このサンプル Pie をダウンロードして Studio で開いてください。
学ぶ内容
このチュートリアルを終える頃には、次のことを学んでいます:
数学計算を行う Formula を作成する方法
Functions の概要
所要時間: 15 分以内
テキストから数学計算へ
同じ Pie を使って、Scene 3 - Calculate を開きます。この Scene には 2 つの入力欄と 4 つのボタンがあります。ここでやりたいのは、ユーザーに各欄へ数値を入力してもらい、その後で実行したい計算を選んでもらうことです。今回の場合は、加算、減算、乗算、除算です。Pie に目的の計算を行わせ、結果をボタンの下に表示します。
Tap トリガーを Add レイヤーに追加します。
Text レスポンスを Result レイヤーに追加します。
再び、まだ分からない入力を扱うので、Formula を使います。Content. の下にあるドロップダウンで Formula を選択してください。
その下のボックスをクリックすると、おなじみの ∫x アイコンが表示されます。それをクリックして Formula 入力欄を展開します。
前回と同じように、Formula ボックス右端付近に表示される ⊕ アイコンをクリックし、
Number 1レイヤーを選びます。
このレイヤーの
textプロパティにアクセスしたいので、ドット.を入力してNumber 1レイヤーのすべてのプロパティを表示します。下へスクロールして text. を選びます。+を入力して、ProtoPie に加算したいことを伝えます。もう一度 ⊕ アイコンをクリックし、今度はNumber 2レイヤーを選びます。.を入力してtextプロパティを選びます。
OK をクリックして Formula を確定します。
これをプレビューしてみましょう。両方の入力欄に数値を入力し、+ アクションボタンをクリックします。
うまくいきませんでしたよね？ 2 つの数値を足して合計を出す代わりに、ProtoPie は 2 つの数値を連結してしまいました。私の例では、5 + 6 が 11 ではなく 56 になってしまいました！
なぜこんなことが起きたのでしょうか？
パート 1 を覚えているなら、Formula 内の + 文字は、テキストをつなげたいことを ProtoPie に伝えるために使いました。やや紛らわしいのですが、2 つの数値を算術的に足したいときにも使われます。ProtoPie は、どの種類の操作をしたいのかを賢く推測しようとしますが、この場合は間違えました。名前が示すとおり、ProtoPie は Number 1 と Number 2 フィールドの text プロパティを数値ではなくテキストとして扱っているため、2 つのテキストを連結しようとしていると判断してしまうのです。
これを修正するには、text プロパティをどう扱うかを ProtoPie に明示的に伝えます。そのために Function を使います。Function は、あらかじめ定義された命令のまとまりを指す、少し凝った呼び方です。text プロパティを数値として扱うよう ProtoPie に伝えてくれるものが欲しいわけです。
Formula を変更するには ∫x アイコンをクリックします。Formula 入力欄の右端にある
?アイコンをクリックして、ブラウザーで Formulas のドキュメントを開きます。
左側のパネルで Formulas → Functions. に移動します。
これが ProtoPie で利用できるすべての Functions です。このチュートリアルが終わったら、実際に使える Functions をじっくり試してみてください。
Type Conversion セクションまでスクロールし、
number(source:TEXT)関数を探します。
すべての関数には似た形式があります:
関数名。この場合は
numberです。関数に入力として渡す 1 つ以上のパラメーターです。かっこで囲まれます（例:
(source:TEXT)）。これは、この関数が 1 つのパラメーターを受け取り、そのパラメーターはテキスト形式でなければならないという意味です。関数が複数のパラメーターを取る場合は、コンマで区切ります（例:format(value:NUMBER,format:TEXT)は 2 つのパラメーター、つまり数値とテキストを受け取ります）。関数が実行後に返す情報の種類です（例:
-> NUMBER）。
いま扱っているのはテキストで、それを数値に変換したいので、この関数はまさに必要なものです。テキストを受け取り、数値に変換します。
このように Formula を修正します。
もう一度プレビューして、問題が解決したか確認しましょう。
やった！
あとは、残りのボタンに対して同様のインタラクションを作るだけです。手順を最初からやり直して上記の作業をすべて繰り返すこともできますが、もっと早い方法は、すでに作ったものを複製して、目的のアクションに合わせて修正することです。
Tap トリガーをクリックして選択し、右クリックして Duplicate を選びます。
💡 ヒント: cmd + D（Mac）または ctrl + D（Windows）でも同じことができます。
次へ進む前に、同じ名前の Tap Trigger が 2 つあります。分かりやすいように名前を変更しましょう。Trigger のラベルをダブルクリックして、1 つ目を Tap Add、2 つ目を Tap Subtract に変更します。
複製した Trigger を編集して、Subtract ボタンで動作し、減算を行うようにしましょう。
Tap Subtract Trigger をクリックして選択し、Subtract レイヤーに再び関連付けます。
その下の Text Response をクリックし、Formula を加算ではなく減算に変更します。
+文字を-に変えます。
これを、乗算と除算のアクションでもう 2 回行います。ここまでで、キーボードに乗算記号も除算記号もないことに気づいたはずです。プログラマーはずっと前に、* を乗算、/ を除算の表記として使うことでこの問題を解決しました。各 Formula はそれぞれ次のようになります:
Formula: 乗算
Formula: 除算
これをプレビューすると、数値に対して 4 つすべてのアクションを実行できるはずです。数値を別のものに変えても、計算はそのまま正しく動きます。これが Formula を使う力です！
空白について
上の Formula では、演算子（+、-、*、/ はすべて operators と呼ばれます）の前後にスペースを入れていませんでした。Formula が複雑になるにつれて、読みづらくなることがあります。次のような Formula を書き直すのはまったく問題ありません:
こんなふうにです（* 文字の前後にスペースがあることに注目してください）:
どちらもまったく同じ結果になりますが、2 つ目のほうが少し読みやすくなります。実際、ほかの多くの場所にも空白を入れられます。たとえば、これでも問題ありません:
ProtoPie は、これで何を意味しているのかを理解できるほど賢いのです:
ただし、空白が重要になる場所もいくつかあります。"Hello," と "Hello, " の違いはすでに説明しました。また、次のようにしようとすると:
ProtoPie はこれを受け付けません。変数名にスペースは使えないからです。ProtoPie は、3 つの異なる変数を使おうとしていると解釈しますが、そのどれも見つかりません。ProtoPie は、問題箇所に赤いジグザグの下線を引いて助けてくれます。Formula で問題が起きたら、まず赤いジグザグの下線を確認するのがよいでしょう。
「できました！ 簡単です」 + Type of Pie``.text + 「 Pie!」
これで、Formula を使って Pie をどれだけ本物らしくできるか、しっかり理解できたはずです。静的な値にこだわる必要はありません。Formula を使う機能は ProtoPie のほとんどどこにでもあります。∫x アイコンを探してみてください。Formula を使って体験をさらに高いレベルへ引き上げるさまざまな方法を、ぜひ試してみてください。
関連コンテンツ
長押しと Formulas を使って拡大画像オーバーレイを作成する このチュートリアルでは、関連する ProtoPie の formula と trigger を使って、拡大画像プレビューを作成する方法を学びます。
ProtoPie の Formula 機能で入力ステッパーをプロトタイプする ProtoPie を使って入力ステッパーを簡単にプロトタイプ化する方法を学びます。実現するために必要な各要素、formula、条件を順に見ていきます。
スクロールに反応するスティッキーヘッダーを作成する最も簡単な方法 アプリのヘッダーをスクロール方向に応じて表示・非表示にしたいと思ったことはありませんか？ ここでは、シンプルな条件と formula を使ってその方法を紹介します。
